购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

【特效赏析】

任务1-1 JavaScript实现动态加载网页内容

网页中常见的底部导航栏与版权信息如图1-1所示。

图1-1 网页的底部导航栏与版权信息

图1-1所示的底部导航栏与版权信息可以采用HTML代码实现,代码如表1-1所示。也可以采用JavaScript代码实现,对应的JavaScript代码如表1-2所示。

表1-1 实现网页底部导航栏与版权信息的HTML代码

表1-2 实现网页底部导航栏与版权信息的JavaScript代码

表1-2中的代码解释如下。

(1)JavaScript脚本程序必须置于<script>与</script>标签中。

(2)04行的符号“<!--”和10行的符号“//-->”针对不支持脚本的浏览器,从而忽略其间的脚本程序。

(3)05~09行共有5条语句,每一条语句都以“;”结束。这些语句都按其出现的先后顺序执行,即程序结构为顺序结构。

(4)05行为声明变量语句:声明1个变量,变量名为footerContent。

(5)06行为变量赋值语句:将一个字符常量值赋值给变量footerContent,赋值运算符为“=”。

(6)07~08行都是赋值语句,使用的是复合赋值运算符“+=”,将两个字符串连接后重新赋值给变量footerContent。

(7)09行使用文档对象document的write方法向网页中输出变量的值footerContent,即输入一个字符串,该JavaScript语句会在页面加载时执行。

提示

document.write()可以直接写入HTML输出流中,但只能在HTML输出中使用document.write。如果在文档加载后使用该方法,则会覆盖整个文档。

(8)JavaScript区分字母的大小写。

在同一个程序中使用大写字母和小写字母表示不同的意义,不能随意将大写字母写成小写,也不能随意将小写字母写成大写。例如,05行中声明的变量“footerContent”,该变量名的第7个字母为大写“C”,在程序中使用该变量时该字母必须统一写成大写“C”,而不能写成小写“c”。如果声明变量时,变量名称为“footercontent”形式,全为小写字母,则在程序中使用该变量时,也不能写成大写。也就是说,使用变量时的名称应与声明变量的名称完全一致。

注意

JavaScript的文档对象“document”则全部为小写字母,而不能写成“Document”,否则会由于系统不能识别“Document”而出现错误。

任务1-2 jQuery实现网页收藏

网页中包含如下所示的HTML代码。

用IE11浏览器浏览该网页时,单击网页中的“添加收藏”超链接,会弹出图1-2所示的【添加收藏】对话框,在该对话框中单击【添加】按钮,则会将对应网页添加到收藏夹。

用非IE浏览器浏览该网页时,单击网页中的“添加收藏”超链接,会弹出图1-3所示的【添加失败】对话框。

图1-2 【添加收藏】对话框

图1-3 【添加失败】对话框

这里的“添加收藏”功能采用jQuery方式实现,代码如表1-3所示。

表1-3 实现网页收藏功能的JavaScript代码

表1-3中的代码解释如下。

(1)01行引用了一个外部的JS(JavaScript)文件jquery.js。

(2)为了防止文档在完全加载(就绪)之前运行jQuery代码,jQuery函数应位于ready方法中,如下所示。

(3)06行表示单击id="favorite"的按钮时,触发该按钮的单击事件,调用一个函数,执行该函数中的程序代码。

(4)if...else...语句为选择结构,针对IE浏览器和非IE浏览器执行不同的语句。

(5)07行中的表达式“window.ActiveXObject||"ActiveXObject"in window”用于判断当前浏览器的类型为IE浏览器。

(6)08行使用window.external.addFavorite方法实现IE浏览器的添加收藏功能。

(7)10行的alert()方法用于打开一个信息对话框,该方法是window对象的常用方法之一,可以写作window.alert()。其作用是弹出一个对话框,显示所指定的内容。括号中的字符串参数为对话框将要显示的内容,该对话框只有一个【确定】按钮。 6p5V5D+9Oqh4/9/1O0BZl85MtiTR0Y6K+i8E8+ezZpsK+Ff10HHX/iLpSscz5bxx

点击中间区域
呼出菜单
上一章
目录
下一章
×