当前位置：首页 > news >正文

前端速通（JavaScript）

news 来源：原创 2025/8/2 19:56:49

1 初识JavaScript

1 JavaScript是什么

JavaScript 是一种高层的、轻量级的、解释型的编程语言，最初由 Netscape 公司于 1995 年开发。它的特点包括：

动态性：JavaScript是动态类型语言，允许开发者灵活地操作数据。
跨平台：通过浏览器运行，与网络关联。
面向对象与函数式编程：支持面向对象和函数式编程范式。
核心用途：通常用于实现交互式网页功能，例如表单验证、动态内容更新和动画效果。

虽然名字里有“Java”，但它和Java没有直接关系。

2. JavaScript 的发展历史

JavaScript之⽗布兰登.艾奇(BrendanEich)

JavaScript最初只是为了完成简单的表单验证(验证数据合法性),结果后来不⼩⼼就⽕了.

1. 1994年，⽹景公司（Netscape）发布了Navigator浏览器0.9版。这是历史上第⼀个⽐较成熟的⽹络浏览器，轰动⼀时。但是，这个版本的浏览器只能⽤来浏览，不具备与访问者互动的能⼒.⽹景公司急需⼀种⽹⻚脚本语⾔，使得浏览器可以与⽹⻚互动

2. 1995年Sun公司将Oak语⾔改名为Java,正式向市场推出,并⼤肆宣传:⼀次编写，到处运⾏.⽹景公司⼼动了，决定与Sun公司结成联盟。它允许Java程序以applet（⼩程序）的形式，直接在浏览器中运⾏,甚⾄考虑直接将Java作为脚本语⾔嵌⼊⽹⻚,但是这样会让HTML⽹⻚太复杂了,不得不放弃

3. 1995年4⽉,BrendanEich⼊职了⽹景公司

4. 1995年5⽉，⽹景公司做出决策，决定开发⼀⻔新的语⾔,新的语⾔要"看上去与Java⾜够相似"，但是⽐Java简单.BrendanEich被指定为该语⾔的设计师.

5. 对Java⼀点兴趣都没有的BrendanEich,为了应付公司安排的任务,只⽤10天时间就把Javascript设计出来了.(由于设计时间太短,语⾔的⼀些细节考虑得不够严谨，导致后来很⻓⼀段时间， Javascript写出来的程序混乱不堪)

最初在⽹景公司,该语⾔命名为LiveScript,当时⽹景公司认为,Java作为当时最流⾏的编程语⾔,带有 "Java"的名字有助于这⻔新⽣语⾔的传播,将LiveScript命名为JavaScript. 其实Java和JavaScript之间的语法⻛格相去甚远.

3. JavaScript与HTML、CSS的关系

JavaScript、HTML 和 CSS 是 Web 开发的三大基础技术，虽然它们各自有不同的职责，但它们紧密合作，共同构建网页应用：

HTML：HTML负责网页的结构，它通过标记语言定义了网页的元素和内容，如文本、图片、表单、按钮等。HTML提供了网页的结构和结构，但不涉及表现和行为。
CSS：CSS用于控制网页的样式和布局，定义了网页元素的外观，例如颜色、字体、边距、位置等。它负责美化网页，使网页更加美观。
JavaScript：JavaScript使网页变得动态化和交互性强。它负责网页行为的控制，例如响应用户的点击、提交表单、显示或内容、修改HTML和CSS属性等。

关键：

HTML + CSS主要定义网页的内容和外观。
JavaScript则通过操作HTML和CSS，使网页具备动态性和交互性。

例如，当用户点击按钮时，JavaScript 会通过操作 DOM（文档对象模型）来生成 HTML 结构或 CSS 样式，改变网页的显示或执行某些行为。常见的例子有：

在输入用户时，动态验证表单（JavaScript）。
在网页加载时，改变页面的布局和样式（CSS）。
根据用户的点击或滚动等行为，动态更新网页的内容（JavaScript）。

2 JavaScript快速上手

1.环境搭建

在学习JavaScript之前，首先要保证有合适的开发环境：

浏览器：大多数现代浏览器（如Chrome、Firefox、Edge）都内置了JavaScript引擎，可以直接运行JavaScript代码。
开发者工具：浏览器自带的开发者工具可以用来查看和调试JavaScript代码。在Chrome中单击F12或右键选择“检查”即可打开控制台。
编辑器：您可以选择任何代码编辑器，如 Visual Studio Code、Sublime Text 或 Atom，来编写 JavaScript 代码。

2.引⼊⽅式

JS有3种引⼊⽅式，语法如下表格所⽰：

3种引⼊⽅式对⽐:

1. 内部样式会出现⼤量的代码冗余,不⽅便后期的维护，所以不常⽤.(课堂上为了⽅便讲解,使⽤该⽅式)

2. ⾏内样式,只适合于写简单样式.只针对某个标签⽣效.缺点是不能写太复杂的jS.

3. 外部样式，html和js实现了完全的分离,企业开发常⽤⽅式.

示例：

结果：

2.基础语法

创建变量(变量定义/变量声明/变量初始化),JS声明变量有3种⽅式

注意事项:

1. JavaScript是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态),⽐如:

随着程序的运⾏,变量的类型可能会发⽣改变.(弱类型)

Java是静态强类型语⾔,在变量声明时,需要明确定义变量的类型.如果不强制转换,类型不会发⽣变化.

1.声明变量的方式

在 JavaScript 中，变量的声明有清晰的方式：var、let和const。这种清晰方式的主要区别在于域、可变性和提升行为。

1.1`var`

var是 JavaScript 中传统的报警方式，在 ES6 引入let和const之前广泛使用。var有一些特点：

作用域：var声明的变量是函数作用域，如果在函数外部声明，则为全局作用域，而不是块级作用域。
提升：var声明的变量会被提升到作用域的顶部，但变量不会被初始化，只有声明才会被提升。

注意：由于var是函数作用域（现代非块级作用域），它可能导致意外的覆盖和错误，因此建议在 JavaScript 开发中避免使用var。

1.2`let`

let是 ES6 引入的用于报表报警的新方式。相比之下var，let提供了块作用域和更加合理的行为。

作用域：let具有块级作用域，它只在其所在的代码块内有效。
提升：let变量会被提升，但在声明之前访问会导致ReferenceError（暂时性死区）。

1.3`const`

const也是 ES6 引入的，用于声明常量。const和let一样，具有块级作用域。

作用域：和let一样，const也有块级作用域。
不可变性：const声明的变量必须在声明时初始化，并且之后无法修改其值（对于基本数据类型）。对于引用类型（如对象或队列），虽然无法重新赋值，但对象的属性和队列的元素是可以的修改的。

JavaScript 变量名的命名规则

1.基本命名规则

JavaScript 对变量名的命名有一些基本规则，必须遵循：

符号名只能包含字母、数字、下划线（_）和美元符号（$）。
变量名不能以数字开头。比如，1variable是无效的，variable1是有效的。
变量名不能是 JavaScript 保留的关键字。比如，var、let、if、function等都是保留字，不能作为变量名使用。
JavaScript区分大小写，例如，myVariable和myvariable是两个不同的变量。

2.命名建议

为了让变量名称更加易读和有意义，推荐遵循以下命名规范：

2.1驼峰命名法（camelCase）

JavaScript 中常用驼峰命名法（CamelCase）来命名变量和函数。
驼峰命名法是指第一个单词小写，后续单词的首字母大写，且不使用下划线或空格。

2.2常用量命名

常量通常使用全大写字母，并用下划线分隔单词。
使用const声明常量时，推荐该类命名方式，其次区分常量和普通变量。

2.3描述性命名

指标名称描述应简洁且能够清楚地说明其用途。
尽量避免使用单个字母作为标记名，特别是在大型应用中。除非是循环计数器等场景。

2.4避免使用单字符命名

除非是在循环或者非常小的函数中，避免使用少量的变量名（如x，，，等）。这种命名不利于理解代码的含义。yzi

3. + 表⽰字符串拼接,也就是把两个字符串⾸尾相接变成⼀个字符串.

4. \n 表⽰换⾏

2 数据类型

虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为：原始类型和引⽤类型，具体有如下类型

使⽤typeof函数可以返回变量的数据类型

代码⽰例:

3.运算符

代码⽰例:

3.JavaScript对象

1. 数组

1 数组定义

创建数组有两种⽅式

1. 使⽤new关键字创建

2. 使⽤字⾯量⽅式创建[常⽤]

注意:JS的数组不要求元素是相同类型. 这⼀点和C,C++,Java等静态类型的语⾔差别很⼤.但是Python,PHP等动态类型语⾔也是如此.

2 数组操作

1.数组的索引

2. 数组常用方法

1. 读:使⽤下标的⽅式访问数组元素(从0开始) console.log(）

2. 增:通过下标新增,或者使⽤push进⾏追加元素

1.使用数组索引下标填写：

2.使⽤push进⾏追加元素

3. 改:通过下标修改

4. 删:使⽤splice⽅法删除元素

3.遍历数组

可以使用for循环或者forEach方法来检索传输中的元素。

注意:

1. 如果下标超出范围读取元素,则结果为undefined

2. 不要给数组名直接赋值,此时数组中的所有元素都没了. 相当于本来arr是⼀个数组,重新赋值后变成字符串了.

2.函数

1 语法格式

• 函数定义并不会执⾏函数体内容,必须要调⽤才会执⾏.调⽤⼏次就会执⾏⼏次.

• 调⽤函数的时候进⼊函数内部执⾏,函数结束时回到调⽤位置继续执⾏.可以借助调试器来观察.

• 函数的定义和调⽤的先后顺序没有要求.(这⼀点和变量不同,变量必须先定义再使⽤)

2.匿名函数和箭头函数（ES6+）

匿名函数：没有函数名的函数。

箭头函数：简单的函数表达式，ES6 引入。

3. 对象

在JS中,字符串,数值,数组,函数都是对象. 每个对象中包含若⼲的属性和⽅法.

• 属性:事物的特征.

• ⽅法:事物的⾏为. JavaScript的对象和Java的对象概念上基本⼀致.只是具体的语法表项形式差别较⼤.

1. 使⽤字⾯量创建对象[常⽤]

使⽤{}创建对象

• 使⽤{}创建对象

• 属性和⽅法使⽤键值对的形式来组织.

• 键值对之间使⽤,分割.最后⼀个属性后⾯的,可有可⽆

• 键和值之间使⽤:分割.

• ⽅法的值是⼀个匿名函数.

2.使⽤对象的属性和⽅法:

Object.keys()：返回对象的所有键（属性名）。
Object.values()：返回对象的所有值。
Object.entries()：返回对象的所有键值对备份。

3. 使⽤构造函数创建对象

注意:

• 在构造函数内部使⽤this关键字来表⽰当前正在构建的对象.

• 构造函数的函数名⾸字⺟⼀般是⼤写的.

• 构造函数的函数名可以是名词.

• 构造函数不需要return

• 创建对象的时候必须使⽤new关键字. this相当于"我"

4 JQuery

W3C标准给我们提供了⼀系列的函数,让我们可以操作:

• ⽹⻚内容

• ⽹⻚结构

• ⽹⻚样式

但是原⽣的JavaScript提供的API操作DOM元素时,代码⽐较繁琐,冗⻓.我们学习使⽤JQuery来操作⻚⾯对象.

jQuery是⼀个快速、简洁且功能丰富的JavaScript框架,于2006年发布.它封装JavaScript常⽤的功能代码,提供了简洁⽽强⼤的选择器和DOM操作⽅法.使⽤JQuery可以轻松地选择和操作HTML元素，从⽽减少了开发⼈员编写的代码量，提⾼了开发效率,它提供的API易于使⽤且兼容众多浏览器，这让诸如HTML⽂档遍历和操作、事件处理、动画和Ajax操作更加简单.JQuery对于事件的处理也进⾏了简化,提供了⼀个简单的API来绑定、触发和处理事件，使开发⼈员能够更⽅便地处理各种交互⾏为.

1. jQuery 的核心特点

简洁的语法：通过 jQuery，很多常见的操作变得非常简单。比如，一些元素、修改元素内容、处理事件等，往往只需要几行代码。
跨浏览器兼容性：jQuery 可以处理不同浏览器（如 Chrome、Firefox、IE 等）之间的差异，让你不必再关心不同浏览器的行为。
链式调用：jQuery支持链式调用（method chaining），使得多个方法可以在同一行代码中连续执行，提升代码的简洁度和互补性。
插件支持：jQuery拥有丰富的插件生态，可以轻松扩展功能，如表单验证、图片轮播、日期选择等。
支持 Ajax：通过 jQuery 提供的 API，进行 Ajax 请求变得更加简单，无需手动编写复杂的 XMLHttpRequest。

2. 引⼊依赖

使⽤JQuery需要先引⼊对应的库在使⽤jQueryCDN时，只需要在HTML⽂档中加⼊如下代码

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

从本地文件引入 jQuery（如果你已经下载了 jQuery 库）：

<script src="path/to/jquery.min.js"></script>

参考地址:jQuery CDN

其中， src 属性指明了JQuery库所在的URL.这个URL是CDN(内容分发⽹络)服务提供商为jQuery库提供的⼀个统⼀资源定位符. 如果需要使⽤其他版本的JQuery,可以在官⽹进⾏下载

Jquery官⽅共提供了4种类型的JQuery库

uncompressed:⾮压缩版本(易读,但是⽂件较⼤,传输速度慢)

minified:压缩版(不易读,⽂件⼩,性能⾼,开发中推荐)

slim:精简瘦⾝版,没有Ajax和⼀些特效 slimminified:slim的压缩版

开发时,建议把JQuery库下载到本地,放在当前项⽬中.引⼊外部地址,会有外部地址不能访问的⻛险. 下载⽅式:

1. 通过浏览器访问上述连接

2. 右键->另存为....保存到本地,放在项⽬中即可.

也可以从其他CDN上下载引⽤JQuery

⽐如:

3. jQuery 基本语法

jQuery 的基本语法形式为：

$(selector).action();

$：是 jQuery 的标志符号，实际上是jQuery函数的别名。
选择器：选择器，指定你要操作的 HTML 元素。
action()：你希望对这些元素执行的操作，如点击、修改文本等。

JQuery的代码通常都写在 documentready函数中.

document：整个⽂档对象,⼀个⻚⾯就是⼀个⽂档对象,

使⽤document表⽰. 这是为了防⽌⽂档在完全加载（就绪）之前运⾏jQuery代码，即在⽂档加载完成后才可以对⻚⾯进⾏操作。

如果在⽂档没有完全加载之前就运⾏函数，操作可能失败

点击后：

给按钮添加了click事件,点击后元素消失. 简洁写法:

4 JQuery选择器

我们通过JQuery选择器来选择⼀些HTML元素.然后对元素进⾏操作. JQuery选择器基于已经存在的CSS选择器,除此之外,还有⼀些⾃定义的选择器. jQuery中所有选择器都以$ 开头：$().

5 JQuery事件

JS要构建动态⻚⾯,就需要感知到⽤⼾的⾏为. ⽤⼾对于⻚⾯的⼀些操作(点击,选择,修改等)都会在浏览器中产⽣⼀个个事件,被JS获取到,从⽽进⾏更复杂的交互操作. 浏览器就是⼀个哨兵,在侦查敌情(⽤⼾⾏为).⼀旦⽤⼾有反应(触发具体动作),哨兵就会点燃烽⽕台的狼烟(事件),后⽅就可以根据狼烟来决定下⼀步的对敌策略.

事件由三部分组成:

1. 事件源:哪个元素触发的

2. 事件类型:是点击,选中,还是修改?

3. 事件处理程序:进⼀步如何处理.往往是⼀个回调函数.

例如:某个元素的点击事件:

其他常见事件：

5 操作元素

1 获取/设置元素内容三个简单的获取元素内容的JQuery⽅法

这三个⽅法即可以获取元素的内容,⼜可以设置元素的内容.

有参数时,就进⾏元素的值设置,没有参数时,就进⾏元素内容的获取.

代码⽰例: 获取元素内容:

设置内容

text(value)：设置元素的纯文本内容。
html(value)：设置元素的HTML内容。

6.获取/设置元素属性

jQuery 提供了attr()操作 HTML 元素的属性的方法。

使用attr(attributeName)来获取属性值。

使用attr(attributeName, value)设置属性值。

使用removeAttr(attributeName)删除属性。

7. 添加元素

添加HTML内容

1.append():在被选元素的结尾插⼊内容

2.prepend():在被选元素的开头插⼊内容

3.after():在被选元素之后插⼊内容

4.before():在被选元素之前插⼊内容

8.删除元素

删除元素和内容，⼀般使⽤以下两个jQuery⽅法：

1.remove():删除被选元素（及其⼦元素）

2.empty():删除被选元素的⼦元素。

5.总结

1. HTML是⼀种超⽂本标记语⾔,主要⽤于⻚⾯内容的显⽰和排版.如果需要更漂亮的样式展⽰和⻚⾯效果,需要搭配CSS和JavaScript来使⽤

2. 学习HTML主要是学习标签,HTML的标签特别多,了解基本语法即可

3. CSS重点是学习CSS的选择器使⽤

4. JavaScript是⼀个脚本语⾔,和Java没有关系.JQuery是⼀个JavaScript框架,使⽤JQuery可以轻松地选择和操作HTML元素,提⾼我们的开发效率.

5. 前端开发对于后端开发⼈员⽽⾔不是很重要,不必花费过多时间在这个上⾯.达到借助⽹络能阅读代码的⽔平即可.