前端基础知识之“初识JavaScript”

“这里是offer学堂，帮你轻松拿offer”

嗨~ 今天的你过得还好吗？

三月人间，乍然春风起，

吹得满山樱花遍地，如此美景，

小伙伴们都出去游玩了吗？

前面小编分享了HTML和css的基础知识，

今天接着说说

JavaScript是什么？

- 2023.03.09 -

一、JavaScirpt简介

1. 什么是JavaScirpt

JavaScript ( JS ) 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js、 Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

2. JavaScript的组成部分

• ECMAScript，描述了该语言的语法和基本对象。
• 文档对象模型（DOM），描述处理网页内容的方法和接口。
• 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

3.浏览器执行JS简介

浏览器分成两部分：渲染引擎和 JS 引擎

• 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit。
• JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8。

浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以 JavaScript 语言归为脚本语言，会逐行解释执行。

4.ECMAScript

ECMAScript 是由ECMA 国际（ 原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。

ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

5.DOM文档对象模型

文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

6.BOM浏览器对象模型

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

二、JavaScirpt初体验

1.行内式JS

• 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性)，如： onclink
• 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号
• 可读性差，在 HTML 中编入 JS 大量代码时，不方便阅读
• 特殊情况下使用

2.内嵌式JS

• 可以将多行JS代码写到<script>标签中
• 内嵌 JS 是学习时常用的方式

3.外部JS

• 利于HTML页面代码结构化，把单独JS代码独立到HTML页面之外，既美观，又方便
• 引用外部JS文件的script标签中间不可以写代码
• 适合于JS代码量比较大的情况

三、JavaScirpt基础语法

1.标识符

所谓标识符，就是指给变量、函数、属性或函数的参数起名字。 标识符可以是按照下列格式规则组合起来的一或多个字符：

• 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
• 其它字符可以是字母、下划线、美元符号或数字。
• 按照惯例，ECMAScript 标识符采用驼峰命名法。
• 标识符不能是关键字和保留字符。

2.字面量和变量

字面量实际上就是一些固定的值，比如：1、2 、3、true、false、null、NaN、“hello”，字面量都是不可以改变的，由于字面量不是很方便使用，所以在JavaScript中很少直接使用字面量，使用的而是变量。

变量的作用是给某一个值或对象标注名称。比如我们的程序中有一个值123，这个值我们是需要反复使用的，这个时候我们最好将123这个值赋值给一个变量，然后通过变量去使用123这个值。

3.数据类型

数据类型决定了一个数据的特征，比如：123和”123”，直观上看这两个数据都是123，但实际上前者是一个数字，而后者是一个字符串。对于不同的数据类型我们在进行操作时会有很大的不同。

JavaScript中一共有5种基本数据类型：

• 字符串型（String）
• 数值型（Number）
• 布尔型（Boolean）
• undefined型（Undefined）
• null型（Null）

这5种之外的类型都称为Object，所以总的来看JavaScript中共有六种数据类型。

4.强制类型转换

强制类型转换指将一个数据类型强制转换为其它的数据类型。一般是指，将其它的数据类型转换为String、Number、Boolean。

5.运算符

运算符也叫操作符，通过运算符可以对一个或多个值进行运算并获取运算结果。比如：typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回（number string boolean undefined object）

y=5，下面的表格解释了这些算术运算符：

x=5，下面的表格解释了比较运算符：

x=10 和 y=5，下面的表格解释了赋值运算符：

6.代码块

代码块是在大括号 {} 中所写的语句，以此将多条语句的集合视为一条语句来使用。

7.条件语句

条件语句是通过判断指定表达式的值来决定执行还是跳过某些语句，最基本的条件语句：

• if…else
• switch…case

8.循环语句

循环语句和条件语句一样，也是基本的控制语句，只要满足一定的条件将会一直执行，最基本的循环语句：

• while
• do…while
• for

四、JavaScirpt常用对象

1.数组对象

数组也是对象的一种，数组是一种用于表达有顺序关系的值的集合的语言结构，也就是同类数据元素的有序集合。

数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据。但是在JavaScript中是支持数组可以是不同的元素，这跟JavaScript的弱类型有关。

2.函数对象

call()和apply()这两个方法都是函数对象的方法，需要通过函数对象来调用，当对函数调用call()和apply()都会调用函数执行，在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this，call()方法可以将实参在对象之后依次传递，apply()方法需要将实参封装到一个数组中统一传递。

call()方法演示：

apply()方法演示：

3.Date对象

在JavaScript中使用Date对象来表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间。

4.Math对象

Math和其它的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法。

5.String对象

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象。

• String()：可以将基本数据类型字符串转换为String对象
• Number()：可以将基本数据类型的数字转换为Number对象
• Boolean()：可以将基本数据类型的布尔值转换为Boolean对象

但是注意：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果。

6.RegExp对象

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式，来检查一个字符串是否符合规则，获取将字符串中符合规则的内容提取出来。

今天的分享就到这里了，想学习更多前端知识，记得常来看我！

我们下期再见！

END

文案编辑|云端学长

文案配图|云端学长

内容由：云端源想分享