学习web前端三大件之JavaScript篇

泉缘泉 · 2024-10-23 15:55:22

#1024程序员节｜征文#

JavaScript是一种动态的编程语言，广泛应用于网页开辟中，重要用于加强网页的交互性和动态性。作为Web开辟的核心技术之一，它与HTML和CSS共同协作，HTML负责定义网页的内容结构，CSS处置惩罚样式和结构，而JavaScript则控制网页的举动和交互。
阐明：整篇文章采用自主编辑，原创撰写，引用内容会在末端以链接、标注方式题注，重要工具采用VScode工具

目录
一、JavaScript定义
二、JavaScript作用
页面殊效
表单验证
数据交互
服务端编程
三、JavaScript构成
ECMAScript基础语法
Web APIs（W3C）
DOM
BOM
四、JavaScript书写位置
内联JavaScript
内部JavaScript
外部JavaScript
五、JavaScript注释
六、JavaScript输入输出语法
输出语法
输入语法
七、字面量
八、变量
声明变量并赋值
变量命名的规则与规范
九、常量
常量声明
十、数据类型
基本数据类型
引用数字类型
检测数据类型
数据类型转换
隐式转换
显式转换
十一、运算符
赋值运算符
一元运算符
for循环的后置递增
for循环的前置递增
比较运算符
逻辑运算符
运算符优先级
十二、语句
表达式与语句
三大流程控制语句
次序结构
分支结构
循环结构
十三、数组
声明方法
下标
遍历数组
操作数组
十四、冒泡排序
十五、函数
声明函数
调用函数
传参
声明函数
调用函数
形参&实参
参数默认值
函数返回值
作用域
全局作用域
局部作用域
根据作用域的不同还分为全局变量与局部变量
匿名函数
十六、短路运算
十七、对象
创建对象
使用对象
遍历对象
内置对象

一、JavaScript定义

学习JavaScript前首先我们要相识JavaScript毕竟是什么，他和HTML和CSS又差在哪？
官方定义是JavaScript 是一种高级的、表明执行的编程语言，是一种运行在客户端（欣赏器）的编程语言（脚本语言）
简单来说，JavaScript是运行在客户端并且可以实现页面动态交互的一种脚本编程语言
可以说将一个网页比喻成一个人，html就是人的骨架，css就是人体、人肉、颜值，而JavaScript就是人的灵魂，只有一个人有了灵魂才可以驱策骨架举措思考等等举动
二、JavaScript作用

那么JavaScript有什么作用呢？又可以实现什么样的效果呢？
页面殊效

监听用户的一些举动让网页做出对应的反馈，让页面实现一些动态的殊效，如轮播图等等变乱
表单验证

针对表单数据合法性举行判断，当我们在表单中输入信息时可以通过JavaScript来率先认证填入的数据是否符合规则
数据交互

获取后台的数据，渲染到前端页面，前端岗位与后端岗位相毗连的目的，实现后端数据渲染到前端页面中
服务端编程

node.js
三、JavaScript构成

JavaScript是由什么构成的呢？我们该怎么去学习呢？

ECMAScript基础语法

规定了js基础语法核心，比如变量、分支语句、循环语句、对象等等
Web APIs（W3C）

API , 全称 " Application Programming Interface " , 应用程序编程接口 , 是语言厂商或SDK厂商预先定义一些接口函数 , 提供给开辟者调用该函数用以开辟应用程序 , 开辟者可以很轻松的实现某种功能 , 开辟者无需访问源码或理解内部细节
DOM

全称Document Object Model,文档数据模型，提供了对HTML和XML文档的体现和修改能力，像操作文档，比如对页面元素举行移动、大小、添加删除等操作
BOM

全称Browser Object Model,欣赏器数据模型，提供了与欣赏器窗口及其组件举行交互的对象和方法，像操作欣赏器（控制欣赏器的前进与后退），比如页面弹窗，检测页面窗口宽度、储存数据到欣赏器等等
四、JavaScript书写位置

知道了这么多那么我们如何引入JavaScript文件呢？如果实现JavaScript的效果？
内联JavaScript

代码写在标签内部
内部JavaScript

直接写在html文件里，并用script包裹

<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
</script>
</body>

复制代码

外部JavaScript

代码写在以.js末端的文件中，并在body标签中通过src引用

<head>
<link rel="stylesheet" href="./index.js">
</head>

复制代码

五、JavaScript注释

在JavaScript中注释方法通常由单行注释与块注释
单行注释：使用//来实现

// var box = document.querySelector('.box');

复制代码

块注释：使用/* 注释代码 */来实现

/*
var box = document.querySelector('.box');
var arr = [];
*/

复制代码

六、JavaScript输入输出语法

在JavaScript中我们如何自定义语法的输入和输出呢？
输出语法

向body内输出内容，输出到网页页面上，作为页面元素出现

document.write('要输出的内容')

复制代码

页面弹出警告对话框

alert('要输出的内容')

复制代码

输出到控制台，供程序员使用

console.log('要输出的内容')

复制代码

输入语法

显示一个对话框，包含提示文字信息与用户输入框，用户可以自行输入

prompt('要提示输入的内容')

复制代码

七、字面量

在盘算机科学中，字面量是在盘算机中形貌事与物，包括数字字面量、字符串字面量、数组字面量、对象字面量
八、变量

在任何语法使用时，都要采用一个容器来盛放当前操作，以使后操作方便，如许我们就需要声明一个变量来实现，变量是盘算机储存数据的容器，用来存放数据
声明变量并赋值

let 变量名 = 值

复制代码

将值直接赋给变量名，叫做变量初始化
变量命名的规则与规范

规则：不符合规范，严肃禁止

不能用关键字
只能用下划线、字母、数字、$构成，且数字不能开头
严格区分大小写
规范：符合规范，但是不合适

小驼峰命名法
九、常量

当某个变量永久不会改变的时候，就可以用const来声明
常量声明

const 变量名 = 值

复制代码

十、数据类型

在我们使用数据的时候，数据类型众多，那么我们如何区分数据的类型？以及在类型之间互相的转化呢？
基本数据类型

String 字符串类型
通过单引号（）、双引号（）、反引号（）包裹的数据都叫字符串，引号之间可以互相嵌套，但是不可以嵌套自己
Number 数字类型
在数学中学到的数字，即正数、负数、小数统一称为数字类型，可以举行算术运算；NAN体现一个盘算错误
Boolean 布尔类型
体现肯定与否定的设置，只有true和false
Undefined 未定义类型
只声明一个变量，不赋值的情况下，变量只有一个值为undefined
Null 空类型
体现变量赋值了，但是内容为空
引用数字类型

Object 对象类型：Array数组、Function方法/函数
检测数据类型

使用‘typeof 被检测的变量名’的方法来检测数据的类型

console.log(typeof age)

复制代码

这里的代码指的是在工作台中输入‘age’数据的类型，你会在工作台中找到上述基本数据类型来对应
数据类型转换

隐式转换

运算符被执行时，系统内部自动将数据转换
显式转换

自己写代码告诉系统转化成什么
转化为数字类型

如果字符串内容里有非数字，转换失败效果为NAN

Number

复制代码

只保留整数，有数字则逼迫转化成整数数字，只返回字符串之前的数字

ParseInt

复制代码

可保留小数

ParseFloat

复制代码

转化为字符串类型

String

复制代码

转化为布尔类型

boolean

复制代码

只有0,NAN,''，null，undefined才气被转化为false,其余的只要有值就被转化为true
十一、运算符

在JavaScript语句中，通常运用到数据类型之间的盘算等等，这时候就要使用到运算符，来使数据之间奇妙地联合起来
赋值运算符

对变量举行赋值的运算符，将等号右边的赋值给左边的
=：此处并不是数学意义上的即是，而是将右边的值赋值给左边的值
一元运算符

自增运算，某些时候，我们需要数据自己举行增加运算，这就是自增运算。
for循环的后置递增

先运算，后自加
i++：i = i + 1，i数据不断自增
i--：i = i - 1，i数据不断自减
for循环的前置递增

先自加，再使用。
++i、--i
本质上与自增自减并无差异，但是当数据被赋值于一个变量时，后置递增则为数据内部先赋值给左边的变量，之后再自增自减。而前置递增则为先自增自减，再赋值给变量
i=1：后置递增，先进入变量数值为1，之后是2、3，前置递增，先进入变量数值为2，之后是3、4
比较运算符

比较两个数据的大小，是否相等，一样平常用来筛选价格
>，<，>=，<=，==，===，!==
==：判断，会隐式转换，不会判断数据类型
===：全等，不会隐式转换，会判断数据类型，常用
所有用果只会返回布尔类型，即ture或false
逻辑运算符

确定变量或者值之间的逻辑关系，在确定两个运算之间的关系时，使用逻辑运算符来达到效果，该运算符重要追求运算符两边的真假性，在做后续操作
&&（并且）：一假则假
||（或者）：一真则真
!（非）：真变假，假变真
运算符优先级

小括号>一元运算符>算数运算符>关系运算符>相等运算符>逻辑运算符>赋值运算符>逗号运算符
十二、语句

在我们之前所讲的都是一段一段的表达式，而若想真正的完整执行一个操作就要通过多个表达式来形成一个语句实现
表达式与语句

表达式输出的是一个值，而语句指一段可以执行的代码，表达式可被求值，以是它可以写在赋值语句的右侧，语句不肯定有值，比如alert（） for和break等语句就不能被赋值
三大流程控制语句

次序结构

从上往下执行的很简单的代码结构，一行一行执行
分支结构

根据条件选择执行代码，当变乱需要有条件的出现，就要用到分支结构，达到条件应该执行那些语句，没有达到条件又应该执行那些语句
if分支语句

单分支

if (条件) {满足条件要执行的代码}

复制代码

双分支

if (条件) {满足条件要执行的代码} else {不满意条件执行的代码}

复制代码

多分支

if (条件1) {代码1} else if (条件2) {代码2} else if (条件3) {代码3} else {代码n}

复制代码

三元运算符

只是跟双分支一样实现效果的更简单的方法

条件？满足条件执行的代码：不满足条件执行的代码

复制代码

switch语句

一样平常用于等值判断，不适合于区间判断，判断时，如果判断效果就是这个值，不是其他值，也不是区间，那么就叫等着判断

switch (条件) {
case 值：
执行语句
break ；
case 值：
执行语句
break ；
default ；
执行语句
} ;

复制代码

循环结构

代码重复执行，有些时候，我们需要代码重复的执行，不断的运算，这是就要用循环结构
while循环

while (循环条件) {要重复循环的语句}

复制代码

循环退出

continue：跳出单个循环，继续执行循环体
break：满意循环条件，则跳出整个循环
for循环

重复循环执行代码，与i连用，最常用

for（变量起始量；终止条件；变量变化）{ }

复制代码

循环嵌套

一个for循环嵌套另一个for循环，一样平常只嵌套两个即可，不必套用太多

for（变量起始量；终止条件；变量变化）{
for（变量起始量；终止条件；变量变化）{
执行语句
}
}

复制代码

十三、数组

在数据类型中我们学到了对象类型，其中就包括数组，而数组是一种可以按照次序保存的数据类型，可以存恣意的数据，包括字符串、数值乃至是另一个数组
声明方法

通常使用[]方法来存放

let 数组名 = [数据1，数据2，数据3]

复制代码

let 数组名 =new Array (数据1，数据2，数据3)

复制代码

第二种只不外是声明new数组，不常用
下标

编号，数据1为编号0，注意在数组中，我们以是为的第一个数据，其实在数组中编号为0，以是在遍历数组（取用的时候）通常减一使用
遍历数组

用循环把数组中每个元素都访问到，一样平常会用for循环遍历，在此例子中数组名即为第i个数据

for(let i=0;i<数组名.length;i++){数组名[i]}
复制代码
操作数组

既然我们认识了数组，那么我们就要对数组内部的数据举行实时的操作，重要又增、删、改、查
增

push是尾部增加

数组名.push(新增的内容，新增的内容)
复制代码
unshift是头部增加

数组名.unshift(新增的内容，新增的内容)
复制代码
删

删除末了一个元素

数组名.pop（）
复制代码
删除第一个元素

数组名.shift（）
复制代码
打印删除的元素，但已经被删除了

console.log(数组名.pop())
复制代码
数组名.splice(1)从第一个开始都删除掉，可以通过splice既能实现删除，也能实现增加

数组名.splice(从哪一个元素开始，删除几个元素，新增的元素)
复制代码
改

数组下标=新值
复制代码
查

如果元素在数组中，则返回下标，如果元素不在，则返回-1

数组名.indexOf（要查找的元素）
复制代码
数组去重

即去除重复数据，在新数组中查找当前正在循环的元素，如果在新数组中，则返回下标，不在则返回-1，不在新数组中的话，则push到新数组
十四、冒泡排序

是一种简单的排序算法
十五、函数

当其他的操作封装完毕了，那么当我们重复调用某一操作时，还需要不断重复冗杂的代码吗？这时，函数就出现了！
函数是执行特定任务的代码块，把雷同或相似的属性结合起来，通过调用来连续输出，如果不调用不会输出，需要函数，实现代码复用，进步开辟服从
声明函数

function 函数名() {任务代码}
复制代码
调用函数

只需要通过输入函数名后加（）即可

函数名()
复制代码
传参

把要盘算的数字传入到参数内，简单来说，就是函数内部自己声明变量
声明函数

function 函数名(参数列表) {任务代码}
复制代码
调用函数

函数名(传递的参数列表)
复制代码
形参&实参

形参：形式上的参数(参数列表)，可以理解为一个变量，即在函数（）内部声明的变量
实参：实际上调用的参数(传递的参数列表)，即在调用时使用的变量
过多标题：当发生声明的变量的数量大于/小于调用时使用的变量的数量时

形参过多会自动填上undefined
实参过多会自动忽略
参数默认值

用户不输入时，通过给一个默认值来防止出现NAN，我们时常发现有时用户忘记输入数值的时候，为了防止后台内部的瓦解，我们就要自己输入一个默认的固定值

function 函数名(参数列表=默认值) {任务代码}
复制代码
函数返回值

return 函数值
复制代码
return后面的代码都不执行，会立刻结束当前函数，如果不输入内容，则会返回undefined
作用域

指的是变量会作用在哪个范围内
全局作用域

函数外部的作用域，在函数表面定义的变量，在页面的任何地方都可以访问
局部作用域

函数内部的作用域，在函数内部定义的变量，只在{}之中可以访问
根据作用域的不同还分为全局变量与局部变量

全局变量

函数外部的let变量、var、如果声明变量不加关键字，欣赏器解析的时候会自动加上一个var
局部变量

函数内部的let变量
变量访问原则：就近原则

匿名函数

具名函数

函数有自己的名字
匿名函数

没有名字的函数，大多数我们设置的都是匿名函数，然后通过自己定义变量来存放

let fn = function（）{}
fn（）
复制代码
十六、短路运算

固然并且（||）的两个值都为false，但是0是一个更有意义的数值，相当于默认值，左边为true就短路，不会往后面运算
十七、对象

对象数据类型就是一种用来形貌某个事物的无序数据集合，区分数组是有序的数据集合，同样学习方法也和数组一样
创建对象

通常我们将对象命名变量为obj

let obj ={uname：？，age：？，gender：？}
复制代码
属性

在对象内部的数据或者信息叫特性，特性内部由：{属性：属性值；属性：属性值}构成，而一对{属性：属性值}称之为键值对（kay:value）
方法

在对象内部也可以添加一些功能或者举动叫做方法：{函数}，对象方法也可以跟函数一样传递参数
使用对象

学习对象，也要学习使用对象内部的操作，如增、删、改、查
增

对象名称.新的属性名称 = 新的属性值
复制代码
删

delete 对象名称.属性名称
复制代码
改

对象名称.属性名称 = 新的属性值
复制代码
查

对象名.属性名
复制代码
不加引号会当作变量找全局变量

对象名['属性名称']
复制代码
遍历对象

固然我们也要学会通过遍历对象来找到对象内部的个体数据

let (let k in obj){
console.log(k)//打印属性名
console.log(obj[k])//打印属性值
}
复制代码
内置对象

js帮我们写好的一些对象，我们临时不需要相识

JavaScript的学习就到这里，路漫漫其修远兮，吾将上下而求索，前端的旅程还有很远，盼望各人积极保持热爱，奔赴下一处山海。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

学习web前端三大件之JavaScript篇

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块