关于javascript:JavaScript入门

JavaScript 的倒退历史还要简略理解一下的。。。。

什么是 JavaScript

JavaScript ( JS ) 是一种具备函数优先的轻量级，解释型或即时编译型的编程语言。尽管它是作为开发 Web 页面的脚本语言而出名的，然而它也被用到了很多非浏览器环境中，例如 Node.js、Apache CouchDB 和 Adobe Acrobat。JavaScript 是一种基于原型编程、多范式的动静脚本语言，并且反对面向对象、命令式和申明式（如函数式编程）格调。

JavaScript 的组成部分

• ECMAScript，形容了该语言的语法和根本对象。
• 文档对象模型（DOM），形容解决网页内容的办法和接口。
• 浏览器对象模型（BOM），形容与浏览器进行交互的办法和接口。

JavaScript 的历史

1994 年，网景公司（Netscape）公布了 Navigator 浏览器 0.9 版。这是历史上第一个比拟成熟的网络浏览器，轰动一时。然而，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。网景公司急需一种网页脚本语言，使得浏览器能够与网页互动。

​ 1995 年 5 月，网景公司做出决策，将来的网页脚本语言必须 ” 看上去与 Java 足够类似 ”，然而比 Java 简略，使得非专业的网页作者也能很快上手。这个决策实际上将 Perl、Python、Tcl、Scheme 等非面向对象编程的语言都排除在外了。

​ JavaScript 最后由 Netscape 的 Brendan Eich 设计，创始人 Brendan Eich 只用了 10 天就把 JavaScript 设计进去了；最后将其脚本语言命名为 LiveScript，起初 Netscape 在与 Sun 单干之后将其改名为 JavaScript。JavaScript 最后受 Java 启发而开始设计的，目标之一就是“看上去像 Java”，因而语法上有类似之处，一些名称和命名标准也借自 Java，但 JavaScript 的次要设计准则源自 Self 和 Scheme。

​ JavaScript 诞生于 1995 年，过后的次要目标是解决由以前服务器语言负责的一些没有填写的必填域，是否输出了有效的值。在 web 日益风行的同时，人们对客户端脚本语言的需要也越来越强烈，那时绝大多数因特网用户应用的速度仅为 28.8kbit/ s 的猫上网，但网页的大小和复杂性却一直减少，未实现简略的表单验证而与服务器替换数据只会减轻用户和服务器的累赘。

JavaScript 倒退历史

（1）JavaScript 被设计进去后最后命名为Mocha，1995 年 9 月在 Netscape Navigator 2.0 的 Beta 版中改名 为LiveScript，同年 12 月，Netscape Navigator 2.0 Beta 3 中部署时被重命名为JavaScript；

（2）1996 年 8 月 IE 3 公布，反对 jscript（微软实现的 js)

（3）1996 年 11 月，网景向 ECMA 提交语言规范，因为版权问题，js 语言规范不叫 JavaScript，叫 ECMAScript

（4）1997 年 6 月，第一版 ECMAScript 公布

（5）1999 年 12 月，第三版 ECMAScript 公布，这个版本应用最广（第四版没有发行胜利）

（6）2006 年，jQuery 公布，它是目前最长命的 js 库

（7）2009 年 12 月，第五版 ECMAScript 公布，减少了一些性能

（8）2009 年，Ryan 基于 V8（Chrome 的 js 引擎叫做 V8）创立了 Node.js

（9）2010 年，Isaac 基于 node.js 写出了 npm

（10）2015 年 6 月，第六版 ECMAScript 公布，新浏览器都反对这一版（之后每年公布一版，版本号以年份命 名）

JavaScript 的衰亡：须要一门语言能够间接运行在浏览器中，实现表单验证，加重服务器的压力

ECMAScript5：编程（数据结构、逻辑管制、算法、内存调配、高级利用 BOM- 浏览器对象模型、DOM: 应用程序 API- 文档对象模型）

晚期次要运行在浏览器端，用于表单验证以及动画的实现。随着 js 版本的降级，当初的 js 能够运行在 nodejs 上，而 nodejs 又能够装置在绝大多数的操作系统中，所以 js 能够运行在绝大多数的零碎中，除了实现表单验证以及动画的实现还能够进行服务器端编程，甚至于硬件编程。

JavaScript 的规范是 ECMAScript。截至 2012 年，所有的古代浏览器都残缺的反对  ECMAScript 5.1，2015 年 6 月 17 日，ECMA 国内组织公布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者 ES6。

须要留神的是，js 不同于 Java。Java 是由 sun 公司开发并且保护，只能运行在 jdk 中。而 js 能够运行在绝大多数的浏览器中，支流浏览器就有 IE、firefox、google chrome、safari…。那这样 js 的版本是不是就会有很多呢？如果这样，岂不是乱套了：程序员编写的 js 代码能够运行在 firefox 中，然而运行在 IE 中就会有问题。实际上，在晚期的确有这样的问题，起初大家感觉这样搞上来会出问题，所以就坐在一起磋商一套对立的语法，因为制订语法的这个组织叫 ECMA，所以 JavaScript 的规范就是 ECMAScript，这个 ECMAScript 中有哪些货色，实际上就是变量，表达式，关键字 … 的根底语法。

JavaScript 是一个编程语言，容许用户在浏览器页面上实现简单的事件。浏览器页面并不总是动态的，往往显示一些须要动静更新的内容，交互式地图，动画，以及视频等。一个残缺的 JavaScript 包含外围(ECMAScript)，应用程序编程接口即 API (比方 DOM(Document Object Model)，BOM(Browser Object Model))，以及其余第三方 API。JavaScript 与 HTML、CSS 一起配合共同完成一个简单页面的显示。

通常所说的 JavaScript 是利用在浏览器中，个别包含 ECMAScript、DOM、BOM。ECMAScript 为规范，DOM 为浏览器提供的 js 操作 html/css 的 js API，BOM 为浏览器提供的 js 操作浏览器的 js API。而 JavaScript 如果利用在 nodejs 中，则通常用于服务器端编程，能够进行 io 操作, 网络操作等。

特点
客户端代码，在客户机上执行
1.JavaScript 非凡的中央在于它也能够作为服务器端代码执行，然而须要搭建 Node 环境。node hello.js
2. 在浏览器上运行
解释性语言
被内置于浏览器或者 Nodejs 平台中的 js 解析器解析执行，执行前无需编译
弱类型语言
从上往下程序解析执行

零碎环境

Linux 操作系统的环境

Windows

MacOS

编辑器

vi、vim

vscode/sublime (极力推荐 vscode, 超级好用，性能和插件十分的丰盛，我一次见这么牛掰的编译开发工具。。。。)

https://code.visualstudio.com/（这个是 vscode 官网地址，这个比拟平安我感觉）

运行环境

旧：JavaScript 不能独立运行 + 网页 +console/fireBug

nodejs*

调试

火狐：firebug
谷歌浏览器：google(我感觉谷歌性能比拟牛掰一点)

console.log()/ 弹框 alert

js 组成

1) ECMAScrpt【js 规范】（兼容性 100%）(相似于 CoreJava，制订了根底的语法)

正文 //、/**/

变量

操作符

流程管制语句

数组

对象

函数

正则表达式

…

所有的 js 解释器都能够兼容 ECMAScript

2) DOM：Document Object Model 文档对象模型

js 操作 html 的 api

是针对 XML 但通过扩大用于 HTML 的应用程序编程接口。DOM 将整个页面映射成一个多节点构造。

var dom=document.getElementsByTagName(“input”);

var dom=document.getElementById(“input_name”);

dom.onclick=function(){}

js 语言：根底语法、根底库、扩大库（jQuery DOM 库）

3) BOM：Browser Object Model 浏览器对象模型

js 操作浏览器的 api

开发人员能够应用 BOM 管制浏览器显示的页面以外的局部。弹出新浏览器窗口；挪动，缩放，敞开浏览器的性能；提供浏览器详细信息的 navigator 对象; 提供浏览器所加载页面的详细信息的 location 对象；提供用户显示器分辨率详细信息的 screen 对象；对 cookies 的反对；反对 XMLHttpRequest,IE 中的 ActiveXObject 自定义对象

alert()/prompt()/confirm()

setInterval(),setTimeout()

XMLHttpRequest

Ajax

这里须要留神的是，只有 ECMAScript 是规范，也就是在绝大多数浏览器以及 js 解析器（node）中运行成果雷同，然而 DOM 与 BOM 是各大浏览器厂商本人提供的 API，在应用上大同小异，然而也可能会呈现少许不兼容的状况

js 解释器：

1）浏览器厂商：Firefox（js 规范）、IE(js)、Google(js)

兼容性:

JavaScript 的三个组成部分，在以后五个次要浏览器（IE,Firefox,Chrom,Safari,Opera）中失去了不同水平反对，其中，所有浏览器对 ECMAScript3 反对大体都还不错，对 ECMAScript 反对水平越来越高，但对 DOM 的反对彼此相差较多，对曾经正式纳入 HTML5 规范的 BOM 来说，只管各浏览器都实现了某些家喻户晓的独特个性，但其余个性还因浏览器而异。

2）nodejs【网络编程(http 模块)/ 数据库操作(mysql)/IO 文件(file)】

就是在 vscode 的终端能够间接运行 js 文件，要提前在电脑先装置 nodejs

http://nodejs.cn 能够装置在 linux windows macos unix 等支流操作系统上

特色：能够运行在客户端、服务器端，解释性语言，弱类型语言，从上到下程序执行。

在 nodejs 中，不存在兼容性问题，因为 nodejs 中压根就没有 dom/bom，因而切记不要在 nodejs 中执行任何 dom 和 bom 代码，因为不存在兼容性问题，nodejs 是能够大量施展 js 高级规范，ES6 语法个别在 nodejs 中能够齐全运行。

js 特点

1) 解释型语言

js -> nodejs(js 解释器)

2) 弱类型语言

变量的数据类型取决于值的数据类型

var a ;

a = 2; // a 的数据类型为 number

a = true; // a 的数据类型为 boolean

就是 JavaScript 是弱类型语言，怎么个弱法呢？就是它定义的根本数据类型能够随便扭转的，包含根本数据类型和援用数据类型，都一样的，比方定义一个数组，var arr = [2,6,21,3];
而后又定义 var arr = “zhengjing”,arr 变成了字符串类型, 我都震惊了。。。。。

3) 程序解释执行
4) 既能够作为前端脚本语言，也能够作为后端语言，取决于利用平台（浏览器 / 操作系统）和应用的框架（dom、jquery/http、mysql、file）

在网页中应用 JavaScript

外部 JavaScript
编写好 HTML，在 <head> 标签体中增加 <script> 元素，而后将 js 代码填写进来即可。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript">
    alert('hello javascript')
  </script>
</head>
<body>
</body>
</html>

在网页中应用 JavaScript

对于引入内部 JavaScript
独自新建一个后缀名为.js 的 js 文件，编写好 HTML 文件，在 <head> 标签体内增加 <script> 元素，应用 script 标签的 src 属性将将 js 文件导入进来。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script type="text/javascript" src="hello.js"></script>
</head>
<body>
</body>
</html>

在 body 和 head 中应用 JavaScript 的区别

​ 在 body 局部中的 JavaScript 会在页面加载的时候被执行，在 head 局部中的 JavaScript 会在被调用的时候才执行。

​ 因为浏览器解析 html 是从上到下的。如果把 JavaScript 放在 head 里的话，则先被解析，但这时候 body 还没有解析，所以会返回空值。个别都会绑定一个监听，当全副的 html 文档解析完之后再执行代码

windows.onload = function(){// 这里放执行的代码}

这就阐明了，如果咱们想定义一个全局对象，而这个对象是页面中的某个按钮时，咱们必须将其放入 body 中，情理很显著：如果放入 head，那当你定义的时候，那个按钮都没有被加载，可能取得的是一个 undefind。个别习惯将 JavaScript 放在 body 的最初面，相似 last-child。

在虚拟机中，用 vi/vim 中编写 JavaScript

console.log('hello JavaScript')

而后应用 node 命令执行即可
$ node hello.js

正文

与绝大多数语言相似，JavaScript 也须要正文来阐明其代码含意，或者用来进行代码调试，正文后的代码会被浏览器疏忽不被执行。
单行正文
// I am a comment
多行正文
/*
I am also
a comment
*/

关键字与保留字

关键字:(在 js 中有非凡性能)

break do try typeof
case else new var
catch finally return void
continue for switch while
debugger this function with
default if throw instanceof
delete in

保留字：(未来可能成为关键字)

abstract enum int short
boolean export interface static
byte extends long super
char final native synchronized
class float package throws
const goto private transient
debugger double implements protected
volatile import public

1) 辨别大小写

typeof 关键字，typeOf 非关键字

2) 标识符

指变量，函数，属性的名字或者函数的参数。标识符是依照以下规定组合起来的一或多个字符：

1. 字母，数字，下划线，$ 组成

2. 只能以字母，下划线，$ 结尾。

3. 不能将关键字作为标识符。命名采纳驼峰式命名 比方 newArr, firstChild。。。。

3) 语句

每个语句以分号结尾，如果省略分号，由解析器确定语句的结尾，即分号能够省略，然而咱们要求每个语句的开端都应该有分号

变量

变量是一个值的容器，该容器的值能够随时扭转。ECMAScript 的变量是弱类型（涣散类型），能够用来保留任何类型的数据。定义变量时应用 var 关键字。

变量的应用：

• 申明 var message;
• 初始化 message = “hello”
• 申明并初始化 var message = “hello”;
• 定义多个变量 var message= “hello”,found=false, age = 29;

• 变量名的命名规定：变量名由字母，数字，下划线以及 $ 组成。

  1. 不要应用下划线或者数字作为变量名的结尾
  2. 变量名应该具备肯定的意义，应用小驼峰命名规定
     var userAgeTotal = “”;
  3. 不要应用关键字或是保留字

变量的应用
变量的应用个别用通过申明，初始化，应用三个步骤

// 变量申明
var a ;
// 变量初始化
a = 3;
// 变量调用
console.log(a);

• js 是弱类型的语言

  弱类型语言具备如下特点：

  1. 变量的数据类型在初始化的时候确定
  2. 变量的数据类型能够随时产生扭转
  3. 类型细分不显著

• Java 是强类型语言

  1. 变量的数据类型在申明的时候确定
  2. 变量的数据类型肯定确定不能更改

• var

  var 用于申明一个变量，在 es6 中，能够通过 let 申明一个变量，通过 const 申明一个常量

• 变量能够反复申明

var a = b = c = 3;
var d = 10,e = 20,f,g;
// 弱类型语言，变量容器能够混合应用
var a = "hello world";// 变量的反复赋值（雷同的数据类型、不同的数据类型）function a(){}

• 变量申明会被晋升 (函数的申明也会)

//console.log(b);// 报错
console.log(a);// 不会报错
var a = 3;
// 等价于：var a;// 在所有代码执行之前，js 解释器会将 js 中所有的 var 申明的变量晋升。console.log(a);
a=3;

• var 申明的变量的作用域
  案例 1

function foo(){if(true){
    var a = 3;  
    console.log("inner",a);//inner 3
  }
  console.log("outer",a);//inner 3  // 没有块级作用域
}
foo();
console.log(a);//error!  函数作用域：部分作用域
// var 的变量申明提前知会晋升到以后作用域的最后面

案例 2

// 如果在函数中定义变量没有加 var，该变量为全局变量
function test(){message = "hello";}
test();
console.log(message); // 能够拜访