精华内容
下载资源
问答
  • javaScript学习笔记(一)js基础

    万次阅读 多人点赞 2018-09-21 10:07:18
    JavaScript是目前web开发中可缺少的脚本语言,js需要编译即可运行运行在客户端,需要通过浏览器来解析执行JavaScript代码。 诞生于1995年,当时的主要目的是验证表单的数据是否合法。 Java...

     

                                          公众号  关注一波  不定期分享视频资料

     

                                                                   

    一、简介

    1、概述:

    JavaScript是目前web开发中不可缺少的脚本语言,js不需要编译即可运行,运行在客户端,需要通过浏览器来解析执行JavaScript代码。

    诞生于1995年,当时的主要目的是验证表单的数据是否合法

    JavaScript本来应该叫Livescript,但是在发布前夕,想搭上当时超热的java顺风车,临时把名字改为了JavaScript。(也就是说js跟java没有关系,当时只是想借助java的名气)。

    js组成部分:

    (1)核心(ECMAScript):这一部分主要是js的基本语法。

    (2)BOM:Brower Object Model(浏览器对象模型),主要是获取浏览器信息或操作浏览器的,例如:浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等。

    (3)DOM:Document Object Model(文档对象模型),此处的文档暂且理解为html,html加载到浏览器的内存中,可以使用js的DOM技术对内存中的html节点进行修改,用户从浏览器看到的是js动态修改后的页面。(增删改查)

    2、特点:

    1. 交互性(它可以做的就是信息的动态交互)
    2. 安全性(不允许直接访问本地硬盘)
    3. 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)

    3、和Java区别:

    4、作用

    avaScript 被用来改进设计、验证表单、检测浏览器、创建cookies,等等。JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的浏览器中运行,比如: Internet Explorer、 Maxthon、Mozilla、Firefox、Netscape、Chrome和 Opera等。

    在目前学习阶段只要记住最常用的二个:(1)运态修改html及css代码 (2)验证表单

    5、书写位置

    5.1、内嵌式:

    理论上js可以书写在页面的任意位置。

    <script>

    alert("内嵌式")

    </script>

    5.2、外链式:

    首先新建一个文件类型为.js的文件,然后在该文件中写js语句,通过script标签对引入到html页面中。

    <script src="js文件路径地址">这里不能写js语句</script>

    5.3、行内式:

    直接书写在标签身上,是一个简写的事件,所以又称之为事件属性。     onclick单击事件

    <input type="button" value="点我呀!" onclick="alert('点我干啥!^6^');">
    <button onclick="alert('恭喜你,中 500 万.');">点我呀!</button>
    

    6、注释:

    单行注释:		//	注释语句		快捷键ctrl+/
    多行注释:		/* 注释语句 */    快捷键ctrl+shift+/   
    注意:多行注释相互不能嵌套使用,只能在多行注释里面使用单行注释!
    

    7、数据类型:

    Js中的数据类型:
     

    数值型:number(凡是数字都是数值型,不区分整数和小数)
    字符串:string(凡是引号包裹起来的内容全部都是字符串)
    布尔:boolean(true、false)
    对象类型:object(特殊取值null)
    未定义型:undefined
    

    对比java中的数据类型:

    整数:byte short int long
    小数:float double
    字符:char 
    布尔:boolean
    字符串:String

    8、变量:

    8.1、定义:就是存放数据的、内疗可以存储任意数据

    8.2、声明变量:
     

    var 变量名称 = 存储的数据;   	(variable 变量)

    8.3、变量命名规范:

    1.	只能由字母、数字、_(下划线)、$(美元符号)组成。
    2.	不能以数字开头。
    3.	命名中不能出现-(js会理解成减号进行减法的操作),不能和关键字冲突。
    

    js是弱类型语言,不重视类型的定义,但js会根据为变量赋值的情况自定判断该变量是何种类型:

    数值型:var i = 1;	var d = 2.35;
    字符串:var str = "用心学习";
    布尔型:var b = true;
    

    对比Java:java是强类型的语言,注重类型的定义,Java定义类型如下:

    整型:int i = 1;
    浮点型:double d = 2.35;
    字符串:String str = “用心学习”;
    布尔型:boolean b = true;
    

    总结:js中变量的定义。只要加一个var就行。java则使用什么类型的变量就要定义什么类型的。

    9、检测数据类型:

    typeof(value); 或者typeof value;     返回这个变量的类型. 
    说明 : 同一个变量, 可以进行不同类型的数据赋值.
    
    <script type="text/javascript">
        
        var a;
        alert(typeof a);  // undefined
    
        a = 998;
        alert(typeof a); // number
    
        a = "用心学习";
        alert(typeof a); // string
    
        a = true;
        alert(typeof a); // boolean
        
    </script>
    

    10、算术运算符

    +	-	*	/	%	++	--

    注意:

    1.	由于js中的小数和整数都是number类型,不存在类似整数除以整数还是整数的结论。
    2.	字符串和其他的数据使用+号运算,会连接成一个新的字符串。
    3.	字符串使用除了+以外的运算符:如果字符串本身是一个数字,那么会自动转成number进行运算
    ,否则就会返回一个NaN的结果,表示这不是一个数字。NaN:not a number
    
    <script>
    
        alert(1234 / 1000 * 1000); // 1234
      
        var s = "12";
         s -= 10;
        alert(s);  // 2
     
        var s = "aa";
        s -= 10;
        alert(s);  // NaN       Not a Number 不是一个数字
    
        var s = "12";
        s += 10;
        alert(s);       // 1210 
    
    </script>
    

    11、关系(比较)运算符

    >		>=		<		<=  	!=		
    ==	等于(只比较内容)	===	恒等于(比较内容的同时还要比较数据类型)
    注意:关系运算符返回的结果只有两个:true / false
    
    <script>
    
        // 请问1 : 3 > 5, 结果为 ?
        alert(3 > 5);   // false
    
        // 请问2 : “22” == 22  结果为 ?
        alert("22" == 22); // true  (仅仅判断数值)
    
        // 请问3 : “22” === 22  结果为 ?
        alert("22" === 22);  // false  (恒等于, 数值和类型都要相等)
        
    </script>
    

    12、逻辑运算符

    &&	 	与		true&&false		====>false
    || 		或		true||false			====>true
    ! 		非		!true				====>false
    false(理解):false,  0,  null,  undefined 
    true(理解):true, 非0,  非null,  非undefined
    
    针对 && 顺口溜: 找第一个出现的假值. (一假即假)
    针对 || 顺口溜: 找第一个出现的真值. (一真即真)

    演示一:

    <script>
    
        // 短路与 (一假即假)
        // 口诀 : 找第一个为假的值.
    
        // 请问1 :  8 < 7 && 3 < 4, 结果为 ?
        alert(8 < 7 && 3 < 4);  // false
    
        // 请问2 :  -2 && 6 + 6 && null 结果为 ?
        alert(-2 && 6 + 6 && null); // null
    
        // 请问3 :  1 + 1 && 0 && 5  结果为 ?
        alert(1 + 1 && 0 && 5); // 0
    
    </script>
    

    演示二:

    <script>
    
        // 短路或 : 一真即真.
        // 口诀 : 找第一个为真的值.
    
        // 请问1 :  0 || 23 结果为 ?
        alert(0 || 23); // 23
    
        // 请问2 :  0 || false || true  结果为 ?
        alert(0 || false || true); // true
    
        // 请问3 :  null || 10 < 8 || 10 + 10结果为 ?
        alert(null || 10 < 8 || 10 + 10);  // 20
    
        // 请问4 :  null || 10 < 8 || false结果为 ?
        alert(null || 10 < 8 || false); // false
        
    </script>
    

    13、三元运算符:

    条件?表达式1:表达式2
    如果条件为true,返回表达式1的结果
    如果条件为false,返回表达式2的结果
    

    演示:

    <script>
    
        // 请问1 :  3 ? “aaa” : “bbb” 结果为 ?
        alert(3 ? "aaa" : "bbb");       // aaa
    
        // 请问2 :  0 ? “ccc” : “ddd”  结果为 ?
        alert(0 ? "ccc" : "ddd");       // ddd
        
    </script>
    

    14、if条件语句

    这个和Java中if语句一样。

    演示:

    <script>
    
          var score = 59;
    
          if (score >= 90) {
              alert("优秀");
          } else if (score >= 80) {
              alert("良好");
          } else if (score >= 60) {
              alert("及格");
          } else {
              alert("不及格");
          }
    
      </script>
    

    15、switch分支结构

    这个和java中switch结构一样。只是Java中表达式为:常量 整型(去long)、字符、字符串

    演示:

    <script>
    
          var score = 59;
    
          // 需求 : 将需要一个整型数值, 不想要小数点.
          // window 对象的 parseInt 方法.
          score = window.parseInt(score / 10 + "");
          // alert(score);
    
          switch (score) {
              case 10:
              case 9:
                  alert("优秀!");
                  break;
              case 8:
                  alert("良好!");
                  break;
              case 7:
              case 6:
                  alert("及格!");
                  break;
              default:
                  alert("不及格!");
                  break;
          }
    
      </script>
    

    16、循环结构 while、do-while. for;

    while(循环条件){循环体;}
    do{循环体;}while(循环条件);
    for(循环变量赋初值;循环条件;循环变量增值){循环语句;}
    console.log(...); 以日志的形式在控制台输出结果!
    

    演示:

    <script>
    
        // 需求 : 统计 1~100 之间能够被3和7整除的数字个数
    
        var count = 0;
    
        // 1. 遍历 1~100 之间的所有整型数值
        for (var i = 1; i <= 100; i++) {
    
            // 2. 判断
            if (i % 3 == 0 && i % 7 == 0) {
                // alert(i);
                console.log(i);
                // 3. 累加个数
                count++;
            }
        }
    
        // 4. 查看结果
        // alert(count);
        console.log(count);
    
    

    console.log显示如下:

    17、循环嵌套

    演示案例9*9乘法表

     <style>
            table {
                /* 将 table 表格的线变成了细线 */
                border-collapse: collapse;
                /*color: red;*/
                border-color: red;
            }
        </style>
    
        <script>
    
            // 需求 : 九九乘法口诀表
            document.write("<table border='1px solid red' cellspacing='0' cellpadding='8px'>");
            document.write("<caption>九九乘法口诀表</caption>");
            for (var i = 1; i <= 9; i++) {
                document.write("<tr>");
                for (var j = 1; j <= i; j++) {
                    document.write("<td>");
                    document.write(j + "*" + i + "=" + (j*i) + "&nbsp;&nbsp;&nbsp;&nbsp;");
                    document.write("</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");
    
        </script>
    
    

    18、自定义函数

    函数是命名的独立的语句段,这个语句段可以被当作一个整体来引用和执行:

    格式:

    function 函数名(形式参数){函数体}
    调用函数:函数名(实际参数);
    

    18.1、函数只有被调用后才会执行

    18.2、如果函数需要返回值、直接使用return 返回、不会像java一样要考虑返回值的类型

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo2() {
            return 666;
        }
    
        // 调用函数 :
        alert(demo2());
    
    </script>
    

    18.3、如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo3(a, b) {
            return a + b;
        }
    
        // 调用函数 :
        alert(demo3(10, 20));//显示30
    
    </script>
    

    18.4、js中出现二个重名的函数名、后者会把前面的覆盖掉

    对比java、java有重载(同名不同参)、重写(同名同参同返回值类型、方法体不一样)

    演示:

    <script type="text/javascript">
    
        // 定义一个函数 : function
        function demo4(a, b) {
            alert("调用1...");
        }
    
       function demo4() {
           alert("调用2...");
       }
    
        demo4(10, 20);
        demo4();
    
    </script>
    

    会显示二次下面的图片:

    19、匿名函数

    匿名函数是没有名字的函数

    function(形式参数){函数体}
    调用方式:将匿名函数赋值给一个变量,通过变量名调用函数
    定义函数并赋值给变量:var fn = function(形式参数){函数体}
    调用函数:fn(实际参数);
    

    演示:

    <script type="text/javascript">
    
        // 匿名函数 : 没有名称的函数
        var func = function(i, u) {
            alert(i + " love " + u);
        }
    
        // 调用函数 :
       func("柳岩", "小白");//显示柳岩love小白
    
    </script>
    

    20、案例-轮播图

    说明1 : script 标签需要放在 body 标签之后.
    
    说明2 : window.setInterval(“字符串函数名称()”, 时间毫秒数);
    
    说明3 : window.setInterval(函数名称, 时间毫秒数);
    
    说明4 : window.setInterval(匿名函数, 时间毫秒数);            推荐使用
    <head>
        <meta charset="UTF-8">
        <title>轮播图</title>
    
        <style>
    
            div {
                width: 80%;
                margin: 50px auto;
            }
    
            img {
                width: 100%;
            }
    
        </style>
    
    </head>
    <body>
        <div class="container">
            <img src="../img/01.jpg" alt="图片">
        </div>
    </body>
    

    实现一:

    <script>
    
        // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
        // 1. 获取 img 标签
        var img = document.getElementById("img");
        // alert(img);
    
        // 定义一个变量
        var count = 1;
    
        // 1.2 定义一个函数
        function changeImageSrc() {
            count++;
            img.src = "../img/0"+count+".jpg";
    
            // 判断
            if (count == 8) {
                count = 0;
            }
        }
    
        // 2. 循环切换图片
        // window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数.
        // 调用方式一 :
        // window.setInterval("changeImageSrc()", 1000);
        // 调用方式二 :
        window.setInterval(changeImageSrc, 1000);
    
    </script>
    

    实现二:

    <script>
    
        // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性.
        // 1. 获取 img 标签
        var img = document.getElementById("img");
        // alert(img);
    
        // 定义一个变量
        var count = 1;
    
        // 2. 循环切换图片
        // window.setInterval(匿名函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数.
        window.setInterval(function() {
            count++;
            img.src = "../img/0"+count+".jpg";
    
            // 判断
            if (count == 8) {
                count = 0;
            }
        }, 1000);
    
    </script>
    

    21、js事件

    21.1、事件概述:

    事件三要素:
    1.	事件源:被监听的html元素(就是这个事件加给谁),就是某个(某些)html标签
    2.	事件类型:某类动作,例如点击事件,移入移除事件,敲击键盘事件等
    3.	执行指令:事件触发后需要执行的代码,一般使用函数进行封装
    语法格式:事件源.事件类型=执行指令
    

    21.2、常用的事件:

    案例:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>事件</title>
    
        <script>
            // 窗口 : window 对象提供了一个事件类型  onload 页面加载完成事件.
            // 事件源 : window    事件类型 : 页面加载完成事件 (onload)  执行指令: 就是赋值的 function 函数.
            window.onload = function () {
    
                // 获取页面的 btn 按钮
                var btn = document.getElementById("btn");
                // alert(btn);
    
                // 给 btn 按钮绑定一个事件 (单击事件 onclick)
                // 事件源 : btn按钮    事件类型 : 单击事件 (onclick)  执行指令: 就是赋值的 function 函数.
                btn.onclick = function () {
                    alert("恭喜你, 中了 500 万!");
                }
            }
    
        </script>
    
    </head>
    <body>
        <button id="btn">按钮</button>
    </body>
    </html>
    

    到此基础结束。

     

    ==============《轮播图图片路径问题》================

     

                                                           =================================

                        公众号  关注一波  (一叶知秋博客)不定期分享视频资料

                                                           

     

     

    展开全文
  • Javascript运行环境

    千次阅读 2018-04-21 16:17:27
    Javascript运行环境:Javascript运行环境有两种,一个是浏览器运行环境,另一个则是Node.js运行环境浏览器环境下JavaScript主要由三部分组成,分别是ECMAScript、DOM和BOM,BOM和DOMNode.js中以ECMAScript为基础,...

    Javascript运行环境:

    Javascript运行环境有两种,一个是浏览器运行环境,另一个则是Node.js运行环境

    浏览器环境下JavaScript主要由三部分组成,分别是ECMAScript、DOM和BOM,BOM和DOM

    Node.js中以ECMAScript为基础,扩展出了I/O操作、文件操作、数据库操作等

    V8引擎:简单理解就是负责解析和执行代码

    内置库:运行环境提供的服务



    展开全文
  • JavaScript运行环境 镶嵌网页 JavaScript文件脚本:.js JavaScript打印 打印方式 打印级别 编写代码IDE平台:记事本 + 浏览器 调试代码 编写代码IDE平台:Visual Studio Code + Node.js 主程序 调试代码 编写代码IDE...

    文件版本说明

    版本发布日期修订章节作者
    0.12018.05.01撰写草稿钟鑫
    0.22018.05.05添加js变量定义钟鑫
    0.32018.05.05添加js编译环境钟鑫
    0.42018.05.11添加js函数钟鑫
    0.52018.05.14添加解构赋值钟鑫
    0.62018.05.19添加函数定义以及类定义钟鑫
    0.72018.05.27添加类的定义钟鑫
    0.82018.06.09添加时间定义钟鑫

    JavaScript运行环境

    镶嵌网页

    在一个html中镶嵌JavaScript,镶嵌标签
    JsTest.html

    <html>
    	<head>
    		<title> ZX test title </title>
    		<script>
    
    		function js_test_html(){  
    			alert('alert ZX test');
    			console.log('console ZX test');
    			document.write('document ZX test\n');
    		}  
    
    		js_test_html();
    
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    

    显示效果如下图所示。
    在这里插入图片描述
    在这里插入图片描述

    JavaScript文件脚本:.js

    将js代码写入一个js文件中,然后通过html调用这个脚本。
    
    function js_main(){ 
    alert('main alert ZX test');
    		console.log('main console ZX test');
    		document.write('main document ZX test');
    } 
    
    js_main();
    

    将js文件镶嵌到html文件中

    <html>
    	<head>
    		<title> ZX test title </title>
    		<script src="./Jsmain.js"> </script>
    	</head>
    	<body>
    	</body>
    </html>
    

    显示效果如下图所示。

    在这里插入图片描述
    在这里插入图片描述

    JavaScript打印

    JavaScript的调试打印在浏览器中按F12调出,代码中用console对象实现。

    打印方式

    JavaScript的调试打印有多中方式,包含可以直接打印数字、数组、字符串甚至结构体和类。
    源码

    function js_console_test(){ 
    	
    	var strtest = "string";
    	var chartest = 'A';
    	var istest = 3;
    	var fpai = 3.14159;
    	var arraytest = ["zx",6.626E-34,'B',8];
    	
    	var stTest = {
    		siindex: 1,
    		strname: "ZX Test",
    		sinum: 2.71828,
    		
    		functest: function stfunc(){ return true;}
    	};
    
    	console.log(strtest);
    	console.log(chartest);
    	console.log(istest);
    	console.log(fpai);
    	console.log(arraytest);
    	console.log(stTest);
    }
    

    执行结果
    在这里插入图片描述

    打印级别

    console对象对调试打印有着打印级别,对应不同的调试环境。

    源码

    function js_console_level(){ 
    	
    	console.log("This is log level.");
    	console.debug("This is debug level.");
    	console.info("This is info level.");
    	console.warn("This is warn level.");
    	console.error("This is error level.");
    }
    

    执行结果
    在这里插入图片描述

    点击右边的定位会跳转到代码调试选项
    在这里插入图片描述

    编写代码IDE平台:记事本 + 浏览器

    只要安装了浏览器,通过记事本就可以编写js代码。但要使js运行起来,就必须将js镶嵌到html文件中

    浏览器打开html文件,就可以执行js脚本。

    调试代码

    在浏览器按F12调出调试环境,可以在源码上打上断点,单步调试,查看输出。如下图所示。
    在这里插入图片描述

    edge上调试代码,如下图所示
    在这里插入图片描述
    在这里插入图片描述

    编写代码IDE平台:Visual Studio Code + Node.js

    用Visual Studio Code轻便,结合Node.js开发可以不用调用浏览器去调试代码。
    与浏览器不同的是,js文件可以单独运行而不需嵌入html中,通过Node.js加载运行。

    Visual Studio Code下载:https://code.visualstudio.com/
    Node.js下载:https://nodejs.org/en/

    安装完之后打开指定文件夹,如下图所示
    在这里插入图片描述

    编码格式选择LF,与linux保持一致,如下图所示
    在这里插入图片描述

    主程序

    在安装好Node.js之后,配置Visual Studio Code的环境,就可以调试js的代码。如下图所示。
    在这里插入图片描述

    调试代码

    控制调试代码的配置是由文件launch.json进行控制的,可以在添加配置选项中配置调试选项。launch.json文件放置在工程目录的.vscode文件夹下,如下图所示。
    在这里插入图片描述

    编辑界面可以打断点进行调试,在调试控制台可以看到输出信息。变量栏可以时刻观察js变量。如下图所示。
    在这里插入图片描述

    编写代码IDE平台:Linux

    在linux中,支持JavaScript的调试,需要安装nodejs

    sudo apt-get install nodejs-legacy nodejs
    
    $ node -v
    v4.2.6
    

    执行JavaScript脚本

    $ node Jsmain.js 
    string
    A
    3
    3.14159
    [ 'zx', 6.626e-34, 'B', 8 ]
    { siindex: 1,
      strname: 'ZX Test',
      sinum: 2.71828,
      functest: [Function: stfunc] }
    

    中文支持

    js文件保存的形式是utf-8模式保存,不然会出现乱码,如下图所示。
    在这里插入图片描述

    展开全文
  • JavaScript运行原理解析

    万次阅读 多人点赞 2016-01-09 17:06:41
    发现使用了那么长时间的Javascript,但是对其运行原理还是清晰,今天特意总结一下,把大神们的理论和自己的总结都记录到下面; 1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”...

    写在前面的话:

    发现使用了那么长时间的Javascript,但是对其运行原理还是不清晰,今天特意总结一下,把大神们的理论和自己的总结都记录到下面;

    1. 什么是JavaScript解析引擎?

    简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序。比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变为2。

    学过编译原理的人都知道,对于静态语言来说(如Java、C++、C),处理上述这些事情的叫编译器(Compiler),相应地对于JavaScript这样的动态语言则叫解释器(Interpreter)。这两者的区别用一句话来概括就是:编译器是将源代码编译为另外一种代码(比如机器码,或者字节码),而解释器是直接解析并将代码运行结果输出。 比方说,firebug的console就是一个JavaScript的解释器。

    但是,现在很难去界定说,JavaScript引擎它到底算是个解释器还是个编译器,因为,比如像V8(Chrome的JS引擎),它其实为了提高JS的运行性能,在运行之前会先将JS编译为本地的机器码(native machine code),然后再去执行机器码(这样速度就快很多),相信大家对JIT(Just In Time Compilation)一定不陌生吧。

    我个人认为,不需要过分去强调JavaScript解析引擎到底是什么,了解它究竟做了什么事情我个人认为就可以了。对于编译器或者解释器究竟是如何看懂代码的,翻出大学编译课的教材就可以了。这里还要强调的就是,JavaScript引擎本身也是程序,代码编写而成。比如V8就是用C/C++写的。

    2. JavaScript解析引擎与ECMAScript是什么关系?

    JavaScript引擎是一段程序,我们写的JavaScript代码也是程序,如何让程序去读懂程序呢?这就需要定义规则。比如,之前提到的var a = 1 + 1;,它表示:

    • 左边var代表了这是申明(declaration),它申明了a这个变量
    • 右边的+表示要将1和1做加法
    • 中间的等号表示了这是个赋值语句
    • 最后的分号表示这句语句结束了

    上述这些就是规则,有了它就等于有了衡量的标准,JavaScript引擎就可以根据这个标准去解析JavaScript代码了。那么这里的ECMAScript就是定义了这些规则。其中ECMAScript 262这份文档,就是对JavaScript这门语言定义了一整套完整的标准。其中包括:

    • var,if,else,break,continue等是JavaScript的关键词
    • abstract,int,long等是JavaScript保留词
    • 怎么样算是数字、怎么样算是字符串等等
    • 定义了操作符(+,-,>,<等)
    • 定义了JavaScript的语法
    • 定义了对表达式,语句等标准的处理算法,比如遇到==该如何处理
    • ⋯⋯

    标准的JavaScript引擎就会根据这套文档去实现,注意这里强调了标准,因为也有不按照标准来实现的,比如IE的JS引擎。这也是为什么JavaScript会有兼容性的问题。至于为什么IE的JS引擎不按照标准来实现,就要说到浏览器大战了,这里就不赘述了,自行Google之。

    所以,简单的说,ECMAScript定义了语言的标准,JavaScript引擎根据它来实现,这就是两者的关系。

    3. JavaScript解析引擎与浏览器又是什么关系?

    简单地说,JavaScript引擎是浏览器的组成部分之一。因为浏览器还要做很多别的事情,比如解析页面、渲染页面、Cookie管理、历史记录等等。那么,既然是组成部分,因此一般情况下JavaScript引擎都是浏览器开发商自行开发的。比如:IE9的Chakra、Firefox的TraceMonkey、Chrome的V8等等。

    从而也看出,不同浏览器都采用了不同的JavaScript引擎。因此,我们只能说要深入了解哪个JavaScript引擎

    4.为什么JavaScript是单线程?

    JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。

    JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

    所以,为了避免复杂性,从一诞生,JavaScript就是单线程,这已经成了这门语言的核心特征,将来也不会改变。

    为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质。

    二、任务队列

    单线程就意味着,所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。

    如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。

    JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。

    于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

    具体来说,异步执行的运行机制如下。(同步执行也是如此,因为它可以被视为没有异步任务的异步执行。)


    (1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

    (2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。

    (3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。

    (4)主线程不断重复上面的第三步。

    任务队列


    三、事件和回调函数

    "任务队列"是一个事件的队列(也可以理解成消息的队列),IO设备完成一项任务,就在"任务队列"中添加一个事件,表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列",就是读取里面有哪些事件。

    "任务队列"中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入"任务队列",等待主线程读取。

    所谓"回调函数"(callback),就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。

    "任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,由于存在后文提到的"定时器"功能,主线程首先要检查一下执行时间,某些事件只有到了规定的时间,才能返回主线程。

    四、Event Loop

    主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

    为了更好地理解Event Loop,请看下图(转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》)。

    Event Loop

    上图中,主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在"任务队列"中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去读取"任务队列",依次执行那些事件所对应的回调函数。

    执行栈中的代码(同步任务),总是在读取"任务队列"(异步任务)之前执行。请看下面这个例子。

    上图中,主线程运行的时候,产生堆(heap)和栈(stack),栈中的代码调用各种外部API,它们在"任务队列"中加入各种事件(click,load,done)。只要栈中的代码执行完毕,主线程就会去读取"任务队列",依次执行那些事件所对应的回调函数。

    执行栈中的代码(同步任务),总是在读取"任务队列"(异步任务)之前执行。请看下面这个例子。

    
        var req = new XMLHttpRequest();
        req.open('GET', url);    
        req.onload = function (){};    
        req.onerror = function (){};    
        req.send();
    

    上面代码中的req.send方法是Ajax操作向服务器发送数据,它是一个异步任务,意味着只有当前脚本的所有代码执行完,系统才会去读取"任务队列"。所以,它与下面的写法等价。

    
        var req = new XMLHttpRequest();
        req.open('GET', url);
        req.send();
        req.onload = function (){};    
        req.onerror = function (){};   
    

    也就是说,指定回调函数的部分(onload和onerror),在send()方法的前面或后面无关紧要,因为它们属于执行栈的一部分,系统总是执行完它们,才会去读取"任务队列"。

    五、定时器

    除了放置异步任务的事件,"任务队列"还可以放置定时事件,即指定某些代码在多少时间之后执行。这叫做"定时器"(timer)功能,也就是定时执行的代码。

    定时器功能主要由setTimeout()和setInterval()这两个函数来完成,它们的内部运行机制完全一样,区别在于前者指定的代码是一次性执行,后者则为反复执行。以下主要讨论setTimeout()。

    setTimeout()接受两个参数,第一个是回调函数,第二个是推迟执行的毫秒数。

    
    console.log(1);
    setTimeout(function(){console.log(2);},1000);
    console.log(3);
    

    上面代码的执行结果是1,3,2,因为setTimeout()将第二行推迟到1000毫秒之后执行。

    如果将setTimeout()的第二个参数设为0,就表示当前代码执行完(执行栈清空)以后,立即执行(0毫秒间隔)指定的回调函数。

    
    setTimeout(function(){console.log(1);}, 0);
    console.log(2);
    

    上面代码的执行结果总是2,1,因为只有在执行完第二行以后,系统才会去执行"任务队列"中的回调函数。

    总之,setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,也就是说,尽可能早得执行。它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。

    HTML5标准规定了setTimeout()的第二个参数的最小值(最短间隔),不得低于4毫秒,如果低于这个值,就会自动增加。在此之前,老版本的浏览器都将最短间隔设为10毫秒。另外,对于那些DOM的变动(尤其是涉及页面重新渲染的部分),通常不会立即执行,而是每16毫秒执行一次。这时使用requestAnimationFrame()的效果要好于setTimeout()。

    需要注意的是,setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。

    总结:

    以前只是认为javaScript只是一种简单的脚本语言而已,但是随着深入之后慢慢的发现,javaScript还是很复杂的,知识点还是挺多的,JS执行原理大致上已经了解了,但是如果想要深入的话,还需要多努力,多看点书,高效能的javaScript和javaScript高级程序设计都还不错.




    展开全文
  • JavaScript引擎运行原理解析

    千次阅读 2018-09-30 10:16:41
    简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序。比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a...
  • Node.js 是什么?Node.js与JavaScript的区别是什么?

    万次阅读 多人点赞 2019-06-06 23:37:49
    Node.js是一个Javascript运行环境(runtime)。Node.js与JavaScript的区别是什么?本质:     Javascript是一种web前端语言,主要用于web开发中,由浏览器解析执行     Node....
  • 浏览器中的JavaScript是如何运行

    千次阅读 2020-03-23 13:33:30
    浏览器中的JavaScript运行机制 JavaScript是单线程,可以通过异步来实现多线程 目录浏览器中的JavaScript运行机制ESMAScript和JavaScript的关系JS Engine(JS引擎)Context(执行上下文)Call Stack(调用栈)Event ...
  • 默认情况下大多数浏览器都是允许 JavaScript 运行的,毕竟很多博客网站的某些功能是需要 JavaScript 支持的。那么我们应该如何设置浏览器允许或禁止 JavaScript 运行呢?又如何将某个网站添加到允许 JavaScript 运行...
  • 在开始学习JavaScript代码编写的时候,会发现我们程序编写的正确,但是在运行的时候页面出现的空开,一点效果都没有,下面介绍出现这种现象可能的原因。 1.就例如这段代码,是书上一段简单的判断学生成绩的代码,...
  • Javascript程序运行环境安装

    万次阅读 2018-07-13 16:17:13
    Node.js 是Javascript语言服务器端运行环境第一步:下载安装nodejs点击打开链接第二步:运行JavaScript程序微软windows操作系统:附件-命令提示符需进入到js程序的目录下,node命令+js文件名运行程序苹果mac操作系统...
  • Java中运行javascript代码(一)

    千次阅读 2018-12-22 17:47:53
    jvm支持多种动态语言,我们可以从java中调用JavaScript、Groovy、Ruby以及Scheme和Haskell编写的脚本,考虑到语言的流行程度,我们选择了js。 实例代码: 本代码主要来自《写给大忙人看的Jave SE 9核心技术》一...
  • 新生代总结 JavaScript 运行机制解析

    千次阅读 多人点赞 2021-08-19 00:34:04
    新生代总结 JavaScript 运行机制解析 大家好,我是小丞同学,一名准大二的前端爱好者 这篇文章将带你一起学习理解 JavaScript 运行机制 愿你忠于自己,热爱生活 引言 在一些面试中,我们或许会被问到这样的问题 ...
  • VSCode运行JavaScript代码

    千次阅读 2019-09-29 00:39:36
    方式一(推荐): 安装插件 open in window, 然后option+b 转载于:https://www.cnblogs.com/hankleo/p/11565599.html
  • 传统意义上的 JavaScript 运行在浏览器上,这是因为浏览器内核实际上分为两个部分:渲染引擎和 JavaScript 引擎。前者负责渲染 HTML + CSS,后者则负责运行 JavaScript。Chrome 使用的 JavaScript 引擎是 V8,它的...
  • Sublime 下运行javascript

    千次阅读 2018-08-02 22:31:16
    在sublime中,我们可以通过Node.js运行javascript,具体做法如下: 第一步:安装node.js  你可以通过命令行node -v查看是否安装node.js,如果已经安装,则会出现当前node的版本号  Node.js 官网下载地址: ...
  • 浅谈JavaScript的两种运行环境

    万次阅读 2017-03-04 20:56:11
    目前JavaScript脚本的运行环境有浏览器和node.js环境两种。 1、JavaScript被定义为一种浏览器的脚本语言,一直以来其运行...2、在2009年,诞生了node.js技术,node.js是一个Javascript运行环境(runtime)。实际上它是
  • 在线JS运行 JavaScript IDE

    千次阅读 2018-01-30 16:52:51
    JavaScript在线IDE JsBin 可以分享,重点是可以直接运行,相当于在线IDE,十分方便快捷 连接websocket的代码示例 在线编辑地址 可以根据连接的情况做不同的处理 var ws = new WebSocket("ws://127.0.0.1:...
  • 解决步奏: 1、打开IE浏览器,点击【设置】按钮,选择【Internet选项】 2、在Internet选项界面中,选择【高级】 3、找到【允许活动内容在”我的电脑”的文件中运行】,打√,点击【应用】...
  • javascript运行机制之执行顺序详解

    万次阅读 多人点赞 2014-01-19 15:51:57
    如果你能理解javaScript语言的运行机制,或者简单地说,你能掌握javascript的执行顺序,那你就犹如伯乐驾驭了千里马,让千里马脱缰而出,四处乱窜。  那么JavaScript是怎么来进行解析的吗?它的执行顺序又是...
  • JavaScript脚本的运行环境

    千次阅读 2017-06-13 16:53:02
    目前JavaScript脚本的运行环境有浏览器和Node.js环境两种。 1、javascript被定义为一种浏览器的脚本语言,一直以来其运行环境都是...2、在2009年,诞生了node.js技术,node.js是一个Javascript运行环境(runtime)。实
  • VUE项目首次npm run dev能正常运行,更改部分代码后保存运行抛出错误。 分析原因:JavaScript heap out of memory(应该是内存溢出的原因) 解决方法: 找到node_modules/.bin/webpack-dev-server.cmd这个文件,添加...
  • JavaScript 运行机制详解

    万次阅读 2017-03-15 09:40:50
    阅读目录 · 一、为什么JavaScript是单线程? · 二、任务队列 · 三、事件和回调函数 · 四、Event Loop · 五、定时器 · 六、Node.js的Event LoopPhilip
  • JavaScript运行环境配置

    千次阅读 2019-05-28 17:32:07
    1 在html中运行 这种运行只需要一个文档编辑器+...需要下载安装node.js环境,类似于python、java一样,此时运行JS程序需要html的协助,而可以直接运行。 例如,cmd中 node xxx.js 即可 , 也需要配置环境变量。 ...
  • Node.js中运行JavaScript代码

    千次阅读 热门讨论 2017-05-31 15:52:24
    最近学习JS的内容,有幸得到Bill的指点,之前自己运行JS的脚本是在浏览器上,之后惊喜的发现,可以在加载Node.js环境中,在命令窗口运行脚本。这样做的好处是什么呢?大大的减少了窗口来回切换的的频率,提高我们的...
  • Eclipse写的html文件中JavaScript代码能执行可能存在的问题 1、由于Eclipse写html文件没有错误提示。js遇到问题就不会执行了,而且在一个&lt;script&gt;&lt;/script&gt;标签内定义几个函数,某个...
  • 简单的说 Node.js 就是运行在服务端的 JavaScript。 Node.js是一个基于 Chrome V8 引擎的 JavaScript 运行环境; Node.js使用一个事件驱动、非阻塞式 I/O 的模型,使其轻量且高效; Node.js的软件包生态系统npm是...
  • 如何在windows上运行一个javascript脚本

    万次阅读 2017-11-09 11:54:53
    如何在windows上运行一个javascript脚本最近要测试一个公司内部行政数据、人员数据等的同步, 需要很多测试数据。为了方便,就写了一个js脚本自动生成测试数据,但是却知道如何单独运行这个js脚本: 首先在电脑...
  • js代码: <script src="/Scripts/jquery-1.7.1.min.js"></script> <script type="text/javascript"> function changeCheckCode() { ...点击后总提示JavaScript 运行时错误: 缺少对象,这是怎么回事
  • 有关vue运行显示不出来的问题

    千次阅读 2018-11-13 20:40:15
    在学习vue框架的时候,我按照官网上的方式进行编程却无法显示出来,在进行app7的代码试验的时候。 因此,我进行排查,网上基本没有什么相关的信息,然后后来我才发现: 能打空格! 这部分内容,我在v-bind的...
  • js shell 运行javascript文件

    千次阅读 2017-07-18 22:40:03
    第二,将文件解压,解压后文件是一堆散乱的文件,建议大家新建一个文件夹,以js shell命名,把所有解压出来的文件放里面,然后打开js.exe;打开页面如下图所示: 第三,编写js文件,这里的js文件必须放在js ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 744,570
精华内容 297,828
关键字:

javascript运行不出来

java 订阅