• 微信公众号:美女很有趣。 工作之余,放松一下,关注即送10G+美女照片!

JavaScript DOM 编程艺术(第2版)个人笔记

开发技术 开发技术 3小时前 2次浏览

注:以下内容为个人方便记忆做的摘要,若需具体内容请购买正版资源

第1章 JavaScript 简史

  • JavaScript 为什么会出现?(增强网页元素交互性)
  • JavaScript 的应用环境?(java理论上几乎可部署到任何环境,JavaScript倾向于只应用到web浏览器)
  • ECMAScript ?(ECMA:欧洲计算机制造商协会,ES表示标准化的 JavaScript 语言,当前最新标准是ES10)
  • DOM?(文本对象方法,是对文档的内容进行抽象和概念化的方法。标准化DOM可以让任何一种程序设计语言操纵由任意一种标记语言编写出来的任何一份文档
  • DOM标准为什么会出现?(各大浏览器厂商对DOM标准的高覆盖率保证了“编写一次,随处运行”,避免了大量浏览器的判断分支语句。)
  • Web浏览器引擎?(网络浏览器的核心部件,用于将HTML文档和网页的其他资源转换为用户设备上的交互式视觉表示)
  • HTML和DOM标准制定权?(2019年,HTML和DOM标准制定权全权移交给浏览器厂商联盟WHATWG,即网页超文本应用技术工作小组(Web Hypertext Application Technology Working Group,简称WHATWG))

第2章 JavaScript 语法

  • 准备:js使用,解释型编译型
  • 语法:分号分行,注释(单行//,多行/* */)
  • 变量:声明,命名规则(不允许空格、标点,美元符除外,第一个字符不允许是数字,区分大小写),命名方法(下划线、驼峰命名),关键字变量名字面量
  • 数据类型:强、弱类型语言,转义符,字符串、数值、布尔值、数组、对象
  • 操作符:算术操作符、比较操作符、逻辑操作符
  • 循环:条件语句,for、while、do while
  • 函数:建议函数驼峰命名,变量下划线命名
  • 变量的作用域:局部变量、全局变量
  • 对象:属性和方法组合而成的数据实体,用户自定义对象、内建对象、宿主对象

第3章 DOM

  • 节点:元素节点、属性节点、文本节点
  • getElementById()
  • getElementsByTagName()
  • getElementsByClassName()
  • getAttribute()
  • setAttribute()
  • querySelector()、querySelectorAll()
  • getElementsByName()
  • document.title、document.body

第4章 案例研究 JavaScript图片库

  • 代码及结果:世界各国有趣的节日
  • 事件处理函数?(在特定事件发生时调用特定的JavaScript代码,常见事件如onclick、onmouseover、onmouseout、onload等)
  • 事件处理函数调用格式?event = “JavaScript statement(s)” 等号后面可以是函数名
  • this关键字?代表当前元素。如元素内部有事件函数,事件函数以当前元素作为参数,此时参数位置可写作this
  • onclick = “showPic(this); return false;”
  • childNodes属性,用于获取任何一个元素的所有子元素,子元素类型共用12种
  • nodetype属性,取值包括元素、文本、空格、换行符等12种,1代表元素节点,2代表属性节点,3代表文本节点
  • nodeValue属性,获取节点的内容,description.childNodes[0].nodeValue
  • firstChild和lastChild属性
  • onload事件处理函数在document加载完成后执行,即网页加载完毕才会触发onload事件

第5章 最佳实践

​ 巧妙利用JavaScript和DOM构成的功能强大的组合,保证写出来的脚本符合期望。

  • 尽量考虑用户的浏览体验,非必要的情况下不要为网页增加额外的行为。
  • 平稳退化:确保网页在没有JavaScript的情况下,也能完成最基本的操作。
  • 只有在绝对必要的情况下才使用弹出窗口,因为涉及到网页的可访问性。
  • window.open(url,name,features)
  • 渐进增强:用一些额外的信息层去包裹原始数据,可理解为平稳退化的逆向操作原则。
  • 分离JavaScript:将事件处理函数尽量分离到外部js文件中。
  • 向后兼容:保证旧的浏览器版本也能运行,实现基本的功能。
  • 性能考虑:尽量减少DOM访问、减少标记,合并和放置脚本,压缩脚本(scriptName.min.js)

第6章 案例研究:图片库改进版

主要内容:将事件处理函数分离到外部的 javascript 文件,保证了js代码不再依赖于的HTML文档的内容和结构,这样在必要时可只修改 js代码,不用动HTML文件;增加了一些测试和检查,保证 js 代码在一些特殊情况下也能实现基本的功能。

  • 代码及结果

  • <a href="//inews.gtimg.com/newsapp_bt/0/13548259242/1000" onclick="showPic(this);return false;" title="">中国520网络情人节</a>
    

    上面的代码如果JavaScript被禁用,还能运行么(平稳退化)?showPic调用失败,后面的return false; 不再执行,点击后链接跳到新页面呈现图片。

  • 文档的结构与文档的行为分开了么?函数和事件处理函数都应该在外部 js 文件中添加。

  • 即在HTML的结构内容有错的情况下,javascript也能运行么?

  • links[i].onclick = function{…} 链接被点击时将执行匿名函数内的语句。

  • 尽量使用遍历、函数解决重复代码的问题。

  • links[i].onclick = function{
    	showPic(this);//用this关键字,减少DOM数搜素次数
    	return false;// 在showPIc(this)之后,链接虽然被点击了,但强制将其状态设置为未被点击
    }
    
  • if (!document.getElementsByTagName) return false; //检查浏览器是否有该DOM方法
    if (!document.getElementById("imagegallery")) return false;//检查是否存在钙元素
    
  • //共享onload事件(因为每个事件处理函数只能绑定一条指令;页面加载完成才会触发onload事件)
    function addLoadEvent(func){
        var oldonload = window.onload;
        if (typeof oldonload != 'function'){
            window.onload = func;
        }else {
            window.onload = function (){
                oldonload();
                func();
            }
        }
    }
    
  • links[i].onclick = function (){
               // showPic(this); //用this关键字,减少DOM数搜素次数
               // return false;
               return !showPic(this); //先执行,后返回,showPic不能正常执行时能恢复链接的被点击状态
           }
    
  • if (placeholder.nodeName != 'IMG') return false;//判断类型是否正确
    if (description.firstChild.nodeType == 3){//判断类型是否正确
    	description.firstChild.nodeValue = text;
        }
    
  • links[i].onkeypress = links[i].onclick //将click事件的所有功能赋给keypress
    
  • 在几乎所有浏览器里,用Tab键移动到某个链接,然后敲下回车键的动作也会触发onclick事件。

  • <a href="//inews.gtimg.com/newsapp_bt/0/13548259242/1000" onclick="showPic(this);return false;"
    title="21世纪初,随着网络时代的到来,每年的5月20日逐渐成为了网络情人节,但是你知道这个节日的由来吗">
        <img src="imgs/xxx.jpg" alt="xxx"> //图片链接的内容不仅可以是文字,还可以是图片
    </a>
    
  • DOM-Core 和HTML-DOM

    在HTML-DOM 中:
    document.getElementsByTagName("forms") 可简化为 document,forms;
    element.getAttribute("src") 可简化为 element.src;
    element.getAttribute("href") 可简化为 element.href;
    placeholder.setAttribute("src",source) 可简化为 placeholder.src = source;
    

第7章 动态创建标记

主要内容:利用一些DOM方法,在 JS 文件中创建新元素和更改现有元素改变网页的结构和内容。

  • 代码及结果

  • testdiv.innerHTML //获取testdiv元素内部的所有HTML内容
    testdiv.innerHTML = "<p> something </p>" //将testdiv元素内的HTML替换为 "=" 后的内容
    //innerHTML 属性是HTML的专有属性,不能用于其他任何语言标记的文档,浏览器在呈现XHTML时会直接忽略掉innerHTML属性
    
  • DOM是一个双向车道,不仅可以获取文档内容,还可以对文档内容进行修改更新。

  • 在浏览器看来,真正互动的对象是DOM节点树,而不是HTML文档。

  • HTML中有些元素的存在只是为了让DOM方法处理他们,那么用DOM方法来创建它们,让HTML尽可能地纯粹,才是最佳做法。

  • //本章主要方法
    document.createElement(nodename);
    parent.appendChild(child);
    document.createTextNode(text);
    parent.insertBefore(newElement,targetElement);
    
  • function insertAfter(newElement,targetElement){
        var parent = targetElement.parentNode;
        if (parent.lastChild == targetElement){
            parent.appendChild(newElement);
        } else {
            parent.insertBefore(newElement,targetElement.nextSibling);
        }
    }
    
    function preparePlaceholder(){
        var placeholder = document.createElement('img');
        placeholder.setAttribute("id","placeholder");
      placeholder.setAttribute("src","http://p2.itc.cn/images01/20201125/6f003d5c6e604ea29029a4bb8b367929.jpeg");
        placeholder.setAttribute("alt","my image gallery");
        var description = document.createElement('p');
        description.setAttribute('id',"description");
        var txt = document.createTextNode("choose a picture");
        description.appendChild(txt);
        var gallery = document.getElementById("imagegallery");
        insertAfter(placeholder,gallery);
        insertAfter(description,placeholder);
    }
    
  • function addLoadEvent(func){
        var oldonload = window.onload;
        if (typeof oldonload != 'function'){
            window.onload = func;
        }else {
            window.onload = function (){
                oldonload();
                func();
            }
        }
    }
    
  • Ajax是什么?为什么会出现?有什么用?(答:Asynchronous Javascript And XML 不同步的 js 和 XML。当只需要更新页面中的一小部分时,需要刷新和加载整个页面,耗时过长,效率低下,降低了用户体验。Ajax的主要优势是对页面的请求以异步方式送到服务器,脚本可以按需加载和创建页面内容,而不会打断用户的浏览体验)

  • Ajax技术的核心是XMLHTTPRequest对象,充当着浏览器中的客户端与服务器之间中间人的角色。

  • var request = new XMLHttpRequest()
    request.onreadystatechange = function(){
    	if(request.readystate == 4){
    	//处理语句
    	}
    }
    
  • 服务器在向HTMLHTTPRequest对象发回响应时,该对象有很多属性可用,浏览器会在不同阶段更新readystate属性的值,0表示未初始化,1表示正在加载,2表示加载完毕,3表示正在交互,4表示完成。

  • Ajax的同源策略。使用XMLHttpRequest对象发送的请求只能访问与其所在的HTML处于同一个域中数据。

  • 异步请求的异步性,脚本在发送XMLHTTPRequest请求后,仍然会继续执行,不会等待响应返回。

  • Ajax应用主要依赖于服务器端处理,而非客户端,因此,最好能让Ajax应用做到平稳退化,即就算Ajax失效,页面也能正常反应。

第8章 充实文档的内容

主要内容:通过函数为文档创建略缩词列表、文献来源的上标链接、快捷键清单。

  • function displayAbb(){
        var abb = document.getElementsByTagName("abbr");
        if (abb.length < 1) return false;
        var defs = new Array();
        for (var i=0;i<abb.length;i++){
            current_abb = abb[i];
            if (current_abb.childNodes.length<1) continue;
            var title = current_abb.getAttribute("title");
            var key = current_abb.lastChild.nodeValue;
            defs[key] = title;
        }
        var dlist = document.createElement("dl");
        for (key in defs){
            var c = document.createElement("dt");
            str = key + " : " + defs[key];
            var str = document.createTextNode(str);
            c.appendChild(str);
            dlist.appendChild(c);
        }
        if (dlist.childNodes.length<1) return false;
        var header = document.createElement("h2");
        var header_text = document.createTextNode("略缩词");
        header.appendChild(header_text);
        document.body.appendChild(header);
        document.body.appendChild(dlist);
    }
    
  • function displayCitation(){
        var quotes = document.getElementsByTagName("blockquote");
        for (var i = 0;i<quotes.length;i++){
            var current_quote = quotes[i];
            if (!current_quote.getAttribute("cite")) continue;
            var url = current_quote.cite;
            var link=document.createElement("a");
            var link_text = document.createTextNode("source");
            link.appendChild(link_text);
            link.setAttribute("href",url);
            var supscript = document.createElement("sup");
            supscript.appendChild(link);
            var quotechildren = current_quote.getElementsByTagName('*');
            var element = quotechildren[quotechildren.length-1];
            element.appendChild(supscript);
        }
    }
    
  • function displayAccesskeys(){
        var links = document.getElementsByTagName("a");
        var akeys = new Array();
        for (var i = 0;i<links.length;i++){
            var current_link = links[i];
            if (!current_link.getAttribute("accesskey")) continue;
            var key = current_link.getAttribute("accesskey");
            var text = current_link.lastChild.nodeValue;
            akeys[key] = text;
        }
        var list = document.createElement("ul");
        for (key in akeys){
            var text = akeys[key];
            var str = key + " : " + text;
            var item = document.createElement("li");
            var item_text = document.createTextNode(str);
            item.appendChild(item_text);
            list.appendChild(item);
        }
        var header = document.createElement("h3");
        var header_text = document.createTextNode("Accesskeys");
        header.appendChild(header_text);
        document.body.appendChild(header);
        document.body.appendChild(list);
    }
    

第9章 CSS-DOM

主要内容:利用DOM技术获取和设置CSS信息。

  • sans-serif字体:专指西文中没有衬线的字体,与汉字字体中的黑体相对应。没有衬线:开始结尾处没有额外的装饰,笔画的粗细在字体的各个位置都是相同的。

  • DOM节点树中的元素的nodeName,nodeType能否快速查看,而不是在浏览器中用alert弹出?

  • 当把CSS style属性插入到标记中,即在<p id='example' style="color:grey;font:12px 'Arial',sans-serif;">这种情况下,可以使用DOM-style属性去查询这些信息。如:element.style.color 、element.style.fontFamily

  • //DOM设置style
    windows.onload = function(){
    	var para = document.getElementById("example");
    	para.style.font = "2em 'Times',serif";
    }
    
  • //添加类名、获取指定元素的下一个元素、两个功能结合
    function styleElementSiblings(tag,theclass){
        var elems = document.getElementsByTagName(tag);
        var elem;
        for (var i = 0;i<elems.length;i++){
            elem = getNextElement(elems[i]);
            addClass(elem,theclass);
        }
    }
    
    function addClass(elem,theclass){
        if (!elem.className){
            elem.className = theclass;
        } else {
            var classNames = elem.className;
            classNames += " ";
            classNames += theclass;
            elem.setAttribute("className",classNames);
        }
    }
    
    function getNextElement(elem){
        if (elem.nextSibling.nodeType == 1){
            return elem.nextSibling;
        }
        if (elem.nextSibling){
            return getNextElement(elem.nextSibling);
        }
        return null;
    }
    
  • //给表格设置条纹,奇数行和偶数行背景色不一样
    //CSS3
    tr:nth-child(odd) {background-color:"blue";}
    tr:nth-child(even) {background-color:"yellow";}
    
    //javascript
    function stripeTables(){
        var tables = document.getElementsByTagName("table");
        var odd,rows;
        for (var i=0; i<tables.length; i++){
            odd = false;
            rows = tables[i].getElementsByTagName("tr");
            for (var j=0; j<rows.length; j++){
                if (odd){
                    rows[j].style.backgroundColor = "blue";
                    //可以用addClass(rows[j],"odd") 然后在CSS里设置odd类的样式
                    odd = false;
                } else {
                    rows[j].style.backgroundColor = "yellow";
                    odd = true;
                }
            }
        }
    }
    
  • //响应事件
    function highlightRows(){
        var tables = document.getElementsByTagName("table");
        var rows;
        for (var i=0; i<tables.length; i++){
            rows = tables[i].getElementsByTagName("tr");
            for (var j=0; j<rows.length; j++){
                rows[i].onmouseover = function (){
                    rows[i].style.fontWeight = "bold";
                }
                rows[i].onmouseout = function (){
                    rows[i].style.fontWeight = "normal";
                }
            }
        }
    }
    

第10章 利用javascript实现动画效果

主要内容:实现一个图片文字随鼠标悬浮变化的网页。

  • 个人代码及结果:海贼王人物介绍

  • 动画原理:JavaScript 按照预定的时间间隔重复调用一个函数,从而实现元素的样式随时间的推移不断发生变化。

  • function prepareslide(){
        var slideshow = document.createElement("div");
        slideshow.setAttribute("id","slideshow");
        var preview = document.createElement("img");
        preview.setAttribute("id","preview");
        preview.setAttribute("src","haizeiwang.jpg");
        preview.setAttribute("alt","路飞和他的伙伴们的合影");
        slideshow.appendChild(preview);
        var list = document.getElementById("people");
        insertAfter(slideshow,list);//函数内容见第7章
        var parters = list.getElementsByTagName("p");
        var description = document.getElementById("description");
        parters[0].onmouseover = function (){
            moveElement("preview",0,0,10);
            description.innerHTML = "号称“鼻歌”,现为草帽海贼团音乐家。原本是某国护卫队团长,后加入伦巴海贼团,50年前跟鲸鱼拉布约定在“双子峡”重逢。后来在魔幻三角地带遇到敌人并遭遇毒手,因黄泉果实的能力,灵魂走出黄泉并准备回身体时,在魔幻三角地带迷路一年,找到的身体已变成骷髅,但爆炸头仍然存在,自此他只能以骷髅状态生存。幽灵岛战役结束后,从路飞口中得知伙伴拉布现在平安无事的消息,为了履行和拉布的约定,才正式加入草帽海贼团。" //DOM修改段落文本的好方法,注意与innertext区别
        }
    }
    
  • function moveElement(elementId,final_x,final_y,interval){
        if (!document.getElementById) return false;
        if (!document.getElementById(elementId)) return false;
        var elem = document.getElementById(elementId);
        if (elem.movement){
            clearTimeout(elem.movement);
        }
        if (!elem.style.left){
            elem.style.left = "0px";
        }
        if (!elem.style.top){
            elem.style.top = "0px";
        }
        var posx = parseInt(elem.style.left);//parse解析,解析出字符串中的整数
        var posy = parseInt(elem.style.top);
        var dist = 0;
        if (posx == final_x && posy == final_y){
            return true;
        }
        if (posx != final_x){
            dist = Math.ceil((-posx + final_x)/10);//移动速度先开后慢,ceil是向上取整
            posx += dist;
        }
        if (posy != final_y){
            dist = Math.ceil((-posy + final_y)/10);
            posy += dist;
        }
        elem.style.left = posx + "px";//只有用DOM创建的CSS样式才能用DOM进行修改
        elem.style.top = posy + "px";
        var repeat = "moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
        elem.movement = setTimeout(repeat,interval);//将函数的调用赋值给元素的属性
    }
    

第12章 综合实例

  • 实践中发现this 关键字 ,CSS布局 float、display、grid、flex等很重要,需要进一步学习
  • 我家的猫

程序员灯塔
转载请注明原文链接:JavaScript DOM 编程艺术(第2版)个人笔记
喜欢 (0)