Java学习Day33：HTML 第四章：大战虎先锋（js）

1.小案例

function fl(){
    var div =document.getElementById("flush")
    var data =new Date();
    baoshan ="❤❤！性感荷官在线发牌！❤❤"+data.getFullYear()+"年"+data.getMonth()+1+ "月"+data.getDate()+"日"+data.getHours()+"时"+data.getMinutes()+"分"+data.getSeconds()+"秒";
    var p =div.querySelector("p")
    if (!p){
        p = document.createElement("p");
        div.appendChild(p);
    }
    p.textContent=baoshan;
    var color = ["red","yellow","black"]
    min = Math.ceil(0); // 确保min是整数
    max = Math.floor(3);
    var randomnum=Math.floor(Math.random() * (max - min) + min);
    p.style.color=color[randomnum];
}
 setInterval(fl,1)

JavaScript 介绍

基本结构

js的特点

可以使用任何文本编辑编写，只需要浏览器就能执行
解释性语言，不编译，逐步执行
基于对象

js的组成

ECMAScript：定义核心语法，关键字，运算符，数据类型等系列标准
DOM：文档对象模型，将一个html页面的所有节点看成是一个一个的对象。更有层次感的管理每一个节点。
BOM：浏览器对象模型，是对浏览器窗口进行访问和操作。使用 BOM，开发者可以移动窗口、改变状态栏中的文本以及执行其他与页面内容不直接相关的动作。使 BOM 独树一帜且又常常令人怀疑的地方在于，它只是 JavaScript 的一个部分，没有任何相关的准。

JavaScript 输入输出语法

输出语法

普通弹框 alert("狗屎膏药")
控制台日志输出 console.log("谷歌浏览器按F12进入控制台");
document.write('要输出的内容')：向body内输出内容
确认框 confirm("确定删除吗？")
输入框 prompt("请输入姓名：");

HTML与javaScript结合方式

行内脚本

点击按钮（触发）
弹框（具体的操作）

例如

内部脚本

使用
标准是写在head和body之间，无论什么位置外，

内部，都可以。

外部脚本

在项目根目录下创建一个目录js
在js目录中创建一个文件，后缀位js
在html页面中，使用，导入

0 语句

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> <script> /* * 1: ; 空格提高了阅读性 * 2:一样适用 * 3:严格区分大小写 * */ { console.log(999) } console.log(123); consoLe.log(456); </script>

1. 变量

面向对象
- 数据类型：没有数据类型，声明变量
  - 弱类型

声明

var 变量名；

var age；

赋值

变量名 = 值；

age = 10;

变量的初始化

var age = 18;

更新变量

var age = 18；

age = 81；

变量的特点

同时声明多个变量

var age = 10，name = ‘zs’，sex = 2;

特殊情况

只声明不赋值：undefined（未定义的）
- 不声明，不赋值直接使用：直接报错
- 不声明，只赋值：正常使用（不建议）

变量的命名规范：和Java一模一样

大小写英文字母，下划线(_)，美元符号( $ )组成
严格区分大小写
不能数字开头
不能是关键字
变量名必须有意义
驼峰命名法

var 的缺陷

可以先使用，在声明（不合理）
可以重复声明相同的变量名（不合理）
在变量提升，全局变量有缺陷
已经过时，用 let 替代

常量

const 常量名 = 常量值

常量不可以再次赋值，声明时必须赋值

关于变量声明

const 语义化更好，能用const 就用const
const 对于基本数据类型：属性值不可改变
const对于引用数据类型：地址不可以改变

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> </html> <script> b = 55; function m(){ //常量 a = 33; window.myGlobalVariable = a; //b = 55; console.log("---"+a); } console.log(a) </script>

2.数据类型

1. 基本数据类型

number 数字型
String
1. \转义字符，即将转义字符后面的符号视为内容
Boolean
undefined 未定义型，没有赋值
null 空类型，赋值了，内容为空

2. 模板字符串

用${}代替 + +

('字符串内容' +变量名+ '字符串内容')=

(`字符串内容 ${变量名} 字符串内容`) :反引号

3. 引用数据类型

object

4.数据类型检测

作为运算符：typeof 变量名
函数形式：typeof（变量名）

5.数据类型转换

隐式转换
1. +两边有一个字符串，就会转成字符串
2. 其他的算数运算符则会将数据转成数字类型
显示转换
1. 转化为字符串
  1. 函数：变量名 . toString()
  2. 强制转换：String(变量名)
  3. 字符串拼接
2. 转化为数字型
  1. paseInt(String )
  2. paseFloat(String)
  3. 强制转换Number
  4. -，*，/隐式转换
3. 转化为布尔型
  1. Bollean(变量名)
  2. ‘’、0、undefined、null、false、NaN 转换为布尔值后都是false, 其余则为 tru

3.运算符

赋值运算符
1. =，*=，-=，/=，%=
一元运算符
1. i++，++i
2. i--，--i
比较运算符
1. >,=,
逻辑运算符
1. &&，||，！

运算符优先级

4.语句

一、分支语句

4.1 if分支语句

单分支

双分支

多分支

4.2三元运算符

4.3switch语句

二、循环语句

4.4while循环

4.5 for循环

退出循环

continue 退出本循环
break ：退出整个循环

5.数组

5.1创建

利用 new 创建数组
1. let 数组名 = new Array();
利用数组字面量区创建数组
1. let 数组名 = {数据1，数据2}

5.2取值

数组名[索引号]

5.3数组注意点

数组的下标从0开始

数组可以存储任意数据类型

长度从属性 length获得：数组名.length

5.4常用方法

tostring()：将数组转换成字符串
join(连接符号)：将数组中的每个元素用连接符号连接成一个新的字符串。
concat(新元素)：将原来的数组连接新元素并返回一个新数组，原数组不变。

var arr = [1,2,3,4]; var arrnew = arr.concat(5,6); console.log( arrnew +",类型为：" + typeof( arrnew ) ); console.log("原数组：" + arr);

slice(开始，结束)：在数组中提取一部分，返回一个新的数组，原数组不变。
reverse()：数组的反转（倒序）
sort()：数组排序

var arr = [1,2,3,4]; var arrnew = arr.concat(5,6); console.log( arrnew +",类型为：" + typeof( arrnew ) ); console.log("原数组：" + arr);

5.5新增函数

数组末尾添加：将一个或多个元素添加到数组的末尾，返回数组的新长度
1. int 数组名.push(元素1，元素2，元素3)
数组开头添加
1. int 数组名.unshift(元素1，元素2)
数组末尾删除：删除最后一个元素，返回该元素的值
1. object 数组名.pop()；
数组开头删除
1. object 数组名.shift()；
数组指定删除
1. 数组名.spkice( start，deleteCount)
  1. start：起始位置
  2. deleteCount：要移除的个数，可选，默认删除到最后
数组自定义排序

let arr = [4, 2, 5, 1, 3] // 1.升序排列写法 arr.sort(function (a, b) { return a - b}) console.log(arr) // [1, 2, 3, 4, 5] // 降序排列写法 arr.sort(function (a, b) { return b - a}) console.log(arr) // [5,

6函数

6.1函数的使用

函数的创建

function 函数名(){

函数体

}

需求：计算两个数字相加

有参有返回值

例如

函数的命名规范

和变量名基本一致
驼峰命名

函数的使用

函数名()

6.2函数的传参，返回值

function 函数名( 参数列表 ){

函数体

return 数据

}

多个参数逗哈隔开

return 返回后结束函数
没有return时，默认返回undefined

6.3函数的注意点

相同的函数，后面会覆盖前面的函数
实参的个数和形参个数可以不一致
1. 形参过多，多余的会undefined代替
2. 实参过多，多余的实参会被忽略(函数内部有一个arguments,里面装着所有的实参

6.4匿名函数

没有名字的函数，创建即使用

（function () { 函数体}）();
（function （） {函数体}）（））；

多个立即执行函数使用，分号（；）隔开

立即执行，防止变量污染

7. 作用域

全局作用域：在函数外部中，整个script有效

局部作用域：在函数内部有效

根据作用域不同分为：

全局变量，局部变量

注意：

没有let声明直接赋值，会当全局变量看
函数内部的形参可以当成局部变量来看
函数中可以嵌套函数，那么就又产生一个新的作用域

变量的访问原则：

在能够访问到的情况下先局部，局部没有在找全局

8.对象

第一步：

8.4内置对象

JavaScript 内部已经创建的对象

8.4.1Math对象

数学类对象，提供了数学方面的一系列方法

random 生成一个 0-1之间的随机数，不包含 0 和 1
ceil：向上取整
floor：向下取整
max
min
pow 幂运算
abs 绝对值

如何生成N-M之间的随机数

Math.floor(Math.random() * (M - N + 1)) + N

9.字符串常用api

length 获取字符串的长度
toUpperCase/toLowerCase :转大小写
charAt(下标) ：返回某个下标上的字符
indexof(字符)：字符出现的首次下标
lastIndexof(字符)：字符最后一次出现的下标
substring(开始,结束)：截取字符串中一部分（结束是不包含的）
replace(旧的,新的)：将字符串中的旧字符替换成新字符

var str1 = "abcde"; var str2 = str1.replace("cd","XXX"); console.log(str2); // abXXXe，将str1中的cd替换成XXX

split(分割的节点)：一个字符串切割成N个小字符串，所以返回的是数组类

var str1 = "一,二,三,四,五"; var arr = str1.split(","); // 将str1 以逗号进行分割，分割成N份，所以返回的结果一定是数组结构 console.log( "共分割成："+arr.length+"份" ); console.log( "第三份是：" + arr[2] ); // 三

10正则表达式

正则表达式是用于匹配字符串中字符组合的模式

10.1正则表达式的创建

var reg = /表达式 /;
new RegExp("表达式") 返回一个正则对象

10.2正则对象的方法

正则对象.test( String ) 查看表达式与字符串是否匹配
正则对象.exec( String ) 查看符合规则的字符串
正则对象.replace(REG，String) 用来替换字符串中符合规则的字符

9 Dom使用

获取方法

getElementById() 方法返回带有指定 ID 的元素：
- 可以获取指定元素

//需求：获取p元素 var div = document.getElementById("div");

内容

innerText、
input
getElementsByName

创建方法

创建元素：

createElement("元素标签名称");

创建属性:createAttribute("属性名")
创建文本：createTextNode("文本内容")
取值
赋值对象名.属性名 = 数值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="div22222"></div> <font size="13" id="f"></font> <img src="1.jpg" id="img"> </body> </html> <script> //div ---- id document.getElementById("img").src="2.jpg" </script>

事件

本质上就是一个属性标签
一个过程和一个结果

1：onload ：页面加载事件！当你的网页加载完了以后，就会触发该事件

弹窗案例

2 焦点事件：onfocus 获取焦点

焦点事件案例

3 改变事件：onchange

12 练习

二级联动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="pro" onchange="m()">
    <option>请选择节点</option>
    <option id="0">北京</option>
    <option id="1">河北</option>
    <option id="2">辽宁</option>
    <option id="3">河南</option>
</select>
<select id="city">
    <option>---请选择---</option>
</select>
</body>
</html>
<script>
    /*
    * 1:我们是需要获取到select对象的
    * 2:数据的问题
    * 3：想办法获取到所有的option
    * ----选择---事件？
    * 4:让0123充当索引
    * 5：想办法让数组给第二个select去赋值
    * 6:动态创建option
    * */
    var cities = [
        ["海淀区","东城区","西城区","朝阳区","昌平区"],
        ["邯郸","武安","石家庄","保定","唐山"],
        ["沈阳","大连","葫芦岛","丹东","盘锦"],
        ["驻马店","开封","洛阳","郑州","南阳"]
    ]

    function m(){
        //省份
        var select_pro = document.getElementById("pro");
        //城市
        var select_city = document.getElementById("city");
        //创建option 循环
        // var options_pro = select_pro.options;
        var index =  select_pro.selectedIndex;
        var id = select_pro.options[index].id;// 0  1 2 3
        //清空一下第二个city select
        select_city.options.length = 1;
        for (var i = 0;i<cities[id].length;i++){
            //创建option
            var option = document.createElement("option");
            var text =  document.createTextNode(cities[id][i]);
            //挂节点
            option.append(text);
            select_city.append(option)
        }
    }
</script>

10 Ajax

什么是Ajax？
- 异步请求：整体不变，局部变！

json

文件，后缀的后缀.json 存数据

json的语法

11.axios

在线引入：