简述javaScript历史，及基本语法

1.JavaScript概述

 

JavaScript是什么？

JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言。

直译式：直接解释执行，代码不进行预编译。

脚本：凡是不能独立执行需要依赖其他程序的，通常都叫做脚本。  

 

HTML文件必须在浏览器里执行，JS文件必须嵌入到HTML文件里才能执行。

 

JavaScript能干什么？

网页前端三剑客（HTML，CSS，JavaScript）

Html:负责一个页面的结构（结构层）

Css:负责一个页面的样式（样式层）

JavaScript：负责与用户交互，加强用户体验（行为层）

 

网页前端开发（Javascript的老本行）

移动开发 webapp 混合式应用

网站后端开发（Node.js可以让js在后端运行）

插件开发（由于js跨平台这一特性，很多插件使用js进行开发，因为一次开发可以保证跨平台使用）

桌面开发（主要是指chrome浏览器能把js写的程序打包成桌面应用）

游戏开发 等等。。。

 

网页前端中的作用：

数据提交到服务器之前验证数据

给HTML网页增加动态功能

响应用户操作

加强用户体验

 

跨平台

 

JavaScript简史

90年代 28.8kb/s

 

1995 Netscape2加入LiveScript，改名 JavaScript

 

微软 IE3加入JScript

 

Nombas推出ScriptEase

 

1997  ECMA  TC39  ECMA-262标准  命名ECMAScript

 

JavaScript兼容于ECMA标准，通常也称为ECMAScript

 

JavaScript由三大部分组成：核心部分（ECMA-262）、DOM、BOM

 

ECMAScript（简称ES）版本名称了解：

1997年7月，ECMAScript 1.0发布。

1998年6月，ECMAScript 2.0版发布。

1999年12月，ECMAScript 3.0版发布，成为JavaScript的通行标准，得到了广泛支持。（ES3）

2008年7月ECMAScript 4.0版本比较激进被废弃，替代方案将现有功能小幅度升级发布为ECMAScript 3.1，之后改名为ECMAScript 5，所以各类文章所说的ECMAScript 3.1等同于ECMAScript 5（ES5）

2011年6月，ECMAscript 5.1版发布，到了2012年底，所有主要浏览器都支持ECMAScript 5.1版的全部功能。

在这之后，版本发布规则发生变化， 标准委员会决定，标准在每年的6月份正式发布一次，作为当年的正式版本。接下来的时间，就在这个版本的基础上做改动，直到下一年的6月份，草案就自然变成了新一年的版本，只要用年份标记就可以了。

2015年6月发布了ECMAScript 6.0 版本正式名称就是《ECMAScript 2015标准》（简称 ES2015）-> ES6

2016年6月小幅修订的《ECMAScript 2016标准》如期发布（简称 ES2016）

2017（简称 ES2017）

......

 

JS和H5的关系

H5是一种新的技术，就目我们所知的H5都是一些标签，但是有了JS之后，这些标签深层的扩展功能才得以实现。

 

比如 video 标签，我们对其理解为一个简单的标签，但是实际上，video 标签还有更深层次的扩展功能。

 

 

2.JS引入及运行

    

引入方式

标签内引入：直接写在标签内（不推荐）

<button onclick="alert('hello world');">按钮</button>

 

内部引入：在html文件中直接写在script标签内部

<script type="text/javascript"> //type属性可以省略

    alert('hello world');

</script>

 

外部引入：在html文件中通过script标签引入外部js文件

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

 

思考：不推荐

<script src="test.js">

    alert('hello world');

</script>

 

常用输出/调试方法

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

 

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

 

console.log( ) 在控制台打印相关信息

 

注意：调试代码应当从最终的产品代码中删除掉

 

 

3.基本语法

JavaScript大量借鉴了C类语言的语法，但JS的语法更加宽松

 

JavaScript中的语句以一个分号 ; 结尾

 

JavaScript多条语句组合的代码块，以 { 开头，以 } 结尾

 

JavaScript中的一切都区分大小写 (如 变量名、函数名等)

 

单行注释：

// 注释内容不可以换行

 

块级/多行注释

/* 注释内容

    可以换行 */

 

养成良好的代码注释习惯，既方便自己也方便他人!!

 

标识符指变量、函数、属性或函数的参数的名字。

 

JavaScript关键字

关键字可用于表示控制语句的开始或结束，或用于执行特定操作等。

按照规则，关键字也是语言保留的，不能用作标识符！

break        do          try           typeof

case         else        new           instanceof

catch        in          return        var

continue     for         switch        while

function     this        with          default

if           throw       delete        ......

 

JavaScript保留字

保留字有可能在将来被用作关键字来使用，不能用作标识符！

abstract     int          short         boolean

export       interface    static        byte

extends      long         super         char

final        native       class         float

throws       const        goto          private

double       import       public        ......

 

 

4.变量的概念及使用

 

标识符命名规范

标识符指变量、函数、属性或函数的参数的名字

 

标识符命名规范：

1.第一个字符必须是字母、下划线 _ 或美元符号 $

2.其他字符可以是字母、下划线、美元符号或数字

3.不能含有空格

4.不能以关键字或保留字命名

5.使用驼峰命名法（建议，非必须）

 

变量的概念及底层原理

变量是指没有固定的值，可以改变的数；是存储信息的容器。

 

JS的变量是松散类型的，可以用来保存任何类型的数据。

 

JS中使用关键字 var 来声明变量：

关键字  变量名   赋值   数据

 var  userName  =  'xiaocuo';

左值：在等号左侧，是变量名

右值：在等号右侧，是存进变量中的数据

 

var声明变量的底层原理：

从本质上看，变量代表了一段可操作的内存，也可以认为变量是内存的符号化表示。当我们使用关键字var声明一个变量的时候，解析器根据变量的数据类型分配一定大小的内存空间。程序就可以通过变量名来访问对应的内存了。

 

 

5.数据类型

 

简单数据类型

简单数据类型：string、number、boolean、undefined、null

 

string 类型，值为字符串

JS中使用双引号或单引号表示字符串

var str1=‘123’;

var str2=“abc”;

 

number 类型，值为数字

JS中number类型包括整型、浮点型和非数值

var num1 = 123;

var num2 = 123.45;

NaN即非数值，是number类型中的一个特殊值

NaN用于表示本来要返回一个数值的操作数，结果未返回数值的情况（'a'-1） ('b'-3)

NaN有两个特点：

   1. 任何涉及NAN的操作都会返回NaN

   2. NaN与任何值都不相等，包括它本身

 

boolean 类型，值为布尔值

boolean类型有两个值 : true 和 false

 

undefined 类型，值未定义

undefined类型只有一个特殊值为 : undefined

var  und;

声明变量未赋值，这个变量的值就是undefined

 

null 类型，表示空的对象引用

null类型只有一个特殊值为 : null

如果变量准备在将来用于保存对象，那么该变量最好初始化为null

    

复杂数据类型

复杂数据类型：object类型

 

object 类型，值为对象类型

JS中 { } 表示对象，[ ] 表示数组，function 表示函数

var obj1=[1,2,3];

var obj2={‘name’:‘laowang’};

var obj3=function () { };

 

typeof 操作符

typeof 操作符返回一个用来表示数据类型的字符串。

 

\u2028使用 typeof 操作符将会返回下列六个字符串之一：

“undefined”---值为定义

“boolean”---值是布尔值

“string”---值是字符串

“number”---值是数值

“object”---值是对象、数组或null

“function”---值是函数

 

 

6.逗号、赋值、算术、关系、逻辑操作符

逗号操作符

使用逗号操作符可以在一条语句中执行多个操作，如：

var a = 1, b = 2, c = 3;

 

 

赋值操作符

=    +=    -=    *=    /=    %=

 

JS中的 '=' 号并非数学计算中的'='号，而是赋值操作符

如：a = 5，应该理解为，把5这个值，赋值给变量 a

 

var a = 1;

a += 5  -->  a = a + 5;

console.log(a);

 

 

算术操作符

加 减 乘 除 余

+  -  *  /  %

 

console.log(0/3);

console.log(3/0);

 

% 取余(求模)，5%3 即 5对3取余 或 5模3

5%3 == 2              9%3 == 0

 

2%7 == 2              7%4 == 3

(-2)%7 == -2          (-7)%4 == -3

2%(-7) == 2           (7)%(-4) == 3

(-2)%(-7) == -2       (-7)%(-4) == -3

 

 

递增和递减操作符

++ 和 --

++ 表示值递增加1

-- 表示值递减减1

var i = 0;

++i 表示先递增，后执行

i++ 表示先执行，后递增

 

思考：

var i = 4, k;

k = i++;

i = ++i;

alert(k);

alert(i);

 

var k = 0;

console.log(k++ + ++k +k + k++);

 

 

关系操作符

>  <  ==  ===  >=  <=  !=

关系操作符返回布尔值

等于 == 只比较值是否相等

全等 === 先比较类型，再比较值

 

表达式两侧都是数值 --> 正常比较

表达式两侧都是字符串 --> 正常比较，比较字符的ASCII码值，'0' -- 48，'A' -- 65，'a' -- 97

表达式两侧有一侧是纯数字字符串，该字符串自动转成数值，再进行比较

表达式两侧有一侧是非数字字符串，不能正常比较，所有非正常比较都返回 false

 

 

逻辑操作符

逻辑操作符返回布尔值

&&  逻辑与，&&前后均为true才会返回true

||  逻辑或，||前后有一个为true就会返回true

!   逻辑非，!求当前值的相反值

 

短路操作

var a = 2, b = 3;

(a < b) && (a = 5);

alert(a);

 

var a = 4, b = 3;

(a < b) && (a = 5);

alert(a);

 

var a = 2, b = 3;

(a < b) || (a = 5);

alert(a);

 

var a = 4, b = 3;

(a < b) || (a = 5);

alert(a);

 

 

7.数据类型转换

 

强制转换（显式转换）

转为字符串

 

数据.toString( )方法，返回字符串值，不可以转null和underfined

var bool=true;

console.log(true.toString( )); // 'true'

console.log((123).toString( )); // '123'

 

String( )方法，返回字符串值，所有值都能转

console.log(String(null)); // 'null'

console.log(String(123)); // '123'

 

 

转为数值

 

Number( )方法，将数据转为数值类型

console.log(Number(true)); // 1

console.log(Number(false)); // 0

console.log(Number('123')); // 123

console.log(Number('123a')); // NaN

 

parseInt( ) 与 parseFloat( ) 方法

parseInt( )从左到右检测数据中第一个不为数字的字符，并把之前的所有值返回，如果第一个字符不为数字返回NaN

parseFloat( )与parseInt( )相似，parseInt( )转换整数，parseFloat( )转换浮点数

 

 

转为布尔值

 

Boolean()方法，将数据转为布尔值

undefined、null、0、NaN、''(空字符串)及false，会转成false，其它都会转换成true

console.log(Boolean(2)); // true

console.log(Boolean(0)); // false

console.log(Boolean('abc')); // true

console.log(Boolean('')); // false

console.log(Boolean(null)); // false

 

自动转换（隐式转换）

x + y，当 + 两侧有一个是字符串类型，另一个是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接

console.log('123'+true);

console.log(123+'4');

 

x - y，当 - 两侧都是纯数字字符串，或者一个是纯数字字符串，一个是数字时，会先把字符串转成数字再进行减法运算

console.log('6'-'2');

console.log('6'-2);

还有 * / 与 - 是一样的转换规则 

 

逻辑操作符 && 、|| 、! 也会进行类型转换

 

!! 两次取反转换，保证了值没有变化，但类型已经被转为布尔值

var str = 'abc';

var bool = !!str;

console.log(bool);

 

undefined == null相等，ECMA规定的

number == string，会将string转换为number

number == boolean，会将boolean转换为number

非纯数字字符串不能进行 == 比较，全部返回false

 

 

8.进制介绍

进制也就是进位计数制，是人为定义的带进位的计数方法。

 

十六进制是逢十六进一，十进制是逢十进一，八进制是逢八进一，二进制就是逢二进一 ...

 

在javaScript中进制之间的转换提供了两个非常好用的方法：toString()、parseInt()。

 

使用 toString() 方法把十进制转为其他进制：

var  x = 28;// 10进制

console.log(x.toString(2)); //转为2进制  

console.log(x.toString(8));//转为8进制  

console.log(x.toString(16));//转为16进制  

 

使用 parseInt() 方法把其他进制转为十进制：

var x = "110";//二进制的字符串

console.log(parseInt(x, 2));//把这个字符串当做二进制，转为十进制  

 

var x = "070";//八进制的字符串

console.log(parseInt(x, 8));//把这个字符串当做八进制，转为十进制  

 

var x = "0x1c";//十六进制的字符串

console.log(parseInt(x, 16));//把这个字符串当做十六进制，转为十进制  

 

parseInt() 方法，第一个参数为要转换的字符串，第二个参数指定字符串的进制，默认为十进制

 

其他进制的相互转换，先使用parseInt变为十进制， 在利用toString变为其他进制。

 

在javaScript中，八进制以 0 开头，十六进制以 0x 开头，可省略。