Java学习Day33:HTML 第四章:大战虎先锋(js)

2024-08-24 17:52

本文主要是介绍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 介绍

基本结构

<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

  • 在线引入:

这篇关于Java学习Day33:HTML 第四章:大战虎先锋(js)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1103190

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom