基礎JavaScript練習（二）總結

標籤：tag   baidu   tar   parse   添加   情況   des   href   nod   

任務目的

• 學習與實踐JavaScript的基本文法、語言特性
• 練習使用JavaScript實現簡單的排序演算法

任務描述

• 基於上一任務
• 限制輸入的數字在10-100
• 隊列元素數量最多限制為60個，當超過60個時，添加元素時alert出提示
• 隊列展現方式變化，直接用高度表示數字大小
• 實現一個簡單的排序功能，如冒泡排序（不限制具體演算法），用可視化的方法表達出來，參考見下方參考資料

任務注意事項

• 實現簡易功能的同時，請仔細學習JavaScript基本文法、事件、DOM相關的知識
• 請注意代碼風格的整齊、優雅
• 代碼中含有必要的注釋
• 樣本圖僅為參考，不需要完全一致
• 具體演算法及可視化的形式不做特別限制，只要求能夠展現出演算法的過程
• 建議不使用任何第三方庫、架構

線上學習參考資料

• JavaScript入門篇
• MDN JavaScript

 

基礎JavaScript練習（二）總結

1、JavaScript parseInt() Function

parseInt()函數解析一個字串並且返回一個整數。

基數參數被用於指定使用哪一個數字系統，例如基數為16表示字串中的數字從十六進位數解析為十進位數。

如果省略了基數參數，JavaScript將假設成下述情況：

• ?如果字串以“0x”開頭，基數參數為16（十六進位）。
• ?如果字串以其他開頭，基數參數為10（十進位）。

注意：只有字串中的第一個數字被返回。允許使用前置和尾隨空格。

文法：

parseInt(string, radix)

string：將被解析的字串。

Radix：可選，從2到36的數字，表示使用的數字系統。

傳回值：數字。當第一個字元不能被轉換為數字，返回NaN。

2、HTML DOM childNodes Property

childNodes屬性返回一個節點的子節點集合，作為一個節點列表對象。在代碼中節點集合已經被排序，並且可以通過下標訪問，下標從0開始。這個屬性為唯讀屬性。

可使用節點列表對象的length屬性來確定子節點的個數，然後可以迴圈所有的子節點並從中提取資訊。

注意：元素當中的空白被認為時文本，文本也被認為是節點。注釋同樣被認為是節點。

childNodes屬性與children屬性區別：

children屬性返回一個節點元素節點的集合，不包含文本和注釋節點，childNodes屬性包含。

文法：

element.childNodes

傳回值：節點列表對象，代表節點的集合。在原始碼中返回集合中的節點已被排序。

3、HTML DOM Style Object

Style對象代表一個獨立的style語句。

訪問一個Style對象

Style對象可以通過document的頭部訪問，也可以通過特定的HTML元素訪問。

eg：var x = document.getElementsByTagName("STYLE");

var x = document.getElementById("myH1").style;

建立Style對象

可以使用document.createElement()方法建立一個<style>元素，也可以通過設定一個已經存在元素的style屬性。

var x = document.createElement("STYLE");

document.getElementById("myH1").style.color = "red";

4、已提交作業

代碼地址：https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-1

Demo地址：http://htmlpreview.github.io/?https://github.com/Nunawading2016/2017-IFE-Baidu/blob/master/task2-1/index.html

基礎JavaScript練習（二）總結