Python自動化開發課堂筆記【Day14】 - Java Script

時間 2019-12-05

標籤 python 自動化開發課堂筆記 Day14 java script 欄目 Python 简体版

原文原文鏈接

JavaScript的基礎javascript

1. JS的引入方式css

1 直接編寫
    <script>
        alert('hello yuan')
    </script>
2 導入文件
    <script src="hello.js"></script>

2. JS的變量、常量和標識符html

　　a. JS的變量java

　　　　如何在JS中定義使用變量node

1、聲明變量時不用聲明變量類型. 全都使用var關鍵字;
　　var a;<br>a=3;

2、一行能夠聲明多個變量.而且能夠是不一樣類型
　　var name="yuan", age=20, job="lecturer";

3、聲明變量時 能夠不用var. 若是不用var 那麼它是全局變量

四、變量命名,首字符只能是字母,下劃線,$美圓符 三選一，餘下的字符能夠是下劃線、美圓符號或任何字母或數字字符且區分大小寫，x與X是兩個變量

　　b. 常量和標識符數組

常量：直接在程序中出現的數據值瀏覽器

標識符：app

1. 由不以數字開頭的字母、數字、下劃線(_)、美圓符號($)組成
2. 經常使用於表示函數、變量等的名稱
3. 例如：_abc,$abc,abc,abc123是標識符，而1abc不是
4. JavaScript語言中表明特定含義的詞稱爲保留字，不容許程序再定義爲標識符

3. JS的數據類型dom

number     -----  數值
boolean     -----  布爾值
string        -----  字符串
undefined  -----  undefined
null           -----  null

　　a. 數字類型(number)函數

- 不區分整型數值和浮點型數值;
- 全部數字都採用64位浮點格式存儲，至關於Java和C語言中的double格式
- 能表示的最大值是±1.7976931348623157 x 10308
- 能表示的最小值是±5 x 10 -324

整數：
在JavaScript中10進制的整數由數字的序列組成
精確表達的範圍是 -9007199254740992 (-253) 到 9007199254740992 (253)
超出範圍的整數，精確度將受影響
浮點數：
使用小數點記錄數據
例如：3.4，5.6
使用指數記錄數據
例如：4.3e23 = 4.3 x 1023

16進制和8進制數的表達:
16進制數據前面加上0x，八進制前面加0;16進制數是由0-9,A-F等16個字符組成;8進制數由0-7等8個數字組成

b.字符串類型(string)

是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有字符類型；經常使用特殊字符在字符串中的表達；
字符串中部分特殊字符必須加上右劃線\；經常使用的轉義字符 \n:換行 \':單引號 \":雙引號 \\:右劃線.

c.布爾類型(boolean)

　　Boolean類型僅有兩個值：true和false，也表明1和0，實際運算中true=1,false=0
　　布爾值也能夠看做on/off、yes/no、1/0對應true/false
　　Boolean值主要用於JavaScript的控制語句，例如：

if (x==1){
      y=y+1;
}else{
      y=y-1;
      }

　　d.Null & Undefined類型

　　另外一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 其實是從值 null 派生來的，所以 ECMAScript 把它們定義爲相等的。

　　儘管這兩個值相等，但它們的含義不一樣。undefined 是聲明瞭變量但未對其初始化時賦予該變量的值，null 則用於表示還沒有存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。若是函數或方法要返回的是對象，那麼找不到該對象時，返回的一般是 null。

4. 運算符

算術運算符：
    +   -    *    /     %       ++        -- 

比較運算符：
    >   >=   <    <=    !=    ==    ===   !==

邏輯運算符：
     &&   ||   ！

賦值運算符：
    =  +=   -=  *=   /=

字符串運算符：
    +  鏈接，兩邊操做數有一個或兩個是字符串就作鏈接運算

　　a.算術運算符

自加自減

假如x=2，那麼x++表達式執行後的值爲3，x--表達式執行後的值爲1；i++至關於i=i+1，i--至關於i=i-1；
遞增和遞減運算符能夠放在變量前也能夠放在變量後：--i

var i=10;
console.log(i++);
console.log(i);
console.log(++i);
console.log(i);
console.log(i--);
console.log(--i);

　　單元運算符

- 除了能夠表示減號還能夠表示負號  例如：x=-y
 
+ 除了能夠表示加法運算還能夠用於字符串的鏈接  例如："abc"+"def"="abcdef"

　　NaN

var d="yuan";
d=+d;
alert(d);//NaN:屬於Number類型的一個特殊值,當遇到將字符串轉成數字無效時,就會獲得一個NaN數據
alert(typeof(d));//Number

//NaN特色:
    
var n=NaN;
    
alert(n>3);
alert(n<3);
alert(n==3);
alert(n==NaN);
    
alert(n!=NaN);//NaN參與的全部的運算都是false,除了!=

　　b.比較運算符

>   >=   <    <=    !=    ==    ===   !==

用於控制語句時：

if (2>1){       //  3  0  false null undefined ［］
            console.log("條件成立!")
        }

等號和非等號的同類運算符是全等號和非全等號。這兩個運算符所作的與等號和非等號相同，只是它們在檢查相等性前，不執行類型轉換。

console.log(2==2);
console.log(2=="2");
console.log(2==="2");
console.log(2!=="2");

　　c.邏輯運算符

if (2>1 && [1,2]){
    console.log("條件與")
}

// 思考返回內容?
console.log(1 && 3);
console.log(0 && 3);
console.log(0 || 3);
console.log(2 || 3);

5.流程控制

順序結構(從上向下順序執行)
分支結構
循環結構

　　a.順序結構

<script>
        console.log(「星期一」);
        console.log(「星期二」);
        console.log(「星期三」);
</script>

　　b.分支結構

if-else結構：

if (表達式){
   語句１;
   ......
   } else{
   語句２;
   .....
   }

var x= (new Date()).getDay();
        //獲取今天的星期值，0爲星期天
        var y;

        if ( (x==6) || (x==0) ) {
            y="週末";
        }else{
            y="工做日";
            }
        
        console.log(y);

        /*等價於

        y="工做日";
        if ( (x==6) || (x==0) ) {
        y="週末";
        }
        console.log(y);  */

if-elif－else結構： if (表達式1) {
    語句1;
}else if (表達式2){
    語句2;
}else if (表達式3){
    語句3;
} else{
    語句4;
}

示例

var score=window.prompt("您的分數:");

if (score>90){
    ret="優秀";
    }else if (score>80){
    ret="良";
    }else if (score>60){
    ret="及格";
    }else {
    ret = "不及格";

}
alert(ret);

switch-case結構

switch基本格式
switch (表達式) {
    case 值1:語句1;break;
    case 值2:語句2;break;
    case 值3:語句3;break;
    default:語句4;
}

示例

switch(x){
    case 1:y="星期一";    break;
    case 2:y="星期二";    break;
    case 3:y="星期三";    break;
    case 4:y="星期四";    break;
    case 5:y="星期五";    break;
    case 6:y="星期六";    break;
    case 7:y="星期日";    break;
    default: y="未定義";
}

JavaScript的對象

在JavaScript中除了null和undefined之外其餘的數據類型都被定義成了對象，也能夠用建立對象的方法定義變量，String、Math、Array、Date、RegExp都是JavaScript中重要的內置對象，在JavaScript程序大多數功能都是基於對象實現的。

<script language="javascript">
var aa=Number.MAX_VALUE; 
//利用數字對象獲取可表示最大數
var bb=new String("hello JavaScript"); 
//建立字符串對象
var cc=new Date();
//建立日期對象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//數組對象
</script>

1. String對象

　　a. 字符串建立(兩種方式)
　　1. 變量 = 「字符串」
　　2. 字串對象名稱 = new String (字符串)

　　b. 字符串對象的屬性和函數

x.length         －－－－獲取字符串的長度

 x.toLowerCase()        －－－－轉爲小寫
 x.toUpperCase()        －－－－轉爲大寫
 x.trim()               －－－－去除字符串兩邊空格       


－－－－字符串查詢方法

x.charAt(index)         －－－－str1.charAt(index);－－－－獲取指定位置字符，其中index爲要獲取的字符索引

x.indexOf(findstr,index)－－－－查詢字符串位置
x.lastIndexOf(findstr)  

x.match(regexp)         －－－－match返回匹配字符串的數組，若是沒有匹配則返回null
x.search(regexp)        －－－－search返回匹配字符串的首字符位置索引

                        示例：
                        var str1="welcome to the world of JS!";
                        var str2=str1.match("world");
                        var str3=str1.search("world");
                        alert(str2[0]);  // 結果爲"world"
                        alert(str3);     // 結果爲15
                        

－－－－子字符串處理方法

x.substr(start, length) －－－－start表示開始位置，length表示截取長度
x.substring(start, end) －－－－end是結束位置

x.slice(start, end)     －－－－切片操做字符串
                        示例：
                            var str1="abcdefgh";
                            var str2=str1.slice(2,4);
                            var str3=str1.slice(4);
                            var str4=str1.slice(2,-1);
                            var str5=str1.slice(-3,-1);

                            alert(str2); //結果爲"cd"
                            
                            alert(str3); //結果爲"efgh"
                            
                            alert(str4); //結果爲"cdefg"
                            
                            alert(str5); //結果爲"fg"

x.replace(findstr,tostr) －－－－    字符串替換

x.split();                 －－－－分割字符串
                                 var str1="一,二,三,四,五,六,日"; 
                                var strArray=str1.split(",");
                                alert(strArray[1]);//結果爲"二"
                                
x.concat(addstr)         －－－－    拼接字符串

2. Array對象

　　a. 數組建立

建立數組的三種方式：

建立方式1:
var arrname = [元素0,元素1,….];          // var arr=[1,2,3];

建立方式2:
var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);

建立方式3:
var arrname = new Array(長度); //  初始化數組對象:
var cnweek=new Array(7);
cnweek[0]="星期日";
cnweek[1]="星期一";
...
 cnweek[6]="星期六";

　　b.數組對象的屬性和方法

join方法：

x.join(bystr)       －－－－將數組元素拼接成字符串

                            var arr1=[1, 2, 3, 4, 5, 6, 7];
                var str1=arr1.join("-");
                alert(str1);  //結果爲"1-2-3-4-5-6-7" concat方法：

x.concat(value,...)    －－－－ 
                   var a = [1,2,3];
                  var b=a.concat(4,5) ;
                  alert(a.toString());  //返回結果爲1,2,3            
                  alert(b.toString());  //返回結果爲1,2,3,4,5

數組排序-reverse sort：

//x.reverse()
//x.sort()

var arr1=[32, 12, 111, 444];
//var arr1=["a","d","f","c"];

arr1.reverse(); //顛倒數組元素
alert(arr1.toString());
//結果爲444,111,12,32

arr1.sort();    //排序數組元素
alert(arr1.toString());
//結果爲111,12,32,444

//------------------------------
arr=[1,5,2,100];

//arr.sort();
//alert(arr);
//若是就想按着數字比較呢?

function intSort(a,b){
    if (a>b){
        return 1;//-1
    }
    else if(a<b){
        return -1;//1
    }
    else {
        return 0
    }
}

arr.sort(intSort);

alert(arr);

function IntSort(a,b){
    return a-b;
}

數組切片操做： //x.slice(start, end)
//
//使用註解
//
//x表明數組對象
//start表示開始位置索引
//end是結束位置下一數組元素索引編號
//第一個數組元素索引爲0
//start、end可爲負數，-1表明最後一個數組元素
//end省略則至關於從start位置截取之後全部數組元素

var arr1=['a','b','c','d','e','f','g','h'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);

alert(arr2.toString());
//結果爲"c,d" 
alert(arr3.toString());
//結果爲"e,f,g,h"
alert(arr4.toString());
//結果爲"c,d,e,f,g"

刪除子數組：

//x. splice(start, deleteCount, value, ...)

//使用註解

//x表明數組對象
//splice的主要用途是對數組指定位置進行刪除和插入
//start表示開始位置索引
//deleteCount刪除數組元素的個數
//value表示在刪除位置插入的數組元素
//value參數能夠省略       
        
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);

alert(a.toString());//a變爲 [1,4,5,6,7,8]

a.splice(1,1);

alert(a.toString());//a變爲[1,5,6,7,8]

a.splice(1,0,2,3);

alert(a.toString());//a變爲[1,2,3,5,6,7,8]

數組的push和pop： //push pop這兩個方法模擬的是一個棧操做

//x.push(value, ...)  壓棧
//x.pop()             彈棧      
//使用註解
//
//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//push是將value值添加到數組x的結尾
//pop是將數組x的最後一個元素刪除


var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//結果爲"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//結果爲"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//結果爲"1,2,3,4,5"

數組的shift和unshift：

//x.unshift(value,...)
//x.shift()
//使用註解

//x表明數組對象
//value能夠爲字符串、數字、數組等任何值
//unshift是將value值插入到數組x的開始
//shift是將數組x的第一個元素刪除

var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1);  //結果爲"4,5,1,2,3"

arr1. unshift([6,7]);
alert(arr1);  //結果爲"6,7,4,5,1,2,3"

arr1.shift();
alert(arr1);  //結果爲"4,5,1,2,3"

3.Date對象

　　a. 建立Date對象

//方法1：不指定參數
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：參數爲日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：參數爲毫秒數
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());

//方法4：參數爲年月日小時分鐘秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒並不直接顯示

　　b. Date對象的方法—獲取日期和時間

獲取日期和時間
getDate()                 獲取日
getDay ()                 獲取星期
getMonth ()               獲取月（0-11）
getFullYear ()            獲取完全年份
getYear ()                獲取年
getHours ()               獲取小時
getMinutes ()             獲取分鐘
getSeconds ()             獲取秒
getMilliseconds ()        獲取毫秒
getTime ()                返回累計毫秒數(從1970/1/1午夜)

4. Math對象

//該對象中的屬性方法 和數學有關.
   

abs(x)    返回數的絕對值。
exp(x)    返回 e 的指數。
floor(x)對數進行下舍入。
log(x)    返回數的天然對數（底爲e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次冪。
random()    返回 0 ~ 1 之間的隨機數。
round(x)    把數四捨五入爲最接近的整數。
sin(x)    返回數的正弦。
sqrt(x)    返回數的平方根。
tan(x)    返回角的正切。

//方法練習:
        //alert(Math.random()); // 得到隨機數 0~1 不包括1.
        //alert(Math.round(1.5)); // 四捨五入
        //練習：獲取1-100的隨機整數，包括1和100
             //var num=Math.random();
             //num=num*10;
             //num=Math.round(num);
             //alert(num)
        //============max  min=========================
        /* alert(Math.max(1,2));// 2
        alert(Math.min(1,2));// 1 */
        //-------------pow--------------------------------
        alert(Math.pow(2,4));// pow 計算參數1 的參數2 次方.

5. Function 對象

　　a. 函數的定義

function 函數名 (參數){ <br>    函數體;
    return 返回值;
}

功能說明：

可使用變量、常量或表達式做爲函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類能夠表示開發者定義的任何函數。

BOM對象

1. window對象

全部瀏覽器都支持 window 對象。概念上講.一個html文檔對應一個window對象.功能上講: 控制瀏覽器窗口的.使用上講: window對象不須要建立對象,直接使用便可.

2. Window 對象方法

alert()            顯示帶有一段消息和一個確認按鈕的警告框。
confirm()          顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。
prompt()           顯示可提示用戶輸入的對話框。

open()             打開一個新的瀏覽器窗口或查找一個已命名的窗口。
close()            關閉瀏覽器窗口。

setInterval()      按照指定的週期（以毫秒計）來調用函數或計算表達式。
clearInterval()    取消由 setInterval() 設置的 timeout。
setTimeout()       在指定的毫秒數後調用函數或計算表達式。
clearTimeout()     取消由 setTimeout() 方法設置的 timeout。
scrollTo()         把內容滾動到指定的座標。

DOM對象

1.什麼是HTML DOM

HTML Document Object Model（文檔對象模型）
HTML DOM 定義了訪問和操做HTML文檔的標準方法
HTML DOM 把 HTML 文檔呈現爲帶有元素、屬性和文本的樹結構（節點樹)

2.DOM節點

　　a.節點類型

HTML 文檔中的每一個成分都是一個節點。

DOM 是這樣規定的：
   整個文檔是一個文檔節點
   每一個 HTML 標籤是一個元素節點
   包含在 HTML 元素中的文本是文本節點
   每個 HTML 屬性是一個屬性節點

　　b.節點關係

　　節點樹中的節點彼此擁有層級關係。
　　父(parent),子(child)和同胞(sibling)等術語用於描述這些關係。父節點擁有子節點。同級的子節點被稱爲同胞（兄弟或姐妹）。

在節點樹中，頂端節點被稱爲根（root）
每一個節點都有父節點、除了根（它沒有父節點）
一個節點可擁有任意數量的子
同胞是擁有相同父節點的節點

　　c.節點查找

document.getElementById(「idname」)
document.getElementsByTagName(「tagname」)
document.getElementsByName(「name」)
document.getElementsByClassName(「name」)

　　d. 導航節點屬性

parentElement           // 父節點標籤元素

children                // 全部子標籤

firstElementChild       // 第一個子標籤元素

lastElementChild        // 最後一個子標籤元素

nextElementtSibling     // 下一個兄弟標籤元素

previousElementSibling  // 上一個兄弟標籤元素

　　e. 節點操做

建立節點：

createElement(標籤名) ：建立一個指定名稱的元素。
例：var  tag=document.createElement(「input")
            tag.setAttribute('type','text');

添加節點：

追加一個子節點（做爲最後的子節點）
somenode.appendChild(newnode)
 
把增長的節點放到某個節點的前邊
somenode.insertBefore(newnode,某個節點);
刪除節點：

removeChild()：得到要刪除的元素，經過父元素調用刪除
替換節點：

somenode.replaceChild(newnode, 某個節點);
節點屬性操做：

1、獲取文本節點的值：innerText    innerHTML

2、attribute操做

     elementNode.setAttribute(name,value)    

     elementNode.getAttribute(屬性名)        <-------------->elementNode.屬性名(DHTML)

     elementNode.removeAttribute(「屬性名」);
3、value獲取當前選中的value值
        1.input   
        2.select （selectedIndex）
        3.textarea  
4、innerHTML 給節點添加html代碼：
        該方法不是w3c的標準，可是主流瀏覽器支持    
        tag.innerHTML = 「<p>要顯示內容</p>」;

5、關於class的操做：

elementNode.className
elementNode.classList.add
elementNode.classList.remove
 6、改變css樣式：

<p id="p2">Hello world!</p>
document.getElementById("p2").style.color="blue";
                             .style.fontSize=48px

3.DOM Event(事件)

　　a.事件類型

onclick        當用戶點擊某個對象時調用的事件句柄。
ondblclick     當用戶雙擊某個對象時調用的事件句柄。

onfocus        元素得到焦點。               練習：輸入框
onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.
onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（三級聯動）

onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.
onkeypress     某個鍵盤按鍵被按下並鬆開。
onkeyup        某個鍵盤按鍵被鬆開。

onload         一張頁面或一幅圖像完成加載。

onmousedown    鼠標按鈕被按下。
onmousemove    鼠標被移動。
onmouseout     鼠標從某元素移開。
onmouseover    鼠標移到某元素之上。
onmouseleave   鼠標從元素離開

onselect       文本被選中。
onsubmit       確認按鈕被點擊。

　　b.綁定事件方式

方式1:

<div id="div" onclick="foo(this)">點我呀</div>

<script>
    function foo(self){           // 形參不能是this;
        console.log("點你大爺!");
        console.log(self);   
    }
</script>


方式2:

<p id="abc">試一試!</p>

<script>

    var ele=document.getElementById("abc");

    ele.onclick=function(){
        console.log("ok");
        console.log(this);    // this直接用
    };

</script>