JavaScript
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 模型被结构化为对象树:
![](https://www.w3school.com.cn/i/ct_htmltree.gif)
- 什么是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() 方法中指定的函数的执行。