Python之路（二十二）：Javascript

JavaScript

为什么学习JavaScript

HTML定义网页的内容

CSS描述网页的布局及渲染

JavaScript网页的行为

三者之间相辅相成

定义

javascript是一门动态弱类型的解释型编程语言，增强页面动态效果，实现页面与用户之间的实时动态的交互。

javascript是由三部分组成：ECMAScript、DOM、BOM

ECMAScript由ECMA-262定义，提供核心语言功能（ECMA是欧洲计算机制造商协会）
DOM(Document Object Model)文档对象模型，提供访问和操作网页内容的方法和接口(着重点)
BOM(Browser Object Model)浏览器对象模型，提供与浏览器交互的方法和接口

Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.

ECMAScript 描述了以下内容：

语法
类型
语句
关键字
保留字
运算符
对象 (封装继承多态) 基于对象的语言.使用对象.

引入方式

　　存在形式

<!-- 方式一 -->
<script type"text/javascript" src="JS文件路径"></script>
   
<!-- 方式二 -->
<script type"text/javascript">
    Js代码内容
</script>

　　存放位置

HTML的head中

HTML的body代码块底部(推荐)

　　为什么推荐存放位置在body代码块的底部

HTML文档代码依次由上自下执行,预先加载CSS样式,而不会让用户看到单纯的文本内容

如果head中js代码耗时严重,则导致用户长时间无法看到网页内容;如果放在底部,不会影响网页效果,减少等待时间

变量

变量必须以字母开头

变量也能以 $ 和 _ 符号开头（不过不推荐这么做）

变量名称对大小写敏感（y 和 Y 是不同的变量）

JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。

变量声明之后，该变量是空的（它没有值）。如需向变量赋值，请使用等号，也可以在声明变量时对其赋值

推荐在每行js代码加一个分号，代表语句的结束

<script type="text/javascript">
  
    // 全局变量
    name = 'Tony';
  
    function func(){
        // 局部变量   声明一个age变量
        var age;
         
        // 赋值操作
        age = 18;
         
        // 全局变量
        gender = "男"
    }
</script>

JavaScript中代码注释（此注释仅在Script块中生效）：

单行 //
多行 /* */

常量和标识符

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

标识符的规范即变量规范在上文已介绍过

语句	描述
break	用于跳出循环。
catch	语句块，在 try 语句块执行出错时执行 catch 语句块。
continue	跳过循环中的一个迭代。
do ... while	执行一个语句块，在条件语句为 true 时继续执行该语句块。
for	在条件语句为 true 时，可以将代码块执行指定的次数。
for ... in	用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。
function	定义一个函数
if ... else	用于基于不同的条件来执行不同的动作。
return	退出函数
switch	用于基于不同的条件来执行不同的动作。
throw	抛出（生成）错误。
try	实现错误处理，与 catch 一同使用。
var	声明一个变量。
while	当条件语句为 true 时，执行语句块。

运算符

　　算数运算符

加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% )  加、减、乘、除、余数和数学中的运算方法一样  例如：9/2=4.5，4*5=20，9%2=1
 
-除了可以表示减号还可以表示负号  例如：x=-y
 
+除了可以表示加法运算还可以用于字符串的连接  例如："abc"+"def"="abcdef"

　　递增，递减

假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1
i++相当于i=i+1，i--相当于i=i-1
递增和递减运算符可以放在变量前也可以放在变量后：--i
     
var i=1;
console.log(i++);
console.log(++i);
console.log(i--);
console.log(--i);
 
 
// ++i  表示先+再赋值 --i 表示先减再赋值

　　一元加减法

var a=1;
    var b=1;
    a=-a;  //a=-1
 
    var c="10";
    alert(typeof (c));
    c=+c;    //类型转换
    alert(typeof (c));
//    -------------------
    var d="Tony";
    d=+d;
    alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
    alert(typeof(d));//Number
 
    //NaN特点: not a number
     
    var n=NaN;
     
    alert(n>3);
    alert(n<3);
    alert(n==3);
    alert(n==NaN);
     
    alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=

　　逻辑运算符

等于 ( == )  、不等于( != ) 、 大于( > ) 、 小于( < )  大于等于(>=) 、小于等于(<=)
与 (&&) 、或(||) 、非(!)
1 && 1 = 1  1 || 1 = 1
1 && 0 = 0  1 || 0 = 1
0 && 0 = 0  0 || 0 = 0

　　　　逻辑and运算符(&&)

逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。
 
如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：
 
如果一个运算数是对象，另一个是 Boolean 值，返回该对象。
如果两个运算数都是对象，返回第二个对象。
如果某个运算数是 null，返回 null。
如果某个运算数是 NaN，返回 NaN。
如果某个运算数是 undefined，返回undefined。

　　　　逻辑and运算符(||)

与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值：
 
如果一个运算数是对象，并且该对象左边的运算数值均为 false，则返回该对象。
如果两个运算数都是对象，返回第一个对象。
如果最后一个运算数是 null，并且其他运算数值均为 false，则返回 null。
如果最后一个运算数是 NaN，并且其他运算数值均为 false，则返回 NaN。
如果某个运算数是 undefined，返回undefined。

　　　　&&常用操作

1> 取代if语句
//前面条件成立则运行后面操作
(a == b) && dosomething();
 
2> 用于回调函数
//若没有给参数a传值，则a默认为undefined假值，所以不执行a()。
function fn(a){
    a && a();
}

　　　　||常用操作

1> 变量设置为默认值
//如果没有向参数a传入任何参数，则将该参数设置为空对象
function func(a){
    a = a || {};
}

　　赋值运算符

赋值 =
JavaScript中=代表赋值，两个等号==表示判断是否相等
例如，x=1表示给x赋值为1
if (x==1){...}程序表示当x与1相等时，怎样怎样
if(x==“on”){…}程序表示当x与“on”相等时，怎样怎样
 配合其他运算符形成的简化表达式
例如i+=1相当于i=i+1，x&=y相当于x=x&y

　　运算符更新中

控制语句

1、条件控制语句

javascript支持俩个条件语句if和switch(选择控制语句)

//if语句
  
if(条件){
   
    }else if(条件){
           
    }else{
   
}

　　switch

switch (条件) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

　　结语

//switch比else if结构更加简洁清晰，使程序可读性更强,效率更高。
 
首先要看一个问题，if 语句适用范围比较广，只要是 boolean 表达式都可以用 if 判断；而 switch 只能对基本类型进行数值比较。两者的可比性就仅限在两个基本类型比较的范围内。
说到基本类型的数值比较，那当然要有两个数。然后重点来了——
if 语句每一句都是独立的，看下面的语句：
if (a == 1) ...
else if (a == 2) ...
这样 a 要被读入寄存器两次，1 和 2 分别被读入寄存器一次。于是你是否发现其实 a 读两次是有点多余的，在你全部比较完之前只需要一次读入寄存器就行了，其余都是额外开销。但是 if 语句必须每次都把里面的两个数从内存拿出来读到寄存器，它不知道你其实比较的是同一个 a。
于是 switch case 就出来了，把上面的改成 switch case 版本：
switch (a) {
        case 0:
                break;
        case 1:
}
                 
总结:
 
1.switch用来根据一个整型值进行多路分支，并且编译器可以对多路分支进行优化
2.switch-case只将表达式计算一次,然后将表达式的值与每个case的值比较,进而选
  择执行哪一个case的语句块
3.if..else 的判断条件范围较广，每条语句基本上独立的，每次判断时都要条件加载
  一次。
所以在多路分支时用switch比if..else if .. else结构要效率高。

2、循环控制语句

JavaScript中支持四种循环语句，分别是：for、for in、while、do-while

　　for、for in

for (初始值;条件;增量){
    ......
}
 
 
//例如1到100的和为多少
 
var x = 0,sum = 0;
 
for (x;x<101;x++){
    sum += x;
}
 
alert(sum);
 
//例如一个数组索引取值
 
//for语句
 
var names = ["Alex","Egon","Tony"];
 
for (var i=0;i<names.length;i++){
    console.log(i);
    console.log(names[i])
}
 
//for in 语句
 
var names = ["Alex","Egon","Tony"];
 
for (var i in names){
    console.log(i);
    console.log(names[i]);
}

　　while、do while

// while
 
while(条件){
    // break;
    // continue;
}
 
// 例如1到100的和
 
while (x<=100){
    sum+=x;
    x++;
}
 
alert(sum);
 
 
// do whill
 
//循环的代码至少执行一次，结果为1
  
        var num = 0;
        do {
            num++;
        }while (num>10);

3、label语句

　　更新中...

4、异常处理语句

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

数据类型

null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。
undefined是一个特殊值，表示变量未定义。

基本数据类型

　　Number

JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。

转换：

parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN

特殊值：

NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。

Number	对数字的支持
Number.MAX_VALUE	最大数值
Number.MIN_VALUE	最小数值
Number.NaN	非数字
Number.NEGATIVE_INFINITY	负无穷大
Number.POSITIVE_INFINITY	正无穷大
Number.toExponential( )	返回四舍五入的科学计数法，加参数为保留几位
Number.toFixed( )	小数点后面的数字四舍五入，加参数为保留几位
Number.toPrecision( )	四舍五入，自动调用toFixed()或toExponential()
Number.toLocaleString( )	把数字转换成本地格式的字符串
Number.toString( )	将数字转换成字符串
Number.valueOf( )	返回原始数值

更多数值计算

常量

Math.E
常量e，自然对数的底数。

Math.LN10
10的自然对数。

Math.LN2
2的自然对数。

Math.LOG10E
以10为底的e的对数。

Math.LOG2E
以2为底的e的对数。

Math.PI
常量figs/U03C0.gif。

Math.SQRT1_2
2的平方根除以1。

Math.SQRT2
2的平方根。

静态函数

Math.abs( )
计算绝对值。

Math.acos( )
计算反余弦值。

Math.asin( )
计算反正弦值。

Math.atan( )
计算反正切值。

Math.atan2( )
计算从X轴到一个点的角度。

Math.ceil( )
对一个数上舍入。

Math.cos( )
计算余弦值。

Math.exp( )
计算e的指数。

Math.floor( )
对一个数下舍人。

Math.log( )
计算自然对数。

Math.max( )
返回两个数中较大的一个。

Math.min( )
返回两个数中较小的一个。

Math.pow( )
计算xy。

Math.random( )
计算一个随机数。

Math.round( )
舍入为最接近的整数。

Math.sin( )
计算正弦值。

Math.sqrt( )
计算平方根。

Math.tan( )
计算正切值。

　　String

String.length	字符串的长度
String.trim()	移除空白
String.trimLeft()	移除左侧空白
String.trimRight()	移除右侧空白
String.concat(value, ...)	拼接
String.slice(start, end)	切片
String.split( )	分割
String.search( )	从头开始匹配，返回匹配成功的第一个位置(g无效)
String.match( )	全局搜索，如果正则中有g表示找到全部，否则只找到第一个
String.replace( )	`替换，正则中有g则替换所有，否则只替换第一个匹配项；` `$数字：匹配的第n个组内容；` `$&：当前匹配的内容；` $`：位于匹配子串左侧的文本； `$'：位于匹配子串右侧的文本` `$$：直接量$符号`
String.charAt( )	返回字符串中的第n个字符
String.charCodeAt( )	返回字符串中的第n个字符的代码
String.fromCharCode( )	从字符编码创建—个字符串
String.indexOf( )	查找子字符串位置
String.lastIndexOf( )	查找子字符串位置
String.localeCompare( )	用本地特定的顺序来比较两个字符串
String.substr( )	抽取一个子串
String.substring( )	返回字符串的一个子串
String.toLocaleLowerCase( )	把字符串转换小写(针对地区，在不知道程序在哪个语言环境中运行时用)
String.toLocaleUpperCase( )	将字符串转换成大写(针对地区)
String.toLowerCase( )	小写
String.toUpperCase( )	大写
String.toString( )	返回原始字符串值
String.toString()	返回原始字符串值
String.valueOf( )	返回原始字符串值

常用转义字符

　　Boolean

布尔类型仅包含真假，与Python不同的是其首字母小写。即true和false，也代表1和0，也是常作用于条件语句

== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且

　　Array(数组)

Array.length	数组的长度
Array.push()	尾部添加元素
Array.pop()	删除并返回数组的最后一个元素
Array.unshift()	在数组头部插入一个元素
Array.shift( )	在数组头部移除一个头部元素
Array.slice( )	切片
Array.reverse( )	反转
Array.join( )	将数组元素连接起来以构建一个字符串
Array.concat( )	拼接
Array.sort( )	排序按照最高位
Array	对数组的内部支持
Array.splice( start, deleteCount, value, ...)	插入、删除或替换数组的元素 `obj.splice(n,0,val) 指定位置插入元素` `obj.splice(n,1,val) 指定位置替换元素` `obj.splice(n,1) 指定位置删除元素`
Array.toLocaleString( )	把数组转换成局部字符串
Array.toString( )	将数组转换成一个字符串

 1 Array 对象用于在单个的变量中存储多个值。
 2 语法:
 3 
 4 创建方式1:
 5 var a=[1,2,3];
 6 
 7 创建方式2:
 8 new Array();     //  创建数组时允许指定元素个数也可以不指定元素个数。
 9 new Array(size);//if 1个参数且为数字,即代表size,not content
10     初始化数组对象:
11     var cnweek=new Array(7);
12         cnweek[0]="星期日";
13         cnweek[1]="星期一";
14         ...
15         cnweek[6]="星期六";
16 
17 new Array(element0, element1, ..., elementn)//也可以直接在建立对象时初始化数组元素，元素类型允许不同
18 
19 var test=new Array(100,"a",true);

//即数组内包含数组

var cnweek=new Array(7);
for (var i=0;i<=6;i++){
    cnweek[i]=new Array(2);
}
cnweek[0][0]="星期日";
cnweek[0][1]="Sunday";
cnweek[1][0]="星期一";
cnweek[1][1]="Monday";
...
cnweek[6][0]="星期六";
cnweek[6][1]="Saturday";

//  js中数组的特性
         //java中数组的特性,  规定是什么类型的数组,就只能装什么类型.只有一种类型.
         //js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
         //js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长.
         var arr5 = ['abc',123,1.14,true,null,undefined,new String('1213'),new Function('a','b','alert(a+b)')];
        /*  alert(arr5.length);//8
         arr5[10] = "hahaha";
         alert(arr5.length); //11
         alert(arr5[9]);// undefined */

Function函数

1、定义及分类

// 普通函数
    function func(arg){
        return true;
    }
           
// 匿名函数
    var func = function(arg){
        return "Tony";
    }
   
// 自执行函数
    (function(arg){
        console.log(arg);
    })('123')

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

2、参数

函数传参的个数可以小于实际需传参的个数，没传参的默认为undefined

参数传多默认不起作用

function man(name,age) {
    console.log(name,age);
}
man("Tony",18); //Tony 18
man("Tony");    //Tony undefined
man("Tony",18,19);  //Tony 18

arguments参数 argument 对象包含了函数调用的参数数组。

　　arguments取最大值

big = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
 
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}
 
console.log(big)

　　arguments求和

xx = sum(1, 123, 500, 115, 44, 88);
 
function sum() {
    var i, sum = 0;
 
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i]
    }
    return sum;
}
 
console.log(xx);

3、作用域

js的作用域和py相似，if while等控制语句并没有自己作用域；而函数是有自己的作用域的

JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，如果不存在，则异常。

切记：所有的作用域在创建函数且未执行时候就已经存在。

function f1(){
        var arg= [11,22];
        function f2(){
            console.log(arg);
        }
        arg = [44,55];
        return f2;
    }
ret = f1();
ret();
 
// Array [44,55]

3、闭包

闭包就是能够读取其他函数内部变量的函数。

4、面向对象

在JS中并没有类、但是它使用了函数充当了类

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}
   
var obj = new Foo('alex', 18);
var ret = obj.Func("sb");
console.log(ret);

基于上述代码：

Foo充当的构造函数
this代指对象
创建对象时需要使用 new

var v = 123;
function foo(){
    var v = 456;
    function inner(){
        console.log(v)   // 456 
    }
    return inner
}

result = foo()
console.log(result())    // undefined

/*    题中、当代码编译完成,函数在未执行
前作用域就已经存在,出现函数嵌套产生作
用域链,寻找值时会从内到外一层一层找,
找不到则出错
*/


Name='root';
Age = 18;
function Foo(name,age){
    // this代指obj
    this.Name = name;
    this.Age = age;
    this.Func = function(){
        console.log(this.Name,this.Age);     // 'alex' 666
        (function(){
            // this代指window
            console.log(this.Name,this.Age); // 'root' 18
        })();
    }
}
obj = new Foo('alex',666);
obj.Func()

/* js中用new的方式创建类对象 */

5、补充

其它

A，Js时间处理

时间操作中有两种时间：

时间统一时间
本地时间（东8区）

Date                      // 操作日期和时间的对象
Date.getDate( )           // 返回一个月中的某一天
Date.getDay( )            // 返回一周中的某一天
Date.getFullYear( )       // 返回Date对象的年份字段
Date.getHours( )          // 返回Date对象的小时字段
Date.getMilliseconds( )   // 返回Date对象的毫秒字段
Date.getMinutes( )        // 返回Date对象的分钟字段
Date.getMonth( )          // 返回Date对象的月份字段
Date.getSeconds( )        // 返回Date对象的秒字段
Date.getTime( )           // 返回Date对象的毫秒表示
Date.getTimezoneOffset( ) // 判断与GMT的时间差
Date.getUTCDate( )        // 返回该天是一个月的哪一天(世界时)
Date.getUTCDay( )         // 返回该天是星期几(世界时)
Date.getUTCFullYear( )    // 返回年份(世界时)
Date.getUTCHours( )       // 返回Date对象的小时字段(世界时)
Date.getUTCMilliseconds( )// 返回Date对象的毫秒字段(世界时)
Date.getUTCMinutes( )     // 返回Date对象的分钟字段(世界时)
Date.getUTCMonth( )       // 返回Date对象的月份(世界时)
Date.getUTCSeconds( )     // 返回Date对象的秒字段(世界时)
Date.getYear( )           // 返回Date对象的年份字段(世界时)
Date.parse( )             // 解析日期/时间字符串
Date.setDate( )           // 设置一个月的某一天
Date.setFullYear( )       // 设置年份，也可以设置月份和天
Date.setHours( )          // 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段
Date.setMilliseconds( )   // 设置Date对象的毫秒字段
Date.setMinutes( )        // 设置Date对象的分钟字段和秒字段
Date.setMonth( )          // 设置Date对象的月份字段和天字段
Date.setSeconds( )        // 设置Date对象的秒字段和毫秒字段
Date.setTime( )           // 以毫秒设置Date对象
Date.setUTCDate( )        // 设置一个月中的某一天(世界时)
Date.setUTCFullYear( )    // 设置年份、月份和天(世界时)
Date.setUTCHours( )       // 设置Date对象的小时字段、分钟字段、秒字段和毫秒字段(世界时)
Date.setUTCMilliseconds( )// 设置Date对象的毫秒字段(世界时)
Date.setUTCMinutes( )     // 设置Date对象的分钟字段和秒字段(世界时)
Date.setUTCMonth( )       // 设置Date对象的月份字段和天数字段(世界时)
Date.setUTCSeconds( )     // 设置Date对象的秒字段和毫秒字段(世界时)
Date.setYear( )           // 设置Date对象的年份字段
Date.toDateString( )      // 返回Date对象日期部分作为字符串
Date.toGMTString( )       // 将Date转换为世界时字符串
Date.toLocaleDateString() // 回Date对象的日期部分作为本地已格式化的字符串
Date.toLocaleString( )    // 将Date转换为本地已格式化的字符串
Date.toLocaleTimeString() // 返回Date对象的时间部分作为本地已格式化的字符串
Date.toString( )          // 将Date转换为字符串
Date.toTimeString( )      // 返回Date对象日期部分作为字符串
Date.toUTCString( )       // 将Date转换为字符串(世界时)
Date.UTC( )               // 将Date规范转换成毫秒数
Date.valueOf( )           // 将Date转换成毫秒表示

B，Js序列化

JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化

C，Js转义

decodeURI( ) URl中未转义的字符
decodeURIComponent( ) URI组件中的未转义字符
encodeURI( ) URI中的转义字符
encodeURIComponent( ) 转义URI组件中的字符
escape( ) 对字符串转义
unescape( ) 给转义字符串解码
URIError 由URl的编码和解码方法抛出

D，eval

Js中的eval既可以运行代码也可以获取返回值

a = eval('1+1');
console.log(a); //2

eval()
EvalError 执行字符串中的JavaScript代码

E，Js中的正则表达式