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.1var
var
是 JavaScript 中传统的报警方式,在 ES6 引入let
和const
之前广泛使用。var
有一些特点:
- 作用域:
var
声明的变量是函数作用域,如果在函数外部声明,则为全局作用域,而不是块级作用域。 - 提升:
var
声明的变量会被提升到作用域的顶部,但变量不会被初始化,只有声明才会被提升。
注意:由于var
是函数作用域(现代非块级作用域),它可能导致意外的覆盖和错误,因此建议在 JavaScript 开发中避免使用var
。
1.2let
let
是 ES6 引入的用于报表报警的新方式。相比之下var
,let
提供了块作用域和更加合理的行为。
- 作用域:
let
具有块级作用域,它只在其所在的代码块内有效。 - 提升:
let
变量会被提升,但在声明之前访问会导致ReferenceError(暂时性死区)。
1.3const
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
,,,等)。这种命名不利于理解代码的含义。y
z
i
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⽂档中加⼊如下代码
<!-- 引入 jQuery 最新版本 -->
<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. 前端开发对于后端开发⼈员⽽⾔不是很重要,不必花费过多时间在这个上⾯.达到借助⽹络能阅读代 码的⽔平即可.