一、JavaScript，运行于JavaScript解释器中的，解释型脚本语言
1、JavaScript主要用途 ：JavaScript主要读写HTML元素、在网页中嵌入动态文本、动态修改CSS样式表；对浏览器事件做出响应、表单数据验证、检测访客的 浏览器信息等；
2、JavaScript的相关应用 ：验证数据；页面特效；数值计算；动态页面效果
3、JavaScript位置 ：我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的head或者body部分；放在<head>部分，最常用的方式是在页面中head部分放置<script>元素，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分；放在<body>部分，JavaScript代码在网页读取到该语句的时候就会执行。
4、JavaScript引用方式 ：1、使用<script>标签在HTML文件中添加JavaScript代码；2、单独创建一个JavaScript文件(简称JS文件),其文件后缀通常为.js，然后将JS代码直接写在JS文件中，在HTML中添加如下代码，就可将JS文件嵌入HTML文件中，<script src="script.js"></script> ；3、放置在HTML标签以on开头的属性即事件处理程序中；
5、JavaScript输出 ：1、 使用Windows.alert()弹出警告框；2、使用Document.write()方法将内容写到HTML文档中（ document对象，代表整个HTML 文档，可用来访问页面中的所有元素 ）；3、使用innerHTML写入到HTML元素；4、使用console.log()写入到浏览器的控制台；
6、一个完整的JavaScript实现，应该由以下三个部分组成：1、核心，ECMAScript；2、文档对象模型，DOM，document object model；3、浏览器对象模型，BOM，browser object model；
通过核心对象，DOM对象，BOM对象，作用于HTML元素
二、JavaScript核心
1、数据类型，JavaScript数据类型有以下几种：数值型：数字可以带小数点，也可以不带；字符串型：用引号包围的文本；布尔型：只有两个取值，true false，非0或非空为true；null类型：表示从未赋值的值，只有一种取值null，引用一个没有定义的变量，返回null；undefined类型：专门用来确定一个已经创建但是没有初值的变量；
数值型，在JavaScript中，所有的数字都是浮点型；
当一个数字直接出现在JavaScript程序中时，被称为数值直接量，JavaScript支持的数值直接量有整型数据、十六进制和八进制数据、浮点型数据，注意，负号，是一元求反运算符，不是数值直接量的一部分；
toFixed() 方法，可把number四舍五入为指定小数位数的数字，返回值为string类型，typeof，查看数据类型
字符串型，字符串string 是由Unicode字符、数字 、标点 符号等组成的序列，它是JavaScript用来表示文本的数据类型；
字符串型的数据包含在单引号和双引号中；由单引号定界的字符串中可以包含双引号，由双引号定界的字符串中也可以包含单引号；可以采取内双外单的形式让输出的字符串带双引号，如果外双的形式，让字符串带双引号，可以采取转义字符 \" ；字符串可以用+号进行连接运算；
布尔型，布尔数据类型只有两个值，这两个合法的值分别由直接量true和false表示，它表示某个事物是真或假；
JavaScript在必要的时候，将true转化为1，将false转化为0
null类型，null，它表示值为空，用于定义空的或者不存在的引用；如果引用 一个没有定义的变量，则返回一个null值，null不等同于空字符串和0；
未定义类型，未定义类型的变量是undefined，表示变量还没有赋值，或者赋予一个不存在的属性值，此外，JavaScript中还有一种特殊类型的数字常量NaN，即“非数字”,当程序由于某种原因计算错误后，将产生一个没有意义的数字，此时JavaScript返回的数值就是NaN
null undefined的区别是，null表示一个变量被赋予一个空值，而undefined则表示该变量尚未被赋值
转义字符型，以反杠开头的，不可显示的特殊字符通常称为控制字符，也被称为转义字符；在document.write( )语句中使用转义字符时，只有将其放在格式化文本标签<pre></pre>中才会起作用
Object类型，复合数据类型；值为基本数据类型的组合；
复合数据类型，json的遍历
JavaScript JSON，JSON 英文全称 JavaScript Object Notation，是独立的语言，用于存储和传输数据的格式，通常用于服务端向网页传递数据；
JSON 语法规则：数据为 键 / 值 对；数据由逗号分隔；大括号保存对象；方括号保存数组；
JSON 格式化后为 JavaScript 对象，JSON 格式在语法上与创建 JavaScript 对象代码是相同的，所以 JavaScript 程序可以很容易的将 JSON 数据转换为 JavaScript 对象；
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script> var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}'; document.writeln(typeof text + "<br/>"); var obj = JSON.parse(text); document.writeln(typeof obj.sites + "<br/>"); /* obj = obj.sites; for(var i=0; i<obj.length; ++i){ document.write(obj[i].name + " " + obj[i].url + "<br/>") ; } */ for(var i=0; i<obj.sites.length; ++i) document.write(obj.sites[i].name + " " + obj.sites[i].url + "<br/>") ; </script> </body> </html>
数据类型的自动转换，当字符串与其它类型用+连接，其它类型会转为字符串，其它的运算符-,*,/,%都会转换成Number类型；数据类型的强制转换，parseInt()，parseFloat()函数；
typeof运算符， 把类型信息用字符串返回，返回值有6种，number， string， boolean， object， undefined， function
2、变量，变量的主要作用是存取数据，提供存放信息的容器；JavaScript 是弱类型语言，对变量的定义不需要声明变量类型；JavaScript的变量是动态类型，相同变量可用作不同的类型；变量可以用关键字var显式声明，隐式声明的变量为全局变量；使用var可以同时声明多个变量，变量可以赋值（可以是不同数据类型值），也可以不赋值，只声明未赋值的变量，默认值为undefined；
3、函数，函数的定义是使用function关键字实现的，格式如下：
function 函数名(形式参数列表){ 函数体语句块; }
函数与其他JavaScript一样，必须位于<script></script>标记之间；函数可以有返回值吗，也可以没有返回值，返回值是通过return关键字加表达式实现的；函数的调用：作为函数直接调用；作为对象的方法调用；作为构造函数； 通过call和apply方法间接调用；
JavaScript 能够在事件发生时执行，因此，HTML DOM 事件可以调用函数，比如onmouseover事件；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="bgcolor" onmouseover="myfunction()" style="background-color: red;color:#FFFFFF;">鼠标指上面改变背景色</p>
<script>
function myfunction(){
var element=document.getElementById("bgcolor");
if(element.style.backgroundColor.match("red")){
element.style.backgroundColor = "blue";
element.style.color = "#FFFFFF";
element.innerHTML = "鼠标再指上面改变背景色";
}
else{
element.style ="background-color: red;";
element.style.color = "#FFFFFF";
element.innerHTML = "鼠标指上面改变背景色";
}
}
</script>
</body>
</html>
变量的作用域
<script>
var a = "全局变量";
function myfun(){
document.write(a);
var a = "内部变量";
document.write(a);
}
myfun();
document.write(a);
</script>
图片切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片切换</title>
</head>
<style>
#image{
display: block;
width: 500px;
height: 180px;
margin: 10px auto;
}
#next{
margin-left: 350px;
}
</style>
<body>
<img src="./images/1.gif" id="image" />
<button id="next">next</button>
<button id="prev">prev</button>
<script>
var image = document.getElementById('image');
var next = document.getElementById("next");
var prev = document.getElementById('prev');
var nowIndex = 1;
var count = 6;
next.onclick = function(){
nowIndex = nowIndex+1>count?1:nowIndex+1;
image.src = "img/"+nowIndex+".jpg";
}
prev.onclick = function(){
nowIndex = nowIndex<=1?count:nowIndex-1;
image.src = "img/"+nowIndex+".jpg";
}
</script>
</body>
</html>
4、控制语句，控制语句，if,if else,switch,while,for,try catch
try catch
<script>
var txt="";
function message()
{
try {
adddlert("Welcome guest!"); //函数名错误
}
catch(exception)
{
txt="本页有一个错误。" + "<br/>";
txt+="错误描述：" + exception.message + "<br/>";
document.write(txt);
}
}
message();
</script>
猜数字
<script>
var num = Math.floor(Math.random() * 100 + 1); //产生1～100之间的随机整数
do {
var guess = parseInt(prompt("下面进行猜数游戏\n请输入1-100之间的整数：", ""));
if (guess == num) {
alert("^_^ ,恭喜你，猜对了，幸运数字是：" + num);
break;
} else {
if (guess > num) {
alert("^_^ ,你猜的数字大了");
go_on = confirm("是否继续游戏？");
} else {
alert("^_^ ,你猜的数字小了");
go_on = confirm("是否继续游戏？");
}
}
} while (go_on);
alert("谢谢参与游戏！");
</script>
九九乘法口诀表
<table border="0" cellpadding="6" style="border-collapse:collapse;background-color:#FFFFFF;"> <script> for (var i = 1; i < 10; i++) { document.write("<tr>"); for (j = 1; j < 10; j++) if (j <= i) document.write("<td style='border:2px solid #004B8A;color: #; background:#ff5500;'>" + i + "*" + j + "=" + (i * j) + "</td>"); document.write("</tr>"); } </script> </table>
JavaScript 对象
Array，Boolean，Date，Math，Number，String，RegExp，Functions(Global，顶层函数及其属性)，Events(事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行)；
Array对象，（数组，索引数组，关联数组，数组API函数）
Array对象prototype属性，使您有能力向对象添加属性和方法，很有意思，添加属性语法：object.prototype.name=value；
<script type="text/javascript">
function employee(name,job,born)// 构造函数
{
this.name=name;
this.job=job;
this.born=born;
}
// 创建bill对象
var bill = new employee("Bill Gates","Engineer",1985);
employee.prototype.salary=null; // 添加了salary属性
bill.salary=20000; // 属性赋值
document.write(bill.salary);
</script>
employee.prototype.show = function() {console.log("prototype添加show方法");}
Date对象，Date对象用1表示一个月中的第一天，但用0表示一年中的第一个月；JavaScript定时器方法之一，Date对象的：setTimeout()方法 （另外一个方法Window对象的：setInterval() 方法）；
RegExp对象，正则表达式test方法，语法：RegExpObject.test(string)
<script type="text/javascript">
var str = "Visit phpStudy";
var patt1 = new RegExp("phpStudy");
var result = patt1.test(str);
document.write("Result: " + result);
</script>
三、DOM，HTML接口
什么是DOM，document object model，是W3C标准，文档对象模型，它允许程序和脚本动态地访问和更新文档的内容、结构和样式，对网页进行增删改查的操作。
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 对象
Document，Anchor，Area，Base，Body，Button，Canvas，Event，Form，Frame，Frameset，IFrame，Image，Input Button，Input Checkbox，Input File，Input Hidden，Input Password，Input Radio，Input Reset，Input Submit，Input Text，Link，Meta，Object，Option，Select，Style，Table，TableCell，TableRow，Textarea；
四、BOM，专门操作浏览器窗口的API；
Browser 对象
Window，Navigator，Screen，History，Location；
Window的prompt()方法，返回值类型string；parent是window对象的属性，返回父窗口；
五、浏览器内核的作用 ：1、内容排版引擎解析，html和css；2、脚本解释引擎解析，js；
六、查找元素对象，方法：
1、按id属性，精确查找一个元素对象
var elem = document.getElementById("id"); //只能用在document上，查找一个元素，不是所有的元素都有id
2、按标签查找
var elems = parent.getElementsByTagName("tag"); //查找指定parent结点下的所有标签为tag的子代结点
可用在任意父元素上，查所有子代结点，返回也给动态集合，只找到一个元素，用[0]取出
3、通过name属性查找
var elem = document.getElementsByName('name属性值'); //可以返回DOM树中具有指定name属性值的所有子元素集合
4、通过class查找
var elems = parent.getElementsByClassName("class"); //有兼容性问题ie9
var div = document.getElementById('news'); var list = div.getElementsByClassName('mainTitle');
5、通过CSS选择器查找
var elem = parent.querySelector("selector"); //只找一个元素，selector支持一切css中选择器，如果选择器匹配多个，只返回第一个
var elems = parent.querySelectorAll("selector"); //找多个，selector API返回的是非动态集合
