JavaScript基础
网页可以做什么?定义行为和动作
DOM文档对象模型,它的存在,让我们可以灵活的操作页面中的内容。
1、什么是js
js是一种轻量级的脚本语言!可以在网页中定义动作和行为!
2、作用
页面中的标签操作(增、删、改、查)
页面中的动态效果
页面中的数据交互
3、js的引入方式(如何在html中书写js代码)
3.1、行间引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
行间引入js,就是将js代码编写在标签的行间
弊端:
代码冗余程度过高
js行为与html结构没有分离
行为不能实现复用
-->
<button onclick="alert('我被点了~')">点我啊~</button>
<button onclick="alert('我被点了~')">你再点我~</button>
</body>
</html>
3.2、内部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内部引入</title>
<script>
/*
文档加载方法,这个方法中的代码,在整个文档加载完毕后,才会执行!
*/
window.onload = function() {
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
alert("我又被点了!");
}
}
</script>
</head>
<body>
<button>按钮1</button>
<button>按钮2</button>
</body>
<script>
//在script标签中书写js代码!!!
function hello() {
alert("我被点了!");
}
//获取按钮
var btn1 = document.getElementsByTagName("button")[0];
btn1.onclick = hello;
var btn2 = document.getElementsByTagName("button")[1];
btn2.onclick = hello;
</script>
</html>
内部引入的方式:在html文件内部,使用script标签,来书写js脚本代码!
在html文件内部,使用script标签的位置,可以有:
head标签内部、body标签内部最后面、body标签同级以下!
推荐使用body标签内部最后面、body标签同级以下,因为此时页面html中的文档内容已经加载完毕,可以操作。但是如果放在head标签内部书写js脚本,页面加载还没有完成,就会出现问题,因为文档是按照从上往下加载的!
内部引入的弊端:
js脚本只能应用在当前的html页面中,无法实现行为在多个html文件中的共用!
3.3、外部引入(实际开发中应用广泛)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!--
引入外界js文件,依旧需要用到script标签!
外部引入的方式:
首先在外界单独创建一个js文件,将脚本代码书写在该js文件中
在html文件内部,使用script标签来引入外界的js文件
注意事项:
引入的位置依旧是:head标签内部、body内部最下面、body同级以下
如果在head标签内部引入了外界的js文件,依旧需要注意文档加载的问题!
不要在引入外界的js文件的script标签内再书写js代码了,书写了,也不执行!
要么在再次创建一个js文件,引入
要么在新的script标签内部直接书写js代码!
-->
<script src="js/action.js">
//alert("我执行了吗?"); 该代码书写了也不执行!
</script>
<script>
alert("我执行了吗?!!!")
</script>
</head>
<body>
<button>按钮</button>
</body>
</html>
4、js中变量的声明以及数据类型
4.1、变量声明
var 变量名 = 初值;
4.2、数据类型
typeof(变量名)=====>获取js变量数据类型的方法
console.log(name,typeof(name));
js常见的数据类型:
String 字符串类型
number 数值类型
Boolean 布尔类型 true or false
object 对象类型
undefined 未定义类型
null 空类型
function 方法、函数类型
js中输出的方式常见有两种:
console.log(typeof(name)); //打印输出
alert(typeof(hobby)); //以弹框形式输出
4.3、运算符
- =和的区别
/*
==(等于) 只要值一致就相等
===(全等)除了值一致,类型也要一致,才是真
*/
console.log(3 == "3");
console.log(3 === "3");
5、程序结构
5.1、顺序结构
5.2、分支结构
if switch 案例:闰年判断
闰年判断:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
<script>
/*
闰年的判断条件:
1、能被400整除
2、能被4整除且不能被100整除
*/
var year = 2021;
if (year % 400 == 0 || (year % 4 == 0 && year % 100 != 0)) {
console.log(year + "是闰年");
} else {
console.log(year + "不是闰年");
}
</script>
</html>
5.3、循环结构
循环结构:while、do...while、for、增强for循环
6、js中的基本对象
6.1、数组
- 创建数组:
(1)var arr = new Array(); 空数组
(2)var arr = new Array(默认长度) 默认长度的数组
(3)var arr = [元素列表]; 具有初值的数组
- 数组特点:
(1)在JS中,数组元素的类型可变
(2)在JS中数组的长度可变
- 数组属性:
length 获取数组长度、元素个数
- 常用方法:
(1)join(参数); 将数组元素通过指定的字符拼接成字符串
(2)push(); 向数组的末尾添加一个或更多元素,并返回新的长度
<script>
//声明数组
var arr = new Array();//空数组
var arr1 = new Array(5);//初始容量为5的数组,元素都是undefined类型
var arr2 = [10, 9, 6, 4, 8, "HelloWorld!"];//具有初值的数组
//获取数组的长度、元素个数
console.log(arr2.length);
arr2.push("小丽");
console.log(arr2.length);
//常见的数组操作方法
arr2.push("小黄毛");//最后追加
console.log(arr2);
arr2.unshift("小绿毛");//最前面追加
console.log(arr2);
arr2.pop();//删除最后一个元素
console.log(arr2);
arr2.shift();//删除第一个元素
console.log(arr2);
//起始下标位置(必需) 删除的元素个数(必需) 新增数据(可选)
arr2.splice(2, 0, 7);
console.log(arr2);
arr2.splice(5, 1);
console.log(arr2);
arr2.splice(6, 0, "小黄毛", "小绿毛");
console.log(arr2);
//数组遍历
for (var i = 0; i < arr2.length; i++) {
console.log(arr2[i]);
}
for (var i in arr2) {
console.log(arr2[i]);
}
</script>
6.2、方法Function对象
访问修饰符 [static] 返回值类型 方法名(参数列表) {方法体}
- js中方法定义的语法格式:
a、
function 方法名(参数列表) {
方法体
}
b、
var 方法名 = function(形式参数列表){方法体};
- 方法的分类:
无参无返、有参有返、有参无返、无参有返
- 什么时候需要返回值:
封装的功能代码有结果,就需要返回值
- 什么时候需要参数:
封装的功能代码运行时,需要接收的外界数据,功能中不明确、动态改值的值就是参数!
<script>
//无参无返的方法 打印HelloWorld!
function hello() {
console.log("HelloWorld!");
}
hello();
//有参有返的方法 求两个数的和
var sum = function(a, b) {
return a + b;
}
console.log(sum(10, 20));
//无参有返的方法 随机生成一个[10, 20]内的整数
function randomNum() {
/*
1、目标区间内的整数个数:20 - 10 + 1 ==> 11
2、11 * Math.random() ==> [0.0, 11.0)
3、对第二步的区间进行取整 ==> [0, 10]
4、第三步的区间 + 目标区间最小值 ==> [10, 20]
[a, b]
parseInt(Math.random() * (b - a + 1)) + a
*/
return parseInt(Math.random() * (20 - 10 + 1)) + 10;
}
console.log(randomNum());
//有参无返的方法 输出名字
function printName(name) {
console.log(name);
}
printName("犇犇");
</script>
6.3、Date日期对象
-
创建日期对象:
var now = new Date() 获取当前时间
-
日期对象的常用方法:
(1)toLocaleString():根据本地时间格式,把 Date 对象转换为字符串。
(2)getTime():返回 1970 年 1 月 1 日至今的毫秒数
(3)getHours():返回小时数。
(4)getMinutes():返回分钟数。
(5)getSeconds():返回秒数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body></body>
<script>
//获取到系统的当前时间
var now = new Date();
console.log(now);
console.log(now.toLocaleString());
console.log(now.getTime());
console.log(now.getHours());//小时
console.log(now.getMinutes());//分钟
console.log(now.getSeconds());//秒
console.log(now.getFullYear());//年
console.log(now.getMonth() + 1);//月
console.log(now.getDate());//日
</script>
</html>
7、事件
事件表示js在网页中的行为,比如登录、注册按钮的点击、表单的提交、表单的校验等都需要用到事件!
7.1、鼠标事件
<body>
<div></div>
</body>
- 获取div:
var div = document.getElementsByTagName("div")[0];
/*
js中为标签设置事件的语法格式:
标签对象.事件名称 = function() {
动作
}
*/
7.1.1、点击事件
//点击事件
div.onclick = function() {
var r = parseInt(Math.random() * (255 - 0 + 1)) + 0;
var g = parseInt(Math.random() * (255 - 0 + 1)) + 0;
var b = parseInt(Math.random() * (255 - 0 + 1)) + 0;
//js中this出现在方法内,表示该方法的所有者
this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}
7.1.2、移入事件
//移入事件
div.onmouseover = function() {
var r = parseInt(Math.random() * (255 - 0 + 1)) + 0;
var g = parseInt(Math.random() * (255 - 0 + 1)) + 0;
var b = parseInt(Math.random() * (255 - 0 + 1)) + 0;
//js中this出现在方法内,表示该方法的所有者
this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}
7.1.3、移出事件
div.onmouseout = function() {
var r = parseInt(Math.random() * (255 - 0 + 1)) + 0;
var g = parseInt(Math.random() * (255 - 0 + 1)) + 0;
var b = parseInt(Math.random() * (255 - 0 + 1)) + 0;
//js中this出现在方法内,表示该方法的所有者
this.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}
7.2、键盘事件
7.2.1、抬起
//抬起事件
document.onkeyup = function() {
console.log("键盘抬起了");
}
7.2.2、按下
//按下事件
document.onkeydown = function(event) {
//事件方法中可以定义一个事件对象作为参数
console.log(event.keyCode);
switch (event.keyCode) {
case 65:
console.log("向左移动");
break;
default:
break;
}
console.log("键盘按下了");
}
7.2.3、长按
//长按事件
document.onkeypress = function() {
console.log("按住不撒手");
}
7.3、表单事件(省市联动、挂号的科室医生选择等)
<body>
<input type="text">
<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
<option value="杭州">杭州</option>
<option value="曹县">曹县</option>
</select>
</body>
- 获取收入框:
var i = document.getElementsByTagName("input")[0];
7.3.1、聚焦事件
<script>
//输入框聚焦,显示内容为张二麻子
i.onfocus = function() {
i.value = "张二麻子";
}
</script>
7.3.2、失焦事件
<script>
//输入框失焦,显示内容为王二驴子
i.onblur = function() {
i.value = "王二驴子";
}
</script>
7.3.3、值改变事件
<script>
//市区下拉选择框值改变时,获取到当前选择的市区
var s = document.getElementsByTagName("select")[0];
s.onchange = function() {
console.log(s.value);
}
</script>
8、DOM获取页面标签(只有拿到才能操作)
我们在js中,操作document对象,就相当于在操作整个html页面!
对页面的操作,无外乎就是对页面内容进行增删改查功能!获取页面标签(只有拿到才能操作!
<body>
<div id="d" class="c">哈哈哈</div>
<input type="text" name="username">
</body>
<script>
//通过id名称获取标签,因为id名称唯一,所以得到了单个标签
var div = document.getElementById("d");
div.style.color = "red";
/*
通过类名class获取标签,因为类名可以添加多次,
所以得到的是一组元素,想要操作先通过下标获取!
*/
var div = document.getElementsByClassName("c")[0];
div.style.color = "blue";
/*
通过标签名获取标签,也是一组元素,操作之前需要先通过下标获取!
*/
var div = document.getElementsByTagName("div")[0];
div.style.color = "orange";
/*
通过name属性的值来获取标签,因为name属性只有表单元素才有
所以该方法主要用来获取表单元素input、select、textarea
也是一组,操作之前需要通过下标获取!
*/
var i = document.getElementsByName("username")[0];
i.value = "牛鬼蛇神";
</script>
8.1、改变标签
获取到标签后,可以改变的标签:
8.1.1、css样式的修改
标签对象.style。样式名称 = “值”
css js
font-size fontSize
background-color backgroundColor
//获取标签
var div = document.getElementsByTagName("div")[0];
//改变标签
div.style.color = "pink";
div.style.fontSize = "30px";
8.1.2、标签文本内容的修改
想要改变标签的文本内容,首先要对标签进行分类!
(1)表单元素标签(input 、select、textarea)
获取表单元素标签.value
(2)普通标签(innerText、innerHTML)
获取普通元素标签.innerText ------只能对纯文本进行处理
获取普通元素标签.innerHTML -------可以解析html结构,也可以处理纯文本
var i = document.getElementsByTagName("input")[0];
console.log(i.value);
i.value = "往而理性";
console.log(div.innerText);
console.log(div.innerHTML);
div.innerHTML = "<a href='http://www.baidu.com'>百度</a>"
8.1.3、标签行间属性的修改
js中改变、操作标签行间属性的方式:
1、标签对象.行间属性名
2、标签对象.setAttribute("行间属性名","行间属性值")
var a = document.getElementsByTagName("a")[0];
console.log(a.href);
a.href = "http://www.taobao.com";
a.setAttribute("href","http://www.jd.com");
9、浏览器对象模型
<script>
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function() {
//点击事件中完成页面的切换,跳转到01页面
window.location = "01-checkAll.html";
}
</script>
document.getElementById() <==> window.document.getElementById()
10、定时器
10.1、单次定时器
单次定时器最大的存在意义:可以让方法或者脚本功能延迟执行!
setTimeout(方法, 延迟时间单位是毫秒)
方法会在指定的延迟时间到达后,执行!执行一次
10.2、循环周期定时器
循环定时器最大的存在意思:可以让方法或者脚本功能反复执行!
setInterval(方法,方法执行的间隔时间单位毫秒)
每隔指定的时间,方法执行一次
该方法除了开启循环定时器之外,还返回了定时器对象
clearInterval(定时器对象) 可以关闭循环定时器
案例代码:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
position: fixed;
right: 10px;
bottom: 10px;
display: none;
}
</style>
</head>
<body>
<div></div>
</body>
<script>
//获取到div
var div = document.getElementsByTagName("div")[0];
//单次定时器
function show() {
div.style.display = "block";
}
/* setTimeout(function() {
div.style.display = "block";
}, 3000); */
setTimeout(show, 3000);
//循环定时器
var index = 1;
var timer = setInterval(function() {
console.log("睡神苏俊奇" + index);
index++;
if (index > 5) {
clearInterval(timer);
}
}, 2000);
</script>