前端基础：JavaScript介绍

JavaScript介绍

一、JavaScript简介

• 1.在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现二层，因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名JavaScript。但实际上它的语法风格与Self及Scheme较为接近；
• 2.为了取得技术优势，微软推出了JScript，CEnvi退出ScriptEase，与JavaScript同样可以在浏览器上运行，为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript；

二、JavaScript基本特点

JavaScript是一种属于网络的脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果，通常JavaScript脚本是通过嵌入在HTML中来实现自身功能的。

• 1.是一种解释性脚本语言(代码不进行预编译)；
• 2.主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为；
• 3.可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离；
• 4.跨平台特性，在绝大多数浏览器的支持下，可以在多种平台下运行(如：windows、Linux、Mac、Android、iOS等)；

JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算数运算符及程序的基本流程框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

三、JavaScript组成部分

• ECMAScript：描述了该语言的语法和基本对象；
• 文档对象模型(DOM)：描述处理网页内容的方法和接口；
• 浏览器对象模型(BOM)：描述与浏览器进行交互的方法和接口

简单地说，ECMAScript描述了以下内容：

• 语法；
• 类型；
• 语句；
• 关键字；
• 保留字；
• 运算符；
• 对象，基于面向对象的语言；

四、JavaScript基础

1.JS的引入方式

# 直接编写：js代码可以放在head标签中，也可以放在body标签中，推荐放在body标签内的最下面
    <script>
        alert("hello world!")
    </script>

# 文件导入
    <script src="hello.js"></script>

2.JS的变量

• 变量分为全局变量和局部变量，声明变量时不用声明变量类型，局部变量使用var关键字，如果没有var关键字，则为全局变量；

var a;
<br>a=3;

• 一行可以声明多个变量，并且可以是不同类型；

var name="eric", age=10,job="lecture";

• 变量命名：首字符只能是字母、下划线和$三选一，其余字符可以是下划线、$或任意字母数字，且区分大小写，x与X是两个变量；

Camel 标记法
首字母是小写的，接下来的单词都以大写字符开头。例如：
var myTestValue = 0, mySecondValue = "hi";

Pascal 标记法
首字母是大写的，接下来的单词都以大写字符开头。例如：
Var MyTestValue = 0, MySecondValue = "hi";

匈牙利类型标记法
在以 Pascal 标记法命名的变量前附加一个小写字母（或小写字母序列），说明该变量的类型。例如，i 表示整数，s 表示字符串，如下所示“
Var iMyTestValue = 0, sMySecondValue = "hi";

3.常量和标识符

常量：直接在程序中出现的数据值；

标识符：

• 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成；
• 常用于表示函数、变量等的名称；
• 例如：_abc,$abc,abc,abc123是标识符，而1abc不是；
• JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符；

关键字：

4.JS的数据类型

数据类型：

Number        数字值
Boolean        布尔值
String            字符串
Undefined     undefined
null                null

数字类型(number)：不区分整型数值和浮点型数值；

var num1 = 10;                // 表示整数10
var num2 = 1.1;                // 表示浮点数1.1
var num3 = 10.0;                // 整数，解析成10
var num4 = 10.;                // 小数点后面没有数字，解析成10
var num5 = 3.124e7;                // 等于32140000，科学记数法

字符串类型(string)：是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特数字符在字符串中的表达；字符串种特殊字符必须加上反斜杠()；常用的转义字符"\n"：换行；"'"：单引号；"""：双引号；"\"：反斜杠；

布尔类型(boolean)：Boolean类型仅有两个值，true和false，也代表1和0。实际运算中true=1，false=0。布尔值也可以看作on/off、yes/no、1/0；Boolean值主要用于JavaScript的条件控制语句：

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

undefinedl：undefined类型只有之一个值，即undefined。当声明的变量未初始化时，该变量的默认值是undefined，当函数无明确返回值时，返回的也是undefined。

null：null类型也只有一个值，即专用的null，就是它的字面值。undefined实际上是从null派生而来的，因此ECMAScript将它们定义为相等的。尽管这两个值相等，但是它们的含义不同。undefined是声明了变量但未对其初始化(变量未赋值)，null则用于表示未存在的对象。如果函数或方法要返回的是对象，那么找不到该对象时，通常返回的是null。

5.运算符

运算符分类

算术运算符：
    +   -    *    /     %       ++        -- 

比较运算符：
    >   >=   <    <=    !=    ==(值相等)    ===(值相等，类型相同)   !==

逻辑运算符：
     &&   ||   ！

赋值运算符：
    =  +=   -=  *=   /=

字符串运算符：
    +  连接，两边操作数有一个或两个是字符串就做连接运算

算术运算符：自增、自减

i++：先赋值后计算；
++i：先计算后赋值；

假设x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1；i++相当于i=i+1，i--相当于i=i-1；

注意：NaN

var d="property";
    d=+d;
    alert(d);                    //NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
    alert(typeof(d));        //Number

    //NaN特点:

    var n=NaN;

    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);

    alert(n!=NaN);            //NaN参与的所有的运算都是false,除了!=

比较运算符

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

    console.log(2==2);         //true
    console.log(2=='2');         //true  因为js是弱类型的，所以返回true

    console.log(2==='2');         //false (===判断的是类型，类型不一样就为false了)
    console.log(2!=='2');         //true ！==和===是相反的

注意：

var bResult = "Blue" < "alpha";
alert(bResult); //输出 true　　
在上面的例子中，字符串 "Blue" 小于 "alpha"，因为字母 B 的字符代码是 66，字母 a 的字符代码是 97。

比较数字和字符串

另一种棘手的状况发生在比较两个字符串形式的数字时，比如：

var bResult = "25" < "3";
alert(bResult); //输出 "true"
上面这段代码比较的是字符串 "25" 和 "3"。两个运算数都是字符串，所以比较的是它们的字符代码（"2" 的字符代码是 50，"3" 的字符代码是 51）。

不过，如果把某个运算数该为数字，那么结果就有趣了：

var bResult = "25" < 3;
alert(bResult); //输出 "false"

这里，字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较，结果不出所料。

总结：

比较运算符两侧如果一个是数字类型,一个是其他类型,会将其类型转换成数字类型.
比较运算符两侧如果都是字符串类型,比较的是最高位的ascii码,如果最高位相等,继续取第二位比较.

逻辑运算符

console.log(1&&3);         //3  两个为真才为真（0为假，其他的数字都代表真）
console.log(0&&3);         //0  只要有一个为假则为假
console.log(0||3);             //3
console.log(2||3);             //2

五、流程控制

• 顺序结构(从上往下顺序执行)
• 分支结构
• 循环结构

分支结构

1.if ... else结构：

if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}

2.switch-case结构：

switch基本格式
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

实例：

switch(x){
case 1:y="星期一";    break;
case 2:y="星期二";    break;
case 3:y="星期三";    break;
case 4:y="星期四";    break;
case 5:y="星期五";    break;
case 6:y="星期六";    break;
case 7:y="星期日";    break;
default: y="未定义";
}

switch-case结构比if...else if... else结构更加清晰，程序更具可读性

循环结构

1.for循环：(推荐使用)

语法规则：

    for(初始表达式; 条件表达式; 自增或自减)
    {
            执行语句
            ……
    }

for循环另一种形式：

for( 变量 in 数组或对象)
    {
        执行语句
        ……
    }

2.while循环：

语法规则：

while (条件){
    语句1；
    ...
}

六、异常处理

try {
    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
    //e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}