JavaScript简介

# 1 JS的发展历程

回顾整个JavaScript的发展历程, 实际上就是Web发展的历程

从最开始的拨号上网方式到现在的100M光纤, 4G/5G移动Web的发展

在近20年, 上网的方式发生了翻天复地的变化, 可以说是科技大爆炸.

人们在享受越来越便捷的上网的同时, 对Web产品的需求越来越高

从单纯的对访问速度的需求, 越来越多的转移到视觉美感, 智能操作交互, 沉浸式虚拟现实, 这些需求又反过来推动了技术的不断创新与进步.

# 1) JS的诞生

在互联网初期(20世纪90年代) ----web1.0

主要通过拨号上网的方式浏览网页, 提交信息. 上网的速度只有28.8 kbit/s

JavaScript最初是网景公司的工程师Brandan Eich花了10天的时间设计出来的, 主要是为了在浏览器上先验证用户输入的信息是否符合格式.

为什么要这样做呢?

因为当时的网络是非常慢的, 如果用户填写了大量的信息, 提交到服务器, 在服务器端验证发现不合格, 用户要再次重新填写, 这个是很让人抓狂的.

设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段

最开始的时候, Eich把自己设计的这种运行在浏览器上的脚本叫做liveScript, 在发布的时候为了蹭Java的热度, 就改名叫做JavaScript, 实际上跟Java没有半毛钱关系

# 2) JS的成长

在PC互联网(2010年之前)----web2.0

这个时候, 个人电脑PC开始普及, 网络速度突飞猛进, 上网的成本越来越低

人们开始大量的使用PC访问web应用, 包括:

blog(博客)--新浪
RSS(订阅)
社交网络(SNS)--FaceBook/人人网
P2P(下载)--迅雷
搜索引擎--Google/baidu
即时通讯(IM)--QQ
电子商务--Taobao

在这个时代, JavaScript都只是一种不起眼的小脚本, 没有人把他当成真正的编程语言.

JavaScript在这个时候依然只是用来处理PC网页的简单动画和验证, 也没有单独的前端岗位, 大部分前端的工作都是由php程序员或者UI人员完成的

# 3) JS的新生

web3.0

随着乔帮主推出的IPhone智能手机, 改变了人们的生活方式

以智能手机为代表的移动互联网应运为生, 称为web3.0

HTML5与CSS3

到2015年左右, HTML5和CSS3的标准化, 大大推进了前端的发展

前端做为一个独立的方向真正开始被重视

ECMA2015

在2015年, JavaScript的规范组织ECMA(欧洲计算机制造商协会)推出了ECMA2015, 也被称为ES6

这一版本的出现, 极大的改进了JavaScript语言, 使得JavaScript具备开发大型项目的能力

V8引擎与Node.js

Chrome推出的V8引擎将JavaScript的速度提升了几个数量级

Node.js的出现, 完善了JavaScript在服务端的能力, 使得JavaScript编写服务端程序作为可能

未来的发展

自2016年以来, 前端发展非常迅速, 开源社区越来越活跃, 出现了大量的工作岗位, 薪资也水涨船高

JavaScript现在应用的范围越来越广

微信小程序
H5游戏
桌面应用(Electron)
webApp
AI+物联网( AIot)

全球十大编程语言排行榜：C最古老,JavaScript第一

# 2 JS的组成

JavaScript是解释性的弱类型编程语言

解释性: 逐行解释, 逐行执行
弱类型: 不区分变量的数据类型
编程语言: 图灵完备的语言

一般认为浏览器中JavaScript由三部分组成

ECMAScript: 基础语法
DOM: 文档数据模型
BOM: 浏览器对象模型

# 1) ECMAScript

ECMAScript 是由ECMA（原欧洲计算机制造商协会）进行标准化的一门编程语言, 主要规定了像变量, 数据类型, 流程控制, 函数等基础语法

# 2) DOM和BOM

W3C: 万维网联盟 (World Wide Web Consortium) 主要是完成HTML和CSS及浏览器标准化的研究, 是一个非盈利性的公益组织, 主要由大公司和开发人员组成

其中,

DOM是由W3C组织制定的标准, 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色、事件等）
BOM是由各个浏览器厂商根据DOM在各自浏览器上的实现, 不同的浏览器会略有差异, 通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

# 3 JS的写在哪里

跟CSS一样, JS也有3种书写方式

外部: 将JS文件单独保存, 再通过<script src="xxx.js">引入
内嵌: 在HTML文件中, 将JS代码写在<script>标签中
行内: 现在几乎不用

示例

外部

<script src="my.js"></script>

内嵌

<script>
  alert('Hello  World~!')
</script>

1
2
3

在实际工作中, 通常将js代码写在文件中, 再使用外部方式引入.

在学习阶段, 为了调试方便, 主要采用内嵌的方式

# 4 体验JS

为了方便信息的输入输出，JS中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器BOM
console.log(msg)	浏览器控制台打印输出信息	浏览器BOM
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器BOM

注意：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // 这是一个输入框
      var name = prompt('请输入您的姓名')
      // alert 弹出警示框 输出的 展示给用户的
      alert(name + ' 你好!')
      // console 控制台输出 给程序员测试用的
      console.log('我是程序员能看到的:' + name)
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

调试技巧

在Chrome浏览器中, 使用F12或者Ctrl+Shift+I打开调试窗口, 在console控制台中查看

在控制台中, 也可以编写JS的代码

如果觉得有帮助, 可以微信扫码, 请杰哥喝杯咖啡~

上次更新: 2021/09/03, 15:32:17

← 定位变量→