1、新 课第一个JavaScript小程序1.1了解JavaScript 什么是JavaScript 为什么要学JavaScript1.2JavaScript执行原理在脚本的执行过程中，浏览器客户端与应用服务器采用请求/响应模式进行交互分解这个过程为1）浏览器接收用户的请求： 2）向服务器请求某个包含JavaScript脚本的页面 3）应用服务器端向浏览器发送响应信息，即把含有脚本的HTML文件发送到浏览器客户端，然后由浏览器从上到下逐条解析HTML标签和JavaScript脚本，并显示页面效果呈现给用户。使用客户端脚本的好处有以下两点：a）含脚本的页面只要下载一次，减少不必要的网络通信。b）脚本
2、程序是浏览器客户端执行，而不是由服务器执行，因此可以减轻服务器端的压力。1.3JavaScript的版本JavaScript语言最初在Netscape2.0上发布，此后不断发展，陆续推出了多个版本：JavaScript1.0到JavasScript1.6。其中JavaScript 1.5,Internet Explorer 6.0支持，Netscape 6.0和Firefox1.0支持。JavaScript 1.6目前有firefox1.5支持。1.4脚本编写工具记事本 FrontPage Dreamweaver1.5写第一个JavaScript工作任务3：写出第一个含有JavaScript的
3、html，功能是弹出一个对话框，并调试成功！20知识扩展：练习或训练注意Dreamweaver的使用和JavaScript调试方法40课后小结15布置作业 课后实战题151.6JavaScript的基本语法1.6.1变量声明和赋值1.6.2运算符号现场教学第 1 周 周 4 （9月 1 日） 第 5 至 6 节掌握变量声明和赋值方法。编写调用简单的JS代码，完成一定功能。能根据功能分析出编程步骤，并在规定实践完成。运用变量声明和赋值知识,编写调用简单的JS代码，完成一定功能。机房 电脑 dreamweaver MX 2004回顾JS基本知识。 JavaScript的执行原理是什么?分成几个步骤
4、?大家简述一下JavaScript脚本的基本结构？常用的JavaScript编写工具是什么?如何调试JavaScript程序? 1.6 Javascript的基本语法1.6.1变量的声明和赋值在JavaScript中，变量的命名规则与Java相同。JavaScript是一种弱类型语言，也就是在变量声明时不需要指定变量类型，变量的类型会由赋给变量的值决定。1.6.2运算符号运算符对一个或多个变量或值（操作数）进行运算，并返回一个新值根据所执行的运算，运算符可分为以下类别： 1）算术运算符用于连接运算表达式。算术运算符包括加（+）、减（）、乘（*）、除（/）、取模（%）、自加（+）、自减（-）等运
5、算符2）比较运算符用来连接操作数来组成比较表达式。比较运算符的基本操作过程是：首先对操作数进行比较，然后返回一个布尔值true或false。包括、=、=、=、!=3） JavaScript支持的常用逻辑运算符,包括！、|、&4） 赋值运算符，包括=、+=、=、*=、/=变量声明和赋值使用变量和运算符,实现如下运算a=1,b=2,a+b=3c=”hello”d=” you”c+d=”hello you”e=false !e=true 课后实战题21.6.3逻辑控制语句1.6.4注释第 2 周 周 2 （9 月6 日） 第 7 至 8 节掌握分支语句和循环语句的语法结构。编写调用简单的JS代码，实
6、现分支结构和循环结构。能灵活运用分支和循环结构解决实际编程问题。使用分支语句使用循环语句循环语句和分支语句JavaScript中的变量声明和Java中的区别是什么，什么样的名字可以作为变量名使用?JavaScript语言区分大小写吗?JavaScript有哪些赋值符号。1.6.3逻辑控制语句1）条件语句if语句是最基本、最常用的条件控制语句，语法：if（expression） statement2）switch语句switch是典型的多路分支语句语法：switch （expression） case judgement1: statement1; break; default: default
7、statement; break;4）for语句5）while语句while语句是基本的循环语句，也是条件判断语句。语法：while （expression） statement用while循环语句将指定的字符串进行输出利用脚本实现宝石图形。课后实战题3.42.1 函数基础2.2什么是函数2.3简易购物车实现第 2 周 周 4 （ 9 月 8 日） 第 5 至 6 节定义函数、调用函数、能实现事件响应编写调用简单的JS函数，完成一定功能。组织教学，点名根据分数给出学生获得的等级，使用什么结构？实现连续十个学生的等级评价，使用什么结构？观看一个购物车特效，可以自动计算购物金额，如何实现呢？引出函
8、数的概念和函数调用的概念。2.1函数基础工作任务1编写函数function sum（number1,number2） 求两数之和，弹出结果。并调用之。2.2什么是函数函数实质上就是可以作为一个逻辑单元对待的一组相关JavaScript语句。在JavaScript程序中使用函数可以使代码更为简洁并具有重用性能。2.2.1函数的定义函数是由关键字function、函数名加一组参数以及置于大括号中需要执行的一段语句定义的。函数与其他的JavaScript代码一样，必须位于标记之间，函数的基本语法。2.2.2函数调用函数调用的语法2.3简易购物车实现课后实战题12.4四则运算计算器第 3 周 周 2
9、（ 9 月 13 日） 第 7 至 8 节 有参函数的定义和调用，事件响应编写调用简单的有参数JS函数，完成一定功能。机房 电脑 dreamweaver MX 2004JavaScript函数定义和调用的语法点击按钮实现功能如何调用JavaScript函数制作四则运算计算器。本题需要使用函数参数传递。在JavaScript中定义函数的完整格式如下：语法function 自定义函数名 （形参1,形参2,） 函数体 在定义函数时，在函数名后面的圆括号内可以指定一个或多个参数（用逗号“,”分隔）。指定参数的作用在于当调用函数时可以为被调用的函数传递一个或多个值。我们把定义函数时指定的参数称为形式参数
10、，简称形参；而把调用函数时实际传递的值称为实际参数，简称实参。如果定义的函数有参数，那么对这种函数的调用形式就是：函数名（实参1，实参2，）通常，如果在定义函数时使用了多少个形参，那么在函数调用时也必须给出多少个实参（这里需要注意的是，在实参之间也必须用逗号“,”分隔。）function compute（op）.这里op代表进行何种运算。所以调用的时候，也相应的给予参数onClick=compute（+ 实现特效课后实战题22.5用链接代替按钮响应点击事件 讲授+现场教学第 3 周 周 4 （ 9 月 15 日） 第 5 至 6 节 超链接如何实现像按钮一样的功能。编写调用简单的有参数JS函数
11、，用超链接点击实现响应，完成一定功能。用超链接实现按钮一样的功能。无。JavaScript中如何定义和调用有参函数。按钮点击调用函数如何实现？如何用超链接取代按钮？点击超链接实现按钮功能，改变html的页面背景色。函数除了可以在响应事件中被调用之外，还可以在链接中被调用。在标签中的href标记中使用javascript:关键字调用函数，当用户单击这个链接时，相关函数将被执行。a href = javascript:change（b） function change（color）if（color=r）document.bgColor=red;else if（color=bblueelse if（
12、color=ggreen把建议购物车的“计算金额”按钮变成超链接看能否实现相同的效果？P80 一 二2.6Javascript的内置函数第 4 周 周 2 （9 月 20 日） 第 7 至 8 节常见函数parseInt（），isNaN（）和parseFloat（）能使用内置函数实现数值转换，获得表单元素。能利用内置函数判断输入是否为数值，能将字符串转换为整数或浮点数不带参数的函数，带参数的函数定义，函数调用的注意点如何响应按钮点击事件？超链接可以取代按钮吗？工作任务5编写个人所得税计算器。月收入所得税计算的方式：（月收入-起征额）*所得税率。收入多出起征额1000以内，税率为0.05，100
13、0到3000为0.1，以上为0.5。如果输入非数字，弹出错误提示。否则给出结果。1）parseInt（）函数该函数主要将首位为数字的字符串转化成数字，如果字符串不是以数字开头，那么将返回NaN。parseInt（StringNum,n）StringNum：需要转换为整型的字符串。n：提供在236之间的数字表示所保存数字的进制数。这个参数在函数中不是必须的。2）parseFloat（）函数该函数主要将首位为数字的字符串转化成浮点型数字，如果字符串不是以数字开头，那么将返回NaN。parseFloat（StringNum）需要转换为浮点型的字符串。3）isNaN（）函数该函数主要用于检验某个值是否
14、为NaN。isNaN（Num）Num：需要验证的数字。如果参数Num为NaN，函数返回值为true；如果参数Num不是NaN，函数返回值为false。4）isFinite（）函数该函数主要用于检验某个表达式是否为无穷大。isFinite（Num）如果参数Num为无穷大，函数返回值为true；如果参数Num不为无穷大，函数返回值为false。 实现闰年的判断 课后是实战题33.1DOM模型3.2window对象编程第 4 周 周 4 （ 9 月22 日） 第 5 至 6 节 DOM模型Window对象常用属性和方法编写调用简单的JS函数，实现广告窗口的弹出 函数parseFloat（String
15、Num）的功能是什么？ 实现一个四则运算器的基本思路是什么？引入：1） HTML树状结构任何一篇HTML文档被浏览器加载到计算机的内存后，都会被解析为一颗内存树。如图3.2所示。这颗树是由一个一个的节点构成的。其中节点有12种类型，但是最常用的只有3种，分别是元素节点、属性节点、文本节点。2）节点和节点的引用在DOM中，每个对象都称为一个节点。DOM 对象模型浏览器对象是一个分层结构，也称为文档对象模型。window对象编程打开页面，先看到浏览器窗口，即window窗口，window对象指的是浏览器本身。其次就是我们看到的网页文档内容，即document文档。它包含一个最主要的内容表单。假设m
16、yform表单中有一个文本框text1，定位次文本框时，就应该从上到下定位：window.document.myform.text1因为window对象是所有页面内容的根节点，所以可以省略document.myform.text1浏览器对象结构中除了document文档对象，还有location和history。工作任务2页面加载时弹出广告页面。 3.2.3动态秒表第 5 周 周 2 （ 9 月 27 日） 第 7 至 8 节全局变量的使用onLoad事件响应setTimeout定时函数能使用setTimeout（）方法实现定时特效。全局变量的使用，setTimeout（）方法应用。回顾简述D
17、OM的基本概念。页面加载时弹出广告页面的主要步骤。 全局变量和局部变量的概念 onLoad事件是“页面加载完成”事件，当页面加载完了之后发生此事件，如果想要在打开网页的时候就调用JavaScript函数，可以响应此事件。setTimeout（函数,毫秒数）可以设置定时器：经过指定毫秒值后执行某个函数。我们可以利用它实现一个每1秒就递增的秒表。var t=1;function tick（）document.form1.tick.value=t;t+;setTimeout（tick（）,1000）;body onload=tick（）实现网页颜色每过一秒钟就变一种颜色，总共5种颜色。使用onLoa
18、d事件和setTimeout方法。3.3document对象编程3.3.1document对象常用属性和方法3.3.2漂浮广告制作第 5 周 周 4 （9 月29 日） 第 5 至 6 节document对象的常用属性和方法能document提供的方法实现特效。Document.getElementsByName（）获得控件数组的概念onLoad事件是什么事件？setTimeout（）方法的目的是实现什么功能？简述动态秒表的实现步骤。document对象编程document对象常用属性和方法表3.3document常用属性名称说明bgColor设置或检索 Document 对象的背景色常用方法
19、document对象常用方法如表3.4所示。表3.4document常用方法getElementByID（ ）根据HTML元素指定的ID，获得唯一的一个HTML元素。如：访问DIV层对象、图片Img对象getElementsByName（ ）根据HTML元素指定的name，获得相同名称的一组元素。访问表单元素（全选功能）漂浮广告制作布局：在页面中插入层，z轴设为1，然后在层中插入图片。编写脚本：使用getElementByID（ ）方法获取层对象，捕获鼠标滚动事件，改变层对象的位置坐标。常见的页面坐标的介绍,如表3.5所示：表3.5常见页面坐标top:指定元素的上边界位置。pixelTop:设置或返回元素的上边界。left:指定元素的左边界位置。scrolltop:页面滚动的高度设计会漂浮的广告页面。 课后实战题33.4history对象和location对象第 周 周 （ 月 日） 第 至 节实现有返回，前进，刷新功能的页面history对象和location对象的属性和方法Document对象的属性和方法有哪些？漂浮广告制作的步骤使用网页上的前进后退效果
