JS_01_入门学习

浏览数：21 / 时间：2015年06月09日

01：编写js文件：JavaScript_01.js

// JavaScript Document
    //1、利用JavaScript来输出文字
    <script type="text/javascript">
    <!--
        document.write("02:External text output text!");
    //-->
    </script>

02：编写html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tentative JavaScript</title>
</head>

<body>
    1、Use JavaScript to output text !
    <script type="text/javascript">
    <!--
        document.write("out put text");
    //-->
    </script>
    <br />
    
    2、Import external js to use !
    <script src="JavaScript_01.js"></script>
    <br />
    
    3‘if / else / alert
    <script type="text/javascript">
        var hob="football";
        var hob02="js";
        if(hob02=="js"){
            alert("Good for you !");    
        }else if(hob=="football"){
            alert("Bad for you !");    
        }
    </script>
    <br />
    
    4、Use js in form !
    <script type="text/javascript">
        
    </script>
    <form>
        <p><input type="radio" name="input" onclick="hobs(this.value)" value="js" id="js"/><label for="js">JavaScript</label></p>
        <p><input type="radio"  nam="input" onclick="hobs(this.value)" value="football" id="js"/><label>Football</label></p>
    </form>
    
    5、Use js switcth() method in html ! Use parseInt transform other to int !
    <script type="text/javascript">
        var score=65;
        switch(parseInt(score/10)){
            case 0:    
            case 1:    
            case 2:    
            case 3:    
            case 4:
            case 5:        
                alert("bad digree");
                break;
            case 6:    
            case 7:    
                alert("just so so !");
                break;
            case 8:
            case 9:
                alert("good for you");
                break;
            
        }
    </script> 
    <br />
    
    6、Get value by id
    <script type="test/javascript">
        function judge(){
            var score_01;
            var degree_01;
            score_01=document.getElementsById("score_01").value;
            if(score_01>100){
                degree_01="do not need me !";
            }else{
                degree_01="good for you";
            }
        }
        document.write(degree_01);
    </script>
    <form action="#" method="post">
        <label for="score_01">
            Degree[0-100]
        </label>
        <input name="score_01" id="score_01" type="text"/>
        <button onclick="judge()">ClickToSubmit</button>
    </form>
    <br />
    
    7、Prompt
    <script type="text/javascript">
        var score_07;
        var degree_07;
        score_07=prompt("Input your degree !");
        if(score_07>100){
            degree_07="Are you kiding";
        }else{
            switch(parseInt(score_07/10)){
                case 0:
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                case 6:
                    degree_07="bad degree";
                    judge_07();
                    break;
                case 7:    
                    degree_07="7 degree";
                    judge_07();
                case 8:
                case 9:
                    degree_07="8-9 degree";
                    judge_07();
            }    
        }
        function judge_07(){
            document.write("<br/>"+degree_07);
            alert(degree_07);
        }
    </script>
    <br />
    
    8、confirm
    <script type="text/javascript">
        function isCainiao(){
            var isC=confirm("are you cainiao?");
            if(isC==true){
                alert("CaiNiao");
            }else{
                alert("DaShen");    
            }
        }
        isCainiao();
    </script>
    <form action="#" method="post">
        <button value="confirm" onclick="isCainiao()">Submit</button>
    </form>
    
    9、for in loop / Array
    <br />
    <script type="text/javascript">
        var x;
        var hobbies_09=new Array();
        hobbies_09[0]="java";
        hobbies_09[1]="script";
        hobbies_09[2]="javascript";
        for(x in hobbies_09){
            document.write(hobbies_09[x]+"<br/>");    
        }
    </script>
    
    10、incident
    <br />
    <script type="text/javascript">
        function incident_09(){
            document.write("mouseOn");    
        }
    </script>
    <button onmouseout="incident_09()">incidentOn</button>
    <br />
    
    11、try catch finally
    <script type="text/javascript">
        var i_11=0;
        var j_11=0;
        try{
            i/i;
        }catch(e){
            alert("error");
        }finally{
            alert("finally");
        }
    </script>
    <br />
    
</body>
</html>