前端基础之javaScript

示例：
var score=window.prompt("您的分数:");

if (score>90){
    ret="优秀";
}else if (score>80){
    ret="良";
}else if (score>60){
    ret="及格";
}else {
    ret = "不及格";

}
alert(ret);

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="未定义";
}

示例：
var str1="abcdefgh";
var str2=str1.slice(2,4);
var str3=str1.slice(4);
var str4=str1.slice(2,-1);
var str5=str1.slice(-3,-1);


alert(str2); //结果为"cd"

alert(str3); //结果为"efgh"

alert(str4); //结果为"cdefg"

alert(str5); //结果为"fg"



x.replace(findstr,tpstr)-------字符串替换 如：console.log(s.replace("l","k"))



x.split();------------分割字符串

示列：
var str1="一,二,三,四,五,六,日"; 
var strArray=str1.split(",");
alert(strArray[1]);//结果为"二"



x.concat(addstr) ---------------拼接字符串 如： console.log(s.concat("lop"));

1、数组创建
创建数组的三种方式：
创建方式一：
var arrname = [元素0，元素1,...]；   //var arr=[1,2,3];
创建方式二：
var arrname = new Array(元素0，元素1，...);//var test = new Array(100,"a",True);
创建方式三：
var arrname = new Array(长度)；

          //  初始化数组对象:
                var cnweek=new Array(7);
                    cnweek[0]="星期日";
                    cnweek[1]="星期一";
                    ...
                    cnweek[6]="星期六";


2.数组对象的属性和方法

x.join(bystr);    -------将数组元素拼接成字符串

                          var arr1=[1, 2, 3, 4, 5, 6, 7];
                var str1=arr1.join("-");
                alert(str1);  //结果为"1-2-3-4-5-6-7" 

concat 方法：
x.concat(value,...)  ----- 

           var a = [1,2,3];
                  var b=a.concat(4,5) ;
                  alert(a.toString());  //返回结果为1,2,3            
                  alert(b.toString());  //返回结果为1,2,3,4,5


3.数组的排序：reverse sort:

       arr1.reverse(); //颠倒数组元素
alert(arr1.toString());
//结果为444,111,12,32

arr1.sort();    //排序数组元素
alert(arr1.toString());
//结果为111,12,32,444

===========================

arr=[1,5,2,100];

arr.sort();
alert(arr);
如果就想按着数字比较呢?

function intSort(a,b){
    if (a>b){
        return 1;//-1
    }
    else if(a<b){
        return -1;//1
    }
    else {
        return 0
    }
}

arr.sort(intSort);
alert(arr);




function IntSort(a,b){
    return a-b;
}
arr.sort(IntSort);

alert(arr);

1.数组切片:
x.slice(start,end)
//使用注解
//
//x代表数组对象
//start表示开始位置索引
//end是结束位置下一数组元素索引编号
//第一个数组元素索引为0
//start、end可为负数，-1代表最后一个数组元素
//end省略则相当于从start位置截取以后所有数组元素
如：
var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//结果为"c,d" 
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"

2.删除子数组：
x.splice(start,deleteCount,value,...)

/使用注解

//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略 



var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);    以索引1开始切两个元素

alert(a.toString());//a变为 [1,4,5,6,7,8]

a.splice(1,1);  以上面切除的结果为题，一索引为1开始切一个元素

alert(a.toString());//a变为[1,5,6,7,8]

a.splice(1,0,2,3);  以上面切除的结果为题，在索引为0的后面加上2,3

alert(a.toString());//a变为[1,2,3,5,6,7,8]

3.数组的push和pop
/push pop这两个方法模拟的是一个栈操作

//x.push(value, ...)  压栈
//x.pop()             弹栈      
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//结果为"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//结果为"1,2,3,4,5"

4.数组的shift和unshift:


//x.unshift(value,...)
//x.shift()
//使用注解

//x代表数组对象
//value可以为字符串、数字、数组等任何值
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //结果为"4,5,1,2,3"

arr1. unshift([6,7]);
alert(arr1);  //结果为"6,7,4,5,1,2,3"

arr1.shift();
alert(arr1);  //结果为"4,5,1,2,3"

1.创建Date的对象

//方法1：不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒并不直接显示


2.获取日期和时间
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)

实例练习：
 function too() {
            var date=new Date();
            var year=date.getFullYear();
            var month=date.getMonth();
            var day=date.getDate();
            var Hours=date.getHours();
            var minutes=date.getMinutes();
            var week=date.getDay();

            var arr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
            s=year+"-"+changemonth(month+1)+"-"+day+" "+Hours+":"+changeminutes(minutes)+" "+" "+arr[week];
            return s
        }
        function changemonth(num) {
            if (num<10){
                 return "0"+num
            }
            else{
                return num
            }

        }
        function changeminutes(num) {
            if (num<10){
                return "0"+num
            }
            else{
                return num
            }
        }
        console.log(too())



3.Date对象的方法--日期和时间的转换：

getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差，以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)

1.Math对象：

 console.log(Math.max(12,34,33));   返回数最高值
        console.log(Math.min(12,34,33));   返回数的最小值
          console.log(Math.floor(1.23));   对数进行下舍入
        console.log(Math.floor(1.63));
        console.log(Math.floor(1.00));
        console.log(Math.ceil(1.34));      对数进行上舍入
        console.log(Math.ceil(1.67));
        console.log(Math.exp(1));        e的指数
        console.log(Math.pow(2,3));      幂
        console.log(Math.pow(2,3));
        random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。

//方法练习:
        //alert(Math.random()); // 获得随机数 0~1 不包括1.
        //alert(Math.round(1.5)); // 四舍五入
        //练习：获取1-100的随机整数，包括1和100
             //var num=Math.random();
             //num=num*10;
             //num=Math.round(num);
             //alert(num)
        //============max  min=========================
        /* alert(Math.max(1,2));// 2
        alert(Math.min(1,2));// 1 */
        //-------------pow--------------------------------
        alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.

用 Function 类直接创建函数的语法如下：

1
var 函数名 = new Function("参数1","参数n","function_body");
虽然由于字符串的关系，第二种形式写起来有些困难，但有助于理解函数只不过是一种引用类型，它们的行为与用 Function 类明确创建的函数行为是相同的。

示例：



function func1(name){
    alert('hello'+name);
    return 8
}

    ret=func1("yuan");
    alert(ret);


var func2=new Function("name","alert(\"hello\"+name);")
func2("egon")

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



<script>
    //f(); --->OK

    function f(){
        console.log("hello")

    }

    f() //----->OK
</script>

Function 对象的属性
如前所述，函数属于引用类型，所以它们也有属性和方法。
比如，ECMAScript 定义的属性 length 声明了函数期望的参数个数。


alert(func1.length)

Function 的调用


function func1(a,b){

    alert(a+b);
}

    func1(1,2);  //3
    func1(1,2,3);//3
    func1(1);    //NaN
    func1();     //NaN

    //只要函数名写对即可,参数怎么填都不报错.

-------------------面试题-----------
 function a(a,b){
    alert(a+b);
}

   var a=1;
   var b=2;
   a(a,b)

函数的内置对象arguments


function add(a,b){

        console.log(a+b);//3
        console.log(arguments.length);//2
        console.log(arguments);//[1,2]

    }
    add(1,2)

    ------------------arguments的用处1 ------------------
    function nxAdd(){
        var result=0;
        for (var num in arguments){
            result+=arguments[num]
        }
        alert(result)

    }

    nxAdd(1,2,3,4,5)

//     ------------------arguments的用处2 ------------------

    function f(a,b,c){
        if (arguments.length!=3){
            throw new Error("function f called with "+arguments.length+" arguments,but it just need 3 arguments")
        }
        else {
            alert("success!")
        }
    }

    f(1,2,3,4,5)

匿名函数

// 匿名函数
    var func = function(arg){
        return "tony";
    }

// 匿名函数的应用
    (function(){
        alert("tony");
    } )()

    (function(arg){
        console.log(arg);
  })('123')

window对象

所有浏览器都支持 window 对象。
概念上讲.一个html文档对应一个window对象.
功能上讲: 控制浏览器窗口的.
使用上讲: window对象不需要创建对象,直接使用即可.



Window 对象方法

alert()            显示带有一段消息和一个确认按钮的警告框。
confirm()          显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt()           显示可提示用户输入的对话框。

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。

setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

<div id="div1">

    <div class="div2">i am div2</div>
    <div name="yuan">i am div2</div>
    <div id="div3">i am div2</div>
    <p>hello p</p>
</div>

<script>

   var div1=document.getElementById("div1");

////支持;
//   var ele= div1.getElementsByTagName("p");
//   alert(ele.length);
////支持
//   var ele2=div1.getElementsByClassName("div2");
//   alert(ele2.length);
////不支持
//   var ele3=div1.getElementById("div3");
//   alert(ele3.length);
////不支持
//   var ele4=div1.getElementsByName("yuan");
//   alert(ele4.length)

</script>

节点操作：
节点属性操作：
1.获取文本节点的值：innerText  innerHTML


绑定事件的方式：
方式1:
<!--事件绑定方式1-->
<div onclick="foo(this)">DIV</div>
<script>
    function foo(self) {

        console.log(self);
       // var ele=document.getElementsByTagName("div")[0];
       self.style.color="red";
    }
</script>

方式2：
<div class="c1">DIV2</div>

<script>

    // 事件绑定方式2:   标签对象.on事件=function(){}

    var ele=document.getElementsByClassName("c1")[0];

    ele.onclick=function () {
        console.log(this); // this 代指： 当前触发时间的标签对象；

        this.style.fontSize="30px"
    };

</script>


ul li 事件

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
    <li>444</li>
</ul>


<script>

 var eles_li=document.getElementsByTagName("li");

    var eles_li0=document.getElementsByTagName("li")[0];
    var eles_li1=document.getElementsByTagName("li")[1];
    var eles_li2=document.getElementsByTagName("li")[2];
    var eles_li3=document.getElementsByTagName("li")[3];

    eles_li0.onclick=function () {
        console.log(this)   //    this：<li>111</li>
    };

     eles_li1.onclick=function () {
        console.log(this)   //    this：<li>111</li>
    };
      eles_li2.onclick=function () {
        console.log(this)   //    this：<li>111</li>
   };
       eles_li3.onclick=function () {
        console.log(this)   //    this：<li>111</li>
    };





    // 改为for 循环：

    for (var i=0;i<eles_li.length;i++){

         eles_li[i].onclick=function () {
             console.log(i); // i 为什么是4？
             // console.log(this.innerText);
             //console.log(eles_li[i].innerText);
         }

    }

</script>

属性操作：
<div class="c1" id="d1">DIV</div>

<script>
    // 文本属性：
    var ele=document.getElementsByClassName("c1")[0];

    // ele.id="d2";


    // 取属性值
//    console.log(ele.getAttribute("id"));
//    console.log(ele.id);

    // 属性赋值：
    //ele.setAttribute("id","d2")
    //ele.id="d2";

    // class属性

    console.log(ele.className);
    ele.classList.add("hide");
    ele.classList.remove("hide");
</script>



属性操作2：
<div class="c1"><a href=''>click</a></div>

<script>
    // 文本属性：
    var ele=document.getElementsByClassName("c1")[0];

     // innerText 取值操作
//     console.log(ele.innerText); // DIV
     // innerText 赋值操作
//     ele.innerText="Egon";

     //ele.innerText="<a href=''>click</a>";
//============================================================
    // innerHTML 取值操作
    // console.log(ele.innerHTML)

    // innerHTML 赋值操作

//    ele.innerHTML="<a href=''>click</a>";

    console.log(ele.innerText);
    console.log(ele.innerHTML);

</script>