輸出

Alert

Alert() 彈出警示框

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

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

document.write()

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

Console

一般測試用

顯示信息

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

占位符
console上述的集中都支持printf的占位符格式，支持的占位符有：字符（%s）、整數(shù)（%d或%i）、浮點數(shù)（%f）和對象（%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>

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

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

log和dir的區(qū)別

顯示某個節(jié)點的內(nèi)容
console.dirxml()用來顯示網(wǎng)頁的某個節(jié)點（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>程序愛好者: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()用來判斷一個表達(dá)式或變量是否為真。如果結(jié)果為否，則在控制臺輸出一條相應(yīng)信息，并且拋出一個異常。

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

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

1是非0值，是真，沒有顯示；而第二個判斷是假，在控制臺顯示錯誤信息

追蹤函數(shù)的調(diào)用軌跡。
console.trace()用來打印函數(shù)調(diào)用的棧信息，可以用來追蹤函數(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>

計時功能
console.time()和console.timeEnd()，用來顯示代碼的運(yùn)行時間。

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

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

統(tǒng)計調(diào)用次數(shù)
console.count（這個方法非常實用哦）當(dāng)你想統(tǒng)計代碼被執(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）就是分析程序各個部分的運(yùn)行時間，找出瓶頸所在，使用的方法是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)缺點

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

keys和values

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

控制臺
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>

體驗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)部，但是沒有聲明var 的變量也是全局變量
局部變量：
在函數(shù)體內(nèi)部的聲明的變量

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

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

事件三要素

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

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

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

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

案例

例一：點擊叉，廣告消失

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

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

事件源.事件 = 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">
//        先找到事件源和要操作的對象
        var divBox = document.getElementById("demo");
        var mBtn = document.getElementById("myBtn");
//      事件源.事件 = function(){  事件處理程序 }
        mBtn.onclick = function(){
            divBox.style.width = "300px";
        }
    </script>
</body>
</html>

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

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

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

<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('你好嗎')">點擊我</button>

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

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

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

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

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

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

輸出

Alert

document.write()

Console

keys和values

體驗js用途

變量的作用域

事件三要素

案例

隱藏樣式

入口函數(shù)

JS手寫位置

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

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

輸出

Alert

document.write()

Console

keys和values

體驗js用途

變量的作用域

事件三要素

案例

隱藏樣式

入口函數(shù)

JS手寫位置

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

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