kunyashaw博客主页 关注kunyashaw新博客 关于kunyashaw 转到底部

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>

 

posted @ 2016-06-28 15:44 kunyashaw 阅读(...) 评论(...) 编辑 收藏
回到顶部