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

输出

Alert

Alert() 弹出警示框

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

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

document.write()

文档打印输出
document 文档对象 **它不可以省略 **

Console

一般测试用

• 显示信息

• 占位符
  console上述的集中都支持printf的占位符格式，支持的占位符有：字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）

• 信息分组

• 查看对象的信息
  console.dir()可以显示一个对象所有的属性和方法。

log和dir的区别

• 显示某个节点的内容
  console.dirxml()用来显示网页的某个节点（node）所包含的html/xml代码。

    
    



    
我的博客：www.ido321.com
    
程序爱好者:259280570,欢迎你的加入

dirxml和dir的区别

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

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

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

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

• 计时功能
  console.time()和console.timeEnd()，用来显示代码的运行时间。

注意： console.time(label)和 console.timeEnd(label)，label可以为任何字符串，当时来那个label必须一样

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

• table显示
  console.table方法

• console.profile()的性能分析
  性能分析（Profiler）就是分析程序各个部分的运行时间，找出瓶颈所在，使用的方法是console.profile()。

• 优缺点

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

keys和values

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

• 控制台

  
  
  

• js代码中

体验js用途

此方式设置的是行内样式

变量的作用域

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

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

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

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

事件三要素

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

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

发起者
被触发者 开关按钮

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

案例

• 例一：点击叉，广告消失
  

  
  
  事件三要素：
  事件源： x 盒子
  事件: 点击
  事件处理程序： 关闭 这个大的banner

• 例二：鼠标经过关注京东，出现二维码
  

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

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

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

    
    
    


    

    改变宽度
    

|事件名| 说明|
|::|::|
|onclick |鼠标单击|
|ondblclick |鼠标双击|
|onkeyup |按下并释放键盘上的一个键时触发 |
|onchange |文本内容或下拉菜单中的选项发生改变|
|onfocus |获得焦点，表示文本框等获得鼠标光标。|
|onblur |失去焦点，表示文本框等失去鼠标光标。|
|onmouseover |鼠标悬停，即鼠标停留在图片等的上方|
|onmouseout |鼠标移出，即离开图片等所在的区域|
|onload |网页文档加载事件|
|onunload |关闭网页时|
|onsubmit |表单提交事件|
|onreset |重置表单时|

例1：鼠标移入，修改图片，移开修改回来

    
    


    ![](images/jd1.png)
    

隐藏样式

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

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

入口函数

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

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

例：换肤

    
    
    
    


    

        ![](images/1.jpg)
        ![](images/2.jpg)
        ![](images/3.jpg)
    

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

      x

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

登录|

js代码

JS手写位置

• 行内式

点击我

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

• 内嵌式
  任何一个地方
• 外链式
  
  这对标记之间不能写任何的东西。