\section{JavaScript简介}

\subsection{JavaScript的特点}

JavaScript是一门可以运行在浏览器端的脚本语言。它与浏览器的结合使它成为世界上最为流行的编程语言之一,但它不是所谓的主流编程语言,在对这门语言没有太多了解,甚至对编程都没有什么了解的情况下,用户也能用它解决工作中的一些问题。

JavaScript是事件驱动的语言。当用户在网页中进行某种操作时,就产生了一个"事件"。事件几乎可以是任何事情:单击一个网页元素、鼠标的移动等等均可视为事件。JavaScript是事件驱动的,当事件发生时,它可以对之作出响应。具体如何响应某个时间由编写的事件响应处理程序完成。

JavaScript是一种基于对象的语言,基于对象的语言含有面向对象语言的编程思想,但比面向对象语言更简单。它本身已包含一些创建完成的对象,通常情况下都是使用这些已创建好的对象。

JavaScript是一种容易学习和掌握的编程语言。与其他编程语言相比,JavaScript学习难度较低,学习资源丰富,由于JavaScript大多数情景都是在浏览器端使用,因此,用户可以通过查看源代码来学习,很多网站将所使用的JavaScript脚本都是开放的,可以下载学习并使用。

Javascript是一种跨平台的脚本语言。JavaScript的运行依赖于浏览器本身,与操作环境无关,只要能运行浏览器的计算机,并支持javascript的浏览器就可正确执行。

\subsection{JavaScript的用途}

JavaScript可以完成以下任务:

\begin{enumerate}
	\item JavaScript为HTML提供了一种程序工具,弥补了HTML语言在功能上的局限。HTML只是一种标记语言,它的作用是将网页的内容通过标记组织起来,JavaScript为其提供了实现动态交互和输出的一种途径,它可以很好地结合HTML标记语言实现复杂的应用。
	\item JavaScript可以为HTML页面动态添加内容。用户可以传递数据至JavaScript脚本,再由JavaScript修改HTML内容。
	\item JavaScript能响应一定的事件。当某些事件发生时,如键入内容、鼠标滑过、页面装载完毕等等,JavaScript都可以根据事件作出响应。
	\item JavaScript可以动态地获取和改变HTML的元素属性和CSS属性,从而动态地创建内容和改变内容的显示。
	\item JavaScript可以检验数据,这在验证表单时候特别有用,在用户提交数据之前就可以保证数据的正确性,既能减轻服务器压力,又能使用户有更好的体验。
	\item JavaScript可以检验用户的浏览器,从而为用户提供更好的页面显示效果。
	\item JavaScript可以创建和读取Cookie,根据保留在cookie中的数据,调整页面内容,提供更加个性化的服务。
\end{enumerate}

尽管JavaScript能够完成很多复杂的应用,但由于浏览器安全性的考虑,JavaScript有一些固有的限制,这些限制包括:
\begin{enumerate}
	\item JavaScript不允许读写客户端文件。唯一的例外是,JavaScript可以读写Cookie文件,但是也有一些限制。这样限制能避免恶意程序传播病毒木马、窃取用户信息。
	\item JavaScript不允许写服务器端文件。尽管网页中有大量数据需要从服务器端读取和写入,如用户提交的投票信息、新闻评论、点击量等等,但是JavaScript不允许向服务器写入文件,通常都是利用服务器端脚本,如PHP、ASP程序来完成服务器文件的操作。
	\item JavaScript不能从读取已经打开的其它窗口的信息,因此,JavaScript无法知晓浏览当前网页的用户还在访问哪些其它站点。
	\item JavaScript不能操纵不是由它打开的窗口,这是为了避免一个站点关闭其他任何站点的窗口,从而独占浏览器,强制用户接受信息。
	\item JavaScript调整浏览器窗口的大小和位置时,不能将窗口设置的很小或者移出屏幕之外。
\end{enumerate}

\subsection{JavaScript开发环境}

进行JavaScript的开发,需要开发人员具备以下环境:

\begin{description}
	\item [文本编辑器] JavaScript脚本是纯文本文件,因此,开发人员可选择自己熟悉的文本编辑器,推荐使用Sublime Text编辑器。
	\item [浏览器] 由于JavaScript是网页内容的一部分,要预览脚本的运行效果,自然少不了浏览器,根据项目的不同,开发人员应该选择合适的浏览器,一般而言,至少需要IE、Firefox浏览器。
	\item [调试工具] JavaScript脚本在开发过程中难免出现预料之外的运行结果,为提高开发效率,需要安装JavaScript调试工具,建议使用Firefox浏览器中的firebug组件,下载地址\url{http://getfirebug.com/}。
\end{description}

除上述工具之外,开发人员最好还应该有权威准确、更新及时的参考手册,推荐以下学习资源:
\begin{enumerate}
	\item \url{https://developer.mozilla.org/zh-CN/docs/Web/JavaScript}
	\item 《精通JavaScript》\cite{Resig,2008}
\end{enumerate}

\subsection{在网页中使用JavaScript的方法}

就像在HTML中使用CSS一样,必须通过适当的方法将JavaScript和HTML结合起来使用,JavaScript只有被嵌入到HTML中时才能对网页产生作用。和使用CSS的方式类似,在HTML中使用JavaScript的方式有三种,即嵌入式、行内式和链接式。

\subsubsection{嵌入式}

所谓嵌入式使用JavaScript的方法就是利用script元素将脚本嵌入到网页中。Script元素是HTML语言为了引入脚本程序而定义的一个标记,插入脚本的具体方法是:把脚本用script元素标记后,放在HTML文件中的head部分或者body部分。虽然script脚本既可以放在head部分和body部分,但比较好的做法是将所有包含预定义函数的脚本放在head部分,因为HTML的内容在浏览器中处理时是从上到下解释的,放在head中的脚本比放在body中的脚本先处理。这样,浏览器在处理body中的元素内容时需要用到的JavaScript功能已经预先装载,减少出错的可能。同样的道理,如果JavaScript脚本需要等到页面完全装载完毕才要使用,则将其放置在body部分末尾。

使用script元素标记标本的语法如下:
\begin{lstlisting}
<script >
	脚本内容
</script>
\end{lstlisting}

下面的HTML代码创建了一行文本,当用户单击文本时,文字会改变为其它内容。

\lstinputlisting{example/JavaScript/embedjs.html}

在上述代码中,onclick="hello()"表示当鼠标单击时执行hello()函数功能,而display函数就是用script元素标记的嵌入式脚本。

\subsubsection{行内式}

所谓行内式脚本应用就是将脚本内容写在HTML元素的标记中,在这些标记中,将事件和相应内容写在一起。
如上例的HTML代码,如果用行内式的写法可以修改如下,而执行结果是完全相同的:

\lstinputlisting{example/JavaScript/inlinejs.html}

从上述代码可以看到,行内式的写法似乎更加简洁,但是,在实际工作中,我们要尽量避免这种写法,因为行内式嵌入的脚本可读性很差,不容易维护,不符合Web标准中将内容、表现、行为三者相分离的原则。而且,但从效率的角度来讲,如果某个功能要反复使用,则行内式的写法将会过于繁琐,反倒是其它写法更加简洁。故而,行内式使用脚本的方式仅限于较为简单的情况。

\subsubsection{链接式}

所谓链接式就是将JavaScript脚本文件单独写在后缀名为js的文件中,然后在需要使用此脚本的网页中加入脚本文件的路径名称即可。这种方式使用的脚本可以链接到多个网页甚至多个网站中,提高了代码的重用性,也方面了维护,同时也能降低网站主机访问次数,提高网站性能。

要引用外部js文件,需要在合适的地方,一般为HTML文件的head部分,使用script元素来指定外部脚本存放的路径和名称。

还是以上述中的HTML为例,如果改写成链接式引用,则需要将脚本存放成单独的文件,HTML文档代码如下:

\lstinputlisting{example/JavaScript/externaljs.html}

其中使用src属性引用的hello.js文件存放在HTML文件的同一级目录中,外部hello.js文件内容如下:

\lstinputlisting{example/JavaScript/js/hello.js}