26、js阶段性复习

1、一元运算符

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更合理、更安全、更严谨的发展方向，包括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(); // 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>

26、js阶段性复习的更多相关文章

JS基础复习： Javascript的书写位置
爱创课堂JS基础复习: Javascript的书写位置复习 js书写位置:body标签的最底部.实际工作中使用书写在head标签内一对script标签里.alert()弹出框.console.log ...
2.26 js解决click失效问题
2.26 js解决click失效问题前言有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应.这种问题遇到了,是比较头疼的,因为没任何报错,只是click事件失效了.本篇用2种方法解决这种诡 ...
js课程 2-6 js如何进行类型转换及js运算符有哪些
js课程 2-6 js如何进行类型转换及js运算符有哪些一.总结一句话总结: 1.所有类型->布尔类型(为假的情况)有哪些(6种)? 1)字符串('')2)整型(0)3)浮点型(0.0)4) ...
Js中级复习
JS中级复习—— 1,this 就是js的关键字用途:指向某一个对象如何判断this指向: 函数(方法)内—— 一种以函数的方式调用(不带.)this指向window 一种以方法的形式调用(函 ...
JS基础复习
js基础语法 Netcape js基础语法规范(ECMAScript1,2,3,3.1,5(IE9),6 ES ES6=es2015) DOM BOM ...
JS高级---复习
复习面向过程和面向对象都是编程的思想, 方式不一样面向过程: 凡事都是亲力亲为, 所有的代码都要自己写, 每一步都要很清楚, 注重的是过程面向对象: 执行者成为指挥者, 只要找对象, 然后让对象 ...
js基础复习点
1.变量 var num=10; var num1,num2,num3; num1=10; num2=20; num3=30; var num1=10,num2 ...
【JavaScript】JS知识点复习
1.引入的两种方式:直接在标签里行内js,在body最下端引入. 2.变量的5种类型:number,string,boolean,null,undefined以及一种特殊类型:object 3.变量命 ...
11-22 JS中级复习
1.this js的关键字, 用途:指向某一个对象. 如何判断this指向函数(方法)内一种以函数的方式调用(不带.) this指向winodw 一种以方法的形式调用(函数名前面带.)this指向 ...

随机推荐

hdu 6243,6247
题意:n只狗,n个笼子,每个笼子只能有一只,求不在自己笼子的狗的数量的期望. 分析:概率是相等的,可以直接用方案数代替,k 不在自己的笼子的方案数是 n!- (n-1)!,这样的k有n个,总的方案数n ...
css布局－响应式布局
响应式设计 .在不同设备上正常使用 .一般主要处理屏幕大小问题 .主要方法: .隐藏 + 折行 + 自适应空间 .rem/viewport/media query 第一个案例 <!DOCTYPE ...
【洛谷P2426】删数
删数题目链接一道裸的区间DP,f[l][r]表示剩下区间[l,r]时的最大价值可以由f[1~l-1][r]和f[l][r+1~n]转移过来详见代码: #include<algorithm ...
WebStorm中Node.js项目配置教程——项目设置
上一章讲解了Node.js项目在WebStorm中的两种创建方式,当完成Node.js项目创建以后,剩下的就是涉及配置设置工作. 为了确保Node.js全局和Node.js核心模块的代码完成功能,打开 ...
linux各种抓包情况说明
大家都知道抓包指令:tcpdump 抓包的主要目的是测试端口.网络协议通不通,以及对抓取的数据包进行分析.测试,抓包对熟悉linux的大神都不陌生,网络对于我来说也是一窍不通,只是在这里记录一下 ...
Xcode 新建js文件
Xcode 新建js文件
C#实现文件上传以及文件下载
public ActionResult Upload() { // var pathUrl = "http://" + Request.Url.Authority; var fil ...
【TOJ 3305】Hero In Maze II
描述 500年前,Jesse是我国最卓越的剑客.他英俊潇洒,而且机智过人^_^.突然有一天,Jesse心爱的公主被魔王困在了一个巨大的迷宫中.Jesse听说这个消息已经是两天以后了,他急忙赶到迷宫,开 ...
PHP大数组,大文件的处理
[原文来自于转载, 但他的结论不太正确, 尤其对foreach的判断这块上, 我拎过来进行修理 ] 在做数据统计时,难免会遇到大数组,而处理大数据经常会发生内存溢出,这篇文章中,我们聊聊如何处 ...
django项目创建requirements.txt文件
workon+虚拟环境名然后输入 pip freeze > requirements.txt

26、js阶段性复习

26、js阶段性复习的更多相关文章

随机推荐

热门专题