JavaScript
目录
JavaScript
1. JavaScript 概述
JavaScript（通常缩写为JS）是一种高级的、解释型的编程语言。JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、Firefox、Safari、Opera）支持。
弱类型语言。
ECMAScript 语法规范
DOM 文档对象模型 Document Object Model
BOM 浏览器对象模型 Browser Object Model
2. JavaScript
2.1 JS 第一行代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-JS第一行代码</title>
</head>
<body>
<script>
//
// alert("你好 JavaScript");
//
// prompt("请输入您的密码");
//
// confirm("北平是不是和王乾有不能说的秘密???");
</script>
</body>
</html>
2.2 JS 基本类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-JS基本类型</title>
</head>
<body>
<script>
/*
JavaScript 中基本类型：
number 数值
string 字符串
boolean 布尔类型 ，真假关系
undefined 未定义
null 空
*/
// 定义变量格式
// i 是一个 number 类型 int i = 10;
var i = 10;
console.log(i);
console.log(typeof i);
// string 类型 String s = "你好 Java"l
var s = "你好 js";
console.log(s);
console.log(typeof s);
// boolean 类型
// variable ==> var 在 js 中用于定义变量
// boolean ret = false
var ret = false;
console.log(ret);
console.log(typeof ret);
// JS var 不是泛型，数据类型完全由赋值号右侧的数据决定
ret = "泛型不是他， 他不配";
console.log(ret);
console.log(typeof ret);
// 变量名理论可以重复，但是不建议，影响阅读性
var i = "你猜能不能重复";
console.log(i);
console.log(typeof i);
// 变量数据没有明确，当前变量为 undefined
var a;
console.log(a);
console.log(typeof a);
var n = null;
console.log(n);
document.write(typeof n);
</script>
</body>
</html>
2.3 引用类型
class Student {
Integer id;
String name;
int age;
}
main(String[] args) {
Student stu = new Student("1", "张三", 16);
System.out.println(stu.id);
System.out.println(stu.name);
System.out.println(stu.age);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-JS引用类型</title>
</head>
<body>
<script>
/*
JSON JavaScript Object Notation JavaScript 对象标记
可以认为是一个 JS 对象
后台提交到前端数据，基本上给予JS解析的都是 JSON 格式。
JSON 格式文件，JSON 格式字符串，JSON 文件
*/
var student = {id: 1, name: "张三", age: 16};
document.write("<h1> id:" + student.id + "</h1>");
document.write("<h1> name:" + student.name + "</h1>");
document.write("<h1> age:" + student.age + "</h1>");
document.write("<h1>" + typeof student + "</h1>");
</script>
</body>
</html>
2.4 数组类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04-JS数组类型</title>
</head>
<body>
<script>
/*
JS 数组 [元素1,元素2,元素3]
JS 数组下标从 0 开始
*/
var arr = [1, 2, 3, 4];
document.write("<h1>" + arr[0] + "</h1>");
document.write("<h1>" + arr[1] + "</h1>");
document.write("<h1>" + arr[2] + "</h1>");
document.write("<h1>" + arr[3] + "</h1>");
document.write("<h1>" + typeof arr + "</h1>");
console.log(arr);
document.write("<hr>");
/*
JS 数组中可以存储 JS 对象
*/
var studentArr = [
{id: 1, name: "王乾", age: 96},
{id: 2, name: "周董", age: 76},
{id: 3, name: "北平", age: 98}
];
document.write("<h1>" + studentArr[0].id + "</h1>");
document.write("<h1>" + studentArr[0].name + "</h1>");
document.write("<h1>" + studentArr[0].age + "</h1>");
document.write("<hr>");
document.write("<h1>" + studentArr[1].id + "</h1>");
document.write("<h1>" + studentArr[1].name + "</h1>");
document.write("<h1>" + studentArr[1].age + "</h1>");
document.write("<hr>");
document.write("<h1>" + studentArr[2].id + "</h1>");
document.write("<h1>" + studentArr[2].name + "</h1>");
document.write("<h1>" + studentArr[2].age + "</h1>");
document.write("<h1> arr.length : " + studentArr.length + "</h1>");
</script>
</body>
</html>
2.5 运算符
算术运算符:
+ - * / %
+= -= /= *= %=
=
关系运算符:
> < >= <= != == ===
逻辑运算符:
&& || !
自增自减运算符:
++ --
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05-JS算术运算符</title>
<style>
span {
font-size: 26px;
}
</style>
</head>
<body>
<script>
/*
算术运算符:
+ - * / %
+= -= /= *= %=
=
*/
var num1 = 10;
var num2 = 20;
var num3 = 10.6;
var num4 = 11;
document.write("<span>ret + : " + (num1 + num2) + "</span><br>");
document.write("<span>ret - : " + (num1 - num2) + "</span><br>");
document.write("<span>ret * : " + (num1 * num2) + "</span><br>");
document.write("<span>ret / : " + (num1 / num2) + "</span><br>");
document.write("<span>ret % : " + (num1 % num2) + "</span><br>");
document.write("<hr>");
document.write("<span>ret - : " + (num4 - num3) + "</span><br>");
document.write("<hr>");
/*
关系运算符:
> < >= <= != == ===
*/
document.write("<span>ret > : " + (10 > 20) + "</span><br>");
document.write("<span>ret < : " + (10 < 20) + "</span><br>");
document.write("<span>ret >= : " + (20 >= 20) + "</span><br>");
document.write("<span>ret <= : " + (20 <= 15) + "</span><br>");
// == 判断的是数据内容，类型不一致，可以通过 20 是 number "20" 字符串
document.write("<span>ret == : " + (20 == "20") + "</span><br>");
// === 判断数据内容，数据类型都要求一致。20 是 number number "20" 字符串
// 结果为 false
document.write("<span>ret === : " + (20 === "20") + "</span><br>");
document.write("<hr>");
/*
逻辑运算符:
&& || !
短路原则:
*/
document.write("<span>ret || : " + (10 > 20 || 10 > 5) + "</span><br>");
document.write("<span>ret && : " + (10 < 20 && 10 > 10) + "</span><br>");
document.write("<span>ret ! : " + !(20 >= 20) + "</span><br>");
document.write("<hr>");
/*
自增自减运算符:
++ --
*/
var num = 10;
document.write("<span>ret ++num : " + (++num) + "</span><br>"); // 11
document.write("<span>ret num++ : " + (num++) + "</span><br>"); // 11
document.write("<span>ret num-- : " + (num--) + "</span><br>"); // 12
document.write("<span>ret --num : " + (--num) + "</span><br>"); // 10
</script>
</body>
</html>
2.6 分支结构
if, if - else, if - else if，switch case
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-JS分支结构</title>
</head>
<body>
<script>
/* if 分支 */
var num = 10;
if (num > 5) {
document.write("<h2>融融和北平彻夜长谈自增自减问题~~~</h2>");
}
/* if else 分支 */
if (num > 15) {
document.write("<h2>融融和北平彻夜长谈自增自减问题~~~</h2>");
} else {
document.write("<h2>融融和北平白天也在一起~~~</h2>");
}
/* if else if分支 */
num = 5;
if (num > 15) {
document.write("<h2>融融和北平手牵手一起走</h2>");
} else if (num > 10) {
document.write("<h2>融融和北平相亲相爱一家人</h2>");
} else if (num > 5) {
document.write("<h2>融融和北平电影院里你和我</h2>");
} else {
document.write("<h2>王乾表示了极度羡慕和愤恨</h2>");
}
/* switch case 分支 */
var a = 5;
switch (a) {
case 1:
document.write("<h2>融融和北平有1080p资源</h2>");
break;
case 2:
document.write("<h2>恒昌羡慕这天造地设的一对</h2>");
break;
case 3:
document.write("<h2>传下去 四组组长哭了</h2>");
break;
default:
document.write("<h2>河霖表示自己变态都理解不了</h2>");
break;
}
/*
三目运算符/条件运算符
*/
10 < 5 ? document.write("<h2>河霖 每天对玉玮动手动脚</h2>") : document.write("<h2>玉玮表示敢怒不敢言</h2>");
</script>
</body>
</html>
2.7 循环结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01-JS循环结构</title>
</head>
<body>
<script>
/* for 循环 */
for (var i = 0; i < 10; i++) {
document.write("<h5>今儿天儿倍凉爽</h5>");
}
document.write("<hr>");
/* while 循环结构 */
var a = 10;
while (a > 0) {
document.write("<h5>这周天气变化多端，注意防护</h5>");
a--;
}
document.write("<hr>");
/* do while 循环结构 */
a = 10;
do {
document.write("<h5>雨一直下，气氛不算融洽</h5>");
a--;
} while (a > 0);
document.write("<hr>");
/*
break 关键字 用于跳出循环结构
continue 结束本次循环，进入下一次循环
*/
/* for 循环 */
for (var j = 0; j < 10; j++) {
if (5 === j) {
break;
}
document.write("<h5>break关键字</h5>");
}
document.write("<hr>");
</script>
</body>
</html>
2.8 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02-JS函数</title>
</head>
<body>
<script>
/*
JSON ==> JavaScript Object Notation
*/
var stu = {id:1,name:"张三",age:16};
/*
JS 定义函数形式
function functionName(parameter) {
方法体
}
*/
// 定一个函数，参数有两个，存在返回值
function add(a, b) {
return a + b;
}
// 传入参数为 number 类型，按照 number 数值方式相加
var ret1 = add(10, 20);
document.write("<h3>ret1 : " + ret1 + "</h3>");
// 传入参数为字符串，字符串拼接操作
ret1 = add("10", "20");
document.write("<h3>ret1 : " + ret1 + "</h3>");
// 传入参数为字符串，和 number类型，使 + 拼接，按照字符串拼接方式完成。
ret1 = add("10", 20);
document.write("<h3>ret1 : " + ret1 + "</h3>");
// 传入参数为 true boolean 和 number 类型， true 按照大多数语言的默认方式，都看作是 1 最终结果 1 + 20 ==> 21
ret1 = add(true, 20);
document.write("<h3>ret1 : " + ret1 + "</h3>");
// 传入参数为 true boolean 和 string 类型，那就按照字符串拼接方式处理，得到字符串内容
ret1 = add(true, "20");
document.write("<h3>ret1 : " + ret1 + "</h3>");
function test(a) {
document.write("<h3>" + a + "</h3>");
}
test(10);
test("你好~");
/*
1. JS 定义函数返回值不需要申明，有 return 关键字方法就有返回值，没有 return 关键字，方法没有返回值
2. 目前定义的 JS 函数没有明确的类型声明，形式参数对应的数据类型，完全有实际参数传入决定
*/
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-JS匿名函数和箭头函数.html</title>
</head>
<body>
<script>
// 定义了一个 JS 数组
var arr = [1, 221, 113, 314, 525, 26, 17, 518, 9];
/*
JS 数组排序方法，快排！！！
sort 默认是按照字符串的字典顺序排序，是将数组中存储数据内容，直接转换为字符串进行排序比较。
*/
arr.sort();
document.write("<h2>" + arr + "</h2>");
var arr1 = ["aB", "AC", "BBB", "ABC", "BD", "AD"];
arr1.sort();
document.write("<h2>" + arr1 + "</h2>");
// 数据全部转为字符串处理
var arr2 = ["1", 221, "113", 314, 525, "26", 17, "518", 9];
arr2.sort();
document.write("<h2>" + arr2 + "</h2>");
// arr3 按照数值方式完成排序
var arr3 = [1, 221, 113, 314, 525, 26, 17, 518, 9];
// 匿名函数 作为其他方法的参数
arr3.sort(function (a, b) {
return a - b;
});
document.write("<h2>" + arr3 + "</h2>");
var arr4 = [1, 221, 113, 314, 525, 26, 17, 518, 9];
// 箭头函数 和 Java 中学习的 Lambda 表达式效果一致
arr4.sort((a, b) => b - a);
document.write("<h2>" + arr4 + "</h2>");
/*
int[] arr = {1, 2, 3, 4, 5, 1, 2, 3, 4, 5};
Arrays.stream(arr).sort((a, b) -> b - a).forEach(System.out::println);
*/
</script>
</body>
</html>
2.9 常见弹窗函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03-JS常见弹框函数</title>
</head>
<body>
<script>
// 信息弹窗
// alert("强哥戏精上身！！！");
// 提示 确认 或者 取消框 confirm 确认框返回值为 boolean
var b = confirm("周董昨天晚上找玉玮服务了吗???");
if (b) {
document.write("服务了还没给钱 <br>");
} else {
document.write("玉玮拒绝了周董<br>");
}
// prompt返回值为字符串类型，用户输入框中的内容
var s = prompt("河霖喜欢摸玉玮大腿", "是的！！！");
// localeCompare 返回结果为 0 表示两个字符串结果一致 返回其他结果两个字符串不一致
// ==> Java String equals
if (0 === "是的！！！".localeCompare(s)) {
document.write("河霖 and 玉玮 百年好合");
} else {
document.write("周董第三者插足");
}
</script>
</body>
</html>
2.10 事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1"></div>
<button onclick="test()">按键</button>
<h2 onmouseover="test2()">消失</h2>
<script>
function test() {
// 获取 ID 为 div1 的 div 标签对象
var div1 = document.getElementById("div1");
// 设置当前 id 为div1 对应的标签 宽度 200px 高度 200px 背景颜色 red
div1.style.width = "200px";
div1.style.height = "200px";
div1.style.backgroundColor = "red";
div1.style.display = "block";
}
function test2() {
// 获取 ID 为 div1 的 div 标签对象
var div1 = document.getElementById("div1");
div1.style.display = "none";
}
</script>
</body>
</html>
2.11 正则表达式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06-JS正则表达式</title>
</head>
<body>
<script>
/*
强密码要求
6 ~ 18 个字符
要求必须有大写字母，小写字母，数字和特殊字符!@#$%^&*?._
常用正则表达式
密码 用户名 邮箱 手机号 ip地址
*/
var reg = /^.*(?=.{6,18})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?._]).*$/;
var b = reg.test("123456789123456Aa.110000");
document.write("<h1>" + b + "</h1>");
</script>
</body>
</html>
3. JavaScript的 DOM 操作
3.1 概述
JS中将整个 HTML 页面看作是一个对象，JavaScript HTML 对象。DOM Document Object Model.浏览器加载页面过程中，会自动创建对应当前 HTML 页面的 DOM 对象。==. Documemnt
JS可以通过 DOM 方式
1. 修改 HTML 文本内容
2. 修改 HTML CSS样式
3. 创建 HTML 标签
4. 修改 HTML 属性
5. 包括事件操作
3.2 获取 HTML 元素的常用方法
document 是 JS 内置对象，对应整个 HTML 页面，可以通过该 document 对象获取在当前 HTML 中任何一个 标签内容。
1. 通过 id 属性获取对应 标签对象，id 是唯一的！！！获取到的对象也是单个对象。
document.getElementById("id属性")
2. 可以通过该 class 属性获取所有同名 class 属性的所有标签对象，得到数据形式是标签对象数组。
document.getElementsByClassName("class属性对应的值");
3. 可以通过该标签名获取对应的标签对象，得到数据形式是标签对象数组。
document.getElementsByTagName("HTML 标签名");
操作或者说使用标签对象的方式类似于 CSS 选择器
id 选择器 class 选择器 和 标签选择器
3.3 通过 DOM 修改 HTML 内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07-JS DOM操作修改HTML内容</title>
</head>
<body>
<!-- 通过 id 方式获取标签对象，修改内容 -->
<div id="div1"></div>
<hr>
<!-- 通过 class 方式获取标签对象数组，修改内容 -->
<p class="cls1"></p>
<span class="cls1"></span> <br>
<h3 class="cls1"></h3>
<hr>
<!-- 通过 标签名 方式获取标签对象数组，修改内容 -->
<a href="#"></a> <br>
<a href="#"></a> <br>
<a href="#"></a> <br>
<a href="#"></a> <br>
<button onclick="idChangeContent()">ID操作</button>
<br>
<button onclick="classChangeContent()">Class操作</button>
<br>
<button onclick="tagNameChangeContent()">标签名操作</button>
<br>
<script>
function idChangeContent() {
var elementById = document.getElementById("div1");
// innerText 是HTML 标签的文本数据内容
elementById.innerText = "ID 修改标签内容";
}
function classChangeContent() {
// 通过 Class 属性获取到的标签对象是以数组形式存储
var clsArr = document.getElementsByClassName("cls1");
for (var i = 0; i < clsArr.length; i++) {
clsArr[i].innerText = i + " : class属性获取标签是数组！！！";
}
}
function tagNameChangeContent() {
// 通过 标签名 获取到的标签对象是以数组形式存储
var aArr = document.getElementsByTagName("a");
// let i ==> var i
for (var i = 0; i < aArr.length; i++) {
aArr[i].innerText = i + " : 北平和融融不得不说的故事";
}
}
</script>
</body>
</html>
3.4 通过 DOM 修改 CSS 样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08-JS DOM操作HTML CSS样式</title>
</head>
<body>
<div id="div1">我又被蚊子咬了</div>
<button onclick="changeSizeAndBackground()">修改尺寸和背景</button>
<br>
<button onclick="changeBackground()">修改背景颜色</button>
<br>
<button onclick="changeFontColor()">修改字体颜色</button>
<br>
<button onclick="changeFontSize()">修改字体尺寸</button>
<br>
<button onclick="reset()">重置</button>
<br>
<script>
function changeSizeAndBackground() {
var div = document.getElementById("div1");
div.style.width = "200px";
div.style.height = "200px";
div.style.backgroundColor = "red";
}
function changeBackground() {
var div = document.getElementById("div1");
div.style.backgroundColor = "green";
}
function changeFontColor() {
var div = document.getElementById("div1");
div.style.color = "white";
}
function changeFontSize() {
var div = document.getElementById("div1");
div.style.fontSize = "30px";
div.style.fontFamily = "黑体";
}
function reset() {
var div = document.getElementById("div1");
div.removeAttribute("style");
}
</script>
</body>
</html>
3.5 事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09-JS DOM操作 HTML 添加事件监听</title>
<style>
#d1 {
width: 50px;
height: 50px;
background-color: red;
}
#d2 {
width: 50px;
height: 50px;
background-color: hotpink;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<script>
function evenOne() {
this.style.width = "200px";
this.style.height = "200px";
this.style.backgroundColor = "green";
}
function evenTwo() {
this.style.width = "200px";
this.style.height = "200px";
this.style.backgroundColor = "skyblue";
}
function evenThree() {
this.style.width = "50px";
this.style.height = "50px";
this.style.backgroundColor = "purple";
}
// 获取 id 为 d1 对应 HTML 标签对象，
// 添加事件(addEventListener)，事件选择 mouseover，触发方法 evenOne
document.getElementById("d1").addEventListener("mouseover", evenOne);
// 获取 id 为 d2 对应 HTML 标签对象，
// 添加事件(addEventListener)，事件选择 mouseleave，触发方法 evenTwo
// 可以通过给一个 html 标签添加多个事件
document.getElementById("d2").addEventListener("mouseleave", evenTwo);
document.getElementById("d2").addEventListener("mouseover", evenThree);
</script>
</body>
</html>
3.6 DOM 创建标签或者删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10-JS DOM操作 创建删除 HTML 标签</title>
<style>
table {
width: 600px;
border: 1px solid darkgray;
}
tr, td {
text-align: center;
border: 1px solid black;
}
button {
color: rgb(0, 0, 0);
}
</style>
</head>
<body>
<button onclick="addRow()">添加行</button>
<button onclick="removeRow()">删除行</button>
<table id="tb1"></table>
<br>
<script>
function addRow() {
var tb1 = document.getElementById("tb1");
// 创建行
// createElement("标签名")
var tr = document.createElement("tr");
// 给予 tr 标签 设置 HTML 属性 class 是属性名，cls1 是属性值
// <tr class="cls1"> </tr>
tr.setAttribute("class", "cls1");
for (var i = 0; i < 4; i++) {
// 创建 列
var td = document.createElement("td");
// 列中存储数据和属性
td.innerText = i;
// ceil Math 中向上取整 1.1 ==> 1
// Math.random() 随机数 数据范围 0.0 <= n < 1.0
// Math.ceil() 向上取整
var r = Math.ceil(Math.random() * 255);
var g = Math.ceil(Math.random() * 255);
var b = Math.ceil(Math.random() * 255);
td.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")"; // rgb(100, 220, 300);
r = Math.ceil(Math.random() * 255);
g = Math.ceil(Math.random() * 255);
b = Math.ceil(Math.random() * 255);
td.style.color = "rgb(" + r + "," + g + "," + b + ")";
// 行添加列元素
tr.appendChild(td);
}
tb1.appendChild(tr);
}
function removeRow() {
var tb1 = document.getElementById("tb1");
var trArr = document.getElementsByClassName("cls1");
tb1.removeChild(trArr[trArr.length - 1]);
}
</script>
</body>
</html>
