JavaScript基礎篇章(總結1)

前言

學習web,當然不能少了萬能的javaScript,由於之前接觸過javaScript基礎語法,那麼這次剛好派上用場了,就是感嘆 “書到用時方恨少”,腳踏實地慢慢學咯,這裏簡單總結記錄下這幾天複習的js語法和demo,時時記,才能不至於忘得太快~~~

Ⅰ.簡述

1.javaScript的特點:

  1. 安全性(不允許直接訪問本地硬盤),它可以做的就是信息的動態交互。
  2. 跨平臺性。(只要是可以解釋Js的瀏覽器都可以執行,和平臺無關。)

2.js(javaScript的簡稱)和java的不同點:

  1. JS是Netscape公司的產品,Java是Sun公司的產品
  2. JS是基於對象,Java是面向對象。
  3. JS只需解釋就可以執行,Java需要先編譯成字節碼文件,再執行。
  4. JS是弱類型,Java是強類型。

3.js由3部分組成:

  1. ECMAScript
  2. Bom(全稱Browser Object Model瀏覽器對象模型)
  3. Dom(全稱Document Object Model文檔對象模型)

4.ECMASCRIPT 中有5種基本數據類型::

  1. Undefined
  2. null
  3. Boolean
  4. Number
  5. String

5.類型總結:

5種基本數據類型:Undefined, null,Boolean,Number和String

所有的數值都是number類型,字符和字符串都是string類型
布爾是boolean類型,如果一個變量未定義,那麼類型是undefined

6.js引入方式和位置:

向HTML頁面插入JavaScript的主要方法

  1. JS代碼存放在標籤對中。
  2. 使用script標籤的src屬性引入一個js文件。(方便後期維護,擴展)例:

7.區分大小寫:

與 Java 一樣,變量、函數名、運算符以及其他一切東西都是區分大小寫的

8.變量:

變量是弱類型的,與 Java不同,ECMAScript 中的變量無特定的類型,定義變量時只用 var 運算符,可以將它初始化爲任意值。

9.變量使用細節:

  1. var關鍵字在定義變量的時候可以省略不寫
  2. 變量名可以重複,後面的將覆蓋前面的變量
  3. 變量的類型取決於值的類型

10.運算符:

  1. 加法運算符的注意點

    • ECMAScript 中的加法也有一些特殊行爲:某個運算數是 NaN,那麼結果爲 NaN;
    • 如果兩個運算數都是字符串,把第二個字符串連接到第一個上。如果只有一個運算數是字符串,把另一個運算數轉換成字符串,結果是兩個字符串連接成的字符串。
  2. 乘/除法運算符基本和java語言中的相同

  3. 比較運算符的注意點

    • 兩個字符串進行比較,會轉化爲字符之後進行比較;
    • 一個數字和一個字符串進行比較,字符串會轉換成數字,再比較。
  4. 邏輯運算符基本和java語言中的相同

  5. 賦值運算符基本和java語言中的相同

    乘法/賦值(*=)
    除法/賦值(/=)
    取模/賦值(%=)
    加法/賦值(+=)
    減法/賦值(-=)
    
  6. 三目運算符基本和java語言中的相同

Ⅱ.練習

註釋:下面的每個demo都可以拷貝在文本然後運行,運行方式也是很簡單的,那麼效果圖就懶得貼了,下面的註釋說明也非常詳細.

1.先來個for練習,同樣的需求,C和java都實現過了,那麼用js來實現下


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>javaScript for 練習</title>
    </head>
    <body>
            <script type="text/javascript">
                //輸出一個6行6列的的 *正方形
                for(var i=0 ;i<6 ;i++){
                    for(var j=0 ; j<6 ;j++){
                        document.write(" * ");
                    }
                    document.write("<br/>");
                }
                document.write("<hr/>");

                //輸出 *三角錢
                for(var i=1 ; i<6 ; i++){
                    for(var j=0 ; j<i ; j++){
                        document.write(" * ");
                    }
                    document.write("<br/>");
                }
                document.write("<hr/>");

                //輸出九九乘法表
                for(var i=1 ; i<=9 ; i++){
                    for(var j=1 ; j<=i ; j++){
                        document.write(j + "*" + i + "=" + j*i + "&nbsp;&nbsp;&nbsp;");
                    }
                    window.document.write("<br/>");
                }

            </script>
    </body>
    </html>

2.需求:移動到小圖片區域內,旁邊出現大圖片:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js 事件監聽</title>
    </head>
    <body>
            <!--小圖片-->
            <img src="img/small.png" width="80" id="wlh"/>
            <br/>
            <!--大圖片,默認距離左邊80px,默認不顯示的-->
            <img src="img/big.png" width="400" style="margin-left: 80px;display: none;" id="big"/>
    </body>

        <script type="text/javascript">
            function myPic(){
                var small = document.getElementById("wlh");     //查找小圖片
                var big = document.getElementById("big");       //查找大圖片

                small.onmouseenter = display;                   //鼠標進入圖片區域的事件
              //  small.onmousemove = display;                  //鼠標在圖片區域內移動的事件
                small.onmouseleave = nodisplay;                 //鼠標離開圖片區域的事件
            }

            function display(){                                 //函數功能:讓圖片顯示
                big.style.display = "block";
            }
            function  nodisplay(){                          //函數功能:讓圖片隱藏
                big.style.display = "none";
            }
            //窗體加載完畢後執行該函數
            window.onload = myPic();

        </script>

    </html>

3.引用類型String:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js 引用類型String體驗</title>
    </head>
    <body>
            <script type="text/javascript">
               /* var a = "abc";
                document.write(typeof a + "<br/>");         //string

                var b = new String("abc");
                document.write(typeof b + "<br/>");         //object*/

    //-------------------------------------------------------------------------------------------------------

               //獲取構造函數
                var a = "wyk";
                document.write(a.constructor + "<br/>");    //輸出:function String() { [native code] }
                document.write(typeof a.constructor);       //輸出:function


               document.write("<hr/>");
    //-------------------------------------------------------------------------------------------------------
                //通過構造函數創建String對象
                var a = new String("jack");
                var b = new String("jack");
                document.write(a + "," + b + "<br/>");          //jack,jack
                document.write(a==b);                            //false
                document.write("<br/>");
                document.write(a.valueOf() == b.valueOf());     //true
                document.write("<br/>");

               document.write("<hr/>");
    //-------------------------------------------------------------------------------------------------------
                //練習屬性
               var c = "Hello World";
               document.write(c.length + "<br/>");          //輸出: 11

                document.write("第五章".anchor("ch1") + "<br/>");      // 第五章
                document.write("第五章".blink() + "<br/>");            //第五章
               //   返回在指定位置的字符。
                document.write("第五章".charAt(0) + "<br/>");          //第
                document.write("abc".charCodeAt(0) + "<br/>")           //97

               document.write("第五章".concat("abcde") + "<br/>");       //第五章abcde
               document.write("第五章".fontcolor("#ff0000") + "<br/>");        //字體變爲紅色
               document.write("第五章".indexOf("五") + "<br/>");                // 1
               document.write("第五章".italics() + "<br/>");                       //斜體
               document.write("第五章".link("http://www.baidu.com") + "<br/>");                      //下劃線,點擊可以鏈接到其他網頁

               document.write("helloworld".replace(/l/g,"L") + "<br/>");                        //將l 換位L ,木有寫g,表示第一個換而已

    //-------------------------------------------------------------------------------------------------------
               document.write("<hr/>");

                var names = "jack - lin - zhong".split("-");
                for(var temp in names) {
                    document.write(names[temp] + "<br/>");          //這裏的temp 應該是索引
                }

                document.write("helloworld".substr(1,2) + "<br/>");         //el
                document.write("helloworld".substring(1,2) + "<br/>");      //e
                document.write("helloworld".toUpperCase() + "<br/>");       //HELLOWORLD

                document.write(new String("java").toString() + "<br/>");                             //java
                document.write(new String("java").toString() == new String("java").toString());     //true
                document.write("<br/>")
                document.write(new String("java") == new String("java"));                        //false
                document.write("<br/>")
                document.write("abc" == "abc");                                                     //true

            </script>
    </body>
    </html>

4.引用類型Number:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js 引用類型Number體驗</title>
    </head>
    <body>
            <script type="text/javascript">
                var a = 12;
                var b = new Number(12);
                document.write(a +"," + b + "<br/>");                 //12,12
                document.write(a == b);                                //true
                document.write("<br/>");
                document.write(a === b );                  //false
                document.write("<br/>");
                document.write(new Number(12) == new Number(12));      //false
                document.write("<br/>");
                document.write(new Number(12) === new Number(12));       //false
                document.write("<br/>");

                document.write(new Number(12).valueOf() == new Number(12).valueOf());       //true
                document.write("<br/>");
                document.write(new Number(12).valueOf() === new Number(12).valueOf());      //true

                document.write("<hr/>");
    //-------------------------------------------------------------------------------------------------------
                document.write("Number的最大值:" + Number.MAX_VALUE + "<br/>");
                document.write("Number的最小值:" + Number.MIN_VALUE + "<br/>");


                document.write(new Number(12).toString(10) + "<br/>");          //12   ,10進制
                document.write(new Number(12).toString(2) + "<br/>");           //1100 ,2進制
                document.write(new Number(12).toString(8) + "<br/>");           //14    ,8進制
                document.write(new Number(12).toString(16) + "<br/>");          //c     ,16進制
                document.write("<br/>");

                document.write(new Number(12.12345) + "<br/>");
                document.write(new Number(12.12345).toFixed() + "<br/>");          //默認沒有小數,即= 12
                document.write(new Number(12.12345).toFixed(2)+ "<br/>");          //留下兩個小數位
                document.write(new Number(12.12345).toFixed(3) + "<br/>");          //留下三個小數位

            </script>

    </body>
    </html>

5.引用類型Boolean:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js 引用類型Boolean體驗</title>
    </head>
    <body>
        <script>
            var a = new Boolean(false);
            document.write("a.constructor===== " + a.constructor + "<br/>");            //輸出: function Boolean() { [native code] }
            document.write("a.toString ====" + a.toString() + "<br/>");                 //輸出 : a.toString ====false
            document.write("a.valueOf ====" + a.valueOf() + "<br/>");                   //輸入:   a.valueOf ====false

            if(a.valueOf()){
                document.write("條件成立<br/>");
            }else{
                document.write("條件不成立<br/>");
            }

        </script>
    </body>
    </html>

6.Math類:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js Math類體驗</title>
    </head>
    <body>
            <script type="text/javascript">
                document.write(Math.ceil(12.34) + "<br/>");                          //13       最大的整數
                document.write(Math.ceil(12.01) + "<br/>");                          //13       最大的整數
                document.write(Math.floor(12.34) + "<br/>");                         //12       最小的整數
                document.write(Math.floor(12.01) + "<br/>");                         //12       最小的整數
                document.write(Math.round(12.54) + "<br/>");                         //13       四捨五入
                document.write(Math.round(12.35) + "<br/>");                         //12       四捨五入
                document.write(Math.random() + "<br/>");                             //0~1      隨機數
                document.write(Math.max(12, 100, -1, 200, 320, 500) + "</br>");         //500   求最大數
                document.write(Math.min(12, 100, -1, 200, 320, 500) + "</br>");         //-1    求最小數

            </script>
    </body>
    </html>

7.Date類體驗:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js Date類體驗</title>
    </head>
    <body>
            <span id="myDate"></span>

    </body>

            <script type="text/javascript">

      //---------------------------------- window.setTimeout() 的練習--------------------------------------
           /*     function showDate(){
                    var date = new Date();

                    var str = date.getFullYear() + "年" + (date.getMonth()+1) + "月" + date.getDate() + "日,星期" + date.getDay() + " "+
                                    date.getHours() + "時" + date.getMinutes() + "分" + date.getSeconds() + "秒" ;

                    var span = document.getElementById("myDate");       //找尋span標籤
                    span.innerHTML = str.fontcolor("red");              //給Span標籤設置標籤體內容
                    window.setTimeout("showDate()",1000);               //延時一秒鐘之後執行
                }

                showDate();            //調用函數*/



    //---------------------------------- window.setInterval() 的練習---------------------------------------

                var span1 = document.getElementById("myDate");
                function showDate01(){
                    var nowDate = new Date();                       //獲取系統時間,即本機時間

                    var str1 = nowDate.getFullYear() + "年" + (nowDate.getMonth()+1) + "月" + nowDate.getDate()
                            + "日,星期" + nowDate.getDay() + " "+
                            nowDate.getHours() + "時" + nowDate.getMinutes() + "分" + nowDate.getSeconds() + "秒" ;

                    span1.innerHTML = str1.fontcolor("blue");
                }

                function startDate(){
                    //之所以在這裏先調用showDate01,是因爲剛開始時setInterval會延長一秒,導致界面出現一秒鐘的空白
                     showDate01();
                     window.setInterval("showDate01()",1000);            //每經過指定毫秒值執行指定的代碼

                }

                startDate();
            </script>

    </html>

8.數組體驗:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js 數組體驗</title>
    </head>
    <body>
    </body>

            <script type="text/javascript">
                var arrs = ["aa","bb","ccc"];

                document.write(arrs + "<br/>");             //aa,bb,ccc
                for(var i in arrs){
                    document.write(arrs[i] + "<br/>");      //aa  bb  ccc
                }

                document.write("<hr/>");
                for(var j=0;j<arrs.length;j++){
                    document.write(arrs[j] + "<br/>");      //aa  bb  ccc
                }

                document.write("<hr/>");

                arrs[0] = "www";
                arrs[2] = "kkkkkk";
                arrs[5] = "111111";                             //可變長的,會將數組裏的元素有三個變爲6個
                for(var j=0;j<arrs.length;j++){
                    document.write(arrs[j] + "<br/>");      //aa  bb  ccc
                }


                document.write("<hr/>");

                var arrss = new Array(20);
                for(var a=0;a<arrss.length;a++){
                    document.write(arrss[a] + "<br/>");    //都是 undefined
                }

                document.write("<hr/>");

                var arrsss = new Array("Hello World");
                document.write("----arr length---->" + arrsss.length + "<br/>");
                for(var s=0;s<arrsss.length;s++){
                    document.write(arrsss[s] + "<br/>");    //都是 undefined
                }


                document.write("<hr/>");

                var arr = new Array();
                arr[0] = "aa";
                arr[1] = "bb";
                arr[6] = 'xx';
                document.write(arr + "<br/>");
                //遍歷數組
                for (var i = 0; i < arr.length; i++) {
                    document.write(arr[i]+"<br/>");
                }
                //下標越界時:
                var arr = ["aa", "bb"];
                document.write(arr[200]);
                // 顯示undefined


                /**
                 * 上面輸出結果:
                 *           aa,bb,,,,,xx
                 *
                             aa
                             bb
                             undefined
                             undefined
                             undefined
                             undefined
                             xx

                             undefined
                 */

                document.write("<hr/>");

                var sortArr = new Array("hello","b","world","none","a");
                document.write("sort toString ====" + sortArr + "<br/>");
                sortArr.sort();
                document.write("sort toString ====" + sortArr + "<br/>");           //  a,b,hello,none,world


                document.write("<hr/>");


                var a =["a","b","c"];
                document.write(a + "<br/>");                            //a,b,c
                document.write(typeof a + "<br/>");                     //object
                document.write(a.concat([100,200]) + "<br/>");          //a,b,c,100,200

                var strings = a.concat([100,200],[500,5]);
                document.write(typeof strings + "<br/>");               //object

                var b = a.join("$");
                document.write(b + "<br/>");                            //a$b$c
                document.write(typeof b + "<br/>");                     //string

              //  document.write(a.pop() + "<br/>");                    //c,將最後一個元素c 從數組中刪除
                document.write(a.push(100,154) + "<br/>");              //5,返回添加之後的數組的長度
                document.write(a + "<br/>");                            // a,b,c,100,154

                document.write(a.toString() + "<br/>");                 //a,b,c,100,154

                document.write(typeof a + "<br/>");                 //object
                var c = a.valueOf();
                document.write(typeof c + "<br/>");                 //object


                var sortaaaa = ["d","da","a","c","1"];
               /* sortaaaa.sort();                                輸出:  1,a,c,d,da
                document.write(sortaaaa + "<br/>");*/

                sortaaaa.sort(compareTo);
                document.write(sortaaaa + "<br/>");

                function compareTo(a, b){
                    return a - b;
                }

            </script>

    </html>

9.自定義對象:


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>js 自定義對象體驗</title>
    </head>
    <body>

    </body>
        <script type="text/javascript">
    /*

     //-----------------------------Object 方式-------------------------------------------------

            var person = new Object();
            person.name = "wyk";
            person.age = 18;
            person.sayHello = function () {
                document.write(this.name + "," + this.age + "<br/>");
            }
            person.sayHello();

    //-----------------------------------------------------------------------
            document.write("<br/>");

            var student = new Object();
            student.name = "lxf";
            student.age = 16;
            student.gan = "girl";
       //   document.write(student.toString() + "<br/>");           //[object Object]
            student.sayDetail = function () {
                document.write(this.name + "," + this.age + "," + this.gan);
            }

            student.sayDetail();
     */

    //--------------------------------------自定義無參構造函數對象---------------------------
            function Person(){
                //window.document.write("constructor<br/>");
            }
            var person = new Person();
            person.name = "gg";
            person.age = 17;
            person.gan = "super man";

            person.work = function () {
                window.document.write(this.name +","+ this.age +"," + this.gan);
            }

            window.document.write(person.constructor  + "<br/>");
            window.document.write(person.name +","+ person.age +"," + person.gan + "<br/>");
            person.work();


    //--------------------------------------自定義有參構造函數對象------------------------------
            document.write("<hr/>");

            function Student(name,age){
                this.name = name;
                this.age = age;
                this.study = function () {
                    window.document.write(this.name + ":" + this.age);
                }
            }

            var student = new Student("yyyyy",78);
            student.study();


    //--------------------------------------json方式定義對象----------------------------------
            document.write("<hr/>");

            var teacher = {
                name:"小王",
                age:28,
                classtify:"數學",
                teach: function () {
                    window.document.write(this.name + "," + this.age + "," + this.classtify);
                },
                play:function(){
                    window.document.write("play play....<br/>");
                }
            };
            document.write(teacher.constructor + "<br/>");          //function Object() { [native code] }
            teacher.play();
            teacher.teach();                                        //小王,28,數學

        </script>
    </html>

Ⅲ.總結

這篇幅也夠長夠亂的,難免有錯誤,還請走過路過看過的帥比靚比幫忙指定一二;敲這些demo也是有夠費時間的,那我可以不敲嗎?光說不練可不行,還是擠擠時間敲吧!接着學習,88

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章