前端JavaScript之ECMA

1.JavaScript基础

2.语法规则

3 常用内置对象

4 函数

5 伪数组

6.异常处理

1.1 web前端分为三层

HTML：从语义的角度，描述页面结构
CSS：从审美的角度，描述样式（美化页面）
JavaScript：从交互的角度，描述行为（提升用户体验）

1.2特性

　　弱变量类型的语言，变量只需用var来声明

　　带有界面效果，属于前台语言（运行在用户的终端网页上，而不是在服务器上），它无法操作数据库

1.3组成

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

　　DOM：文档对象模型，用来获取或者设置文档中标签的属性，例如获取或者设置input表单的value值。document.getElementById("").value; 这属于DOM

　　BOM：浏览器对象模型，用来获取或设置浏览器的属性、行为，例如：新建窗口、获取屏幕分辨率、浏览器版本号等。比如 alert();弹出一个窗口,这属于BOM

2.语法规则

　　每一条语句末尾必须加上分号（方便今后压缩文件能够正常运行）

　　所有符号必须是英文

　　注释（单行//或者多行/* */）

2.1引入方式

1 直接编写

    <script>

        alert('hello yuan')

    </script>

2 导入文件

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

2.2JS语句

变量（variant）：使用var关键字，一行能够声明多个变量，并且可以是不同类型

var name="yuan", age=20, job="lecturer";

alert(" ")　　　　　网页弹出警示框

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

prompt()　　　　专门弹出能够让用户输入的对话框

例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        //alert直接使用，不用变量

        alert("下面我要弹出一个对话框！！")

        // 记住，prompt语句中，不管用户输入什么内容，都是字符串。这里必须有一个变量用来接收用户输入的值

        var a = prompt("你是不是傻？");

        console.log(a);

    </script>

</head>

<body>

</body>

</html>

2.2.1变量类型：

可以使用typeof()来查看变量类型

1.数值型（number）

特例：

var a1 = 5/0;

console.log(typeof e1)

//Infinity 无限大. number类型

2.字符串型（string）

注：字符串也是可以相加的，如果符号中存在字符串类型（至少有一个），其它全为数字，那么拼接起来输出也是字符串。

且数字型字符串也可以直接和数字进行运算（字符串型数字+数值=数值）

3.布尔类型（boolean），任何数据类型都能转为boolean类型

4.空类型（null）
5.未定义类型（underfined）

2.2.2变量类型的转换：

parseInt()，可以将字符串转成数字

特性：

　　它还再带筛选功能，只保留字符串最开头的数字，后面的中文自动截掉

　　还自带截断小数功能，直接取整，不四舍五入

console.log(parseInt("528today"));

//后台输出528

string()，tostring()，强制类型转换

2.2.3运算符

　　和python语法中一致，略

特例：

不能对字符串进行加减乘除运算，只能拼接，否则会报错（NaN），即not a number，记住，这也是个number类型

2.2.4流程控制

if 、if-else、if-else if-else

if (true) {

   //执行操作

}else if(true){

    //满足条件执行

}else if(true){

   //满足条件执行

}else{

  //满足条件执行

}

逻辑与运算&&

逻辑或运算||

switch使用（它比else if 语句结构更加清晰，使程序可读性提高）

//每个case条件完后必须输break跳出，如果不写，直到遇到下面的break才会停止

switch (表达式) {

    case 值1:语句1;break;

    case 值2:语句2;break;

    case 值3:语句3;break;

    default:语句4;

}

例：

<script type="text/javascript">

        var number = 10;

        switch(number){

            case 8:

            console.log("小了")

            break;

            case 10:

            console.log("6666")

            break;

            case 13:

            console.log("大了")

            break;

            default:

            console.log("退出")

        }

    </script>

for循环

for (var i = 10; i >= 0; i--) {

            console.log(i)

        }

练习：计算1-100之间所有数字的和

<script type="text/javascript">

        var sum = 0;

        for (var i = 1; i <= 100; i++) {

            sum += i

        }

        console.log(sum)

    </script>

在浏览器中输出直角三角形（想想在Python中如何实现9*9乘法表的）

for(var i = 1;i<6;i++){

            for(var j = 1;j <= i;j++){

                document.write("*")

            }

        document.write('<br>')

        }

3 常用内置对象

数组Array（在python内其实就是列表）

创建方式：

var colors = ['red','color','yellow'];

常用方法：

简单介绍：

join() 将数组中的元素使用指定的字符串连接起来，它会形成一个新的字符串

var score = [1,2,3,5,6];

    var str = score.join('|');

    console.log(str);

//1|2|3|5|6

判断是否为数组：isArray()

字符串string

常用方法

replace(a,b) 将字符串a替换成字符串b

var a = '1234567755';

var newStr = a.replace("4567","****");

console.log(newStr);//123****755

Date日期对象

常用方法

例：

//创建日期对象

var myDate=new Date();

//获取一个月中的某一天

console.log(myDate.getDate());

//返回本地时间

console.log(myDate().toLocalString());//2018/5/27 下午10:36:23

Math内置对象

常见方法

例：求两个数的最大值和最小值

console.log(Math.max(2,5));//

console.log(Math.min(2,5));//

获取0到1之间的随机小数

var ran = Math.random();

    console.log(ran);

## 取100-200之间的随机数，背过公式：min - max之间的随机数： min+Math.random()*(max-min)

4函数

　　作用：简化编程，模块化

　　注意：js的函数加载执行与python不同，它是整体加载完才会执行，所以执行函数放在函数声明上面或下面都可以

例

    sum(3,4);

    sum("hello","world");

    function sum(a,b){

        console.log(a+b);

    }

    //

    //helloworld

函数返回值

       console.log(sum(3, 4));

        //函数：求和

        function sum(a, b) {

            return a + b;

        }

5 伪数组（arguments）

　　代表的是实参，只在函数中使用

5.1返回函数实参的个数：arguments.length

例

    fn(2,4);

    fn(2,4,6);

    fn(2,4,6,8);

    function fn(a,b，c) {

        console.log(arguments);

        console.log(fn.length);         //获取形参的个数

        console.log(arguments.length);  //获取实参的个数

        console.log("----------------");

    }

结果：

清空数组：

     var array = [1,2,3,4,5,6];

    array.splice(0);      //方式1：删除数组中所有项目

    array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读

    array = [];           //方式3：推荐

6.异常处理

try {

    //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行

}

catch (e) {

    // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。

    //e是一个局部变量，用来指向Error对象或者其他抛出的对象

}

finally {

     //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。

}

主动抛出异常 throw Error('xxxx')