第1章 JavaScript基本语法(理论)
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第一章 JavaScript基本语法 基本语法
课程地位
课程目标
学习内容
JavaScript基本语法 函数与事件处理 文档对象模型（DOM) JavaScript表单验证 JavaScript页面特效
学习目标
使用JavaScript实现客户端验证 使用JavaScript实现页面特效
实战项目
阶段项目：51Job招聘专版 综合项目：游戏点卡销售系统
算术运算符
+、-、 * 、 / 、%、++、-比较运算符
==、!=、>、>=、<、<=
逻辑运算符
&&、||、！
2.5 注释
JavaScript 注释有两种 单行注释 多行注释
//声明一个整型变量a,值为10 var i=10;
多行注释 跨多行
/* 比较两个数值大小的函数 参数num1:第一个操作数 参数num2:第二个操作数 返回值：两个数中最大的一个 */ function max(num1,num2) { return num1>num2?num1:num2; }
1.3 使用JavaScript脚本 使用 脚本
使用外部JavaScript文件 外部js文件
document.write("欢迎使用 欢迎使用javascript编程世界 编程世界"); 欢迎使用 编程世界
<html> 使用script标签 <head> 引入外部js文件 <title>JavaScript脚本语言</title> <script language="javascript" src="example1.js"></script> </head> <body> <p>网页主体内容</p> </body> </html>
var variableName[=value];
<script language="javascript"> var num=10; var name=“javascript”;//声明一个变量并赋值 var x, y, z = 10;//同时声明多个变量 </script>
2.2 变量和常量
变量的命名需要遵守一定的规范，主要有以下几点
3. 函数与事件
函数是指一段需要重复使用的代码的集合
加、减、乘、除 功能运算
3.1 函数的定义与调用
function {
函数名
(参数列表)
函数代码块; return 表达式; }
函数调用 函数名(实参 实参2…) ; 实参1,实参 函数名 实参 实参 var 变量名 函数名 实参 实参 变量名=函数名 实参1,实参 函数名(实参 实参2…);
这里会 弹出什么？
3.3 事件处理
JavaScript是基于对象的语言，基于对象的基本特征就是采用事件驱动 通常鼠标或按钮在浏览器窗口或网页上执行的操作
3.3 事件处理
function 事件处理程序名(参数表) { 事件处理语句集: …… }
函数调用 事件名称=事件处理程序名称;
<input type="button" value="计算" onclick="showResult();"/>
3.2 变量的作用域
根据变量的作用范围，JavaScript中的变量可以分为全局变量和局部变量
<script language="javascript"> var name = "jack"; //定义全局变量name function<script language="javascript"> check(){ alert( name ); //这里会弹出jack function checkField (){ } var name = “jack”; //定义局部变量name check(); <script language="javascript"> alert( name ); //这里会弹出jack alert( name ); //这里会弹出jack var name="andy"; } </script> { checkField (); alert( name ); </script> var name="jack"; //这里不会弹出任何内容 } alert(name); </script>
3.3 事件处理
制作一个网页，实现简单计算器的功能
实现思路 将运算符作为函数的参数传入，在函数中使用switch语句 对运算符进行判断，并做出相应的操作 最后将操作结果显示到结果文本框中
3.3 事件处理
<script language="javascript"> <body> function cal(op) 第一个数： { <input type="text" name="num1" size="5" /> var num1=parseInt(document.all.num1.value); <p>第二个数： var num2=parseInt(document.all.num2.value); <input type="text" name="num2" size="5"/> var result; </p> switch(op) <p> { <input name="button" type="button" onclick="cal(this.value);" value="+"/> case '+': <input name="button2" type="button" onclick="cal(this.value);" value="-"/> <input name="button3" type="button" onclick="cal(this.value);" value="*"/> result=num1+num2; <input name="button4" type="button" onclick="cal(this.value);" value="/"/> break; case '-': </p> result=num1-num2; <p>结果： break; <input type="text" name="result" size="5"/> case '*': </p> result=num1*num2; <p> </p> break; </body> case '/': result=num1/num2; break; } document.all.result.value=result; } </script>
1. JavaScript概述 概述
HTML语言是一种标记语言，用于定义页面内容和表现形式，不具备逻 辑性，不能与用户进行交互 输入电子邮件 的格式不正确
Jack.163.com
1.1 什么是脚本语言
脚本语言是HTML文档中嵌入一种具有程序逻辑的语言，用于控制页面 元素的行为，实现数据合法性验证
while(测试条件) { 语句2; 循环语句; } break; default: do{ 其它语句; 循环语句; } }while(测试条件);
教员演示控制语句的用法
2.6 流程控制语句
break 和 continue 语句
break 语句来中断一个循环的运行。continue 语句用来跳过余下的代码 语句来中断一个循环的运行。 块而直接转到下一次循环继续执行 … <script type="text/javascript"> // //这段 Javascript 代码用来输出1到10之间的奇数。 1 10 var x ; for (x=1; x<100; x++) { if(x==10) break; if (x%2==0) continue;//跳过剩余代码，转入下一次循环 document.write (x + "<br>"); } </script> …
例如 "abc" "jack "
Null类型
只有一个值，即null。Null是一个位符，表示一个变量已经有值，但值为空
Boolean类型 Boolean
布尔类型只取两个值true或false
空字符串“”和null有何区别？举例说明。
2.2 变量和常量
变量的主要作用是存取数据、提供存放信息的容器。程序可以使用变量 名来访问变量中的数据
单行注释 不能换行
2.6 流程控制语句
if条件语句
if (condition) switch(n) switch多分支语句 { { statement1; case 常量1: for、while、do…while循环语句 } for (初始化; 测试条件; 改变量) else { 语句1; { 循环语句; statement2; break } } case 常量2:
变量名由字母、数字、下划线和$组成 变量名的首字母必须是字母、$或下划线 不能使用JavaScript 保留字，注意区分大小写
找出下面列举的变量中错误的名称，并说明理由
Student_name Book book
n$
123abc
name? check-form
2.2 变量和常量
JavaScript的常量通常又称字面常量，它是不能改变的数据，与基本的 数据类型同对应，有以下几种常量。
显示错误 信息
1.2 JavaScript简介 简介
JavaScript是一种由Netscape的 LiveScript发展而来的脚本语言 JavaScript是一种基于对象和事件驱动的脚本语言，它提供了一些专有 的类、对象及函数
客户端请求含JS的页面 客户端请求含 的页面 请求 IE
解析HTML标签和 JavaScript脚本
优点
减轻服务器压力 书写简单、易学 增强用户体验
缺点
不安全 标准不统一 不能做复杂、或安全要求较高的处理
1.3 使用JavaScript脚本 使用 脚本
使用<script></script>标签直接嵌入在HTML中
<html> <head> <title>JavaScript脚本语言 脚本语言</title> 脚本语言 <script language="javascript"> document.write("欢迎使用 欢迎使用javascript编程世界 编程世界"); 欢迎使用 编程世界 </script> </head> <body> <p>网页主体内容 网页主体内容</p> 网页主体内容 </body> </html>
外部JavaScript文件的扩展名为.js
2.基本语法 基本语法
2.1 基本数据类型 JavaScript提供了4种基本的数据类型用来处理数字和文字
Number
String
基本数据类型 Null Boolean
2.1 基本数据类型
Number类型
例如: 15 2.9 4E5 ""
String类型
输入
响应 从服务器端下载含JavaScript的页面 的页面 从服务器端下载含
什么是JavaScript语言 什么是 语言
严重误区
Java与JavaScript完全不同
工作原理
浏览器解释执行（所以：无需安装虚拟机）
特点
各种浏览器解析方式不同 弱类型语言 灵活易操作
什么是JavaScript语言 什么是 语言
整型常量 实型常量 布尔值 字符型常量 空值(null) undefined常量
15
1.5
true false
“hello ,my name is javascript“ null 345 “undefinded"
演示空值和unቤተ መጻሕፍቲ ባይዱefined常量的区别
Null和undefined 和
null表示变量尚未赋值，在次环境下会使用
本章内容
JavaScript 概述 变量与数据类型 运算符 函数与事件
本章目标
了解JavaScript语言的特点及作用 熟练掌握JavaScript语言的基本语法 学会使用函数完成常用事件的处理
内容回顾
XHTML与HTML的区别 XHTML标签分为两大类：块状标签和行内标签 盒子模型相关属性：margin、padding 布局模型分为：流动模型、浮动模型、层模型 常用的布局：单行一列、单行两列、单行三列、上－中－下 CSS Sprites是一种背景图像整合技术，可以有效地减少对服务器的请求 Sprites 滑动门技术是利用两张背景图像重叠原理达到背景随内容自适应的技术 页面导航分为：横向导航、纵向导航、下拉式导航
parseInt (String)
将字符串转换为整型数字 如：parseInt (“123")将字符串“123”转换为整型值123
parseFloat(String)
将字符串转换为浮点型数字 如: parseFloat (“5.45")将字符串“5.45”转换为浮点值5.45
2.4 运算符
运算符是一种特殊符号，用于实现数据之间的运算、赋值和比较等功能 根据运算符的功能，可分为以下几种：
表示变量存在，但不需要赋值 作为函数返回值，表示没有可以返回的值
undefined类型是一个常量，它只有一个值，即 “undefined”。与Null比较，则无需定义变量，可 以用undefined直接检查代码。
全等号(“===”), 比较时类型不自动转换，而”==”则比较时类型自动转换。
2.3 类型转换
3.1 函数的定义与调用
<script language="javascript"> //定义求两数之和的函数 function add(num1,num2) { return num1+num2; } //调用求两数之和的函数 var result=add(10,20); document.write("10+20的和是:"+result); </script>
课程地位
课程目标
学习内容
JavaScript基本语法 函数与事件处理 文档对象模型（DOM) JavaScript表单验证 JavaScript页面特效
学习目标
使用JavaScript实现客户端验证 使用JavaScript实现页面特效
实战项目
阶段项目：51Job招聘专版 综合项目：游戏点卡销售系统
算术运算符
+、-、 * 、 / 、%、++、-比较运算符
==、!=、>、>=、<、<=
逻辑运算符
&&、||、！
2.5 注释
JavaScript 注释有两种 单行注释 多行注释
//声明一个整型变量a,值为10 var i=10;
多行注释 跨多行
/* 比较两个数值大小的函数 参数num1:第一个操作数 参数num2:第二个操作数 返回值：两个数中最大的一个 */ function max(num1,num2) { return num1>num2?num1:num2; }
1.3 使用JavaScript脚本 使用 脚本
使用外部JavaScript文件 外部js文件
document.write("欢迎使用 欢迎使用javascript编程世界 编程世界"); 欢迎使用 编程世界
<html> 使用script标签 <head> 引入外部js文件 <title>JavaScript脚本语言</title> <script language="javascript" src="example1.js"></script> </head> <body> <p>网页主体内容</p> </body> </html>
var variableName[=value];
<script language="javascript"> var num=10; var name=“javascript”;//声明一个变量并赋值 var x, y, z = 10;//同时声明多个变量 </script>
2.2 变量和常量
变量的命名需要遵守一定的规范，主要有以下几点
3. 函数与事件
函数是指一段需要重复使用的代码的集合
加、减、乘、除 功能运算
3.1 函数的定义与调用
function {
函数名
(参数列表)
函数代码块; return 表达式; }
函数调用 函数名(实参 实参2…) ; 实参1,实参 函数名 实参 实参 var 变量名 函数名 实参 实参 变量名=函数名 实参1,实参 函数名(实参 实参2…);
这里会 弹出什么？
3.3 事件处理
JavaScript是基于对象的语言，基于对象的基本特征就是采用事件驱动 通常鼠标或按钮在浏览器窗口或网页上执行的操作
3.3 事件处理
function 事件处理程序名(参数表) { 事件处理语句集: …… }
函数调用 事件名称=事件处理程序名称;
<input type="button" value="计算" onclick="showResult();"/>
3.2 变量的作用域
根据变量的作用范围，JavaScript中的变量可以分为全局变量和局部变量
<script language="javascript"> var name = "jack"; //定义全局变量name function<script language="javascript"> check(){ alert( name ); //这里会弹出jack function checkField (){ } var name = “jack”; //定义局部变量name check(); <script language="javascript"> alert( name ); //这里会弹出jack alert( name ); //这里会弹出jack var name="andy"; } </script> { checkField (); alert( name ); </script> var name="jack"; //这里不会弹出任何内容 } alert(name); </script>
3.3 事件处理
制作一个网页，实现简单计算器的功能
实现思路 将运算符作为函数的参数传入，在函数中使用switch语句 对运算符进行判断，并做出相应的操作 最后将操作结果显示到结果文本框中
3.3 事件处理
<script language="javascript"> <body> function cal(op) 第一个数： { <input type="text" name="num1" size="5" /> var num1=parseInt(document.all.num1.value); <p>第二个数： var num2=parseInt(document.all.num2.value); <input type="text" name="num2" size="5"/> var result; </p> switch(op) <p> { <input name="button" type="button" onclick="cal(this.value);" value="+"/> case '+': <input name="button2" type="button" onclick="cal(this.value);" value="-"/> <input name="button3" type="button" onclick="cal(this.value);" value="*"/> result=num1+num2; <input name="button4" type="button" onclick="cal(this.value);" value="/"/> break; case '-': </p> result=num1-num2; <p>结果： break; <input type="text" name="result" size="5"/> case '*': </p> result=num1*num2; <p> </p> break; </body> case '/': result=num1/num2; break; } document.all.result.value=result; } </script>
1. JavaScript概述 概述
HTML语言是一种标记语言，用于定义页面内容和表现形式，不具备逻 辑性，不能与用户进行交互 输入电子邮件 的格式不正确
Jack.163.com
1.1 什么是脚本语言
脚本语言是HTML文档中嵌入一种具有程序逻辑的语言，用于控制页面 元素的行为，实现数据合法性验证
while(测试条件) { 语句2; 循环语句; } break; default: do{ 其它语句; 循环语句; } }while(测试条件);
教员演示控制语句的用法
2.6 流程控制语句
break 和 continue 语句
break 语句来中断一个循环的运行。continue 语句用来跳过余下的代码 语句来中断一个循环的运行。 块而直接转到下一次循环继续执行 … <script type="text/javascript"> // //这段 Javascript 代码用来输出1到10之间的奇数。 1 10 var x ; for (x=1; x<100; x++) { if(x==10) break; if (x%2==0) continue;//跳过剩余代码，转入下一次循环 document.write (x + "<br>"); } </script> …
例如 "abc" "jack "
Null类型
只有一个值，即null。Null是一个位符，表示一个变量已经有值，但值为空
Boolean类型 Boolean
布尔类型只取两个值true或false
空字符串“”和null有何区别？举例说明。
2.2 变量和常量
变量的主要作用是存取数据、提供存放信息的容器。程序可以使用变量 名来访问变量中的数据
单行注释 不能换行
2.6 流程控制语句
if条件语句
if (condition) switch(n) switch多分支语句 { { statement1; case 常量1: for、while、do…while循环语句 } for (初始化; 测试条件; 改变量) else { 语句1; { 循环语句; statement2; break } } case 常量2:
变量名由字母、数字、下划线和$组成 变量名的首字母必须是字母、$或下划线 不能使用JavaScript 保留字，注意区分大小写
找出下面列举的变量中错误的名称，并说明理由
Student_name Book book
n$
123abc
name? check-form
2.2 变量和常量
JavaScript的常量通常又称字面常量，它是不能改变的数据，与基本的 数据类型同对应，有以下几种常量。
显示错误 信息
1.2 JavaScript简介 简介
JavaScript是一种由Netscape的 LiveScript发展而来的脚本语言 JavaScript是一种基于对象和事件驱动的脚本语言，它提供了一些专有 的类、对象及函数
客户端请求含JS的页面 客户端请求含 的页面 请求 IE
解析HTML标签和 JavaScript脚本
优点
减轻服务器压力 书写简单、易学 增强用户体验
缺点
不安全 标准不统一 不能做复杂、或安全要求较高的处理
1.3 使用JavaScript脚本 使用 脚本
使用<script></script>标签直接嵌入在HTML中
<html> <head> <title>JavaScript脚本语言 脚本语言</title> 脚本语言 <script language="javascript"> document.write("欢迎使用 欢迎使用javascript编程世界 编程世界"); 欢迎使用 编程世界 </script> </head> <body> <p>网页主体内容 网页主体内容</p> 网页主体内容 </body> </html>
外部JavaScript文件的扩展名为.js
2.基本语法 基本语法
2.1 基本数据类型 JavaScript提供了4种基本的数据类型用来处理数字和文字
Number
String
基本数据类型 Null Boolean
2.1 基本数据类型
Number类型
例如: 15 2.9 4E5 ""
String类型
输入
响应 从服务器端下载含JavaScript的页面 的页面 从服务器端下载含
什么是JavaScript语言 什么是 语言
严重误区
Java与JavaScript完全不同
工作原理
浏览器解释执行（所以：无需安装虚拟机）
特点
各种浏览器解析方式不同 弱类型语言 灵活易操作
什么是JavaScript语言 什么是 语言
整型常量 实型常量 布尔值 字符型常量 空值(null) undefined常量
15
1.5
true false
“hello ,my name is javascript“ null 345 “undefinded"
演示空值和unቤተ መጻሕፍቲ ባይዱefined常量的区别
Null和undefined 和
null表示变量尚未赋值，在次环境下会使用
本章内容
JavaScript 概述 变量与数据类型 运算符 函数与事件
本章目标
了解JavaScript语言的特点及作用 熟练掌握JavaScript语言的基本语法 学会使用函数完成常用事件的处理
内容回顾
XHTML与HTML的区别 XHTML标签分为两大类：块状标签和行内标签 盒子模型相关属性：margin、padding 布局模型分为：流动模型、浮动模型、层模型 常用的布局：单行一列、单行两列、单行三列、上－中－下 CSS Sprites是一种背景图像整合技术，可以有效地减少对服务器的请求 Sprites 滑动门技术是利用两张背景图像重叠原理达到背景随内容自适应的技术 页面导航分为：横向导航、纵向导航、下拉式导航
parseInt (String)
将字符串转换为整型数字 如：parseInt (“123")将字符串“123”转换为整型值123
parseFloat(String)
将字符串转换为浮点型数字 如: parseFloat (“5.45")将字符串“5.45”转换为浮点值5.45
2.4 运算符
运算符是一种特殊符号，用于实现数据之间的运算、赋值和比较等功能 根据运算符的功能，可分为以下几种：
表示变量存在，但不需要赋值 作为函数返回值，表示没有可以返回的值
undefined类型是一个常量，它只有一个值，即 “undefined”。与Null比较，则无需定义变量，可 以用undefined直接检查代码。
全等号(“===”), 比较时类型不自动转换，而”==”则比较时类型自动转换。
2.3 类型转换
3.1 函数的定义与调用
<script language="javascript"> //定义求两数之和的函数 function add(num1,num2) { return num1+num2; } //调用求两数之和的函数 var result=add(10,20); document.write("10+20的和是:"+result); </script>