前端學習(4)

一 JavaScript

　　JavaScript分爲三部分：ECMAScript（核心，是一套標準）、DOM（Document object model）、BOM（Browse object model）

　　JavaScript是基於對象的，就是使用的是由JavaScript創建好的對象，基本不用自己去創建類

二 JavaScript引入方式

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


    <script>       {# 第一種方式 直接在script標籤中編寫 #}
        alert('hello damon')
    </script>

    <script src="js_study.js"></script> {# 第二種方式 導入*.js文件 #}

    {# srcipt標籤塊推薦放在body標籤塊的最後 #}
</body>
</html>

導入方式

三 JavaScript基礎

3.1 變量

　　JavaScript是弱類型語言

　　聲明任何類型的變量要用‘var’關鍵字

　　　　var a;

　　　　var name="damon", age=20;

　　注意：1.聲明變量如果不帶有var關鍵字，說明變量是全局變量；

　　　　　2.變量命名首字符只能是字母、下劃線或者美元符，並且區分大小寫；

　　　　　3.變量命名一般格式：駝峯式基礎上首字符是類型縮寫，例如 var iAge=20; 代表是整型；

3.2 規範

　　1. 每條語句寫完後推薦加分號爲語句結束符，默認的語句結束符是回車；

　　2. 使用/* */ //來進行註釋，和c++相同；

　　3. 使用花括號{}來封裝代碼塊，和c++相同，和python不同；

3.3 JavaScript保留字

3.4 JavaScript運算符

　　1.算數運算符

　　+ - * / % ++ -- 正負號（可以轉字符串爲數字）

　　2.邏輯運算符

　　== != ===(全等於) !==(不全等) > < >= <== && || ! & | ^ << >>

　　類型轉換

　　　　（1）布爾類型轉換成數字

　　　　（2）字符串和數字類型，字符串轉換成數字

　　　　（3）對象和字符串類型，對象轉換成字符串

　　　　（4）對象和數字類型，對象轉換成數字類型

　　比較時規則

　　　　（1）null和undefined相等

　　　　（2）檢查是否相等，null和undefined不能轉換

　　　　（3）NaN和任何值都不能，和自己也不等

　　　　（4）對象比較引用值，如果引用指向同一個對象則相等，反之不等

　　　　（5）字符串比較，比較最高位字符的ASCII碼，如果相等比較下一位

　　3.賦值運算符

3.5 JavaScript控制語句

　　1.if else

　　語法與c++一樣

　　2.switch case

　　語法與c++一樣

　　3.for循環

　　語法與c++一樣

　　支持for(var i in a)這種寫法，但不推薦使用，並且可以用到像字典數據結構的對象中，此時i是key 　

var obj = {"key1":"value1","key2":"value2"}
for(var i  in obj){
    console.log(i);  
    console.log(obj[i]);
}

　　4.while循環

　　語法與c++一樣

　　5.異常處理

　　語法與c++一樣　

try{

}
catch (...) {

}
finally {

}

四 ECMA對象

ECMA其實並不具有類，在ECMA標準中都沒有存在類這個說明，但它定義了“對象定義”，等價於類。

　　1.對象的種類

　　（1）native object：由ECMAScript定義的本地對象

　　（2）build-in object：ECMA實現的兩種獨立於環境的內置對象，Global和Math，內置對象屬於本地對象

　　（3）host object：ECMA實現的由宿主環境提供的對象，所有的DOM和BOM都是宿主對象

　　2.Object

　　所有對象的父類

　　方法：（1）ToString() 對象的字符串表示

　　　　　（2）Valueof() 返回對象原始值，絕大多數返回值與ToString()返回值相等

3 Fuction對象

　　(1).定義

function 函數名(參數) {
    函數體；
    return 返回值；          
}

或者：
var func1 = new Function("a","alert(a)"};
func1(1);

　　第二種方式不常用，推薦使用第一種。

　　(2).說明

　　（1）可以使用變量、常量或者表達式作爲函數調用的參數

　　（2）函數由關鍵字function定義

　　（3）函數名區分大小寫，規則與標識符一致

　　（4）使用return返回返回值

　　（5）調用函數的位置可以在函數定義的上面

　　（6）JS調用函數時傳遞的參數個數與形參個數不一致，不會報錯

　　(3).length屬性

alert(func.length)  //函數期望的參數個數

　　(4).void

alert(void(func1(5,8))) //void用來攔截返回值

　　(5).Argument對象

函數的內置對象，對象中包含傳遞給函數的所有參數。

function Add(){
    var sum=0;
    for(var index in arguments {
       sum += arguments[index];
    return sum;
}

Add(1,2,3,4,5,6,6);

　　(6).匿名函數

//形式一
var func1 = Function(arg){
    return arg;
}

//形式二
(Funcion(arg)){console.log(arg)})("Damon");

　　4 String對象

　　(1).創建

var str="hello"  

var str=new String("hello") //這種方式創建出來的爲全局對象

創建

　　(2).屬性

var str = "hello"

str.length //字符串長度

屬性

　　(3).方法

var str = "hello"

//針對HTML格式的方法
str.italics()
str.anchor() //返回錨字符串
str.bold() //返回加粗字符串
str.sup() //返回上標格式字符串

str.toLowerCase() //返回全小寫字符串
str.toUpperCase() //返回全大寫字符串

str.charAt(1) //根據索引返回字符
str.charCodeAt(1) //返回索引的字符的Unicode編碼

str.indexof("h") //返回字符索引
str.lastindexof("l") //返回最後一個字符的索引

str.match("el") //返回匹配字符串的數組，沒有則返回null
str.seatch("lo")  //返回匹配字符串的首字符位置索引

str.substr(1, 3) //根據起始索引和長度，返回字符串
str.substring(1,3) //根據起始索引和結束索引，返回字符串
str.slice(1, 3) //與substring方法相比，索引位置可以爲負數

str.replace("el", "le") //返回替換後的字符串
str.split("l") //返回切割後的字符串數組
str.concat(" world") //返回連接後的字符串

//以上方法都是返回新的字符串，對str原字符串沒有影響

方法

　　5 Array對象

　　類似c++中的數組，或者python中的列表

　　(1).創建

var arr = [1,2,3,"元素類型可以不同"] //創建方式一

var arr = new Array(1,2,3,4) //創建方式二

var arr = new Array(4) //當第二種創建方式，只有一個數字時代表，數組長度

創建

　　(2).屬性

var arr = [1,2,3,4];

var arr_len = arr.length

　　(3).方法

join

concat

reverse

sort

slice

splice

var arr = [1,2,3]

arr.push(4,5) //將4,5壓入數組結尾
arr.pop() //刪除數組最後一個元素

arr.unshift(6,7) //將6,7壓入數組起始
arr.shift() //刪除數組第一個元素

棧操作

　　6 Date對象

　　(1).創建

var date = new Date(); //未添加參數，默認當前時間

var date = new Date("2020/4/17 21:49") //創建該日期的時間對象

var date = new Date("20/4/17 21:49") //創建該日期的時間對象
//不僅僅只能用"/"進行分割，空格或者逗號都可以

var date = new Date(2000) //創建1970/1/1 0:0:00+2000毫秒的對象

創建

　　(2).方法

var date = new Date()

date.getFullYear() //獲取年
date.getMonth() //獲取月(0~11)
date.getDate() //獲取日
date.getDay() //獲取星期
date.getHours() //獲取小時
date.getMinutes() //獲取分鐘
date.getSeconds() //獲取秒
date.getMilliseconds() //獲取毫秒
date.getTime() //後去累積毫秒數(從1970/1/1 0:0:00起)

獲取時間

var date = new Date()

date.setFullYear(2020) //獲取年
date.setMonth(4) //獲取月(0~11)
date.setDate(17) //獲取日
date.setDay(5) //獲取星期
date.setHours(21) //獲取小時
date.setMinutes(59) //獲取分鐘
date.setSeconds(20) //獲取秒
date.setMilliseconds(40) //獲取毫秒
date.setTime(2000) //後去累積毫秒數(從1970/1/1 0:0:00起)

設置時間

getTimezoneoffset() //返回本地時間與GMT時間的時間差。單位爲分鐘
toUTCString() //返回國際標準時間的字符串
toLocalStirng() //返回本地時間的字符串

parse(x) //返回累積毫秒數(從1970/1/1 00:00:00到本地時間)
UTC(x) //返回累積毫秒數(從1970/1/1 00:00:00到世界時間)

轉換

　　7 RegExp對象

var reg1 = new RegExp("參數一", "參數二")  //創建方式一
//參數一爲正則表達式 參數二爲驗證模式 g globla, i 忽略大小寫

var reg2 = /^正則表達式/g/i   //創建方式二

//正則表達式與字符串對象結合的四中方法
var str = "Hello world"

str.match(/o/g)  //返回字符創中符合正則表達式的內容，放進數組
str.search(/o/g) //返回符合正則表達式內容的索引
str.split(/o/g) //按照正則表達式進行切割，放進數組
str.replace(/o/g,"damon") //按照正則表達式對字符串進行替換

正則對象

　　8 Math對象

//Math對象是內置對象，不用自己創建，直接調用即可

Math.pow(2,4) //2的4次方
Math.abs(a) //返回數的絕對值
Math.exp(a) //返回數的指數
Math.log(a) //返回數的自然對數，底爲e
Math.max(x,y) //返回兩個數的最大值
Math.min(x,y) //返回兩個數的最小值
Math.random() //返回0~1之間的隨機數
Math.round(x) //返回根據x四捨五入的數
Math.sin(x) //返回數的正弦
Math.sqrt(x) //返回數的平方根
Math.tan(x) //返回數的正切

Math

五 Window對象

所有瀏覽器都支持window對象，一個html對應一個window對象，是用來控制窗口的，使用時直接調用方法就可以了，是個全局對象。

1.方法

alert() //顯示一段消息和確認按鈕的警告
confirm() //顯示一段消息和確認及取消按鈕的警告
promt() //顯示可提示用戶輸入的對話框

open() //打開新的瀏覽器窗口，或者查找已存在的窗口
close() //關閉瀏覽器窗口

setInterval() //按照指定的週期，循環調用函數，單位是毫秒。返回值爲ID
clearInterval() //根據ID，取消循環調用

setTimeout() //指定毫秒數後調用函數 返回ID，函數只被執行一遍
clearTimeout() //根據ID取消timeout後調用函數

scrollTo() //把內容滾動到指定的座標

六 History對象

history對象包含用戶（在瀏覽器窗口中）訪問過的URL，是window對象的一部分，可以通過window.history屬性進行訪問。

1.屬性

length 返回瀏覽器歷史列表中的URL數量

2.方法

back() 加載history列表中的前一個URL

forward() 加載history列表中的下一個URL

go() 加載history列表中的某個具體頁面

<a href="html2.html">click</a>
<button onclick="history.forward()">forward</button>
<button onclick="history.back()>back</button>
<button onclick="history.go()">go</button> //go()參數填1代表前進，-1代表後退

六 Location對象

Location對象包含有關當前URL的信息

Location對象是Window對象的一部分，可通過window.location屬性來訪問

1.方法

location.reload() //刷新當前頁面
location.replace(URL) //URL的html文檔取代當前窗口文檔，是不能退回的
location.assign(URL //跳轉到URL文檔，是可以返回的

2.屬性

location.href="www.baidu.com"，跳轉到百度頁面，與<a>標籤的href屬性類似

七 DOM對象

DOM是萬維網的標準，定義了訪問HTML和XML文檔的標準，它中立於平臺和語言的接口，允許程序和腳本動態地訪問和修改文檔的內容、結構和樣式。

核心DOM：針對任何結構化文檔的標準模型
XML DOM：針對XML文檔的模型，定義了所有XML元素的對象、屬性和訪問的方法
HTML DOM：針對HTML文檔的模型，定義了所有HTML元素的對象、屬性和訪問方法

1.HTML DOM

HTML文檔中的所有內容都是節點(node)

文檔是一個文檔node(document對象）
每個HTML元素是元素node(element對象)
HTML元素屬性是屬性node(attribute對象)
註釋是註釋node(comment對象)

任何node都有兩類屬性：

　　（1）自身屬性

attribute: 節點的屬性節點
nodeType: 節點類型
nodeValue: 節點值
nodeName: 節點名稱
innerHTML: 節點的文本值

　　（2）導航屬性

parentNode: 節點的父節點
firstNode: 節點的第一個子元素(包括空格、回車和文本)
lastNode: 節點的最後一個子元素(包括空格、回車和文本)
childNodes: 節點的所有子節點(包括空格、回車和文本)

有相同父節點的節點們稱爲同胞(Sibling)

JS代碼訪問HTML元素(節點)可以通過以下方式：

getElementById()
getElementsByTagName()
getElementsByClassName()
getElementsByName()

全局查找通過document去調用以上方法；

局部查找通過已拿到的對象只可以調用2,3方法

八 DOM Event(事件)

事件用來觸發某個動作

onclick     //響應鼠標點擊
ondbclick //響應鼠標雙擊

onfocus    //響應元素獲取鼠標焦點
onblur      //響應元素失去鼠標焦點

onchange  //響應元素內容發生改變

onkeydown //響應鍵盤按鍵被按下
onkeypress //響應鍵盤按鍵被按下並鬆開
onkeyup     //響應鍵盤按鍵鬆開

onmousedown //響應鼠標被按下
onmousemove //響應鼠標被移動
onmouseout    //響應鼠標從元素移走
onmouseover  //響應鼠標移動元素上

onselect         //響應鼠標文本被選中

onload       //響應頁面完成加載 只給body標籤加

onsubmit  //響應提交表單，只給form元素添加

以上時間可以在HTML標籤中直接添加，也可以在JS代碼中獲取標籤對象後，通過對象添加。

Event時間通常與函數結合使用

九 DOM增刪改查

增：

　　createElemet(name)創建元素

　　appendChild(“元素對象”);將元素對象添加到父元素對象中

刪：

　　1.獲得要刪除的元素

　　2.獲得它的父元素

　　3.調用removeChild()刪除

改：

　　使用setAttribute()修改元素屬性

　　使用innerHTML修改元素內容

查：

　　上面介紹過的四中方法

Go 使用

Django 學習四--bootstrap

Django 學習5--DetailView

Django 學習3--CreateView

Django 學習2--ListView、模版

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

linux以太網驅動總結