当前位置： 首页 > news >正文

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

news 来源：原创 2024/9/13 10:14:40

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 介绍

基本结构

<script type="text/javascript"> JS语句; </script>

js的特点

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

js的组成

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

JavaScript 输入输出语法

输出语法

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

HTML与javaScript结合方式

行内脚本

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

例如

<button οnclick="alert('弹框测试')">点我一下</button>

内部脚本

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

内部，都可以。

外部脚本

  1. 在项目根目录下创建一个目录js
  2. 在js目录中创建一个文件，后缀位js
  3. 在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；

变量的特点

  1. 同时声明多个变量

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

  1. 特殊情况
  • 只声明不赋值：undefined（未定义的）
    • 不声明，不赋值 直接使用：直接报错
    • 不声明，只赋值：正常使用（不建议）

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

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

var 的缺陷

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

常量

const 常量名 = 常量值

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

关于变量声明

  1. const 语义化更好，能用const 就 用const
  2. const 对于基本数据类型：属性值不可改变
  3. 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. 基本数据类型

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

2. 模板字符串

用${}代替 + +

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

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

3. 引用数据类型

  • object

4.数据类型检测

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

5.数据类型转换

  1. 隐式转换
    1. +两边有一个字符串，就会转成字符串
    2. 其他的算数运算符则会将 数据转成 数字类型
  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. =，*=，-=，/=，%=
  2. 一元运算符
    1. i++，++i
    2. i--，--i
  3. 比较运算符
    1. >,=,
  4. 逻辑运算符
    1. &&，||，！

运算符优先级

4.语句

一、分支语句

4.1 if分支语句

  1. 单分支

  1. 双分支

  1. 多分支

4.2三元运算符

4.3switch语句

二、循环语句

4.4while循环

4.5 for循环

退出循环

  1. continue 退出本循环
  2. break ： 退出整个循环

5.数组

5.1创建

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

5.2取值

数组名[索引号]

5.3数组注意点

数组的下标从0开始

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

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

5.4常用方法

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

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

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

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

5.5新增函数

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

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 函数名(){

函数体

}

需求：计算两个数字相加

  1. 有参有返回值

例如

函数的命名规范

  1. 和变量名基本一致
  2. 驼峰命名

函数的使用

函数名()

6.2函数的传参，返回值

function 函数名( 参数列表 ){

函数体

return 数据

}

多个参数逗哈隔开

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

6.3函数的注意点

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

6.4匿名函数

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

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

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

立即执行，防止变量污染

7. 作用域

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

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

根据作用域不同分为：

全局变量，局部变量

注意：

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

变量的访问原则：

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

8.对象

第一步：

8.4内置对象

JavaScript 内部已经创建的对象

8.4.1Math对象

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

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

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

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

9.字符串常用api

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

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

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

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

10正则表达式

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

10.1正则表达式的创建

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

10.2正则对象的方法

  1. 正则对象.test( String ) 查看表达式与字符串是否匹配
  2. 正则对象.exec( String ) 查看符合规则的字符串
  3. 正则对象.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 selectselect_city.options.length = 1;for (var i = 0;i<cities[id].length;i++){//创建optionvar 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

  • 在线引入：

相关文章：

  • 6个免费字体网站，无需担心版权问题~
  • Android 12系统源码_多屏幕（三）模拟辅助设备功能实现原理
  • GitHub开源的PDF管理工具Stirling-pdf
  • Godot模拟实现多人游戏平滑移动
  • SpringData基础学习
  • vue前端更新后需要清空缓存
  • MySQL中 EXPLAIN 的使用介绍
  • oracle共享池（shared pool）：一、工作原理、组成部分 二、软硬解析过程
  • 边界dp注意重叠边界
  • Java使用Tesseract进行OCR图片文字识别
  • 老师是怎么分班的？用什么工具比较好？
  • 实战OpenCV之绘制图形
  • JVM 在GC 时的根对象都有那些
  • day_49
  • 代码断点调试
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • ➹使用webpack配置多页面应用(MPA)
  • 2017 年终总结 —— 在路上
  • Apache Pulsar 2.1 重磅发布
  • Create React App 使用
  • ES6 ...操作符
  • go append函数以及写入
  • java2019面试题北京
  • Javascript Math对象和Date对象常用方法详解
  • Java精华积累：初学者都应该搞懂的问题
  • JS 面试题总结
  • MySQL的数据类型
  • use Google search engine
  • 基于 Ueditor 的现代化编辑器 Neditor 1.5.4 发布
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • 排序算法之--选择排序
  • 山寨一个 Promise
  • 深入浏览器事件循环的本质
  • 王永庆：技术创新改变教育未来
  • 问题之ssh中Host key verification failed的解决
  • 用Canvas画一棵二叉树
  • 再次简单明了总结flex布局，一看就懂...
  • #{} 和 ${}区别
  • #php的pecl工具#
  • #多叉树深度遍历_结合深度学习的视频编码方法--帧内预测
  • （+4）2.2UML建模图
  • （2024.6.23）最新版MAVEN的安装和配置教程（超详细）
  • (android 地图实战开发)3 在地图上显示当前位置和自定义银行位置
  • （三）Pytorch快速搭建卷积神经网络模型实现手写数字识别(代码+详细注解)
  • （推荐）叮当——中文语音对话机器人
  • （五）MySQL的备份及恢复
  • （学习日记）2024.04.04：UCOSIII第三十二节：计数信号量实验
  • (转)如何上传第三方jar包至Maven私服让maven项目可以使用第三方jar包
  • （总结）Linux下的暴力密码在线破解工具Hydra详解
  • （最优化理论与方法）第二章最优化所需基础知识-第三节：重要凸集举例
  • .NET CF命令行调试器MDbg入门（三） 进程控制
  • .net 重复调用webservice_Java RMI 远程调用详解，优劣势说明
  • .NET开源的一个小而快并且功能强大的 Windows 动态桌面软件 - DreamScene2
  • .ui文件相关
  • /dev/sda2 is mounted; will not make a filesystem here!