筆記-JavaWeb學習之旅7

時間  2019-11-30
標籤 筆記 javaweb 學習 之旅 欄目 Java 简体版
原文   原文鏈接

JavaScript基礎

概念：一門客戶端腳本語言，運行在客戶端瀏覽器中，每個瀏覽器都有JavaScript的解析引擎，是一個腳本語言，不須要編譯，直接就能夠被瀏覽器解析執行。javascript

JavaScript = ECMAScript+JavaScript本身特有的東西(BOM+DOM)html

ECMAScript:客戶端腳本語言的標準java

​ 基本語法：正則表達式

與html結合的方式有兩種內部JS和外部JS數組

註釋：單行註釋//，多行註釋/**/瀏覽器

數據類型：1.原始數據類型（number,string,boolean,null,undefined）2.引用數據類型：對象dom

九九乘法表練習
<!DOCTYPE html>
<!--suppress JSAnnotator -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            border:1px solid;
        }
    </style>
    <script>
        document.write("<table align='center'>");
        for(var i= 1;i<=9;i++){
            document.write("<tr>");
            for(var j=1;j<=i;j++){
                document.write("<td>");
                var stri = i+"";
                var strj = j+"";
                var str = strj+"*"+stri+"=";
              document.write(str+(i*j)+"&nbsp &nbsp &nbsp");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
</head>
<body>

</body>
</html>

img

JavaScript:Function對象函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //建立Function對象的方式
        //第一種方式建立對象
        function fun1(a,b){
            document.write(a+b);
        }
        // 調用第一種方法
        //fun1(2,5);//7
        //第二種方式建立對象
        var fun2=function(a,b){
            document.write(a+b);
        }
        //調用第二種方法
        fun2(2,8);//10
        //Function的length屬性,表明形參的個數
        document.write(fun2.length);//2
        //定義一個相同名稱的方法，會覆蓋以前的
        function fun1(a,b){
            document.write(a-b);
        }
        fun1(2,3)//-1
        //求任意個數的和
        //在啊方法的聲明中有一個隱藏的內置對象(數組)
        //他會封裝全部的實際參數
        function add(){
            var sum= 0;
            for(var i =0 ;i < arguments.length;i++){
                sum+=arguments[i];
            }
            return sum;
        }
        var sum = add (1,2,3);
        alert(sum);
    </script>
</head>
<body>

</body>
</html>
Array對象

Array對象建立的三種方式學習

var arr = new Array(元素列表);編碼

var arr = new Array(默認長度);

var arr = [元素列表];

Array對象的經常使用方法

join(參數):將數組中的元素按照指定的元素進行拼接

特色：js中，數組元素的類型是可變的，數組長度是可變的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //建立對象
        var arr1 = new Array(1,2,3,"hahhaha");//數組也能夠存放不一樣的數據類型
        var arr2 = new Array(5);//只有一個元素時候表明的是數組的長度
        var arr3 = [1,2,3,4];
        //輸出數組,將會直接打印數組的內容
        document.write(arr1+"<br>");//1,2,3,"hahhaha"
        document.write(arr2+"<br>");//,,,,
        document.write(arr3+"<br>");//1,2,3,4
        //調用Array的join方法，將會按照指定格式打印數組
        document.write(arr1.join("$"));

    </script>
</head>
<body>

</body>
</html>

Date對象

建立方式 :var date = new Date();

經常使用方法：

toLocaleString():返回當前date對象對應的本地字符串格式

getTime()：獲取毫秒值，返回當前如期對象描述的時間到1970年1月一日0點的毫秒值差

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var date = new Date();
        document.write(date+"<br>");//Wed Jun 05 2019 16:09:06 GMT+0800 (中國標準時間)
        document.write(date.toLocaleString()+"<br>");//2019/6/5 下午4:09:06
        document.write(date.getTime()+"<br>")//1559722146361
    </script>
</head>
<body>

</body>
</html>
Math對象：

不須要建立，直接能夠調用方法

經常使用方法：

random()返回0~1之間的隨機數，含0不包含1

ceil(x):對數字進行向上舍入，

floor(x);對數字進行向下舍入

round(x)，把數四捨五入

去1~100之間多的隨機整數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var number = Math.round(Math.random()*100)+1;
        document.write(number)
    </script>
</head>
<body>

</body>
</html>

RegExp:正則表達式對象

正則表達式：定義字符串的組成規則

1.單個字符：[],好比[a],[ab],[a-zA-z0-9],特殊符號表明的單個字符，\d:單個數字字符[0-9],\w:單個單詞字符[a-zA-z0-9_]

2.量詞符號：

？：表明出現0次或1次，

*：表示出現0次或屢次

+：出現1次或屢次

{m,n}：表示 m<=數量 <=n

{,n}:最多n次

{m,}最少m次

開始結束符號 ：^表示開始，$表示結束

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //驗證字符串是否符合正則表達式
        var reg = /^\w{6,12}$/;
        var name="zhangsan";
        var flag = reg.test(name);
        alert(flag);
    </script>
</head>
<body>

</body>
</html>
Global對象

特色：全局對象，這個Global中封裝的方法不須要對象就能夠直接調用

經常使用方法:

encodeURI():url編碼

decodeURL():url解碼

encodeURIComponent():url編碼，編碼的字符更多

decodeURIComponent();url解碼

parseInt：將字符串轉爲數字，會逐一判斷每個字符是不是數字，直到不是數字爲止，會將前邊數字部分轉爲number

isNaN():判斷一個值是不是NaN

eval():將JavaScript字符串，並把它做爲腳本代碼來執行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       var str = "雲想衣裳花想容";
       //編碼
       var encode = encodeURI(str);
       document.write(encode+"<br>");
       var s = decodeURI(encode);//%E4%BA%91%E6%83%B3%E8%A1%A3%E8%A3%B3%E8%8A%B1%E6%83%B3%E5%AE%B9
       document.write(s+"<br>");
       //編碼
        var encode1 = encodeURIComponent(str);
        document.write(encode1);
        //將字符串裝換爲數字
        var str1 = "123abc";
        var number = parseInt(str1);
        alert(number);//123
        //若是是a123abc會變成NaN類型

    </script>
</head>
<body>

</body>
</html>

DOM簡單學習：控制HTML文檔的內容

綁定事件的兩種方式

1.直接在html標籤上，指定事件的屬性操做，屬性值就是代碼

2.經過js獲取元素對象，指定事件屬性，設置一個函數

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--//onclick單擊事件-->
    <!--//直接在html標籤上，指定事件的屬性，屬性值就是代碼-->
    <!--只要圖片一接觸到單擊就會執行相應的代碼-->
    <img src="img/off.gif" onclick="fun();">
    <img id="light2" src="img/on.gif">

    <script>
        function fun(){
           for(var i=0;i<100;i++){
               alert("你還能夠點我最後一次");
           }
        }
        function fun2(){
            alert("咋老點我?")
        }
        var ligth2 = document.getElementById("light2");//獲取id爲light2元素對象
        ligth2.onclick=  fun2;//操做元素對象
    </script>
</body>
</html>

電燈開關案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--導入圖片-->
    <img src="img/off.gif" id="hight">
    <!--獲取元素對象，改變屬性-->
    <script>
        var hight = document.getElementById("hight");
        //綁定事件,添加要執行的代碼
        var flag = false;
        hight.onclick=function(){
            //燈off表明狀態爲false
            if(flag){
                hight.src="img/off.gif";
                flag=false;
            }else{
                //當單擊的時候，燈若是狀態爲on,則單擊後關閉燈
                hight.src="img/on.gif";
                flag=true;
            }
        }
    </script>
</body>
</html>
BOM

1.概念：Browser Object Model 瀏覽器對象模型

將瀏覽器的各個組成部分封裝成對象

2.組成：

window:窗口對象

Navigator:瀏覽器對象

Screen:顯示器屏幕對象

History:歷史記錄對象

Location:地址欄對象

window：窗口對象

建立方式:無需建立，能夠直接方法名調用

經常使用方法:alert(),confirm(),prompt()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button id="CloseWindow">關閉窗口</button>
    <button id="NewWindow">打開窗口</button>
    <script>
        var newwindow;
        var nw = document.getElementById("NewWindow");
        nw.onclick=function(){
            //這個open方法返回的是window對象
           newwindow=open("https://www.baidu.com");
        }
        //document對象的方法getElementById會返回參數指定ID的對象
        var cw = document.getElementById("CloseWindow");
        function fun(){
          //關閉打開的新窗口
          newwindow.close();
      }
        //綁定元素對象
        cw.onclick=fun;


    </script>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程