教案：JavaScript第1章

来源：互联网发布：惠州市干部网络大学堂编辑：程序博客网时间：2024/04/28 08:10

声明：由于版权等方面的原因，本文特意隐去了部分内容，由此造成的不便请谅解。

如果本文对你有所帮助，请跟贴以示支持，谢谢。

授课教师：牟勇

课时：100分钟

l 本章技能目标

n 掌握脚本的基本结构

n 会使用JavaScript语言的基本语法

n 会使用高级语法－自定义函数function

l 本章重点

nJavaScript的基本语法

n自定义函数的使用

l 本章难点

n自定义函数的参数传递

l 本章工作任务

n制作淘宝网购物简易计算器的页面

l 整章授课思路

n回顾上一学期学过的HTML

n举例说明为什么需要学习JavaScript，JavaScript执行原理

n结合例子，采用对比教学说明JavaScript语言的基本语法

n将上述例子升级，引出并讲解函数function的用法

课程目标: [15分钟]

沿用第一学期的淘宝网案例，学员学习后能制作包含客户端验证，具有常见动态效果，界面美观大方的商业网站，能理解DOM对象和DOM元素的访问，为第2学年的Ajax技术做准备。

课程安排：本门课程共7章，前4章为特效制作，后3章为表单验证，具体安排如下：

第1章：采用和学员学过的Java/C#对比，简单介绍JavaScript的基础语法。

第2,3章：重点介绍DOM编程中常用的window对象，document对象，history对象，location对象，突出常用的open()方法，getElementById()等方法。

第4章：介绍常见的样式特效，同时巩固学习第一学期学习的CSS样式。

第5,6,7章：介绍表单的验证和相关特效，涉及开发中常见的表单验证内容和下拉列表框级联，回车焦点切换，错误即时提醒等表单的相关特效。

中间穿插指导学习1：强化开发中常用的样式特效制作。

两个在线培训课：补以扩展更高级的特效制作，只要求学员根据提供的源代码，修改为要求的特效，培养学员的代码阅读，修改能力。

最后上指导学习2：做课程总复习串讲和综合练习。

教学案例：理论课将学习制作淘宝网特效(一期制作过静态页面)，上机课学员将完成拍拍网特效(一期制作过静态页面)，项目案例课将完成51job人才招聘网的制作(根据课程安排一定要提前下发资料)，同时巩固训练第一学期学过的页面布局，模板技术，CSS样式等。

预习检查: [5分钟]

大家已学HTML，为什么要学习JavaScript？

如何编写JavaScript程序？

JavaScript与Java基本语法的异同？

课程知识点讲解：

回顾HTML：[10分钟]

提问：一学期我们学习过了HTML，大家还记得HTML的标签结构吧？

答案：

<html>

<head>

<head>

<body>

</body>

</html>

提问：如果我们要画一个二行三列的表格，怎么写？

答案：

<table>

<tr>

</tr>

<tr>

</tr>

</table>

提问：表单的基本结构是什么样的？常用的表单元素有哪些？

答案：

……

</FORM>

常用的表单元素有：<input><button><textarea>，其中<input>有多种类型：

文本框（text）、密码框（password）、单选按钮（radio）、复选框（checkbox）、列表框（<select>和<option>）、按钮（button,submit,reset）

提问：如何使用样式表定义统一的字体样式和细边框样式。

统一的字体外观：

font-family:“黑体";

font-size:18px;

color:#FF0000;

细边框样式：

border-width:1px;

border-style:solid;

为什么要学习JavaScript：[10分钟]

为什么要学JavaScript

提问：一期我们学习过了HTML，我们知道了，它可以完成静态页面的制作，那如果我们要做“动态”页面应该如何来做呢？我们可不可以使用浏览器来制作一些超炫的动态效果呢？我们先来看一看网站上常见的一些特效吧。

演示注册表单验证，树形菜单，层的切换，以此说明脚本的两大功能：客户端验证和特效制作。所以，如果我们学会了JavaScript，就可以让我们的网站更炫更吸引人。

什么是JavaScript

提问：这些特效是如何做出来的？又是如何运行的呢？我们利用一个简单的示例来说明吧。

演示HelloWorld.html的效果及源代码，并说明浏览器的工作原理。

结论：JavaScript就是一个可以被浏览器解释运行的脚本语言，它可以完成在浏览器下面需要完成的几乎所有工作，只要你想得到，它就可以实现，我们真的需要好好学习它。

JavaScript的基本语法[10分钟]

结合Helloorld.html的例子，让学员比较JavaScript与Java/C#在语法上有何不同。

语言

Java

变量声明

var count

int count

运算符

基本一致

控制语句

if,for,while,do-while

if,for,foreach,while,do-while

注释

//,/**/

//,/**/,/***/

//,/**/,///

类型转换

弱类型语言

强类型语言

自定义函数：[35分钟]

什么是函数：

类似于Java的方法，是执行特定语言的语句块。

提问：如何希望点击某个按钮后才显示“HelloWorld”，并能输入显示的次数？

答案：使用自定义函数

函数的定义：

function 函数名( 参数1,参数2，… )

{

语句;

}

调用函数

事件名＝“函数名” ;

小结1

编写具有能对两个操作数进行加、减、乘、除运算的简易计算器。(使用四个无参函数，分别进行加、减、乘、除运算，分别在四个按钮处调用)

定义有参函数

引入：前面我们做的程序写了四个函数，我们能不能只用一个函数就解决问题呢？通过我们的观察发现，这四个函数代码上是极相似的，只有一个地方不同：就是运算符。如果我们能将运算符做为参数传入，那我们将可以将四个函数合并为一个函数。

<HEAD>

function compute(op)

{

var num1,num2;

num1=parseFloat(document.myform.txtNum1.value);

num2=parseFloat(document.myform.txtNum2.value);

if (op=="+")

document.myform.txtResult.value=num1+num2 ;

if (op=="-")

document.myform.txtResult.value=num1-num2 ;

if (op=="*")

document.myform.txtResult.value=num1*num2 ;

if (op=="/" && num2!=0)

document.myform.txtResult.value=num1/num2 ;

}

</SCRIPT></HEAD>

调用：

……

<TR>

<TD><INPUT name="addButton2" type="button“

id="addButton2" value=" ＋ " onClick="compute('+')">

</TD>

<TD><INPUT name="subButton2" type="button"

id="subButton2" value=" － " onClick="compute('-')">

</TD>

<TD><INPUT name="mulButton2" type="button“

id="mulButton2" value=" × " onClick="compute('*')">

</TD>

<TD><INPUT name="divButton2" type="button"

id="divButton2" value=" ÷ " onClick="compute('/')">

</TD>

</TR>

……

</FORM>

常见错误1：变量不声明就使用容易出问题，不推荐使用

function compute(op)

{

x=5;

var num1,num2;

num1=parseFloat(document.myform.txtNum1.value);

num2=parseFloat(document.myform.txtNum2.value);

if (op=="+")

document.myform.txtResult.value=num1+num2 ;

if (op=="-")

document.myform.txtResult.value=num1-num2 ;

}

</SCRIPT>

常见错误2：JavaScript区分大小写！

function compute(op)

{

var Num1,num2;

Num1=parseFloat(document.myform.txtNum1.value);

num2=parseFloat(document.myform.txtNum2.value);

if (op=="+")

document.myform.txtResult.value=num1+num2 ;

if (op=="-")

document.myform.txtResult.value=num1-num2 ;

}

</SCRIPT>

常见错误3：JavaScript将字符串转为数字需要使用ParseXXX()函数。

function compute(op)

{

var num1,num2;

num1=document.myform.txtNum1.value;

num2=document.myform.txtNum2.value;

if (op=="+")

document.myform.txtResult.value=num1+num2 ;

if (op=="-")

document.myform.txtResult.value=num1-num2 ;

}

</SCRIPT>

本章总结 [10分钟]

大家简述一下JavaScript脚本的基本结构？

JavaScript与Java基本语法有哪些相同之处？

在JavaScript中，如何定义一个函数？

在JavaScript中，如何调用一个函数？

在JavaScript中，常见错误有哪些？

考核点

JavaScript基本语法

定义函数

调用函数

扩展部分：

暂无

学员问题汇总：

暂无

作业：

习题1：26页至27页选择题

习题2：27页第1,2,3，4题

习题3：预习第二章，试做课后的选择题