进阶学习之JavaScript的基本语法

一、JavaScript

1、javascript的特点
① 跨平台
② 安全性 （javascript的代码不能直接访问硬盘的内容）

2、javascript与java之间区别 ：
① javascript是属于网景公司产品， java是sun公司的产品；
② javascript是基于对象的语言，java是面向对象的语言；
③ javascript是解释型语言，java是解释、编译型语言；
④ javascript是弱类型语言，java是强类型语言。
java中声明变量的时候必须要明确该变量的数据类型；javascript声明变量不需要明确是何种数据类型， 任何的变量都是使用一个关键字var去声明即可。

3、javascript书写
① 方式1：可以使用

<script type="text/javascript">
    js代码;;
</script>   

② 方式2：引入外部的javascript文件。
格式：

<script src="1.js" type="text/javascript"></script>

注意： 如果<script>已经用于引入了js文件，那么该<script>标签体就不能再写js代码了

4、javascript常用的函数
① alert(“显示的内容”) ：弹出框
② document.write(“数据”)：向页面输出数据

5、页面的注释
① 单行注释：// 注释的内容
② 多行注释：/* 注释的内容 */

6、javascript的变量声明
格式：var 变量名 = 数据;

注意：
① 在javascript中声明变量是使用var关键字声明的，javascript中的变量可以存储任意的数据类型数据；
② javascript中变量数据类型是根据存储的值决定的，可以随时更改存储数据的类型；
③ 定义了多个同名的变量是，后定义的同名变量是覆盖前面定义的同名变量；
④ 声明变量的时候可以省略var关键字，但是不建议省略。

7、javascript的数据类型（使用格式：typeof 变量名 ）
① number：小数与整数
② string：字符串（ javascript中没有字符的概念，只有字符串，字符串可以写在单引号或双引号中）
③ boolean：布尔数据类型
④ undefined：该变量没有定义

8、字符串转换成数字
① parseInt()：可以把一个字符串转换成整数
② parseFloat()：可以把一个字符串转换成小数

<script type="text/javascript">
    var a = "12";//12
    a = 12.64;//12
    a = "123abc123";//123 
    // parseInt方法如果接收的字符串含有非数字的字符，那么parseInt方法会从字符串的首个字符开始寻找，一直找到非数字字符为止，然后就使用前面的数字字符转换成数字

    a = "a123";  // NaN：not a number(不是一个数字)
    a = "012"; // 12：如果首位是0，那么就想去除0再进行转换
    a = "0x10"; //16：如果一个字符串是以0x开头，那么会把字符串中的内容当成十六进行的数据处理的
    var b = parseInt(a);
    document.write("结果："+b+"<br/>");

    var c= "3.14"; //3.14
    c = "10";  //如果是一个字符串是整数的，那么使用parseFloat还是转换成整数
    c = "100a"; //100
    c = "abc123"; // NaN
    c = parseFloat(c);
    document.write("结果："+c+"<br/>");

    // javascript提供一个IsNaN的方法让我们判断该字符串是否是一个数字，不是一个数字返回true，是一个数字返回false
    document.write(isNaN("123")+"<br/>"); //false
    document.write(isNaN("abc123")); //true
</script>

9、运算符

<script type="text/javascript">
    //1、+(加法、正数、连接符)[true是1，false是0]
    var a = 1;
    document.write((1+true)+"<br/>"); //2
    document.write((1+false)+"<br/>"); //1
    document.write("hello"+1); // hello1

    //2、除法
    var a = 10;
    var b = 3;
    document.write("除法运算是："+(a/b)+"<br/>"); //如果两个整数相除不能整除的时候结果还是小数

    //3、比较运算符
    /*字符串与字符串的比较规则是：    
    情况1：能找到对应位置上的不同字符，那么就比较第一个不同字符的大小；
    情况2：不能找到对应位置上的不同字符，这时候比较的是两个字符串的长度。*/
    document.write("10大于3吗？"+(10>3)+"<br/>");
    document.write("10字符串大于3字符串吗？"+("190">"19")+"<br/>"); //字符串与字符串比较
    document.write("10大于字符串9吗？"+( 10 > "9")+"<br/>"); //字符串还可以与数字进行比较：凡是数字与字符串进行比较，会先把字符串转换成数字再进行比较

    //4、逻辑运算符
    document.write((true&&true)+"<br/>"); //true
    document.write((true&&false)+"<br/>"); //false
    document.write((false&&true)+"<br/>"); //false
    document.write((false&&false)+"<br/>"); //false
    document.write((true||true)+"<br/>"); //true
    document.write((true||false)+"<br/>"); //true
    document.write((false||true)+"<br/>"); //true
    document.write((false||false)+"<br/>"); //false

    //5、三目运算符：布尔表达式?值1:值2;  
    var age = 10;   
    document.write(age>18?"成年人":"未成年人");
</script>

10、控制流程语句
① if语句
格式：

if(判断条件){
    符合条件执行的代码   
}   

特殊之处： 在javascript中的if语句条件不单止可以写布尔表达式，还可以写任何的数据。
number：非0为true, 0为false
string：内容不能空是true， 内容空的时候是false
undefined：false
NaN：false

② switch语句

switch(变量){
    case 值1: 
        break;
    case 值2：
        break;
    case 值3:
        break;
    .....
    default：
        break;
}

特殊之处：在javascript中case后面可以跟常量、变量、甚至表达式。
③ while循环语句
格式：

while(判断的条件){
    循环体内容   
}

④ do-while循环语句
格式：

do{
    循环语句；
}while(判断条件);

⑤ for循环语句
格式：

for(初始化语句; 判断的条件 ; 循环后的语句){
    循环体语句；  
}

11、for-in语句（和java的增强for循环类似）
格式：

for(var 变量名 in 遍历的目标){

}

作用：
① 可以用于遍历数组的元素。注意： 使用for-in语句遍历数组元素的时候遍历出来是数组的下标。
② 可以用于遍历对象的所有属性数据。注意： 使用for-in语句遍历对象的属性的时候，遍历出来的是对象的属性名。

<script type="text/javascript">
    var arr = [12,13,19,15,16];
    for(var index in arr){
        document.write(arr[index]+",");     
    }

    function Person(id , name){
        this.id = id;
        this.name = name;   
    }
    var p = new Person(110,"狗娃");
    for(var property in p){
        document.write(p[property]+",");    
    }
</script>

12、with语句：在存取对象属性和调用方法时就不用重复指定对象
格式：

with(对象){

}

<script type="text/javascript">
    with(document){
        for(var i = 0 ; i<5; i++){  
            for(var j  =0 ; j<=i ; j++){
                write("*&nbsp;");   
            }   
            write("<br/>");
        }
        write("<hr/>");
    }

    function Person(id , name){
        this.id = id;
        this.name = name;   
    }
    var p = new Person(110,"狗娃");
    with(p){
        document.write("编号："+ p.id);
        document.write("姓名："+ name);
    }
</script>

13、函数
定义格式：

function 函数名(形参列表){
    函数体 ;   
}

注意的细节：
① 在 javascript中函数 定义形参时是不能使用var关键字声明变量的。
② 在javascript中 的函数是没有 返回值类型的，如果函数需要返回数据给调用者，直接返回即可，如果不需要返回则不返回。
③ 在javascript中是没有函数重载的概念的，后定义的同名函数会直接覆盖前面定义同名函数。
④ 在javascript中任何的函数内部都隐式的维护了一个arguments（数组）的对象，给函数 传递数据的时候，是会先传递到arguments对象中，然后再由arguments对象分配数据给形参的。

<script type="text/javascript">
    //需求：定义一个函数做两个参数的加法功能
    function add(a,b){
        var sum = a+b;
        document.write("两个参数的总和："+ sum);    
        //return sum;
    }   
    function add(){
        document.write("长度："+arguments.length+"<br/>");
        for(var index = 0 ; index<arguments.length ; index++){
            document.write(arguments[index]+",");   
        }   
    }
    //调用函数
    add(11,21,13,14);
</script>

14、String对象
① 创建一个字符串的方式：
◆ 方式1：new String(“字符串的内容”);
◆ 方式2：var str = “字符串的内容”;

② 字符串常用的方法：

方法	解释
anchor()	生产锚点
charAt()	返回指定索引位置处的字符
charCodeAt()	返回的是索引值对应的字符的码值
fontcolor()	给字符串添加<font>标签，然后设置color的属性值
indexOf()	返回String对象内第一次出现子字符串的字符位置
italics()	给文本添加一个<I>标签，把文本内容设置成斜体
link()	给文本添加一个<a>标签，并设置href属性值
replace()	给文本添加一个<a>标签，返回根据正则表达式进行文字替换后的字符串的复制
split()	切割
Substr()	截取子串
toUpperCase()	转大写
toLowerCase()	转小写

<script type="text/javascript">
    var str1 = new String("hello");
    var str2 = new String("hello");
    document.write("两个字符串的对象一样吗？"+(str1.toString()==str2.toString()));//true

    document.write("第一章".anchor("one")+"<br/>");
    document.write("abc".charAt(1)+"<br/>");//b
    document.write("abc".charCodeAt(1)+"<br/>");//98
    document.write("第二章".fontcolor("red")+"<br/>");
    document.write("abchellohehehello".indexOf("hello")+"<br/>"); 
    document.write("第三章".italics()+"<br/>");
    document.write("第四章".link("http://www.itcast.cn")+"<br/>"); 
    document.write("今天是周二".replace("二","三")+"<br/>");

    var str = "好-好-学-习，天-天-向-上";
    var arr = str.split("-");
    for(var index = 0 ; index<arr.length ; index++){
        document.write(arr[index]+","); 
    }
    document.write("<br/>");
    document.write("abc".toUpperCase()+"<br/>"); //转大写
    document.write("ABC".toLowerCase()+"<br/>"); //转小写
</script>

15、日期对象（Date）

<script type="text/javascript">
    var date = new Date(); //获取到当前的系统时间
    document.write("年："+ date.getFullYear()+"<br/>");
    document.write("月："+ (date.getMonth()+1)+"<br/>");
    document.write("日："+ date.getDate()+"<br/>");
    document.write("时："+ date.getHours()+"<br/>");
    document.write("分："+ date.getMinutes()+"<br/>");
    document.write("秒："+ date.getSeconds()+"<br/>");

    //xxxx年yy月dd日  hh:mm:ss
    //document.write("当前时间是："+date.toLocaleString());
    document.write("当前时间是："+date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+
    date.getHours()+":"+date.getMinutes()+":"+date.getSeconds());
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取当前系统时间</title>
</head>
<body>
    当前系统时间：<span id="time"></span>
</body>
<script type="text/javascript">
    function getCurrentTime(){
        //获取到当前的系统时间
        var date = new Date();
        //把当前系统时间拼装成我指定的格式。
        var timeInfo =  date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日 "+
    date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
        //找span对象
        var spanObj = document.getElementById("time");
        //设置span标签体的内容
        spanObj.innerHTML = timeInfo.fontcolor("red");
    }
    getCurrentTime();
    //定时方法
    window.setInterval("getCurrentTime()",1000); 
    //setInterval定时方法：第一个参数要指定调用的代码，第二参数是每                                                隔指定的毫秒数调用指定的代码
</script>
</html>

16、Number对象
① 创建Number对象的方式
◆ 方式1：var 变量= new Number(数字)
◆ 方式2：var 变量 = 数字;

② 常用的方法

常用的方法	解释
toString()	把数字转换成指定进制形式的字符串
toFixed()	指定保留小数位,而且还带四舍五入的功能

var  num = 10; // 十进制
document.write("十进制："+num.toString()+"<br/>");
document.write("二进制："+num.toString(2)+"<br/>"); 
document.write("八进制："+num.toString(8)+"<br/>"); 
document.write("十六进制："+num.toString(16)+"<br/>"); 
document.write("三进制："+num.toString(3)+"<br/>");   // 101

var num2 = 3.1415926;
document.write("保留两位小数:"+num2.toFixed(2))       

17、Math数学对象

常用的方法	解释
ceil()	向上取整
floor()	向下取整
random()	随机数方法，产生的伪随机数介于0和1之间（含0不含1）
round()	四舍五入

document.write("向上取整："+ Math.ceil(3.14)+"<br/>");   
document.write("向下取整："+ Math.floor(3.14)+"<br/>");
document.write("随机数："+ Math.random()+"<br/>");
document.write("四舍五入："+ Math.round(3.75)+"<br/>");

18、Array数组对象
① 创建对象的方式
◆ 方式1：var 变量名 = new Array(); 创建一个长度为0的数组
◆ 方式2：var 变量名 = new Array(长度); 创建一个指定长度的数组对象
◆ 方式3：var 变量名 = new Array(“元素1”,”元素2”…); 给数组指定元素创建数组的对象
◆ 方式4： var 变量名 = [“元素1”,”元素2”…];

② 数组要注意的细节：在javascript中数组的长度是可以发生变化的

var arr = new Array(5); //创建了一个长度为5的数组对象
arr[100] = 10;
document.write("arr长度："+arr.length+"<br/>");

var arr2 = new Array("狗娃","狗剩","铁蛋");
arr2 = ["狗娃","狗剩","铁蛋","张三"];
document.write("arr2长度："+arr2.length+"<br/>");

<script type="text/javascript" >
    var arr1 = ["狗娃","狗剩","铁蛋"];
    var arr2 = ["张三","李四"];
    arr1 = arr1.concat(arr2); //concat()把arr1与arr2的数组元素组成一个新的数组返回
    for(var index in arr1){
        document.write(arr1[index]+",");    
    }

    var elements = arr1.join(","); // join()使用指定的分隔符把数组中的元素拼装成一个字符串返回
    document.write("数组的元素："+elements);

    document.write("删除最后的一个元素并返回："+arr1.pop()+"<br/>");//pop()移除数组中的最后一个元素并返回该元素

    arr1.push("王五"); // 将新元素添加到一个数组中，并返回数组的新长度值

    arr1.reverse(); //翻转数组的元素

    document.write("删除第一个元素并返回："+arr1.shift()+"<br/>"); //移除数组中第一个元素并返回数组

    var subArr = arr1.slice(1,2); //指定数组的开始索引值与结束索引值截取数组的元素，并且返回子数组

    document.write("子数组的元素："+subArr.join(",")+"<br/>");

    //如果参数被省略，那么元素要按照ASCII字符的顺序进行排序
    //如果有参数：返回正值会执行调换、返回负值和返回零保持不变
    arr1 = [19,1,20,5];
    arr1.sort(sortNumber);  //1 5 19 20 排序，排序的时候一定要传入排序的方法
    function sortNumber(num1,num2){
        return num1-num2;
    }

    arr1.splice(1,1,"张三","李四","王五"); //第一个参数是开始删除元素的索引值，第二参数是删除元素的个数，往后的数据就是插入的元素
    document.write("数组的元素："+arr1.join(","));
</script>

19、自定义对象：在javascript没有类的概念，只要有函数即可创建对象
① 方式1： 使用无参的函数创建对象

function Person(){}
var p = new Person(); //创建了一个Person对象了
p.id = 110;
p.name = "狗娃";
document.write("编号："+ p.id+" 姓名："+ p.name);

② 方式2：使用带参的函数创建对象

function Person(id,name){
    this.id = id;
    this.name = name;   
    this.say = function(){
        alert(name);    
    }
}
var p = new Person(110,"狗剩");   

③ 方式3： 使用Object函数创建对象

var p = new Object();
p.id = 110;
p.name = "铁蛋";

④ 方式4：使用字面量的方式创建

var p = {
    id:110,
    name:"狗娃",
    say:function(){
    alert(this.name);   
}       
document.write("编号："+ p.id+" 姓名："+ p.name);
p.say();

需求：编写一个js文件，在js文件中自定义一个数组工具对象，该工具对象要有一个找到最大值的方法，与找元素对应的索引值的方法。

//创建ArrayTool的对象
var tool = new ArrayTool();
function ArrayTool(){
    //找最大值
    this.getMax = function(arr){
        var max = arr[0];
        for(var i = 1 ; i<arr.length ;i++){
            if(arr[i]>max){
                max = arr[i];   
            }   
        }
        return max;
    }
    //找元素的索引值
    this.searchEle = function(arr,target){
        for(var i = 0 ; i<arr.length  ; i++){
            if(arr[i] ==target){
                return i;   
            }   
        }   
        return -1;
    }
}

20、需求：想把getMax与searchEle方法添加到数组对象中。
Prototype（原型）注意的细节：
① prototype是函数（function）的一个必备属性（书面一点的说法是”保留属性”），只要是function就一定有一个prototype属性
② prototype的值是一个对象
③ 可以任意修改函数的prototype属性的值。
④ 一个对象会自动拥有prototype的所有成员属性和方法。

<script type="text/javascript">
    Array.prototype.getMax = function(){
        var max = this[0];
        for(var index = 1; index<this.length ; index++){
            if(this[index]>max){
                max = this[index];  
            }   
        }
        return max;
    }
    Array.prototype.searchEle = function(target){
        for(var i = 0 ; i<this.length ; i++){
            if(target==this[i]){
                return i;   
            }   
        }
        return -1;      
    }

    //var arr = new Array(12,4,17,9);
    var arr = [12,4,17,9];
    var max = arr.getMax();
    var index = arr.searchEle(9);
    document.write("最大值："+ max+"<br/>");
    document.write("索引值："+ index+"<br/>");
</script>