python--前端javaScript
一、javaScript概述
1.1、JavaScript歷史
為了統一三家,ECMA(歐洲計算機制造協會)定義了ECMA-262規範.國際標準化組織及國際電工委員會（ISO/IEC）也采納 ECMAScript 作為標準（ISO/IEC-16262）。從此，Web 瀏覽器就開始努力（雖然有著不同的程度的成功和失敗）將 ECMAScript 作為 JavaScript 實現的基礎。EcmaScript是規範.
1.2、ecmascript
盡管 ECMAScript 是一個重要的標準，但它並不是 JavaScript 唯一的部分，當然，也不是唯一被標準化的部分。實際上，一個完整的 JavaScript 實現是由以下 3 個不同部分組成的：
- 核心（ECMAScript）
- 文檔對象模型（DOM） Document object model (整合js，css，html)
- 瀏覽器對象模型（BOM） Broswer object model（整合js和瀏覽器）
- Javascript 在開發中絕大多數情況是基於對象的.也是面向對象的.
簡單地說，ECMAScript 描述了以下內容：
- 語法
- 類型
- 語句
- 關鍵字
- 保留字
- 運算符
- 對象 (封裝 繼承 多態) 基於對象的語言.使用對象.
二、JavaScript 的基礎
2.1、js的引入方法
1 直接編寫
<script>
alert(‘hello yuan‘)
</script>
2 導入文件
<script src="hello.js"></script>2.2js的變量、常量和標識符2.2.1 JS的變量
| 1 2 3 |
x=5
y=6
z=x+y
|
在代數中，我們使用字母（比如 x）來保存值（比如 5）。通過上面的表達式 z=x+y，我們能夠計算出 z 的值為 11。在 JavaScript 中，這些字母被稱為變量。
那麽如何在JS中定義使用變量呢？
1、聲明變量時不用聲明變量類型. 全都使用var關鍵字;
| 1 |
var a;<br>a=3;
|
2、一行可以聲明多個變量.並且可以是不同類型
| 1 |
var name="yuan", age=20, job="lecturer";
|
3、聲明變量時 可以不用var. 如果不用var 那麽它是全局變量
4、變量命名,首字符只能是字母,下劃線,$美元符 三選一，余下的字符可以是下劃線、美元符號或任何字母或數字字符且區分大小寫，x與X是兩個變量
2.2.2 常量和標識符
常量 ：直接在程序中出現的數據值
標識符：
- 由不以數字開頭的字母、數字、下劃線(_)、美元符號($)組成
- 常用於表示函數、變量等的名稱
- 例如：_abc,$abc,abc,abc123是標識符，而1abc不是
- JavaScript語言中代表特定含義的詞稱為保留字，不允許程序再定義為標識符
2.3 JS的數據類型
number ----- 數值
boolean ----- 布爾值
string ----- 字符串
undefined ----- undefined
null ----- null
2.3.1 數字類型
var num1 =10; //表示整數10
var num2= 1.1;//表示浮點數1.1
var num3=.1;//表示0.1
var num4=10.0;//整數10
var num5 =10.;//小數點後面沒有數字，解析成10
var num6 = 2.123e7;// 等於 2130000 ，科學計數法
不區分整型數值和浮點型數值;
所有數字都采用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個數字組成
2.3.2 字符串類型(string)
是由Unicode字符、數字、標點符號組成的序列；字符串常量首尾由單引號或雙引號括起；JavaScript中沒有字符類型；常用特殊字符在字符串中的表達；
字符串中部分特殊字符必須加上右劃線\；常用的轉義字符 \n:換行 \‘:單引號 \":雙引號 \\:右劃線
2.3.3 布爾類型(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;
}
2.3.4 Null & Undefined類型
Undefined類型
Undefined 類型只有一個值，即 undefined。當聲明的變量未初始化時，該變量的默認值是 undefined。
當函數無明確返回值時，返回的也是值 "undefined";
Null類型
另一種只有一個值的類型是 Null，它只有一個專用值 null，即它的字面量。值 undefined 實際上是從值 null 派生來的，因此 ECMAScript 把它們定義為相等的。
盡管這兩個值相等，但它們的含義不同。undefined 是聲明了變量但未對其初始化時賦予該變量的值，null 則用於表示尚未存在的對象（在討論 typeof 運算符時，簡單地介紹過這一點）。如果函數或方法要返回的是對象，那麽找不到該對象時，返回的通常是 null。
2.4運算符
算術運算符：
+ - * / % ++ --
比較運算符：
> >= < <= != == === !==
邏輯運算符：
&& || ！
賦值運算符：
= += -= *= /=
字符串運算符：
+ 連接，兩邊操作數有一個或兩個是字符串就做連接運算
註意1: 自加自減
假如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);
註意2: 單元運算符
除了可以表示減號還可以表示負號 例如：x=-y
+ 除了可以表示加法運算還可以用於字符串的連接 例如："abc"+"def"="abcdef"
靜態類型語言 一種在編譯期間就確定數據類型的語言。大多數靜態類型語言是通過要求在使用任一變量之前聲明其數據類型來保證這一點的。Java 和 C 是靜態類型語言。 動態類型語言 一種在運行期間才去確定數據類型的語言，與靜態類型相反。VBScript 和 Python 是動態類型的，因為它們確定一個變量的類型是在您第一次給它賦值的時候。 強類型語言 一種總是強制類型定義的語言。Java 和 Python 是強制類型定義的。您有一個整數，如果不明確地進行轉換 ，不能將把它當成一個字符串去應用。 弱類型語言 一種類型可以被忽略的語言，與強類型相反。JS 是弱類型的。在JS中，可以將字符串 ‘12‘ 和整數 3 進行連接得到字符串‘123‘，然後可以把它看成整數 123 ，所有這些都不需要任何的顯示轉換。 所以說 Python 既是動態類型語言 (因為它不使用顯示數據類型聲明)，又是強類型語言 (因為只要一個變量獲得了一個數據類型，它實際上就一直是這個類型了)。
2.4.2 比較運算符
> >= < <= != == === !==
> >= < <= != == === !== 用於控制語句時： 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");
2.5 流程控制
- 順序結構(從上向下順序執行)
- 分支結構
- 循環結構
順序結構
<script> console.log(“星期一”); console.log(“星期二”); console.log(“星期三”); </script>
分支結構
if-else結構：
if (表達式){
語句１;
......
} else{
語句２;
.....
}
功能說明：如果表達式的值為true則執行語句1,否則執行語句2
if-elif－else結構：
if (表達式1) {
語句1;
}else if (表達式2){
語句2;
}else if (表達式3){
語句3;
} else{
語句4;
}
switch-case結構
switch基本格式
switch (表達式) {
case 值1:語句1;break;
case 值2:語句2;break;
case 值3:語句3;break;
default:語句4;
}
switch比else if結構更加簡潔清晰，使程序可讀性更強,效率更高。
循環結構
for循環：
語法規則：
for(初始表達式;條件表達式;自增或自減)
{
執行語句
……
}
功能說明：實現條件循環，當條件成立時，執行語句1，否則跳出循環體
while循環：
語法規則：
while (條件){ 語句1； ... }
功能說明：運行功能和for類似，當條件成立循環執行語句花括號{}內的語句，否則跳出循環；同樣支持continue與break語句。
var i=1;
while (i<=7) {
document.write("<H"+i+">hello</H "+i+"> ");
document.write("<br>");
i++;
}
//循環輸出H1到H7的字體大小
異常處理
try {
//這段代碼從上往下運行，其中任何一個語句拋出異常該代碼塊就結束運行
}
catch (e) {
// 如果try代碼塊中拋出了異常，catch代碼塊中的代碼就會被執行。
//e是一個局部變量，用來指向Error對象或者其他拋出的對象
}
finally {
//無論try中代碼是否有異常拋出（甚至是try代碼塊中有return語句），finally代碼塊中始終會被執行。
}
註：主動拋出異常 throw Error(‘xxxx‘)
三、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>
字符串對象創建
字符串創建(兩種方式)
① 變量 = “字符串”
② 字串對象名稱 = new String (字符串)
| 1 2 |
var str1="hello world";
var str1= new String("hello word");
|
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) －－－－ 拼接字符串
創建數組的三種方式：
創建方式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]="星期六";
創建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( ));//毫秒並不直接顯示
date對象的方法-----獲取日期和時間
獲取日期和時間 getDate() 獲取日 getDay () 獲取星期 getMonth () 獲取月（0-11） getFullYear () 獲取完整年份 getYear () 獲取年 getHours () 獲取小時 getMinutes () 獲取分鐘 getSeconds () 獲取秒 getMilliseconds () 獲取毫秒 getTime () 返回累計毫秒數(從1970/1/1午夜)
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) 返回角的正切。
function對象
函數的定義
function 函數名 (參數){?<br> 函數體;
return 返回值;
}
功能說明：
可以使用變量、常量或表達式作為函數調用的參數
函數由關鍵字function定義
函數名的定義規則與標識符一致，大小寫是敏感的
返回值必須使用return
Function 類可以表示開發者定義的任何函數。
function func1(name){
alert(‘hello‘+name);
return 8
}
ret=func1("yuan");
alert(ret);
var func2=new Function("name","alert(\"hello\"+name);")
func2("egon")
註意：js的函數加載執行與python不同，它是整體加載完才會執行，所以執行函數放在函數聲明上面或下面都可以：
function 對象的屬性
函數屬於引用類型，所以它們也有屬性和方法。
比如，ECMAScript 定義的屬性 length 聲明了函數期望的參數個數。
function func1(a,b){
alert(a+b);
}
func1(1,2); //3
func1(1,2,3);//3
func1(1); //NaN
func1(); //NaN
//只要函數名寫對即可,參數怎麽填都不報錯
四、BOM對象
window對象
所有瀏覽器都支持 window 對象。
概念上講.一個html文檔對應一個window對象.
功能上講: 控制瀏覽器窗口的.
使用上講: window對象不需要創建對象,直接使用即可
alert() 顯示帶有一段消息和一個確認按鈕的警告框。 confirm() 顯示帶有一段消息以及確認按鈕和取消按鈕的對話框。 prompt() 顯示可提示用戶輸入的對話框。 open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。 close() 關閉瀏覽器窗口。
setInterval() 按照指定的周期（以毫秒計）來調用函數或計算表達式。 clearInterval() 取消由 setInterval() 設置的 timeout。 setTimeout() 在指定的毫秒數後調用函數或計算表達式。 clearTimeout() 取消由 setTimeout() 方法設置的 timeout。 scrollTo() 把內容滾動到指定的坐標。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調用或窗口被關閉。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的參數。
五、DOM對象
什麽是HTML DOM
- HTML Document Object Model（文檔對象模型）
- HTML DOM 定義了訪問和操作HTML文檔的標準方法
- HTML DOM 把 HTML 文檔呈現為帶有元素、屬性和文本的樹結構（節點樹)
節點類型
HTML 文檔中的每個成分都是一個節點。
DOM 是這樣規定的：
整個文檔是一個文檔節點
每個 HTML 標簽是一個元素節點
包含在 HTML 元素中的文本是文本節點
每一個 HTML 屬性是一個屬性節點
其中，document與element節點是重點。
節點關系
節點樹中的節點彼此擁有層級關系。
父(parent),子(child)和同胞(sibling)等術語用於描述這些關系。父節點擁有子節點。同級的子節點被稱為同胞（兄弟或姐妹）。
- 在節點樹中，頂端節點被稱為根（root）
- 每個節點都有父節點、除了根（它沒有父節點）
- 一個節點可擁有任意數量的子
- 同胞是擁有相同父節點的節點
下面的圖片展示了節點樹的一部分，以及節點之間的關系：
訪問 HTML 元素（節點）,訪問 HTML 元素等同於訪問節點,我們能夠以不同的方式來訪問 HTML 元素。
節點查找
直接查找
document.getElementById(“idname”)
document.getElementsByTagName(“tagname”)
document.getElementsByName(“name”)
document.getElementsByClassName(“name”)
局部查找
<div id="div1"> <div class="div2">i am div2</div> <div name="yuan">i am div2</div> <div id="div3">i am div2</div> <p>hello p</p> </div> <script> var div1=document.getElementById("div1"); ////支持; // var ele= div1.getElementsByTagName("p"); // alert(ele.length); ////支持 // var ele2=div1.getElementsByClassName("div2"); // alert(ele2.length); ////不支持 // var ele3=div1.getElementById("div3"); // alert(ele3.length); ////不支持 // var ele4=div1.getElementsByName("yuan"); // alert(ele4.length) </script>
註意：設計到尋找元素，註意<script>標簽的位置！
導航節點屬性
parentElement // 父節點標簽元素
children // 所有子標簽
firstElementChild // 第一個子標簽元素
lastElementChild // 最後一個子標簽元素
nextElementtSibling // 下一個兄弟標簽元素
previousElementSibling // 上一個兄弟標簽元素
註意，js中沒有辦法找到所有的兄弟標簽！
節點操作
創建節點
createElement(標簽名) ：創建一個指定名稱的元素。
添加節點：
追加一個子節點（作為最後的子節點）
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
DOM Event 事件
onclick 當用戶點擊某個對象時調用的事件句柄。 ondblclick 當用戶雙擊某個對象時調用的事件句柄。 onfocus 元素獲得焦點。 練習：輸入框 onblur 元素失去焦點。 應用場景：用於表單驗證,用戶離開某個輸入框時,代表已經輸入完了,我們可以對它進行驗證. onchange 域的內容被改變。 應用場景：通常用於表單元素,當元素內容被改變時觸發.（三級聯動） onkeydown 某個鍵盤按鍵被按下。 應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交. onkeypress 某個鍵盤按鍵被按下並松開。 onkeyup 某個鍵盤按鍵被松開。
onload 一張頁面或一幅圖像完成加載。
onmousedown 鼠標按鈕被按下。 onmousemove 鼠標被移動。 onmouseout 鼠標從某元素移開。 onmouseover 鼠標移到某元素之上。 onmouseleave 鼠標從元素離開 onselect 文本被選中。 onsubmit 確認按鈕被點擊。
綁定事件方式
<div id="div" onclick="foo(this)">點我呀</div>
<script>
function foo(self){ // 形參不能是this;
console.log("點你大爺!");
console.log(self);
}
</script>
事件介紹
1、onload：
onload 屬性開發中 只給 body元素加.這個屬性的觸發 標誌著 頁面內容被加載完成.應用場景: 當有些事情我們希望頁面加載完立刻執行,那麽可以使用該事件屬性.
2、onsubmit：
當表單在提交時觸發. 該屬性也只能給form元素使用.應用場景: 在表單提交前驗證用戶輸入是否正確.如果驗證失敗.在該方法中我們應該阻止表單的提交
onkeydown:
Event 對象：Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這裏就時KeyCode.
js擴展
js的作用域
onkeydown:
Event 對象：Event 對象代表事件的狀態，比如事件在其中發生的元素、鍵盤按鍵的狀態、鼠標的位置、鼠標按鈕的狀態。
事件通常與函數結合使用，函數不會在事件發生前被執行！event對象在事件發生時系統已經創建好了,並且會在事件函數被調用時傳給事件函數.我們獲得僅僅需要接收一下即可.比如onkeydown,我們想知道哪個鍵被按下了，需要問下event對象的屬性，這裏就時KeyCode.
1、全局作用域
在代碼中任何地方都能訪問到的對象擁有全局作用域，一般來說一下幾種情形擁有全局作用域：
(1)最外層函數和在最外層函數外面定義的變量擁有全局作用域
var name="yuan";
function foo(){
var age=23;
function inner(){
console.log(age);
}
inner();
}
console.log(name); // yuan
//console.log(age); // Uncaught ReferenceError: age is not defined
foo(); // 23
inner(); // Uncaught ReferenceError: inner is not defined
(2)所有末定義直接賦值的變量自動聲明為擁有全局作用域，
例如：
var name="yuan";
function foo(){
age=23;
var sex="male"
}
foo();
console.log(age); // 23
console.log(sex); // sex is not defined
變量blog擁有全局作用域，而sex在函數外部無法訪問到。
(3)所有window對象的屬性擁有全局作用域
一般情況下，window對象的內置屬性都都擁有全局作用域，例如window.alert()、window.location、window.top等等。
2、局部作用域
和全局作用域相反，局部作用域一般只在固定的代碼片段內可訪問到，最常見的例如函數內部，所有在一些地方也會看到有人把這種作用域成為函數作用域.
如示例1中的age與inner都只有局部作用域。（js中if、for沒有自己的作用域
python--前端javaScript