前段之JavaScript——网页的血液!!

目录

一、JavaScript简介

二、JavaScript引入

三、声明变量

四、数据类型

五、运算符

六、函数

七、常用数据操作方法

1、字符串

2、数组

3、对象

八、BOM

九、DOM


一、JavaScript简介

JavaScript是一种用于为网页添加交互功能的脚本语言。它是一种轻量级的、解释型的语言,通常嵌入到HTML中,由浏览器解释执行。JavaScript能够使网页具有动态性,可以实现诸如表单验证、动态内容更新、用户行为跟踪等功能。

JavaScript最初是作为一种用于处理网页交互的脚本语言而开发的,但现在已经发展成为一种广泛用途的编程语言,不仅用于前端开发,还可以用于后端开发(如Node.js)、移动应用开发(如React Native)、游戏开发等领域。

JavaScript的特点包括:

  1. 易学易用:JavaScript语法类似于其他编程语言(如C、Java),因此相对容易学习。

  2. 强大的交互性:JavaScript可以对网页中的各种元素进行操作,实现用户与页面的交互,例如表单验证、动态内容加载、响应用户事件等。

  3. 跨平台性:几乎所有的现代浏览器都支持JavaScript,因此可以在多种操作系统和设备上运行。

  4. 丰富的功能库:JavaScript拥有丰富的开发库和框架,例如jQuery、React、Angular等,可以加速开发过程并提高开发效率。

  5. 异步编程:JavaScript支持异步编程,可以通过事件处理、回调函数、Promise等方式处理异步操作,提高网页的响应速度和用户体验。

总的来说,JavaScript是构建现代网页和应用程序的重要技术之一,它为开发人员提供了丰富的工具和功能,使得网页更加交互且功能丰富。

二、JavaScript引入

1、在html内部使用script标签,在标签内部直接编写

2、在外部js文件中编写,在html内部通过script的src属性引入外部js文件

三、声明变量

1、const------声明常量,声明时必须赋值,不能更改

2、let------声明局部变量,出了该语句块就失效,没有赋值前不能访问且只能声明一次。

3、var------声明全局变量,可以多次声明,自带变量提升效果,没有声明就可以访问。

四、数据类型

查看数据类型可以使用typeof()方法

1、未定义类型:undefined

声明一个变量但是没有赋值时,会显示该类型。

2、数字:Number

3、字符串:String

4、布尔值:Bool

5、空值:Null,清除内存,使用typeof()返回的是Object

6、数组:Array,相当于Python中的列表

7、对象:Object,相当于Python中的字典

数组和对象这两种复杂的数据类型可以使用instanceof来检测类型。

五、运算符

1、算术运算符

|----|----|
| + | 加 |
| - | 减 |
| * | 乘 |
| / | 除 |
| % | 求余 |

2、赋值运算符

|-----|------------|
| = | 等于 |
| += | 加等于 |
| -= | 减等于 |
| *= | 乘等于 |
| /= | 除等于 |
| %= | 余等于 |
| a++ | 自增(先返回再运算) |
| ++a | 自增(先运算再返回) |

3、比较运算符

|-----|---------------|
| > | 大于 |
| < | 小于 |
| >= | 大于等于 |
| <= | 小于等于 |
| != | 不等于 |
| == | 判等,只比较值 |
| === | 判等,先比较值,再比较类型 |

4、逻辑运算符

|--------|--------------------------|
| && 与 | 左侧为真返回左侧,左侧为假返回右侧 |
| || 或 | 左侧为真返回左侧,左侧为假返回右侧 |
| ! 非 | 非真为假,非假为真,结果只有true或false |

5、流程结构

(1)顺序结构,从上向下依次执行

(2)分支结构:共有三种

html 复制代码
if ( 条件 ) {
}


if ( 条件 ) {
}
else {
}


if ( 条件 ){
}
else if ( 条件 ) {
}
else {
}

(3)循环结构

  • for
  • while 先判断在执行
  • dowhile 先执行在判断

六、函数

定义函数时使用function,函数名以小驼峰形式命名。

形参:声明函数使用;实参:调用函数使用。只有一个返回值。

html中同样有匿名函数,没有函数名,不能独立存在,使用时赋予一个变量,赋予函数的形参和赋予对象的键。

html中也可使用递归函数,使用方法同Python中类似,但是自己调用自己时,地柜效率低。

七、常用数据操作方法

1、字符串

(1)str.length 求字符串长度

(2)字符串可以遍历,下标从0到length-1

(3)charAt() 根据索引找字符

(4)indexOf 根据字符找索引,找不到返回-1

(5)concat 字符串拼接

(6)endsWith 以...结尾

(7)startsWith 以...开头

(8)replace 替换

(9)match 匹配,返回对象

(10)search 匹配,返回索引

(11)slice 切片,不包含stop

(12)split 切割,支持空字符切割

(13)toLowerCase 字符串转小写

(14)toUpperCase 字符串转大写

(15)trim 剔除空格

2、数组

(1)length 求长度

(2)可以遍历,下标从0到length-1

(3)concat 数组连接,不影响原数组

(4)includes 查看数组是否包含某个值

(5)indexOf 返回查找元素索引,找不到返回-1

(6)join 将元素使用字符串拼接

(7)pop 删除末尾

(8)push 末尾插入

(9)shift 删除开头

(10)unshift 开头插入

(11)reverse 逆序,影响原数组

(12)sort 排序,影响原数组

(13)splice

start 操作位置

deleteCount 删除个数

items 插入内容,也可不插入

(14)slice 切片,结果不影响原数组

(15)高阶函数,形参是匿名函数,第一个参数是值,第二个参数是索引

  • forEach 遍历,没有返回值
  • filter 过滤,返回符合条件的
  • map 映射,一对一返回
  • find 返回索引,只返回一个
  • every 每一个都返回true,结果才是true
  • some 每一个都不符合条件,结果才是false

3、对象

对象类似于Python中的字典,为键值对格式,值可以是任意数据类型。

(1)Object.keys(obj)获取obj的所有键

(2)JSON.stringify 序列化

(3)JSON.parse 反序列化

八、BOM

BOM(浏览器对象模型)是一组用于访问和操作浏览器窗口的对象集合。与DOM(文档对象模型)类似,BOM提供了一种编程接口,允许开发人员通过JavaScript来控制浏览器的行为、属性和功能。

BOM主要由以下对象组成:

  1. window对象:window对象代表浏览器中打开的窗口。它是BOM的核心对象,提供了许多属性和方法,用于控制浏览器窗口的大小、位置、导航等功能。

  2. navigator对象:navigator对象提供了有关浏览器的信息,如浏览器的名称、版本、所在平台等。开发人员可以使用这些信息来编写适配不同浏览器的代码。

  3. screen对象:screen对象提供了有关用户屏幕的信息,如屏幕的宽度、高度、色深等。开发人员可以利用这些信息来调整网页的布局和显示效果。

  4. history对象:history对象允许开发人员在浏览器的历史记录中执行操作,如forward前进、back后退、go(n)跳转到指定页面等。通过history对象,可以实现浏览器的前进后退功能。

  5. location对象:location对象提供了有关当前文档的信息,

    1. href当前地址

    2. protocol 协议

    3. port 端口

    4. pathname 虚拟路径

    5. search 查询参数

    6. hash 路由模式,锚点

    7. reload() 刷新

九、DOM

DOM(文档对象模型)是一种用于表示和操作HTML和XML文档的编程接口。它将文档解析为一个由节点(Node)组成的树状结构,开发人员可以使用JavaScript来访问和修改这些节点,从而实现对文档的动态操作和交互。

1、获取页面元素

querySelector,找到符合匹配的第一个

querySelectorAll,找到所有,返回类似数组,可以使用下标获取单个

document.query*,搜索整个文档

target.query*,在target内部找

2、绑定事件

鼠标点击:onclick

鼠标划入:onmouseenter

鼠标离开:onmouseleave

鼠标按下:onmousedown

鼠标抬起:onmouseup

鼠标移动:onmousemove

表单元素:

聚焦:onfocus

失去焦点:onblur

输入内容改变:oninput

键盘抬起:onkeyup

3、获取、修改

innerText不考虑标签;innerHTML可以识别标签

获取类名,对象.classList,add添加;remove删除;contains是否有;

toggle 有就删除没有就添加。

样式设置时,设置的为行内样式,.style.样式属性名=

获取样式时,可以通过style.样式属性名获取

4、相关元素

获取父节点:parentElement

获取所有子节点:children

获取下一个相邻节点:nextElementSibling

获取上一个相邻节点:previousElementSibling

5、元素的创建与删除

创建元素:createElement

将元素插入文档:appendChild

删除元素:remove

相关推荐
hopetomorrow12 分钟前
学习路之PHP--使用GROUP BY 发生错误 SELECT list is not in GROUP BY clause .......... 解决
开发语言·学习·php
小牛itbull22 分钟前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i30 分钟前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_33 分钟前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
闲暇部落33 分钟前
‌Kotlin中的?.和!!主要区别
android·开发语言·kotlin
GIS瞧葩菜42 分钟前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript
chnming19871 小时前
STL关联式容器之set
开发语言·c++
熬夜学编程的小王1 小时前
【C++篇】深度解析 C++ List 容器:底层设计与实现揭秘
开发语言·数据结构·c++·stl·list
zhang-zan1 小时前
nodejs操作selenium-webdriver
前端·javascript·selenium
GIS 数据栈1 小时前
每日一书 《基于ArcGIS的Python编程秘笈》
开发语言·python·arcgis