读此书之前,感谢淘宝技术团队对此javascript核心的翻译,感谢弗拉纳根写出此书。感谢你们无私的分享,仅以此笔记献给你们的辛勤付出。
一:javascript语言核心
本章之后,我们将主要关注javascript的基础知识。第二章我们讲解javascript的注释,分号和unicode字符集;第三章会更有意思,主要讲解javascript的变量和赋值
在javascript中,最重要的类型就是对象和数组,第六章介绍对象,第7章介绍数组。对象和数组在 javascript是如此重要。以至于在本书中到处能看到他们的身影。
上面代码中通过方括号定义数组元素和通过花括号定义对象属性名和属性值之间的映射关系的语法陈伟初始化表达式(initalizer expression),第四章有专门介绍.表达式是javascript中的一个短语,这个短语可以通过运算得出一个值,通过","和"[]"来引用对象属性或数组元素的值构成一个表达式。
javascript中最常见的表达式写法是像下面 代码这样的运算符(oprartor)
如果javascript中的“短语”是表达式话,那么整个句子就称作语句(statement),第五章会详细讲解。
在上述代码中,以分号结束的行均是一条语句,粗略的讲,表达式仅仅计算出一个值(或者它包含的值我们并不关心)但他们改变程序运行状态。在上文中,已经见过变量声明语句和赋值语句。另一类语句是“控制结构”(control structure),比如条件判断和循环,在介绍完函数后,我们给出相关示例代码。
函数是带有名称和参数的javascript代码段,可一次定义多次使用。第8章会正式详细地讲解函数。与对象和数组一样,本书很多地方提到函数,这里给一些简单的示例代码。
当将函数和对象和写在一起时,函数就编程了“方法”(method)
现在,给出一些控制语句的例子,这里的示例函数体内包含了最常见的javascript的控制语句
javascript是一种面向对象的编程语言,但和传统的页面对象有有很大的区别,第9章将详细讲解的javascript的面向对象,这章会有大量的示例代码,是本书最长的一章。
这里有一个简单的示例,这段代码展示了如何在javascript中定义一个类来表示2D面的几何中的点。这个类实例化的对象拥有一个名为r()的方法,用来计算改点到原点的距离。
第9章是第一部分的精华所在
,后续的各章做了零星的延伸,将带领我们走向对javascript探索的尾声。第十章主要讲正则表达式进行的文本匹配模式。
第11章主要护额石膏javascript的语言核心的子集和超集
。在进入客户端的javascript的内容之前,第12章我们只要介绍两种在web之外的javascript运行环境。
2.客户端javascript
javascript语言核心部分的内容知识点交叉引用比较多,且知识层次感不分明。在客户端javascript的内容编排有了很大的改变。依照本章学习,完全可以在web浏览器中使用javascript。(但你如果想通过阅读本书学习javascript的话,不能只将眼光放在第二部分) 第13章是第二部分的第一章,该章介绍如何让javascript在web浏览器中运行起来。 第14章讲解到web浏览器脚本技术,并涵盖客户端javascirpt的一席重要的全局函数。
例如:
第十五章会讲述javascript如何操纵html样式定义内容的展示方式
.第十五章的内容将更加务实,通过脚本操作html文档内容,它将展示如何选取特定的网页元素,如何给html元素设置属性,如果修改元素的内容,以及如何给文档添加新的节点以下实例函数展示了如果查找和修改基本的文章内容
//如果元素不存在,则创建一个 if (!log) { log = document.createElement("div"); //创建一个新的div元素 log.id = "debuglog"; //为在各方元素的id赋值 log.innerHTML = "
Debug Log
"; //自定义初始内容 document.body.appendChild(log); //将其添加到文档末尾 } //将消息包含在中,并添加到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 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的属性指定一个事件处理程序。如下
Debug Log
"; //自定义初始内容 document.body.appendChild(log); //将其添加到文档末尾 } //将消息包含在中,并添加到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"; } hello
下面的这些客户端javascript用到了事件,它给了一个很重要的事件:“load”事件注册了一个事件处理辰星。同事也展示注册"click"事件处理函数更高级的一种方法
//遍历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"; } };