前端入门之——javascript day8

Array对象的方法

    // 栈操作： shift unshift   pop push 压栈>>>放数据   弹栈>>>>取数据
    //队列 先进先出      栈： 先进后出
    var arr5=[1,4,6];
    arr5.push(13);
    arr5.push("hello",7);
    console.log(arr5)
    var ret=arr5.pop();//删最后一个
    console.log(arr5)
    console.log(ret)
console.log("下面是shift等的演示，栈操作 后进先出")
    arr5.unshift(45);
    console.log(arr5);
    arr5.shift();
    console.log(arr5);

　　

  //排序 数组排序
    var arr6=[1,6,3,2,100];
    // arr6.reverse();
    // console.log(arr6)
    //
    // console.log(arr6.sort())
    function mysort(a,b) {
        if (a>b){
            return 1;
        }else if(a<b){
            return -1;
        }else{
            return 0
        }
    }
    function mysort1(a,b) {
        return a-b;
    }
    console.log(arr6.sort(mysort1))

　　

    var arr6=[1,6,3,2,100];
    // console.log(arr6.toString())
    //concat 返回一个新的数组
    console.log(arr6.concat([4,5]))
    console.log(arr6.concat(4,5))

　　

Date对象

创建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( ));
//毫秒并不直接显示

　　一个时区15度，一度相差时间相差4分钟

    // var data_obj=new Date();
    // alert(data_obj.toLocaleString())
    // alert(data_obj.toLocaleDateString())
    // alert(data_obj.toLocaleTimeString())

    // var data_obj=new Date("2018/9/12 10:42");
    // // alert(data_obj)
    // // alert(data_obj.toLocaleString())
    // alert(data_obj.getDay())
    // alert(data_obj.getDate())

    // var data_obj=new Date("2018/9/12 10:50");
    // alert(data_obj.toLocaleString())
    // alert(data_obj.toUTCString())
    // alert(data_obj.getFullYear())
    // alert(data_obj.getMonth()+1+"add 1")
    // alert(data_obj.getHours())
    // alert(data_obj.getDay()+"星期")
    // alert(data_obj.get)
    function mydata() {
        var data_obj=new Date("2018/9/5 8:6:30");
        var year=data_obj.getFullYear();
        var month=data_obj.getMonth()+1;//0-11
        var day=data_obj.getDate();
        var hour=data_obj.getHours();//0----23
        var minuts=data_obj.getMinutes()//0---59
        var seconds=data_obj.getSeconds()//0---59
        var week=data_obj.getDay();//取星期

        return year+"年"+f(month)+"月"+f(day)+"日"+" "+f(hour)+":"+f(minuts)+":"+f(seconds)+" "+num_week(week)

    }
    function num_week(n) {
        week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
        return week[n]
    }
    function f(num) {
        if( num<10){
            return "0"+num
        }else{
            return num
        }
    }
    alert(mydata())

正则     RegExp对象

//RegExp对象
    // 在表单验证时使用该对象验证用户填入的字符串是否符合规则.
    //创建正则对象方式1  参数1 正则表达式  参数2 验证模式  g global / i 忽略大小写. //参数2一般填写g就可以，也有“gi”.
    // 用户名 首字母必须是英文, 除了第一位其他只能是英文数字和_ . 长度最短不能少于6位 最长不能超过12位
    //----------------------------创建方式1
    /* var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$","g");
    //
    //验证字符串
    var str = "bc123";
    alert(reg1.test(str));// true
    
    //----------------------------创建方式2  /填写正则表达式/匹配模式;
    var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/g;
    
    alert(reg2.test(str));// true
     */
    //-------------------------------正则对象的方法-------------------
        //test方法  ==>  测试一个字符串是否复合 正则规则. 返回值是true 和false.
    
    //-------------------------String 中与正则结合的4个方法------------------.
    // macth search split replace
    var str = "hello world";
    
    //alert(str.match(/o/g)); //查找字符串中 复合正则的 内容.
    //alert(str.search(/h/g));// 0  查找字符串中符合正则表达式的内容位置
    //alert(str.split(/o/g)); // 按照正则表达式对字符串进行切割. 返回数组;
    alert(str.replace(/o/g, "s")); // hells wsrld  对字符串按照正则进行替换.

//正则表达式
//     var re_obj=new RegExp("d+","g")
//     alert(re_obj.test("adsfas45678dasf"))


    // var re_obj2=/d+/g;
    // alert(re_obj2.test("adafwer2342fadfa"));

    var s="hello222发顺丰答复31";
    // alert(s.match(/l/g))//相当于Python的findall 返回一个匹配到的列表
    // alert(s.match(/d+/g))//相当于Python的findall 返回一个匹配到的列表
    //
    //
    // alert(s.search(/d+/g))//取出第一个匹配结果的索引

    alert(s.split(/d+/g))
    alert(s.replace(/d+/g,"***"))

　　

Math对象

//Math对象
    //该对象中的属性方法 和数学有关.
    //Math是内置对象 , 与Global的不同之处是, 在调用时 需要打出 "Math."前缀.
    //属性学习:
    //alert(Math.PI);
    //方法学习:
        //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 次方.
        



abs(x)    返回数的绝对值。
exp(x)    返回 e 的指数。
floor(x)对数进行下舍入。
log(x)    返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)    返回数的正弦。
sqrt(x)    返回数的平方根。
tan(x)    返回角的正切。

　　

函数的作用域链和闭包

作用域

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

if(1==1){

        var s=12;
    }
    console.log(s);//12

   // ----------------------
    function f(){
        var temp=666;
    }
    f();
    console.log(temp);//Uncaught ReferenceError: temp is not defined

　　

嵌套函数的作用域：

例1:

var city = 'beijing';

    function func(){
        var city = 'shanghai';
        function inner(){
            var city = 'shenzhen';
            console.log(city);
        }
        inner();
    }
    func();

　　

例2:

var city = 'beijing';
function Bar(){
    console.log(city);
}
function func(){

    var city = 'shanghai';
    return Bar;
}
var ret = func();
ret();    //beijing

　　

闭包：

var city = 'beijing';

function func(){
    var city = "shanghai";
    function inner(){
        // var city = "langfang";
        console.log(city);
    }
    return inner;
}
var ret = func();
ret();

　　思考题1：

var city = 'beijing';

function func(){
    var city = "shanghai";

    function inner(){
        // var city = "langfang";
        console.log(city);
    }

    return inner;
}

var ret = func();
ret();


var city = 'beijing';

function Bar(){
    console.log(city);
}

function func(){

    var city = 'shanghai';
    return Bar;
}

var ret = func();
ret();    //beijing

　　

作用域链(Scope Chain)：

      在JavaScript中，函数也是对象，实际上，JavaScript里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]]，由ECMA-262标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。

var x=1;
function foo() {
    var y = 2;
    
    function bar() {
        var z = 3;
    }
}

#bar的作用域链： barScopeChain=[bar.AO, foo.AO, global.VO];

#foo的作用域链： fooScopeChain=[foo.Ao, global.VO];

　　

什么是AO,VO?
       在函数创建时，每个函数都会创建一个活动对象Active Object(AO)，全局对象为Global Object(VO)，创建函数的过程也就是为这个对象添加属性的过程，作用域链就是由这些绑定了属性的活动对象构成的。
        例如：找x变量；bar函数在搜寻变量x的过程中，先从自身AO对象上找，如果bar.AO存在这个属性，那么会直接使用这个属性的值，如果不存在，则会转到父级函数的AO对象，也就是foo.AO
        如果找到x属性则使用，找不到继续 在global.VO对象查找，找到x的属性，返回属性值。如果在global.VO中没有找到，则会抛出异常ReferenceError

执行上下文。
       函数在执行时会创建一个称为“执行上下文（execution context）”的内部对象，执行上下文定义了函数
       执行时的环境。每个执行上下文都有自己的作用域链，用于标识符解析，当执行上下文被创建时，而它的作用
       域链初始化为当前运行函数的[[Scope]]所包含的对象。
函数执行
       在函数执行过程中，每遇到一个变量，都会检索从哪里获取和存储数据，该过程从作用域链头部，也就是从活
       动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没有则继续搜索作用域
       链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义，函数执行过程中，每个标识符都
       要经历这样的搜索过程。

　　创建作用域链的过程

函数进入全局，创建VO对象，绑定x属性<入栈>
        global.VO={x=underfind; foo:reference of function}(这里只是预解析，为AO对象绑定声明的属性，函数执行时才会执行赋值语句，所以值是underfind)
     遇到foo函数，创建foo.AO，绑定y属性<入栈>
     foo.AO={y=underfind, bar:reference of function}
     遇到bar函数，创建bar.AO，绑定z属性<入栈>
      bar.AO={z:underfind}
    作用域链和执行上下文都会保存在堆栈中，所以：
    bar函数的scope chain为：[0]bar.AO-->[1]foo.AO-->[2]global.VO

          foo函数的scope chain为：[0]foo.AO-->[1]global.Vo
    //建议：少定义全局变量
    //理由：因为作用域链是栈的结构，全局变量在栈底，每次访问全局变量都会遍历一次栈，//这样会影响效率

　　

函数的scope等于自身的AO对象加上父级的scope，也可以理解为一个函数的作用域等于自身活动对象加上父级作用域.

函数执行前后的作用域链：

注意：作用域链的非自己部分在函数对象被建立（函数声明、函数表达式）的时候建立，而不需要等到执行

思考题2:      

for (var i=1; i<=9; i++) {
     setTimeout( function timer(){
     console.log( i );
     },1000 );
 }

//＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

for (var i=1; i<=9; i++) {
    (function(){
      var j = i;
      setTimeout( function timer(){
           console.log( j );
      }, 1000 );
     })();

　　

BOM对象

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

Window 对象方法

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

open()             打开一个新的浏览器窗口或查找一个已命名的窗口。
close()            关闭浏览器窗口。
setInterval()      按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval()    取消由 setInterval() 设置的 timeout。
setTimeout()       在指定的毫秒数后调用函数或计算表达式。
clearTimeout()     取消由 setTimeout() 方法设置的 timeout。
scrollTo()         把内容滚动到指定的坐标。

　　交互方法：

方法讲解:    
        //----------alert confirm prompt----------------------------
    //alert('aaa');
    
    
    /* var result = confirm("您确定要删除吗?");
    alert(result); */

    //prompt 参数1 : 提示信息.   参数2:输入框的默认值. 返回值是用户输入的内容.

    // var result = prompt("请输入一个数字!","haha");
    // alert(result);



    方法讲解:    
        //open方法 打开和一个新的窗口 并 进入指定网址.参数1 : 网址.
        //调用方式1
            //open("http://www.baidu.com");
        //参数1 什么都不填 就是打开一个新窗口.  参数2.填入新窗口的名字(一般可以不填). 参数3: 新打开窗口的参数.
            open('','','width=200,resizable=no,height=100'); // 新打开一个宽为200 高为100的窗口
        //close方法  将当前文档窗口关闭.
            //close();

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="clock" style=" 230px">
<input type="button" value="开始" onclick="Begin()">
<input type="button" value="结束" onclick="End()">
<script>
    function Begin() {
        var stime=mydata();
        var ret=document.getElementById("clock");
        ret.value=stime;
    }
    var ID=setInterval(Begin,1000);
    /*
    * alert()
    * confirm()
    * */
    // var ret=confirm("hello")
    // alert(ret)
   // var ret= prompt("请输入姓名：")
   //  alert(ret)
//———————————————————————————定时器————————————————————————————————————
    function mydata() {
    var data_obj=new Date();
    var year=data_obj.getFullYear();
    var month=data_obj.getMonth()+1;//0-11
    var day=data_obj.getDate();
    var hour=data_obj.getHours();//0----23
    var minuts=data_obj.getMinutes()//0---59
    var seconds=data_obj.getSeconds()//0---59
    var week=data_obj.getDay();//取星期

    return year+"年"+f(month)+"月"+f(day)+"日"+" "+f(hour)+":"+f(minuts)+":"+f(seconds)+" "+num_week(week)

    }
    function num_week(n) {
        week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
        return week[n]
    }
    function f(num) {
        if( num<10){
            return "0"+num
        }else{
            return num
        }
    }
    // alert(mydata())


</script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="clock" style=" 230px">
<input type="button" value="开始" onclick="Begin_click()">
<input type="button" value="结束" onclick="End()">
<script>
    function Begin() {
        var stime=mydata();
        var ret=document.getElementById("clock");
        ret.value=stime;
    }
    var ID;
    function Begin_click() {
        // End();
        if (ID==undefined){
             Begin();
            ID=setInterval(Begin,1000);
        }
    }
    function End() {
        clearInterval(ID);
        ID=undefined;
    }
    /*
    * alert()
    * confirm()
    * */
    // var ret=confirm("hello")
    // alert(ret)
   // var ret= prompt("请输入姓名：")
   //  alert(ret)
//———————————————————————————定时器————————————————————————————————————
    function mydata() {
    var data_obj=new Date();
    var year=data_obj.getFullYear();
    var month=data_obj.getMonth()+1;//0-11
    var day=data_obj.getDate();
    var hour=data_obj.getHours();//0----23
    var minuts=data_obj.getMinutes()//0---59
    var seconds=data_obj.getSeconds()//0---59
    var week=data_obj.getDay();//取星期

    return year+"年"+f(month)+"月"+f(day)+"日"+" "+f(hour)+":"+f(minuts)+":"+f(seconds)+" "+num_week(week)

    }
    function num_week(n) {
        week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
        return week[n]
    }
    function f(num) {
        if( num<10){
            return "0"+num
        }else{
            return num
        }
    }
    // alert(mydata())


</script>

</body>
</html>

History 对象

History 对象属性

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

	
length  返回浏览器历史列表中的 URL 数量。

　　

History 对象方法

back()    加载 history 列表中的前一个 URL。
forward()    加载 history 列表中的下一个 URL。
go()    加载 history 列表中的某个具体页面。

　　

<a href="rrr.html">click</a>
<button onclick=" history.forward()">>>></button>
<button onclick="history.back()">back</button>
<button onclick="history.go()">back</button>

Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

Location 对象方法

location.assign(URL)
location.reload()
location.replace(newURL)//注意与assign的区别

　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="重载refresh" onclick="(function () {
  location.reload()
})()">

<input type="button" value="连接其他网站" onclick="(function () {
  location.href='https://www.baidu.com'
})()">



<input type="button" value="shuishna" onclick="location.href='http://www.shuishandt.com'">
</body>
</html>