W.T.的博客

Every day to be a little better

前端-JS学习笔记-认识JavaScript

发表于 更新于 分类于
本文字数： 5.7k 阅读时长 ≈ 5 分钟
编译语言发展，JavaScript的起源，组成，应用，浏览器执行JS过程

1. 计算机语言

  • HTML是一种标记语言, CSS是一种样式语言

    • 但本身都是属于计算机语言，因为都在和计算机沟通交流

  • 在生活中两个人想要沟通, 必然是通过某一种语言(中文/英语/粤语/东北话) ，计算机语言就是人和计算机进行交流要学习的语言

  • 网页的三大组成HTML，CSS，JavaScript

    • JavaScript必然也是一种计算机语言

2. 编程语言

  • 事实上，JavaScript可以对其有更加精准的说法：一种编程语言
  • 计算机语言和编程语言的关系和区别
    • 计算机语言(computer language)：指用于人与计算机之间通讯的语言，是人与计算机之间传递信息的介质。但是其概念比通用的编程语言要更广泛。例如，HTML是标记语言，也是计算机语言，但并不是编程语言
    • 编程语言(programming language)：是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧， 用来向计算机发出指令，一种能够让程序员准确地定义计算机所需要使用数据的计算机语言，并精确地定义在不同情况下所应当采取的行动
  • 编程语言的特点
    • 数据和数据结构
      • map集合/栈/队列/数组
    • 指令及流程控制
      • while/for/if/else/…
    • 引用机制和重用机制
    • 设计哲学

2.1. 常见的编程语言

2.2. 编程语言的发展历史

2.2.1. 机器语言

1
2
3
4
100011 00010 01111 0000 0000 0000 0000
100011 00010 10000 0000 0000 0000 0000
101011 00010 10000 0000 0000 0000 0000
101011 00010 01111 0000 0000 0000 0000

  • 计算机的存储单元只有0和1两种状态，因此一串代码要让计算机“读懂”，这串代码只能由数字0和1组成

  • 像这种由数字0和1按照一定的规律组成的代码就叫机器码，也叫二进制编码

  • 一定长度的机器码组成了机器指令，用这些机器指令所编写的程序就称为机器语言

  • 优点

    • 代码能被计算机直接识别，不需要经过编译解析
    • 直接对硬件产生作用，程序的执行效率非常高

  • 缺点

    • 程序全是些0和1的指令代码，可读性差，还容易出错
    • 不易编写(目前没有人这样开发)

2.2.2. 汇编语言

1
2
3
4
5
push %ebp
mov %esp,%ebp
sub $0x10,%esp
mov 0xc(%ebp),%eax
mov ox8(%ebp),%edx

  • 为了解决机器语言的缺陷而发明了汇编语言

  • 这种语言用符号来代替冗长的、难以记忆的0、1代码

    • mov/push指令，经过汇编器，汇编代码再进一步转成0101

  • 优点

    • 像机器语言一样，可以直接访问、控制计算机的各种硬件设备
    • 占用内存少，执行速度快

  • 缺点

    • 第一，不同的机器有不同的汇编语言语法和编译器，代码缺乏可移植性
      • 也就是说，一个程序只能在一种机器上运行，换到其他机器上可能就不能运行
    • 第二，符号非常多、难记
      • 即使是完成简单的功能也需要大量的汇编语言代码，很容易产生BUG，难于调试

  • 应用场景

    • 操作系统内核、驱动程序、单片机程序

2.2.3. 高级语言

1
2
const message = "Hello World";
console.log(message);

  • 最好的编程语言应该是什么? 自然语言

  • 而高级语言, 就是接近自然语言, 更符合人类的思维方式

  • 跟和人交流的方式很相似, 但是大多数编程语言都是国外发明的, 因为都是接近于英文的交流方式

  • 优点

    • 简单、易用、易于理解，语法和结构类似于普通英文
    • 远离对硬件的直接操作，使得一般人经过学习之后都可以编程，而不用熟悉硬件知识
    • 一个程序还可以在不同的机器上运行，具有可移植性

  • 缺点

    • 程序不能直接被计算机识别，需要经编译器翻译成二进制指令后，才能运行到计算机上
    • 种类繁多：JavaScript 、 C语言、C++、C#、Java、Objective-C 、Python等

2.2.4. 机器语言到高级语言

3. JavaScript的重要性

  • JavaScript是前端万丈高楼的根基

    • 前端行业在近几年快速发展，并且开发模式，框架越来越丰富
    • 但是不管学习的是 Vue，React，Angular包括 jQuery，以及一些新出的框架
      • 他们本身都是基于JavaScript的
      • 使用他们的过程中都必须好好掌握JavaScript
    • 所以JavaScript是前端万丈高楼的根基，无论是前端发展的万丈高楼，还是筑建自己的万丈高楼

  • JavaScript在工作中至关重要

    • 无论使用什么技术，比如Vue，React，Angular，uniapp，taro，ReactNatice
    • 也无论做什么平台的应用程序，比如 pc Web，移动端web，小程序，公众号，移动端App
    • 都离不开JavaScript，并且深入掌握JavaScript不仅可以提高开发效率，也可以快速解决在开发中遇到的各种问题
    • 面试时，往往会考察JavaScript的功底

  • 前端的未来依然是JavaScript

    • 在可预见的未来中，依然离不开JavaScript
    • 目前前端快速发展，无论是框架还是构建工具，都像雨后春笋一样，琳琅满目
    • 而且框架也会进行不断的更新，比如 Vue3，react18，vite2，TypeScript4.x
    • 前端开发者面对这些不断变化的内容，往往内心会有很多的焦虑，但是其实只要深入掌握了JavaScript，这些框架或者工具都是离不开JavaScript的

4. 认识JavaScript

  • JavaScript是一门高级的编程语言

    • 计算机本身只认识0/1的机器语言
    • 编程语言作为高级语言，需要转换成机器指令才能在计算机上运行

  • JavaScript是一种运行在客户端的脚本语言

    • 脚本语言：不需要编译，运行过程中由js引擎逐行来进行解释并执行

  • JavaScript可以基于node.js进行服务器编程

  • 维基百科对JavaScript的定义

    • JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言
    • JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程

  • HTML和CSS也是前端开发的重要组成部分, 而JavaScript是前端开发的灵魂

5. JavaScript的起源

  • 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版

    • 这是历史上第一个比较成熟的网络浏览器，轰动一时
    • 但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力
    • 网景公司急需一种网页脚本语言，使得浏览器可以与网页互动

  • 网景公司当时想要选择一种语言来嵌入到浏览器中

    • 采用现有的语言，比如Perl、Python、Tcl、Scheme等等, 允许它们直接嵌入网页
    • 1995年网景公司招募了程序员Brendan Eich，希望将Scheme语言作为网页脚本语言的可能性

  • 就在这时，发生了另外一件大事-1995年Sun公司将Oak语言改名为Java，正式向市场推出

    • Java推出之后立马在市场上引起了轰动，Java当初有一个口号:”write once run anywhere”
    • 网景公司动了心，决定与Sun公司结成联盟，希望将Java嵌入到网页中来运行
    • Brendan Eich本人非常热衷于Scheme，但是管理层那个时候有点倾向于Java，希望可以简化Java来适应网页脚本的需求

  • 但是Brendan Eich对此并不感兴趣，用10天时间设计出来了JavaScript

    • 最初这门语言的名字是Mocha(摩卡)
    • 在Navigator2.0 beta版本更名为LiveScript
    • 在Navigator2.0 beta 3版本正式重命名为JavaScript，当时是为了给这门语言搭上Java这个热词

  • 当然10天设计出来语言足够说明Brendan Eich是天才，但是这门语言当时更像是一个多种语言的大杂烩

    • 借鉴C语言的基本语法
    • 借鉴Java语言的数据类型和内存管理
    • 借鉴Scheme语言，将函数提升到”第一等公民“(first class)的地位
    • 借鉴Self语言，使用基于原型(prototype)的继承机制

  • Brendan Eich曾经这样描述过JavaScript

    • 与其说我爱Javascript，不如说我恨它，它是C语言和Self语言一夜情的产物
    • 十八世纪英国文学家约翰逊博士说得好：“它的优秀之处并非原创，它的原创之处并不优秀”(the part that is good is not original, and the part that is original is not good.)

  • 微软公司于1995年首次推出Internet Explorer，从而引发了与Netscape的浏览器大战

    • 微软对Netscape Navigator解释器进行了逆向工程，创建了JScript，以与处于市场领导地位的网景产品同台竞争
    • 这个时候对于开发者来说是一场噩耗，因为需要针对不同的浏览器进行不同的适配

  • 1996年11月，网景正式向ECMA(欧洲计算机制造商协会)提交语言标准

  • 1997年6月，ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262

    • ECMA-262是一份标准，定义了ECMAScript语言
    • JavaScript成为了ECMAScript最著名的实现之一
    • 除此之外，ActionScript和JScript也都是ECMAScript的实现语言

  • ECMAScript只是对实现规范描述的所有方面的一门语言的称呼，JavaScript是ECMAScript的一种实现

5.1. ECMA

  • 欧洲计算机制造商协会
  • ECMA是个行业标准组织，它所通过的标准都是ECMA-nnn进行编号
  • ECMA是ECMAScript规范下的JavaScript语言标准化机构

5.2. TC39

  • TC39打造出来ECMA-262(ECMA脚本语言标准)
  • TC39是ECMA国际组织第39技术委员会(Technical Committee)，是ECMA的一部分
  • TC39由网景，Sun，微软，Borland，Nombas，其他对该脚本语言感兴趣的公司代表构成，包括了阿里和字节
  • TC39主要工作就是制定ECMAScript标准，标准生成流程，并实现
  • 每两个月，TC39都会开会，会议记录在GitHub存储库中公开
  • 除TC39外，ECMA国际组织还有TC43 Universal 3D(U3D)，TC45 Office Open XML Formats 等等

6. JavaScript语言标准

6.1. ECMA-262

  • 主标准，由ECMA负责管理
  • 为了JavaScript和JScript能遵循同一套标准发展而诞生的ECMAScript
  • 排到了作为ECMA的262号标准，因此得名ECMA-262
  • ECMA-262定义了【语法，类型，语句，关键字，保留字，操作符，全局对象】

6.2. ISO/IEC16262

  • 第二标准，由国际标准化组织(ISO，International Organization for Standardization)和国际电子技术委员会(IEC，International Electrotechnical Commission)负责管理
  • 出于商标版权的原因，规范标准中将这门语言称为 ECMAScript，所以原则上 JavaScript 与 ECMAScript 指的是同一个东西，但有时也会加以区分

7. JavaScript的组成

7.1. javascript语法 ECMScript

  • 由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言
  • ECMA-262将ECMAScript作为一个基准，在它之上再构建更稳健的脚本语言
  • ECMAScript是ECMA-262定义的语言，并不局限于Web浏览器
  • Web浏览器只是ECMAScript实现可能存在的一种宿主环境，提供了ECMAScript的基准实现和与环境自身交互必需的环境
  • 并且，ECMAScript没有输入和输出方法
  • 这种语言在万维网上应用广泛，往往被称为JavaScript（网景公司）或JScript（微软公司）
  • 但实际上两者都是ECMAScript语言的实现和扩展
  • ECMAScript规定了JS的编程语法和基础核心，是所有浏览器共同蹲守的一套js语法工业标准
  • ECMAScript发展

7.2. 页面文档对象模型 DOM

  • Document Object Model，是W3C组织推荐的处理可扩展标记语言的标准编程接口

  • 通过DOM提供的接口可以对页面上的各种元素进行操作（大小，颜色，位置等）

  • DOM会将整个页面抽象为一组分层节点，通过创建表示文档的树，控制网页的内容和结构。删除，添加，替换，修改节点

    1
    2
    3
    4
    5
    6
    7
    8
    <html>
        <head>
            <title>Smaple Page</title>
        </head>
        <body>
            <p>Hello World!</p>
        </body>
    </html>

7.3. 浏览器对象模型 BOM

  • Browser Object Model，浏览器对象模型，提供了独立于内容的，可以与浏览器窗口进行互动的对象结构
  • 用于支持访问和操作浏览器的窗口
  • HTML5中以正式规范的形式涵盖尽可能多的BOM特性：
    • 弹出新浏览器窗口
    • 移动，缩放，关闭浏览器窗口
    • navigator提供浏览器信息
    • location提供浏览器加载页面信息
    • screen提供浏览器屏幕分辨率信息
    • …

8. Atwood定律

  • Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律
    • Any application that can be written in JavaScript, will eventually be written in JavaScript.
    • 任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现

9. JavaScript应用

9.1. web开发

  • 原生JavaScript
  • React开发
  • Vue开发
  • Angular开发

9.2. 移动端开发

  • ReactNative
  • Weex

9.3. 小程序端开发

  • 微信小程序
  • 支付宝小程序
  • uniapp
  • taro

9.4. 桌面应用开发

  • Electron

    • VSCode就是Electron开发的

9.5. 后端开发

  • Node环境
    • express，koa，egg.js
本文结束  感谢您的阅读