第一章：Javascript语言核心

时间 2019-11-19

原文原文链接

本节是javascript语言的一个快速预览，也是本书的第一部分快速预览。javascript

读此书以前，感谢淘宝技术团队对此javascript核心的翻译，感谢弗拉纳根写出此书。感谢大家无私的分享，仅以此笔记献给大家的辛勤付出。css

一：javascript语言核心html

本章以后，咱们将主要关注javascript的基础知识。第二章咱们讲解javascript的注释，分号和unicode字符集；第三章会更有意思，主要讲解javascript的变量和赋值html5

这里有一些实例代码说明前两章的重点内容。java

<script type="text/javascript">
             //双斜杠以后以后的内容都于属于注释
             //仔细阅读这里的注释，它将会对javascript代码作解释
             // 变量是表示值的一个符号名字
             // 变量是经过var关键字声明
            var x; //声明一个变量x
             //值能够经过符号赋值给变量
            x = 0; //如今变量x的值为0
            x //经过变量名获取其值。

             //javascript支持多种数据类型

             x = 1; //数字
            x = 0.01; //整数和实数共用一种数据类型
            x = "hello world"; //由双引号内的文本构成字符串
            x = 'hello world'; //单引号一样构成字符串。
            x = true; //布尔值
            x = false; //另一个布尔值
            x = null; //null是一个特殊的值。意思是空
            x = undefined; //undefined和null很是相似
        </script>

在javascript中，最重要的类型就是对象和数组，第六章介绍对象，第7章介绍数组。对象和数组在 javascript是如此重要。以致于在本书中处处能看到他们的身影。c++

<script type="text/javascript">
             //javascript中最重要的类型就是对象
             //对象是名/值对的集合，或字符串值到映射值的集合。

            var book = { //对象是由花括号括起来的
                topic: "javascript", //属性"topic"的值是javascript
                fat: true //属性fat的值是true
            }; //右边的花括号结束。
             //经过“.”或“[]”来访问对象属性。
            book.topic //=>"javascript"
             book["fat"] //=>true另一种获取属性的方式、
             book.author = "ahthw"; //经过赋值建立一个新的属性
            book.content = {}; //{}是一个空对象。它没有属性

             //javascript一样支持数组（以数组为索引的列表）
            var primes = [2, 3, 5, 7]; //拥有4个值的组合，由“[”“]”划定边界
            primes[0] //=>2：数组的第一个对象，索引为0
            primes.length //=>4,数组中元素的个数
            primes[primes.length-1]  //=>7:数组中最后一个元素
            primes[4] =9; //经过赋值来增长新的元素
            primes[4] =11;//经过赋值来改变已有的元素
            var empty = [];//空数组，有0个元素
            empty.length   //=>:0
            
            //数组和对象中均可以包含另外一个数组或者对象。
            var point =[   //具备两个元素的数组
            {x:0,y:0},        //每一个元素都是一个对象
            {x:1,y:1}
            ];
            var data ={           //一个包含两个属性的对象
                trial1:[[1,2],[3,4]],  //每个对象都是数组
                trial2:[[2,3],[4,5]]     //数组的元素也是数组
            };
        </script>

上面代码中经过方括号定义数组元素和经过花括号定义对象属性名和属性值之间的映射关系的语法陈伟初始化表达式(initalizer expression),第四章有专门介绍.表达式是javascript中的一个短语，这个短语能够经过运算得出一个值，经过","和"[]"来引用对象属性或数组元素的值构成一个表达式。程序员

javascript中最多见的表达式写法是像下面代码这样的运算符(oprartor)web

 //运算符做为操做符，生成一个新的值
             //最多见的算术运算符
             3+2  // =>5 加法
             3-2   // =>减法
             3*2    // =>乘法
             3/2   // =>除法
             point[1].x -point[0].x     //=>复杂的运算也能照常工做
             "3"+"2"   // => 32.能够完成加法运算，也能够完成 字符串拼接。
             
             //javascript定义了一些算术运算符做为简写形式
             var count = 0; //定义一个变量
             count++;      //自增1
             count--;       //自减1
             count +=2;     //自增2 和 "count = count + 2;"写法同样
             count *=3      //自乘3. 和"count = count*3; "写法同样
             count          //=> 6: 变量名自己也是一个表达式
             
             //相等关系运算符用来判断两值是否相等
             //不等，大于，小于运算符运算结果是true或false
             var x=2,y=3;       //这里的等号是赋值的意思，不是比较相等
             x == y;          //=>false 相等
             x ！= y;          //=> true 不等
             x < y;            //=> true: 小于
             x <= y;           //true  小于等于
             x > y;             //false 大于
             x >= y;            //false 大于等于
             "two"=="three";     //false 两个字符串不相等
             "two" > "three";    //true "tw"在字母表中的索引大于"th"
             false == (x>y);     //ture false =false;
             
             //逻辑运算符是对布尔值的合并或求反
             (x == 2)&&(y==3);   //=>true两个比较都为true.&&为"与"
             (x > 3)||(y<3);      //=> false 两个比较都不是true. ||表示"或"
             ！(x == y);           //=>true !表示求反

若是javascript中的“短语”是表达式话，那么整个句子就称做语句(statement)，第五章会详细讲解。正则表达式

在上述代码中，以分号结束的行均是一条语句，粗略的讲，表达式仅仅计算出一个值（或者它包含的值咱们并不关心）但他们改变程序运行状态。在上文中，已经见过变量声明语句和赋值语句。另外一类语句是“控制结构”（control structure），好比条件判断和循环，在介绍完函数后，咱们给出相关示例代码。express

函数是带有名称和参数的javascript代码段，可一次定义屡次使用。第8章会正式详细地讲解函数。与对象和数组同样，本书不少地方提到函数，这里给一些简单的示例代码。

         //函数是一段待遇参数的javascript代码段，能够屡次调运
             
            function plus1(x) { //定义了一个名为plus1的函数，并带有参数x
                    return x + 1; //返回一个比传入大1的值。
                } //函数的代码块是由花括号包裹起来的部分
                
            plus1(y) //
            var square =function(x){       //函数是一种值，能够赋值给变量
                return x*x;               //计算函数的值
            };                         //分号表示了赋值语句的结束
            square(plus1(y));           //在一个表达式中石油两个函数

当将函数和对象和写在一块儿时，函数就编程了“方法”（method）

     //当函数赋值给对象的属性，咱们称为
             //"方法",全部的javascript对象都包含方法
              var a =[];          //建立一个空数组
              a.push(1,2,3);        //向push()方法向数组中添加对象
              a.reverse();           //数据反转
                               //  document.write(a)
             //咱们能够定义子的方法，"this"关键字是对定义方法
             //的对象的引用，这里的例子是上文中提到的包含两个点位置信息的数组。
             points.dist =function(){   //定义一个方法计算两点之间的距离
                 var p1 =this[0];    //经过this关键字得到当前数组的引用
                 var p2 =this[1];   //并取得调用的数组前两个元素
                 var a =p2.x- p1.y;  // x坐标轴上的距离
                 var b =p2.y - p1.y;  //y坐标轴上的距离
                 return Math.sqrt(a * a + "咱们称为" + b * b); //勾股定理
             };   //Math.sqrt()计算平方根
             points.dist()          // =>求两个点之间的距离

如今，给出一些控制语句的例子，这里的示例函数体内包含了最多见的javascript的控制语句

 //这里javascript语句使用该语法包含条件判断和循环
             //使用了相似java c++和其它语言的语法

            function abs(x) { //求绝对值函数
                if (x >= 0) { //if
                    return x; //若是true则执行这里代码
                } else { //false执行
                    return -x;
                }
            }

            function factprial(n) { //计算阶乘
                var product = 1; //给product赋值为1
                while (n > 1) { //()值表达式为 true时循环执行{}内容
                    product *= n; //product = product * n的简写
                    n--; // n = n-1写法
                } //循环结束
                return product; //返回 product
            }
            factprial(4) // =>24  1*4*3*2  document.write(factprial(4))

            function factorial2(n) { //实现循环的另一种写法
                var i, product = 1; //
                for (i = 2; i <= n; i++) //将i从2自增到n
                    product *= i; //循环体，当循环体中只有一句代码，省略{}
                return product; //计算返回好的阶乘
            }
            factorial2(5) //document.write(factorial2(5))  =>120 : 1*2*3*4*5

javascript是一种面向对象的编程语言，但和传统的页面对象有有很大的区别，第9章将详细讲解的javascript的面向对象，这章会有大量的示例代码，是本书最长的一章。

这里有一个简单的示例，这段代码展现了如何在javascript中定义一个类来表示2D面的几何中的点。这个类实例化的对象拥有一个名为r()的方法，用来计算改点到原点的距离。

         //定义一个构造函数以初始化一个新的point对象
            function Point(x, y) { //构造函数通常均以大写字母开始
                this.x = x; //关键字this指代初始化的实例
                this.y = y; //将函数参数存储为对象的属性
            }

             //使用new关键字和构造函数来建立一个实例
            var p = new Point(1, 1); //平面几何中的点1,1,

             //经过构造函数prototype对象赋值
             //来给Point对象定义方法
            Point.prototype.r = function() {
                return Math.sqrt( //返回x平方+y平方的平方根
                    this.x * this.x + //this指代调运这个方法的对象
                    this.y * this.y);
            };
            
            //Point的实例对象p（以及全部的point实例对象）继承了方法r()
            p.r() // => 1.4142135623730951 /document.write(p.r())

第9章是第一部分的精华所在，后续的各章作了零星的延伸，将带领咱们走向对javascript探索的尾声。

第十章主要讲正则表达式进行的文本匹配模式。

第11章主要护额石膏javascript的语言核心的子集和超集。

在进入客户端的javascript的内容以前，第12章咱们只要介绍两种在web以外的javascript运行环境。

2.客户端javascript

javascript语言核心部分的内容知识点交叉引用比较多，且知识层次感不分明。在客户端javascript的内容编排有了很大的改变。依照本章学习，彻底能够在web浏览器中使用javascript。（但你若是想经过阅读本书学习javascript的话，不能只将眼光放在第二部分）第13章是第二部分的第一章，该章介绍如何让javascript在web浏览器中运行起来。第14章讲解到web浏览器脚本技术，并涵盖客户端javascirpt的一席重要的全局函数。

例如：

    function moveon() {
            //经过对话框询问一个问题
            var answer = confirm("准备好了吗？");
            //单击肯定，浏览器会加载一个新的页面
            if (answer) window.location = "http://www.baidu.com";
        }
        //在1分钟(60000毫秒后执行这个函数)
        setTimeout(moveon,300);

第十五章会讲述javascript如何操纵html样式定义内容的展现方式.第十五章的内容将更加务实，经过脚本操做html文档内容，它将展现如何选取特定的网页元素，如何给html元素设置属性，若是修改元素的内容，以及如何给文档添加新的节点

如下实例函数展现了若是查找和修改基本的文章内容

//在document中的一个指定信息的区域树超调试信息
         //若是document上不存在这个元素，则建立一个
        function debug(msg) {
            //经过查看html元素的    id属性来查找文档的调试部分
            var log = document.getElementById("debuglog");

            //若是元素不存在，则建立一个
            if (!log) {
                log = document.createElement("div"); //建立一个新的div元素
                log.id = "debuglog"; //为在各方元素的id赋值
                log.innerHTML = "<h1>Debug Log</h1>"; //自定义初始内容
                document.body.appendChild(log); //将其添加到文档末尾
            }
            //将消息包含在<pre>中，并添加到log中
            var pre = document.createElement("pre"); //建立pre元素
            var text = document.createElement(msg); //将msg包含在一个文本节点上
            pre.appendChild(text); //文本添加到pre
            log.appendChild(pre); //pre添加到log
        }

在第十六章会讲到如何使用javascript操做元素，这一般会使用到元素的style和class属性

function hide(e, reflow) { //经过jvascript操纵元素和隐藏元素e
                if (reflow) { //若是第二个参数为true
                    e.style.display = "none" //隐藏这个元素，其占用的空间也销售
                } else {
                    e.style.visibility = "hidden"; //将e隐藏，保留其占用的空间
                }
            }

            function highlight(e) { //经过设置css来高亮显示e
                if (!e.className) e.className = "highcss";
                else
                    e.className += "highcss";
            }

能够经过javascript来控制元素的内容和css样式，一样也能够经过事件处理程序(event handler)来定义文档行为，事件处理辰星是一个在浏览器中心注册的javascript函数，当特定的事件发生时浏览器即可以调用这个函数。
一般咱们关注的事件类型是鼠标点击和键盘按键事件（智能手机为各类触碰事件）。或者说当浏览器完成文档的加载，当用户改变窗口的大小或当用户向表单中输入数据时便会触发一我的事件。
第17章会详细描述如何定义，注册时间处理程序，以及在事件发生时浏览器是如何调用他们的。
自定义事件处理程序最简单的方法，给html的以on为前缀的属性绑定一个回调，当写一些简单的程序测试时，最实用的方法就是给“onclick”处理程序绑定回调。假设以上将上文的debug()和hide()这个函数保存至debug.js和hide.js的文件中，那么就能够简单些一个html测试文件，来给onclick的属性指定一个事件处理程序。以下

<script type="text/javascript">
         //在document中的一个指定信息的区域树超调试信息
         //若是document上不存在这个元素，则建立一个
        function debug(msg) {
            //经过查看html元素的    id属性来查找文档的调试部分
            var log = document.getElementById("debuglog");

            //若是元素不存在，则建立一个
            if (!log) {
                log = document.createElement("div"); //建立一个新的div元素
                log.id = "debuglog"; //为在各方元素的id赋值
                log.innerHTML = "<h1>Debug Log</h1>"; //自定义初始内容
                document.body.appendChild(log); //将其添加到文档末尾
            }
            //将消息包含在<pre>中，并添加到log中
            var pre = document.createElement("pre"); //建立pre元素
            var text = document.createElement(msg); //将msg包含在一个文本节点上
            pre.appendChild(text); //文本添加到pre
            log.appendChild(pre); //pre添加到log
        }

        function hide(e, reflow) { //经过jvascript操纵元素和隐藏元素e
            if (reflow) { //若是第二个参数为true
                e.style.display = "none" //隐藏这个元素，其占用的空间也销售
            } else {
                e.style.visibility = "hidden"; //将e隐藏，保留其占用的空间
            }
        }

        function highlight(e) { //经过设置css来高亮显示e
            if (!e.className) e.className = "highcss";
            else
                e.className += "highcss";
        }
    </script>

    hello
    <button onclick="hide(this,true); debug('hide buttoon 1');">hide1</button>
    <button onclick="hide(this);debug('hide button 2');">hide2</butotn>

下面的这些客户端javascript用到了事件，它给了一个很重要的事件：“load”事件注册了一个事件处理辰星。同事也展现注册"click"事件处理函数更高级的一种方法

<script type="text/javascript">
         //"load"事件在只有在文档加载后才能完成触发
         //如一般须要等待load事件发生后才能执行javascript代码
        window.onload = function() {
            //找到文档中全部的img标签
            var images = document.getElementsByTagName("img");

            //遍历images，给每一个节点的click事件添加处理程序
            //在点击图片的时候将图片隐藏
            for (var i = 0; i < images.length; i++) {
                var imge = images[i];
                if (imge.addEventListener) //注册时间处理程序的另一种方法
                    imge.addEventListener("click", hide, false);
                else //兼容ie8之前操做
                    imge.attachEvent("onclick", hide);
            }
            //这即是上面注册事件的处理函数
            function hide(evnet) {
                event.target.style.visibility = "hidden";
            }
        };
    </script>

在15-17章讲述了如何使用javascript来控制网页的内容，样式以及行为（事件处理），这章讨论api多少有些复杂，并且至今有糟糕的浏览器兼容性，正是这个缘由，不少javascript程序员选择使用"库"或“框架”来简化他们的编码工做，最流行的莫非jQuery，第19章介绍jQuery库

function debug(msg) {
                var log = $("#debuglog");

                if (log.length == 0) {
                    log = $("<div id='debuglog'><h1>debuglog</h1></div>");
                    log.appendTo(document.body);
                }

                document.write(log)
                log.append($("<pre/>").text(msg));
            };

目前咱们所提到的第二个部分的4章都是围绕网页展开讨论的，后续的4章将着眼店转向web应用，这几张内容不是讨论如何编写操控内容。样式和兴旺的脚本使用web浏览器来渲染文档；而是讲解如何将web浏览器做为应用平台。并描述了用于支持更复杂精细的客户端web应用和现代浏览器的api。
第18章讲解如何使用javascript来发起http请求。
第20章描述数据存储机制以及客户端应用的会话状态保持，第21章涵盖基于讲解html5所驱动的新一代应用api/网络存储图形，这些都是基于哪些支持新api的浏览器开发。浙江是你做为javascript程序员最激动人心的时刻。最后4章没有太多的示例代码。下面的例子使用了这些新的api.

例子：http://file.ahthw.com/lx/c0001.html

（本篇已经完结）