JavaScript是前端网页设计与开发中运用得最广泛的脚本语言,可以被用来:
学习JavaScript需要了解变量、判断、循环、函数等基本的编程知识,如果没有掌握相关知识,可以先到网易学习看看这个教程。
JavaScript代码可以被直接插入HTML中,但必须使用<script>标签包裹,比如
<script type="text/javascript">alert("一个JavaScript弹窗警告!!")</script>
上面这个示例的做法有点像直接把CSS代码插入到<style>标签里,但CSS还可以使用<link>标签外链到一个独立的*.css文件,JavaScript可以外链独立的文件,具体形式是:
<script src="myJavaScript.js"></script>
把所有的js代码都写在*.js文件里,这样可以保证内容、表示和逻辑之间有很好的分离度,便于协作和管理。
虽然你可以在html页面的任何位置插入js,但在具体操作时最好遵循W3C的建议,将js集中放在</head>结束标记的前面,这样做便于管理和维护。
但是,如果你的js代码中需要引用body内的某个dom元素(比如用js控制某个div的尺寸),你需要注意一下html的加载顺序。html文档的加载是自上而下进行的,如果js需要引用body内的dom元素,而你的js又写在</head>前面,这里意味着在执行js时,被引用的dom元素还没有加载完成。
你应该在js中控制程序的执行顺序,确保主体程序在文档初始化完成后再执行。
警告框的内容是“Hello World!”或者任何你喜欢的内容。
本课程的重点是网页设计,所以我们不会深入JavaScript标准语法的学习,而是会强化某个JavaScript库的使用,因为后者在实际中应用得更多。
JavaScript的库其实是一个*.JS文件,由有经验的JavaScript程序员编写。基于JavaScript库编写JavaScript可以极大地简化流程,而且让自己编写的程序更直观易懂,但程序必须依赖该库才能运行。
JavaScript库有很多,有时它们称自己为“插件”或者“框架”,但通常都是开源的。本课程主要介绍的库是jQuery,了解它详情可以访问 http://jquery.com。
使用jQuery必须首先从其官方网站上下载库文件并链接到你的网页。这是一个*.js文件(jquery.js),它应该被插入到网页的<head>标签里。
通常,一个网页<head>标签中外链的资源可能很多,比如多个css或者多个js。必须注意,这些资源对应的标签顺序应该是:
<head>
<link rel="stylesheet" href="mycss1.css"></link> <!- 外链样式放前面 ->
<link rel="stylesheet" href="mycss2.css"></link> <!- 外链样式放前面 ->
<script src="jquery.js"></script> <!- JS库紧跟样式 ->
<script src="myJS.js"></script> <!- 自定义的JS放最后 -></head>
标签的顺序会影响资源加载的顺序,排在上面的标签总是比下面的标签先加载。由于自定义的JS对CSS和JS库都可能会产生依赖关系,所以自定义的JS通常放下面。
需要注意的是,在使用jQuery控制页面的元素的之前,必须确认两点:
上述两点中任何一点出问题,jQuery代码都可能不起作用。为了确保上述两点,我们要用到$(document).ready(),如下图所示
$(document).ready(function(e){
/* 当文档被完全加载时执行的代码写在这里 */
})
在上面的例子中,$(document).ready()是一个事件,表示DOM加载完成。 function(e){....}是一个事件处理函数,把这个事件处理函数放在ready后的括号中,就相当于将事件处理函数与ready事件绑定。这样,每次ready事件发生时(即每次文档加载完成时),事件处理函数都会执行一次。
控制一个页面在DOM加载完成后弹出“Hello World!”警告框。
jQuery的语法就像自然语言那样简单。使用jQuery,主要理清三个概念:When,Who,What,即什么元素在什么时候要做什么事情。
When | Who | What |
---|---|---|
事件 | DOM元素 | 方法 |
上面三个要素可以帮助我们很好地理解jQuery代码,进而帮我们更好地定义。
下面的语句执行时元素div.box将从页面中消失。你会发现,jQuery定位元素的方式与CSS选择器的定位方式非常类似。
$("div.box").hide()/*选择文档中所有class属性为box的div标记,并隐藏他们*/
使用“三要素”来分析就是:
When | Who | What |
---|---|---|
? |
$("div.box") | hide() |
注意:上面的语句中并没有任何代码明确说明When这个要素,那div.box究竟什么时候会被隐藏?或者换句话说,什么时候这行代码会执行?
当没有明确的代码说明When这个要素时,我们需要从代码的上下文中来获取When相关的信息。要找到JS代码的上下文,要关注离代码最近的大括号“{}”。
$("div.box").hide();
上面的代码的没有在任何大括号中,因此它不会被执行。
function hidebox(){
$("div.box").hide();
}
上面的代码被hidebox函数的大括号包裹着,因此它的When是hidebox函数被调用的那一刻。
$(document).ready(function(e){
$("div.box").hide();
})
上面的代码被function(e){...}这个事件处理的大括号包裹着,因此它的When是对应的ready事件发生的那一刻。
在网页设计与开发中,控制元素响应用户的交互事件是一个很关键的需求。比如,当用户“点击”、“移动”或“拖拽”时,页面会发生相应的变化。下面的例子演示如何绑定一个click事件处理函数,在用户点击a.btn时,弹出一个“hello world”窗口。
$("a.btn").on("click",function(e){
alert("hello world");
});
When | Who | What |
---|---|---|
点击 click |
浏览器窗口 | 弹出警告窗口 alert("hello world") |
注意,除非上面的代码被添加到$(document).ready()事件处理中,否则你看不到弹出窗口。因为你必须告诉浏览器,在文档加载完成时,开始绑定点击事件。
$("a.btn").on("click",function(e){
alert("hello world");
});
When | Who | What |
---|---|---|
浏览器加载完成 $(document).ready() |
按钮 $("a.btn") |
绑定点击事件 on("click",function(e){...}) |
在jQuery中可以使用“链式句点”语法,这种语法可以让“多个What共用1个Who”。
$("div.box").css("width","400px").css("height","300px")/*先把宽度设置为400px,再把高度设置为300px*/