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

最新推荐文章于 2024-07-12 16:27:40 发布

风醉流觞

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量226

点赞数

分类专栏： JavaScript 文章标签： javascript 读书笔记

本文链接：https://blog.csdn.net/flywaterfree/article/details/51684702

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

《JavaScript DOM 编程艺术》读书笔记——其四

第六章

案例：JavaScript图片库改进版

1、平稳退化

可以使访问者在浏览器不支持JavaScript即某些功能无法使用的情况下，仍能顺利完成基本的操作。

2、JavaScript与HTML标记分离

3、渐进增强

用一些额外的信息层去包裹原始数据（按照“渐进增强”原则创建出的网页几乎都符合“平稳退化”原则）

4、改进举例代码：

test.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <link rel="stylesheet" href="../css/test.css" media="screen" />
    </head>
    <body>
        <h1>Snapshots</h1>
        <ul id="imagegallery">
            <!--图片链接列表-->
            <li>
                <!--showPic()函数需要一个参数：一个带有href属性的元素节点参数，使用到了this关键字，即“这个<a>元素节点”-->
                <a href="../img/1.jpeg" title="picture01"><img src="../img/1.jpeg" alt="Breakfast" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/2.jpeg" title="picture02"><img src="../img/2.jpeg" alt="Sea" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/3.jpeg" title="picture03"><img src="../img/3.jpeg" alt="Flower" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/4.jpeg" title="picture04"><img src="../img/4.jpeg" alt="Tree" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/5.jpg" title="picture05"><img src="../img/5.jpg" alt="Street" width="120px" height="90px" /></a>
            </li>
            <li>
                <a href="../img/6.jpeg" title="picture06"><img src="../img/6.jpeg" alt="Sky" width="120px" height="90px" /></a>
            </li>
        </ul>
        <!--“占位符”图片-->
        <img id="placeholder" src="../img/2.jpeg" alt="my image gallery" style="width: 50%; height: 20%; margin-top: 20px;" align="center" />
        <p id="description">Choose an image.</p>
        <script type="text/javascript" src="../js/test.js"></script>
    </body>
</html>

test.js:

//此函数参数为打算在页面加载完毕时执行的函数的名字
function addLoadEvent(func)
{
    var oldonload = window.onload;//网页加载完毕时会触发onload事件
    if(typeof window.onload != 'function')//如果这个处理函数还未绑定任何函数
    {
        window.onload = func;//把新函数添加给它
    }
    else//如果这个处理函数已经绑定了一些函数
    {
        window.onload = function()//把新函数追加到现有指令的末尾
        {
            oldonload();
            func();
        }
    }
}
addLoadEvent(prepareGallery);
function prepareGallery()
{
    //检查点，检查当前浏览器是否理解getElementByTagName
    if(!document.getElementsByTagName)
    {
        return false;
    }
    //检查点，检查当前浏览器是否理解getElementById
    if(!document.getElementById)
    {
        return false;
    }
    //检查点，检查当前网页是否存在一个id为imagegallery的元素（预防性措施），这样即使从网页上删除图片库也不用担心JS代码会突然出错
    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()//为links[i]元素添加onclick方法，并为其添加一个事件处理匿名函数，这个匿名函数的语句在对应元素对应链接点击时执行
        {
            showPic(this);//函数参数关键字为this，即代表此时与onclick方法相关联元素
            //在返回前验证showPic的返回值，以便决定是否阻止默认行为，如果返回true，则更新placeholder
            //实现取反后即意味着如果showPic返回true，此时返回false，浏览器不会打开那个链接
            //如果showPic返回false，则图片未更新，返回true以允许默认行为
            return !showPic(this);//false即禁用有关链接的默认行为（按照这个链接未点击时采取行动）
        }
//      links[i].onkeypress = links[i].onclick;//使onkeypress键盘处理事件与onclick事件触发相同的行为，但一般不建议使用
    }
}
function showPic(whichpic)//showPic为函数名,whichpic为指向某个图片<a>元素的元素节点参数
{
    if(!document.getElementById("placeholder"))
    {
        return false;
    }
    var source = whichpic.getAttribute("href");//获取路径"href"
    var placeholder = document.getElementById("placeholder");//获取“占位符”图片
    placeholder.setAttribute("src",source);//设置“占位符”元素的src属性
    if(document.getElementById("description"))
    {
        var text = whichpic.getAttribute("title")?whichpic.getAttribute("title"):"";//获取whichpic对象的title属性值
        var description = document.getElementById("description");
        description.firstChild.nodeValue = text;//利用nodeValue属性刷新description对象的第一个子节点
    }
    return true;
    //即使文档里没有placeholder图片，也不会发生JS错误
}

test.css:

body
{
    font-family:"Helvetica","Arial",serif;
    color: #333333;
    background-color: lightgoldenrodyellow;
    margin: 1em 10%;
}
h1
{
    color: #333333;
    background-color: transparent;
}
a
{
    color: #c60;
    background-color: transparent;
    font-weight: bold;
    text-decoration: none;
}
ul
{
    padding: 0;
}
li
{
    float: left;
    padding: 1em;
    list-style: none;
}
#imagegallery
{
    list-style: none;
}
#imagegallery li
{
    display: inline;
}
#imagegallery li a img
{
    border: 0;
}

风醉流觞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript DOM 编程艺术》读书笔记

《JavaScript DOM 编程艺术》读书笔记——其四第六章案例：JavaScript图片库改进版1、平稳退化可以使访问者在浏览器不支持JavaScript即某些功能无法使用的情况下，仍能顺利完成基本的操作。2、JavaScript与HTML标记分离3、渐进增强用一些额外的信息层去包裹原始数据（按照“渐进增强”原则创建出的网页几乎都符合“平稳退化”原则）4、改进举例代码：test.html:
复制链接

扫一扫