04_JS输出、变量、事件、模态框

输出

Alert

Alert() 弹出警示框

完整的写法 : window.alert(“执行语句”);

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）、整数（%d或%i）、浮点数（%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的区别

显示某个节点的内容
console.dirxml()用来显示网页的某个节点（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的区别

判断变量是否是真
console.assert()用来判断一个表达式或变量是否为真。如果结果为否，则在控制台输出一条相应信息，并且抛出一个异常。

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

在console.assert()语句中，第一个参数为需要进行assert的结果，正常情况下应当为true；第二个参数则为出错时在控制台上打印的错误信息

1是非0值，是真，没有显示；而第二个判断是假，在控制台显示错误信息

追踪函数的调用轨迹。
console.trace()用来打印函数调用的栈信息，可以用来追踪函数的调用轨迹。

    <script type="text/javascript">
        /*函数是如何被调用的，在其中加入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()，用来显示代码的运行时间。

    <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可以为任何字符串，当时来那个label必须一样

统计调用次数
console.count（这个方法非常实用哦）当你想统计代码被执行的次数。

    <script type="text/javascript">
        function myfunc(){
            console.count("被执行次数：");
        }
        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）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是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>

优缺点

方式	描述
Alert()	非常少。用户体验不好
Console	用户看不见
document.write()	直接在文档中显示。

keys和values

前者返回传入对象所有属性名组成的数据，后者返回所有属性值组成的数组。

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

此方式设置的是行内样式

变量的作用域

根据变量的作用范围可以分为全局变量和局部变量

全局变量：
1. 在最外层声明的变量。
2. 在函数体内部，但是没有声明var 的变量也是全局变量
局部变量：
在函数体内部的声明的变量

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

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

事件三要素

例：用手按下开关，灯亮了

事件源
谁触发了？手去触发的。
去触发的对象：手
一般情况下是个名词

发起者
被触发者开关按钮

事件
怎么触发的这个事情：按
一般情况下这个是动词
例如：点击 、 鼠标经过 、 按键盘
事件处理程序
发生了什么事：灯亮了
= function(){ }

案例

例一：点击叉，广告消失

事件三要素：
事件源： x 盒子
事件: 点击
事件处理程序：关闭这个大的banner
例二：鼠标经过关注京东，出现二维码

事件三要素：
事件源：关注京东的这个盒子
事件：鼠标滑过经过
事件处理程序：下拉菜单就会显示出来

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

例：事件三要素练习，改变盒子宽度

<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：鼠标移入，修改图片，移开修改回来

<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 隐藏占有位置

入口函数

 window.onload = function(){ 
     内部放js
  }

这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。就是说等页面的结构样式节点等加载完毕。。。
　　所以，这句话也可以页面的顶端即可。

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

例：模态框
在body的根标签下添加

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

在登录的标签上添加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手写位置

行内式

<button onclick="alert('你好吗')">点击我</button>

一般情况，单双引号是一样的但是出现了包裹的情况。
我们一般采取的是外双内单的格式。

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

内嵌式
<script type=”text/javascript”> </script> 任何一个地方
外链式
<script type=”text/javascript” src=”xx.js”></script>
这对标记之间不能写任何的东西。

最后编辑于：2017.12.08 00:14:16

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342