26、js阶段性复习
2016-06-28 15:44
309 查看
1、一元运算符
Operator + 可用于将变量转换为数字：
2、类型转换
3、js错误（try catch throw）
4、变量提升
JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
注意：JavaScript 只有声明的变量会提升，初始化的不会。
5、严格模式
它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。
"use strict" 的目的是指定代码在严格条件下执行。
严格模式下你不能使用未声明的变量。
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。
另一方面，同样的代码，在"严格模式"中，可能会有不一样的运行结果；一些在"正常模式"下可以运行的语句，在"严格模式"下将不能运行。掌握这些内容，有助于更细致深入地理解Javascript，让你变成一个更好的程序员
6、js操作json
7、function自调用
8、函数是个对象
9、js调用函数的4种方式
10、闭包
什么是闭包？
各种专业文献上的"闭包"（closure）定义非常抽象，很难看懂。我的理解是，闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。
闭包的用途？
闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中
11、DOM事件
Operator + 可用于将变量转换为数字：
<!DOCTYPE html>
<html>
<body>
<p> typeof 操作符返回变量或表达式的类型。</p>
<button onclick="myFunction()">点我</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
var y = "John";
var x = + y;
document.getElementById("demo1").innerHTML = typeof x + "<br>" + x;
y="20";
x= +y;
document.getElementById("demo2").innerHTML = typeof x + "<br>" + x;
}
</script>
</body>
</html>2、类型转换
<!DOCTYPE html>
<html>
<body>
<p> String() 方法可以将数字、布尔、日期转换为字符串。</p>
<p id="demo1"></p>
<p> Number() 方法可以将字符串、布尔、日期转换为数字。</p>
<p id="demo2"></p>
<script>
var x = 123;
document.getElementById("demo1").innerHTML =
"String(123) is"+
String(x) + "<br>" +
String(123) + "<br>" +
String(100 + 23)+"<br>"+
"x.toString() is "+x.toString()+(123).toString()+(100 + 23).toString()+"<br>"+
"String(false) is "+String(false)+"<br>"+
"falst.toString() is "+false.toString()+"<br>"+
"String(Date()) is "+String(Date())+"<br>"+
"Date().toString() is "+Date().toString();
var result = x+= +"30";
document.getElementById("demo2").innerHTML =
"Number(3.14) is "+Number(3.14) + "<br>" +
"Number('') is "+Number("") + "<br>" +
"Number(' ') is "+Number(" ") + "<br>" +
"Number('99 88') is "+Number("99 88") + "<br>" +
"parseFloat('99.88') is "+parseFloat("99.88") + "<br>"+
"parseInt('99') is "+parseInt("99") + "<br>" +
"123+= +'30' is "+ result + "<br>" +
"Number(false) is " +Number(false) +"<br>"+
"Number(new Date()) is "+Number(new Date());
</script>
</body>
</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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
var text = '{"employees":['+
'{"firstName":"John","lastName":"Doe"},'+
'{"firstName":"Anna","lastName":"Smith"}]}';
var obj = JSON.parse(text);
console.log(obj.employees[0].firstName);;
console.log(JSON.stringify(obj));
</script>
</body>
</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(); // 100011、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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JSP错误页面的处理和exception对象
- JS中this指向
- JS window.onload 和模拟document.ready.
- OC 与JS 交互
- JavaScript里最有效率的功能特征检测方法
- javascript中encodeURI和decodeURI方法
- js 判断字符串是否包含某字符串,String对象中查找子字符indexOf，查找字符串出现的次数split
- Swiper.js使用方法
- js日期格式转换
- JS笔记
- JS 禁用移动流量球、禁用iframe嵌入
- JS监听回车事件
- js获取IP地址方法总结_转
- js处理服务器返回的字符串
- 上传服务器之字典转json json转字典
- JSONKit 报错 ARC环境的设置
- JSP基础
- 4.1、JS——认识js 语法规范 获取元素 输出 弹窗
- JSON相关
- JavaScript强化教程-JS面向对象编程 ...