js基础和简单应用

来源：互联网发布：c语言是c 的基础吗编辑：程序博客网时间：2024/06/03 19:24

本篇文章是我看过某位大神的观点之后，对js的基础略作总结并加以精简，对从未接触过js的同学有奇效

JavaScript 是属于网络的脚本语言！

这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

JS与DOM的关系

浏览器有渲染html代码的功能，把html源码（如div,p标签等）在内存里形成一个DOM对象

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>里的内容JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

简单应用实例：

JavaScript：写入 HTML 输出

document.write("<h1>This is a heading</h1>");

document.write("<p>This is a paragraph</p>");

JavaScript：对事件作出反应

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

onclick 事件是我们学到的众多事件之一。

JavaScript：改变 HTML 内容

使用 JavaScript 来处理 HTML 内容是非常强大的功能。

x=document.getElementById("demo") //查找元素

x.innerHTML="Hello JavaScript"; //改变内容

您会经常看到 document.getElementByID("id")。这个方法是 HTML DOM 中定义的。

JavaScript：改变 HTML 样式

改变 HTML 元素的样式，属于改变 HTML 属性的变种。

x=document.getElementById("demo") //找到元素

x.style.color="#ff0000"; //改变样式

JavaScript：验证输入

JavaScript 常用于验证用户的输入。

if isNaN(x) {alert("Not Numeric")};

BOM对象（把浏览器的地址栏，历史记录，DOM等装在一个对象）

浏览器内部有JS解释器/引擎；在html里的JS代码会被引擎所执行，执行的结果是对DOM对象的操作（即是对节点树内的标签进行操作）

JS添加特效：无非就是用JS操作DOM对象

JS的引入方式

JS代码可在html中任意位置编写，但浏览器解析代码是从上到下的，需注意此时html是否已经解析该标签，能让JS能否获取该DOM对象，所以有时会把代码放到html的结束前，即是</html>前

直接在html中编写：

代码

</script>

通过外部引用进来： <script type=text/javascript src=””></script>

为防止网页加载缓慢，也可以把非关键的JavaScript放到网页底部

变量的声明

var 变量名；变量名区分大小写；不用var声明会污染全局变量；变量名以字母、下划线、美元符号开头，后面部分可数字

函数即完成特定功能的代码段；

常用方法

输出语句到html中，使用document.write(“”)

Confire() ：消息确认对话框；点击确认返回true

运算符问题

拼接运算符：+ ，如果是数字则相加，是字符则连接；如2+3+‘love’+4+5 //输出5love45

逻辑运算符或：返回为true的值；如：

var a = 1;

var b = false;

var d = (a || b); //d为1

逻辑运算符与：返回最后面的变量值

var a = 22;

var b=33;

alert(a && b); //输出33

阅读全文

1 0