JS基础实践

来源：互联网发布：淘宝上宝贝怎么分类编辑：程序博客网时间：2024/06/14 13:02

既然实践，那么就是实实在在的运行出结果了的，实在点，代码不会骗我。

JS代码

   //JS对大小写敏感   //document.write("<h1>JS直接写入HTML</h1>") 只能直接写，在文档加载中加载；不能放在函数中，在文档加载后加载，放在函数中改变的是整个文档   var num = 12, age = 22, tell = "110";   var fruit = ["apple","orange"]   var person = {id:"001",name:"YYY",phone:"110"}   var person2 = {   firstName : function(){   return "ooo";   },   lastName : function(){   return "uuu";   }   };      function displayDate(){     document.getElementById("id_1").innerHTML= Date();   }   function changeColor(){     document.getElementById("id_1").style.color = "#ff0000";   }   function checkNum(){     var num = document.getElementById("id_2").value; if(num == "" || isNaN(num)){   alert("请输入数字") }   }   function changeText(){   document.getElementById("id_3").innerHTML= person2.firstName();   }   function changeText_2(name,phone){   //var v = name +"的电话是"+ phone;   document.getElementById("id_4").innerHTML = name +" 的电话是 "+ phone;   }   function chooseString(){   var d = new Date();   var time = d.getHours();   if(time < 10){    document.getElementById("id_5").innerHTML = "早上好";   }else if (time < 20 && time > 10){    document.getElementById("id_5").innerHTML = "中午好";   }else{    document.getElementById("id_5").innerHTML = "晚上好";   }   }   function chooseWeek(){   var x ;   var w = new Date().getDay();   switch(w){   case 0:     x = "周日" break;   case 1:     x = "周一" break;   case 2:     x = "周二" break;   case 3:     x = "周三" break;   case 4:     x = "周四" break;   case 5:     x = "周无" break;   case 6:     x = "周六" break;   }   document.getElementById("id_6").innerHTML = x;   }   function testForIn(){   //函数（方法）里的变量在使用时要先完成初始化，这里+=使用了text   var text = ""  ;   var person = {id:"001",name:"YYY",phone:"110"}   for (var x in person){   //String() Number()  String() = toString()   text += person[x]+" "+String(777)+" ";    }   document.getElementById("id_7").innerHTML = text ;  }  function checkValue(){  var x = document.getElementById("tt").value;  try{  if(x == "")  throw "输入为空";  if(isNaN(x))  throw "不是数字";  if(x > 10)  throw "太大";  if(x < 5)  throw "太小";    }catch(exception){  document.getElementById("showErr").innerHTML="错误是："+exception;  }  }  function testStrict(){  //点击按钮，执行函数，在严格模式下回报错  "use strict";  x = 22;//未声明  }  function fromCheck(){ var  x = document.getElementById("id_8").value; if(x == "" || x == null ){ alert ("姓名必须填写"); return false; }  }  function checkInput(){  var v = document.getElementById("id_9");  if(v.checkValidity() == false){  document.getElementById("id_10").innerHTML = v.validationMessage;  }else{  document.getElementById("id_10").innerHTML = "输入正确";  }  }  //json字符串(书写问题)到js对象，然后输出  var txt = '{"user":['+  '{"name":"ooo","age":"22"},'+  '{"name":"uuu","age":"33"}]}';  obj = JSON.parse(txt);  var vv = obj.user[0].name;  document.getElementById("id12").innerHTML = vv;  //之前将js的引入放在HTML中的head里面，因为先加载的js，而我上面测试json是直接写的js代码，会报找不到id12的错误，将js的引入放在id12元素的下面就可以解决问题

对应的HTML代码

<!DOCTYPE HTML><html><meta charset="utf-8"><head><title>JS</title></head><a href="#lastt">跳转到尾部</a><a href="javascript:void(0`)">这是一个死链接</a><h2 id="id_1">点击按钮显示当前日期</h2><button type="button" name="button_1" id="b_1" onclick="displayDate()">显示当前日期</button>  <button type="button" onclick="changeColor()">改变颜色</button><hr/>请输入数字：<input type="text" id="id_2">  <button type="button" id="b_2" onclick="checkNum()">验证</button><hr/><h3 id = "id_3">标题一</h3><button type="button" onclick="changeText()">改变标题一</button><hr/><h3 id = "id_4">标题二</h3><!-- 参数使用单引号，使用双引号会出现令牌不正确的情况，导致</body>失效 --><button type="button" onclick="changeText_2('Ou','999')">改变标题二</button><hr/><button type="button" onclick="this.innerHTML=Date()">现在的时间是</button><hr/><h3 id="id_5">打什么招呼</h3><button type="button" onclick="chooseString()">选择招呼语句</button><hr/><h3 id="id_6"></h3><button type="button" onclick="chooseWeek()">今天周几</button><hr/><h3 id="id_7"></h3><button type="button" onclick="testForIn()">For in 遍历对象的属性</button><hr/><h3>请输入一个5到10之间的数字</h3><input type="text" id="tt" ><button type="button" onclick="checkValue()">检查</button><p id="showErr"></p><hr/><button type="button" onclick="testStrict()">严格模式</button><hr/><form name="form_1"  action="" method="post">姓名:<input type="text" id="id_8"><input type="button" onclick="fromCheck()" value="提交"></form><hr/><!-- 约束验证 --><h3>请输入100至300之间的数组，点击验证，提示输入正确，否则会提示错误信息</h3><input id="id_9" type="number" min="100" max="300" required><button type="button" onclick="checkInput()">验证</button> <p id="id_10"></p><p id="id12"></p><a href="#">跳到网页头部</a><h1 id="lastt">尾部定位点</h1><script src="js_1.js"></script></body></html>

两个文件放在同一个文件夹下

------------------over--------------------

0 0