js 基础（一）

<!--最近需要用到js相关的知识 就把在W3cSchool 下学到的东西做个笔记，方便以后再看 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
</head>
<body>
    
    <h4 id="haha">gai bian zhe li </h4>
    <button type="button" onclick="btnClick()">Block button</button>
    
    <p>-----------------------------------------------------------------------------------------------</p>
    <h4>js 改变图片</h4>
    <img id="Image" onclick="changeImage()" src="img/eg_bulboff.gif" />
    <p>点击灯泡，点亮或熄灭灯</p>
    
    
    <p>--------------------------------------------------------------------------------------</p>
    <h4>验证输入</h4>
    <input id="input" type="text" />
    <h5 id="show" style="color: #ff0000;">jian ce</h5>
    <button type="button" onclick="inputDetection()">输入验证</button>
    
    <p>------------------------------------------------------------------</p>
    <h4>js对象</h4>
    <div id="lis"> 显示对象属性值 </div>
    <button type="button" onclick="list()">显示对象属性值</button>
    
    <p>------------------------------------------------------------------</p>
    <h4>访问对象的方法</h4>
    <input id="UPC" type="text" />
    <p id="upcs">展示</p>
    <button type="button" onclick="upc()">转换成大写</button>
    
    
    <p>------------------------------------------------------------------</p>
    <h4>调用带参数的函数</h4>
    <button type="button" onclick="daican('大雷' ,'16')">传递参数</button>
</body>
<script>
    //调用带参数的函数
    function daican(name , age){
        alert("name = "+ name  +", age = " + age);
    }
    //以访问String对象的toUpperCase 方法  将文本转换成大写
    function upc(){
        upcs = document.getElementById("upcs");
        var up = document.getElementById("UPC").value;
        up = up.toUpperCase();
        upcs.innerHTML=up;
    }
    //js对象
    function list(){
        li = document.getElementById("lis");
        var list = {    //list对象拥有4个属性 a1-a4
            a1 : "name1",
            a2 : "name2",
            a3 : "name3",
            a4 : "name4",
        }
        li.innerHTML=list.a1;//对象属性有两种寻址方式
        li.innerHTML=list["a4"];//第二种
    }
    //改变文字内容
    function btnClick(){
        btn = document.getElementById("haha");
        btn.innerHTML="shen me gui";
    }
    //改变图片地址
    function changeImage(){
        imgbg = document.getElementById("Image");
        if(imgbg.src.match("bulbon")){
            imgbg.src="img/eg_bulboff.gif";
        }else{
            imgbg.src="img/eg_bulbon.gif";
        }
    }
    //检测输入
    function inputDetection(){
        show = document.getElementById("show");
        var input = document.getElementById("input").value;
        if(input==""||isNaN(input)){//检测是否 不是数字 is not a number 如果是数字返回true
            show.innerHTML="输入内容不是数字";
        }else{
            show.innerText="";//两个inner 方法功能在这里似乎是一样的，区别在哪里呢？
        }
    }
</script>
</html>
这是上面用到的图片，在img目录下，这部分很基础，也有些注释在里面我就啥都不说了。至于目录结构，一般有点基础的都会，我就不多说了。