Day04（事件，marquee 标签文字滚动条，demo计算器）

Alert(“”); 弹出警示框；
完整的写法：window.alert(“执行语句”)；
Window 窗口对象一般情况下，window可以省略；
Console 控制台输出；
一般用于我们程序员测试，调试程序用：
console.log(“执行语句”)；控制台输出，普通的输出语句；
console.warn(‘执行语句’)；控制台警示；
console.error(“控制台错误提示”)；控制台错误提示；

文档打印输出：
document.write(“执行输出”)；

document 文档对象；

JS，用于控制我们web页面里面的元素；
那么，他是怎么控制的？
想要控制元素，首先就要找到想要控制的元素
因为ID永远是唯一的，不会冲突，所以我们一般用ID来寻找我们需要改变的元素；
getElementById(‘s1’);
get 获取 element元素 by 通过 id 名字；

document.getElementById(‘s1’);

document.getElementById('s1').style.background='#efefef'

首先，获取元素，然后，改变元素的样式，然后改变样式内的background属性；
在JS里面，改变带有横杠的CSS属性，均采用驼峰命名法；

一、事件

什么是事件？
比如说我们去开灯，我们用手，去按一下开关，开关处理程序，把灯泡点亮，这就是一个事件；
那么事件，就必须要有事件的三要素：
事件源事件事件处理程序；

1.1 事件源

要触发的对象，用手去出发了，那手就是事件源；

1.2 事件

怎么触发？按？敲？打？
一般是动词，例如点击、经过、按键盘

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

1.3 事件处理程序、

发生了什么就是事件的处理程序灯亮了，门开了；

我们获取到的元素，是可以通过变量，来存储起来的!!!

那么，一个事件的总过程：
获取元素，然后给元素赋予一个事件，最后，在事件里面执行东西；

var a = document.getElementById('b1');
var s = document.getElementById('s1');
a.onclick = function() {
    s.style.background ='#efefef';
}

marquee 标签文字滚动条

onmouseover 鼠标移动上去的事件；
onmouseout 鼠标移出事件；

页面载入函数：

window.onload=function(){
}

因为我们的JS属于标准文档流，如果把JS写在页面元素的前头，就获取不到，
那么，我们可以通过页面加载的事件来完成我们写在任意地方的写法
Window.onload就是：当浏览器被打开的时候，页面所有元素都被加载一遍；
所以说，为了我们页面加载速度快一些，通常，JS通常放在页面底部；

transform: rotate(45deg);旋转角度 deg是角度的意思

this关键字
指向当前函数；
event.target; //找到目标事件； target目标

event 事件，那么
event.target:找到目标事件；
可以适用于子元素；

计算方法： eval（）；
可以计算出包含的字符串的运算；

聚焦：获取当前窗口鼠标焦点；
失焦：当前元素失去焦点；

聚焦，也是有事件的，他叫做：
onfocus=function(){}
失去焦点;
onblur=function(){}

计算器（demo）

结构

<div class="box">
        <input type="text" id="input" value="" disabled="disabled"/><br/>
        <div id="num">
            <input type="button" value="1"/>
            <input type="button" value="2"/>
            <input type="button" value="3"/>
            <input type="button" value="+"/><br/>
            <input type="button" value="4"/>
            <input type="button" value="5"/>
            <input type="button" value="6"/>
            <input type="button" value="-"/><br/>
            <input type="button" value="7"/>
            <input type="button" value="8"/>
            <input type="button" value="9"/>
            <input type="button" value="*"/><br/>
            <input type="button" value="0"/>
            <input type="button" value="."/>
            <input type="button" value="/" id="chu"/><br/>
        </div>
        <button id="clear">C</button>
        <button id="btn">=</button>
    </div>

css样式

.box {
    width: 300px;
    border: 1px solid silver;
    text-align: center;
    margin: 50px auto;
}

.box input {
    height: 50px;
    margin: 3px 0;
    width: 70px;outline: none;
}

#input {
    width: 290px;
    text-align: right;
}

#chu,#btn,#clear{
    width: 144px;
}
#btn,#clear{
    margin: 0 0 3px 0;
    height: 50px;
}

js清单

//页面加载完执行
window.onload = function(){
    //第一步
   var num = document.getElementById("num");          //得到计算器的输入按钮

   var input = document.getElementById("input");             //得到计算器的显示屏

   var btn = document.getElementById("btn");                //得到等于按钮

   var clear = document.getElementById("clear");              //得到清除按钮

    //第二步
    //点击界面输入按钮
    num.onclick = function(event){           
       
        var x = event.target || event.srcElement;        //兼容

        if(x.value == undefined){
            //如果值等于 undefined 就什么也不输出。
        }else{
            input.value = input.value + x.value;
        }
    };
    
    //第三步
    //点击等于
    btn.onclick = function(){
      
        if(input.value !="")                //如果 input 的值不为空就运算 input 里面的值

        input.value = eval(input.value);       // 运算
    };
    
    //第四步
    //点击清除
    clear.onclick = function(){
        input.value = "";
    };
};