Day03 JavaScript入门

课前回顾

一、JavaScript基本介绍

1、JavaScript简介

JavaScript（简称JS），是一种具有函数优先的轻量级，解释型或即时编译型动态脚本语言，已经被广泛应用于Web应用开发，通常用来为网页添加各种各样的动态功能，为用户提供更流畅更美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身功能的。

JavaScript在发布之前的名称其实是LiveScript，在发布前夕，恰好遇到刚发布不久的Java语言大火。为了蹭一波热度，就改名为JavaScript。但是本质上这两种语言没有任何关系。

作用：JavaScript可以通过事件操作HTML元素、读写元素内容、验证和提交数据、校验浏览器信息等，同时JavaScript可以在HTML页面中添加动画效果，增强用户体验。

2、JavaScript组成

ECMAScript：(ECMA标准)JS的基础语法部分（数据类型、变量、运算符、函数、方法、事件等）
DOM：（Document Object Model）文档对象模型。通过HTMLDOM提供一组API接口，实现对页面元素的动态操作。document
BOM：（Browser Object Model）浏览器对象模型，主要用来操作浏览器信息。window

3、JavaScript引入方式

JavaScript有三种引入方式，和CSS引入方式相似，分为行内式、内嵌式、外链式。下面我们来介绍一下这三种引入方式：

3.1、行内式

直接在HTML标签中编写JS代码

案例：

<input type="button" value="点我呀" onclick="alert('hello.js')" />

3.2、内嵌式

在HTML页面中通过script标签定义js代码，script标签可以写在HTML页面的任何部分。同时，一个HTML页面中，可以定义多个script标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			// JS code
		</script>
	</head>
	<body>
		<script type="text/javascript">
			// JS code
		</script>
	</body>
	<script type="text/javascript">
		// JS code
	</script>
</html>

3.3、外链式

外链式是单独定义脚本文件（*.js），再将这个脚本文件通过script标签的src属性引入到html页面中，一个页面中可以引入多个外部js文件。

<script src="url"></script>
<script src="path/fileName"></script>

注意：引用外部JS文件的script标签内不能再写自定义的JavaScript代码。

二、ECMAScript

1、注释

JavaScript中的注释只拥有单行注释和多行注释两种，用法和Java中的单行注释和多行注释一致。

语法：

//单行注释

/*
多行注释
*/

2、变量

由于JS是一种弱类型的语言，所以与Java语言声明变量的语法格式有区别，它使用var关键字来声明变量。而不指定具体的数据类型。并且使用var声明的变量可以存储任意数据类型。

语法：

var 变量名; 
或者
var 变量名 = 值;

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		// 先声明后赋值
		var age;
		age = 20;
		
		// 控制台输出
		window.console.log(age);
		
		// 弹窗输出
		window.alert(age);
		
		//存储其他类型的值
		age = "张瑞丰";
		
		//测试
		alert(age);
	</script>
</html>

3、数据类型

JS数据类型分为两大类型：基本数据类型引用数据类型

3.1、基本数据类型

Undefined：值只有一个undefined，当我们定义了一个变量没有赋值时，其默认值为undefined
Number：数值类型，JS中无论是整数还是小数，统称为数字类型
Boolean：布尔类型，其值只有true false
String：字符串类型，赋值时可以使用单引号或者双引号

案例：

		//undefined类型
		var varUndefined;
		console.log('varUndefined:' + varUndefined + ' >type：' + typeof(varUndefined));
		
		//浮点数和整数
		var varInt = 100;
		var varFloat = 3.1415926;
		console.log('varInt:' + varInt);
		console.log('varFloat:' + varFloat);
		
		//布尔类型
		var varBoolean = true;
		console.log('varBoolean：' + varBoolean);
		
		//字符串类型
		var varStringSingle = '千山鸟飞绝';
		var varStringDouble = "万径人踪灭";
		console.log(varStringSingle + varStringDouble);

注意：查看变量类型：typeof(变量名)

3.2、引用数据类型

数组：和java中的数组不同，JS中数组可以存储不同类型的元素。

    //创建并且初始化数组：
	var 数组名称 = [值1，值2，值3，值4];	//值可以是不同的数据类型
	//创建并且初始化数组长度
	var 数组名称 = new Array(len);
	//创建并初始化一个二维数组
	var 数组名称 = [[1,2],[3,4]];

	//案例代码：
    var arr = [1,'3',true,3.14];	//数组的创建
    console.log(arr);

类：存储多个键值对，类似于Java中的类，无需使用new关键字创建。

    //语法：
	var 对象名 = {属性=值1,属性2=值2};
	
	//案例代码：
    var person = {age:18, name:"Gates"};    // 对象的创建
    console.log(person);

Null：只有一个取值null，undefined实际是null派生而来，因此在ECMAScript中将其列为等值，即null==undefined为true

    //空值
    var varNull = null;
    console.log('varNull:' + null + ' >type：' + typeof(varNull));

4、运算符

赋值运算符：= += -= *= /=
算数运算符：+ - * / % ++ --
关系运算符（比较运算符）：> < >= <= != == ===
逻辑运算符：&& || !
三目（条件）运算符：?:

注意：由于JavaScript是弱类型语言，所以使用==比较时要求比较宽松，如果比较的是不同类型的元素。

例如：

    var varInt = 18;
    var varString = '18';
    console.log(varInt == varString);//结果为true
    console.log(varInt === varString);//结果为false

`==和===的区别`

1、当使用==比较时，如果数据类型不同，会进行类型转换，转换成相同的数据类型后在进行比较

2、当使用===时，如果数据类型不同，则直接返回false

3、undefined==null为true，undefined===null为false

5、分支结构

5.1、if分支

简单if结构

    //语法:
    if(表达式){
        语句;
    }

	//案例代码：
    <script type="text/javascript">
		//创建成绩变量
		var score = 59;
		//if分支
		if(score >= 60){
			console.log("奖励一朵小红花");
		}
		//if结构
		if(score < 60){
			console.log("奖励一顿鞭挞");
		}
	</script>

if...else结构

	//语法：    
	if(表达式){
        语句;
    }else{
        语句;
    }

	//案例代码：
    <script type="text/javascript">
        //使用if...else简化上述操作
        if(score >= 60){
            console.log("奖励一朵小红花");
        }else{
            console.log("奖励一顿鞭挞");
        }
	</script>

if...else...else if...else结构

    //语法:
	if(表达式){
        语句;
    }else if(表达式){
        语句;
    }else{
        语句;
    }

	//案例代码
    <script type="text/javascript">
    	//if...else if ...else语句块
		if(score >= 90){
			console.log("奖励一台iPhone12 Pro Max 国行 非海南免税版");
		}else if(score >= 80){
			console.log("奖励一台AirPods2");
		}else if(score >= 60){
			console.log("成功逃脱鞭挞");
		}else{
			console.log("终究还是没有逃离鞭挞");
		}    
    </script>

5.2、switch分支

	//语法：	
	switch(表达式 | 变量){
			case 常量:
				语句;	break;
			case 常量:
				语句;break;
			default:
				语句;
		}

	//案例：
	<script type="text/javascript">
		//创建星期变量
		var day = 8;
		//使用switch将数字1~7显示为星期1~星期天
		switch(day){
			case 1:
				console.log("懵懂");	break;
			case 2:
				console.log("继续懵懂");break;
			case 3:
				console.log("黎明前的黑暗");break;
			case 4:
				console.log("黑暗马上就要过去");break;
			case 5:
				console.log("天亮了");break;
			case 6:
			case 7:
				console.log("享受");break;
			default:
				console.log("这一天肯定是火星过的");
		}
	</script>

6、循环结构

JS中的循环结构与Java中类似，其中while循环，do-while循环以及for循环的普通用法与Java完全一样，增强for循环的使用会有所差异，下面我们演示一下JS中的增强for循环的使用。

	<script type="text/javascript">
		//创建一个数组
		var brand = ['奥迪','宝马','奔驰','吉利'];
		
		//使用普通循环获取数组元素
		for(var i = 0; i < brand.length; i++){
			console.log(brand[i]);
		}
		
		//使用增强for循环获取数组元素
		for(var i in brand){
			console.log(brand[i]);
		}
	</script>

总结：Java中的foreach获取的是每个元素，而JavaScript中获取的是元素下标，Java的foreach使用for(type variable : arr)而JavaScript中使用for(var variable : arr)

7、函数

函数是具有特定功能的代码块，一般通过事件的触发来调用，类似于Java中的方法。

语法格式：

function 函数名([参数列表]){
    函数体;
    [return 返回值;]
}

案例代码：

	<script type="text/javascript">
		
		//声明无参数函数
		function printInfo(){
			console.log("打印张瑞丰的个人信息。");
		}
		
		//调用函数
		printInfo();
		
		
		//声明有参数函数
		function eat(food){
			console.log("你吃掉了：" + food);
		}
		
		//调用有参方法
		eat('香蕉');
		
		//创建有参数，有返回值的函数
		function sum(num1,num2){
			return num1 + num2;
		}
		
		//调用有参、有返回值的函数
		var val = sum(99,1);
		console.log("sum:" + val);
	</script>

8、事件和事件绑定

事件是HTML4.0之后的新特性，通过浏览器页面中元素的一系列触发调用指定的一段JavaScript代码。

8.1、常见事件

属性	此事件发生在何时...
onabort	图像的加载被中断。
onblur	元素失去焦点。
onchange	域的内容被改变。
onclick	当用户点击某个对象时调用的事件句柄。
ondblclick	当用户双击某个对象时调用的事件句柄。
onerror	在加载文档或图像时发生错误。
onfocus	元素获得焦点。
onkeydown	某个键盘按键被按下。
onkeypress	某个键盘按键被按下并松开。
onkeyup	某个键盘按键被松开。
onload	一张页面或一幅图像完成加载。
onmousedown	鼠标按钮被按下。
onmousemove	鼠标被移动。
onmouseout	鼠标从某元素移开。
onmouseover	鼠标移到某元素之上。
onmouseup	鼠标按键被松开。
onreset	重置按钮被点击。
onresize	窗口或框架被重新调整大小。
onselect	文本被选中。
onsubmit	确认按钮被点击。
onunload	用户退出页面。

8.2、事件绑定

事件绑定分为以下两种：

直接在标签中绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="btn" value="来吧,展示" onclick="show()" />
	</body>
	<script type="text/javascript">
		
		//和事件绑定的函数
		function show(){
			alert("你点了我");
		}
	</script>
</html>

在JS脚本中获取要绑定事件的对象，通过代码绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="来吧,展示" onclick="show()" />
		<input type="button" id="btn" value="通过js绑定" />
	</body>
	<script type="text/javascript">
		
		//和事件绑定的函数
		function show(){
			alert("你点了我");
		}
		
		//绑定事件
		document.getElementById("btn").onclick = show;
	</script>
</html>

8.3、常见事件

8.3.1、焦点事件

onfocus：获得焦点事件
onblur：失去焦点事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>常用事件</title>
	</head>
	<body>
		<input id="username" type="text" onfocus="getFocus()" onblur="loseFocus()">
	</body>
	<script type="text/javascript">
		
		//当获取焦点时触发的函数
		function getFocus(){
			console.log("文本框获取了焦点");
		}
		
		//当丢失了焦点时触发的函数
		function loseFocus(){
			console.log("焦点丢失了");
		}
		
	</script>
</html>

8.3.2、键盘事件

onkeydown：键盘按下时
onkeyup：键盘释放时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>键盘事件</title>
	</head>
	<body>
		<input type="text" onkeydown="keyDown()" onkeyup="keyUp()">
	</body>
	<script type="text/javascript">
		
		//键盘按下事件
		function keyDown(){
			console.log("键盘已经按下了！");
		}
		
		//键盘抬起事件
		function keyUp(){
			console.log("键盘已经抬起了！");
		}
	</script>
</html>

8.3.3、鼠标事件

onmouseover：鼠标经过
onmouseout：鼠标离开

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标事件</title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 300px;
				border: solid black 1px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<div id="box">
			
		</div>
	</body>
	<script type="text/javascript">
		
		//获取元素
		var box = document.getElementById("box");
		
		//绑定属性
		box.onmousemove = function(){
			box.style.backgroundColor = 'red';
			console.log("鼠标移动到了div上");
		}
		box.onmouseout = function(){
			box.style.backgroundColor = 'skyblue';
			console.log("鼠标离开了div");
		}
	</script>
</html>

8.3.4、内容改变事件

onchange：内容发生改变

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>值改变事件</title>
	</head>
	<body>
		<input type="text" onchange="valChange()">
		<select onchange="valChange()">
			<option value ="上海">上海</option>
			<option value ="成都">成都</option>
			<option value ="北京">北京</option>
		</select>
	</body>
	<script type="text/javascript">
		
		//值改变时触发的事件
		function valChange(){
			console.log("值发生了改变");
		}
	</script>
</html>

三、DOM模型

1、DOM简介

DOM（Document Object Model）文档对象模型，是W3C组织推荐的一组操作标记语言的编程接口。通过这些接口可以访问和修改页面元素。

当网页加载时，浏览器会创建页面的文档对象模型（Document Object Model）

HTML模型是树形结构：

2、查找元素

方法名	说明
document.getElementById('id')	通过id属性的值获取元素
document.getElementsByName('name')	通过name属性获取元素
document.getElementsByClassName('class')	通过class属性获取元素
document.getElementsByTagName('tag')	通过标签名称获取元素

除了ById以外，其余三个方法都是返回多个对象，以数组形式返回。

2.1、案例1：表单校验

使用document.getElementById()完成：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post" onsubmit="return validateData()">
			<p>用户名：<input type="text" id="username"></p>
			<p>密&nbsp;&nbsp;&nbsp;码：<input type="text" id="password"></p>
			<p><input type="submit" value="登录"></p>
		</form>
	</body>
	<script type="text/javascript">
		//校验表单
		function validateData(){
			//通过id获取表单元素
			var username = document.getElementById('username').value;
			var psssword = document.getElementById('password').value;
			
			//校验
			if(username == '' || username == null){
				alert('请输入用户名');
				return false;
			}
			if(psssword == '' || psssword == null){
				alert('请输入密码');
				return false;
			}
			return true;
		}
	</script>
</html>

2.2、案例2：全选全不选

需求：根据全选按钮的状态修改下面子复选框的状态

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全选 全不选</title>
	</head>
	<body>
		<form action="">
			<p>全选<input id="all" type="checkbox" onclick="selectAll()"></p>
			<p>抽烟<input name="hobby" type="checkbox"></p>
			<p>喝酒<input name="hobby" type="checkbox"></p>
			<p>烫头<input name="hobby" type="checkbox"></p>
			<p>按摩<input name="hobby" type="checkbox"></p>
		</form>
	</body>
	<script type="text/javascript">
		//全选事件
		function selectAll(){
			//获取全选按钮组件
			var all = document.getElementById('all');
			
			//获取所有子元素
			var hobby = document.getElementsByName('hobby');
			//迭代hobby
			for (var index in hobby) {
				hobby[index].checked = all.checked;
			}
		}
	</script>
</html>

效果：

3、修改元素

接下来我们通过几个修改元素的案例来巩固一下今天的内容

3.1、改变元素文本内容

需求：点击页面中按钮，将上面的“百度”文本值修改为中公教育

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改元素文本值</title>
	</head>
	<body>
		<div id="content">百度</div>
		<button type="button" onclick="changeText()">修改div标签的值</button>
	</body>
	<script type="text/javascript">
		//创建事件绑定方法
		function changeText(){
			//获取div元素
			var content = document.getElementById('content');
			//获取其文本元素
			var text = content.innerText;
			//alert(text);
			//为其设置新的文本值
			content.innerText = '中公教育';
		}
	</script>
</html>

3.2、修改元素的样式

需求：点击按钮时，修改div的样式（颜色、边框、大小）

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>修改元素的样式</title>
		<style type="text/css">
			#box{
				width: 300px;
				height: 300px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<input type="button" onclick="changeStyle()" value="改变div的样式">
	</body>
	<script type="text/javascript">
		//按钮单击事件绑定的函数
		function changeStyle(){
			//获取div元素
			var box = document.getElementById('box');
			
			//修改边框样式
			box.style.border = 'solid 5px yellow';
			
			//修改背景颜色
			box.style.backgroundColor = 'red';
		}
	</script>
</html>

效果：

3.3、升级表单验证

需求：表单验证出现错误时，将提示信息显示在输入框后面。

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>升级版表单验证</title>
	</head>
	<body>
		<form action="" method="post" onsubmit="return validateData()">
			<p>
				账号：<input id="uname" type="text">
				<span id="uname_msg"></span>
			</p>
			<p>
				密码：<input id="pwd" type="password">
				<span id="pwd_msg"></span>
			</p>
			<p>
				<input type="submit" value="登录">
			</p>
		</form>
	</body>
	<script type="text/javascript">
		//提交表单前调用的函数
		function validateData(){
			//先获取用户名和密码元素
			var uname = document.getElementById('uname');
			var pwd = document.getElementById('pwd');
			
			//再获取错误提示标签
			var uname_msg = document.getElementById('uname_msg');
			var pwd_msg = document.getElementById('pwd_msg');
			
			//判断用户名和密码的内容是否为空
			if(uname.value == "" || uname.value == null){
				uname_msg.innerHTML = "<font color='red'>*账号不能为空</font>";
				return false;
			}
			if(pwd.value == "" || pwd.value == null){
				pwd_msg.innerHTML = "<font color='red'>*密码不能为空</font>";
				return false;
			}
			return true;
		}
	</script>
</html>

注意点：使用innerHTML时，需要单引号和双引号一起使用，否则会导致报错！

3.4、innerHTML和innerText的区别

都可以用来获取标签中间的文本信息， innerText:获取或设置纯文本信息（无样式）innerHTML:获取或设置HTML信息（有样式）

案例代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>innerHTML和innerText区别</title>
	</head>
	<body>
		<div id="box1">
			
		</div>
		<div id="box2">
			
		</div>
	</body>
	<script type="text/javascript">
		//获取元素
		var box1 = document.getElementById('box1');
		var box2 = document.getElementById('box2');
		
		//innerHTML
		box1.innerHTML = '<font color="red">我是文本</font>';
		//innerText
		box2.innerText = '<font color="red">我是文本</font>';
	</script>
</html>

效果：

posted @ 2020-08-03 14:54 张瑞丰阅读(94) 评论(0) 编辑收藏举报

刷新页面返回顶部

Day03 JavaScript入门

Day03 JavaScript入门

课前回顾

一、JavaScript基本介绍

1、JavaScript简介

2、JavaScript组成

3、JavaScript引入方式

3.1、行内式

3.2、内嵌式

3.3、外链式

二、ECMAScript

1、注释

2、变量

3、数据类型

3.1、基本数据类型

3.2、引用数据类型

4、运算符

==和===的区别

5、分支结构

5.1、if分支

5.2、switch分支

6、循环结构

7、函数

8、事件和事件绑定

8.1、常见事件

8.2、事件绑定

8.3、常见事件

8.3.1、焦点事件

8.3.2、键盘事件

8.3.3、鼠标事件

8.3.4、内容改变事件

三、DOM模型

1、DOM简介

2、查找元素

2.1、案例1：表单校验

2.2、案例2：全选 全不选

3、修改元素

3.1、改变元素文本内容

3.2、修改元素的样式

3.3、升级表单验证

3.4、innerHTML和innerText的区别

公告

`==和===的区别`

2.2、案例2：全选全不选