JavaScript
1、初识JavaScript
在网页中:
- html表示网页的结构
- CSS表示网页的样式
- JavaScript表示网页的行为
三大核心
(1)ECMAScript:javaSript的标准语法
(2)BOM(Browser Object Model):一整套操作浏览器的属性和方法
(3)DOM(Document Object Model):一整套操作文档流的属性和方法
->通过JS语法让页面发生变换,让文档变换
书写位置
-
行内式
(1) a标签(本身有行为)
-> 因为a标签,本身有动作行为出现,需要区分你是跳转还是执行JS代码
-> 如果不是跳转在href属性里写一个JavaScript声明:Js代码;
(2) 非a标签 -
内嵌式
->在html文件的任意标签内书写一个script标签,在此标签中书写JS代码
->推荐在head标签或者body标签的末尾 -
外链式
->**在script标签的src属性中引用JS文件,JS代码书写在JS文件中
->注意:使用外链式之后,再在script标签中书写JS代码没意义(哪怕只写了src属性,无法使用内嵌式)****
示例:
输出语法
1.alert():
-> 以浏览器弹出层形式展示内容,堵塞后面的代码执行
-> 只要不是纯数字,单双引号无所谓
2.console():
->在浏览器控制台输出,方便调试,不影响页面展示,不会堵塞后面的代码执行
3.document.write()
=>直接在html页面显示
特殊: ->由于是直接输出到文档流,故可以解析标签
2、变量与数据类型
2.1定义变量
=>声明变量格式: var 变量名 (标识符规则和规范与java类似)
=>不使用var 关键字也可以声明一个变量(不推荐)
2.2数据类型
Number 数值
- 包括一切数字(浮点数,任意进制数如0x十六进制,0八进制)
- NaN: Not a Number, 即是一个数值类型,但不是数字
- 科学计数法(如:2e5)
Undefined 空(未定义)
- undefined
Null 空
- null
String 字符串
用单或者双引号或者反引号(`)包裹表示
模板字符串:
常用方法:substring 截取字符串
Boolean 布尔值
0 /0.0 / null / undefined / NaN 这些都视为fasle ,其他一律为真(true)
- true 在计算机存储的时候是1
- false 在计算机存储的时候是0
引用数据类型
Object
Function
typeof检测数据类型
关键字typeof(以String类型返回)
用法一: typeof 变量
用法二: typeof(),相较于用法一没有局限性
数据类型转换
Number类型
1. Number()
- 语法: Number(要转换的数据)
- 返回值: 转换好的数据,转换不了(如含有字符串),则返回NaN
2. parseInt() 取整,依次转换
- 语法:parseInt(转换的的数据)
- 特点: 一位一位的转换,每识别到一个数字就返回一个,直到遇到非数字(包括小数点)就不往下看了,第一位是非数字直接返回NaN
3.parseFloat() 比parseFloat()多认识一个小数点
4. 非加法数学运算
- a-0
- a*1
- a/1
String类型
1. Stirng()
- 语法: String(转换的数据)
- 特点: 任意的数据都能转
2. toString()
- 语法: 转换的数据.toString()
- 特点: Undefined和null不能转换
3. + 与java同样的字符串链接符
Boolean 类型
Boolean()
- 语法:Boolean(转换的数据)
- 特点: **只有这五个是false,分别是: 空字符串'' NaN,null , Undefined ,,0 **
其他全是true - 注意!:即使[] =='' 的结果为true,Boolean([])的结果也还是true
3、运算符号
1.数学运算符
与java基本一致,比java多个幂运算符号
如:
2.比较运算符号
与java不同或者新增的是:
- == : 只比较值,不管数据类型
- === :既比较值又比较数据类型
- !===即三等于的的取反,值不一样就算true**
- !==,即双等于的取反,数据类型和值都不一样才是true**
3.逻辑运算符号
与java一致
4.if语句
与java一致,注意:条件位置处,必须Boolean的值 / 表达式 / 变量,如果不是Boolean类型的话,JS会自动进行转换
例如这些 if(0 /0.0 / null / undefined / NaN){ } 这些 if 都会认为是false。因为*0/0.0/null/undefined/NaN* 这些值转换为布尔值都是 false, 除此以外一律为真。
5.switch语句
与java基本一致,只能判断===
其他语句也基本与java一致
4、函数
- 一种引用数据类型
- 对一段代码的封装
4.1 定义函数
声明式定义:
- 语法: function 函数名(){}
赋值式定义:
- 语法: var 函数名 = function(){}
4.2 函数调用
声明式定义函数和赋值式定义的调用的区别
- 声明式函数:可以在声明前后调用
- 赋值式函数: 只能在赋值后调用
4.3 函数参数
实参和形参不对应的情况也不会报错
- 形参多: 多的形参为undefined
- 实参多: 形参不接受
4.4 arguments(参数数组)
- 函数自带的变量
- 表示所有实参的集合(伪数组)
arguments的属性:
- length表示参数的个数
1.预解析
是指在代码之前做的准备工作,类似C语言的预处理,JS代码的一种运行机制
1.1 var 声明变量
实际上在代码的执行时,会*预先解析var声明的变量
注: 用var声明的变量是全局变量,而在ES6标准后可使用 let 来声明局部变量
1.2 定义函数
- 声明式定义函数 :在预计解析时将函数准备好
(不建议多用,因为全局可用太乱了) - 赋值式定义函数:预计解析时只是声明有这么一个变量
2.当预解析时函数与变量同名
2.1 预解析的最高级
与其他编程语言有所不同
- 只要有JS代码中可以预解析的内容,无论要解析的语句在会先进行解析(哪怕是return或者if语句判断为false)
2.2 优先级
在JS中函数是一等公民,在预解析时只解析函数
如:
(建议:(1)变量尽量以名词命名,尽可能用到两三个单词;(2)函数名尽量以功能区分)
3. 作用域
用来限制变量的使用范围
3.1 全局作用域
全局可用,叫做window
3.2 局部作用域(也叫私有域)
函数体里面的作用域,只有该函数内可用
3.3 变量的三个机制
- 定义机制:只能在自己的作用域和子级作用域有效
- 使用机制: 越明确越优先,即先在自己的作用域找,找不到以次往f父作用域上找(全局也找到不到报错)
- 赋值机制:优先在自己作用域内查找,找不到就往父作用域上找还不到也不会报错 ,因为由于两种定义变量的方式存在(如定义变量可以 a = 10 这样定义) ,将会在全局作用域(windows)定义一个变量
3.4 作用域的预解析
- 全局下先预解析
- 局部的预解析只有在调用的时候才会预解析
(由于函数是单独进行预解析,因此是参数传递在前,预解析在后)
事件
常见的事件
click 点击事件
当用户点击了html元素得时候,会触发该事件
mouseover 鼠标覆盖事件
当鼠标移动到元素上面时
mouseout 鼠标离开事件
当鼠标从元素上离开时
focus 获得焦点事件
当获得焦点时触发
blur 失去焦点事件
失去焦点事件
load 加载事件
当元素被加载时触发, 如js中可用浏览器对象 window.onload
函数和元素结合:
- 函数还可以当作一个页面元素的事件处理函数
- 当页面的某个元素触发行为时,执行某个函数
- 语法:元素.onclick = 函数名或元素.onclick = function (){}
页面元素的简单操作
-
在一个页面里,标签的id名(只有id可以),可以直接当成一个变量来使用
-
这个元素就代表这个标签
6、引用数据类型详解
- 对象:承载一堆数据的盒子
- 函数:承载了一段代码的盒子
1 创建对象的方式
- 字面量创建
注: 成员以 key:value 的形式表示,并且多个成员用逗号隔开
- 内置构造方法创建
区别:
(1)字面量创建可以直接在里面添加数据,数据以键值对key:value的形式出现,key表示数据名字,value表示值用(,)分隔
2.操作对象语法
增: 向对象添加成员
点语法格式:对象名.成员名 = 值
数组关联语法:对象名["成员名"] = 成员名] = 值
删:删除对象的成员
点语法格式:delete 对象名.成员名
数组关联语法:delete 对象名["成员名"]
改:修改对象的成员
点语法格式:对象名.成员名 = 值
数组关联语法:对象名["成员名"] = 成员名] = 值
查:获取对象的成员
点语法格式:对象名.成员名
数组关联语法:对象名["成员名"]
如果没有此成员,则为undefined
点语法和数组关联语法的区别
数组关联语法成员名可以使用变量和拼接字符串
点语法成员名不能使用变量和拼接字符串
注意:在控制台打印对象时*
->不展开时是当前的样子
->展开后是最终的样子
解决方案: (1)使用对象名.成员名直接获取 (2)使用console.table()的方式打印对象,就会得到当前的值
3. for in循环遍历对象的属性
类似java的增强for 即forearch
4. in关键字:判断一个成员判断是否在对象里
语法: "成员名" in 对象名
内置对象:Date
7 . JSON
JSON 简介
早期,人们用xml传输
JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集,采用完全独立于编程语言的文本格式来存储和表示数据。
在javaScrip 一切皆为对象,任何js支持的类型,都可以用JSON来表示
JSON 格式
- 对象都用 {}
- 数组都用 []
- 都以键值对的形式表示, 即 key: value
JSON 与字符串之间的相互转换
操作BOM对象(重点)
B: 浏览器 , BOM浏览器模型
浏览器(内核)介绍
- IE
- Chrome
- FireFox
- Safair
常用的BOM对象
window对象 代表浏览器窗口
screen 代表屏幕尺寸
location 代表当前页面的URL信息
doucument 代表当前的页面,HTML,DOM文档树
history
操作DOM对象(重点)
网页就是一个Dom树形结构!
获得dom节点
更新dom节点
remove 删除节点
由于指针不能指向自己,所以要删除一个节点,必须要先获得父节点,再通过父结点来删除
注意:删除结点是动态的(即当删除第一个子节点的时候,原来的第二个子节点就变成了现在的第一个子结点)
append 追加结点
在document结点后面添加结点
insert 插入结点
当拿到结点document结点(id也能直接进行操作)后,我们可以进行一下操作
操作文本
id1.innerText = “文本内容” ; 修改文本的值,会把之前的文本内容清除,不可解析html标签
id1.innerHTML = “文本内容” ; 修改文本的值,与上面的唯一区别是可以解析html标签
操作CSS(更改样式)
操作表单(验证表单)
注:可以通过添加 required 属性使文本框变为必填项,不填写就提交会有提示,表单里的input标签,一定要有name属性才能发送到后台
获得表单的值
表单数据加密(md5)以及提交验证
表单中的onsubmit 属性:用于提交验证,如果事件函数返回true,则提交,反之不提交,注意还要写一个return,并且默认为true
此外,在提交表单时容易被人抓包发现表单的数据,,因此我们需要对表单数据进行加密
如下代码对表单进行了加密
由于直接对密码框进行密文赋值,会导致密码框在提交的一瞬间变长,不能提升用户体验,所以我们可以采用一个隐藏密码框来进行赋值传输
__EOF__

本文链接:https://www.cnblogs.com/lqy-blogs/p/16161908.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了