D16——C語言基礎學PYTHON

時間 2019-11-13

標籤 d16 c語言基礎 python 欄目 Python 简体版

原文原文鏈接

C語言基礎學習PYTHON——基礎學習D16javascript

20180927內容綱要：html

　　一、JavaScript介紹前端

　　二、JavaScript功能介紹java

　　三、JavaScript變量python

　　四、Dom操做web

　　　　a、獲取標籤正則表達式

　　　　b、標籤操做編程

　　　　c、建立標籤小程序

　　　　d、提交表單數組

　　　　e、事件操做

　　　　f、事件的捕捉與冒泡

　　五、js語法分析

　　六、小結

　　七、練習

1 JavaScript介紹

JavaScript是一種基於對象和事件驅動並具備相對安全性的客戶端腳本語言。同時也是一種普遍用於客戶端Web開發的腳本語言，經常使用來給HTML網頁添加動態功能，好比響應用戶的各類操做。

一個完整的 JavaScript 實現是由如下 3 個不一樣部分組成的：核心（ECMAScript）、文檔對象模型（Document Object Model，簡稱DOM）、瀏覽器對象模型（Browser Object Model，簡稱BOM）。

不少人看到 Java 和 JavaScript 都有「Java」四個字，就覺得它們是同同樣東西，連我本身當初也是這樣。事實上，JAVA語言和JavaScript語言是相關的，可是它們的聯繫並不是你想像的那樣緊密。首先Java語言是SUN Microsystems公司的產品，而JavaScript是Netscape公司的產品。

其次它們在功能上也有些差別：

Java在客戶端的運行的應用程序叫作 Java Applet，是嵌在網頁中，而又有本身獨立的運行窗口的小程序。Java Applet 是預先編譯好的，一個 Applet 文件（.class）用 Notepad 打開閱讀，根本不能理解。Java Applet 的功能很強大，能夠訪問 http、ftp等協議，甚至能夠在電腦上種病毒（已有先例了）。

相比之下，JavaScript 的能力就比較小了。JavaScript 是一種「腳本」（「Script」），它直接把代碼寫到 HTML 文檔中，瀏覽器讀取它們的時候才進行編譯、執行，因此能查看 HTML 源文件就能查看JavaScript 源代碼。JavaScript 沒有獨立的運行窗口，瀏覽器當前窗口就是它的運行窗口。它們的相同點，我想只有同是以 Java 做編程語言一點了。

2 JavaScript功能介紹

JavaScript是一門面向對象的動態語言，他通常用來處理如下任務：

修飾網頁
- 生成HTML和CSS
- 生成動態HTML內容
- 生成一些特效
提供用戶交互接口
- 生成用戶交互組件
- 驗證用戶輸入
- 自動填充表單
可以讀取本地或者遠程數據的前端應用程序，例如http://web-engineering.info/JsFrontendApp-Book
經過Nodejs實現像JAVA,C#,C++同樣的服務端程序
實現分佈式WEB程序，包括前端和服務端

3 JavaScrip變量

變量值可能爲：

數據，如string,number,boolean
對象的引用：如普通對象，數組，函數，日期，正則表達式
特殊值null，其一般用做用於初始化的對象變量的默認值
特殊值undefined，已經聲明但沒有初始化的初始值

數組，函數，日期和正則表達式是特殊類型的對象，但在概念上，日期和正則表達式是值類型，被包裝成對象形式體現。

變量，數組，函數的參數和返回值均可以不聲明，它們一般不會被JavaScript引擎檢查，會被自動進行類型轉換。

關於變量的做用域參考：http://www.javashuo.com/article/p-cswajoss-bv.html

 1 function func(){
 2     if(1==1){
 3         var name = 'Kanghui';
 4     }
 5     console.log(name)
 6 }
 7 
 8 function func(){
 9     if(1==1){
10         var name = 'Kanghui';
11     }
12 console.log(name)
13 }
14 
15 
16 xo = 'xiaoming';
17 function func(){
18     var xo = 'lili';
19     function inner(){
20         console.log(xo);
21     }
22     return inner;
23 }    
24 var ret = func()
25 ret()
26 
27 xo = 'xiaoming';
28 function func(){
29     var xo = 'lili';
30     function inner(){
31         console.log(xo);
32     }
33     var xo = 'tony'
34     return inner;
35 }    
36 var ret = func()
37 ret()

做用域實例

4 Dom操做

一、獲取標籤

獲取單個元素        document.getElementById('i1')
        獲取多個元素（列表）document.getElementsByTagName('div')
        獲取多個元素（列表）document.getElementsByClassName('c1')
        a. 直接找
            document.getElementById             根據ID獲取一個標籤
            document.getElementsByName          根據name屬性獲取標籤集合
            document.getElementsByClassName     根據class屬性獲取標籤集合
            document.getElementsByTagName       根據標籤名獲取標籤集合
        b. 間接
            tag = document.getElementById('i1')
            parentElement           // 父節點標籤元素
            children                // 全部子標籤
            firstElementChild       // 第一個子標籤元素
            lastElementChild        // 最後一個子標籤元素
            nextElementtSibling     // 下一個兄弟標籤元素
            previousElementSibling  // 上一個兄弟標籤元素

二、標籤操做

  a. innerText
            
            獲取標籤中的文本內容
            標籤.innerText
            對標籤內部文本進行從新複製
            標籤.innerText = ""
  b. className
            tag.className =》 直接總體作操做
            tag.classList.add('樣式名')   添加指定樣式
            tag.classList.remove('樣式名')   刪除指定樣式
            PS：
                <div onclick='func();'>點我</div>
                <script>
                    function func(){  
                    }
                </script>
  c. checkbox  
                獲取值
                checkbox對象.checked
                設置值
                checkbox對象.checked = true

三、Dom建立標籤

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input type="button" onclick="AddEle1();" value="添加" />
 9     <input type="button" onclick="AddEle2();" value="添加" />
10     <div id="i1">
11         <p><input type="text"  /></p>
12     </div>
13     <script>
14         function AddEle1(){
15             // 建立一個標籤
16             //把標籤添加到HTML中
17             var tag = "<p><input type='text' /></p>"
18             document.getElementById('i1').insertAdjacentHTML("beforeEnd",tag)
19         }
20         function AddEle2(){
21             // 建立一個標籤
22             //把標籤添加到HTML中
23             var tag = document.createElement('input');
24             tag.setAttribute('type','text');
25             tag.style.fontsize = '16px';
26             tag.style.color = 'red';
27 
28             var p = document.createElement('p');
29             p.appendChild(tag);
30 
31             document.getElementById('i1').appendChild(p);
32 
33         }
34     </script>
35 </body>
36 </html>

兩種建立方式

四、提交表單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form id="f1" action="http://www.baidu.com">
        <input type="text" />
        <input type="submit" value="提交" />
        <a onclick="submitForm();">提交</a>
    </form>

    <script>
    function submitForm() {
        document.getElementById('f1').submit()
        alert(123);
        var v = confirm("真的要刪除嗎？")；
        console.log(v);
    }
    //定時器，一直執行
    var obj = setInterval(function () {
        console.log(1);
        clearInterval(obj);
    },1000);
    //定時器，只執行一次
    setTimeout(function () {
        console.log('timeout');
    },5000);
    </script>
</body>
</html>

提交表單

打開qq郵箱，刪除垃圾郵件後會彈出一個已刪除的框，而後再幾秒鐘後消失，這是怎麼作到的呢？

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="status"></div>
 9     <input type="button" value="刪除" onclick="DeleteEle();" />
10 
11     <script>
12         function DeleteEle() {
13             document.getElementById('status').innerText = "已刪除";
14             setTimeout(function () {
15                 document.getElementById('status').innerText = "";
16             },5000)
17         }
18     </script>
19 </body>
20 </html>

定時器的應用

五、事件操做

如今要實現這麼一個功能：一個表格，若是把鼠標放在哪一行，哪一行就能高亮顯示。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <table border="1" width="300px">
 9         <tr onmouseover="t1(0);" onmouseout="t2(0)"><td>1</td><td>2</td><td>3</td></tr>
10         <tr onmouseover="t1(1);" onmouseout="t2(1)"><td>1</td><td>2</td><td>3</td></tr>
11         <tr onmouseover="t1(2);" onmouseout="t2(2)"><td>1</td><td>2</td><td>3</td></tr>
12     </table>
13     <script>
14         function t1(n) {
15             var mythrs = document.getElementsByTagName('tr')[n];
16 //            console.log(mythrs);
17             mythrs.style.backgroundColor = "red";
18         }
19           function t2(n) {
20             var mythrs = document.getElementsByTagName('tr')[n];
21             mythrs.style.backgroundColor = "";
22         }
23     </script>
24 </body>
25 </html>

高亮顯示（初級）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <table border="1" width="300px">
 9         <tr><td>1</td><td>2</td><td>3</td></tr>
10         <tr><td>1</td><td>2</td><td>3</td></tr>
11         <tr><td>1</td><td>2</td><td>3</td></tr>
12     </table>
13     <script>
14         var mythrs = document.getElementsByTagName("tr");
15         var len = mythrs.length;
16         for(var i=0; i<len; i++){
17             mythrs[i].onmouseover = function () {
18                 this.style.backgroundColor = "red";
19             }
20              mythrs[i].onmouseout = function () {
21                 this.style.backgroundColor = "";
22             }
23         }
24     </script>
25 </body>
26 </html>

高亮顯示（高級）

六、事件的捕捉與冒泡

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #main{
 8             background-color: red;
 9             width: 300px;
10             height: 400px;
11         }
12          #content{
13             background-color: green;
14             width: 150px;
15             height: 200px;
16         }
17     </style>
18 </head>
19 <body>
20     <div id="main">
21         <div id="content"></div>
22     </div>
23     <script>
24         var mymain = document.getElementById("main");
25         var myconent = document.getElementById("content");
26         //事件捕捉和冒泡的不一樣    false&ture
27         //mymain.addEventListener("click",function(){console.log('aaa')},false);
28         //myconent.addEventListener("click",function(){console.log('bbb')},false);
29         mymain.addEventListener("click",function(){console.log('aaa')},true);
30         myconent.addEventListener("click",function(){console.log('bbb')},true);
31     </script>
32 </body>
33 </html>

addEventListener

5 js語法分析

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <script>
 9         function t1(age) {
10             console.log(age);
11             var age = 27;
12             console.log(age);
13             function age() {
14                 console.log(age);
15             }
16             t1(3)
17         }
18     </script>
19 </body>
20 </html>

js語法分析

這個語法分析的過程後續補上吧。

6 小結

真是各行如隔山，東西太多有時候會形成捨本逐末，隨便找一個方向就扎進去了。其實我只是來學python的，卻不當心看了前端的東西，以爲還挺好玩的。就趟了這灘渾水。

如今真的是一個海量信息的時代，必須具有必定的信息篩選和總結能力，否則就真的是事倍功半！

太多的信息，太多的想法，太少的時間，真的是以爲時間愈來愈不夠用，但仍在揮霍。

7 練習

練習1：搜索框

　　咱們常常會見到在搜索框中出現請輸入字樣，當鼠標點進去以後就不見了。如何實現？

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <input id="i1" onfocus="Focus();"  onblur="Blur();" type="text" value="請輸入關鍵字"/>
 9     <input type="text" placeholder="請輸入關鍵字"/>
10     <script>
11         function Focus(){
12             var tag = document.getElementById('i1');
13             var val = tag.value;
14             if(val == "請輸入關鍵字"){
15                 tag.value = "";
16             }
17         }
18         function Blur(){
19             var tag = document.getElementById('i1');
20             var val = tag.value;
21             if(val.length == 0 ){
22                 tag.value = "請輸入關鍵字";
23             }
24         }
25     </script>
26 </body>
27 </html>

搜索框

練習2：跑馬燈

　　經過js讓文字動起來

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="i1">據說你要好好學習</div>
 9 
10     <script>
11         function func(){
12             //根據ID獲取指定標籤的內容，定義局部變量
13             var tag = document.getElementById('i1');
14             //獲取標籤內部的內容
15             var content = tag.innerText;
16 
17             var f = content.charAt(0);
18             var l = content.substring(1,content.length);
19 
20             var new_content = l + f;
21 
22             tag.innerText = new_content;
23         }
24         setInterval('func()',500);
25     </script>
26 </body>
27 </html>

跑馬燈

練習3：關於編輯器的一些快捷操做

　　命令的輸入以後table鍵試一下

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9 </head>
10 <body>
11 <table>
12     <tr>
13         <td></td>
14         <td></td>
15         <td></td>
16     </tr>
17     <tr>
18         <td></td>
19         <td></td>
20         <td></td>
21     </tr>
22     <tr>
23         <td></td>
24         <td></td>
25         <td></td>
26     </tr>
27     table.test#i1>td*2>td*3>{zhangsan$}
28     c
29     !
30     html:5
31     html:4s
32 </table>
33 </body>
34 </html>