Web 前端开发技术 教案 项目七 JavaScript 基础.docx

Web前端开发技术

教案设计

项目课题

JavaScript基础

授课时间

授课对象

大学生

学习目标

1.掌握JavaScript的引入方式。

2.掌握JavaScript常用的输入输出方法。

3.掌握JavaScript的数据类型、变量、常量、运算符和表达式。

学习重点

掌握JavaScript常用的输入输出方法。

学习难点

掌握JavaScript的数据类型、变量、常量、运算符和表达式。

教学方法

讲授法、课堂演示法

教学用具

多媒体课件

教学流程

教学环节

教学内容

教学过程

任务一JavaScript概述

JavaScript是一种轻量级直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分。它是广泛用于客户端的脚本语言,最早是在HTML网页上使用,用来给HTML网页增加动态功能。在HTML基础上,使用JavaScript可以开发交互式Web页面。JavaScript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,使网页包含更多活跃的元素和更加精彩的内容。

1995年,JavaScript由Netscape公司(已被AOL公司收购)的BrendanEich(布兰登·艾奇)在网景导航者浏览器上首次设计实现。最初命名为LiveScript,后来Netscape公司与Sun公司进行合作,将LiveScript改名为JavaScript。JavaScript在设计之初受到了Java的启发,因此在语法上与Java有很多类似之处,并借用了许多Java的名称和命名规范。

一个完整的JavaScript实现由3个部分组成:核心(ECMAScript)、文档对象模型(DocumentObjectModel,DOM)和浏览器对象模型(BrowserObjectModel,BOM)。

JavaScript代码可以采用任何文本编辑器编写。常用的JavaScript代码编写工具有Notepad、Notepad++、AdobeDreamweaver、EditPlus等。纯文本编辑器Notepad、Notepad++适用于编写少量脚本,借助浏览器的调试窗口进行调试(按快捷键F12即可打开调试窗口);AdobeDreamweaver、EditPlus等专业编辑工具适用于编写大量脚本,提供代码自动生成、智能感知、调试等功能,其效率较高。本书对开发工具不作特定要求。

具有JavaScript代码的网页,如果不涉及和服务器交互,则只需浏览器软件便可以运行查看效果。

任务二JavaScript引入方式

一、行内式

行内式是将JavaScript代码作为HTML标记的属性值使用。在HTML标记中,有些具有事件处理的属性,如onclick、onload事件,可以在事件处理中编写JavaScript代码,其基本语法格式如下。

html标记事件=JavaScript语句或函数

例如,下面的语句表示在button标记中,设置了onclick事件属性,关联了alert(?ok?)语句。鼠标在单击按钮时,会弹出警告提示框,警告提示框显示文本“ok”。

buttononclick=alert(ok)

二、嵌入式

在HTML文件中放置JavaScript代码,在页面载入的同时载入脚本代码。这种方式需要用script标记来声明脚本语言,其基本语法格式如下。

scripttype=text/javascriptlanguage=javascript

JavaScript语句

……

/script

script标记中的type和language属性可以省略不写。内嵌JavaScript代码可以位于HTML网页文件的任何位置。在同一个HTML网页文件中,允许在不同位置放入多段JavaScript代码。由于HTML内容和程序脚本分离的形式便于网页的维护,所以建议尽可能地将内嵌的JavaScript、函数写在head……/head头部区域。

三、外链式

外链式是将所有的JavaScript代码放在一个或多个扩展名为.js的外部脚本文件中,通过script标记将这些文件进行引用,其基本语法格式如下。

scripttype=text/javascriptsrc=路径/js文件.js/script

任务三JavaScript编程基础

一、语法规则

JavaScript程序是由若干条语句组成的,