当前位置：首页 > news >正文

JavaScript学习笔记（二）——从简单开始学起

news 来源：原创 2024/5/21 6:07:49

学习新知识，探究新方法，是一个由"知器"——》"格物"——》"明理"——》"成道"依次演变的进化过程，需要循序渐进、由浅入深，不过最终是否可以修炼成道骨仙风的"佛"家境界，则全凭个人的恒心、悟性和造化

百度和谷歌两大搜索引擎主页，表面看似简单，但内深藏玄机，其页面上的每一个像素点，用价值千金来形容，似乎也不为过。好了，下面我们用数据与事实说话，请看简单统计后的表格数据：

当用户打开网页，需要下载的流量（注：有的主页logo直接url地址加载，不在下面统计数据中）

另一种统计方法：用mht单文件保存，并结合logo大小统计（此方法没有上表准确）

数据与事实证明，行业只有做到了极致，才有发展前途。曾经独领风骚的雅虎，如今在市场的优胜劣汰中渐渐褪色——数风流人物，还看今朝

小知识：百度与谷歌的搜索质量，历来争论不休，介绍一款Baidu和Google的杂交搜索工具：百Google度 http://www.baigoogledu.com/

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

上面统计表格，纯属个人好奇。现在言归正传，上一篇已简单介绍了学习JavaScript的工具，现在我们再进一步来"知器"，知简单而又经典之神器——剖析并学习百度和谷歌两大搜索引擎的主页（由于它们的兼容性、容错性、简洁性，不愧为刚学习JavaScript的经典之作）

由于我们主要学习JavaScript，在此对HTML、CSS、DIV等知识不做过多的介绍，不过在学习使用它们需考虑到各种浏览器的兼容（例如：中华人民共和国中国人民银行和教育部等政府官方主页的兼容性就做得不够好，感兴趣者不妨利用非IE内核的浏览器如Firefox、Opera、Chrome查看之）

百度和Google，分别代表国内与全球最流行、最优秀的搜索引擎，其主页有专业的团队不断进行测试与维护，因此我们重点分析并探究这两款主页

1、百度主页源码

网址：http://www.baidu.com/

环境：Maxthon浏览器已登录（sunboy_2050）账户

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312"> <title>百度一下，你就知道 </title> <mce:style></mce:style><style mce_bogus="1"> body { font: 12px arial; text-align: center; background: #fff; } body, p, form { margin: 0; padding: 0; } body, form, #lg { position: relative; } td { text-align: left; } img { border: 0; } a { color: #00c; } a:active { color: #f60; } #u { padding: 7px 10px 3px 0; text-align: right; } #m { width: 650px; margin: 0 auto; } #nv { font-size: 16px; margin: 0 0 4px -32px; } #nv a, #nv b, #su, #lk { font-size: 14px; } #lg { margin: -17px 0 9px; } #fm { padding-left: 111px; text-align: left; } #kw { width: 391px; line-height: 16px; padding: 3px 1px; margin: 0 6px 0 0; font: 16px arial; } #su { width: 78px; height: 28px; line-height: 24px; } #kw, #su { vertical-align: middle; } #lk { margin: 33px 0; } #lk span { font: 14px "宋体"; } #lm { height: 60px; } #lh { margin: 16px 0 5px; font: 12px "宋体"; } #lh a { font: 12px arial; } #hp { position: absolute; line-height: 14px; margin: 0 0 0 6px; top: -1px; *top:2px} #cp, #cp a { color: #77c; } #sx { color: #00C; text-decoration: underline; cursor: pointer; } </style> </head> <body> <p id="u"> <a href="http://passport.baidu.com" mce_href="http://passport.baidu.com" target="_blank"><b>sunboy_2050</b> </a> | <a href="http://my.baidu.com/index.html?my=1&tn=baidu_myps_pg" mce_href="http://my.baidu.com/index.html?my=1&tn=baidu_myps_pg">我在百度 </a> | <a href="http://hi.baidu.com/sys/checkuser/sunboy_2050/3" mce_href="http://hi.baidu.com/sys/checkuser/sunboy_2050/3" target="_blank">我的空间</a> | <a href="http://passport.baidu.com/?logout&tpl=mn&bdstoken=2378cd7fe769741d2d5f1d86bfd368ff" mce_href="http://passport.baidu.com/?logout&tpl=mn&bdstoken=2378cd7fe769741d2d5f1d86bfd368ff">退出 </a> </p> <div id="m"> <p id="lg"> <img src="http://www.baidu.com/img/baidu_logo.gif" mce_src="http://www.baidu.com/img/baidu_logo.gif" width="270" height="129" usemap="#mp"></p> <p id="nv"> <a href="http://news.baidu.com" mce_href="http://news.baidu.com">新闻</a> <b>网页</b> <a href="http://tieba.baidu.com" mce_href="http://tieba.baidu.com"> 贴吧</a> <a href="http://zhidao.baidu.com" mce_href="http://zhidao.baidu.com">知道</a> <a href="http://mp3.baidu.com" mce_href="http://mp3.baidu.com"> MP3</a> <a href="http://image.baidu.com" mce_href="http://image.baidu.com">图片</a> <a href="http://video.baidu.com" mce_href="http://video.baidu.com"> 视频</a> <a href="http://map.baidu.com" mce_href="http://map.baidu.com">地图</a></p> <div id="fm"> <form name="f" action="s"> <input type="text" name="wd" id="kw" maxlength="100"> <input type="hidden" name="ch" value=""> <input type="hidden" name="tn" value="maxthon2"> <input type="hidden" name="bar" value=""> <input type="submit" value="百度一下" id="su"> <span id="hp"><a href="/gaoji/preferences.html" mce_href="gaoji/preferences.html">设置</a><br> <span id="sx">手写</span> </span> </form> </div> <p id="lk"> <a href="http://hi.baidu.com" mce_href="http://hi.baidu.com">空间</a> <a href="http://baike.baidu.com" mce_href="http://baike.baidu.com">百科</a> <a href="http://www.hao123.com" mce_href="http://www.hao123.com"> hao123</a><span> | <a href="/more/" mce_href="more/">更多>></a></span></p> <p id="lm"> </p> <p> <a id="st" οnclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com')" href="http://utility.baidu.com/traf/click.php?id=215&url=http://www.baidu.com" mce_href="http://utility.baidu.com/traf/click.php?id=215&url=http://www.baidu.com">把百度设为主页</a></p> <p id="lh"> <a href="http://e.baidu.com/?refer=888" mce_href="http://e.baidu.com/?refer=888">加入百度推广</a> | <a href="http://top.baidu.com" mce_href="http://top.baidu.com"> 搜索风云榜</a> | <a href="http://home.baidu.com" mce_href="http://home.baidu.com">关于百度</a> | <a href="http://ir.baidu.com" mce_href="http://ir.baidu.com"> About Baidu</a></p> <p id="cp"> ©2010 Baidu <a href="/duty/" mce_href="duty/">使用百度前必读</a> <a href="http://www.miibeian.gov.cn" mce_href="http://www.miibeian.gov.cn" target="_blank">京ICP证030173号</a> <img src="http://gimg.baidu.com/img/gs.gif" mce_src="http://gimg.baidu.com/img/gs.gif"></p> </div> <map name="mp"> <area shape="rect" mce_shape="rect" coords="43,22,227,91" mce_coords="43,22,227,91" href="http://hi.baidu.com/baidu/" mce_href="http://hi.baidu.com/baidu/" target="_blank" title="点此进入百度的空间"> </map> </body> <mce:script type="text/javascript"></mce:script> </html>

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

剖析1——设置主页

<a id="st" οnclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://www.baidu.com')"
href="http://utility.baidu.com/traf/click.php?id=215&url=http://www.baidu.com">把百度设为主页</a>

上面代码中，利用this.style.behavior='url()'; 和 this.setHomePage() 通过onclick用户单击事件，设置主页。但此方法仅限IE内核浏览器

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

剖析2——解决设置主页仅限IE内核问题

var w = window, d = document, n = navigator, k = d.f.wd, a = d.getElementById("nv").getElementsByTagName("a");
    if (n.userAgent.indexOf("MSIE") == -1 || window.opera) {
        d.getElementById("st").style.display = "none"
    };

上面代码中，if语句提取navigator浏览器的信息是否为非IE内核浏览器(MSIE-Microsoft IE)或为opera浏览器，若二者之一成立，则<a id="st" ...>...</a>此信息栏不显示。此外，经过我认真测试，利用Opera、Firefox、Chrome等非IE内核浏览器成功登陆账户后，设置主页栏确为不显示

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

剖析3——map图片映射

上面代码中，map作为img的客户端图片映射，利用usemap="#mp" 关联起来，设置矩形的shape="rect"热点区域coords="43,22,227,91" 当点击超链接后跳转href="http://hi.baidu.com/baidu/"

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

剖析4——人性化的onclick()事件设计

var w = window, d = document, n = navigator, k = d.f.wd, a = d.getElementById("nv").getElementsByTagName("a");

for (var i = 0; i < a.length; i++) {
        a[i].onclick = function() {
            if (k.value.length > 0) {
                var o = this, h = o.href, q = encodeURIComponent(k.value);
                if (h.indexOf("q=") != -1) {
                    o.href = h.replace(/q=[^&$]*/, "q=" + q)
                }
                else {
                    this.href += "?q=" + q
                }
            }
        }
    };

上面代码中，通过document对象的getElementById()方法，获得nv对象后，再调用getElementsByTagName获得<a>标签对象集合a

接着，我们仔细分析if (h.indexOf("q=") != -1) 这段代码的功能，或许你会发现百度在这儿对搜索做得很人性化，详细分析如下：

首先，通过字符编码函数q = encodeURIComponent（）转义搜索框k中的value信息

然后，通过if(h.indexOf("q=") != -1) 判断链接字符串中是否包含"q="信息，if包含，则利用q=[^&$]* 正则表达式，对其进行&替换(^起始符，$结束符，学习正则表示式，请看我先前的博客正则表达式的学习与小结)；else不包含，则执行this.href += "?q=" + q直接添加"?q="子字符串

示例：我们在搜索输入框键入"百度",并点击搜索，得到url：http://www.baidu.com/s?wd=%B0%D9%B6%C8 然后再换做搜索"google"得到url：http://www.baidu.com/s?bs=%B0%D9%B6%C8&f=8&wd=google 仔细分析链接字符串可知第一个字符均含? 、待搜索关键词前均含wd=()(name)、以及replace后的&(q=)，其中%B0%D9%B6%C8是汉字"百度"的双字节编码,google英文不做编码转换

最后，人性化设计亮点出现了，通过for（;i<a.length;）循环，让我们输入了搜索信息后，点击其它的链接，如新闻、知道等，直接跳转并检索的信息，正好是在刚才页面输入框中的信息，这样就不需用户重复输入搜索关键字了，简单、快捷

评价：这个小细节的优化，如果用户不太注意，是感觉不出来的。大家不妨试试Google，先在web页面搜索框中输入搜索关键词"google"，现在我突然不想检索"google"的web信息，而是想检索"Google"图片信息，于是我们直接点击左上角的Images链接，页面的确也跳转到Images页面，但并未显示检索结果，需要用户重新再点击一下search按钮，然后才进行检索、显示结果的

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

剖析5——函数(function(){}) ()格式的疑惑

(function() {
        if (/q=([^&]+)/.test(location.search)) {
            k.value = decodeURIComponent(RegExp.$1)
        }
    })();

在上述代码中，看到了函数function()格式，感觉怪怪的，一来没有函数名，二来函数体还被小括号(function(){})包起来，我刚学JavaScript，对这种函数格式还不懂（感觉是无需调用，直接执行函数体），具体用法还希望有高人能帮我指点一下，给出确切答案

下面我对JavaScript语法，做简单分析：([^&]+)/.test(location.search) 是对正则表达式([^&]+) 进行test()模式匹配，location.search 是调用location对象的search属性，提取url中?后的子字符串，如http://www.baidu.com/s?wd=%B0%D9%B6%C8 则提取?wd=%B0%D9%B6%C8 子字符串，此句if测试location.search字符串中是否含有匹配以&字符开头的字串；如果有，则对正则表达式的第一列RegExp.$1 进行反译码（decodeURIComponent）

评析：对这段代码，以我目前三脚猫的功夫，还没研究明白透彻，希望有武林高手多帮我指点指点，这样我也进步得更快一些，好修炼内功

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

剖析6——Navigator的cookie用法

if (n.cookieEnabled && !/sug?=0/.test(d.cookie)) {
d.write('<script src=http://www.baidu.com/js/bdsug.js?v=1.0.3.0><//script>')
};

在上述代码中，n.cookieEnabled 是判断浏览器navigator