輸出

Alert

Alert() 彈出警示框

完整的寫法 : window.alert(“執(zhí)行語(yǔ)句”);

Window窗口對(duì)象
Window一般情況是可以省略的。
Alert(“123”);

document.write()

文檔打印輸出
document 文檔對(duì)象 **它不可以省略 **

Console

一般測(cè)試用

顯示信息

<script type="text/javascript">
        console.dir("你好");
        console.log("你好");
        console.info("你好");
        console.warn("你好");
        console.error("你好");
    </script>

占位符
console上述的集中都支持printf的占位符格式，支持的占位符有：字符（%s）、整數(shù)（%d或%i）、浮點(diǎn)數(shù)（%f）和對(duì)象（%o）

<script type="text/javascript">
      console.log("%d年%d月%d日",2017,07,02);
</script>

信息分組

    <script type="text/javascript">
        console.group("第一組信息");
        console.log("第一組第一條");
        console.log("第一組第二條");
        console.groupEnd();

        console.group("第二組信息");
        console.log("第二組第一條");
        console.log("第二組第二條");
        console.groupEnd();
    </script>

查看對(duì)象的信息
console.dir()可以顯示一個(gè)對(duì)象所有的屬性和方法。

    <script type="text/javascript">
        var info = {
            blog:"http://www.ido321.com",
            QQGroup:259280570,
            message:"程序愛(ài)好者歡迎你的加入"
        }
        console.dir(info);
        console.log(info);
    </script>

log和dir的區(qū)別

顯示某個(gè)節(jié)點(diǎn)的內(nèi)容
console.dirxml()用來(lái)顯示網(wǎng)頁(yè)的某個(gè)節(jié)點(diǎn)（node）所包含的html/xml代碼。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="info">
    <h3>我的博客：www.ido321.com</h3>
    <p>程序愛(ài)好者:259280570,歡迎你的加入</p>
</div>
</body>
<script type="text/javascript">
    var info = document.getElementById("info");
    console.dirxml(info);
    console.dir(info);
</script>
</html>

dirxml和dir的區(qū)別

判斷變量是否是真
console.assert()用來(lái)判斷一個(gè)表達(dá)式或變量是否為真。如果結(jié)果為否，則在控制臺(tái)輸出一條相應(yīng)信息，并且拋出一個(gè)異常。

    <script type="text/javascript">
        var result = 1;
        console.assert(result);
        var year = 2017;
        console.assert(year == 2018,"年份判斷錯(cuò)誤!");
    </script>

在console.assert()語(yǔ)句中，第一個(gè)參數(shù)為需要進(jìn)行assert的結(jié)果，正常情況下應(yīng)當(dāng)為true；第二個(gè)參數(shù)則為出錯(cuò)時(shí)在控制臺(tái)上打印的錯(cuò)誤信息

1是非0值，是真，沒(méi)有顯示；而第二個(gè)判斷是假，在控制臺(tái)顯示錯(cuò)誤信息

追蹤函數(shù)的調(diào)用軌跡。
console.trace()用來(lái)打印函數(shù)調(diào)用的棧信息，可以用來(lái)追蹤函數(shù)的調(diào)用軌跡。

    <script type="text/javascript">
        /*函數(shù)是如何被調(diào)用的，在其中加入console.trace()方法就可以了*/
        function add(a,b){
            console.trace();
            return a+b;
        }
        var x = add3(1,2);
        function add3(a,b){return add2(a,b);}
        function add2(a,b){return add1(a,b);}
        function add1(a,b){return add(a,b);}
    </script>

計(jì)時(shí)功能
console.time()和console.timeEnd()，用來(lái)顯示代碼的運(yùn)行時(shí)間。

    <script type="text/javascript">
        console.time("計(jì)時(shí)器一");
        for(var i=0 ; i<1000;i++){
            for(var j=0 ; j<1000;j++){}
        }
        console.timeEnd("計(jì)時(shí)器一");
    </script>

注意：console.time(label)和console.timeEnd(label)，label可以為任何字符串，當(dāng)時(shí)來(lái)那個(gè)label必須一樣

統(tǒng)計(jì)調(diào)用次數(shù)
console.count（這個(gè)方法非常實(shí)用哦）當(dāng)你想統(tǒng)計(jì)代碼被執(zhí)行的次數(shù)。

    <script type="text/javascript">
        function myfunc(){
            console.count("被執(zhí)行次數(shù)：");
        }
        for(var i=0;i<27;i++){
            myfunc();
        }
    </script>

table顯示
console.table方法

    <script type="text/javascript">
        var info = [{
            name:"zhangsan",
            age:20,
            sex:"male",
            attr:{
                "a":1,
                "b":"b1",
                "c":"cc"
            }
        }, {
            "name": "lisi",
            "age": 24,
            "sex": "female",
            "attr": {
                "a": 1,
                "b": "b1",
                "c": "cc"
            }
        }];
        console.table(info);
    </script>

console.profile()的性能分析
性能分析（Profiler）就是分析程序各個(gè)部分的運(yùn)行時(shí)間，找出瓶頸所在，使用的方法是console.profile()。

    <script type="text/javascript">
        function All(){
            alert(11);
            for(var i = 0; i<10; i++){
                funA(1000);
            }
            funB(1000);
        }

        function funA(count){
            for(var i=0;i<count;i++){}
        }

        function funB(count){
            for(var i=0;i<count;i++){}
        }

        console.profile("性能分析");
        All();
        console.profileEnd();
    </script>

優(yōu)缺點(diǎn)

方式	描述
Alert()	非常少。用戶體驗(yàn)不好
Console	用戶看不見(jiàn)
document.write()	直接在文檔中顯示。

keys和values

前者返回傳入對(duì)象所有屬性名組成的數(shù)據(jù)，后者返回所有屬性值組成的數(shù)組。

控制臺(tái)
js代碼中

    <script type="text/javascript">
        var info =  {
            name: "lisi",
            age: 24,
            sex: "female",
            attr: {
                "a": 1,
                "b": "b1",
                "c": "cc"
            }
        };
        console.log(Object.keys(info));
        console.log(Object.values(info));
    </script>

體驗(yàn)js用途

<body>
    <div id="demo"></div>
    <script type="text/javascript">
        var demoObj = document.getElementById("demo");
        demoObj.style.width = "200px";
        demoObj.style.height = "200px";
        demoObj.style.backgroundColor = "red";
    </script>
</body>
</html>

此方式設(shè)置的是行內(nèi)樣式

變量的作用域

根據(jù)變量的作用范圍可以分為全局變量和局部變量

全局變量：
1. 在最外層聲明的變量。
2. 在函數(shù)體內(nèi)部，但是沒(méi)有聲明var 的變量也是全局變量
局部變量：
在函數(shù)體內(nèi)部的聲明的變量

        var a = 12;
        function func(){
            a = "gobal";
        }
        alert(a);//12

        func();
        alert(a);//gobal

事件三要素

例：用手按下開(kāi)關(guān)，燈亮了

事件源
誰(shuí)觸發(fā)了？手去觸發(fā)的。
去觸發(fā)的對(duì)象：手
一般情況下是個(gè)名詞

發(fā)起者
被觸發(fā)者開(kāi)關(guān)按鈕

事件
怎么觸發(fā)的這個(gè)事情：按
一般情況下這個(gè)是 動(dòng)詞
例如：點(diǎn)擊 、 鼠標(biāo)經(jīng)過(guò) 、 按鍵盤
事件處理程序
發(fā)生了什么事：燈亮了
= function(){ }

案例

例一：點(diǎn)擊叉，廣告消失

事件三要素：
事件源： x 盒子
事件: 點(diǎn)擊
事件處理程序：關(guān)閉這個(gè)大的banner
例二：鼠標(biāo)經(jīng)過(guò)關(guān)注京東，出現(xiàn)二維碼

事件三要素：
事件源：關(guān)注京東的這個(gè)盒子
事件：鼠標(biāo)滑過(guò) 經(jīng)過(guò)
事件處理程序：下拉菜單就會(huì)顯示出來(lái)

事件源.事件 = function(){ 事件處理程序 }

例：事件三要素練習(xí)，改變盒子寬度

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #demo{
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div id="demo"></div>
    <button id="myBtn">改變寬度</button>
    <script type="text/javascript">
//        先找到事件源和要操作的對(duì)象
        var divBox = document.getElementById("demo");
        var mBtn = document.getElementById("myBtn");
//      事件源.事件 = function(){  事件處理程序 }
        mBtn.onclick = function(){
            divBox.style.width = "300px";
        }
    </script>
</body>
</html>

例1：鼠標(biāo)移入，修改圖片，移開(kāi)修改回來(lái)

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    ![](images/jd1.png)
    <script type="text/javascript">
        var picDom = document.getElementById("mypic");
        picDom.onmouseover = function(){
            picDom.src = "images/jd2.png";
        }
        picDom.onmouseout = function(){
            picDom.src = "images/jd1.png";
        }
    </script>
</body>
</html>

隱藏樣式

display: none 隱藏
display: block ; 顯示的意思
visibility: hidden;隱藏
visibility: visible; 顯示的意思
overflow:hidden; 隱藏超出的部分。

display 隱藏不占位置
visibility:hidden 隱藏占有位置

入口函數(shù)

 window.onload = function(){ 
     內(nèi)部放js
  }

這個(gè)函數(shù)的意思就是說(shuō)，當(dāng)我們頁(yè)面加載完畢之后，采取執(zhí)行函數(shù)體里面的js部分。就是說(shuō)等頁(yè)面的結(jié)構(gòu) 樣式節(jié)點(diǎn)等加載完畢。。。
　　所以，這句話也可以頁(yè)面的頂端即可。

<script>
    window.onload = function(){
        /*要做事，先找人*/
        var pic1 = document.getElementById("pic1");
        var pic2 = document.getElementById("pic2");
        var pic3 = document.getElementById("pic3");
        pic1.onclick = function(){
            document.body.style.backgroundImage = "url(images/1.jpg)";
        }
        pic2.onclick = function(){
            document.body.style.backgroundImage = "url(images/2.jpg)";
        }
        pic3.onclick = function(){
            document.body.style.backgroundImage = "url(images/3.jpg)";
        }
    }
</script>

例：換膚

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        body{
            background: url(images/1.jpg) top center;
        }
        .box{
            height: 200px;
            background-color: rgba(255,255,255,.3);
            text-align: center;
        }
        .box img{
            width: 160px;
            margin-top: 50px;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var img1 = document.getElementById("img1");
            img1.onclick = function(){
                document.body.style.backgroundImage = "url(images/1.jpg)";
            }
            var img2 = document.getElementById("img2");
            img2.onclick = function(){
                document.body.style.backgroundImage = "url(images/2.jpg)";
            }
            var img3 = document.getElementById("img3");
            img3.onclick = function(){
                document.body.style.backgroundImage = "url(images/3.jpg)";
            }
        }
    </script>
</head>
<body>
    <div class="box">
        ![](images/1.jpg)
        ![](images/2.jpg)
        ![](images/3.jpg)
    </div>
</body>
</html>

例：模態(tài)框
在body的根標(biāo)簽下添加

<div id="mask"></div>
<div id="login-box">
      <span id="close-x">x</span>
</div>

css代碼

#mask{
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    z-index: 990;
    display: none;
}
#login-box{
    position: fixed;
    width: 400px;
    height: 300px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    z-index: 999;
    margin: -150px 0 0 -200px;
    display: none;
}
#close-x{
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
    cursor: pointer;
}

在登錄的標(biāo)簽上添加id=login-btn

<a href="javascript:;" id="login-btn">登錄</a><span>|</span>

js代碼

<script type="text/javascript">
        window.onload = function(){
            var loginBtn = document.getElementById("login-btn");
            var closeBtn = document.getElementById("close-x");
            var mask = document.getElementById("mask");
            var loginBox = document.getElementById("login-box");

            loginBtn.onclick = function(){
                mask.style.display = "block";
                loginBox.style.display = "block";
            }
            closeBtn.onclick = function(){
                mask.style.display = "none";
                loginBox.style.display = "none";
            }
        }
</script>

JS手寫位置

行內(nèi)式

<button onclick="alert('你好嗎')">點(diǎn)擊我</button>

一般情況，單雙引號(hào)是一樣的但是出現(xiàn) 了包裹的情況。
我們一般采取的是外雙內(nèi)單的格式。

<a href=”javascript:;”></a>
<a href=”javascript:void(0);”></a>

內(nèi)嵌式
<script type=”text/javascript”> </script> 任何一個(gè)地方
外鏈?zhǔn)?br> <script type=”text/javascript” src=”xx.js”></script>
這對(duì)標(biāo)記之間不能寫任何的東西。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

04_JS輸出、變量、事件、模態(tài)框

04_JS輸出、變量、事件、模態(tài)框

輸出

Alert

document.write()

Console

keys和values

體驗(yàn)js用途

變量的作用域

事件三要素

案例

隱藏樣式

入口函數(shù)

JS手寫位置

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

04_JS輸出、變量、事件、模態(tài)框

輸出

Alert

document.write()

Console

keys和values

體驗(yàn)js用途

變量的作用域

事件三要素

案例

隱藏樣式

入口函數(shù)

JS手寫位置

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

04_JS輸出、變量、事件、模態(tài)框