JavaScript基础概要

viewerlin
于 2018-04-16 10:27:20 发布
阅读量241
点赞数
分类专栏： JavaScript 文章标签： JavaScript Web
本文链接：https://blog.csdn.net/viewerlin/article/details/79957276
版权
JavaScript 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
JavaScript学习笔记，附有自己的注释
<!doctype html>
<html>
<head>
    <title>Learning JavaScript</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        #circle {
            width:200px;
            height:200px;
            background-color:red;
            border-radius:100px;
        }
    </style>

</head>

<body>
    <!--内部JS onclick 当按钮被按下时执行javascript程序 一般不使用这种模式-->
    <!--<button onclick="alert('Hi!')">Click me</button>-->

    <p id="text">Some text</p>
    <!--JS脚本通常放body最下方-->
    <script type="text/javascript">  /*告诉浏览器JS脚本从这里开始执行 脚本类型时什么*/
        /*alert(document.getElementById("text").innerHTML);     /*运行一个提示，默认网页加载时出现*/
        /*document.getElementById().innerHTML 在整个文件里面用Id得到Id里面的内容*/
        document.getElementById("text").innerHTML="some more text"; /*用JS修改已经存在的内容*/
    </script>                       <!--结束脚本-->

    <!--响应用户的点击-->
    <button id="myButton">Click me</button>
    <script type="text/javascript">
        document.getElementById("myButton").onclick=function(){ /*当对应的Id被点击的时候执行函数操作*/
            alert("Hi!");  /*执行一个提示*/
        }
    </script>

    <!--用JS修改网页内容-->
    <button id="textChanger">Change first div text</button>
    <div id="firstDiv">This is some text</div>

    <button id="textAppender">Append some text</button>
    <div id="secondDiv">JavaScript is </div>

    <button id="textCreator">Creat some text</button>
    <div id="emptyDiv"></div>
    <script type="text/javascript">
        document.getElementById("textChanger").onclick=function(){
            document.getElementById("firstDiv").innerHTML="This is awesome!";
        }
        document.getElementById("textAppender").onclick=function(){
            document.getElementById("secondDiv").innerHTML=document.getElementById("secondDiv").innerHTML+"great!";
        }
        document.getElementById("textCreator").onclick=function(){
            document.getElementById("emptyDiv").innerHTML="<ul><li>Dog</li><li>Cat</li></ul>";
        }
    </script>

    <!--variable 变量-->
    <!--消失的圆圈-->
    <div id="circle"></div>
    <script type="text/javascript">
        var circle="circle"
        document.getElementById("circle").onclick=function(){
            document.getElementById(circle).style.display="none" /* .style.display 显示类型为none*/
        }
    </script>

    <!--用户输入修改网页内容-->
    <input id="myInput" type="text" />
    <button id="changeText">Change the text!</button>
    <div id="thirdDiv">This is some text!</div>
    <script type="text/javascript">
        document.getElementById("changeText").onclick=function(){
            var newText=document.getElementById("myInput").value;   /*定义一个变量获取输入框的值*/  
            document.getElementById("thirdDiv").innerHTML=newText;
        }
    </script>

    <!--Array 数组-->
    <button id="changer">Change the text!</button>
    <div id="fourthDiv">This is some text!</div>
    <script type="text/javascript">
        var myArray=new Array();   /*定义一个数组*/ 
        myArray[0]="pizza";
        myArray[1]="chocolate"
        myOtherArray=["rain","sunshine"];
        myOtherArray.push("snow"); /*.push 向数组里添加元素，默认是在末尾添加*/
      /*myOtherArray.splice(1,1);  /*.splice 删除数组里的元素 （1,1）元素的位置和删除的个数，如果(1,2)则表示从第二个元素开始连续删除两个元素*/
        myOtherArray.splice(1,0,"hail"); /*.splice 也可以添加元素 (1,0,"hail")表示在第二个元素位置，不删除，添加"hail",原本位置的元素向后移*/

        console.log(myOtherArray.length); /*可以用Chrome浏览器查看 输出元素的个数*/  
        document.getElementById("changer").onclick=function(){
            document.getElementById("fourthDiv").innerHTML=myArray[0];
        }
    </script>

    <!--if判断-->
    <!--
    <script type="text/javascript">
        var x="1";
        if (x==1) {   /*(x==1)条件需要用括号括起来*/
            alert("x is 1!");
        }
        else {
            alert("x is not 1!");
        }
    </script>
    -->
    <p>How many fingers am I holding up?</p>
    <input id="answer" />
    <button id="aButton">Submit</button>
    <script type="text/javascript">
        /*var x=3;
        alert(Math.pow(x,3)); /*Math数学运算 pow(x,3)表示x的三次方*/
        document.getElementById("aButton").onclick=function() {
            var x=Math.random();  /*Math.random()默认得到0-1之间的随机数*/
            x=x*6;  
            x=Math.floor(x);  /*Math.floor(x) 将x取整数*/
            if (x==document.getElementById("answer").value) {
                alert("That's correct!");
            }
            else {
                alert("That's wrong! My number was "+x)
            }
        }
    </script>

    <!--For loops for循环-->
    <p id="arrayString"></p>
    <script type="text/javascript">
        /*
        for (var i=0;i<=5;i++) {  /*循环i，每次加1，直到i=5时结束
        for (var i=0;i<=5;i=i+2) {  每次加2
            alert(i)
        }
        */
        var arrayString="";
        var myArray=["pizza","chocolate","icecream"]
        for (var i=0;i<myArray.length;i++) {
            arrayString=arrayString+ myArray[i]+" ";
        }
        document.getElementById("arrayString").innerHTML=arrayString;
        </script>

    <!--While loops while循环--> <!--当不知道要循环多少次的时候使用while循环-->
    <script type="text/javascript">
        var arrayString="";
        var myArray=["pizza","chocolate","icecream"];
        var i=0;
        while (i<myArray.length) {
            arrayString=arrayString+ myArray[i]+" ";
            i++;
        }
        document.getElementById("arrayString1").innerHTML=arrayString;
        </script>
        <!--让计算机来猜我们的手指-->
    <p>How many fingers are you holding up?</p> 
    <input id="myNumber" />
    <button id="guess">Guess</button>
    <script type="text/javascript">
        document.getElementById("guess").onclick=function() {
            var gotit=false; /*初始化 默认是没有猜到*/
            var guesses=1;
            var x;  /*初始化x*/
            while (gotit==false) {
                x=Math.random();
                x=x*6;
                x=Math.floor(x);
                if (document.getElementById("myNumber").value==x) {
                    gotit=true; /*猜到以后*/
                }
                else {
                    guesses++;  /*猜的次数+1*/
                }
            }
            alert("Got it! It was a "+x+". It only took me "+guesses+" guesses!")
        }   
        </script>

    <!--function 函数-->
    <p id="paragraph"></p>
    <script type="text/javascript">
        function adding(a,b) {
            return(a+b);
        }
        document.getElementById("paragraph").innerHTML=adding(1,2);
    </script>

</body>
</html>