数组
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p id="app">好</p> </body> <script> var car = new Array(); car[0] = "你"; car[1] = "好"; car[2] = "吗"; for(var i=0 ; i<car.length ; i++){ document.write(car[i] + "<br>"); } </script> </html>
JavaScript 对象
可以说 "JavaScript 对象是变量的容器"。
但是，我们通常认为 "JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为 对象属性。
访问属性有两种方式 person["name"] 和 person.name
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> </body> <script> var person={ name:"刘牌", age:20, home:"中国" } document.write("名字："+person.name+" "+"年龄 "+person.age+" "+"家乡 "+person.home) </script> </html>
对象方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> </body> <script> var person={ name:"刘牌", age:20, home:"中国", fullName:function () { return this.name + " "+this.home; } } document.write(person.fullName()) </script> </html>
JavaScript 函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <button onclick="steak()"></button> </body> <script> function steak() { alert("你好"); } </script> </html>
调用带参数的函数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <button onclick="steak('刘牌',20)"></button> </body> <script> function steak(name,age) { alert(name+" "+age); } </script> </html>
JavaScript 全局变量
变量在函数外定义，即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
特殊字符
在 JavaScript 中，字符串写在单引号或双引号中。
因为这样，以下实例 JavaScript 无法解析：
"We are the so-called "Vikings" from the north."
字符串 "We are the so-called " 被截断。
如何解决以上的问题呢？可以使用反斜杠 (\) 来转义 "Vikings" 字符串中的双引号，如下:
"We are the so-called \"Vikings\" from the north."
反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符：
转义字符 (\) 可以用于转义撇号，换行，引号，等其他特殊字符。
字符串方法
运算符
如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <input id="tel" type="text"> <button onclick="check()">提交</button> </body> <script> function check() { var tel = document.getElementById("tel"); if (tel.length!=11){ alert("请输入正确的电话号码"); } } </script> </html>
还有很多运算符
JavaScript 正则表达式
正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索和文本替换。
使用字符串方法
在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。
search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
如 var name = "Steve jobs";
var n = name.search(/jobs/i);
i 是一个修饰符 (搜索不区分大小写)。
search() 方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="app"></p> <button onclick="myFunction()">click me</button> </body> <script> function myFunction() { var name = "Steve jobs"; var n = name.search(/jobs/i); document.getElementById("app").innerHTML = n; } </script> </html>
replace() 方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="app"></p> <button onclick="myFunction()">click me</button> </body> <script> function myFunction() { var name = "Steve jobs"; var name1 = name.replace(/jobs/i , "steak") document.getElementById("app").innerHTML = name1; } </script> </html>
g:执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m:执行多行匹配。
正则表达式很强大：https://www.runoob.com/js/js-regexp.html （菜鸟教程）
JavaScript 调试
console.log() 方法
如果浏览器支持调试，你可以使用 console.log() 方法在调试窗口上打印 JavaScript 值：
JavaScript 变量提升
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
JavaScript 使用误区
在 JavaScript 程序中如果你在 if 条件语句中使用赋值运算符的等号 (=) 将会产生一个错误结果, 正确的方法是使用比较运算符的两个等号 (==)
JavaScript 表单验证
HTML 表单验证可以通过 JavaScript 来完成。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } } </script> </head> <body> <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> </html>
在表单里面填写 required="required" 会自动验证
还有很多 https://www.runoob.com/js/js-form-validation.html
JavaScript this 关键字
面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。
- 在方法中，this 表示该方法所属的对象。
- 如果单独使用，this 表示全局对象。
- 在函数中，this 表示全局对象。
- 在函数中，在严格模式下，this 是未定义的(undefined)。
- 在事件中，this 表示接收事件的元素。
- 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="app"></p> </body> <script> var person={ name: "刘牌", age: 20, fullName:function () { return this.name + " " + this.age; } }; document.getElementById("app").innerHTML = person.fullName(); </script> </html>
JavaScript let 和 const
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
javascript:void(0) 含义
我们经常会使用到 javascript:void(0) 这样的代码，那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢？
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
如果你要定义一个死链接请使用 javascript:void(0) 。
JavaScript 闭包
JavaScript 变量可以是局部变量或全局变量。
私有变量可以用到闭包。
计数器困境
设想下如果你想统计一些数值，且该计数器在所有函数中都是可用的。
你可以使用全局变量，函数设置计数器递增：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="app"></p> <button onclick="addNumber()">add</button> </body> <script> var count = 0; function add() { return count +=1; } function addNumber() { document.getElementById("app").innerHTML = add(); } </script> </html>
但是申明为局部变量，计算器则不能加，只能加到1
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="app"></p> <button onclick="addNumber()">add</button> </body> <script> function add() { var count = 0; return count +=1; } function addNumber() { document.getElementById("app").innerHTML = add(); } </script> </html>
但是用到闭包，它就能加
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p id="app"></p> <button onclick="addNumber()">add</button> </body> <script> var add = (function () { var count = 0; return function () { return count += 1; } })(); function addNumber() { document.getElementById("app").innerHTML = add(); } </script> </html>
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body onload="addNumber()"> <p id="app"></p> </body> <script> function addNumber() { alert("你好"); } </script> </html>
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
当在表单输入小写字母后，离开表单后，触发函数，变为大写的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <input type="text" id="fname" onchange="myFunction()"> </body> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
鼠标没有移到div上面时为mouse me ， 移到div上时为 "你好" , 离开时为 "刘牌",
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div onmouseover="myFunction(this)" onmouseout="myFunction1(this)" style="width: 100px;height: 100px;background-color: red">mouse me</div> </body> <script> function myFunction(obj) { obj.innerHTML = "你好"; } function myFunction1(obj1) { obj1.innerHTML = "刘牌"; } </script> </html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
JavaScript HTML DOM EventListener
向同一个元素中添加多个事件句柄
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="app">click me</button> </body> <script> var x = document.getElementById("app"); x.addEventListener("click",function1); x.addEventListener("click",function2); function function1() { alert("你好"); } function function2(){ alert("刘牌"); } </script> </html>
传递参数
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button id="app">click me</button> </body> <script> var x = document.getElementById("app"); x.addEventListener("click",function1(2,4)); x.addEventListener("click",function2(3,6)); function function1(num1,num2) { alert("你好"+num1*num2); } function function2(num1,num2){ alert("刘牌"+num1+num2); } </script> </html>
事件冒泡或事件捕获？
事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将
元素插入到
元素中，用户点击
元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：
元素的点击事件先触发，然后会触发
元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：
元素的点击事件先触发 ，然后再触发
元素的点击事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app1"> <p id="app2">冒泡</p> </div> <br> <div id="app3"> <p id="app4">捕获</p> </div> </body> <script> document.getElementById("app1").addEventListener("click",function () { alert("你好") }) document.getElementById("app2").addEventListener("click",function () { alert("刘牌") }) document.getElementById("app3").addEventListener("click",function () { alert("你好") }) document.getElementById("app4").addEventListener("click",function () { alert("刘牌") }) </script> </html>
removeEventListener() 方法
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app1" style="width: 100px;height: 100px;background-color: red"> 鼠标经过我 <button onclick="remove()">on</button> </div> <p id="text"></p> </body> <script> document.getElementById("app1").addEventListener("mousemove",myFunction); function myFunction() { document.getElementById("text").innerHTML = Math.random(); } function remove() { document.getElementById("app1").removeEventListener("mousemove",myFunction); } </script> </html>
向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>实例在 window 对象中使用 addEventListener() 方法。</p> <p>尝试重置浏览器的窗口触发 "resize" 事件句柄。</p> <p id="demo"></p> <script> window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = Math.random(); }); </script> </body> </html>
