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指向 ...

随机推荐

【[NOI2003]文本编辑器】
题目发现这样一句话就会导致$T$ ch[m][0]=++m; 并不是很知道为什么,可能这是某种未定义行为在不同编译器下会有不同后果? 至于这道题就很简单了,几个有关光标位置的操作就用一个变量模拟 ...
hihocoder 后缀自动机四·重复旋律6
题目对于$k\in[1,n]$求出长度为$k$的子串出现次数最多的出现了多少次我直到现在才理解后缀自动机上的子树和是什么意思非常显然的一点是 \[endpos(link(u))⊇endp ...
ACM-ICPC 2018 徐州赛区网络预赛 A.Hard to prepare 【规律递推】
任意门:https://nanti.jisuanke.com/t/31453 A.Hard to prepare After Incident, a feast is usually held in ...
【luogu P2298 Mzc和男家丁的游戏】题解
题目链接:https://www.luogu.org/problemnew/show/P2298 对于迷宫问题,bfs是比较好的选择. 直接bfs模板 #include <iostream> ...
mac install PyQt5
1. install brew /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/insta ...
数据库——MySQL——单表查询
单表查询语法: SELECT 字段1,字段2... FROM 表名 WHERE 条件 GROUP BY field HAVING 筛选 ORDER BY field LIMIT 限制条数关键字的执行 ...
对TCP三次握手四次分手还不清楚，超简单解析
关于TCP三次握手四次分手,之前看资料解释的都很笼统,很多地方都不是很明白,所以很难记,前几天看的一个博客豁然开朗,可惜现在找不到了.现在把之前的疑惑总结起来,方便一下大家. 先上个TCP三次握手 ...
JSP的小心得
问题:Web容器(例如Tomcat)是怎么来执行jsp文件的? 首先它会将放在webapps目录下的jsp文件(这里以hello.jsp为例)翻译成hello_jsp.java文件并编译为hello_ ...
Sass 基础(八)
@import Sass 支持所有css 的@规则,以及一些Sass 专属的规则,也被称为“指令(directive)”.这些规则在Sass 中具有不同的功效,详细解释如下. @import Sas ...
HTML中footer固定在页面底部的若干种方法
<div class="header"><div class="main"></div></div> <d ...

26、js阶段性复习

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

随机推荐

热门专题