26、js阶段性复习
1、一元运算符
Operator + 可用于将变量转换为数字：
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p> typeof 操作符返回变量或表达式的类型。</p> 6 7 <button onclick="myFunction()">点我</button> 8 9 <p id="demo1"></p> 10 <p id="demo2"></p> 11 12 <script> 13 function myFunction() { 14 var y = "John"; 15 var x = + y; 16 document.getElementById("demo1").innerHTML = typeof x + "<br>" + x; 17 y="20"; 18 x= +y; 19 document.getElementById("demo2").innerHTML = typeof x + "<br>" + x; 20 21 } 22 </script> 23 24 </body> 25 </html>
2、类型转换
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p> String() 方法可以将数字、布尔、日期转换为字符串。</p> 6 7 <p id="demo1"></p> 8 <p> Number() 方法可以将字符串、布尔、日期转换为数字。</p> 9 <p id="demo2"></p> 10 11 <script> 12 var x = 123; 13 document.getElementById("demo1").innerHTML = 14 "String(123) is"+ 15 String(x) + "<br>" + 16 String(123) + "<br>" + 17 String(100 + 23)+"<br>"+ 18 "x.toString() is "+x.toString()+(123).toString()+(100 + 23).toString()+"<br>"+ 19 "String(false) is "+String(false)+"<br>"+ 20 "falst.toString() is "+false.toString()+"<br>"+ 21 "String(Date()) is "+String(Date())+"<br>"+ 22 "Date().toString() is "+Date().toString(); 23 24 var result = x+= +"30"; 25 document.getElementById("demo2").innerHTML = 26 "Number(3.14) is "+Number(3.14) + "<br>" + 27 "Number('') is "+Number("") + "<br>" + 28 "Number(' ') is "+Number(" ") + "<br>" + 29 "Number('99 88') is "+Number("99 88") + "<br>" + 30 "parseFloat('99.88') is "+parseFloat("99.88") + "<br>"+ 31 "parseInt('99') is "+parseInt("99") + "<br>" + 32 "123+= +'30' is "+ result + "<br>" + 33 "Number(false) is " +Number(false) +"<br>"+ 34 "Number(new Date()) is "+Number(new Date()); 35 </script> 36 </body> 37 </html>
3、js错误（try catch throw）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script> function myFunction() { try { var x=document.getElementById("demo").value; if(x=="") throw "值为空"; if(isNaN(x)) throw "不是数字"; if(x>10) throw "太大"; if(x<5) throw "太小"; } catch(err) { var y=document.getElementById("mess"); y.innerHTML="错误：" + err + "。"; } } </script> </head> <body> <h1>我的第一个 JavaScript</h1> <p>请输出一个 5 到 10 之间的数字:</p> <input id="demo" type="text"> <button type="button" onclick="myFunction()">测试输入</button> <p id="mess"></p> </body> </html>
4、变量提升
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
注意：JavaScript 只有声明的变量会提升，初始化的不会。
5、严格模式
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict" 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员
6、js操作json
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 9 <script> 10 11 var text = '{"employees":['+ 12 '{"firstName":"John","lastName":"Doe"},'+ 13 '{"firstName":"Anna","lastName":"Smith"}]}'; 14 15 var obj = JSON.parse(text); 16 console.log(obj.employees[0].firstName);; 17 18 console.log(JSON.stringify(obj)); 19 </script> 20 </body> 21 </html>
7、function自调用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p id="demo1"></p> <p id="demo2"></p> <p id="demo3"></p> <script> (function(){ document.getElementById('demo1').innerHTML = "Hello,我是自调用的!"; })(); var x = function (a,b,c) { document.getElementById('demo2').innerHTML = "again!"; }(); var y = function (a,b,c) { console.log(arguments+" a is "+a+" b is "+b); document.getElementById('demo3').innerHTML = "again!"; }; y(12,11,33,22,11); y(); </script> </body> </html>
8、函数是个对象
<!DOCTYPE html> <html> <body> <p> arguments.length 属性返回函数接收到参数的个数：</p> <p id="demo1"></p> <p>将函数作为了一个字符串返回</p> <p id="demo2"></p> <p>typeof myfunction is </p> <p id="demo3"></p> <script> function myFunction(a, b) { return arguments.length; } document.getElementById("demo1").innerHTML = myFunction(4, 3); document.getElementById("demo2").innerHTML = myFunction.toString(); document.getElementById("demo3").innerHTML = typeof(myFunction); </script> </body> </html>
9、js调用函数的4种方式
<!DOCTYPE html> <html> <body> <p>js函数调用的4种方式,每种方式的不同在于this的初始化</p> <p>方式1 全局</p> <p id="demo1"></p> <p id="demo2"></p> <p>方式2 对象中的方法</p> <p id="demo3"></p> <p>方式3：使用构造函数调用函数</p> <p id="demo4"></p> <p>方式4：通过call或者apply来调用函数，两个方法的第一个参数必须是对象本身！</p> <p id="demo5"></p> <p id="demo6"></p> <script> /*方式1 以上函数不属于任何对象，但是在js中它始终是默认的全局对象。在HTML中默认的全局对象是HTML页面本身， 所以函数是属于HTML页面。在浏览器中的页面对象是浏览器窗口（window对象）， 以上函数会自动变为window对象的函数 */ function myFunction1(a, b) { return a * b; } document.getElementById('demo1').innerHTML = myFunction1(20, 3); document.getElementById('demo2').innerHTML = window.myFunction1(20, 3); /*方式2 对象中的方法 * */ var myObject = { firstName: "John", lastName: 'Doe', fullName: function () { return this.firstName + this.lastName; } } document.getElementById('demo3').innerHTML = myObject.fullName(); /*方式3：构造函数的方式*/ function myFunction(arg1, arg2) { this.firstName = arg1; this.lastName = arg2; } var x = new myFunction("John", "Doe"); document.getElementById('demo4').innerHTML = x.firstName; /*方式4：作为函数方法调用函数*/ add = function (a, b) { return a + b; } document.getElementById("demo5").innerHTML = add.call(undefined,20, 30); myArray = [20, 30]; document.getElementById("demo6").innerHTML = add.apply(undefined, myArray); </script> </body> </html>
10、闭包
什么是闭包？
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途？
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中
function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result(); // 999
nAdd();
result(); // 1000
11、DOM事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DOM事件总结</title> </head> <!--onload和onunload事件 会在用户进入或者离开时调用--> <body onload="checkCookies()"> <h1 onclick="this.innerHTML='Oops!'">点击文本</h1> <h2 onclick="changeText(this)">Try It!</h2> <button id="btn">点击</button> <p id="demo1"></p> <h1 id='demo2' onmouseover="mouseOver()" onmouseout="mouseOut()"> hello world </h1> <!--下边这样写：按下显示鼠标按下，抬起时会调用抬起和click事件--> <h1 id='demo3' onmousedown="mouseDown()" onmouseup="mouseUp()" onclick="displayDate()"> 鼠标点击测试 </h1> <input type="text" id="fname" onchange="upperCase()"/> <!--addEventListener--> <p>element.addEventListener(event,function,useCapture)</p> <!--第一参数为事件的类型 第二参数为事件触发后调用的函数 第三函数描述事件是冒泡还是捕获（注意，不要使用on前缀，例如使用click，而不是onclick）--> <p>注意：同一个元素可以添加多个同类型的事件，而且都生效</p> <button id="demo4">点我会触发两个回调函数</button> <p>事件传递两种方式：冒泡和捕获 </p> <p>冒泡：内部元素的事件会先被触发，然后再触发外部元素</p> <p>捕获：外部元素的事件会先被触发，然后再触发内部元素</p> <div id="demo5"> <button id="demo6">我是冒泡</button> </div> <br/> <div id="demo7"> <button id="demo8">我是捕获</button> </div> <script> document.getElementById('demo5').addEventListener('click', function () { alert('div clicked'); },false); document.getElementById('demo6').addEventListener('click', function () { alert('p clicked'); },false); document.getElementById('demo7').addEventListener('click', function () { alert('div clicked'); },true); document.getElementById('demo8').addEventListener('click', function () { alert('p clicked'); },true); document.getElementById('demo4').addEventListener('click', function () { alert('fuck 1th!'); }) document.getElementById('demo4').addEventListener('click', function () { alert('fuck 2th!'); }) function mouseDown() { var x = document.getElementById('demo3'); x.innerHTML = "鼠标按下!"; } function mouseUp() { var x = document.getElementById('demo3'); x.innerHTML = "鼠标抬起!"; } function mouseOver() { var x = document.getElementById('demo2'); x.innerHTML = "鼠标进来了!"; } function mouseOut() { var x = document.getElementById('demo2'); x.innerHTML = "鼠标出去了!"; } function upperCase() { var x = document.getElementById('fname'); x.value = x.value.toUpperCase(); } function checkCookies() { if (navigator.cookieEnabled) { alert("cookies 可用"); } else { alert("cookies 不可用"); } } function changeText(a) { a.innerHTML = "You did it!" } function displayDate() { document.getElementById('demo1').innerHTML = Date(); } // document.getElementById('btn').onclick = displayDate();// 该写法不对，会直接执行displayDate方法, document.getElementById('btn').onclick = function () { displayDate() }; </script> </body> </html>
