冬季小学期 NIIT公司 web前端培训 javascript

<!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;width: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前景会越来越强大。