Javascript核心读书有感之语言核心


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

一:javascript语言核心

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

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

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.


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3