什麼是js和js的基本文法

標籤：輸入   bsp   win   input   method   cat   開發   post   content   

時間：2016年12月15日

先講講基礎文法；

大部分是來動作表單；

js動態效果和資料互動（ajax？）

js也有自己的API

js大部分的DOM操作都是針對input的。

案例學習，對註冊頁面的簡單校正，對於空值或者錯誤的值先彈框，後面再學習在頁面上寫資料。

 

js是一種指令碼語言，輕量級的，可插入到html頁面中啟動並執行語言，和java半毛錢的關係都沒有。

js有三大塊內容：

ECMAScript java的基礎文法

BOM 瀏覽器物件模型

DOM 文件物件模型

以後jquery用的也很多，但是先對javascript的基礎文法要很瞭解。

js可以使頁面動起來，提高互動性。

所有的類型都用var來代替，就像java裡面的Object。

<script type="text/javascript">
    console.log("hello, world!");
</script>

在html的head中加入js的標籤

在js中如果有一行報錯，那麼後面的語句都不會運行了。

 

js變數定義

js運算子

var a = "a";

console.log(a-2); // 列印NaN

console.log("3"-2);    // 列印的是1

console("3"+0+2);     // 列印出來的是5

 

js數組可以存任意類型的資料。

運算式的真假判斷：

js數組也有length屬性

js數組遍曆：for(i in arr) { }

i是arr的索引，從0到arr.length()-1。

 

js方法

聲明：function test() { } 這就是js的方法。

function fun(obj) { } 在這裡obj相當於形參了，尼瑪var都不要了。

<input type=text onblur="show(this)" /> this指代的是這個input，原來如此。

<input type="text" value="xx" class="xx是大神！" id="input" name="Newtow\‘s name" onblur="show(this.value)" onclick="show(this.name)"  onbeforecopy="show(this.id)" onbeforecut="show(this.class)" />

傳參數一般都是this，然後方法裡面對對象進行操作。呵呵，這樣還挺好玩的，以前不懂啊，被js坑慘了。

感覺js可以把html當成七巧板一樣來操作，實際上我都從來沒有玩過七巧板。

class面中不能包括驚嘆號嗎？

 

js是區分大小寫；

js是弱變數類型的語言，若類型不等於沒有類型；

js的分號可有可無；

js的注釋和java的注釋一樣；

js變數的聲明的都是var，可以在var後面跟一個或者多個變數；

js基礎資料型別 (Elementary Data Type)和引用資料類型，原始類型只有5個：undefined，boolean，number，String，null；

===(全等於)表示值相等而且類型也一樣的時候才是相等的，==只要值是一致的就相等。

js通常的開發步驟：一般都是由事件觸發，而且都是觸發一個函數，因此我們需要定義一個函數，獲得需要控制的對象的控制權，然後操縱那個對象。

瞭解js中常用的事件

js的引入方式:

1、直接在頁面內編寫

<script></script>

2、將js編寫到js檔案中，然後引入到頁面中

在網頁中使用js有兩種方式:

第一種：直接在頁面內的<Script> </Script>標籤中寫入；

第二種：從外部引入js:

<Script src=>

</Script>

栗子：js完成頁面表單的簡單驗證

<form action=action?action=heheda method=post onsubmit=return checkForm();>

</form>

Document對象有很多實用的方法：

getElementById()

getElementByName()

getElementByTagName()

js的Regex有兩種：

第一種是用字串來進行驗證，String

第二種是用Regex對象來驗證，RegExp

兩個都可以去匹配正則，一個是String裡面的match方法，另一個是RegExp中的test方法。

學會如何對js打斷點

如果是checkbox的話，可以在onsubmit事件裡面可以把checkbox裡面的值拼成一個字串，然後一起送到後台。

js也是物件導向的語言，底層是物件導向的；有機會的話可以多找一些js的數。

一個數組往後台傳的話，傳的是這個數組的地址值，因此還是把checkbox的值拼成一個串。

function checkForm() {
    var clearInfo = document.getElementsByClassName("check");
    var i = 0;
    for(i=0; i<clearInfo.length; i++) {
        clearInfo[i].textContent = "";
    }
    var username = document.getElementById("username").value;
    var hu = document.getElementById("userid");
    if(username == "") {
        hu.textContent="使用者名稱為空白！";
        return false;
    }
    var passwd = document.getElementById("password").value;
    var passwdid = document.getElementById("passwdid");
    if(passwd == "") {
       
        passwdid.textContent = "密碼為空白!";
        return false;
    }
    var repasswd = document.getElementById("repassword").value;
    var repasswdid = document.getElementById("repasswdid");
    if(repasswd != passwd) {
       
        repasswdid.textContent = "兩次輸入的密碼不一致!";
        return false;
    }
    var email = document.getElementById("getEmail").value;
    var checkemail = document.getElementById("emailid");
    if(!/^([a-zA-z0-9_-])[email protected]([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)) {
       
        checkemail.textContent = "email的格式不符合要求！";
        return false;
       
    }
    var c1 = document.getElementById("c1").checked;
    var c2 = document.getElementById("c2").checked;
    var c3 = document.getElementById("c3").checked;
    var c4 = document.getElementById("c4").checked;
    //alert(c1 + "#" + c2 + "#" + c3 + "#" + c4);
    if(c1 == false && c2 == false && c3 == false && c4 == false) {
        var check = document.getElementById("checkid");
        //alert(c1 + "#" + c2 + "#" + c3 + "#" + c4);
        check.textContent = "請至少選擇一項！";
        return false
    }
    jiguan = document.getElementById("jiguan").selected;
    //alert(jiguan);
    if(jiguan == true) {
        var jiguanid = document.getElementById("jiguanid");
        jiguanid.textContent="請選擇籍貫！"
        return false;
    }
}

在js中有些對象的屬性和對象之間還隔著一個對象的，比如div裡面有style屬性，style下面又有屬性height和weigth，不能通過div來直接操作其height，而是要通過：div.style.height這樣來操作。

另外在函數通常都是直接傳入對象，然後在函數中對擷取或者操作對象的各種屬性，而不是僅僅傳入對象的屬性，感覺到了一點物件導向呢！

js實現圖片的滾動效果

體驗js讓頁面動起來的效果。

用到了js中DOM的window對象。

window對象的定時功能：

setInterval()，每隔多少毫秒去執行一個運算式，會一直執行；

setTimeout()，只會執行一次，但是可以通過調用自己來一直執行。

setInterval("change()",5000);   在雙引號裡面的代碼會當成js代碼來執行。

setTimeout("change()",5000); 定時器實際用的比較少。

寫在<body>的onload()事件中，方法是改變圖片src屬性的值，也可以寫成匿名函數。

html以及js以及css的載入順序

寫在裡面和寫在外面的區別，寫在函數外面變數會引用到尚未載入的內容。

定時彈出廣告

要用到css的display屬性

兩個定時都想有的話就放在一個onload裡面。

<script src="js/check.js"></script>
<script>
    var time;
    window.onload = function () {
        time = window.setInterval("show()", 10);
    };
    function show() {
        var adDiv = document.getElementById("adDiv");
        adDiv.style.display = "block";
        window.clearInterval(time);
        time = window.setInterval("hide()",10);
    }
    function hide() {
        var adDiv = document.getElementById("adDiv");
        adDiv.style.display="none";
        window.clearInterval(time);
        time = window.setInterval("show()",10);
    }
</script>

bom和dom對象的介紹

bom對象有：

1. Window

2. Navigator

3. Screen

4. History

5. Location

dom對象有：

1. Document

2. Element

3. Attribute

4. Event

js中bom中的5個對象：

1. window：代表的瀏覽器的視窗，上層的對象

window的confirm()方法也挺有用的。

可根據返回的true或者false來操作。

介紹了window對象

location可以實現一個頁面跳轉的效果，有一個href方法來跳轉頁面，location.href

location.reload()在重新整理的時候可以用到；

history主要記住的是go方法，history.go；

對於checkbox或者option這種注意選項的勾選屬性是true或者false，而不是checked或者其他的。

在訪問tomcat伺服器的頁面的時候一定要保證tomcat開啟並且項目丟在tomcat裡面了。

什麼是js和js的基本文法