JS详细简介---前端必看必看必看

许愿呐
111 阅读14分钟

js 的介绍

JS是什么？

  • JS是一种运行在客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能
  • 浏览器就是一种运行JS脚本语言的客户端，JS的解释器被称为JS引擎，为浏览器的一部分

JS简史 ==（JS历史，了解为主，感兴趣的可以多看看）

  • 在WEB日益发展的同时，网页的大小和复杂性不断增加，受制于网速的限制，为完成简单的表单验证而频繁地与服务器交换数据只会加重用户的负担，当时走在技术革新最前沿的 Netscape（网景）公司，决定着手开发一种客户端语言，用来处理这种简单的验证
    • 简单概括：网页的功能越来越多，当时的网速又不行，一些常用的功能用当时的技术处理起来极其复杂，所以 网景 公司需要一个处理这些常用功能对性能影响更低的新语言
  • 1995 年，就职于 Netscape 公司的布兰登·艾奇（Brendan Eich），开始着手为即将于 1996 年 2 月发布的 Netscape Navigator 2 浏览器开发一种名为 LiveScript 的脚本语言。为了尽快完成 LiveScript 的开发，Netscape 与 Sun 公司建立了一个开发联盟。在 Netscape Navigator 2 正式发布前夕，Netscape 为了搭上媒体热炒 Java 的顺风车，临时把 LiveScript 改名为 JavaScript。
    • 简单概括：网景的布兰登·艾奇研发了一个新语言叫做 LiveScript （只用了10天）当时网景和 Sun 公司有合作关系，Sun 公司刚好新推出了一个叫做 Java 的语言很火，网景为了蹭热度就把 LiveScript 改名为了 JavaScript
    • 所以 Java 和 JavaScript 没有关系，完全是两门不同的语言，它们的区别就像：周杰与周杰伦的区别一样
  • 由于 JavaScript 1.0 获得的关注度越来越高，1996 年，微软就在其 Internet Explorer 3 中加入了名为 JScript 的 JavaScript 实现，这意味着有了两个不同的 JavaScript 版本，导致 JavaScript 没有一个标准化的语法和特性。
    • 简单概括：JavaScript 火了后，微软在自家的 IE 浏览器中弄一个和 JavaScript 一样的 JScript，所以就有了两个不同的 JavaScript，导致没有一个标准化的语法和特性了
  • 1997 年，以 JavaScript 1.1 为蓝本的建议被提交给了欧洲计算机制造商协会（ECMA，European Computer Manufacturers Association）。该协会指定 39 号技术委员会（TC39，Technical Committee #39）负责“ 标准化一种通用、跨平台、供应商中立的脚本语言的语法和语义”。TC39 由来自 Netscape、Sun、微软、Borland 及其他关注脚本语言发展的公司的程序员组成，他们经过数月的努力完成了 ECMA-262 标准，定义一种名为 ECMAScript 的新脚本语言。
    • 为了解决上述问题 欧洲计算机制造商协会 ECMA 制定了一个标准，定义了名为 ECMAScript 的新脚本语言，可以把 ECMAScript 是 JS 的一个规范

    ECMAScript 发展过程

  • 1998 年 6 月，ECMAScript 2.0 版发布。
  • 1999 年 12 月，ECMAScript 3.0 版发布，成为 JavaScript 的通行标准，得到了广泛支持。
  • 2007 年 10 月，ECMAScript 4.0 版草案发布，对 3.0 版做了大幅升级。草案发布后，由于 4.0 版的目标过于激进，各方对于是否通过这个标准，发生了严重分歧。以 Yahoo、Microsoft、Google 为首的大公司，反对 JavaScript 的大幅升级，主张小幅改动；以 JavaScript 创造者 Brendan Eich 为首的 Mozilla 公司，则坚持当前的草案。
  • 2008 年 7 月，由于各方分歧太大，争论过于激进，ECMA 开会决定，中止 ECMAScript 4.0 的开发，将其中涉及现有功能改善的一小部分，发布为 ECMAScript 3.1，而将其他激进的设想扩大范围，放入以后的版本，由于会议的气氛，该版本的项目代号起名为Harmony（和谐）。会后不久，ECMAScript 3.1 就改名为 ECMAScript 5。
  • 2009 年 12 月，ECMAScript 5.0 版正式发布。Harmony 项目则一分为二，一些较为可行的设想定名为 JavaScript.next 继续开发，后来演变成 ECMAScript 6；一些不是很成熟的设想，则被视为 JavaScript.next.next，在更远的将来再考虑推出。
  • 2011 年 6 月，ECMAscript 5.1 版发布，并且成为ISO国际标准（ISO/IEC 16262:2011）。
  • 2013 年 3 月，ECMAScript 6 草案冻结，不再添加新功能。新的功能设想将被放到 ECMAScript 7。
  • 2013 年 12 月，ECMAScript 6 草案发布。然后是 12 个月的讨论期，听取各方反馈。
  • 2015 年 6 月 17 日，ECMAScript 6 发布正式版本，即ECMAScript 2015。
  • 从 2015 年以后，ECMA 开始每年发布一个小规模增量更新的升级版本，新版本将按照ECMAScript+年份的形式发布，截止目前，已经发布的版本包含 ECMAScript 2016、ECMAScript 2017、ECMAScript 2018、ECMAScript 2019、ECMAScript 2020、ECMAScript 2021、ECMAScript 2022，后续将继续发布新的版本。

JS 的组成

JavaScript 是由 ECMAScript，DOM 和 BOM 三者组成的。

1. ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型
2. DOM (Document Object Model): 文档对象模型

        * 有一套成熟的可以操作 ==页面元素的 API==，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
        * API: 
            * `application programming interface` 的简写; 
            * 翻译：应用程序编程接口；大白话：`别人写好的代码，或者编译好的程序，提供给你使用，就叫作api`
3. BOM (Browser Object Model): 浏览器对象模型

    *有一套成熟的可以操作 ==浏览器的 API==，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等

js 的三种书写方式

行内式--不推荐, 了解即可, 因为 写法麻烦

```js
<input type="button" value="按钮" onclick="alert('hello world')" />
```

内嵌式--必须书写在 script 标签内部, 大部分时间用这种方式

```js
<body>
    <script>
        alert('hello world')
    </script>
</body>
```
注意
 * JS(script) 推荐书写在 body 标签的 末尾

外链式--在代码量比较多的情况下(也就是在工作的时候) 好处是能够让单一的某一个文件内的代码量更少, 结构更加清晰

```js
<script src="main.js"></script>
```
注意
 * 在某一个位置 新建一个 后缀为 .js 的文件
 * 在 html 文件中 通过 src 属性, 引入刚才书写的 .js 文件

弹框

onclick 在 鼠标单击 元素的时候 会执行 alert('hello world') 打开一个 弹窗框 弹出框内部的文本为 小括号内 引号包裹的内容

例如：onclick="alert('123')"

输入、打印、

console.log(box) 是在控制台里查看

例如：image.png

js 定义变量

什么是变量？

  • 变量是计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据；

    • 翻译为大白话，我有一个东西需要暂时存储起来，比如说就是一个数字 100，我把它存放到了变量 a 中，我后续想要使用他的时候就可以直接通过变量 a 获取到数字 100

  • 变量其实就相当于一个容器，内部可以存储任意类型的数据，使用变量时，用的是内部存储的数据。

    为什么要定义变量？

使用变量可以方便的获取或者修改内存中的数据

如何定义变量

使用一个 var 的关键字进行定义，后面必须加一个空格，空格后面自定义变量名

如何创建一个变量?

需要借助一个 JS 提供的关键字 var 语法：var 变量的名字

var a;
var b;
var c;

变量赋值

  • 变量定义之后，初始时没有进行赋值，内部有一个默认存储的值叫 undefined(未定义) 表示内部未赋值，但可以存储数据了------》只定义了变量 但是没有赋值的时候 此时变量的值为 undefined
  • 变量赋值的方式：通过等号 = 赋值，等号右边的值赋值给左边的变量 ==（等号在 JS 中叫做 赋值号；书写时，等号 = 两侧习惯书写一个空格）==
  • 赋值号的作用, 将符号右边的内容(值) 保存在 符号左边的 变量中
// 变量定义
var a;
// 变量赋值
a = 1;
// 变量定义并赋值
var b = 2;

变量理解案例

  1. 在 JS 中还有一种方式 能够更简单的书写变量

     * 1. 办理一张银行卡, 并且 向银行卡内存钱
 * 2.(创建一个变量, 并直接向变量赋值)

变量交换案例

  1. 交换变量, 需求: 交换两个变量所保存的值

image.png

变量命名规则（必须遵守，不遵守会报错）

  • 由字母、数字、下划线、$符号组成，不能以数字开头
  • 字母区分大小写
  • 不能是关键字和保留字
    • 关键字指的是js中有特殊功能的小词语，比如var、for等
    • 保留字指的是现在没有特殊功能，但是将来新语法中有可能作为关键字使用

变量命名规范（建议遵守的，不遵守不会报错）

  • 变量名必须有意义
  • 遵守驼峰命名法

js 数据类型

JS中的值，无论是字面量还是变量，都有明确的类型

  • 数据类型分类(以基本数据类型为主)也称为简单数据类型
    • Number 数字类型
      • 不区分整数、浮点数、特殊值，都是 Number 类型 （所有的整数和浮点数）
    • String 字符串类型
      • 所有的字符串都是 String 类型 （在 JS 中, 只要是引号包裹的内容, 统称为字符串）
    • undefined undefined类型
      • ndefined本身就是一个数据，表示未定义，变量只声明不赋值的时候，值默认是 undefined 表明未定义, 通常我们不会给一个变量赋值为 undefined, 因为 变量定义但不赋值就是一个 undefined
    • Boolean 布尔类型
      • Boolean 字面量：只有 true 和 false 两个字面量的值，必须是小写字母
      • 计算机内部存储：true 为 1，false 为 0 （表明 对/错(真/假)）
    • null null类型
      • null 本身就是一个数据
      • 从逻辑角度，null 值表示一个空对象指针
      • 如果定义的变量准备在将来用于保存对象，最好该变量初始化为 null 表明为 空对象指针 (空), 一般很少使用, 但是如果创建了一个对象, 但是不知道对象的值是什么的时候可能会给一个 null
    • Object 对象类型（后续讲解）
  • 复杂数据类型 (引用数据类型)（后续讲解）
  • 不同类型写法：

image.png

数据类型检测

  • 为什么要有数据类型检测？

  • 大白话：在 JS 中, 一个变量内部保存的值 是可以任意更改的，所以在使用的时候为了放置 因为数据类型不对, 导致的错误, 所以需要在使用前 检测一下数据的类型

    • JS语言是一门动态类型的语言，变量并没有一个单独的数据类型，而是会随着内部存储数据的变化，数据类型也会发生变化
    • 变量的数据类型，与内部存储数据有关
    • 将来使用变量时，需要知道内部存储的数据是什么类型，避免程序出错

  • 使用 typeof 的方法进行数据检测

    • 检测方式：在 typeof 后面加小括号执行，将要检测的数据放在小括号内部
     var box = '我是一个字符串类型的数据'
    console.log(typeof(box));   后面加小括号执行写法
    console.log(typeof box);    后面加变量名写法
    console.log(typeof('我是一个字符串类型的数据'));   后面加数据内容写法

  • 特殊注意：null 的类型就是 null，但是 typeof 这个方法有一点小问题, 它会将 null 识别为 object 类型，所以在使用 typeof 检测的时候, 不要用来检测 null 这个类型, 因为检测结果不准确，后续的时候会介绍一个方法能够用来检测 null 这个类型

  • JS 校验 null 的类型方法有哪些？

  • 后续讲解

数据类型转换(转数值 / 转字符串 / 转布尔)

转数值

  1. Number(数据)方法
    • 转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
    • 字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
    • 布尔值：true转为1，false转为0
    • undefined：转为NaN
    • null：转为0
  2. parseInt()方法：字符串转整数方法
    • 对浮点数进行取整操作
      • 对数字取整直接舍弃小数部分，只保留整数
    • 将字符串转为整数数字
      • 将字符串转为整数数字，也包含取整功能
    • 字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分
    • 如果不是数字打头的字符串，会转换为NaN
  3. parseFloat()方法：字符串转浮点数方法
    • 将字符串转为浮点数数字
    • 满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN

JS 转换的时候 任意类型都能够转换为数字使用, 主要是字符串转数字

  • 借助一个 转型函数 Number(数据)，parseInt(数据)， parseFloat(数据)
  • 开发中我最喜欢的一个 方式:变量/数据 - 0 原因：- 就是将 符号两边的值 相减 得到一个新的值，运算的时候, 如果符号两边有字符串. 那么 JS 会将 字符串转换为 数字 然后参与运算

8fa844320d7cb859bdfa8927e87d14e.png

转字符串

  1. 变量/数据.toString()方法 问题: undefined 和 null 不能使用
  2. String(变量/数据)方法，有些值没有toString()，这个时候可以使用String()。比如undefined和null 注意：什么类型都能转换为 字符串
  3. 开发中我最喜欢的一个 方式: 变量/数据 + '' 原因：拼接后的值是字符串类型的
  4. + 号拼接字符串方式 注意：凡是拼接一点是字符串类型
    • num + “” ,当 + 两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串在进行字符串拼接，返回字符串

image.png

转布尔

  1. Boolean(变量)方法
    • 转型函数Boolean()可以用于任何数据类型，将其他数据类型转为布尔类型的值
    • 转为false：NaN、0、“”空字符串、null、undefined
    • 转为true：非0 非NaN数字、非空字符串
    • 注意：一般是隐式转换, 也就是由 JS 帮我们完成了数据的转换, 一般做判断的时候比较常见

转布尔类型

  • 一般开发的时候不会主动的转换布尔类型
  • 一般是隐式转换, 也就是由 JS 帮我们完成了数据的转换, 一般做判断的时候比较常见
  • 借助一个转型函数 Boolean(变量/数据)
  • 开发中我最喜欢的一个 方式:!!变量/数据 （一个! 表示得到这个数据取反后的布尔值）

image.png

自增自减运算符 ++ --

问题: ++ 放在数据前, 和放在数据后, 有什么区别呢？

区别: * 如果 符号 在 变量/数据 前, 先运算自增或者自减, 然后参与周围程序运算 * 如果 符号 在 变量/数据 后, 先参与周围程序运算, 然后自增或者自减

avatar
文章
阅读
粉丝