专栏首页米扑专栏JavaScript学习笔记(二)——从简单开始学起

JavaScript学习笔记(二)——从简单开始学起

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

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

 当用户打开网页,需要下载的流量(注:有的主页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><!-- 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; } --></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" onclick="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"><!-- 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" }; 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 } } } }; (function() { if (/q=([^&]+)/.test(location.search)) { k.value = decodeURIComponent(RegExp.$1) } })(); if (n.cookieEnabled && !/sug?=0/.test(d.cookie)) { d.write('<script src="http://www.baidu.com/js/bdsug.js?v=1.0.3.0" mce_src="http://www.baidu.com/js/bdsug.js?v=1.0.3.0"><//script>') }; if (w.attachEvent) { w.attachEvent("onload", function() { k.focus(); }) } else { w.addEventListener('load', function() { k.focus() }, true) }; w.onunload = function() { }; var hw = {}; hw.i = d.getElementById("sx"); var il = false; if (/msie (/d+/./d)/i.test(n.userAgent)) { hw.i.setAttribute("unselectable", "on") } else { var sL = k.value.length; k.selectionStart = sL; k.selectionEnd = sL } hw.i.onclick = function(B) { var B = B || w.event; B.stopPropagation ? B.stopPropagation() : (B.cancelBubble = true); if (d.selection && d.activeElement.id && d.activeElement.id == "kw") { hw.hasF = 1 } else { if (!d.selection) { hw.hasF = 1 } } if (!il) { var A = d.createElement("script"); A.setAttribute("src", "http://www.baidu.com/hw/hwInput.js"); d.getElementsByTagName("head")[0].appendChild(A); il = true; setTimeout( function() { if (baidu) { baidu.sug.initial() } } , 1000) } }; // --></mce:script> </html> <!--f99b4c28737a54f7-->

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

剖析1——设置主页

<a id="st" onclick="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图片映射

<img src="http://www.baidu.com/img/baidu_logo.gif" width="270" height="129" usemap="#mp"></p>

<map name="mp">         <area shape="rect" coords="43,22,227,91" href="http://hi.baidu.com/baidu/" target="_blank"             title="点此进入 百度的空间"> </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   

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 60行代码:Javascript 写的俄罗斯方块游戏

    原文: http://blog.ithomer.net/2014/05/60-lines-of-code-the-small-javascript-writte...

    阳光岛主
  • 模块划分

    内聚,是从功能角度来衡量模块内的联系,一个好的内聚模块应当恰好做一件事。它描述的是模块内的功能联系;

    阳光岛主
  • Linux网络编程一步一步学-异步通讯聊天程序select

    /************关于本文档********************************************

    阳光岛主
  • NodeMCU初探

    对于ESP8266模块,早就想知道如何用其脚本语言, 自己先用的这个模块测试的 ? 首先是先下载需要用到的工具和固件 链接:http://pan.baidu.c...

    杨奉武
  • letswave7中文教程2:脑电数据预处理-通道位置分配

    原始的脑电图信号是有噪声的。预处理对于提高信号的信噪比以获得“清晰”的脑电图数据是非常有必要的。但是,想要完全区分噪音和信号却是几乎不可能的。在脑电信号中,信号...

    脑机接口社区
  • 5 trim_galore去接头

    ls SRR85182.gz | while read id;do (nohup fastqc $id &);done find SRR851819.gz|x...

    Y大宽
  • [优聚集]首页添加搜索站点

    地址是:https://www.baidu.com/s?ie=UTF-8&wd=%E4%BC%98%E8%81%9A%E9%9B%86

    无道
  • Docker Hub 镜像加速器

    国内从 Docker Hub 拉取镜像有时会遇到困难,此时可以配置镜像加速器。Docker 官方和国内很多云服务商都提供了国内加速器服务。

    py3study
  • FacexWorm通过Facebook Messenger和Chrome扩展传播

    Facebook和Chrome用户要注意了,最近有一款名叫FacexWorm的病毒,可以窃取密码,窃取加密货币,或者向Facebook用户发送垃圾邮件。

    FB客服
  • MarkDown轻量级标记语言

    ####1.标题 #一级标题 ##二级标题 ###三级标题 … ######六级标题 ####2.引用 >这个是引用 >是不是和电子邮件中的 ...

    sofu456

扫码关注云+社区

领取腾讯云代金券