python web開發學習筆記一：javascript基礎

一.認識js：

　　　　能進入到軟件所實習是個人最大的收穫，也是個人榮幸，我相信努力付出必定可以換回收穫。

　　　　項目最早開始的是接觸到web前端的一些內容，咱們須要利用flask搭建應該有的框架。我有一些python和java基礎，學起js來以爲不是很費勁，js是一種輕量級的腳本語言，專門應用於前端開發；它是是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，最先是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增長動態功能。js比較年輕，一直處於比較火熱的狀態，它是在最先1995年由Netscape公司在瀏覽器上首次設計實現，它的語法風格接近於java。

　　　　在這裏說下本身的學習總結同時也對新手是一種簡單的入門引領吧。

二.js基本語法：

　　絕大部分的主流ide以及編輯工具都支持js的編寫，推薦notepad++；我目前由於python依賴比較多，因此使用pycharm來進行相關的開發工做。首先咱們使用js語言能夠在谷歌瀏覽器的控制檯操做，或者嵌入到html模板內部。

　　1.js的導入：

　　　　js導入到html中有2種方式：一個是經過<script src="filepath/file.js">的方式，一個是直接在html內部利用<script>進行編寫。我驚訝的發如今一個js文件只要在另一個js文件前面引用，後面導入的js文件能夠直接使用前面導入的js文件內部的全局變量。

　　2.js的通常性規則：

　　　　在js中依舊和其餘弱類型語言同樣，他須要對變量進行申明，使用的惟一的申明方法就是var，在js中一切皆變量，包括函數與對象。在一個語句塊先後均須要{。。。}的標識，以及每一句話或者是語句塊的結束都須要以 ； 結尾，js解釋器會自動的幫你標示「；」，可是咱們爲了代碼的可讀性，最好使用 ； 結尾；在js中的變量函數的命名採用小駝峯法，類的命名採用大駝峯法，類的實例化採用new關鍵字；this關鍵字等價於python中的self。

　　3.數據類型：

　　　　js中的數據類型包括：字符串、Number、布爾、比較運算符、null和undefined、數組、對象；

　　　　字符串：就是一串字符，可使用單引號或者雙引號；

　　　　Number：就是數值型數據；布爾：包括true以及false；比較運算符：JavaScript容許對任意數據類型作比較，在比較等於有三個等號，三個等號比較的時候js不會幫你轉換數據的類型進行比較，而兩個等號在進行比較的時候js會自動幫助你進行數據類型的轉換；

　　　　null和undefined：不少面試都會問到這個的區別，null表示一個「空」的值，它和0以及空字符串''不一樣，0是一個數值，''表示長度爲0的字符串，而null表示「空」，null等因而python裏的None，null表示未定義的值，而undifined表示未定義的值,undefined僅在判斷函數或者變量是否存在的狀況下有用，通常在使用中都是使用null；

　　　　數組：相似於python列表以及java的數組，存儲容器，有不少的方法進行操做，能夠直接對數組查詢length屬性，也能夠直接經過索引改變數組的值，使用slice（）函數能夠直接對數組進行切片操做，push（）函數能夠向數組末尾添加一個或者多個元素，pop則是刪除末尾的元素，數組的拼接不適合直接相加，只能用concat（）函數，這裏和python有些許區別，固然還有join（‘--’）方法將數組的每個元素進行拼接並返回一個新的字符串，數組內的元素能夠是對象也能夠是數組；最後是對象：相似於python中的字典，在進行json文件操做的時候很是有用，能夠直接將獲取到的json文件內容進行有關的操做，包括修改建立鍵值對，實際上JavaScript對象的全部屬性都是字符串，不過屬性對應的值能夠是任意數據類型，經過in操做符能夠判斷是否對象中包含了相應的鍵，能夠直接經過.key來進行訪問或者 [‘key’] 來進行訪問。

　　　　map以及set：Map是一組鍵值對的結構，具備極快的查找速度。他可使用數字或者其餘數據類型來做爲鍵，使用set或者二維數組來做爲構造map工具；set相似於python中的集合，有着去重的效果，須要提供一個覺得數組做爲輸入構造一個set，add（）來進行添加。

  4.js中的各類結構：

　　 1.選擇結構：

　　　　也就是if () { ... } else if { ... } else{...}結構，最好是寫上{}，增長可讀性，else後面的小括號能夠不寫條件；其中之一的條件被知足以後以後的再也不進行判斷。JavaScript把null、undefined、0、NaN和空字符串''視爲false，其餘值一律視爲true。

　　　2.循環結構：

　　　　JavaScript的循環有兩種，一種是for循環，經過初始條件、結束條件和遞增條件來循環執行語句塊：這個地方和java的就是如出一轍了；使用for...in循環能夠遍歷出數組的下標以及對象的鍵；一種是while循環只有一個條件，條件知足就能夠一直循環；

　　　3.函數：

　　　　函數式編程的重要性就很少說了，在js中函數也是十分重要的。函數的定義方式使用function關鍵字來進行定義，大概相似於：function abs(x) {...}這樣的方式，函數體內部遇到return會當即中止，若沒有return則繼續進行下去。函數能夠做爲一個變量來進行相關的參數傳遞操做；第二種定義函數的方式以下：var abc = function(){...}右邊的部分是一個匿名函數，相似於pyhton中的lambda函數，臨時建立臨時使用以後馬上放棄，這2種方式建立函數式等價的。一樣的，參數傳遞進去也要講究順序性。關鍵字arguments，它只在函數內部起做用，利用arguments，你能夠得到調用者傳入的全部參數。也就是說，即便函數不定義任何參數，仍是能夠拿到參數的值。它相似於一個參數列表。arguments[id]來對參數進行訪問。

　　　4.變量做用域：

　　　　用var申明的變量其實是有做用域的，若是一個變量在函數體內部申明，則該變量的做用域爲整個函數體，在函數體外不可引用該變量。變量的做用範圍值得咱們去深究，一般咱們須要好幾個全局變量，甚至拿到其餘的js文件中去使用。優先級依然是由內到外，內部嵌套函數的變量永遠優先執行。在寫法上，可使用一個var將多個變量賦值換行。使用let關鍵字能夠申明一個更小的塊級做用變量，用在判斷選擇結構內部，const則是常量的意思。

　　　5.可能會很實用的內置函數：

　　　　map()、filter()、sort()，對應數組調用map函數能夠將內部元素依次的用map傳入的函數來進行操做，並返回新的處理後的數組。filter過濾函數，用法相似於map，可是是保留符合要求的元素刪除不要的元素。排序函數就很少說了。

　　　6.js的面向對象：

　　　　class關鍵字建立類，而後調用new構造對象，class+大駝峯命名，相似class Student(name) {...}，一樣的，var xiaoming = new Student('小明');能夠構造類的實例化，這和其餘語言是相同的----繼承類的屬性以及方法，相似於在python類中的self寫法，這裏也是要求使用this關鍵字，諸如this.name=**,this.age=**等等；

　　　7.瀏覽器對象：

　　　　JavaScript能夠獲取瀏覽器提供的不少對象，並進行操做。window對象表示瀏覽器窗口，包括innerWidth以及innerHeight屬性，對應的是瀏覽器的內部寬度以及高度，內部寬高是指除去菜單欄，工具欄，邊框等以後的網頁淨寬高。還有outerWidth以及outerHeight對應的是外部寬高。一樣的location對象顯示的是當前頁面的URL信息。最重要的還有document對象，html在瀏覽器中表現爲DOM的樹形結構，document是整個樹形結構的根節點，用document對象提供的getElementById()以及getElementsByTagName()能夠按id以及tag名字查找一組節點。

　　　　順便認識一下cookie，是指某些網站爲了辨別用戶身份，進行session跟蹤而存儲在本地終端的數據。Cookie 是由 Web 服務器保存在用戶瀏覽器（客戶端）上的小文本文件，它能夠包含有關用戶的信息。cookie由服務器端生成，是一系列的鍵值對，當一個用戶登錄成功以後，服務器會發送一個cookie給瀏覽器存儲進文件目錄，當瀏覽器訪問該網站時，就會在http協議下的請求頭上附上該cookie。服務器能夠根據cookie區分用戶。

  5.js高階：

 　　 1.DOM操做：更新DOM節點，經過innerHTML來進行直接來修改節點文本以及內部HTML子樹。innerText是更新內部的文本信息，不包含html代碼。對DOM節點對象調用style屬性來修改css，如DOM.style.color = 'red'，等；

　　 2.插入DOM節點：一般用jquery更加的方便，這裏使用appendChild()方法，能夠將新的元素對象放置於節點的最後一個子元素後。insertBefore(a,b)能夠將節點插入到對應節點以前，a插入父節點下的子節點b前。

　　 3.children屬性所對應節點的全部子節點，children[i]表示的是第i-1個子節點。一樣的parentElement屬性表明的是父節點。

　　 4.另外還有關於input以及form的操做，value屬性能夠用來獲取元素的值以及賦值；這裏有有個地方就是對於上傳文件的操做，‘type=file’ 的狀況下，這個input框對應的value值就是上傳文件的完整路徑名。對於文件的讀取，js也有本身的特性，可使用FileReader實例來進行操做，在onload下執行相應的函數。