项目十七 Javascript基础
Javascript是一种新的描述语言，此一语言可以被嵌入HTML的文件之中。透过 Javascript可以做到回应使用者的需求事件 (如：form的输入)而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给服务端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。你也可以想像成有一个可执行程式在你的客端上执行一样。
教学目标
1. 理解什么是JavaScript；
2. 熟悉JavaScript的常见字符类型
3. 了解什么是赋值以及运算
4. 熟悉JavaScript函数以及事件
实践目标
1、 能运用JS进行简单的数学运算
2、 掌握函数的运用方法
知识储备
课前预习
1、请预习本章内容，了解下面英文单词的意义及作用
JavaScript：_______________________________________
Null：_________________________________
String：_____________________________________________
2、请简要回答以下问题：
1）JavaScript函数语法是什么？
2）函数中的返回值用什么来返回？
一、了解什么是JavaScript
1、JavaScript简介
Javascript 是 Microsoft 公司对 ECMA 262 语言规范的一种实现。Javascript 完全实现了该语言规范，并且提供了一些利用 Microsoft Internet Explorer 的功能的增强特性。
首先要弄清Javascript 到底是什么？Javascript是一种描述性的脚本语言(Script Language)，它可以非常自由地被嵌入到HTML 的文件之中。使用Javascript 可以做什么呢？它的作用很简单，就是对网页浏览者当前所触发的事件进行处理或对网页进行初始化工作。它是事先在网页中编写好代码(或叫做"脚本")，然后此代码伴随HTML文件一起传送到客户端的浏览器上，由浏览器对这些代码进行解释执行，而其执行期间并没有劳驾服务器帮忙，这样就减轻了服务器的负担。
Javascript 是一种解释型的、基于对象的脚本语言。尽管与诸如 C++ 和 Java 这样成熟的面向对象的语言相比，Javascript 的功能要弱一些，但对于它的预期用途而言，Javascript 的功能已经足够大了。
Javascript 不是任何其他语言的精简版（例如，它只是与 Java 有点模糊而间接的关系），也不是任何事物的简化。不过，它有其局限性。例如，您不能使用该语言来编写独立运行的应用程序，并且该语言读写文件的功能也很少。此外，Javascript 脚本只能在某个解释器上运行，该解释器可以是 Web 服务器，也可以是 Web 浏览器。
Javascript 是一种宽松类型的语言。这意味着您不必显式定义变量的数据类型。事实上您无法在Javascript 上明确地定义数据类型。此外，在大多数情况下，Javascript 将根据需要自动进行转换。例如，如果试图将一个数值添加到由文本组成的某项（一个字符串），该数值将被转换为文本。
2、JavaScript嵌入方式
1）、内部引用
通过 标记嵌入JavaScript，这是最常用也是最简便的一种引用方式，可以在HTML代码的任何位置嵌入。
2)、外部引用
通过引用HTML文件的方式加载JavaScript文件，这种方式可以使HTML代码更简洁，方便代码复用。
3、使用Script标签
HTML 源代码：
代码解析：
1） 第3行:插入一段JS脚本语言，输出"欢迎来到Javascript世界"
2） 第7行：定义一个段落标记，段落中的文本内容为"尽情享受学习的快乐"
效果预览：
图：Javascript 基础
4、声明变量
与代数一样，JavaScript 变量可用于存放值（比如 x=2）和表达式（比如 z=x+y）。
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。
1）变量必须以字母开头
2）变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
3）变量名称对大小写敏感（y 和 Y 是不同的变量）
声明变量： var a;
"var" － 用于声明变量的关键字
"a" － 变量名
赋值： a = 10;
声明多个变量：var x, y, z = 10;
HTML 源代码：
代码解析：
1） 第3-7行:插入一段JS脚本语言，声明一个变量X，并且给X赋值为10，声明一个变量X，并给X赋值为15，声明一个变量Y，并给Y赋值为20；
2） 第7行：输出X+Y的值；
效果预览：
图：声明变量
二、JavaScript数据类型
1、数据类型
Javascript是一种泛类型的语言，泛类型意味着不必显式定义变量的数据类型。事实上，在Javascript上无法明确地定义数据类型。而只能通过var语句显示声明变量：var myvar;或这样隐式声明变量:myvar=myvarValue（省略var，在声明的同时初始化）。
图：数据类型
2、运算符
Javascript 具有全范围的运算符,包括算术、逻辑、位以及赋值运算符。此外还有其他一些运算符。
1）数学运算符
算术运算符用来执行简单的算术运算。
2）逻辑运算符
3）赋值运算符
注意：赋值(=)和等于(==)的区别。
三、Javascript 函数
函数的概念：函数就是有一个或多个代码块组成的，即"函数是可以向其传递参数并能够返回值的可重复使用的代码块"，如果把函数看成是一台机器，例如搅拌机，它有输入和输出两种状态，当它的输入不同时其输出也会不同，
输入一个苹果，则输出苹果汁。
输入一个香蕉，则输出香蕉汁。
向机器输入的苹果，香蕉对应于向函数传递的参数，输入不同的内容得到不同的结果，对于搅拌机内部的工作原理可以不用了解，只要知道输入和输出相对应这样一个结果就可以了。
1、函数的定义
Javascript有两种函数：一种是语言内部事先定义好的函数叫预定义函数，另一种是自己定义的函数。
Javascript 语法格式：
说明：
1.func_name 新函数的名称。
2.parameter 一个标识符，表示要传递给函数的参数。参数的作用是在函数调用时传送变量.
3.statement(s) 为function的函数体,可以是任何Javascript 语句块。
2、函数的调用
调用函数时在函数名后面加圆括号就可以了，通常函数调用语句放在HTML语言的一些属性中。调用函数又分为：带变量参数的函数和不带参数的函数。
下面介绍不带参数的函数：
Javascript 源代码：
效果预览：
说明：
调用函数直接用用函数名后面加上圆括号() ，用在 function 之后和函数结尾的大括号是不能省去的，就算整个函数只有一句。函数名与变量名有一样的起名规定，也就是只包含字母数字下划线、字母排头、不能与保留字重复等。参数集可有可无，但括号就一定要有。
下面介绍带参数的函数：
Javascript 源代码：
效果预览：
说明：
参数是函数外部向函数内部传递信息的桥梁，带参数的函数调用，需指明参数值，并与函数定义的参数对应。
3、函数的返回值
Javascript 中函数的返回值用return将值返回；
Javascript 语法格式：
说明：
1.语法，return[expression]
2.参数，expression 要作为函数值计算并返回的字符串、数字、数组或对象。
3.返回，如果提供了 expression 参数，则返回计算的结果。
Javascript 源代码：
效果预览：
说明：指定由函数返回的值。return 动作计算 expression 并将结果作为它在其中执行的函数的值返回。return 动作导致函数停止运行，并用返回值代替函数。如果单独使用 return 语句，则它返回 null。您不能返回多个值。如果尝试返回多个值，则将只返回最后一个值。
四、Javascript 中的事件
用户可以通过多种方式与浏览器载入的页面进行交互，而事件是交互的桥梁。Web应用程序开发者通过Javascript脚本内置的和自定义的事件来响应用户的动作，就可以开发出更有交互性，动态性的页面。
Javascript事件可以分为下面几种不同类别。最常用的类别就是鼠标交互事件，然后是键盘和表单事件。这里我们主要介绍鼠标事件。鼠标事件分为两种，追踪鼠标当前位置的事件（mouseover、mouseout）；追踪鼠标在被单击的时间（mouseup、mousedown、click）。
1、 click事件
Click单击事件是常用的事件之一，此事件是在一个对象上按下然后释放一个鼠标按钮时发生，它也会发生在一个控件的值改变时。这里的单击是指完成按下鼠标键并释放着一个完整的过程后产生的事件。使用单击事件的语法格式如下：
基本语法：onClick=函数或是处理语句
HTML 源代码：
代码解析：
1） 第3行:网页的标题叫做"click事件"
2） 第6行：定义一个表单，类型为提交按钮，按钮的值为"打印本页"，鼠标单击按钮时实现打印效果。
效果预览：
图：click事件
图：打印本页
2、 鼠标移动事件
鼠标移动事件包括3种，分别为mouseover、mouseout和mousemove。其中，mouseover是当鼠标移动到对象之上时所激发的时间，mouseout是当鼠标从对象上移开时所激发的事件，mousemove是鼠标在对象上移动时所激发的事件。
基本语法：
Onmouseover=处理函数或是处理语句
Onmouseout=处理函数或是处理语句
HTML 源代码：
代码解析：
1） 第5-9行:定义一个名为"bigImg"的函数，同时声明变量X，赋值给X高为180像素，赋值给X的宽为180像素；
2） 第10-14行：义一个名为"normalImg"的函数，同时声明变量X，赋值给X高为128像素，赋值给X的宽为128像素；
3） 第18行：插入一张图片，定义鼠标移动时调用名为"bigImg"函数，鼠标移开时调用"normalImg"函数
效果预览：
图：鼠标离开时
图：鼠标经过时
小结：
HTML是目前网络上应用最为广泛的语言，也是构成网页文档的基本语言。了解HTML基础，文件结构以及常用的基本标签是学习好HTML语言的基础，同时为后面网页设计与开发以及制作更复杂的网页打下良好的基础。
项目实践
在前面我们介绍了HTML语言的常用编辑软件有Dreamweaver，这是也是使用最为广泛和方便的网页制作软件，清晰简洁的代码界面以及可以灵活切换的设计界面，并且可以一边编写代码一边查看实时设计效果，因此深受广大网页设计师的欢迎。下面我们就来具体的操作和使用Dreamweaver。
任务一：圆周率计算
任务描述：
1. 下载和安装Dreamweaver软件
2. 熟Dreamweaver的操作界面和基本功能
3. 使用dreamweaver软件建立一个html网页
实践目标：
1. 熟悉html文档结构
2. 熟悉Dreamweaver工具
参考步骤：
1、 下载和安装Dreamweaver软件
2、 打开Dreamweaver，点击文件》新建》html，新建一个html页面
3、 点击文件》保存命令，保存html文档
4、 在弹出来的保存命令对话框中，填写文件名，并保存。
HTML 源代码：
任务二：函数计算圆周率
任务描述：
1、完成《沁园春.雪》这首诗，页面效果如下图：
实践目标：
1. 熟悉html标签格式
2. 了解html的基本标签
参考步骤：
1、 打开Dreamweaver软件
2、 点击文件》新建》html，新建一个html页面
3、 点击代码》，切换到代码视图界面，手写标签，完成html页面
4、 点击文件》保存在弹出来的保存命令对话框中，填写文件名，并保存。
参考代码：
HTML 源代码：
HTML 源代码：
本章总结：
本章主要介绍了Javascript的基本概念、基本语法、数据类型、javascript函数以及常见的javascript事件。通过本章的学习可以了解到什么是javascript，以及javascript的基本使用方法。从而为设计出各种精美的动感特效网页打下基础。
作业：
一、简答题
1.什么是Javascript ？
2.Javascript 有哪些数据类型？
3.如果数字型数据与字符串型数据进行相加运算，得到的数据是什么类型？
4.函数的概念。
2.简述调用函数的语法。
關鍵字: 使用者 JavaScript 不用
