<!DOCTYPE html> <html> <head> <title>title Web tutorials on HTML, CSS</title> <script type="text/javascript"> // JavaScript 对大小写是敏感的。 //JavaScript 一旦出错则全部代码的无效 // 如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖： document.write("<h1>写入HTML输出</h1>"); function myFunction(demo){ document.getElementById("demo").innerHTML="function"; document.getElementById("demo").innerHTML=demo+add(3,7); } function add(a,b){//带参数函数 return a+b; } function max(a,b){ //基本结构和java一样 if (a>b){ return a; }else{ return b; } } function imgSrc(){ document.getElementById("image").src="test.jpg"; } function demoStyle(){ var x=document.getElementById("demo"); // x.style.visibility="hidden"; x.style.color="red"; } // //闰年 // if (year%400==0||(year%4==0&&year%100!=0) { // }; var x;//x 为undefined var pi=3.14;//numberic var name="have power zhao";//string var x=true;//bool var names=new Array(); //array names[0]=name; names[1]=name; var names=new Array(name,pi); var names=[name,pi]; // Object var person=new Object();//记得注意是首字母大写 var person={ firstname:"zhao", lastname:"have power" }; //清空变量 name=null; document.write(person.firstname); document.write(person["lastname"]); function checkLoad(){ alert("onload event"); } function mOver(obj){ obj.style.backgroundColor="red"; } function mOut(obj){ obj.style.backgroundColor="blue"; } function mDown(obj){ obj.style.backgroundColor="cyan"; obj.innerHTML="正在点击div中" } function mUp(obj){ obj.style.backgroundColor="blue"; obj.innerHTML="正在释放点击div中" } // function mMove(obj){ // obj.style.backgroundColor="blue"; // obj.innerHTML="鼠标滑过div中" // } function onFocus(obj){ obj.style.background="yellow"; } function onBlur(obj){ obj.style.background="cyan"; } function demoDel(){ var x=document.getElementById("demo"); x.parentNode.removeChild(x); } function onBlurName(obj){ var username=obj.value; var lable=document.getElementById("lable"); if (username=="") { lable.innerHTML="username is none"; }else if (username.length<4||username.length>8) { lable.innerHTML="用户名必须是4-8位字符"; } } function onBlurPwd(obj){ var password=obj.value; var lable=document.getElementById("lable2"); var pattern=new RegExp("\d{6,10}"); if (password=="") { lable.innerHTML="password is none"; }else if (!pattern.test(password)) { lable.innerHTML="密码必须至少6位字符"; }; } PI=Number.MAX_VALUE; PI=Number.MIN_VALUE; name=toUpperCase(); name=toLowerCase(); var pattern =new RegExp("e"); pattern.test("alert e");/*检索字符串中的指定值 返回true false*/ pattern.exec("alert e");/*返回找到的值 无则返回null*/ pattern.compile("e");/*修改正则表达式*/ // window 浏览器窗口 screen屏幕 //Location location.hostname;/*web主机域名*/ location.pathname;/*返回当前页面的路径和文件名*/ location.port;/*返回web主机的端口*/ location.protocol;/*web协议*/ location.href;/*当前url*/ location.assign("www.baidu.com");/*加载一个新的web*/ // history history.back(); history.forward(); //navigator 浏览器的导航 记录浏览器信息 </script> <!-- 引入javascript外部脚本 --> <!-- <script type="text/javascript src="day3.js" "></script> --> </head> <body onload="checkLoad()"> <br> <button type="button" onclick="alert('click')">alter('click')</button> <button type="button" onclick="confirm('comfirm')">confirm("comfirm")确认框</button> <button type="button" onclick="prompt('prompt','默认值')">prompt("prompt","默认值")提示框</button> <p id="demo" onfocus="onFocus(this)">demo </p> <!-- 双引号里面用单引号 --> <button type="button" onclick="myFunction('check')">change id="demo"</button> <img id="image"></img> <button type="button" onclick="imgSrc()">change img.src </button> <button type="button" onclick="demoStyle()">change demo.style </button> <button type="button" onclick="demoDel()">del the element of demo </button> <div id="block" onmouseover="mOver(this)" onmouseout="mOut(this)" onmousedown="mDown(this)" onmouseup="mUp(this)" onmousemove="mMove(this)" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;">move mouse over me thanks.</div> <input type="text" onfocus="onFocus(this)" onblur="onBlur(this)" >onfocus()获得焦点和失去焦点 <form> <h1>新用户注册</h1> username:<input id="username" onblur="onBlurName(this)" type="text"><label id="lable" style="color:red">xxx</label> <br> password:<input id="password" onblur="onBlurPwd(obj)" type="password"> <br> input password again:<input id="password2" type="password"> <label id="lable2" style="color:red">xxx</label> <br> gender:<input type="radio" name="gender">man</input> <input type="radio" name="gender">feman</input> <br> hobby:<input type="checkbox" checked="checked">dinner</input> <input type="checkbox">game</input> <input type="checkbox">sleep</input> <br> <select> <option>china</option> <option>USA</option> <option>Korea</option> </select> <input type="submit" value="submit提交注册"> <input type="reset" value="reset"> </form> </body> </html>
重温 javaScript：http://www.w3school.com.cn/js/js_form_validation.asp
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
虽然HTML5的来临，但是感觉JavaScript前景会越来越强大。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应