JavaScript
概述
1、主要完成页面的数据验证,因此运行在客户端,需要运行浏览器来解析执行 JavaScript 代码
2、JS是弱类型:类型可变,Java 是强类型:类型不可变
3、特点
(1)交互性:信息的动态交互
(2)安全性:不允许直接访问本地硬盘
(3)跨平台性:只要是可以解释 JS 的浏览器都可以执行,和平台无关
JavaScript 结合 HTML
1、在 head 标签 / body 标签中,使用 script 标签输入 JavaScript 代码
<script type="text/javascript">
</script>
2、在 head 标签中,使用 script 标签,引入单独的 JavaScript 代码文件
<script type="text/javascript" src="JavaScript文件路径"></script>
3、在同一 script 标签中,两种方式只能二选一
变量
1、关键字:var
2、数据类型:JavaScript 变量可以接收任意类型的数据
3、标识符:严格区分大小写
4、定义变量格式
var 变量名;
var 变量名 = 值;
5、类型
(1)值类型(基本类型):字符串(string)、数字(number)、布尔(boolean)、对空(null)、未定义(undefined)、Symbol
(2)引用数据类型(对象类型):对象(object)、数组(array)、函数(function)、正则(regExp)、日期(date)
6、NAN:全称:Not a Number,非数字,非数值
变量事项
1、所有 JavaScript 变量未赋于初始值的时候,默认值都是 undefined
2、数值型:JavaScript 不区分整数、小数
3、字符串:JavaScript 不区分字符、字符串;单引号、双引号作用相同
4、布尔型:true、false
(1)在 JavaScript 中,其他类型和布尔类型的自动转换
(2)true:非零的数值,非空字符串,非空对象
(3)false:零,空字符串、null,undefined
5、引用类型
(1)所有 new 对象
(2)用 [] 声明的数组
(3)用 {} 声明的对象
6、typeof():JavaScript 的函数,返回变量的数据类型
关系 / 比较运算符
1、==:等于,只比较数字
2、===:全等于,比较数字,且比较变量的数据类型
3、!=:不等于
4、!==:不全等于
逻辑运算符
1、在 JavaScript 中,所有的变量,都可以做为一个 boolean 类型的变量去使用
2、&&:短路且
(1)当表达式全为真的时,返回最后一个表达式的值
(2)当表达式中,有一个为假的时,返回第一个为假的表达式的值
3、||:短路或
(1)当表达式全为假时,返回最后一个表达式的值
(2)只要有一个表达式为真,返回第一个为真的表达式的值
4、取反:!
数组
1、定义空数组
var 数组名 = [];
2、定义数组,同时赋值元素
var 数组名 = [元素1, 元素2];
3、JavaScript 的数组,只要通过数组下标赋值,则最大的下标值,就会自动的给数组做扩容操作
函数
1、定义函数
(1)使用 function 关键字
function 函数名(形参列表) {
函数体;
}
(2)
var 函数名 = function () {
函数体;
}
2、JavaScript 的函数带返回值,直接在函数体内直接使用 return 语句
3、JavaScript 不允许重载,函数的重载会覆盖上一次的定义
4、arguments 隐形参数
(1)只在 function 函数内
(2)在 function 函数中不需要定义,但可以直接用来获取所有参数的变量
(3)类似 Java 可变长参数,可变长参数本质是一个数组
(4)隐形参数操作类似数组
自定义对象
1、Object 形式
(1)定义对象
var 变量名 = new Object();//对象实例(空对象)
变量名.属性名 = 值;//定义一个属性
变量名.函数名 = function () {//定义一个函数
函数体;
}
(2)访问对象
变量名.属性/函数名();
2、{} 形式
(1)定义对象
var 变量名 = {
属性名: 值,
函数名: function () {
函数体;
}
}
(2)访问对象
变量名.属性/函数名();
事件
1、输入设备与页面进行交互的响应
2、常用事件
(1)加载完成事件(onload):页面加载完成之后,常用于做页面 JavaScript 代码初始化操作
(2)单击事件(onclick):常用于按钮的点击响应操作
(3)失去焦点事件(onblur):常用于输入框失去焦点后,验证其输入内容是否合法
(4)内容发生改变事件(onchange):常用于下拉列表和输入框内容发生改变后操作
(5)表单提交事件(onsubmit):常用于表单提交前,验证所有表单项是否合法
3、事件注册 / 绑定:通知浏览器,当事件响应后,执行对于操作代码
(1)静态注册事件:通过 HTML 标签的事件属性,直接赋于事件响应后的代码
(2)动态注册事件:先通过 JavaScript 代码得到标签的 dom 对象,再通过 dom 对象.事件名 = function () {} 赋给事件响应后的代码
4、各事件注册
(1)加载完成事件(onload)
function onload() {
//静态注册onload事件,函数体包括该事件,对应所有操作代码
}
window.onload = function () {
//动态注册onload事件,固定写法
}
(2)单击事件(onclick)、失去焦点事件(onblur)、内容发生改变事件(onchange)、表单提交事件(onsubmit)
function 事件类型() {
//静态注册事件,函数体包括该事件,对应所有操作代码
}
window.事件类型 = function () {//动态注册事件
//1、获取标签对象
var 标签对象名 = document.getElementById("事件对应标签的id属性值");
//2、赋给onclick事件响应后的代码
标签对象名.onclick = function () {
//函数体
}
}
DOM
1、Document Object Model:文档对象模型
2、把 HTML 文档中的标签,属性,文本,转换成为对象来管理
DOM Document 对象
1、概述
(1)管理了所有的 HTML 文档内容
(2)是一种树结构的文档,有层级关系
(3)把所有的标签都对象化
(4)可以通过 document 访问所有的标签对象
2、查找 HTML 元素
(1)document.getElementById(elementId):通过标签的 id 属性查找,并返回第一个相同 id 标签的 dom 对象,elementId 是标签的 id 属性值
(2)document·getElementsByName(elementName):通过标签的 name 属性查找,并返回所有相同 name 标签的 dom 对象集合,elementName 是标签的 name 属性值
(3)document.getElementsByTagName(tagname):通过标签名查找标签 dom 对象,并返回所有相同标签名的 dom 对象集合,tagname 是标签名
(4)使用顺序:id -> name -> tagName;三个方法必须在页面加载后才能查询
3、添加和删除元素
(1)document.createElement(element):创建 HTML 元素
(2)document.removeChild(element):删除 HTML 元素
(3)document.appendChild(element):添加 HTML 元素
(4)document.replaceChild(element):替换 HTML 元素
(5)document.write(text):写入 HTML 输出流
DOM 元素对象
1、改变 HTML 元素
(1)element.innerHTML = new html content:改变元素的 innerHTML
(2)element.attribute = new value:改变 HTML 元素的属性值
(3)element.setAttribute(attribute, value):改变 HTML 元素的属性值
(4)element.style.property = new style:改变 HTML 元素的样式
2、获取属性
element.childNodes:获取当前节点的所有子节点
element.firstChild:获取当前节点的第一个子节点
element.lastChild:获取当前节点的最后一个子节点
element.parentNode:获取当前节点的父节点
element.nextSibling:获取当前节点的下一个节点
element.previousSibling:获取当前节点的上一个节点
element.className:获取 / 设置标签的 class 属性值
element.innerHTML:获取 / 设置起始标签和结束标签中的内容
element.innerText:获取 / 设置起始标签和结束标签中的文本
正则表达式语法
1、直接量语法
/pattern/attributes
2、创建 RegExp 对象的语法
new RegExp(pattern, attributes);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战