一.JS简介
1.什么是JS
JS全称为JavaScript, 是一门运行在浏览器的, 动态类型的, 弱类型的(数据类型), 基于对象的直译者(就是不用编译)角本语言;
2.JS的组成
- ECMAScript: JS的基本语法规范
- BOM: Browser Object Model, 浏览器对象模型, 提供了与浏览器交互的一些函数;
- DOM: Document Object Model, 文档对象模型, 提供操作网页面的一些方法;
3.JS的作用
- JS代码可以操作浏览器: 进行网址跳, 历史记录切换, 浏览器弹窗等;
- JS代码可以操作网页: 操作HTML的标签, 标签的属性, 样式, 文本等等;
JS是在浏览器内存中运行时操作, 并不会修改网页源码, 所在刷新页面后网页会还原;
4.JS与java的对比
| 对比 | Java | JS |
|---|---|---|
| 运行环境 | JVM虚拟机 | JS引擎，是浏览器的一部分 |
| 是否跨平台运行 | 跨平台 | 跨平台 |
| 语言类型 | 强类型语言 | 弱类型，动态类型语言 |
| 是否需要编译 | 需要编译，是编译型语言 | 不需要编译，是解释型语言 |
| 是否区分大小写 | 区分大小写 | 区分大小写 |
5.JS的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
<!-- 第二种方式 -->
<script src="../js/demo.js"></script>
</head>
<body>
<!--
JS 的引入方式有两种:
1. 内部脚本 (就是在当前html文档内部编写 script 标签,在这个标签里编写JS代码)
2. 外部脚本 (当前项目中编写一个JS文件,存放到JS文件夹中,需要使用时,再将该文件引入)
-->
<!-- 第一种方式 -->
<script>
alert("你想做什么呢?");
</script>
</body>
</html>
二.ECMAScript
1.JS中的变量与数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
/*
java中的变量声明: 变量类型 变量 = 变量值;
js是一门弱类型的语言: 在js里面不需要去指定类型,同一个变量可以接收不同类型的数据
var 变量名 = 变量值;
let 变量名 = 变量值; ecmaScript6之后,一般都使用 let 关键字
js中的数据类型:
1. 基本数据类型: number(所有的数值), string(字符串), undefined(未定义), boolean
null: 对象类型，已经知道了数据类型，但对象为空;
undefined：未定义的类型，并不知道是什么数据类型;
2. 引用数据类型: object
获取某个变量的类型的关键字是 typeof
string 转 number parseInt() 或者 parseFloat()
number 转 string toString()
number 或者 string 转 boolean
1. 0为 false 非0为 true
2. 空字符串为 false 非空字符串为 true
*/
//string 转 number
let test2 = "100";
let test3 = parseInt(test2);
console.log(typeof (test3));
let test4 = "101.00";
let test5 = parseFloat(test4);
console.log(typeof (test5));
// number 转 string
let test6 = 120;
let number = test6.toString();
console.log(typeof (number));
// number 或者 string 转 boolean
let test7 = null;
let b1 = new Boolean(test7);
console.log(b1);
let test8 = "test";
let b2 = new Boolean(test8);
console.log(b2);
</script>
</body>
</html>
2.运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
/*
JS中的运算符与Java中的运算符基本相同, 不同的是js中 == ===,!= !==;
== 比较值 != 相反
=== 即比较值又比较数据类型 !== 相反
*/
let i = 3.14
let str = "3.14"
console.log(i == str);
console.log(i === str);
</script>
</body>
</html>
3.逻缉语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
/* 使用js输出9x9乘法表 */
// 外循环控制行数
document.write("<table border='0px' cellspacing='0' cellpadding='4px'")
for (let i = 1; i <= 9; i++) {
// 内循环控制列数
document.write("<tr align='center'>")
for (let j = 1; j <= i; j++) {
document.write("<td>")
document.write(j + "x" + i + "=" + j * i);
document.write("</td>")
}
document.write("</tr>")
}
document.write("</talbe>")
// if语句与java相同
// switch语句与java相同
</script>
</body>
</html>
4.函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
/*
1.js的函数分为两种
普通函数方式
function 函数名(参数...){}
匿名函数
事件名 = function(参数...){}
2.js的函数是没有重载的,同名的函数会覆盖前面的 (带参数的函数,基本都有点类似java中的可变函数)
3.函数声明时的参数个数和函数调用时传入的参数个数,可以不一样;
*/
function add(a, b, c) {
console.log("arguments数组中的数据:" + arguments.length);
console.log(a + "," + b + "," + c);
return a + b + c;
}
let add1 = add(1,2,3);
console.log(add1);
document.write(add1);
let add2 = add(1,2);// 第三个参数不传,控制台打印出的是 undefined;
console.log(add2);
document.write(add2);
let add3 = add(1,2,3,4);// 传入的超过的参数,没有被处理,结果与传入前三个参数一样;
console.log(add3);
document.write(add3);
</script>
</body>
</html>
5事件
5.1两种绑定方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<!--
绑定事件的两种方式:
1. 静态绑定, 就是直接在标签上进行绑定
2. 动太绑定, (匿名函数方式)使用js代码进行事件的绑定
-->
<input type="button" value="静态绑定按扭" onclick="staticButton(value)">
<input type="button" value="动态绑定按扭" id="btn">
<script>
// 静态绑定函数
function staticButton(a) {
alert("你想干嘛呢?")
}
// 动态绑定函数
let elementById = document.getElementById("btn");
elementById.onclick = function () {
alert("你又想干嘛呢?")
}
</script>
</body>
</html>
5.2常见的事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
/*
Js中常用的点击事件
1. 点击事件 onclick
2. 焦点事件 onfocus(获得焦眯), onblur(失去焦点)
3. 页面加载完毕的事件 onload
4. 内容改变事件, 通常是给下拉框绑定 onchange
5. 鼠标相关的事件 onmouseover(移入), onmouseout(移出)
6. 键盘相关的事件 onkeydown(按下), onkeyup(抬起)
*/
// 当浏览器加载完毕之后, 再执行之个事件里面的代码, 也就是布局类的标签代可以不用写在<script>标签上面
window.onload = function () {
let textID = document.getElementById("text");
// 给元素绑定事件
textID.onfocus = function () {
console.log("获取到了焦点");
}
textID.onblur = function () {
console.log("失去了焦点");
}
let selID = document.getElementById("sel");
selID.onchange = function () {
console.log(selID.value);
}
}
</script>
<input type="text" id="text">
<select id="sel">
<option>小鱼人</option>
<option>敌法师</option>
<option>小娜迦</option>
<option>大娜迦</option>
<option>小黑</option>
<option>幻影刺客</option>
</select>
</body>
</html>
6.内置对象
6.1正则对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
// js中的正则表达式, 与java中的大同小异
let reg1 = /[a-z]{3}/; // 模糊匹配: 只要你的字符串中出现了三个小写字母都可以
let reg2 = /^[a-z]{3}$/; // 精确匹配: 三个小写的字母
let b = reg2.test("abc");
console.log(b);
// 手机号码: 以1开头, 第二位是 3,4,5,6,7,8,9 的11位数字
let regPhoneNum = /^1[3456789]\d{9}/;
let b1 = regPhoneNum.test("13026627164");
console.log(b1);
</script>
</body>
</html>
常见js正则表达示规则, 与java基本相同, 可能就是转义方式不一样
| 符号 | 作用 |
|---|---|
| \d | 数字 |
| \D | 非数字 |
| \w | 单词：a-zA-Z0-9_ |
| \W | 非单词 |
| . | 通配符，匹配任意字符 |
| {n} | 匹配n次 |
| {n,} | 大于或等于n次 |
| {n,m} | 在n次和m次之间 |
| + | 1~n次 |
| * | 0~n次 |
| ? | 0~1次 |
| ^ | 匹配开头 |
| $ | 匹配结尾 |
| [a-zA-Z] | 英文字母 |
| [a-zA-Z0-9] | 英文字母和数字 |
| [xyz] | 字符集合, 匹配所包含的任意一个字符 |
6.2数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
/*
js中数组的特点:
1. 数组的长度是可变的
2. 数组中的元素类型可以是任意类型
*/
let arr = [1,2,3,4,"a","b"]
/*for (var i = 0; i < arr.length; i++) {
//获取数组中的每一个元素
var arrElement = arr[i];
console.log(arrElement)
}*/
arr[6] = true;
arr[7] = "你好世界"
//js的数组里面常用的一些方法:
//1. concat(),将多个数组合并成一个数组
let strList = ["hello","jay","aoBaMa"]
// let newArr = arr.concat(strList);
// for (let i = 0; i < newArr.length; i++) {
// let newArrElement = newArr[i];
// console.log(newArrElement)
// }
//2. join()方法，将数组中的每一个元素，通过分隔符进行拼接字符串
let str = arr.join(",");
console.log(str)
//3. reverse()方法，反转数组
let newArr = arr.reverse();
for (let i = 0; i < newArr.length; i++) {
let newArrElement = newArr[i];
console.log(newArrElement)
}
</script>
</body>
</html>
6.3日期对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
//创建当前时间的date
let date = new Date();
console.log(date);
//创建指定年月日的date，注意:月是从0-11
let date01 = new Date(2020, 6, 11)
console.log(date01);
//创建指定年月日时分秒的date
let date02 = new Date(2020, 6, 11, 23, 11, 50)
console.log(date02);
//创建指定时间戳的date，什么是时间戳:格林威治时间从1970年1月1日0时0分0秒到现在的毫秒数
//获取某个时间的时间戳
let date03 = date.getTime();
//通过时间戳创建date
let date04 = new Date(date03 + 60 * 60 * 1000);
console.log(date04);
//需求:计算到十一放假还有多少天
let date5 = new Date(2020,9,1);
let date6 = new Date(2020,6,9);
console.log((date5.getTime()-date6.getTime())/1000/60/60/24);
</script>
</body>
</html>
三.BOM (window对象)
JS中的window代表整个浏览器, 但是通常window对象可以省略;
1.三种弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>window对象</title>
</head>
<body>
<!--
一、三种弹框
1. alter()警告框,只能点确定，不点确定页面就没法继续运行
2. confirm()确认框,可以点击确定或者取消，通常用于询问是否要执行某个操作
这个方法的返回值是boolean类型，如果点击确定则为true，否则为false
3. prompt()输入框,弹出一个可以让用户进行输入的框,这个方法有返回值，返回值
就是输入的内容，如果点击取消则返回null
-->
<script>
//1. 警告框
//window.alert("hello")
//2. 确认框
/*let flag = confirm("你确定要删除吗?");
console.log(flag)*/
//3. 输入框
let age = prompt("请输入你的年龄");
if (parseInt(age) >= 18) {
alert("可以访问")
} else {
alert("请大一点了再访问")
}
</script>
</body>
</html>
2.两种定时方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<script>
/*
定时器的话就是隔一段时间执行一个任务
1. setTimeout(), 只执行一次,也就相当于是一个延时器
2. setInterval(), 这个是循环执行的, 也就是真的定时器
第一个参数是要执行的匿名函数
第二个参数是间隔时间
该方法的返回值是这个定时器id
*/
let id = 0;
// window 对象可省略
let times = window.setInterval(function () {
id++;
if (id>=5){
// 清除定时器,需要指定清除的是哪一个定时器,也就是 setInterval 函数的返回值;
window.clearInterval(times);
}
console.log("活是不想活了,死又怕疼,就这么着吧!")
},3000);
</script>
</body>
</html>
3.history
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<script>
// 浏览器的后退功能
// history.back();
window.history.go(-1);
// 浏览器的前进功能
// history.forward();
// window.history.go(1);
</script>
</body>
</html>
4.location
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location对象</title>
</head>
<body>
<script>
//location对象其实就代表浏览器的地址栏
//location对象的href属性，就表示地址栏中的地址
//let href = location.href; //获取地址栏的地址,用的不多
//console.log(href)
//设置地址栏的地址，访问改地址: 使用js代码访问某个地址
window.location.href = "https://www.baidu.com"
</script>
</body>
</html>
四.DOM (document对象)
1.操作标签
| 方法 | 描述 | 返回值 |
|---|---|---|
document.getElementById(id) |
根据id获取标签 |
Element对象 |
document.getElementsByName(name) |
根据标签name获取一批标签 |
Element类数组 |
document.getElementsByTagName(tagName) |
根据标签名称获取一批标签 |
Element类数组 |
document.getElementsByClassName(className) |
根据类名获取一批标签 |
Element类数组 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<body>
<div id="d1" name="n1">hello div1</div>
<div class="c1">hello div2</div>
<span class="c1">hello span1</span>
<span name="n1">hello span2</span>
<script>
// 1.document.getElementById(id) 示例
let elementById = document.getElementById("d1");
console.log(elementById);
// 2.document.getElementsByName(id) 示例
let elementsByName = document.getElementsByName("n1");
// for (let elementsByNameKey in elementsByName) {
// console.log(elementsByNameKey)
// }
for (let elementsByNameElement of elementsByName) {
console.log(elementsByNameElement);
}
// 3.document.getElementsByTagName(id)
// 4.document.getElementsByClassName(id)
</script>
</body>
</html>
2.操作标签体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<div id="city"><h2>北京</h2></div>
<input type="button" value="改变城市1" placeholder="BJ" onclick="getCity(placeholder) "/>
<br>
<br>
<input type="button" value="改变城市2" placeholder="SZ" onclick="changeCity(placeholder)"/>
<script>
function getCity(a) {
let elementById = document.getElementById("city");
// innerText只能设置纯文件
elementById.innerText = a;
}
function changeCity(b) {
// innerHTML是设标签里面的所以内容,包括子标签
let elementById = document.getElementById("city");
elementById.innerHTML = "<h2>" + b + "</h2>";
}
</script>
</body>
</html>
3.操作标签的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<input id="password" type="password">
<input type="button" value="显示密码" onmousedown="showPassword()" onmouseup="unShowPassword()">
<script>
//需求:按住显示密码按钮的时候，就显示密码框中的密码; 按键松开的时候，就隐藏密码
let elementById = document.getElementById("password");
function showPassword() {
// 操作其 type 属性
elementById.setAttribute("type","text");
}
function unShowPassword() {
// 操作其 type 属性
elementById.setAttribute("type","password");
}
</script>
</body>
</html>
五.JS案例
1.表单提交案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<table>
<tr>
<td align="left">请输入帐户</td>
<td><input type="text" name="name" onfocus="tips()" onblur="checkName(this.value)"></input>
<span style="color: red;size: A5" id="username">请输入4-16个字符,以字母开头</span>
</td>
</tr>
<tr>
<td align="left">请输入电话号码</td>
<td><input type="text" name="pv" onfocus="phoneTips()" onblur="checkPhone(this.value)"></input>
<span style="color: red;size: A5" id="phone">请输入电话号码,以1开头,第2位为3579</span>
</td>
</tr>
</table>
<script>
// 表单校验账号密码
function tips() {
console.log("tips这里走了吗?")
// input 只能设置 value 不能使用 innerHtml 来设置值
document.getElementById("username").innerHTML = "请输入4-16个字符,以字母开头";
}
function checkName(value) {
console.log("checkName这里走了吗?")
let regStr = /^[a-z]\w{3,15}$/;
let b = regStr.test(value);
if (b) {
document.getElementById("username").innerHTML = "帐户设置ok";
} else {
document.getElementById("username").innerHTML = "请输入4-16个字符,以字母开头";
}
}
function phoneTips() {
console.log("phoneTips这里走了吗?")
document.getElementById("phone").innerHTML = "请输入电话号码,以1开头,第2位为3579"
}
function checkPhone(value) {
console.log("checkPhone这里走了吗?")
let regStr = /^[1][3579]\d{9}$/;
// let regStr = /^[1][3579][1-9]{9}$/;
let b = regStr.test(value);
if (b) {
document.getElementById("phone").innerHTML = "电话号码设置ok"
} else {
document.getElementById("phone").innerHTML = "请输入电话号码,以1开头,第2位为3579"
}
}
</script>
</body>
</html>
2.轮播图案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<div>
<img src="../img/banner_1.jpg" id="banner" width="500px">
</div>
<script>
let banners = ["../img/banner_1.jpg", "../img/banner_2.jpg", "../img/banner_3.jpg"];
let num = 0;
setInterval(function () {
if (num >= 3) {
num = 0;
}
document.getElementById("banner").setAttribute("src", banners[num]);
num++;
}, 2000);
</script>
</body>
</html>
3.省市二级联动案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS学习</title>
</head>
<select id="province">
<option value="0">请选择省份</option>
<option value="1">广东省</option>
<option value="2">湖北省</option>
<option value="3">湖南省</option>
</select>
<select id="city">
<option>请选择城市</option>
</select>
<script>
let city = [
[],
["广州", "深圳", "佛山"],
["武汉", "荆州", "襄阳"],
["长沙", "常德", "凤凰"]
];
// 获取显示省份的元素
let provinceElement = document.getElementById("province");
// 获取显示市的元素
let citySelect = document.getElementById("city");
provinceElement.onchange = function () {
// 获取省对应下的市级列表
let value = provinceElement.value;
let cityNames = city[value];
// 遍历添加之前，先清除城市下拉框中的所有option
citySelect.innerHTML = "<option>请选择城市</option>"
for (let cityName of cityNames) {
let optionElement = document.createElement("option");
optionElement.innerHTML = cityName;
citySelect.appendChild(optionElement);
}
};
</script>
</body>
</html>
网友评论