JavaScript背景

我是一个小白刚开始学习前端，这是自己通过在网上看一些大佬整理的资料修改的，如有侵权，请联系。尊重第一作者，但是传播知识才是最重要的

JavaScript背景

发展历史

JavaScript诞生于1995年。网景公司的员工布兰登 • 艾奇（Brendan Eich，1961年～）在1995年开发出了 JavaScript 语言。

JavaScript是由网景公司（Netscape）发明，最初命名为LiveScript；1995年12月与SUN公司合作，因市场宣传需要，改名为 JavaScript。

JavaScript是Sun注册并授权给Netscape使用的商标。后来 Sun 公司 被Oracle收购，JavaScript版权归Oracle所有。

1996年，微软为了抢占市场，推出了JScript在IE3.0中使用。

1996年11月网景公司将JS提交给ECMA(国际标准化组织)成为国际标准，用于对抗微软。

JavaScript是世界上用的最多的脚本语言。

2003年之前，JavaScript被认为“牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以很多浏览器就推出了屏蔽广告功能。

2004年，JavaScript命运开始改变。那一年，谷歌公司开始带头使用Ajax技术，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了。Ajax有一些应用场景。比如，当我们在百度搜索框搜文字时，输入框下方的智能提示，可以通过Ajax实现。比如，当我们注册网易邮箱时，能够及时发现用户名是否被占用，而不用调到另外一个页面。从2005年开始，几乎整个B/S开发界都在热情地追捧AJAX。

2007年乔布斯发布了第一款iPhone，这一年开始，用户就多了上网的途径，就是用移动设备上网。JavaScript在移动页面中，也是不可或缺的。并且这一年，互联网开始标准化，按照W3C规则三层分离，JavaScript越来越被重视。

2010年，人们更加了解HTML5技术，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript。

2011年，Node.js诞生，使JavaScript能够开发服务器程序了。

如今，WebApp已经非常流行，就是用网页技术开发手机应用。手机系统有iOS、安卓。比如公司要开发一个“携程网”App，就需要招聘三队人马，比如iOS工程师10人，安卓工程师12人，前端工程师8人。共30人，开发成本大；而且如果要做需求迭代，就要改3个版本。现在，假设公司都用web技术，用html+css+javascript这一套技术就可以开发多种终端的页面。也易于迭代（网页一改变，所有的终端都生效了）。

虽然目前WebApp（Web应用）在功能和性能上的体验远不如Native App（原生应用），但是“在原生App中内嵌一部分H5页面”已经是一种趋势。

在2015年6月，ES6发布了。这个ECMAScript版本几乎集成了当时其他语言梦寐以求的所有明星特性，并优雅地、不留后患地解决了几乎所有的JavaScript遗留问题—当然，其中那些最大的、最本质的和核心的问题其实都已经在ES5推出时通过“严格模式（strict mode）”解决了。

ES6提出了四大组件：Promise、类、模块、生成器/迭代器。这事实上是在并行语言、面向对象语言、结构化语言和函数式语言四个方向上的奠基工作。相对于这种重要性来说，其他类似于解构、展开、代理等看起来很炫很实用的特性，反倒是浮在表面的繁华了。

主流引擎厂商开始通过ES6释放出它们的能量，于是JavaScript在许多新的环境中被应用起来，大量的新技术得以推动，例如，WebAssembly、Ohm、Deeplearn.js、TensorFlow.js、GPU.js、GraphQL、NativeScript等。有了Babel这类项目的强大助力，新规范得以“让少数人先用起来”，而标准的发布也一路披荆斩棘，以至于实现了“一年一更”。

JavaScript是什么

JavaScript是一种基于对象（Object）和事件驱动（ Event Driven）的弱类型脚本语言

基于对象：
指的是程序的内部已经为用户提供好了若干个对象，用户直接使用这些对象即可。

面向对象：
java属于面向对象的语言，面向对象是指用户自己定义类，对象需要用户自己产生。

脚本：凡是不能独立执行需要依赖其他程序的，通常都叫做脚本。
弱类型：允许变量类型的隐式转换，允许强制类型转换

JavaScript运行在用户的终端网页上，而不是服务器上，此时我们称之为“前端语言”。就是服务于页面的交互和视觉，不能直接操作数据库。

后台语言是运行在服务器上的，比如PHP、ASP、JSP等等，这些语言都能够操作数据库，都能够对数据库进行“增删改查”操作。

备注：Node.js是用 JavaScript 开发的，我们也可以用 Node.js 技术进行服务器端编程。

JavaScript 的特点

(1)脚本语言。JavaScript是一种解释型的脚本语言,C、C++等语言先编译后执行,而JavaScript是在程序的运行过程中逐行进行解释。

(2)基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

(3)简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。

(4)动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。

(5)跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支 持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。

(6)解释型语言。JavaScript 是解释型语言，不需要事先被翻译为机器码；而是边翻译边执行（翻译一行，执行一行）。

(7)ECMAScript标准。ECMAScript是一种由 ECMA 国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定和发布的脚本语言规范。JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。简单来说，ECMAScript不是一门语言，而是一个标准。ECMAScript 规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准。

JavaScript的组成

JavaScript基础分为三个部分：

• ECMAScript：JavaScript 的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

• DOM：Document Object Model（文档对象模型），操作页面上的元素的API。比如让盒子移动、变色、改变大小、轮播图等等。

• BOM：Browser Object Model（浏览器对象模型），操作浏览器部分功能的API。通过BOM可以操作浏览器窗口，比如弹框、控制浏览器跳转、获取浏览器分辨率等等。

通俗理解就是：ECMAScript 是 JS 的语法；DOM 和 BOM 浏览器运行环境为 JS提供的API。

JavaScript代码的书写位置

方式1：行内式

写在标签上的 js 代码需要依靠事件（行为）来触发

<!-- 写在 a 标签的 href 属性上 -->
<a href="javascript:alert('我是一个弹出层');">点击一下试试</a>

<!-- 写在其他元素上 -->
<div onclick="alert('我是一个弹出层')">点一下试试看</div>

<!-- 
	注：onclick 是一个事件（点击事件），当点击元素的时候执行后面的 js 代码
-->

分析：

• 可以将单行或少量 JS 代码写在HTML标签的事件属性中（以 on 开头的属性），比如放在上面的 onclick点击事件中。

• 这种书写方式，不推荐使用，原因是：可读性差，尤其是需要编写大量 JS代码时，容易出错；引号多层嵌套时，也容易出错。

• 关于代码中的「引号」，在HTML标签中，我们推荐使用双引号, JS 中我们推荐使用单引号。

方式2：内嵌式

<!-- 在 html 页面书写一个 script 标签，标签内部书写 js 代码 -->
<script type="text/javascript">
	alert('我是一个弹出层')
</script>

<!-- 
	注：script 标签可以放在 head 里面也可以放在 body 里面
-->

分析：

• text表示纯文本，因为JavaScript也是一个纯文本的语言。

• 可以将多行JS代码写到 <script> 标签中。

• 内嵌式 JS 是学习时常用的方式。

方式3：外链式

• 外链式 js 代码只要引入了 html 页面，就会在页面打开的时候直接触发
• 新建一个 .js 后缀的文件，在文件内书写 js 代码，把写好的 js 文件引入 html 页面

// 我是 index.js 文件
alert('我是一个弹出层')

总结：

引用外部 JS文件的 script 标签中间不可以再写代码。

我们在实战开发中，基本都是采用方式3，因为这种方式，可以确保 html 文件和 js 文件是分开的，有利于代码的结构化和复用。很少会有人把一大堆 js 代码塞到 html 文件里。

JS一些简单的语法规则

（1）JavaScript对换行、缩进、空格不敏感。每一条语句以分号结尾。每一条语句末尾要加上分号，虽然分号不是必须加的，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。

（2）所有的符号，都是英语的。比如括号、引号、分号。

（3）严格区分大小写。

注释

HTML 的注释

<!-- 我是注释  -->

CSS的注释

<style type="text/css">

	/*
		我是注释
	*/

	p{
		font-weight: bold;
		font-style: italic;
		color: red;
	}

</style>

注意：CSS只有/* */这种注释，没有//这种注释。而且注释要写在<style>标签里面才算生效。

JavaScript 的注释

单行注释：

// 我是注释

多行注释：

/*
	多行注释1
	多行注释2
*/

补充：VS Code中，单行注释的快捷键是「Ctrl + /」，多行注释的默认快捷键是「Alt + Shift + A」。

Javascript 输入输出语句

弹出警告框：alert语句

alert（英文翻译为“警报”）的用途：弹出“警告框”。

alert( ) 浏览器弹窗，弹出的内容就是（）括号中的内容

例：

        <script>
            alert('我是弹出框');
        </script>

控制台输出：console.log("")

console.log("")表示在控制台中输出。console表示“控制台”，log表示“输出”。

在Chrome浏览器中，按F12即可打开控制台，选择「console」栏，即可看到打印的内容。

控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西，来测试程序是否正确。

例：

        <script>
            console.log('控制台里面才看得见')
        </script>

弹出输入框：prompt()语句

prompt()就是专门用来弹出能够让用户输入的对话框。用得少，测试的时候偶尔会用。

例：

var a = prompt("请随便输入点什么东西吧");
console.log(a);

文本写入：document.write( )

document.write( ) 向文档写入字符串、html 或 javascript代码

这个属于DOM对象的一种使用方法。后面会详细介绍

总结：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己调试用的。