python學習之javascripts

JavaScript 簡介

JavaScript 是互聯網上最流行的腳本語言，這門語言可用於 HTML 和 web，更可廣泛用於服務器、PC、筆記本電腦、平板電腦和智能手機等設備。
JavaScript 是腳本語言

JavaScript 是一種輕量級的編程語言。

JavaScript 是可插入 HTML 頁面的編程代碼。

JavaScript 插入 HTML 頁面後，可由所有的現代瀏覽器執行。

簡單的javascripts

<script>

alert("我的第一個 JavaScript");

</script>

這是一個javascript頁面

中的 JavaScript 在本例中，JavaScript 會在頁面加載時向 HTML 的 寫文本：

<script>

document.write("<h1>這是一個標題</h1>");
document.write("<p>這是一個段落</p>");

</script>

這是一個javascript頁面

在 或者 的JavaScript 您可以在 HTML 文檔中放入不限數量的腳本。

腳本可位於 HTML 的 或 部分中，或者同時存在於兩個部分中。

通常的做法是把函數放入 部分中，或者放在頁面底部。這樣就可以把它們安置到同一處位置，不會干擾頁面的內容

我的 Web 頁面

一個段落。

點擊這裏 中的 JavaScript 函數 在本例中，我們把一個 JavaScript 函數放置到 HTML 頁面的 部分。

該函數會在點擊按鈕時被調用：

我的第一個 Web 頁面

一個段落。

點擊這裏 外部的 JavaScript 也可以把腳本保存到外部文件中。外部文件通常包含被多個網頁使用的代碼。

外部 JavaScript 文件的文件擴展名是 .js。

如需使用外部文件，請在

我的 Web 頁面

一個段落。

點擊這裏

註釋：myFunction 保存在名爲 "myScript.js" 的外部文件中。

聚焦（onfocus）和離焦（onblur）事件： onfocus事件：聚焦事件，onfocus 事件在對象獲得焦點時發生。 onblur事件：離焦事件，onblur 事件會在對象失去焦點時發生。 爲了使用戶體驗更好，在鼠標點擊到用戶名的框時，右邊提示輸入用戶名和密碼的要求，當離開框時，檢測用戶名和密碼是否正確。

我們在平常的登錄過程當中，用戶名和密碼欄後面一般會有所輸入內容相關要求和提示的，並不會總是 跳出警示框，這種需求該如何實現呢？那就需要用到聚焦和離焦事件。

<script>
    function showUserTips() {
        var usertipsObj = document.getElementById('usertips');

        var info ='<span style="color: gray">用戶名長度大於2</span>';
        // alert(usertipsObj.innerHTML);
        usertipsObj.innerHTML = info;

    }

    function checkUser() {
         //獲取當前用戶提交的用戶名,默認情況下getElementsByName返回列表對象, .value獲取對象裏面的值
        var username = document.getElementsByName('username')[0].value;
        // 判斷用戶名是否爲空， 如果爲空， 報錯
         var usertipsObj = document.getElementById('usertips');
        if (username.length <= 2) {

            usertipsObj.innerHTML = '<span style="color: red">用戶名長度不大於2</span>'
        }else{
            usertipsObj.innerHTML = '<span style="color: green;">ok</span>'
        }
    }
</script>

用戶登錄

點擊onclick事件 點擊事件 onclick事件：onclick 事件會在對象被點擊時發生。 案例（1）onclick實現圖片的轉換：實現點擊按鈕，切換圖片

<script>
    function showUserTips() {
        var usertipsObj = document.getElementById('usertips');

        var info ='<span style="color: gray">用戶名長度大於2</span>';
        // alert(usertipsObj.innerHTML);
        usertipsObj.innerHTML = info;

    }

    function checkUser() {
        //獲取當前用戶提交的用戶名,默認情況下getElementsByName返回列表對象, .value獲取對象裏面的值
        var username = document.getElementsByName('username')[0].value;
        // 判斷用戶名是否爲空， 如果爲空， 報錯
        var usertipsObj = document.getElementById('usertips');
        if (username.length <= 2) {

            usertipsObj.innerHTML = '<span style="color: red">用戶名長度不大於2</span>'
        }else{
            usertipsObj.innerHTML = '<span style="color: green;">ok</span>'
        }
    }
</script>

用戶登錄

實現表格全選與全部選案例

    <th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
    <th>編號</th>
    <th>姓名</th>
    <th>性別</th>
    <th>年齡</th>
</tr>
<tr>
    <td><input type="checkbox" name="checkOne"></td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
</tr>
<tr>
    <td><input type="checkbox" name="checkOne"></td>
    <td>2</td>
    <td>1</td>
    <td>2</td>
    <td>2</td>
</tr>
<tr>
    <td><input type="checkbox" name="checkOne"></td>
    <td>3</td>
    <td>3</td>
    <td>3</td>
    <td>1</td>
</tr>
<tr>
    <td><input type="checkbox" name="checkOne"></td>
    <td>4</td>
    <td>4</td>
    <td>1</td>
    <td>4</td>
</tr>
<tr>
    <td><input type="checkbox" name="checkOne"></td>
    <td>5</td>
    <td>5</td>
    <td>1</td>
    <td>5</td>
</tr>

動態添加城市

<ul id="city_ul">
    <li>西安</li>
    <li>成都</li>
    <li>上海</li>
</ul>

省級信息二級聯動

<script type="text/javascript" src="js/province.js">

</script>

籍貫 ---選擇省份----- 陝西 山西 廣西 ---選擇城市---

</form>