Web 前端开发技术 教案 项目七 JavaScript 基础_第1页
Web 前端开发技术 教案 项目七 JavaScript 基础_第2页
Web 前端开发技术 教案 项目七 JavaScript 基础_第3页
Web 前端开发技术 教案 项目七 JavaScript 基础_第4页
Web 前端开发技术 教案 项目七 JavaScript 基础_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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/javascript"language="javascript">JavaScript语句……</script><script>标记中的type和language属性可以省略不写。内嵌JavaScript代码可以位于HTML网页文件的任何位置。在同一个HTML网页文件中,允许在不同位置放入多段JavaScript代码。由于HTML内容和程序脚本分离的形式便于网页的维护,所以建议尽可能地将内嵌的JavaScript、函数写在<head>……</head>头部区域。三、外链式外链式是将所有的JavaScript代码放在一个或多个扩展名为.js的外部脚本文件中,通过<script>标记将这些文件进行引用,其基本语法格式如下。<scripttype="text/javascript"src="路径/js文件.js"></script>任务三JavaScript编程基础一、语法规则JavaScript程序是由若干条语句组成的,语句是编写程序的指令。一条语句由一个或多个表达式、关键字或运算符组成。作为一种脚本编程语言,JavaScript的基础语法规则对区分大小写、语句分隔符、注释、代码块、符号做出了说明。1.区分大小写JavaScript是一种严格区分大小写的语言。在JavaScript程序中,变量、函数、关键字等标识符都必须采取一致的大小写形式进行声明和使用。2.语句分隔符JavaScript程序中的语句可以使用分号进行分隔。如果语句没有使用分号结束,则JavaScript默认将语句后的换行符作为结束标志。这种默认的处理方式,有时会产生错误。因此建议养成良好的编程习惯,规范使用分号作为语句之间的分隔符。3.注释JavaScript程序中有单行注释和多行注释两种注释方式。单行注释以“//”开始,直到一行结束;多行注释以“/∗”开始,到“∗/”结束,可以跨行使用,包含多行注释内容,但不能嵌套使用。4.代码块在JavaScript中,代码块是一组在单个作用域内执行的语句。代码块可以用于创建局部变量,这些变量只在代码块内有效,且不会污染全局作用域。代码块是使用花括号“{}”定义的。5.符号JavaScript程序中的符号,如单引号、双引号、括号等,都必须是英文半角形式的符号,否则显示结果会出错。二、常用输出方式为了方便讲解代码和查看代码运行效果,需要先介绍JavaScript中的常用输出、输入方式。这些方式涉及的概念、语法及应用,在后面的项目中将进行详细介绍。JavaScript程序的运行结果,可以输出到提示框或网页文档中。常用的输出方式有警告提示框、document.writeln()方法和document.write()方法。1.警告提示框警告提示框用于显示提示信息以警告用户。警告提示框出现后,用户需要单击“确定”按钮才能继续运行后续代码,其基本语法格式如下。alert(提示内容);提示内容可以是字符串文本或变量。字符串文本要用引号括起来。2.document.writeln()方法document.writeln()方法用于向HTML页面写入内容并添加换行符,其基本语法格式如下。document.writeln(输出内容);3.document.write()方法document.write()方法用于向HTML页面写入内容,其基本语法格式如下。document.write(输出内容);三、常用输入方式在网页上输入数据,可以采用提示对话框或表单输入数据的方式。页面上输入的数据,都是字符串类型。1.提示对话框提示对话框用于提示用户输入数据。用户输入数据后,如果单击“确定”按钮,则返回输入的数据;如果单击“取消”按钮,则返回null值,其基本语法格式如下。prompt("提示文本","默认输入数据");2.表单输入数据在网页上用表单输入的数据,可以通过多种方法获得。这里介绍通过document文档对象层次结构方式访问表单元素数据的方法,其基本语法格式如下。document.表单名.元素名.value采用这种方法,需要先在表单及表单元素标记中定义name属性。任务四JavaScript数据与运算符一、数据类型数据类型是编程语言中的一个重要概念,它是一种机制,用来描述数据存储的格式、范围和操作方式。JavaScript中的数据类型可分为数值型(Number)、字符串型(String)、布尔型(Boolean)、空值型(Null)、未定义类型(Undefined)、对象类型(Object)6种类型。JavaScript是弱类型语言,因此在变量声明时无须指定变量的数据类型,只需要用var关键字声明即可。同时,JavaScript也是一种动态类型语言,在运行时可以根据需要改变和调整代码的行为,变量可以在需要时给其赋各种类型的值。1.数值型JavaScript中数值型数据包括整数和浮点数。整数支持十进制、八进制(以0开头)和十六进制(以0x开头)的数据表示形式。八进制和十六进制的数据,经JavaScript处理后转换为十进制形式。浮点数可以采用小数形式或科学记数法(数值e指数)形式。2.字符串型字符串型数据是用单引号(′′)或双引号("")括起来的字符组合。单引号括起来的字符串中可以包含双引号,双引号括起来的字符串中可以包含单引号,但是字符串中的引号不能和字符串的开始与结尾引号相同。字符串中的每个字符按位置从左到右依次编号,编号从0开始。在字符串型数据中,有一种称为转义字符的特殊字符。3.布尔型布尔型是一种只含有true和false这两个值的数据类型,通常来说,布尔型数据表示“真”或“假”。在实际应用中,布尔型数据常用在比较、逻辑等运算中,运算的结果往往就是true或false。例如,1<2的比较结果是true,而3==4的比较结果是false。此外,布尔型变量还常用在控制结构的语句中,如if语句等。在JavaScript中,通常采用true和false表示布尔型数据,但也可将它们转换为其他类型的数据。例如,可将值为true的布尔型数据转换为整数1,将值为false的布尔型数据转换为整数0。但不能用true表示1或用false表示0。4.空值型在JavaScript中,空值型是一种特殊的数据类型,也称为空类型,此类型只有一个值即null,表示“无值”,什么也不表示。null除了表示空值型数据,也可用在表示其他类型的数据中,如对象、数组和字符串等。当变量不再使用时,可将它赋值为null,以释放存储空间。5.未定义类型在JavaScript中,undefined也是一类特殊的值,它表示变量未定义或未赋值。当声明一个变量但未对它进行赋值时,它的值就是“undefined”。它与null值的不同之处在于:null值表示已经对变量赋值,只不过赋的值是“无值”;而undefined表示变量不存在或没有赋值。使用未定义的变量也会显示undefined,但通常会造成程序错误。6.对象类型对象类型是一种复合的、复杂的数据类型,是属性和方法的集合。属性用于描述对象的相关数据,而方法是对象中可以执行的动作。二、常量常量是给数据存储空间声明的一个标识符,程序中使用该标识符访问数据。在程序运行过程中,常量表示的值不能更改。JavaScript中的常量通常用const声明并赋值,其基本语法格式如下。const常量名=值;例如,下面的语句定义了常量x,并将其赋值为1。constx=1;三、变量变量是给数据存储空间声明的一个标识符,程序中使用该标识符访问数据。在程序运行过程中,变量存储的数据值可以改变。在使用变量时,JavaScript不仅可以自动完成数据类型的转换,也可以进行数据类型的强制转换。JavaScript中用var关键字声明变量。声明变量的同时可以使用赋值运算符“=”给变量赋值。变量声明的基本语法格式如下。var变量名;var变量名1,变量名2……;var变量名=值;JavaScript中变量可以不声明就直接使用。一个var关键字可以声明多个变量,用逗号分隔。同一语句声明的多个变量,可以存储不同类型的数据。如果只是声明了变量,但未对其赋值,则默认值是undefined。变量在使用过程中数据类型可以改变。四、运算符和表达式用运算符可以对一个或多个数据进行某种功能的操作,从而得到一个结果值。运算符运算的对象是操作数。运算符和操作数的组合称为表达式。JavaScript中的运算符分为赋值运算符、算术运算符、比较运算符、逻辑运算符、位运算符和条件运算符等。1.赋值运算符赋值运算符“=”可以将运算符右边的值赋给左边的变量、数组元素或对象属性。新赋的值会覆盖原有的值。赋值运算符可以为多个变量连续赋值。赋值运算符和操作数组成的表达式称为赋值语句。2.算术运算符算术运算符可以对数值型数据进行数学算术运算。算术运算符和操作数的组合是算术表达式,表达式结果就是算术运算的结果。其中,使用加法运算符“+”时,若操作数是数值型数据,则做加法运算;若操作数中有字符串,则做字符串的连接操作。算术运算符的操作数应该是数值型数据,其他类型的数据只有转换为数值型数据才能进行算术运算。完全由数字字符组成的字符串,可以自动转换为数值型数据进行运算。当操作数为布尔型数据时,true自动转换为数字1,false自动转换为数字0。若不能自动转换为数值型数据,则需要用强制类型转换方法转换为数值型数据后,才能进行算术运算,否则运算结果为NaN。3.比较运算符比较运算符用于比较运算符两端的值,确定两者的大小关系。比较运算符和操作数构成比较表达式。如果比较表达式关系成立,则结果为true;如果比较表达式关系不成立,则结果为false。数值型数据的比较,是按照数学中数据的大小进行比较的;字符串型数据的比较,是按照从左至右依次对相同位置字符的编码大小进行比较的。不同类型的数据比较,需要先进行类型转换,再进行同类型数据的比较。不同类型的数据比较规则如下。(1)如果字符串型数据和数值型数据比较,则将字符串型数据转换为数值型数据后再进行比较;如果字符串型数据不能正确转换为数值型数据,则结果为false。(2)如果操作数是布尔型数据,则将true转换为1,false转换为0后再进行比较。(3)如果一个操作数是对象,则将对象转换为另一个操作数的类型再进行比较。如果对象和对象比较,则必须引用的是同一个对象才相等,否则不相等。(4)null和undefined比较,结果相等;null和null比较,结果相等;undefined和undefined比较,结果相等;NaN和NaN比较,结果不相等。(5)全等于和非全等于运算符在比较时,既要对值进行比较,又要对数据类型进行比较。4.逻辑运算符逻辑运算符用于对

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论