学习目标
-[ ] 了解什么是JavaScript【了解】
-[ ] 掌握JavaScript的基础语法【掌握】
-[ ] 掌握JavaScript中函数的定义两种方式【重点】
-[ ] 掌握JavaScript中常用的事件【重点】
-[ ] 掌握JavaScript中BOM对象的常用方法【熟悉】
一、JavaScript概述
1、JavaScript是什么？
JavaScript 是互联网上最流行的脚本语言，广泛用于客户端（浏览器），用来给HTML网页增加 动态效果。
图-TIOBE开发语言排行榜
2、JavaScript语言的特点？
| 特点 | 说明 |
|---|---|
| 脚本语言 | 不需要编译，被调用的时候才被解释 |
| 给网页增加动态功能 | |
| 浏览器运行 | 浏览器的JavaScript引擎负责解释JavaScript代码 |
| “简单” | 数据类型，流程控制语句等与java很相似 |
3、JavaScript与Java的关系？
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为当时Netscape正在与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。
4、JavaScript的语法组成：
JavaScript语言由3部分组成，分别是：
| 组成部分 | 说明 |
|---|---|
| ECMAScript | JavaScript语言的基础语法 |
| BOM Broswer Object Model | 浏览器窗口相关对象 |
| DOM Document Object Model | html文档操作相关 |
- ECMAScript：JavaScript的基本语法；
1995年Netscape公司发布的Netscape Navigator 2.0中，发布了与Sun联合开发的JavaScript 1.0并且大获成功， 并且随后的3.0版本中发布了JavaScript1.1，恰巧这时微软进军浏览器市场，IE 3.0搭载了一个JavaScript的克隆版-JScript， 再加上Cenvi的ScriptEase（也是一种客户端脚本语言），导致了三种不同版本的客户端脚本语言同时存在。为了建立语言的标准化，1997年JavaScript 1.1作为草案提交给欧洲计算机制造商协会（ECMA），第三十九技术委员会（TC39）被委派来“标准化一个通用的，跨平台的，中立于厂商的脚本语言的语法和语意标准”。最后在Netscape、Sun、微软、Borland等公司的参与下制订了ECMA-262，该标准定义了叫做ECMAScript的全新脚本语言。【ES6】
从此以后的Javascript，JScript，ActionScript等脚本语言都是基于ECMAScript标准实现的。
所以，ECMAScript实际上是一种脚本在语法和语义上的标准。实际上JavaScript是由ECMAScript，DOM和BOM三者组成的。 所以说，在JavaScript，JScript和ActionScript中声明变量，操作数组等语法完全一样，因为它们都是ECMAScript。但是在操作浏览器对象等方面又有各自独特的方法，这些都是各自语言的扩展。
- BOM：浏览器对象模型
Brower Object Model 浏览器对象模型，主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退、浏览器弹出提示框、浏览器地址栏输入网址跳转等操作等；
- DOM：文档对象模型
Document Object Model 文档（html文件内容）对象模型，此处的文档暂且理解为html，html加载到浏览器的内存中，可以使用js的DOM技术对内存中的html节点进行修改，用户从浏览器看到的是js动态修改后页面；
5、JavaScript与Html的结合方式【重点】
在html文件中引入JavaScript有两种方式：内嵌式和外联式。
1.内嵌式：
直接在HTML文件中，书写<script>标签，这个标签体中可以直接书写JS代码。如下：
<script type="text/javascript">
//此处是JavaScript代码
</script>
2.外联式：
在html文档中，通过<script src=""> 标签的src属性引入外部的js文件，如下：
<script src="index.js" type="text/javascript">
//通过script标签的src属性引入外部的index.js文件
</script>
【注意】：
- 如果
<script>标签用作引入外部的js文件后，标签体就失效了； - 如果JS代码比较少，功能比较单一可以使用内嵌式，直接在html文件中书写JS代码；
- 如果JS代码比较多或者是有些通用的代码，建议把js代码抽取到一个独立的js文件中，使用外联的方式引入；
【练习一】JS与HTML结合方式
【参考代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
【需求】
页面加载完成之后弹出"Hello JavaScript" alert("")
【要求】
方式一：在当前页面编写JavaScript代码实现；
方式二：将代码编写到一个独立的JavaScript文件中；
JavaScript与HTML的结合方式
内嵌式：
<script> JS代码 </script>
外联式：
<script src="../js/demo1.js"></script>
特点：
1.同一个html页面可以书写多个<script>标签；
1. <script> JS代码 </script>可以书写在html的任意位置，建议书写在body下面；
2.通过script标签引入外部的js文件，script标签体中的内容失效；
3.浏览器从上往下解析js代码；
-->
<!--外联式：引入外部的js文件-->
<script src="../js/demo1.js"></script>
</head>
<body>
</body>
<!--内嵌式：直接在html页面书写-->
<script>
alert("Hello JavaScript");
</script>
</html>
【demo1.js代码】
alert("Hello JavaScript aaaaaaaaaaaaaaa");
二、JavaScript基本语法
1、变量
变量是一块内存区域，用来存储一个变化的量；
【变量声明】Java和JS中变量声明对比
| 数据类型 | Java中定义变量 | JS中定义变量 |
|---|---|---|
| 整数 | int i = 5; | var i = 5; |
| 小数 | double d = 3.14; | var d = 3.14; |
| 布尔 | boolean b = true; | var b = true; |
| 字符 | char c = ‘a’; | （js中没有字符，只有字符串） |
| 字符串 | String str = “hello”; | var str = “hello”;或 var str = ‘hello’; |
（1）变量声明：
格式：var 变量名；
（2）变量赋值：
格式：var 变量名 = “值”；
(3) 变量的命名规则：
- 变量名由字母，数字，下划线和$组成，不能以数字开头，如：var 2a；
- 变量名中不能包含空格；
- 不能将JavaScript的关键字用作变量名，如：var function;
- JavaScript的变量名区分大小写；
【注意事项】
-
关于JS的弱类型：
同一变量可以接受不同的数据类型；
-
JS中字符和字符串类型的说明：
JS中只有字符串类型，没有字符类型数据。单引号和双引号包裹的都是字符串；
-
变量定义的特点：
var关键字可以省略，但是不建议省略。如果省略了，这个变量就变为全局变量。
【练习二】变量声明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--mime type-->
<script type="text/javascript">
var i = 10;
alert(i);
var b = 3.14;
var h = "hello";
alert(b);
alert(h);
</script>
</head>
<body>
</body>
</html>
2、数据类型
JavaScript语言的数据类型分为：基本数据类型 和 引用数据类型 ；
(1) 基本数据类型：
JavaScript中常用的有5中基本数据类型，分别是：number，string，boolean，undefined，null；
| 数据类型 | 例子 | 备注 |
|---|---|---|
| 数值 | var a = 3;var b = 3.14; | 整数，小数 |
| 字符串 | var s1 = “hello”；var s2 = ‘hello’; | 被单引号或双引号包裹 |
| 布尔 | var f1 = true; var f2 = false; | true 或 false |
| 未定义类型 | var u1 ; | 变量未定义 |
| 空类型 | var n = null; | 对象的默认值 |
【判断基本数据类型的方法】 typeof（）；注意：不能判断null的基本类型；
【练习三】 基本数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
【需求】分别定义JS中不同类型的数据，并弹出各自的数据类型
number:数值型
string：字符串
boolean：布尔值
null：空类型
undefined：未定义类型
检测数据类型的方法：typeof
注意：JS中数据类型是根据所赋值确定的
-->
<script type="text/javascript">
//数值型 整数，小数
var a = 3;
var b = 3.14;
//字符串 单引号 和 双引号包裹
var c = "hello";
var d = 'w';
//alert(typeof(c))
//alert(typeof(d))
//boolean true,false
var e = true;
//alert(typeof(e))
//null
var f = null;
//alert(typeof(f))
//undefined 未定义类型
var g;
alert(typeof(g))
</script>
</head>
<body>
</body>
</html>
（2）引用数据类型（Object）：
Javascript中除了上面的基本类型(number,string,boolean,null,undefined)之外就是引用类型了，也可以说是就是对象了。JavaScript是一种基于对象的语言，内置了很多对象如：Array，Date、Math对象，这些对象将在下一次课中进行详细讲解。
3、运算符
JavaScript中的运算符与Java中的运算符基本一致；
JavScript中的运算符可分为：算术运算符，赋值运算符，比较运算符，逻辑运算符，三元运算；
- 算术运算符(y=5)：
| 算术运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| + | 加 | x=y+2; | x=7 |
| - | 减 | x=y-2 | x=3 |
| * | 乘 | x=y*2 | x=10 |
| / | 除 | x=y/2 | x=2.5 |
| % | 求余数 | x=y%2 | x=1 |
| ++ | 自增 | x=++y,z=y++ | x=6,z=6 |
| – | 自减 | x=–y,z=y– | x=4,z=4 |
- 比较运算符（x=5,y=10)
| 比较运算符 | 描述 | 例子 |
|---|---|---|
| == | 等于 | x8 为 false ； x"5"为true 【比较的是值】 |
| === | 全等于 | x=5为true ；x=“5” 为 false 【比较值和类型】 |
| ！= | 不等于 | x!=8 为 true【比较的是值】 |
| > | 大于 | x>8 为 false【比较的是值】 |
| < | 小于 | x<8 为 true【比较的是值】 |
| >= | 大于等于 | x>=8 为 false【比较的是值】 |
| <= | 小于等于 | x<=8 为 true【比较的是值】 |
- 逻辑运算符（x=10,y=5）
| 逻辑运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x<=10 && y>1) 结果为 true ；(x && y) 结果为 true |
| || | or | (x>10 || y>1)结果为true ； |
| ！ | not | ！(x==y) 结果为true ； |
【注意事项】
JS的逻辑运算符中没有& 和| 。
【练习】 逻辑运算符练习
//给x赋不同的值，带入以下逻辑判断语句观察结果：
//数值型：var x = 0;var x = 1;
//字符串：var x = "";var x = "hello";
//null类型：var x = null;
//undefined:var x;
if(x){
alert("结果为true.......");
}else{
alert("结果为false......");
}
【结论】
- &&两边同时为true，结果为true；
- ||只要有一边为true，结果为true；
- 在逻辑判断中以下情况为false：
| 数据类型 | 值 | 说明 |
|---|---|---|
| 数值型 | 0 | 0转化成boolean后为false |
| 字符串 | “”,’’ | 空字符串转化为boolean后为false |
| boolean | false | |
| null | null | null转化成boolean后为false |
| undefined | undefined | undefined转化成boolean后为false |
- 三元运算符
//判断一个数是正数还是负数
var x = 10;
var result = x>0?"正数":"负数";
【练习四】运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
/*
* 运算符：算术运算 比较运算 逻辑运算 三元运算
*
* 算术运算：+ - * / % ++ --
* 注意：+ 运算符既可以做加法运算 又可以拼接字符串
*
* 比较运算：> >= < <= == != ===
* 注意：
* 1.JS中的比较运算比较的是值，只有===既比较值又比较数据类型；
*
* 逻辑运算：&& || !
* 注意：
* 在JS中，逻辑判断时以下情形为false：
*
* 数值型：0 false
* 字符串："" false
* 布尔值：false false
* 空类型：null false
* 未定义类型：undefined false
*
* 三元运算：
*
三元运算：使用三元运算判断x是正数还是负数
* */
</script>
</html>
<!--
【案例一】算术运算符
使用以下数据完成相应的算术运算：
var x = 10;
var y = 5.5;
var z = "hello";
要求：
1.计算x+y,x+z;
2.分别计算x-y,x*y,x/y,x%y;
3.分别计算：x++,++x;
【案例二】比较运算符
使用以下数据完成比较运算：
var a = "5";
var b = 5;
要求：
1.分别使用"=="和"==="对a和b进行比较；
2.分别使用">="和"<="对a和b进行比较；
【案例三】逻辑运算符
使用以下数据完成逻辑运算：
var x = 10;
var y = 5;
var z = 0;
要求：
1.&&练习：判断下列表达式的结果
x<=10 && y>1
x>=10 && y>1
2.||练习：判断下列表达式的结果
x<=10 || y<1
x>=10 || y<1
3.注意事项：使用以下if语句判断
if(x){
alert("结果为true.......");
}else{
alert("结果为false......");
}
【需求】完成以下判断，观察结果
//1.数值：分别将x和z带入括号中
//2.字符串：分别把"传智播客"和""带入括号中
//3.null和undefined：分别把null和undefined带入括号中
4.三元运算：使用三元运算判断x是整数还是负数
-->
4、注释
JavaScript中的注释分为单行注释和多行注释 ：
【单行注释】：
<script type="text/javascript">
//我是单行注释
</script>
【多行注释】
<script type="text/javascript">
/*
* 我是多行注释
*/
</script>
【快捷键提示】 单行注释：Ctrl+/ 多行注释：Ctrl+Shift+/
5、流程控制语句
跟java一样，js也存在if、if-else、for、switch等逻辑语句，与java使用方式一致， 此处不再一一阐述。
【练习五】流程控制语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!--
【案例一】if语句练习：
使用if语句求出以下两个数中的较大者；
var x = 10;
var y = 5;
【案例二】for循环练习：
使用for循环遍历以下数组并打印其中的每一个元素；
var arr = [5,2,0,6,1,8];
-->
<script>
var x = 10;
var y = 5;
// if(x>y) {
// alert(x);
// }else {
// alert(y);
// }
var arr = [5,2,0,6,1,8];
for(var i = 0;i<arr.length;i++){
console.log(arr[i]); //System.out.println("")
}
</script>
</html>
三、JavaScript的函数【重点】
与Java中的函数一样，JavaScript中的函数也是为了实现某个功能的一块代码。
1、函数的定义方式：
【需求】求两个数的和；
（1）函数声明（命名函数）：
function sum(num1,num2){
return num1+num2;
}
（2）函数表达式（匿名函数）：
var sum = function(num1,num2){
return num1+num2;
};
【函数定义注意事项】
1、方法的返回值：无需声明返回值类型；
2、方法的入参：无需声明参数类型；
3、JavaScript中不存在函数重载，如果两个方法的方法名相同 ，后面的方法会覆盖前面的方法；
【练习六】函数定义
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!--
【回顾】回顾java中函数（方法）的定义方式，重载
public static int getSum(int i1,int i2){
return i1+i2;
}
public static int getSum(int i1,int i2,int i3){
return i1+i2;
}
【需求】定义一个方法，求取两个数值型数据的和
方式一：函数声明（定义） function 命名函数
function getSum(i1,i2){
return i1+i2;
}
方式二：函数表达式 匿名函数
var getSum2 = function(i1,i2){
return i1+i2;
}
注意事项：
1. js中定义函数不需考虑函数返回值和参数类型；
2. js中没有函数重载，只有函数的覆盖；
3. 函数调用只与方法名有关；
-->
<script>
//方式一：函数声明
function getSum1(i1, i2) {
return i1+i2;
}
//调用
var sum1 = getSum1(3,4);
alert(sum1);
//方式二：函数表达式
var getSum2 = function (i1, i2) {
return i1+i2;
};
var getSum2 = function (i1, i2,i3) {
return 5+9;
};
var sum2 = getSum2(5,6);
alert(sum2);
</script>
</html>
2、函数调用
函数调用方式：函数名（参数列表）;
如：
<script type="text/javascript">
//定义一个求两个数之和的方法
function sum(s1,s2) {
return s1+s2;
}
//调用方法
var result = sum(10, 5);
alert(result);
</script>
【函数调用注意事项】
1、函数必须先定义才能调用；
2、函数调用是根据方法名来调用的
【练习七】函数调用面试题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<!--
【面试题】判断运算结果
//函数一：求两个数的和
function funDemo(s1,s2) {
return s1+s2;
}
//函数二：求两个数的差
function funDemo(s1,s2,s3) {
return s1-s2;
}
//调用函数
var result = funDemo(10, 5);
alert(result);
-->
<script>
//函数一：求两个数的和
function funDemo(s1,s2) {
return s1+s2;
};
//函数二：求两个数的差
function funDemo(s1,s2,s3) {
return s1-s2;
};
//调用函数
var result = funDemo(10, 5);
alert(result);
</script>
</html>
四、JavaScript事件【重点】
1、什么是JavaScript事件
JavaScript提供的一套API，监听用户在浏览器上的操作（鼠标点击、提交注册表单，选中单选框。。。。），监听到用户操作之后，可以针对用户的操作，执行一些js代码。
2、常用的JavaScript事件：
| 事件名 | 描述 |
|---|---|
| onclick | 鼠标点击某个对象 |
| onload | 某个页面或图像被完成加载 |
| **onsubmit ** | 当表单提交时触发该事件—注意事件源是表单form |
| ondblclick | 鼠标双击某个对象 |
| onblur | 元素失去焦点（离焦事件） |
| onfocus | 元素获得焦点 |
| onchange | 用户改变域（input输入框）的内容 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或按住 |
| onkeyup | 某个键盘的键被松开 |
| onmousedown | 某个鼠标按键被按下 |
| onmouseup | 某个鼠标按键被松开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseout | 鼠标从某元素移开 |
| onmousemove | 鼠标被移动 |
3、事件的绑定
事件的绑定就是将事件绑定到页面的某个元素上；
【需求】
- 在页面上书写一个按钮；
- 点击按钮后弹出一个提示框，提示框中的内容为"Hello World!";
【步骤】：
- 确定要添加的事件的html元素—按钮（事件源）；
- 明确要添加什么事件；
- 给元素绑定事件；
- 书写事件要执行的具体内容（JavaScript代码）；
- 触发事件；
【事件绑定一】静态绑定
静态绑定是指：直接在标签上书写事件和这个事件被触发时要执行的函数；
<button onclick="clickBtn();">我是按钮，请点击我</button>
<script>
function clickBtn(){
alert("Hello World!");
}
</script>
【事件绑定二】动态绑定
动态绑定是指：先获取要绑定事件的对象，然后再给这个对象绑定事件；
<script>
document.getElementById("btn").onclick = function(){
alert("Hello World");
}
</script>
【知识点铺垫】
1.通过id动态获取标签对象：
var myBtn = document.getElementById("btn");
2.通过标签对象获取标签的value属性值：
var attrVal = document.getElementById("idVal").value;
【练习八】事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="singSong();">我是班长，点我，我会唱歌</button><br>
<button id="btn" >我是副班长，点我，我会跳舞</button><br>
</body>
<script>
/*
*【需求】分别使用静态绑定和动态绑定给button绑定事件
*
* 静态绑定：
* 1.把事件以属性的方式注册到标签上；
* 2.书写函数执行事件被触发后执行的功能；
*
* 动态绑定：
* 1.获取要添加事件的标签对象；
* 2.给标签对象派发事件；
* */
/*
* 静态绑定：
* */
function singSong() {
alert("我唱歌了。。。。。。。。。。。。。。。。。。。。")
}
/*
* 动态绑定
* */
document.getElementById("btn").onclick = function () {
alert("我跳舞了 哈哈哈哈哈");
};
</script>
</html>
【事件绑定总结】
- 静态绑定：js事件和html代码过于耦合；【事件注册】
- 动态绑定：js事件和html代码分离； 【事件派发】
- 开发过程中动态绑定事件使用得较多；
4、常用事件演示
（1）onload事件
【案例演示】onload事件应用场景演示
【需求】将派发事件的代码书写在<head> 标签之中；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript">
//1.动态获取按钮并将按钮绑定事件
document.getElementById("btn").onclick = function(){
alert("Hello World");
}
</script>
</head>
<body>
<button id="btn" >我是按钮，请点击我</button>
</div>
</body>
</html>
【分析】上述代码在浏览器加载的时候，要给btn按钮派发单击事件。但是当程序执行到第8行的时候，btn按钮并没有被加载，所以就获取不到btn按钮。
1、用法
onload事件是在某个页面被浏览器加载完成之后才触发的事件；
【练习九】onload事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//在页面完成之后执行
window.onload = function () {
document.getElementById("btn").onclick = function () {
alert("我跳舞了 哈哈哈哈哈");
};
};
</script>
</head>
<body>
<!--
【需求】将事件动态绑定案例中的代码挪到head标签中观察执行结果
-->
<button id="btn" >我是副班长，点我，我会跳舞</button><br>
</body>
</html>
2、【小结】
- 浏览器加载页面的顺序：从上到下；
- onload事件的应用场景：整个html页面加载完成之后，在执行js的操作（因为js操作中可能提前使用到html页面的标签）；
- onload事件最常用写法：
window.onload = function(){//方法体}；
(2) onblur事件
作用：
- onblur事件是一个监听鼠标光标离开的事件；
【应用场景】：
- 鼠标光标移开用户名输入框之后，检查用户名是否输入；
【练习十】onblur事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
用户名：<input type="text" name="userName" id="userName" /><br />
<input type="submit" value="提交订单" />
</form>
</body>
<script type="text/javascript">
/*
onblur事件：监听鼠标光标离开
* 【需求】校验用户名
* 【要求】鼠标光标移开用户名输入框之后，检查用户名是否输入；
* */
//动态获取标签对象：userName
document.getElementById("userName").onblur = function (ev) {
//检查用户名是否输入：判断userName是否有值 === value值
var userName = document.getElementById("userName").value;
if(userName == ""){
alert("请求输入用户名！");
}
}
</script>
</html>
(3) onchange事件
作用：
onchange事件用于监听表单中输入的内容有没有改变，如有改变则onchange事件被触发；
【应用场景】：
- 修改商品数量后自动计算出商品总价；
- 提示：
- 获取某个标签对象：
var inputObj = document.getElementById("idVal"); - 获取这个标签对象的value值：
var inputObjValue = inputObj.value;； - 给这个标签对象赋value值：
inputObj.value = "值";
- 获取某个标签对象：
【练习十一】onchange事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
商品单价：<input value="10" id="proPrice" />
*商品件数：<input type="text" id="num" onchange="calculateTotalPrice(this.value);"/>
=商品总价：
<input type="text" id="totalPrice" /><br />
<input type="submit" value="提交订单" />
</form>
</body>
<script type="text/javascript">
//【需求】根据商品件数动态计算商品总价
/*
* oncahage：监听内容改变
* */
//当商品件数改变，计算总价
function calculateTotalPrice(num) {
//总价 = 单价*件数；
var totalPrice = 10*num;
//给商品总价赋值
document.getElementById("totalPrice").value = totalPrice;
}
</script>
</html>
(4) onsubmit事件
作用：监听用户提交表单的操作；
【演示】演示onsubmit事件是怎么阻止表单提交的
- 方式一：给form表单静态绑定onsubmit事件；
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" onsubmit="return checkForm();">
用户名：<input type="text" name="username" id="uName"/><br />
密码：<input type="password" name="pwd" id="pwd"/><br />
<input type="submit" value="注册" />
</form>
</body>
<script type="text/javascript">
//注册表单校验
function checkForm(){
/*
* return true:表单能够正常提交
* return false:能够阻止表单提交
*/
//return true;
return false;
}
</script>
</html>
- 方式二：给form表单动态绑定onsubmit事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" id="registFrom">
用户名：<input type="text" name="username" id="uName"/><br />
密码：<input type="password" name="pwd" id="pwd"/><br />
<input type="submit" value="注册" />
</form>
</body>
<script type="text/javascript">
document.getElementById("registFrom").onsubmit = function(){
//return true:表单提交
//return false:表单被阻止提交
//return true;
return false;
}
</script>
</html>
【结论】
- onsubmit方法的返回值为true，表单能够正常提交；返回值为false 表单提交被阻止；
- onsubmit方法注册到form标签上的时候，前面需要加return；
【综合案例】注册表单校验案例
【需求】
-
给表单绑定提交事件；
-
对表单中的用户名和密码进行非空校验，校验不通过阻止表单提交；
【示例代码】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" id="registFrom">
用户名：<input type="text" name="username" id="uName"/><br />
密码：<input type="password" name="pwd" id="pwd"/><br />
<input type="submit" value="注册" />
</form>
</body>
<script>
/*
* 【需求】注册表单校验
* 【要求】
* 1.在用户名和密码都输入的情况下表单才能被提交；
* */
//动态给form标签 绑定onsubmit
document.getElementById("registFrom").onsubmit = function () {
//动态获取用户名和密码 的value值
var userName = document.getElementById("uName").value;
var pwd = document.getElementById("pwd").value;
// !"" && !""
if(userName == "" || pwd == ""){
return false;
}else{
return true;
}
//onsubmit事件中
//return true; 表单正常提交
//return false; 阻止表单提交
};
</script>
</html>
五、BOM对象
1、BOM对象是什么？browser object model
-
BOM是Browser Object Model的缩写，简称浏览器对象模型；
-
BOM提供了独立于内容而与浏览器窗口进行交互的对象；
-
BOM由一系列相关的对象构 成，并且每个对象都提供了很多方法与属性；
2、BOM对象有哪些？
| BOM对象 | 说明 |
|---|---|
| Window对象 | 表示一个浏览器窗口或一个框架 |
| Location对象 | 包含了当前地址栏对象 |
| History对象 | 包含了访问过的历史信息 |
| Navigator对象 | 包含了客户端浏览器的信息 |
| Screen对象 | 包含了客户端显示屏的信息 |
3、BOM对象详解
（1）Window对象
Window 对象表示浏览器中打开的窗口。
Window对象—消息框
| 方法 | 使用示例 | 效果 | 方法返回值 |
|---|---|---|---|
| alert(arg) | alert（“Hello”） |  | 无 |
| confirm(arg) | var f = confirm(“确定要删除吗”)； |  | 点击确定 返回true；点击 取消 返回false； |
| prompt(arg) | var value = prompt(“请输入密码”); |  | 点击确定 返回输入的内容；点击 取消 返回null； |
【练习十二】消息框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script>
/*
* 【需求】演示window对象的消息框
* 1.警告框；alert();
* 2.输入框；prompt();
* 3.确认框；confirm();
* */
// alert("hello");
// var num = prompt("请输入银行卡号");
// console.log(num);
var confirmFlag = confirm("确定要删除吗？");
if(confirmFlag) {
//确定要删除
console.log("删除了.............");
};
</script>
</html>
Window对象—定时器
| 方法 | 参数说明 |
|---|---|
| setTimeout(code,millisec) | 在指定时间（毫秒值）后执行一次 |
| clearTimeout(id_of_settimeout) | 清除setTimeout（）方法 |
| setInterval(code,millisec); | 按照指定时间，周期性地执行 |
| clearInterval(ID) | 清除周期性执行的方法 |
**【练习十三】**定时炸弹 —setTimdout(fn,mills);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button onclick="boom();">点我，我会爆炸</button>
</body>
<script>
/*
定时器：
1.定时炸弹；
setTimeout(fn,milliseconds);
2.周期性执行的函数；
setInterval(fn,milliseconds);
* 【需求】使用setTimeout()方法模拟定时炸弹
* */
function boom() {
//定时执行 爆炸
// setTimeout(function () {
// alert("我爆炸了..........")
// },3000);
var timeout = setTimeout("baoZha();", 3000);
clearTimeout(timeout);
}
function baoZha() {
alert("我爆炸了.....................")
}
</script>
</html>
**【练习十四】**轮播图 —setInterval(fn,mills);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div >
<img width="100%" id="img" src="../img/3.jpg"/>
</div>
</body>
<script>
/*
* 【需求】使用setInterval(fn,millisecond)完成轮播图案例
* */
setInterval("changeImg();",2000);
//改变图片 src属性
var count = 1;
function changeImg() {
if(count>3) {
count = 1;
}
document.getElementById("img").src = "../img/"+count+".jpg";
count++;
}
</script>
</html>
Window对象—全局函数
| 方法 | 说明 | 使用示例 | 结果 |
|---|---|---|---|
| parseInt(string) | 将string类型的数字转换成整数 | var i = parseInt(“34”); | i = 34 |
| parseFloat(string) | 将string类型的数字转换成小数 | var i = parseFloat(“3.14”) | i = 3.14 |
| isNaN(value) | 判断value是否非数字 | var f 1 = isNaN(3); var f2 = isNaN(“A”); | f1=false;f2=true; |
| eval(string) | 将字符串解析成JavaScript代码 | eval(“var x=10;var y=20;alert(x*y)”); | 弹出警告框，内容为200 |
【需求一】现在有个一字符串类型的数字var a = “5”，要求求取a+10后的结果；
（2）Location对象
Location对象包含了当前URL的信息；
Location对象—常用属性：
| 属性 | 描述 |
|---|---|
| href | 获取或者设置当前的URL |
【使用示例】
获取当前的URL：location.href ；
将当前的URL设置成"http://www.baidu.com"：
location.href = “http://www.baidu.com”；
Location对象—常用方法
| 属性 | 描述 |
|---|---|
| reload（） | 重新加载当前页面 |
（3）History对象
History对象包含了用户（在浏览器中）访问过的URL.
History对象—常用方法
| 方法 | 说明 | 参数说明 |
|---|---|---|
| back() | 加载 history 列表中的前一个 URL | |
| forward() | 加载 history 列表中的下一个 URL | |
| go() | 加载 history 列表中的某个具体页面 | go(-1)：访问上一个页面；go(1)：访问下一个页面； |
六、总结
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
