JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
由浏览器解释执行，会涉及到浏览器的兼容性问题。
JavaScript 可以通过不同的方式来输出数据：
使用 window.alert() 弹出警告框。使用 document.write() 方法将内容写到 HTML 文档中。使用 innerHTML 写入到 HTML 元素。使用 console.log() 写入到浏览器的控制台。JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
以下代码是可以正常运行的。
x = 5; // 变量 x 设置为 5 elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x; // 在元素中显示 x var x; // 声明 x下面的代码y 输出了 undefined，这是因为变量声明 (var y) 提升了，但是初始化(y = 7) 并不会提升，所以 y 变量是一个未定义的变量。
var x = 5; // 初始化 x elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x + " " + y; // 显示 x 和 y var y = 7; // 初始化 y可以通过将变量的值设置为 null 来清空变量。
在 JavaScript 中 null 表示 “什么都没有”。null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回是object。
在 JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined。
null 和 undefined 的值相等，但类型不等
typeof undefined // undefined typeof null // object null === undefined // false null == undefined // true在 JavaScript function内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
全局JavaScript变量在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。全局变量属于windows对象。
字符串属性
属性描述constructor返回创建字符串属性的函数length返回字符串的长度prototype允许您向对象添加属性和方法字符串方法
方法描述charAt()返回指定索引位置的字符charCodeAt()返回指定索引位置字符的 Unicode 值concat()连接两个或多个字符串，返回连接后的字符串fromCharCode()将 Unicode 转换为字符串indexOf()返回字符串中检索指定字符第一次出现的位置lastIndexOf()返回字符串中检索指定字符最后一次出现的位置localeCompare()用本地特定的顺序来比较两个字符串match()找到一个或多个正则表达式的匹配replace()替换与正则表达式匹配的子串search()检索与正则表达式相匹配的值slice()提取字符串的片断，并在新的字符串中返回被提取的部分split()把字符串分割为子字符串数组substr()从起始索引号提取字符串中指定数目的字符substring()提取字符串中两个指定的索引号之间的字符toLocaleLowerCase()根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射toLocaleUpperCase()根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射toLowerCase()把字符串转换为小写toString()返回字符串对象值toUpperCase()把字符串转换为大写trim()移除字符串首尾空白valueOf()返回某个字符串对象的原始值FAQ:
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串+ 运算符用于把文本值或字符串变量加起来（连接起来）如果布尔对象无初始值或者其值为:
0-0null“”falseundefinedNaN那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 “false” 时）！
三目运算符：variablename=(condition)?value1:value2
JavaScript 中，我们可使用以下条件语句：
if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码 if (condition) { 当条件为 true 时执行的代码 } if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码 if (condition) { 当条件为 true 时执行的代码 } else { 当条件不为 true 时执行的代码 } if…else if…else 语句- 使用该语句来选择多个代码块之一来执行 if (condition1) { 当条件 1 为 true 时执行的代码 } else if (condition2) { 当条件 2 为 true 时执行的代码 } else { 当条件 1 和 条件 2 都不为 true 时执行的代码 } switch 语句 - 使用该语句来选择多个代码块之一来执行 /* 工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。*/ switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码 }JavaScript 支持不同类型的循环：
for - 循环代码块一定的次数 for (var i=0; i<5; i++) { x=x + "该数字为 " + i + "<br>"; } for/in - 循环遍历对象的属性 var person={fname:"John",lname:"Doe",age:25}; for (x in person) // x 为属性名 { txt=txt + person[x]; } while - 当指定的条件为 true 时循环指定的代码块 while (i<5) { x=x + "The number is " + i + "<br>"; i++; } // 如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。 do/while - 同样当指定的条件为 true 时循环指定的代码块 do { x=x + "The number is " + i + "<br>"; i++; } while (i<5); // 该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行 // 别忘记增加条件中所用变量的值，否则循环永远不会结束！这可能导致浏览器崩溃。break
break 语句可用于跳出循环。
continue
continue 语句跳出本次循环，会继续执行下一次循环（如果有的话）
JavaScript 变量可以转换为新变量或其他数据类型：
通过使用 JavaScript 函数通过 JavaScript 自身自动转换Number Date Boolean —> String:
toString()val + ‘’;String()String ----> Number:
Number(“3.14”) // 返回 3.14Number(" ") // 返回 0Number("") // 返回 0Number(“99 88”) // 返回 NaNparseFloat()parseInt()FAQ:
NaN 的数据类型是 number数组(Array)的数据类型是 object日期(Date)的数据类型为 objectnull 的数据类型是 object未定义变量的数据类型为 undefined面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
在方法中，this 表示该方法所属的对象。如果单独使用，this 表示全局对象。在函数中，this 表示全局对象。在函数中，在严格模式下，this 是未定义的(undefined)。在事件中，this 表示接收事件的元素。类似 call() 和 apply() 方法可以将 this 引用到任何对象。javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
# 包含了一个位置信息，默认的锚是**#top** 也就是网页的上端。而javascript:void(0), 仅仅表示一个死链接。在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。如果你要定义一个死链接请使用 javascript:void(0) 。
在函数中调用的参数是函数的隐式参数。
JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。
如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。
隐式参数的改变在函数外是不可见的。
在JavaScript中，可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部（全局变量）。
修改对象属性在函数外是可见的。
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够改变页面中的所有 HTML 属性JavaScript 能够改变页面中的所有 CSS 样式JavaScript 能够对页面中的所有事件做出反应通过 id 查找 HTML 元素:
var x=document.getElementById("intro");通过标签名查找 HTML 元素:
var x=document.getElementById("main"); var y=x.getElementsByTagName("p");通过类名找到 HTML 元素:
var x=document.getElementsByClassName("intro");改变HTML内容:
document.getElementById(*id*).innerHTML=*新的 HTML*改变HTML属性:
document.getElementById(*id*).*attribute=新属性值*改变HTML样式:
document.getElementById(*id*).style.*property*=*新样式*addEventListener() 方法:
document.getElementById("myBtn").addEventListener("click", displayDate);removeEventListener() 方法:
*element*.removeEventListener("mousemove", myFunction);创建新的HTML元素节点:
appendChild()
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var element = document.getElementById("div1"); element.appendChild(para); </script>insertBefore()
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var element = document.getElementById("div1"); var child = document.getElementById("p1"); element.insertBefore(para, child); </script>移除已经存在的元素:
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.removeChild(child); </script>替换HTML元素：
<div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另外一个段落。</p> </div> <script> var para = document.createElement("p"); var node = document.createTextNode("这是一个新的段落。"); para.appendChild(node); var parent = document.getElementById("div1"); var child = document.getElementById("p1"); parent.replaceChild(para, child); </script>getElementsByTagName() 方法返回 HTMLCollection 对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。
集合中的元素可以通过索引(以 0 为起始位置)来访问。
HTMLCollection 对象的 length 属性定义了集合中元素的数量。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)对于 Internet Explorer 8、7、6、5：
document.documentElement.clientHeightdocument.documentElement.clientWidth或者
document.body.clientHeightdocument.body.clientWidth var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;window的其他方法:
window.open() - 打开新窗口window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸window.screen 对象包含有关用户屏幕的信息。
window.screen对象在编写时可以不使用 window 这个前缀。
一些属性：返回访问者屏幕的宽度，高度，以像素计，减去界面特性，比如窗口任务栏。
screen.availWidth - 可用的屏幕宽度screen.availHeight - 可用的屏幕高度16.4 Window Location
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
location.hostname 返回 web 主机的域名location.href 返回当前页面的 URLlocation.pathname 返回当前页面的路径和文件名location.port 返回 web 主机的端口 （80 或 443）location.protocol 返回所使用的 web 协议（http: 或 https:）Location Assign()加载新的文档。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <head> <script> function newDoc(){ window.location.assign("https://www.runoob.com") } </script> </head> <body> <input type="button" value="加载新文档" onclick="newDoc()"> </body> </html> <!-- window.location.assign(url) ： 加载 URL 指定的新的 HTML 文档。 就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。 window.location.replace(url) ： 通过加载 URL 指定的文档来替换当前文档 ，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的 -->window.history 对象包含浏览器的历史。
window.history对象在编写时可不使用 window 这个前缀。为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。一些方法：
history.back() - 与在浏览器点击后退按钮相同history.forward() - 与在浏览器中点击向前按钮相同 // history.go(param) // go() 里面的参数表示跳转页面的个数 例如 history.go(1) 表示前进一个页面; // go() 里面的参数表示跳转页面的个数 例如 history.go(-1) 表示后退一个页面; // go() 里面的参数为0,表示刷新页面window.navigator 对象包含有关访问者浏览器的信息。
JavaScript 中三种消息框：警告框、确认框、提示框。
提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
var person=prompt("请输入你的名字","Harry Potter"); if (person!=null && person!="") { x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; }通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setInterval() - 间隔指定的毫秒数不停地执行指定的代码。setTimeout() - 在指定的毫秒数后执行指定代码。注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
显示当前时间 ：
var myVar=setInterval(function(){myTimer()},1000); function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; }clearInterval(方法名) 方法用于停止 setInterval() 方法执行的函数代码。(计时方法时你必须使用全局变量)
等待3秒，然后弹出 “Hello”:
setTimeout(function(){alert("Hello")},3000);y Potter"); if (person!=null && person!="") { x="你好 " + person + “! 今天感觉如何?”; document.getElementById(“demo”).innerHTML=x; }
### 16.7 JavaScript计时事件 通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。 在 JavaScritp 中使用计时事件是很容易的，两个关键方法是: - setInterval() - 间隔指定的毫秒数不停地执行指定的代码。 - setTimeout() - 在指定的毫秒数后执行指定代码。 **注意:** setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。 #### 16.7.1 setInterval() 显示当前时间 ： ```javascript var myVar=setInterval(function(){myTimer()},1000); function myTimer() { var d=new Date(); var t=d.toLocaleTimeString(); document.getElementById("demo").innerHTML=t; }clearInterval(方法名) 方法用于停止 setInterval() 方法执行的函数代码。(计时方法时你必须使用全局变量)
等待3秒，然后弹出 “Hello”:
setTimeout(function(){alert("Hello")},3000);clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。(计时方法时你必须使用全局变量)
