1 JS基础

         所有主流浏览器都支持JavaScript。目前，全世界大部分网页都使用JavaScript。 它可以让网页呈现各种动态效果。做为一个Web开发师，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。它能增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)，实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

        像所有标签语言类似，使用<script>标签就可以往HTML网页中插入JavaScript代码。注意， <script>标签要成对出现，并把JavaScript代码写在<script></script>之间。当然，最常用的还是将JS代码文件和HTML或者JSP文件分开，单独创建一个JavaScript文件（简称JS文件），将代码写入JS文件中，然后使用<script src="名称.js"></script> 来调用既可。如图1-1。

图1-1

 2 常用方法

  2.1 输出内容

        document.write() 可用于直接向 HTML 输出流写内容。它有四种方式：

        document.write("I love JavaScript！");//内容用""括起来，""里的内容直接输出。

        var mystr="hello world!"; document.write(mystr); //直接写变量名，输出变量存储的内容。

        var mystr="hello"; document.write(mystr+"I love JavaScript");//多项内容之间用+号连接

        var mystr="hello";document.write(mystr+"");//输出hello后，输出一个换行符document.write("JavaScript");如图2-1所示。

图2-1

  2.2 警告

        alert是警告窗口，也就是我们经常见到的小弹窗，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。语法是：alert(字符串或变量); 如图2-2所示。

图2-2

  2.3 确认

        confirm也是一个弹出窗口，只是窗口有两个按钮：确定和取消。所以它的返回值是布尔类型， 当用户点击"确定"按钮时，返回true；当用户点击"取消"按钮时，返回false。如图2-3所示。

图2-3

  2.4 提问

        prompt弹出消息对话框,通常用于询问一些需要与用户交互的信息。弹出消息对话框（包含一个确定按钮、取消按钮与一个文本输入框）。语法是：prompt(str1, str2);str1是显示在消息对话框中的文本，不可修改；str2是文本框默认的输入内容，可以修改。点击确定按钮，文本框中的内容将作为函数返回值，点击取消按钮，将返回null。如图2-4所示。

图2-4

  2.5 窗口操作

        打开新窗口（window.open），语法：window.open([URL], [窗口名称], [参数字符串])。URL为可选参数，是可以在窗口中要显示网页的网址或路径。窗口名称：这是由字母、数字和下划线的，_blank：在新窗口显示目标网页，_self：在当前窗口显示目标网页，_top：框架网页中在上部窗口中显示目标网页，其余窗口设置方式如图2-5所示。

图2-5

        关闭本窗口 ：window.close();     关闭指定的窗口：<窗口对象>.close();

3 DOM操作

  3.1 DOM介绍

        文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。如图3-1所示。

图3-1

        DOM有三大元素：元素节点，文本节点，属性节点。

  3.2 通过ID获取元素

       在HTML/CSS样式中，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。语法： document.getElementById(“id”) ；

        在获取元素之后，就可以使用innerHTML 属性用于获取或替换 HTML 元素的内容。如图3-2所示。

图3-2

        HTML DOM 允许 JavaScript 改变 HTML 元素的样式。语法：Object.style.property=new style;Object是获取的元素对象。属性表如图3-3所示。

图3-3

        网页中经常会看到显示和隐藏的效果，可通过display属性来设置。语法是：Object.style.display= value。value是值，none：隐藏元素，block：显示元素。如图3-4所示。

图3-4

    点击隐藏后，便如图3-5所示。

图3-5

4 事件应用

        鼠标有单击(onclick)、经过(onmouseover)、移开(onmouseout)的事件。只是名字不同，一般是在某一标签内添加鼠标操作的属性，属性指向对应的函数。以鼠标经过为例，如图4-1，鼠标经过后如图4-2所示。

图4-1 图4-2

        其余还有光标事件：聚焦(onfocus)和失焦(onblur)，内容选中事件、更改内容事件等等。方法都如同鼠标事件。

5 小练习

        我们制作一个可切换窗口。如图5-1所示：

图5-1

        首先，HTML页面布局，这里只需要把内容分成模块，使用盒子封装起来。

图5-2

        重要的进行CSS布局。首先是规定盒子属性，然后是整个DIV模块：设置宽度--列表框架---列表内条目框架---被鼠标点击的列表选项属性设置----显示点击内容，隐藏其余非点击内容。

图5-3

        最后，通过JS改变鼠标点击事件所涉及的元素名字，完成匹配。

图5-4