前端基础（JavaScript）2

时间：2021-12-16 07:59:49

3.2 Array对象

3.2.1 数组创建

创建数组的三种方式：

  • 创建方式1:
    
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

创建方式2:
    
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

创建方式3:
    
var arrname = new Array(长度);
    
            //  初始化数组对象:
    
                var cnweek=new Array(7);
    
                    cnweek[0]="星期日";
    
                    cnweek[1]="星期一";
    
                    ...
    
                    cnweek[6]="星期六";

创建二维数组：

  • 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";

3.2.2 数组对象的属性和方法

join方法：

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

                var arr1=[1, 2, 3, 4, 5, 6, 7];
    
                var str1=arr1.join("-");       //和Python正好相反
    
                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

数组排序-reverse sort：

  • //x.reverse()
    
//x.sort()

var arr1=[32, 12, 111, 444];
    
//var arr1=["a","d","f","c"];

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

arr1.sort();    //排序数组元素
    
alert(arr1.toString());
    
//结果为111,12,32,444   是按照ASCII排序的，不是按照数字大小

//------------------------------
    
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;//
    
    }
    
    else {
    
        return 0
    
    }
    
}

arr.sort(intSort);

alert(arr);

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

数组切片操作   x.slice(start, end)   ：

  • //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"

    x.slice(start, end)

删除子数组（指定位置插入）  x. splice(start, deleteCount, value, ...)：

  • //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);

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

a.splice(1,1);

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

a.splice(1,0,2,3);

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

数组的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"

数组的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"

总结js的数组特性：

  • //  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 */

3.3 Date对象

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

    var nowd1=new Date();

Date对象的方法—获取日期和时间

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

实例练习：

  • function getCurrentDate(){
    
        //1. 创建Date对象
    
        var date = new Date(); //没有填入任何参数那么就是当前时间
    
        //2. 获得当前年份
    
        var year = date.getFullYear();
    
        //3. 获得当前月份 js中月份是从0到11.
    
        var month = date.getMonth()+1;
    
        //4. 获得当前日
    
        var day = date.getDate();
    
        //5. 获得当前小时
    
        var hour = date.getHours();
    
        //6. 获得当前分钟
    
        var min = date.getMinutes();
    
        //7. 获得当前秒
    
        var sec = date.getSeconds();
    
        //8. 获得当前星期
    
        var week = date.getDay(); //没有getWeek
    
        // 2014年06月18日 15:40:30 星期三
    
        return year+"年"+changeNum(month)+"月"+day+"日 "+hour+":"+min+":"+sec+" "+parseWeek(week);
    
    }

alert(getCurrentDate());

//解决 自动补齐成两位数字的方法
    
    function changeNum(num){
    
    if(num < 10){
    
        return "0"+num;
    
    }else{
    
        return num;
    
    }

}
    
//将数字 0~6 转换成 星期日到星期六
    
    function parseWeek(week){
    
    var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    
    //             0      1      2      3 .............
    
    return arr[week];
    
}

Date对象的方法—设置日期和时间

  • //设置日期和时间
    
//setDate(day_of_month)       设置日
    
//setMonth (month)                 设置月
    
//setFullYear (year)               设置年
    
//setHours (hour)         设置小时
    
//setMinutes (minute)     设置分钟
    
//setSeconds (second)     设置秒
    
//setMillliseconds (ms)       设置毫秒(0-999)
    
//setTime (allms)     设置累计毫秒(从1970/1/1午夜)

var x=new Date();
    
x.setFullYear (1997);    //设置年1997
    
x.setMonth(7);        //设置月7
    
x.setDate(1);        //设置日1
    
x.setHours(5);        //设置小时5
    
x.setMinutes(12);    //设置分钟12
    
x.setSeconds(54);    //设置秒54
    
x.setMilliseconds(230);        //设置毫秒230
    
document.write(x.toLocaleString( )+"<br>");
    
//返回1997年8月1日5点12分54秒

x.setTime(870409430000); //设置累计毫秒数
    
document.write(x.toLocaleString( )+"<br>");
    
//返回1997年8月1日12点23分50秒

Date对象的方法—日期和时间的转换

  • 日期和时间的转换:

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

3.4 Math对象

  • //该对象中的属性方法 和数学有关.

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)    返回角的正切。

//方法练习:
    
        //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 次方.

3.5 Function 对象(重点)

3.5.1 函数的定义

  • function 函数名 (参数){ <br>    函数体;
    
    return 返回值;
    
}

功能说明：

可以使用变量、常量或表达式作为函数调用的参数
函数由关键字function定义
函数名的定义规则与标识符一致，大小写是敏感的
返回值必须使用return
Function 类可以表示开发者定义的任何函数。

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

  • 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>

3.5.2 Function 对象的属性

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

  • alert(func1.length)

3.5.3 Function 的调用

  • function func1(a,b){

    alert(a+b);
    
}

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

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

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

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

3.5.4 函数的内置对象arguments

  • function add(a,b){

        console.log(a+b);//
    
        console.log(arguments.length);//
    
        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)

3.5.4 匿名函数

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

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

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

BOM对象

window对象

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

Window 对象方法

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

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

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

方法使用

1、alert confirm prompt以及open函数

  •     //----------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();

示例：

  •  var num = Math.round(Math.random()*100);
    
    function acceptInput(){
    
    //2.让用户输入(prompt)    并接受 用户输入结果
    
    var userNum = prompt("请输入一个0~100之间的数字!","0");
    
    //3.将用户输入的值与 随机数进行比较
    
            if(isNaN(+userNum)){
    
                //用户输入的无效(重复2,3步骤)
    
                alert("请输入有效数字!");
    
                acceptInput();
    
            }
    
            else if(userNum > num){
    
            //大了==> 提示用户大了,让用户重新输入(重复2,3步骤)
    
                alert("您输入的大了!");
    
                acceptInput();
    
            }else if(userNum < num){
    
            //小了==> 提示用户小了,让用户重新输入(重复2,3步骤)
    
                alert("您输入的小了!");
    
                acceptInput();
    
            }else{
    
            //答对了==>提示用户答对了 , 询问用户是否继续游戏(confirm).
    
                var result = confirm("恭喜您!答对了,是否继续游戏?");
    
                if(result){
    
                    //是 ==> 重复123步骤.
    
                    num = Math.round(Math.random()*100);
    
                    acceptInput();
    
                }else{
    
                    //否==> 关闭窗口(close方法).
    
                    close();
    
                }
    
            }
    
    }

2、setInterval，clearInterval

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

  • 语法：<br>     setInterval(code,millisec)
    
其中，code为要调用的函数或要执行的代码串。millisec周期性执行或调用 code 之间的时间间隔，以毫秒计。

示例：

  • <input id="ID1" type="text" onclick="begin()">
    
<button onclick="end()">停止</button>

<script>
    
    function showTime(){
    
           var nowd2=new Date().toLocaleString();
    
           var temp=document.getElementById("ID1");
    
           temp.value=nowd2;

    }
    
    var ID;
    
    function begin(){
    
        if (ID==undefined){
    
             showTime();
    
             ID=setInterval(showTime,1000);
    
        }
    
    }
    
    function end(){
    
        clearInterval(ID);
    
        ID=undefined;

    }

</script>

DOM对象

什么是HTML  DOM

  • HTML  Document Object Model（文档对象模型）
  • HTML DOM 定义了访问和操作HTML文档的标准方法
  • HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)

DOM树

前端基础（JavaScript）2        前端基础（JavaScript）2

画dom树是为了展示文档中各个对象之间的关系，用于对象的导航。

DOM节点

节点类型

HTML 文档中的每个成分都是一个节点。

DOM 是这样规定的：
    整个文档是一个文档节点
    每个 HTML 标签是一个元素节点
    包含在 HTML 元素中的文本是文本节点
    每一个 HTML 属性是一个属性节点

前端基础（JavaScript）2

其中，document与element节点是重点。

节点关系

节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

  • 在节点树中，顶端节点被称为根（root）
  • 每个节点都有父节点、除了根（它没有父节点）
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分，以及节点之间的关系：

前端基础（JavaScript）2

访问 HTML 元素（节点）,访问 HTML 元素等同于访问节点,我们能够以不同的方式来访问 HTML 元素。

节点查找

直接查找节点

  • document.getElementById(“idname”)
    
document.getElementsByTagName(“tagname”)
    
document.getElementsByName(“name”)
    
document.getElementsByClassName(“name”)
    <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>

    局部查找

注意：设计到寻找元素，注意<script>标签的位置！

导航节点属性

  • parentElement           // 父节点标签元素

children                // 所有子标签

firstElementChild       // 第一个子标签元素

lastElementChild        // 最后一个子标签元素

nextElementtSibling     // 下一个兄弟标签元素

previousElementSibling  // 上一个兄弟标签元素

注意，js中没有办法找到所有的兄弟标签！

节点操作

创建节点：createElement(标签名) ：创建一个指定名称的元素。

  • 例：
    
var  tag=document.createElement(“input")
    
            tag.setAttribute('type','text');

    例：

添加节点：

  • 追加一个子节点（作为最后的子节点）
    
somenode.appendChild(newnode)

把增加的节点放到某个节点的前边
    
somenode.insertBefore(newnode,某个节点);

删除节点：

  • somenode.removeChild()：获得要删除的元素，通过父元素调用删除

替换节点：

  • somenode.replaceChild(newnode, 某个节点);

节点属性操作：

1、获取文本节点的值：innerText    innerHTML

2、attribute操作

  •      elementNode.setAttribute(name,value)    

     elementNode.getAttribute(属性名)        <-------------->elementNode.属性名(DHTML)

     elementNode.removeAttribute(“属性名”);

3、value获取当前选中的value值
        1.input   
        2.select （selectedIndex）
        3.textarea 
4、innerHTML 给节点添加html代码：
        该方法不是w3c的标准，但是主流浏览器支持    
        tag.innerHTML = “<p>要显示内容</p>”;

5、关于class的操作：

  • elementNode.className
    
elementNode.classList.add
    
elementNode.classList.remove

6、改变css样式：

  • <p id="p2">Hello world!</p>
    
document.getElementById("p2").style.color="blue";
    
                             .style.fontSize=48px

DOM Event(事件)

事件类型

  • onclick        当用户点击某个对象时调用的事件句柄。
    
ondblclick     当用户双击某个对象时调用的事件句柄。

onfocus        元素获得焦点。               练习：输入框
    
onblur         元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
    
onchange       域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）

onkeydown      某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
    
onkeypress     某个键盘按键被按下并松开。
    
onkeyup        某个键盘按键被松开。

onload         一张页面或一幅图像完成加载。

onmousedown    鼠标按钮被按下。
    
onmousemove    鼠标被移动。
    
onmouseout     鼠标从某元素移开。
    
onmouseover    鼠标移到某元素之上。
    
onmouseleave   鼠标从元素离开

onselect       文本被选中。
    
onsubmit       确认按钮被点击。

绑定事件方式

方式1:<div onclick="foo(this)"></div>

  • <div id="div" onclick="foo(this)">点我呀</div>

<script>
    
    function foo(self){           // 形参不能是this;
    
        console.log("点你大爷!");
    
        console.log(self);
    
    }
    
</script>

方式2:ele.onclick=function(){}

  • <p id="abc">试一试!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){
    
        console.log("ok");
    
        console.log(this);    // this直接用
    
    };

</script>

事件介绍

1、onload：

onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.

  • <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>

    <script>
    
         /*
    
              window.onload=function(){
    
                   var ele=document.getElementById("ppp");
    
                   ele.onclick=function(){
    
                   alert(123)
    
                };
    
             };

         */

          function fun() {
    
              var ele=document.getElementById("ppp");
    
               ele.onclick=function(){
    
                alert(123)
    
            };
    
          }

    </script>
    
</head>
    
<body onload="fun()">

<p id="ppp">hello p</p>

</body>
    
</html>

2、onsubmit：

当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.

  • <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>

    <script>

        window.onload=function(){
    
            //阻止表单提交方式1().
    
            //onsubmit 命名的事件函数,可以接受返回值. 其中返回false表示拦截表单提交.其他为放行.

             var ele=document.getElementById("form");
    
             ele.onsubmit=function(event) {
    
            //    alert("验证失败 表单不会提交!");
    
            //    return false;

            // 阻止表单提交方式2 event.preventDefault(); ==>通知浏览器不要执行与事件关联的默认动作。
    
             alert("验证失败 表单不会提交!");
    
             event.preventDefault();

    }

        };

    </script>
    
</head>
    
<body>

<form id="form">
    
            <input type="text"/>
    
            <input type="submit" value="点我!" />
    
</form>

</body>
    
</html>

3、事件传播：

  • <div id="abc_1" style="border:1px solid red;width:300px;height:300px;">
    
        <div id="abc_2" style="border:1px solid red;width:200px;height:200px;">

        </div>
    
</div>

<script type="text/javascript">
    
        document.getElementById("abc_1").onclick=function(){
    
            alert('111');
    
        };
    
        document.getElementById("abc_2").onclick=function(event){
    
            alert('222');
    
            event.stopPropagation(); //阻止事件向外层div传播.
    
        }
    
</script>

4、onselect：

  • <input type="text">

<script>
    
    var ele=document.getElementsByTagName("input")[0];

    ele.onselect=function(){
    
          alert(123);
    
    }

</script>

5、onchange:

  • <select name="" id="">
    
    <option value="">111</option>
    
    <option value="">222</option>
    
    <option value="">333</option>
    
</select>

<script>
    
    var ele=document.getElementsByTagName("select")[0];

    ele.onchange=function(){
    
          alert(123);
    
    }

</script>

6、onkeydown:

Event 对象：Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode.

  • <input type="text" id="t1"/>

<script type="text/javascript">

    var ele=document.getElementById("t1");

    ele.onkeydown=function(e){

        e=e||window.event;

        var keynum=e.keyCode;
    
        var keychar=String.fromCharCode(keynum);

        alert(keynum+'----->'+keychar);

    };

</script>

7、onmouseout与onmouseleave事件的区别：

  • <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>Title</title>
    
    <style>
    
        #container{
    
            width: 300px;
    
        }
    
        #title{
    
            cursor: pointer;
    
            background: #ccc;
    
        }
    
       #list{
    
           display: none;
    
           background:#fff;
    
       }

        #list div{
    
            line-height: 50px;
    
        }
    
        #list  .item1{
    
            background-color: green;
    
        }

         #list  .item2{
    
            background-color: rebeccapurple;
    
        }

         #list  .item3{
    
            background-color: lemonchiffon;
    
        }

    </style>
    
</head>
    
<body>

<p>先看下使用mouseout的效果:</p>

<div id="container">
    
        <div id="title">使用了mouseout事件↓</div>
    
        <div id="list">
    
                <div class="item1">第一行</div>
    
                <div class="item2">第二行</div>
    
                <div class="item3">第三行</div>
    
        </div>
    
</div>

<script>

// 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。

// 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。

   var container=document.getElementById("container");
    
   var title=document.getElementById("title");
    
   var list=document.getElementById("list");

   title.onmouseover=function(){
    
       list.style.display="block";
    
   };

   container.onmouseleave=function(){  // 改为mouseout试一下
    
       list.style.display="none";
    
   };

/*

因为mouseout事件是会冒泡的，也就是onmouseout事件可能被同时绑定到了container的子元素title和list
    
上，所以鼠标移出每个子元素时也都会触发我们的list.style.display="none";

*/

  /*
    
  思考:
    
  if:

       list.onmouseout=function(){
    
           list.style.display="none";
    
   };

     为什么移出第一行时,整个list会被隐藏?

     其实是同样的道理,onmouseout事件被同时绑定到list和它的三个子元素item上,所以离开任何一个
    
     子元素同样会触发list.style.display="none";

   */

</script>
    
</body>
    
</html>

实例练习

1、搜索框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

<script>

function Focus(){

    var input=document.getElementById("ID1");

    if (input.value=="请输入用户名"){

        input.value="";

    }

}

function Blurs(){

    var ele=document.getElementById("ID1");

    var val=ele.value;

    if(!val.trim()){

        ele.value="请输入用户名";

    }

}

</script>

</head>

<body>

    <input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">

</body>

</html>

2、模态对话框

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .back{

            background-color: white;

            height: 2000px;

        }

        .shade{

            position: fixed;

            top: 0;

            bottom: 0;

            left:0;

            right: 0;

            background-color: grey;

            opacity: 0.4;

        }

        .hide{

            display: none;

        }

        .models{

            position: fixed;

            top: 50%;

            left: 50%;

            margin-left: -100px;

            margin-top: -100px;

            height: 200px;

            width: 200px;

            background-color: wheat;

        }

    </style>

</head>

<body>

<div class="back">

    <input class="c" type="button" value="click">

</div>

<div class="shade hide handles"></div>

<div class="models hide handles">

    <input class="c" type="button" value="cancel">

</div>

<script>

    var eles=document.getElementsByClassName("c");

    var handles=document.getElementsByClassName("handles");

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

        eles[i].onclick=function(){

            if(this.value=="click"){

                for(var j=0;j<handles.length;j++){

                    handles[j].classList.remove("hide");

                 }

            }

            else {

                for(var j=0;j<handles.length;j++){

                    handles[j].classList.add("hide");

                }

            }

        }

    }

</script>

</body>

</html>

3、表格案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<button class="select_all">全选</button>

<button class="select_reverse">反选</button>

<button class="cancel">取消</button>

<hr>

<table class="server_table" border="2px" cellspacing="2px">

    <tr>

        <td><input type="checkbox" class="item"></td>

        <td>111</td>

        <td>111</td>

        <td>111</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="item"></td>

        <td>222</td>

        <td>222</td>

        <td>222</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="item"></td>

        <td>333</td>

        <td>333</td>

        <td>333</td>

    </tr>

    <tr>

        <td><input type="checkbox" class="item"></td>

        <td>444</td>

        <td>444</td>

        <td>444</td>

    </tr>

</table>

<script>

/*

    var ele_all=document.getElementsByClassName("select_all")[0];

    var ele_reverse=document.getElementsByClassName("select_reverse")[0];

    var ele_cancel=document.getElementsByClassName("cancel")[0];

    var input_arr=document.getElementsByClassName("item");

    ele_all.onclick=function(){

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

              console.log(input_arr[i]);

              var input=input_arr[i];

              input.checked=true;

          }

    };

     ele_cancel.onclick=function(){

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

              console.log(input_arr[i]);

              var input=input_arr[i];

              input.checked=false;

          }

    };

    ele_reverse.onclick=function(){

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

              console.log(input_arr[i]);

              var input=input_arr[i];

              if(input.checked){

                  input.checked=false;

              }

              else{

                  input.checked=true;

              }

          }

    };

*/

    var input_arr=document.getElementsByClassName("item");

    var button_arr=document.getElementsByTagName("button");

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

        button_arr[i].onclick=function(){

            for (var j=0;j<input_arr.length;j++){

                 var inp=input_arr[j]

                 if(this.innerText=="全选"){

                     console.log("ok");

                 inp.checked=true;

             }

            else if(this.innerText=="取消"){

                  inp.checked=false;

             }

            else {

                 if(inp.checked){

                     inp.checked=false;

                 }else {

                     inp.checked=true;

                 }

             }

            }

        }

    }

</script>

</body>

</html>

4、select移动

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .outer{

            margin: 0 auto;

            background-color: darkgray;

            width: 80%;

            height: 600px;margin-top: 30px;

            word-spacing: -5px;

        }

        #left{

            display: inline-block;

            width: 100px ;

            height: 140px;

            background-color: wheat;

            text-align: center;

        }

        #choice{

            display: inline-block;

            height: 140px;

            background-color: darkolivegreen;

            vertical-align: top;

            padding:0 5px;

        }

        #choice button{

            margin-top: 20px;

        }

         #right{

            display: inline-block;

            width: 100px ;

            height: 140px;

            background-color: wheat;

            text-align: center;

            line-height: 140px;

        }

    </style>

</head>

<body>

<div class="outer">

    <select multiple="multiple" size="5" id="left">

    <option>红楼梦</option>

    <option>西游记</option>

    <option>水浒传</option>

    <option>*Mei</option>

    <option>三国演义</option>

</select>

<span id="choice">

    <button id="choose_move"> > </button><br>

    <button id="all_move"> >> </button>

</span>

<select multiple="multiple" size="10" id="right">

    <option>放风筝的人</option>

</select>

</div>

<script>

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

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

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

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

    var options=left.options;

    choose_move.onclick=function(){

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

             var option=options[i];

             if(option.selected==true){

                   // var news=option.cloneNode(true);

                   // console.log(news);

                   right.appendChild(option);

                   i--;

             }

         }

    };

    all_move.onclick=function(){

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

             var option=options[i];

                   right.appendChild(option);

                   i--;

         };

    };

    /*

   var buttons=document.getElementsByTagName("button");

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

        buttons[i].onclick = function () {

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

                var option = options[i];

                if (this.innerText == ">") {

                    if (option.selected == true) {

                        // var news=option.cloneNode(true);

                        // console.log(news);

                        right.appendChild(option);

                        i--;

                    }

                } else {

                    right.appendChild(option);

                    i--;

                }

            }

        };

    }

   */

</script>

</body>

</html>

5、二级联动

<select id="province">

    <option>请选择省:</option>

</select>

<select id="city">

    <option>请选择市:</option>

</select>

<script>

    data={"河北省":["廊坊","邯郸"],"北京":["朝阳区","海淀区"]};

      var p=document.getElementById("province");

      var c=document.getElementById("city");

    for(var i in data){

        var option_pro=document.createElement("option");

        option_pro.innerHTML=i;

        p.appendChild(option_pro);

    }

     p.onchange=function(){

            pro=(this.options[this.selectedIndex]).innerHTML;

            citys=data[pro];

         c.options.length=0;

         for (var i in citys){

             var option_city=document.createElement("option");

             option_city.innerHTML=citys[i];

             c.appendChild(option_city);

         }

        }

</script>

6、跑马灯与tab切换

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>tab</title>

  <style>

    *{margin:0; padding:0; list-style:none;}

    body{

        font-family: "Helvetica Neue", "Hiragino Sans GB", "Microsoft YaHei", "\9ED1\4F53", Arial, sans-serif;

    }

    h3{

        text-align: center;

        color:darkcyan;

        margin-top: 30px;

        letter-spacing: 5px;

    }

    .box{

      width: 1000px;

      margin:50px auto 0px;

    }

    #title{

      line-height: 40px;

      background-color: rgb(247,247,247);

      font-size: 16px;

      font-weight: bold;

      color: rgb(102,102,102);

    }

    #title span{

      float: left;

      width: 166px;

      text-align: center;

    }

    #title span:hover{

      /*color: black;*/

      cursor: pointer;

    }

    #content{

      margin-top: 20px;

    }

    #content li{

      width: 1050px;

      display: none;

      background-color: rgb(247,247,247);

    }

    #content li div{

      width: 156px;

      margin-right: 14px;

      float: left;

      text-align: center;

    }

    #content li div a{

      font-size: 14px;

      color: black;

      line-height: 14px;

    /*  float: left;*/

    display: inline-block;

      margin-top: 10px;

    }

    #content li a:hover{

      color: #B70606;

    }

    #content li div span{

        font-size: 16px;

        line-height: 16px;

        /*float: left;*/

        display: block;

        color: rgb(102,102,102);

        margin-top: 10px;

      }

    #content img{

      float: left;

      width: 155px;

      height: 250px;

    }

    #title .select{

      background-color: #2459a2;

      color: white;

        border-radius: 10%;

    }

    #content .show{

      display: block;

    }

    .show span{

        color: red!important;

        font-size: 30px;

    }

  </style>

</head>

<body>

    <h3 id="wel">京东商城欢迎您</h3>

    <!--  direction="right up down left" -->

<!--  behavior：滚动方式(包括3个值：scroll、slide、alternate) -->

<!--  说明：scroll：循环滚动，默认效果；slide：只滚动一次就停止；alternate：来回交替进行滚动。 -->

<!--  scrollamount="5" 滚动速度 -->

<marquee behavior="scroll" direction="right">欢迎您苑昊先生</marquee>

    <script>

    function test(){

        var mywel = document.getElementById("wel");

        var content = mywel.innerText;

        var f_content = content.charAt(0);

        var l_content = content.substring(1,content.length);

        var new_content = l_content + f_content;

        mywel.innerText = new_content;

    }

    // setInterval("test();", 500);

</script>

    <div class="box">

      <p id="title">

        <span class="select">家用电器</span>

        <span>家具</span>

        <span>汽车</span>

        <span>食品</span>

        <span>女鞋</span>

        <span>医疗保健</span>

      </p>

      <ul id="content">

        <li class="show">

          <div><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t4786/325/2470647304/119102/9e1a4ed5/59005841Nd786a8df.jpg" alt="冰箱"><a href="#">容声(Ronshen)冰箱</a><span>价格:5600</span></div>

          <div><img src="https://img12.360buyimg.com/n1/s450x450_jfs/t3037/347/1290968859/201366/7c1028a0/57c00194N9d0a54c6.jpg" alt="洗衣机"><a href="#">海尔洗衣机</a><span>价格:5400</span></div>

          <div><img src="https://img11.360buyimg.com/n1/jfs/t3289/128/2393835119/236360/af1d283b/57e0f300N53dde603.jpg" alt="电饭煲"><a href="#">福库(CUCKOO)电饭煲</a><span>价格:3999</span></div>

          <div><img src="https://img13.360buyimg.com/n1/jfs/t3235/137/2361713777/152258/a6908440/57e098c2N44a90a5d.jpg" alt="智能电视"><a href="#">三星智能电视</a><span>价格:8999</span></div>

          <div><img src="https://img10.360buyimg.com/n1/jfs/t2053/101/1391591157/215066/572e131b/5696ee9bN2376492d.jpg" alt="净水器"><a href="#">净水器</a><span>价格:1300</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3175/78/2357430273/262835/9a8e7f65/57e0a3e9Nbda39dd2.jpg" alt="空气净化器"><a href="#">空气净化器</a><span>价格:5300</span></div>

        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t1948/172/2877517581/556924/682eb107/56f63dc8Naddf77e5.jpg" alt="沙发"><a href="#">沙发</a><span>价格:2900</span></div>

        </li>

        <li>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

          <div><img src="http://img11.360buyimg.com/n1/jfs/t4969/76/45396935/144539/347153d4/58d9cff4N36872ad6.jpg" alt="长安汽车"><a href="#">长安汽车</a><span>价格:12900</span></div>

        </li>

        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t4414/110/2582917360/207971/b7e129ad/58f0ee1fN94425de1.jpg" alt="嘉兴粽子"><a href="#">嘉兴粽子</a><span>价格:1</span></div>

        </li>

        <li>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

          <div><img src="https://img14.360buyimg.com/n1/jfs/t3079/298/5759209435/92674/14818594/587f1c33N53e5d2a9.jpg" alt="星期六"><a href="#">星期六</a><span>价格:439</span></div>

        </li>

        <li>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

          <div><img src="https://img12.360buyimg.com/n1/jfs/t5755/127/1139389729/356866/99d4e869/5923e410Nb2983f70.jpg" alt="汇仁 肾宝片"><a href="#">汇仁 肾宝片</a><span>价格:322</span></div>

        </li>

      </ul>

    </div>

    <script>

      var title=document.getElementById('title');

      var content=document.getElementById('content');

      var category=title.getElementsByTagName('span');

      var item=content.getElementsByTagName('li');

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

          category[i].index=i;

          category[i].onclick=function(){

            for (var j = 0; j < category.length; j++) {

              category[j].className='';

              item[j].className='';

            }

            this.className='select';

            item[this.index].className='show';

          }

      }

    </script>

</body>

</html>

js扩展

js的作用域

作用域是JavaScript最重要的概念之一，想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

任何程序设计语言都有作用域的概念，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

作用域

1. 全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域

var name="yuan";

    function foo(){

        var age=23;

        function inner(){

            console.log(age);

        }

        inner();

    }

    console.log(name);    // yuan

    //console.log(age);   // Uncaught ReferenceError: age is not defined

    foo();                // 23

    inner();              // Uncaught ReferenceError: inner is not defined

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

    var name="yuan";

    function foo(){

        age=23;

        var sex="male"

    }

    foo();

    console.log(age);   //  23

    console.log(sex);   // sex is not defined

变量blog拥有全局作用域，而sex在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下，window对象的内置属性都都拥有全局作用域，例如window.alert()、window.location、window.top等等。

2. 局部作用域(Local Scope)

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域.

如示例1中的age与inner都只有局部作用域。（js中if、for没有自己的作用域）

作用域链(Scope Chain)

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

示例演示

please have a try:

//-----*********************例1*********************************

var s=12;

    function f(){

        console.log(s);

         var s=12;          // if s=12

        console.log(s)

    }

    f();

//-----**********************例2*********************************

var s=10;

function foo(){

  console.log(s);

  var s=5;

  console.log(s);

  function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作

  console.log(s);

}

foo();

//-----***********************例3********************************

function bar(age) {

        console.log(age);

        var age = 99;
        var sex= 'male';

        console.log(age);

        function age() {
            alert(123)

        };

        console.log(age);
        return 100;

}

result=bar(5);

//-----********************************************************

结果分析

我相信大家一定会有想不到的结果，接下来我们就以最复杂的例3来分析整个过程。

当一个函数创建后，它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量，如下图所示：

前端基础（JavaScript）2

解析到函数调用时，即bar(5)，会生成一个active object的对象，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端，当运行期上下文被销毁，活动对象也随之销毁。新的作用域链如下图所示：

前端基础（JavaScript）2

过程解析：

function bar(age) {

        console.log(age);

        var age = 99;

        var sex="male";

        console.log(age);

        function age(){

            alert(123);

        } ;

        console.log(age);

        return 100;

}

result=bar(5);

一 词法分析过程(涉及参数，局部变量声明，函数声明表达式)：

    1-1 、分析参数，有一个参数，形成一个 AO.age=undefine;

    1-2 、接收参数 AO.age=5;

    1-3 、分析变量声明，有一个 var age, 发现 AO 上面有一个 AO.age ，则不做任何处理

    1-4 、分析变量声明，有一个 var sex，形成一个 AO.sex=undefine;

    1-5 、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成 AO.age=function(){};

二 执行过程：

    2-1 、执行第一个 console.log(age) 时，当前的 AO.age 是一个函数，所以输出的一个函数

    2-2 、这句 var age=99; 是对不 AO.age 的属性赋值， AO.age=99 ，所以在第二个输出的age是 99;

    2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。

          注意：执行阶段：

                        function age(){

                            alert(123)

                        } ;

            不进行任何操作，将执行语句复制给age这部操作是在词法分析时，即运行前完成的。

 
 

相关文章