每天3小时学前端之JS-第1天-初识JS

零寂前端
682 阅读6分钟

配套视频教程

点击观看：哔哩哔哩

初识JS

标记语言与编程语言

跟之前学过的HTML和CSS不同，JavaScript才算是一门真正意义上的编程语言

graph TD
  A((标记语言)) --标签--> B((div))
  B((div)) --属性--> D((class))
  A((标记语言)) --标签--> C((img))
  C((img)) --属性--> E((src))
  A((标记语言)) --标签--> F((a))
  F((a)) --属性--> G((href))

graph TD
  A((编程语言))--数据保存--> B([变量])
  A((编程语言)) --运算--> C((+-<br>*/))
  A((编程语言)) --逻辑判断--> D([if<br>else])
  A((编程语言)) --循环--> E([for<br>while])

  • 标记语言：由标记(标签/元素)，标记属性等简单的见名知意的符号，来代表不同的布局单元来组织网页。

  • 编程语言：具有变量，逻辑判断，循环等编程语句必须具备的语法规范等。

什么是编程语言

语言是用来交流的工具，人类语言是人与人之间交流的工具。

计算机的语言世界里只有二进制的0和1。和十进制只有0到9十个数字一样，二进制就只有0和1，十进制里面是逢十进一，二进制里面则是逢二进一。所以二进制里面是不可能出现大于1的数字的。

JS属于编程语言里面的高级语言，低级语言如：汇编语言。越高级就越接近人类可以读懂的语言，越低级就越接近机器语言(二进制语言)。

高级语言转化成机器可以识别的二进制语言有两种办法：

  • 整体编译：通篇翻译，生成二进制文件，犹如直接念翻译好的英文文章。
  • 逐行翻译：需要解释器进行实时翻译，犹如同声传译。

编译型语言和解释型语言

JS是解释型语言，JS需要在浏览器(宿主环境/解释器)中运行

  • 编译型：在执行前先将代码编译成计算机可以识别的二进制文件，比如C、C++会先编译生成.exe文件，后续执行就不用再编译了，直接运行这个二进制文件就可以了。

    • 优点：执行速度快

    • 缺点：可移植性差，因为每个平台(操作系统)能理解的二进制文件可能不同，需要重新编译（如windows下需要编译成.exe文件，linux下需要编译成.erp文件）。

graph TD
  A[windows下源文件] -- 编译 --> B((二进制<br>.exe文件)) -- windows下直接运行 --> 实现功能
  C[Linux下源文件] -- 编译 --> D((二进制<br>.erp文件)) -- Linux下直接运行 --> 实现功能

  • 解释型：执行代码前不用编译，而是在运行代码的时候逐行去解释执行，所以需要解释器，比如浏览器。

    • 优点：可移植性好，只需各个平台(操作系统)配有该语言的解释器即可，如js、php、python

    • 缺点：执行速度慢，需要不断的进行读代码和解释之间的来回切换，切换的过程也是需要消耗性能和时间的

graph TD
  A[源文件] -- 运行 --> B(windows下浏览器) -- 解释执行 --> 实现功能
  A[源文件] -- 运行 --> D(Linux下浏览器) -- 解释执行 --> 实现功能

可以看出js运行的时候有浏览器作为宿主环境，进行承载，这样就使得语言与机器之间又多了一层，也是js为什么被称作高级语言的原因

脚本语言JS

早期的JS只是作用浏览器的客户端进行表单验证的语言。其目的是为了提高用户体验。

没有JS的表单验证

sequenceDiagram
  autonumber
  participant A as 浏览器
  participant B as 服务器
  A->>B: 请求验证
  Note left of A: 表单信息
  Note over A, B: 需要通过缓慢的网络传递表单数据
  Note left of A: 验证不通过，请重新填写！
  B->>A: 返回验证结果
  Note left of A: 验证通过，注册成功！
  Note right of B: 验证表单信息

有JS的表单验证

sequenceDiagram
  autonumber
  participant A as 浏览器
  participant B as 服务器
  A->>A: 请求验证
  Note left of A: 表单信息
  Note over A, B: 不需要通过网络传递表单数据 
  Note left of A: 验证不通过，请重新填写！
  A->>A: 返回验证结果
  Note left of A: 验证通过，注册成功！
  Note right of A: 验证表单信息

JS语言历史简介

  • ECMA：European Computer Manufacturers Association(欧洲计算机制造商协会）

  • TC39：ECMA的第39号技术专家委员会（Technical Committee 39，简称TC39）负责制订ECMAScript标准

  • ECMAScript 标准：是一种由ECMA组织TC39专家委员会通过的ECMA-262的脚本程序设计语言标准。俗称JavaScript。ECMAScript可以理解为是JavaScript语法的标准规范，所以JavaScript是ECMAScript标准的实现。

1997年7月，ECMA 组织发布262号标准文件（ECMA-262）的第一版，ECMAScript 1.0 版发布。

1998年6月，ECMAScript 2.0 版发布。

1999年12月，ECMAScript 3.0 版发布。

2007年10月，ECMAScript 4.0版草案发布，由于4.0版的目标过于激进，各方发生了严重分歧。

2008年7月，ECMA开会决定，中止了ECMAScript 4.0的开发，废除了ECMAScript 4.0这个版本。 将其中涉及现有功能改善的一小部分，发布为 ECMAScript 3.1。会后不久，ECMAScript 3.1 就改名为 ECMAScript 5。

2009年12月，ECMAScript 5.0 版 正式发布。

2015年6月，ECMAScript 6 正式发布，并且更名为“ECMAScript 2015”。俗称：ES6

TC39 委员会计划，以后每年发布一个 ECMAScript 的版本，以年号命名，2016年发布“ECMAScript 2016”，2017年发布“ECMAScript 2017”，以此类推。

JS语言构成

graph TD
  subgraph id1 [  ]
    id((JavaScript)) --> ECMAScript
    id((JavaScript)) --> DOM
    id((JavaScript)) --> BOM
  end

  • ECMAScript：语法、类型、语句、关键字、保留字、操作符、全局对象

  • 文档对象模型（DOM）：将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

  • 浏览器对象模型（BOM）：浏览器窗口大小、位置，页面地址，历史记录等

浏览器组成部分

graph LR
  subgraph id1 [  ]
    A((浏览器)) --> B[shell操作界面]
    A((浏览器)) --> C[内核]
    A((浏览器)) --> F[其他]
  end
    subgraph id2 [  ]
      C((内核)) --> D[渲染引擎]
      C((内核)) --后来单独分离出来--> E[JS引擎 ]
    end

五大浏览器内核引擎

浏览器渲染引擎JS引擎
ChromeWebkit/BlinkV8
FirefoxGeckoSpiderMonkey
SafriWebkitjavascriptcore
IETridentChakra
OperaPrestoCarakan

语法基本了解

JS可编写位置
  • 在script标签内部直接嵌入代码。
    • 多个script标签的报错不会相互影响
  • 通过script标签的src属性加载外部脚本
    • 带有src属性的script标签内部的代码将会被忽略
  • 事件属性
    • 网页元素的事件属性（比如onclick和onmouseover），可以写入js代码。当指定的事件发生时，就会调用js代码。
      • <button onclick="console.log('按钮被点击了！')">点击</button>
  • URL 协议
    • URL 支持javascript:协议，即在 URL 的位置写入代码，点击这个URL的时候就会执行 js代码。
      • <a href="javascript:console.log('a链接被点击了！')">点击</a>

script标签

  • 属性
    • type：定位引用文件的类型，一般省略
      • text/javascript(老版本)
      • application/javascript(新版本推荐)
    • src：指定引用文件的路径
    • 并行加载js代码的两个属性
      • defer：并行加载外部js代码，等待页面渲染完成再执行外部js代码
      • async：并行加载外部js代码，外部js加载完成立即执行外部js代码
    • 不加以上两个属性(defer或async)的话，外部js代码会直接按所写位置执行，执行完外部js代码之后，再接着往下渲染页面 参考文档：MDN

输入输出语句

  • console.log：控制台输出
  • document.write：页面输出
  • alert：浏览器弹出
  • prompt：接收输入值
  • confirm：返回一个布尔值，如果用户点击“确定”，返回true；如果用户点击“取消”，则返回false。

注释

  • 单行注释：//
  • 多行注释：/**/

分号

  • 可以省略，有些情况要注意，后续讲解

空格与换行

  • 空格与换行不是语法的一部分
avatar
文章
阅读
粉丝