1、概念
JavaScript简称JS，是运行在浏览器端的一门脚本语言。其代表行为（网页界面和用户交互），用于响应用户操作。一开始主要用来做浏览器端验证，但是现在功能已经不止于此。 所谓的脚本语言就是指：代码不需要编译，可以直接运行，并且读入一行，运行一行。
特点： 弱类型:声明时不需要指定类型 动态类型的语言：可以动态的分配类型 是解释型的语言，由浏览器的JavaScript引擎执行
2、编写的位置
需要写在script标签中：
<script type="text/javascript">
// JavaScript代码
</script>
可以引入外部的js文件：
<script type="text/javascript" src=""></script>
src为外部js文件的路径
3、变量的声明
不需要指定类型，通过var关键字声明，要告诉浏览器自己编写的是JavaScript代码。
类型的分配
首先需要声明变量；然后给变量赋值时，会分配类型；也可以重新给变量赋值，动态分配类型。
示例：
// 声明变量a
var a;
// 给变量a赋值为10【即数值型】
a = 10;
// 弹出一个警告框
alert(a); // 10
// 重新将字符串复制给变量a【动态改变a的类型为字符型】
a = "abc";
alert(a); // abc
命名规范
字母，下划线（_），美元符号（$）开头，推荐使用字母开头，大小写敏感。
4、函数
相当于Java中的方法 在JavaScript中，函数也被看作为一个对象，可以将一个函数的引用赋值给一个变量
函数的声明
通过function关键字 每一个语句都是用分号（;）隔开
有名函数
function 函数名 (形式参数1, 形式参数2){ };
不需要指定形参的类型
匿名函数
var 变量名 = function(){};
变量名就是函数名
函数的使用
通过函数名【有名函数】或接收函数的变量名【匿名函数】，外加小括号来调用函数 函数名(实参);
函数的特点
⑴ js函数的形参，不需要指定类型，即不需要使用var关键字 ⑵ js函数调用时，不会检查参数的个数和类型 ⑶ 当传入的参数和函数的参数个数不匹配时： ⒈ 参数不够：使用null补充 ⒉ 参数过多：从前往后匹配使用
使用示例
【无参的匿名函数】
// 声明一个匿名函数，并用变量fun来接收
var fun = function(){
alert("我是匿名函数");
};
// 通过fun来调用函数
fun();
【有参的有名函数】
// 声明一个有名(sum)的有参的函数
// a和b不需要指定类型，所以没有写var
function sum(a, b){
// 返回a+b的结果
return a + b;
};
// 打印两个数值相加
alert(sum(3, 4.7)); // 7.7
// 打印数值和字符串相加
alert(sum("a", 2)); // a2 【字符串拼接】
// 打印数值和布尔类型相加
// true为1；false为0，和数字计算
alert(sum(false, 3)); // 3
alert(sum(true, 3)); // 4
// 打印形参个数不匹配的结果
// 少写参数
alert(sum(3)); // NaN 【Not A Number】
// 多写参数
alert(sum(1, 2, 3)); // 3 【会从前往后匹配使用】
5、对象
在JavaScript中，所有的对象都是Object类型
创建对象的方式
⑴ 通过new Object(); 来创建一个对象 ⑵ 直接创建并初始化对象 { }; 并在大括号中初始化属性和函数，属性或函数跟值用冒号（:）连接，多个属性或函数之间通过逗号（,）隔开
注意： ⑴ 对象的属性或函数，必须通过对象来调用 ⑵ 调用不存在的属性，返回结果为：undefined【未定义的】
使用示例
// ⑴ 通过new Object()，创建一个对象
var obj1 = new Object();
obj1.name = "张三";
obj1.age = 14;
obj1.info = function(){
// 通过对象来调用 通过this关键字来调用【this代表调用这个函数的对象】
return "我是：" + obj1.name + "，年龄：" + this.age;
};
alert(obj1.name); // 张三
alert(obj1.info());// 我是：张三，年龄：14
// 该对象没有此属性
alert(obj1.a); // undefined
// ⑵ 直接创建并初始化对象
var obj2 = {
name:"李四",
age:16,
info:function(){
return this.name + ", " + this.age;
}
};
alert(obj2.info());// 李四, 16
6、事件
事件即：用户和浏览器之间发生的交互
注意：需要给标签设置特定事件时，使用JS代码来给HTML标签指定事件，当特定的操作发生时，事件方法才会被浏览器调用
例如：通过js给按钮设置单击事件 三种方式： ⑴ 每一个标签都有事件的属性: onclick,可以在属性值中直接使用js代码 但是这种方式的耦合度很高，基本不使用 ⑵ 在script标签内书写js代码 要写在所有的标签后面 ⑶ 在head标签中的script标签中书写js代码 但是如果直接写js代码，会报错： Uncaught TypeError: Cannot set property ‘onclick’ of null 因为文档的加载方式是从上到下，执行js代码的时候，btn对象还没有，所以对象为空
解决方法：让js代码在整个文档加载完成之后再执行 这时就需要调用window对象的onload函数。因为这个函数是当文档加载完成后，浏览器才调用
Tips：window对象：表示浏览器窗口
使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>添加点击事件</title>
<script type="text/javascript">
/* 添加事件方式3，在头部标签中的script标签中写JS代码
需要调用window对象的onload函数
这样才能找到btn3按钮对象 */
window.onload = function(){
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
alert("Button 3");
};
};
</script>
</head>
<body>
<!-- 添加事件方式1，通过标签的onclick属性来创建点击事件
这种方式耦合度较高，尽量不要用 -->
<input type="button" value="按钮1" onclick="alert('我是按钮1');" />
<br /><br />
<button id = "btn2">按钮2</button>
<br /><br />
<button id = 'btn3'>按钮3</button>
<!-- 添加事件方式2，在所有的标签的下面添加JS代码 -->
<script type="text/javascript">
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
alert("按钮2");
};
</script>
</body>
</html>
7、DOM
概念
Document Object Model 文档对象模型 帮助我们在JS中查找标签对象，对标签进行增删改查，添加或修改属性，设置CSS样式等操作
将整个文档当作一个对象，页面中所有的内容都是对象，都是document的后代对象。而对象操作标签（元素）很方便，属性和函数可以直接调用 缺点是：使用麻烦，浏览器兼容性差 因为浏览器解析网页有三个引擎：html、css、js引擎，每个浏览器的解析效果不同，所以在使用时需要判断是哪个浏览器 所以一般开发时都会使用第三方的JS库，例如jQuery等
Document：代表整个 HTML 文档，可以用来访问页面中的所有元素
Window对象表示一个浏览器窗口或一个框架。Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。所以，可以只写document，而不必写 window.document
节点
节点：Node——构成HTML文档最基本的单元
节点分为三类： 元素节点：构成HTML文档最基本的HTML元素，对应HTML文档中的HTML标签 属性节点：元素的属性 文本节点：HTML标签中的文本内容
示例：
<font color="red">字体</font>
元素节点：所有的font标签，即：<font color="red">字体</font>
属性节点：font标签的属性，即：color="red"
文本节点：font标签的文本内容，即：字体
元素类型
父元素：只要有子元素的元素都是父元素 子元素：有上级元素的元素 祖先元素：父元素的更上级元素 后代元素：子元素的下级元素 例如： html是div的祖先元素 div是html的后代元素 兄弟元素：在同一个层级内的元素 例如： head和body就是兄弟元素
常用的DOM对象属性
nodeName
返回节点的名称
nodeType
返回节点的类型
nodeValue
返回节点的值
innerHTML
获取或设置元素的文本内容
虽不是W3C标准，却被所有主流的浏览器支持
① 读取元素内部HTML代码
元素对象.innerHTML
② 修改元素内部HTML代码
元素对象.innerHTML=HTML代码
childNodes
返回元素的所有子节点。返回值类型为 [object NodeList]
Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历
注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用
firstChild
返回元素的第一个子节点 注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用
lastChild
返回元素的最后一个子元素 注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用
parentNode
返回元素的父节点
previousSibling
返回元素的前一个兄弟节点 注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用
nextSibling
返回元素的后一个兄弟节点 注意：因为浏览器的兼容问题，DOM解析时会将空格、文本也解析成一个节点对象。所以该属性最好不要用
value
返回或设置元素的value属性值
常用的DOM对象方法
getElementById
document.getElementById(String elementId);
返回带有指定 ID 的元素。查找一个元素
getElementsByTagName
document.getElementsByTagName(String tagname);
根据标签名查找元素。返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。查找一组元素。返回值类型为[object HTMLCollection]
Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历
getElementsByName
document.getElementsByName(String elementName);
根据name属性值查询元素。一般是input元素或一组元素。返回值类型为[object HTMLCollection]
Tips：对于集合或节点数组，可以调用length来获取长度，并使用for循环来遍历
使用示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>DOM操作</title>
<script type="text/javascript">
window.onload = function(){
// 根据标签名获取元素【返回一个集合】
var btns = document.getElementsByTagName("button");
// 获取节点类型
// alert(btns); // [object HTMLCollection]
// 因为整个页面中只有一个button，所以取第一个
var btn = btns[0];
// alert(btn); // [object HTMLButtonElement]
// 修改按钮的onclick事件
btn.onclick = function(){
// 根据id获取节点
var fEle = document.getElementById("f1");
fEle.color = "red";
};
//
// 根据name属性获取节点【返回一个集合】
var lists = document.getElementsByName("list");
// alert(lists); // [object HTMLCollection]
// 因为整个页面中只有一个无序列表，所以取第一个
var list = lists[0];
// 得到ul的所有子节点【li】
var children = list.childNodes;
// 获取集合的长度
var len = children.length;
// 因为有的浏览器在解析DOM时，会将空格、字符也解析为节点
alert(len); // 7 【IE10 测试】
var first = list.firstChild;
// 还是因为有的浏览器会将空格解析为节点
alert(first); // [object Text] 【IE10 测试】
var last = list.firstChild;
alert(last); // [object Text] 【IE10 测试】
//
// 获取id为li2的li标签
var li2 = document.getElementById("li2");
// 获取li的父节点【ul】
var parentEle = li2.parentNode;
alert(parentEle); // [object HTMLUListElement]
// 获取li的前一个兄弟节点
var preEle = li2.previousSibling;
// 还是因为有的浏览器会将空格解析为节点
alert(preEle); // [object Text] 【IE10 测试】
// 获取li的下一个兄弟节点
var nextEle = li2.nextSibling;
alert(nextEle); // [object Text] 【IE10 测试】
//
var hEle = document.getElementsByTagName("h1")[0];
// 获取元素的文本内容
alert(hEle.innerHTML); // 这是1级标签
hEle.innerHTML = "修改！";
var fEle = document.getElementById("f1");
alert(fEle.innerHTML); // 我是font标签
// 节点的名称
alert(fEle.nodeName); // FONT
// 节点的类型
alert(fEle.nodeType); // 1
// 节点的值
alert(fEle.nodeValue); // null
var txtEle = document.getElementById("txt");
// 获取input标签的value属性值
var typeEle = txtEle.value;
alert(typeEle);
// 修改input标签的value属性值
txtEle.value = "txt";
};
</script>
</head>
<body>
<h1>这是1级标签</h1>
<font id="f1">我是font标签</font><br /><br />
<button>让上面的font标签文字变红色</button><br /><br />
<ul name="list">
<li>列表项1</li>
<li id="li2">列表项2</li>
<li>列表项3</li>
</ul>
<input type="text" id="txt" value="文本框" />
</body>
</html>
