html--前端JavaScript基本内容

一、JavaScript 变量

　　在 JavaScript 中创建变量通常称为"声明"变量。
　　使用 var 关键词来声明变量。
注意：
1、变量必须以字母开头
2、变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
3、变量名称对大小写敏感（y 和 Y 是不同的变量）
4、JavaScript 语句和 JavaScript 变量都对大小写敏感。

示例：

<script type="text/javascript">

    // 全局变量
    name = 'seven';

    // 定义函数
    function func(){
        // 局部变量
        var age = ;

        // 全局变量
        gender = "男"
    }
</script>            

二、JavaScript 数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
1、原始类型:
　　数字(Number)
　　JavaScript 只有一种数字类型。数字可以带小数点，也可以不带：
　　　　var x1=34.00; // 使用小数点来写
　　　　var x2=34; // 不使用小数点来写

　　Number对象相关属性
　　　　Number.MAX_VALUE 最大数值
　　　　Number.MIN_VALUE 最小数值
　　　　Number.NaN 特殊的非数字值
　　　　Number.NEGATIVE_INFINITY 负无穷大
　　　　Number.POSITIVE_INFINITY 正无穷大
　　　　Number.toExponential( ) 用指数计数法格式化数字
　　　　Number.toFixed( ) 采用定点计数法格式化数字
　　　　Number.toLocaleString( ) 把数字转换成本地格式的字符串
　　　　Number.toPrecision( ) 格式化数字的有效位
　　　　Number.toString( ) 将—个数字转换成字符串
　　　　Number.valueOf( ) 返回原始数值

　　字符串(String)
　　字符串可以是引号中的任意文本。您可以使用单引号或双引号：
　　　　var carname="Volvo XC60"; //双引号
　　　　var carname='Volvo XC60'; //单引号

　　String对象相关属性
　　　　String.charAt( ) 返回字符串中的第n个字符
　　　　String.charCodeAt( ) 返回字符串中的第n个字符的代码
　　　　String.concat( ) 连接字符串
　　　　String.fromCharCode( ) 从字符编码创建—个字符串
　　　　String.indexOf( ) 检索字符串
　　　　String.lastIndexOf( ) 从后向前检索一个字符串
　　　　String.length 字符串的长度
　　　　String.localeCompare( ) 用本地特定的顺序来比较两个字符串
　　　　String.match( ) 找到一个或多个正则表达式的匹配
　　　　String.replace( ) 替换一个与正则表达式匹配的子串
　　　　String.search( ) 检索与正则表达式相匹配的子串
　　　　String.slice( ) 抽取一个子串
　　　　String.split( ) 将字符串分割成字符串数组
　　　　String.substr( ) 抽取一个子串
　　　　String.substring( ) 返回字符串的一个子串
　　　　String.toLocaleLowerCase( ) 把字符串转换小写
　　　　String.toLocaleUpperCase( ) 将字符串转换成大写
　　　　String.toLowerCase( ) 将字符串转换成小写
　　　　String.toString( ) 返回字符串
　　　　String.toUpperCase( ) 将字符串转换成大写
　　　　String.valueOf( ) 返回字符串

　　布尔值(Boolean)
　　布尔（逻辑）只能有两个值：true 或 false。
　　　　var x=true;
　　　　var y=false;

　　Boolean对象相关属性
　　　　Boolean.toString( ) 将布尔值转换成字符串
　　　　Boolean.valueOf( ) Boolean对象的布尔值

　　2、对象类型:
　　　　数组(Array)
　　　　　　var cars=new Array();
　　　　　　cars[0]="Saab";
　　　　　　cars[1]="Volvo";
　　　　　　cars[2]="BMW";
　　　　或者
　　　　　　var cars=new Array("Saab","Volvo","BMW");

　　Array对象相关属性
　　　　Array.concat( ) 连接数组
　　　　Array.join( ) 将数组元素连接起来以构建一个字符串
　　　　Array.length 数组的大小
　　　　Array.pop( ) 删除并返回数组的最后一个元素
　　　　Array.push( ) 给数组添加元素
　　　　Array.reverse( ) 颠倒数组中元素的顺序
　　　　Array.shift( ) 将元素移出数组
　　　　Array.slice( ) 返回数组的一部分
　　　　Array.sort( ) 对数组元素进行排序
　　　　Array.splice( ) 插入、删除或替换数组的元素
　　　　Array.toLocaleString( ) 把数组转换成局部字符串
　　　　Array.toString( ) 将数组转换成一个字符串
　　　　Array.unshift( ) 在数组头部插入一个元素

　　对象(Object)
　　　对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：
　　　　var person={firstname:"John", lastname:"Doe", id:5566};
　　　　或者
　　　　var person={
　　　　firstname : "John",
　　　　lastname : "Doe",
　　　　id : 5566
　　　　};

　　Object对象相关属性
　　　　Object.constructor 对象的构造函数
　　　　Object.hasOwnProperty( ) 检查属性是否被继承
　　　　Object.isPrototypeOf( ) 一个对象是否是另一个对象的原型
　　　　Object.propertyIsEnumerable( ) 是否可以通过for/in循环看到属性
　　　　Object.toLocaleString( ) 返回对象的本地字符串表示
　　　　Object.toString( ) 定义一个对象的字符串表示
　　　　Object.valueOf( ) 指定对象的原始值

　　空(null)
　　　　null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。

　　未定义(Undefined)
　　　　undfined是一个特殊值，表示变量未定义。

三、JavaScript函数

　　3.1、函数语法：
　　函数就是包裹在花括号中的代码块，前面使用了关键词 function：
　　　　function 函数名(){
　　　　　　执行代码
　　　　}

　　3.2、函数的分类

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

3.3、调用带参数的函数

　　在调用函数时，您可以向其传递值，这些值被称为参数。这些参数可以在函数中使用。您可以发送任意多的参数，由逗号 (,) 分隔：
　　语法：
　　　　function myFunction(var1,var2){
　　　　　　代码
　　　　}

　　示例：

<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>

<script>
function myFunction(name,job)
{
    alert("Welcome " + name + ", the " + job);
}
</script>

3.4、带有返回值的函数
　　有时，我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。
　　语法：
　　　　function myFunction(){
　　　　　　var x=5;
　　　　　　return x;
　　　　}

四、JavaScript 作用域

　　作用域是可访问变量的集合。在JavaScript中，能够定义全局作用域或者局部作用域。

4.1、全局作用域

　　变量在函数外定义，即为全局变量。全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

 var carName = " Volvo"; 

 // 此处可调用 carName 变量 

 function myFunction() { 

     // 函数内可调用 carName 变量 

 }

注意：全局变量在页面关闭后销毁。

4.2、局部作用域

　　变量在函数内声明，变量为局部作用域。局部变量：只能在函数内部访问。

// 此处不能调用 carName 变量 

function myFunction() {
    var carName = "Volvo"; 

    // 函数内可调用 carName 变量 

}

注意：

1、因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。

2、局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

五、条件语句

JavaScript中支持两个中条件语句，分别是：if 和 switch

5.1、If...else if...else 语句

使用 if....else if...else 语句来选择多个代码块之一来执行。

if (condition1)
  {
  当条件  为 true 时执行的代码
  }
else if (condition2)
  {
 当条件  为 true 时执行的代码
  }
else
  {
  当条件  和 条件  都不为 true 时执行的代码
  }

5.2、switch 语句用于基于不同的条件来执行不同的动作。

switch(n)
 {
 case :
  执行代码块
 break;
 case :
  执行代码块
 break;
 default:
 n 与 case  和 case  不同时执行的代码
 }

六、循环语句

6.1、for - 循环代码块一定的次数。

for (语句 ; 语句 ; 语句 )
  {
  被执行的代码块
  }
//语句 1 （代码块）开始前执行 starts.

//语句 2 定义运行循环（代码块）的条件

//语句 3 在循环（代码块）已被执行之后执行

6.2、while 循环

while 循环会在指定条件为真时循环执行代码块。

 while (条件)
   {
  需要执行的代码
   }

6.3、do/while 循环

do/while 循环是 while 循环的变体。该循环会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环。

 do
   {
  需要执行的代码
   }
 while (条件);

七、异常处理

7.1、JavaScript try 和 catch

try 语句允许我们定义在执行时进行错误测试的代码块。

catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。

JavaScript 语句 try 和 catch 是成对出现的。

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

7.2、Throw 语句

throw 语句允许我们创建自定义错误。

正确的技术术语是：创建或抛出异常（exception）。

如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。

throw exception 

八、闭包

「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」

由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。

function f2(){
    var arg= [,,,];
    function f3(){
        return arg;
    }
    return f3;
}

ret = f2();
ret();

九、面向对象

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
    this.Func = function(arg){
        return this.Name + arg;
    }
}

var obj = new Foo('yusheng_liang', );
var ret = obj.Func("很帅");
console.log(ret);

对于上述代码需要注意：

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

上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：

function Foo (name,age) {
    this.Name = name;
    this.Age = age;
}
Foo.prototype = {
    GetInfo: function(){
        return this.Name + this.Age
    },
    Func : function(arg){
        return this.Name + arg;
    }
}