JavaScript语法
- 调用方法
- 将JavaScript代码放到文档<head>标签中的<script>标签之间。
- 将JavaScript代码存为一个扩展名为.js的独立文件。
- 提示：把脚本置于 <body>元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
- 基本语法
- 语法结构：JavaScript程序使用Unicode字符集编写，它是一种区分大小写的语言，也就是说，在输入关键字，变量，函数名以及所有的标识符时，都必须采用一致的字母大小写格式。
- JavaScript会忽略程序中记号之间的空格，制表符和换行符。可以在程序中任意使用空格，制表符和换行符。
- JavaScript中简单语句后面通常都有分号(;)，但是如果语句放在不同的行中，就可以省区分号。
- JavaScript注释：// 一行注释；/* */多行注释。
- JavaScript合法的标识符命名规则为：第一个字符必须为字母，下划线或美元符号($)，接下来的字符可以是字母，数字，下划线或美元符号，数字不允许作为首字符出现。
- 当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。
| break | do | if | switch | typeof |
| case | else | in | this | var |
| catch | false | instanceof | throw | void |
| continue | finally | new | true | while |
| default | for | null | try | with |
| delete | function | return |
| abstract | double | goto | native | static |
| boolean | enum | implements | package | super |
| byte | export | import | private | synchronized |
| char | extends | int | protected | throws |
| class | final | interface | public | transient |
| const | float | long | short | volatile |
| debugger |
| arguments | encodeURI | Infinity | Object | String |
| Array | Error | isFinite | parseFloat | SyntaxError |
| Boolean | escape | isNaN | parseInt | TypeError |
| Date | eval | NaN | RangeError | undefined |
| decodeURI | EvalError | Number | ReferenceError | unescape |
| decodeURIComponent | Function | Math | RegExp | URIError |
- 异常处理：try/catch/finally
try{
var num = 1;
var num2 = faction(num1);
alert(num2);
}catch(e){
alert(e);
}finally{
alert('end');
}
只要执行了try从句的一部分，无论try从句的代码正常执行了多少，finally从句都会被执行，它通常在try从句的代码后用于清除操作。 通常情况下，控制流到达try从句的尾部，然后开始执行finally从句，以便进行必要的操作。 如果异常发生在try从句中，而且存在一个相关的catch从句处理异常，控制流首先将转移到catch从句，然后转移到finally从句。如果没有处理异常的局部catch从句，控制流首先将转移到finally从句，然后向上传播到最近的能够处理异常的catch从句。
- 函数
- call() 方法分别接受参数。 。
- apply() 方法接受数组形式的参数
function show(){
var myArray = ["BMW","Saab","Ford"];
for(var i=0;i<3;i++){
alert(myArray[i]);
}
}
- js输出
使用 window.alert() 写入警告框;
使用 document.write() 写入 HTML 输出;
使用 innerHTML 写入 HTML 元素;
使用 console.log() 写入浏览器控制台;
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：
- js事件
| 事件 | 描述 |
|---|---|
| onchange | HTML元素已被改变 |
| onclick | 用户点击了HTML元素 |
| onmouseover | 用户把鼠标移动到HTML元素上 |
| onmouseout | 用户把鼠标移开HTML元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面加载 |
- js字符串方法
- length 属性返回字符串的长度：
- indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：
- lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引： 注：如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。
- search() 方法搜索特定值的字符串，并返回匹配的位置： 注：两种方法，indexOf() 与 search()，是相等的。 这两种方法是不相等的。区别在于： search() 方法无法设置第二个开始位置参数。 indexOf() 方法无法设置更强大的搜索值（正则表达式）。
- slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。
- substring() 类似于 slice()。 不同之处在于 substring() 无法接受负的索引。
- substr() 类似于 slice()。 不同之处在于第二个参数规定被提取部分的长度
- replace() 方法用另一个值替换在字符串中指定的值：
- 请注意正则表达式不带引号。 如需替换所有匹配，请使用正则表达式的 g 标志（用于全局搜索）：
- 通过 toUpperCase() 把字符串转换为大写：
- 通过 toLowerCase() 把字符串转换为小写：
- concat() 连接两个或多个字符串;concat() 方法可用于代替加运算符。
- trim() 方法删除字符串两端的空白符：
- charAt() 方法返回字符串中指定下标（位置）的字符串：
- charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：
- 可以通过 split() 将字符串转换为数组：
- js数字方法
- toString() 以字符串返回数值。
- toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。
- toFixed() 返回字符串值，它包含了指定位数小数的数字：
- toPrecision() 返回字符串值，它包含了指定长度的数字：
- valueOf() 以数值返回数值：
- Number() 可用于把 JavaScript 变量转换为数值;Number() 还可以把日期转换为数字：
- parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：
- parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：
- MAX_VALUE 返回 JavaScript 中可能的最大数字。
- MIN_VALUE 返回 JavaScript 中可能的最小数字。 注：NaN 属于 JavaScript 保留字，指示数字并非合法的数字.
- js数组
- JavaScript 数组用于在单一变量中存储多个值。
- 通过引用索引号（下标号）来引用某个数组元素。
- 使用 Array.foreach() 函数遍历数组：
- 向数组添加新元素的最佳方法是使用 push() 方法：push() 方法返回新数组的长度： 注：在 JavaScript 中，数组使用数字索引。在 JavaScript 中，对象使用命名索引。
- JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。
- join() 方法也可将所有数组元素结合为一个字符串。
- pop() 方法从数组中删除最后一个元素：pop() 方法返回“被弹出”的值：
- shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。shift() 方法返回被“位移出”的字符串：
- unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：unshift() 方法返回新数组的长度。
- JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除： 注：使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。
- splice() 方法可用于向数组添加新项：第一个参数（2）定义了应添加新元素的位置（拼接）。 第二个参数（0）定义应删除多少元素。 其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。 splice() 方法返回一个包含已删除项的数组：
- concat() 方法通过合并（连接）现有数组来创建一个新数组：
- slice() 方法用数组的某个片段切出新数组。slice() 方法创建新数组。它不会从源数组中删除任何元素。
- sort() 方法以字母顺序对数组进行排序：
- reverse() 方法反转数组中的元素。
- 使用 Math.max.apply 来查找数组中的最高值：
- 使用 Math.min.apply 来查找数组中的最低值：
- forEach() 方法为每个数组元素调用一次函数（回调函数）。
- map() 方法通过对每个数组元素执行函数来创建新数组。 map() 方法不会对没有值的数组元素执行函数。 map() 方法不会更改原始数组。
- filter() 方法创建一个包含通过测试的数组元素的新数组。
- reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。 reduce() 方法在数组中从左到右工作。另请参见 reduceRight（）。 reduce() 方法不会减少原始数组。
- reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。 reduceRight() 方法在数组中从左到右工作。另请参见 reduce（）。 reduceRight() 方法不会减少原始数组。
- every() 方法检查所有数组值是否通过测试。
- some() 方法检查某些数组值是否通过了测试。
- find() 方法返回通过测试函数的第一个数组元素的值。
- js日期
- 创建日期对象
- new Date()
- new Date(year, month, day, hours, minutes, seconds, milliseconds)
- new Date(milliseconds):创建一个零时加毫秒的新日期对象：
- new Date(date string):从日期字符串创建一个新的日期对象： toDateString() 方法将日期转换为更易读的格式：
- 创建日期对象
| 方法 | 描述 |
|---|---|
| getDate() | 以数值返回天（1-31） |
| getDay() | 以数值获取周名（0-6） |
| getFullYear() | 获取四位的年（yyyy） |
| getHours() | 获取小时（0-23） |
| getMilliseconds() | 获取毫秒（0-999） |
| getMinutes() | 获取分（0-59） |
| getMonth() | 获取月（0-11） |
| getSeconds() | 获取秒（0-59） |
| getTime() | 获取时间（从 1970 年 1 月 1 日至今） |
- js数字
- Math.PI; 返回 3.141592653589793
- Math.round(x) 的返回值是 x 四舍五入为最接近的整数：
- Math.pow(x, y) 的返回值是 x 的 y 次幂：
- Math.sqrt(x) 返回 x 的平方根：
- Math.abs(x) 返回 x 的绝对（正）值：
- Math.ceil(x) 的返回值是 x 上舍入最接近的整数：
- Math.floor(x) 的返回值是 x 下舍入最接近的整数：
- Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。
- Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。
- Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：
- Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数：
- JavaScript 逻辑
- 使用 Boolean() 函数来确定表达式（或变量）是否为真：
- break 语句，如果没有标签引用，只能用于跳出一个循环或一个 switch。
- continue 语句（不论有无标签引用）只能用于跳过一个迭代。
- js this关键字
- 方法中的 this ,在对象方法中，this 指的是此方法的“拥有者”
- 在单独使用时，拥有者是全局对象，因此 this 指的是全局对象
- 在函数中使用时，在严格模式下，this 是未定义的（undefined）。
- 在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：
- 对象
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
var person = new Object();
person.firstName = "Bill";
person.lastName = "Gates";
person.age = 50;
person.eyeColor = "blue";
计数器实例
var obj = {
counter : 0,
get reset() {
this.counter = 0;
},
get increment() {
this.counter++;
},
get decrement() {
this.counter--;
},
set add(value) {
this.counter += value;
},
set subtract(value) {
this.counter -= value;
}
};
// 操作计数器：
obj.reset;
obj.add = 5;
obj.subtract = 1;
obj.increment;
obj.decrement;
Object.defineProperty()
对象构造器
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
var x1 = new Object(); // 一个新的 Object 对象
var x2 = new String(); // 一个新的 String 对象
var x3 = new Number(); // 一个新的 Number 对象
var x4 = new Boolean(); // 一个新的 Boolean 对象
var x5 = new Array(); // 一个新的 Array 对象
var x6 = new RegExp(); // 一个新的 RegExp 对象
var x7 = new Function(); // 一个新的 Function 对象
var x8 = new Date(); // 一个新的 Date 对象
- 使用对象字面量 {} 代替 new Object()。
- 使用字符串字面量 "" 代替 new String()。
- 使用数值字面量代替 Number()。
- 使用布尔字面量代替 new Boolean()。
- 使用数组字面量 [] 代替 new Array()。
- 使用模式字面量代替 new RexExp()。
- 使用函数表达式 () {} 代替 new Function()
JavaScript prototype 属性允许您为对象构造器添加新属性：
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.nationality = "English";
JavaScript prototype 属性也允许您为对象构造器添加新方法：
function Person(first, last, age, eyecolor) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eyecolor;
}
Person.prototype.name = function() {
return this.firstName + " " + this.lastName;
};
ES5 新的对象方法
// 添加或更改对象属性
Object.defineProperty(object, property, descriptor)
// 添加或更改多个对象属性
Object.defineProperties(object, descriptors)
// 访问属性
Object.getOwnPropertyDescriptor(object, property)
// 以数组返回所有属性
Object.getOwnPropertyNames(object)
// 以数组返回所有可枚举的属性
Object.keys(object)
// 访问原型
Object.getPrototypeOf(object)
// 阻止向对象添加属性
Object.preventExtensions(object)
// 如果可将属性添加到对象，则返回 true
Object.isExtensible(object)
// 防止更改对象属性（而不是值）
Object.seal(object)
// 如果对象被密封，则返回 true
Object.isSealed(object)
// 防止对对象进行任何更改
Object.freeze(object)
// 如果对象被冻结，则返回 true
Object.isFrozen(object)
JavaScript HTML DOM
- 简介 通过 HTML DOM，JavaScript 能够访问和改变 HTML 文档的所有元素。 HTML DOM（文档对象模型） 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 HTML DOM 模型被结构化为对象树：
- 什么是DOM DOM 是一项 W3C (World Wide Web Consortium) 标准。 DOM 定义了访问文档的标准： “W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问、更新文档的内容、结构和样式。”
- 什么是HTML DOM
- HTML DOM 是 HTML 的标准对象模型和编程接口。 HTML DOM 方法是您能够（在 HTML 元素上）执行的动作。 HTML DOM 属性是您能够设置或改变的 HTML 元素的值。 属性是您能够获取或设置的值（就比如改变 HTML 元素的内容）。 方法是您能够完成的动作（比如添加或删除 HTML 元素）。
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name) | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
| element.innerHTML = new html content | 改变元素的 inner HTML |
| element.attribute = new value | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.setAttribute(attribute, value) | 改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
| document.createElement(element) | 创建 HTML 元素 |
| document.removeChild(element) | 删除 HTML 元素 |
| document.appendChild(element) | 添加 HTML 元素 |
| document.replaceChild(element) | 替换 HTML 元素 |
| document.write(text) | 写入 HTML 输出流 |
| document.getElementById(id).onclick = function(){code} | 向 onclick 事件添加事件处理程序 |
| 属性 | 描述 |
|---|---|
| document.anchors | 返回拥有 name 属性的所有 <a>元素 |
| document.applets | 返回所有 <applet> 元素（HTML5 不建议使用） |
| document.baseURI | 返回文档的绝对基准 URI |
| document.body | 返回 <body> 元素 |
| document.cookie | 返回文档的 cookie |
| document.doctype | 返回文档的 doctype |
| document.documentElement | 返回 <html> 元素 |
| document.documentMode | 返回浏览器使用的模式 |
| document.documentURI | 返回文档的 URI |
| document.domain | 返回文档服务器的域名 |
| document.embeds | 返回所有 <embed> 元素 |
| document.forms | 返回所有 <form> 元素 |
| document.head | 返回 <head> 元素 |
| document.images | 返回所有 <img> 元素 |
| document.implementation | 返回 DOM 实现 |
| document.inputEncoding | 返回文档的编码（字符集） |
| document.lastModified | 返回文档更新的日期和时间 |
| document.links | 返回拥有 href 属性的所有 <area> 和 <a> 元素 |
| document.readyState | 返回文档的（加载）状态 |
| document.referrer | 返回引用的 URI（链接文档） |
| document.scripts | 返回所有 <script> 元素 |
| document.strictErrorChecking | 返回是否强制执行错误检查 |
| document.title | 返回 <title> 元素 |
| document.URL | 返回文档的完整 URL |
- 事件
- onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本。
- onload 和 onunload 事件可用于处理 cookie。
- onchange 事件经常与输入字段验证结合使用。
- onmouseover 和 onmouseout 事件可用于当用户将鼠标移至 HTML 元素上或移出时触发某个函数：
- onmousedown, onmouseup 以及 onclick 事件 onmousedown, onmouseup 以及 onclick 事件构成了完整的鼠标点击事件。 首先当鼠标按钮被点击时，onmousedown 事件被触发；然后当鼠标按钮被释放时，onmouseup 事件被触发；最后，当鼠标点击完成后，onclick 事件被触发。
- JavaScript HTML DOM 事件监听器
- addEventListener() 方法为指定元素指定事件处理程序。 为元素附加事件处理程序而不会覆盖已有的事件处理程序。
- 使用 removeEventListener() 方法轻松地删除事件监听器。
JavaScript Window - 浏览器对象模型
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话。
- Windows对象
全局变量是 window 对象的属性。 全局函数是 window 对象的方法。
- window.innerHeight - 浏览器窗口的内高度（以像素计）
- window.innerWidth - 浏览器窗口的内宽度（以像素计）
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() -移动当前窗口
- window.resizeTo() -重新调整当前窗口
- screen.width 属性返回以像素计的访问者屏幕宽度。
- screen.height 属性返回以像素计的访问者屏幕的高度。
- screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去诸如窗口工具条之类的界面特征。
- screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去诸如窗口工具条之类的界面特征。
- screen.colorDepth 属性返回用于显示一种颜色的比特数。
- screen.pixelDepth 属性返回屏幕的像素深度。
- window.location.href 返回当前页面的 href (URL)
- window.location.hostname 返回 web 主机的域名
- window.location.pathname 返回当前页面的路径或文件名
- window.location.protocol 返回使用的 web 协议（http: 或 https:）
- window.location.assign 加载新文档
- history.back() - 等同于在浏览器点击后退按钮
- history.forward() - 等同于在浏览器中点击前进按钮
- cookieEnabled 属性返回 true，如果 cookie 已启用，否则返回 false：
- appName 属性返回浏览器的应用程序名称：
- appCodeName 属性返回浏览器的应用程序代码名称：
- product 属性返回浏览器引擎的产品名称：
- appVersion 属性返回有关浏览器的版本信息：
- userAgent 属性返回由浏览器发送到服务器的用户代理报头（user-agent header）：
- window.alert():警告框
- window.confirm() :确认框
- window.prompt():提示框
- setTimeout(function, milliseconds) 在等待指定的毫秒数后执行函数。
- setInterval(function, milliseconds) 等同于 setTimeout()，但持续重复执行该函数
- clearTimeout() 方法停止执行 setTimeout() 中规定的函数。
- setInterval() 方法在每个给定的时间间隔重复给定的函数。
- clearInterval() 方法停止 setInterval() 方法中指定的函数的执行。