python學習之javascripts

JavaScript 簡介

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

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

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

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

簡單的javascripts

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

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

    </script>
</head>
<body>

這是一個javascript頁面
</body>
</html>

<body> 中的 JavaScript

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>

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

    </script>
</head>
<body>

這是一個javascript頁面
</body>
</html>

在 <head> 或者 <body> 的JavaScript

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

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

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>(runoob.com)</title> 
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";
}
</script>
</head>
<body>

<h1>我的 Web 頁面</h1>
<p id="demo">一個段落。</p>
<button type="button" onclick="myFunction()">點擊這裏</button>

</body>
</html>

<body> 中的 JavaScript 函數

在本例中，我們把一個 JavaScript 函數放置到 HTML 頁面的 <body> 部分。

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>(runoob.com)</title>
</head>
<body>

<h1>我的第一個 Web 頁面</h1>
<p id="demo">一個段落。</p>
<button type="button" onclick="myFunction()">點擊這裏</button>
<script>
function myFunction(){
    document.getElementById("demo").innerHTML="我的第一個 JavaScript 函數";
}
</script>

</body>
</html>

外部的 JavaScript

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

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

如需使用外部文件，請在 <script> 標籤的 "src" 屬性中設置該 .js 文件：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>(runoob.com)</title> 
</head>
<body>

<h1>我的 Web 頁面</h1>
<p id="demo">一個段落。</p>
<button type="button" onclick="myFunction()">點擊這裏</button>
<p><b>註釋：</b>myFunction 保存在名爲 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>

</body>
</html>

聚焦（onfocus）和離焦（onblur）事件：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <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>
</head>
<body>

<div class="login">
    <h1>用戶登錄</h1>
    <form action="#" method="get">
        <!--onfocus聚焦事件， 如果聚焦， 執行函數showUserTips()-->
                    <input type="text" name="username" placeholder="用戶名" id='user' onfocus="showUserTips()" onblur="checkUser()">
        <span id="usertips"></span><br/>
        <input type="password" name="password" placeholder="密碼" id="pwd"><br/>
        <input type="submit" value="登錄">
    </form>

</div>

</body>
</html>

點擊onclick事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <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>
</head>
<body>

<div class="login">
    <h1>用戶登錄</h1>
    <form action="#" method="get">
        <!--onfocus聚焦事件， 如果聚焦， 執行函數showUserTips()-->
        <input type="text" name="username" placeholder="用戶名" id='user' οnfοcus="showUserTips()" οnblur="checkUser()">
        <span id="usertips"></span><br/>
        <input type="password" name="password" placeholder="密碼" id="pwd"><br/>
        <input type="submit" value="登錄">
    </form>

</div>

</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
            //    1. 獲取全選框對象
            var checkAllEle = document.getElementById('checkAll');

            //    獲取當前的狀態, 如果返回true， 則代表選中， 否則未選中;
            // alert(checkAllEle.checked);
            var checkOnes = document.getElementsByName('checkOne');
            if (checkAllEle.checked) {
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = true;
                }

            } else {
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = false;
                }

            }

        }
    </script>
</head>
<body>

<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center;" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="刪除">
    </th>
    <tr>

        <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>
</table>

</body>

動態添加城市

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addCity() {
        //    1. 獲取要添加的城市內容
            var city = document.getElementById('city').value;

        //    2. 判斷城市是否有值， 如果有， 則添加到列表裏面
            if(city){
            //    創建一個關於城市的文本節點
                var textnode = document.createTextNode(city); //廣州

            //    創建一個li元素節點
                var liEleNode = document.createElement('li');

            //    將城市信息添加到li標籤裏面<li>城市名稱</li>
                liEleNode.appendChild(textnode);
            //    將城市列表標籤添加到ul標籤裏面去;
                var ulEleNode = document.getElementById('city_ul');
                ulEleNode.appendChild(liEleNode)

            }else{
                alert("城市未空");
            }

        }
    </script>
</head>
<body>

<div class="content">
    <form>
        <input type="text" name="city" id="city" placeholder="請輸入城市">
        <input type="button" value="添加城市" onclick="addCity()">
    </form>

<!--
<li>深圳</li>

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

</div>

</body>

省級信息二級聯動

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--js和html代碼分離-->

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

    </script>
</head>
<body>

<div class="content">
    <form action="#" method="get">
        <span>籍貫</span>
        <!--當修改省份選項時， 執行函數changeCity的內容-->
        <select id="province" onchange="changeCity()">
            <option>---選擇省份-----</option>
            <option name="province" value="0">陝西</option>
            <option name="province" value="1">山西</option>
            <option name="province" value="2">廣西</option>
        </select>
        <select id="city">
            <option>---選擇城市---</option>
        </select>

    </form>
</div>

</body>

python學習之javascripts

簡單的javascripts

<body> 中的 JavaScript

在 <head> 或者 <body> 的JavaScript

<body> 中的 JavaScript 函數

外部的 JavaScript

聚焦（onfocus）和離焦（onblur）事件：

點擊onclick事件

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

動態添加城市

省級信息二級聯動

《Python進階》學習筆記

Leetcode 3161. 物塊放置查詢

leetcode 60 排列序列

一個docker容器暴露多個端口

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

python學習之自動化運維項目

python學習之容器化管理docker

python學習之數據分析與數據挖掘

python學習之爬蟲項目ScrapyProject總結

python學習之ajax和可視化管理工具

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結