读《JavaScript DOM编程艺术》札记一

读《JavaScript DOM编程艺术》笔记一

边读JavaScript DOM编程艺术边记录了一些知识点，书确实挺不错的，很多东西讲得很清楚

发现我写的有很多英文不知道为什么没有了，建议选择内容来看，能看到消失的单词

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

第一种方式是将JavaScript代码放到文档head标签中的script标签之间

一种更好的方式是把JavaScript代码存为一个扩展名为js的独立文件。典型做法是在文档的head部分放一个script标签，src指向该文件

最好的做法是把script标签放到HTML文档的最后，</body>标签之前，这样可以使浏览器更快地加载页面

</body>

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

在JavaScript语言里，变量和其他语法元素的名字都是区分字母大小写的。

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

必须明确类型声明的语言称为强类型语言，JavaScript不需要进行类型声明，因此它是一种弱类型语言。这意味着程序员可以在任何阶段改变变量的数据类型。

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

字符串：注意如果字符串里有单引号或双引号是字符串的一部分需要用转义

Var mood=’don\’t ask’;

Var height=”about 5’10\” tall”;

反斜杠\就是用来转义的。

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

创建对象：var Lennon=Object()；

Lennon.name=”liona”;

Lennon.year=1967;

Lennon.living=false;

或 var Lennon={name:”johon”,year:1987,living:true};

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

Var message=”i am felling”+”happy”;

像这样把多个字符串首尾相连在一起的操作叫做拼接

甚至可以把数值和字符串拼接在一起，此时数值将被自动转换成字符串

Var year=302;

Var message=”this year is”+year;

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

在命令变量时，我用下划线来分割各个单词；在命名函数时，从第二个单词开始把每个单词的第一个字母写成大写（驼峰命名）。这样可以一眼看出哪些名字是变量哪些是函数。

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

变量的作用域：

全局变量-可以再脚本的任意位置被引用，全局变量的作用域是整个脚本

局部变量-只存在于声明它的那个函数的内部。局部变量的作用域仅限于某个特定的函数

如果在某个函数中使用了var，那个变量就会被视为一个局部变量，它只存在于这个函数的上下文中；如果没有用var，那个变量就会被视为一个全局变量，如果脚本里已经存在一个与之同名的全局变量，这个函数就会改变那个全局变量的值。

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

为给定对象创建一个新的实例需要使用new关键字

Var Jeremy=new Person;

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

内建对象：JavaScript里提供了一系列预先定义好的对象，可以拿来就用

像数组、Math、Date都是内建对象。

宿主对象：除了内建对象还可以在JavaScript脚本里使用一些已经预定义好的其他对象。这些对象是由运行环境提供的，具体到web，这个环境就是浏览器。由浏览器提供的预定义对象被称为宿主对象

宿主对象包括：Form、Image和Element等。我们可以通过这些对象获得关于网页上的表单、图像和各种表单元素等信息还有document对象。

JavaScript语言里的对象可以分为三种类型：

用户自定义对象

内建对象

宿主对象

JavaScript最初版本里最基础的宿主对象是window对象，对应的是浏览器窗口本身。这个对象的属性和方法通常称为BOM浏览器对象模型。

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

获取元素：3种DOM方法可以获取元素节点

getElementById

getElementsByTagName

getElementsByClassName

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

getElementsByClassName只有比较新的浏览器才支持它，可以用以下函数，能适应新老浏览器

Function getElementsByClassName(node,classname){

If(node.getElemensByClassName){

Return node.getElementsByClassName(classname);

}else{

Var results=new Array();

Var elems=node.getElementsByTagName(“*”);

For(var i=0;i<elems.length;i++){

Results[results.length]=elems[i];

}

return results;

}

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

获取和设置属性

getAttribute：object.getAttribute(attribute)

该方法不属于document对象，不能通过document对象调用，只能通过元素节点对象调用。

setAttribute：object.setAttribute(attribute,value)也只能用于元素节点

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

childNodes属性：获取任何一个元素的所有子元素【空格或换行符等都会被解释为节点，他们会全都在childNodes属性所返回的数组当中】

nodeType属性：获取节点的属性

元素节点的nodeType属性值为1

属性节点的nodeType属性值是2

文本节点的nodeType属性值是3

nodeValue属性：如果想改变一个文本节点的值，那就使用DOM提供过的nodeValue属性。

再用nodeValue属性获取ID对象的值时，得到的并不是包含在这个段落里的文本，真正需要的是元素的第一个子节点

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

弹出的广告窗口和内容覆盖是一个典型的滥用JavaScript例子。

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

平稳退化：如果正确地使用了JavaScript脚本，就可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你的网站，这就是平稳退化。就是说，虽然某些功能无法使用，但最基本的操作仍能顺利完成。

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

JavaScript使用window对象的open()方法来创建新的浏览器窗口。这个方法有三个参数

Window.open(url,name,featrues);

三个参数都可选

第一个是想在新窗口打开的网页的URL地址

第二个是新窗口的名字

最后一个是以逗号分隔的字符串，内容是新窗口的各种属性，尺寸、新窗口被启用或禁用的各种浏览功能等等。原则是新窗口的浏览功能要少而精

Function popUp(winURL){

Window.open(winURL,”popup”,”width=320,height=480”);

}

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

调用popUp函数的一个办法是使用伪协议

“javascript:” 伪协议

真协议用来在因特网上的计算机之间传数据包，如http协议，FTP协议等。伪协议则是一种非标准化的协议。JavaScript:伪协议让我们通过一个连接来调用JavaScript函数

例子：<a href=”javascript:popUp(‘http://www.zhengshuang.com/’);”>Example</a>

这条语句在支持伪协议的浏览器正常运行，较老的浏览器会尝试打开连接但会失败，支持这种伪协议但禁用了JavaScript功能的浏览器什么也不做

总之，在HTML文档里通过JavaScript:伪协议调用JavaScript代码的做法非常不好

极少数的搜索机器人能够理解JavaScript代码，所以JavaScript网页的平稳退化对搜索引擎上的排名很重要。

<a href=”http://www.zhengshuang.com/”

onclick=”popUp(‘http://www.zhengshuang.com/’);return false;”>Example</a>

或者

<a href=”http://www.zhengshuang.com/”

onclick=”popUp(this.getAttribute(‘href’));return false;”>Example</a>

或者

<a href=”http://www.zhengshuang.com/”

onclick=”popUp(this.href);return false;”>Example</a>

这样即使JavaScript已被禁用或遇到了搜索机，这个链接也是可用的，虽然这个链接在功能上打了点折扣，但他并没有彻底失效。这是一个经典的平稳退化的例子。

渐进增强：所谓渐进增强就是用一些额外的信息层去包裹原始数据。。按照渐进增强原则创建出来的网页几乎都符合平稳退化原则

Window.onload=；

对象检测：检测浏览器对JavaScript的支持程度。

例如有一个使用了getElementById（）方法的函数，可以在调用之前检查浏览器是否支持这个方法，注意一定要删除方法名后面的圆括号

Function myFunction(){

If(document.getElementById){

Use

}

改成如果不支持请离开的格式比较好

If(!getElementById){

Return false;

}

这么做是为了让脚本有良好的向后兼容性。

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

性能考虑

很多人会忽视脚本对web应用整体性能的影响。为保证应用流畅地运行，在为文档编写和应用脚本时，需要注意一些问题：

尽量少访问DOM和尽量减少标记：在多个函数都会取得一组类似元素的情况下，可以考虑重构代码，把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数。

合并和放置脚本：放在</body>之前会比较好

压缩脚本：压缩脚本文件，可以把文件中不必要的字节，空格，注释等统统删除。

通常你应该有两个版本，一个是工作副本，可以修改代码并添加注释，另一个是精简版本，用于放在站点上。精简版本最好加上min

推荐几个代码压缩工具：JSMin、雅虎的YUI Compressor、谷歌的Closure Compiler

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

最好不要用onkeypress事件处理函数，onclick事件处理函数已经能满足需要。

Document.write（）

结构、行为和样式的分离应避免使用document.write方法

InnerHTML属性可以用来读、写给定元素里的HTML内容。

Var test=document.getElementById(“testdiv”);

Alert(test.innerHTML);

innerHTML既支持读取，又支持写入

test.innerHTML=”<p>insert</p>”;

缺点是，一旦你使用了innerHTML属性，它的全部内容都将被替换

附上JavaScript图片库实例代码，是对所学知识的实例应用

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

HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="showPic.css">
</head>
<body>
<h1>JavaScript图片库1</h1>
<ul id="imageGallery">
    <li>
        <a href="zs/zs4.jpg"  title="shuang1">大脑壳wuli爽1</a>
        <a href="zs/zs5.jpg"  title="shuang2">大脑壳wuli爽2</a>
        <a href="zs/zs6.jpg"  title="shuang3">大脑壳wuli爽3</a>
        <a href="zs/zs7.jpg"  title="shuang4">大脑壳wuli爽4</a>
    </li>
</ul>
<img id="placeholder" src="zs/holder.png" alt="我的图片库">
<p id="description">选择wuli小爽的图片</p>
<script src="showPic.js"></script>
<!--第一个问题是它支持平稳退化吗？如果JavaScript功能被禁用会怎样？-->
<!--检查过代码后，结论是已经为此预留了退路，即使JavaScript功能被禁用，用户也可以浏览图片库里的所有图片，网页里的链接也都可以正常工作。-->
<!--第二个问题，JavaScript与HTML标记是分离的吗？(这里是修改后的代码，源代码如下：
<ul>
    <li>
        <a href="zs/zs4.jpg" onclick="showPic(this);return false;" title="shuang1">大脑壳wuli爽1</a>
        <a href="zs/zs5.jpg" onclick="showPic(this);return false;" title="shuang2">大脑壳wuli爽2</a>
        <a href="zs/zs6.jpg" onclick="showPic(this);return false;" title="shuang3">大脑壳wuli爽3</a>
        <a href="zs/zs7.jpg" onclick="showPic(this);return false;" title="shuang4">大脑壳wuli爽4</a>
    </li>
 )-->
<!--答案是他们混杂在一起了，对此进行修改，修改后代码放置在JavaScript图片库1.html里-->
</body>
</html>

CSS：

body{
    font-family: "Helvetica","Arial","serif";
    color:#333;
    background-color:#ccc;
    margin:1em 10%;
}
h1{
    color:#333;
    background-color:transparent;
}
a{
    color:#c60;
    background-color:transparent;
    font-weight:bold;
    text-decoration: none;
}
ul{
    padding:0;
}
ul li{
    list-style-type:none;
    float:left;
    padding:1em;
}
img{
    display: block;
    clear:both;
}

js:

/**
 * Created by Administrator on 2016/7/21.
 */
window.onload=function(){
    if(!document.getElementById){
      return false;
    }
    if(!document.getElementsByTagName){
        return false;
    }
    if(!document.getElementById("imageGallery")){
        return false;
    }
    var gallery=document.getElementById("imageGallery");
    var links=gallery.getElementsByTagName("a");
    for(var i=0;i<links.length;i++){
        links[i].onclick=function(){
            showPic(this);
            return false;
        }
    }
}
function showPic(whichPic){
    var source=whichPic.getAttribute("href");//得到a标签的href属性值
    var text=whichPic.getAttribute("title");//得到a标签的title属性值
    var description=document.getElementById("description");//ID为description的元素p
    var placeholder=document.getElementById("placeholder");//ID为placeholder的元素img
    placeholder.setAttribute("src",source);//设置img的src为所点击的a标签的href
    description.firstChild.nodeValue=text;//设置p的文本为所点击的a标签的title
}

读《JavaScript DOM编程艺术》札记一

相关推荐