Python-Javascript

JavaScript

1. JavaScript是什麼？

一門編程語言，腳本語言。運行在瀏覽器上的腳本語言。
node.js 能夠寫後端。

2. JavaScript都學哪些內容？

1. 語法基礎
2. BOM --> 用JS代碼操做瀏覽器
3. DOM --> 用JS代碼操做HTML文檔

3. JavaScript的運行方式？

1. 導入方式：
1. 在HTML文件中寫一個script標籤，在script標籤中直接寫JS代碼
2. 將JS代碼寫在一個單獨的JS文件中，而後經過script標籤的src屬性導入
2. 能夠直接在瀏覽器的console窗口直接運行JS代碼
3. node.js 運行JS文件 *（如今瞭解便可）

4. JavaScript學什麼？

0. 語法規則

註釋！！！
1. 單行註釋 //
2. 多行註釋 /* 多行註釋 */

1. 變量

1. 變量名： 字母、數字、下劃線、$
2. 聲明變量: var 、let
3. 聲明經常使用：const

2. 數據類型

1. 字符串
字符串的經常使用屬性和方法
2. 數值
1. JS中不區分整型和浮點型，都叫數值類型
2. NaN 表示一個值不是數值

3. 將字符串類型的數據轉換成數值
parseInt("100")
parseFloat("11.11")
3. 布爾值
4. Null
手動將變量的值清空的時候
5. Undefined
變量光聲明可是沒有賦值的時候
6. Object
1. 數組
TODO: sort()排序
2. 數組的內置屬性和方法

判斷一個變量的類型：
typeof null --> object
typeof [11,22] --> Object
typeof undefined --> undefined

3. 運算符

1. 算數運算符
2. 邏輯運算符 && || ！
3. 賦值運算符 = += -= *= /=
4. 比較運算符
1. 弱等於 "5" == 5 --> true
2. 強等於 "5" === 5 --> false

4. 控制語句

1. 條件判斷
1. if ... else ...
2. if ... else if ... else ...
3. switch (須要判斷的值){
case "A"：
...;
break;
case 2:
}
2. 循環
1. for (var i=0;i<5;i++){
...
}
2. for (1===1;;){
...
}
3. while (條件){
...
}
3. 三元運算
1. 一個條件的
a > b ? 100:10 --> a>b的話，冒號前面的值，不然冒號後面的值
2. 兩個條件的
a > b ？100:(c===1)? 200:10

5.函數

1. 函數的定義

1. 普通函數 function f1(){...}
2. var f1 = function(){...}
3. 帶參數的函數function f1(a,b){...}
4. 帶返回值的函數function f1(a,b){
return a+b;
return a, b 只能返回一個值
return [a,b]
}
5. 自執行函數(function(a,b){
return a+b
})(10,20)
6. 箭頭函數
var f = a=>a+10;
function f(a){
return a+10
}
7 匿名函數

2. JS函數的坑

1. 默認的返回值是undefined
2. 調用函數時傳參隨意
3. 只能有一個返回值

6. JS對象

1. 自定義對象 --> 有點相似Python中的字典

1. key只能是字符串
2. 根據key取值有兩種方式
var a = {"name": "Egon", "age": 18}
- a.name
- a["name"]
3. 自定義對象的遍歷
for (let key in a):
console.log(key, a[key])

2. 內置對象 類比記憶 Python中的內置模塊

1. Date
var d1 = new Date();
1. 獲取星期: d1.getDay()
2. 獲取月份：d1.getMonth() 取值範圍：0~11

var d1 = new Date();
d1.toLocaleString()
"2018/6/1 上午9:10:34"
d1.toUTCString()
"Fri, 01 Jun 2018 01:10:34 GMT
2. JSON
1. JS對象轉換成JSON字符串
var a = {"name": "Egon", "age": 18}
var ret = JSON.stringify(a)

2. JSON字符串 --> JS對象
var s = '{"name": "Egon", "age": 18}'
var ret = JSON.parse(s)

3. RegExp

1. 兩種建立方式
1. var reg1 = new RegExp('[a-zA-Z]{5,11}');
2. var reg2 = /[a-zA-Z]{5,11}/;
2. 幾種常見用法
reg2.test("字符串") --> true/false
"Egon dsb e".replace("e", "哈哈")
"Egon dsb 哈哈"
"Egon dsb e".replace(/e/, "哈哈")
"Egon dsb 哈哈"
"Egon dsb e".replace(/e/i, "哈哈")
"哈哈gon dsb e"
"Egon dsb e".replace(/e/gi, "哈哈")
"哈哈gon dsb 哈哈"
3. 三個坑
1. 正則表達式中間不要加空格！！！
2. 謹慎使用全局匹配模式
var reg3 = /[a-zA-Z]{5,11}/g;
reg3.test("egondsb")
true
reg3.lastIndex
7
reg3.test("111111egondsb")
true
3. test()不傳參數的時候會默認傳undefined,內部將undefined當成"undefined"去處理
var reg3 = /[a-zA-Z]{5,11}/;
reg3.test()
true
reg3.test(undefined)
true
reg3.test("undefined")
true

4. Math

1. Math.random() --> 返回0到1的隨機數
2. Math.floor() --> 向下取整
3. Math.round() --> 四捨五入
4. Math.pow(2,10)

7. BOM （Browser Object Model）

經過BOM，咱們的JS就可以操做瀏覽器

1. location對象

location.href --> 獲取當前訪問的URL
location.href="具體的URL"--> 經過JS實現跳轉
location.reload() --> 從新加載當前頁面

2. alert()
3. 計時相關

1. var t = setTimeout("要作的事兒", 毫秒數)
在指定的毫秒數以後作什麼事兒！
clearTimeout(t) --> 清除
2. var t = setInterval("要作的事兒", 毫秒數)
每隔指定的毫秒數就作一次指定的事兒
clearInterval(t) --> 清除

8. DOM (Document Object Model)

JS經過DOM操做HTML

　　1. 改標籤(標籤的內容)
　　2. 改標籤的屬性
　　3. 改樣式
　　4. 事件相關

操做標籤

1. JS找標籤

 

 

2. 建立標籤

語法:
document.createElement("標籤名") *****

3. 添加標籤

1. 在內部最後添加
　　父標籤.appendChild(新建立的標籤)
2. 在內部指定標籤前面添加
　　父標籤.insertBefore(新建立的標籤,指定標籤)

4. 刪除標籤

1. 從父標籤裏面刪除指定的標籤
父標籤.removeChild(指定的標籤)

5. 替換

1. 在父標籤裏面用新建立的標籤替換指定標籤
父標籤.replaceChild(新建立的標籤,指定的標籤)

 

 操做標籤的屬性

1. 經常使用的屬性 *****
　　1. innerHTML --> 所有(子標籤及子標籤的文本內容)
　　2. innerText --> 標籤(子標籤)的文本內容

2. 標籤的屬性
　　1. .setAttribute("age","18") --> 設置屬性
　　2. .getAttribute("age") --> 獲取屬性的值
　　3. .removeAttribute("age") --> 刪除指定的屬性

對於標籤默認的屬性
　　1. a標籤.href/img標籤.src
　　2. a標籤.href="http://www.sogo.com"/img標籤.src="..."

 獲取值(input/select/textarea)

input標籤.value()
select標籤.value()
textarea標籤.value()

 操做標籤的樣式

1. 經過class名去改變樣式
　　1. 獲取標籤全部樣式類
　　　　1. .className --> 獲得的是字符串
　　　　2. .classList --> 獲得的是數組

　　2. 使用classList操做樣式
　　　　1. .classList.contains("樣式類") --> 判斷包不包含指定的樣式類
　　　　2. .classList.add("樣式類") --> 添加指定的樣式類
　　　　3. .classList.remove("樣式類") --> 刪除指定的樣式類
　　　　4. .classList.toggle("樣式類") --> 有就刪除沒有就添加

2. 經過.style直接修改CSS屬性
　　1. CSS屬性帶中橫線的
　　　　background-color: red;
　　　　.style.backgroundColor=green;
　　2. CSS屬性中不帶中橫線的
　　　　.style.color=red;

 

事件相關

1. 兩種綁定事件的方式

　　1. 在標籤內經過屬性來設置(onclick=foo(this))
　　　　this指的是當前觸發事件的標籤!!!
　　2. 經過JS代碼綁定事件

2. 涉及到DOM操做的JS代碼都應該放在body標籤的最下面！！！
3. this指的是出發當前事件的標籤對象
4. 經常使用事件示例

onclick        當用戶點擊某個對象時調用的事件句柄。ondblclick     當用戶雙擊某個對象時調用的事件句柄。onfocus        元素得到焦點。               // 練習：輸入框onblur         元素失去焦點。               應用場景：用於表單驗證,用戶離開某個輸入框時,表明已經輸入完了,咱們能夠對它進行驗證.onchange       域的內容被改變。             應用場景：一般用於表單元素,當元素內容被改變時觸發.（select聯動）onkeydown      某個鍵盤按鍵被按下。          應用場景: 當用戶在最後一個輸入框按下回車按鍵時,表單提交.onkeypress     某個鍵盤按鍵被按下並鬆開。onkeyup        某個鍵盤按鍵被鬆開。onload         一張頁面或一幅圖像完成加載。onmousedown    鼠標按鈕被按下。onmousemove    鼠標被移動。onmouseout     鼠標從某元素移開。onmouseover    鼠標移到某元素之上。onselect      在文本框中的文本被選中時發生。onsubmit      確認按鈕被點擊，使用的對象是form。