摘要:不過讓流行起來的原因應該是是目前所有主流瀏覽器上唯一支持的腳本語言。經過測試,數字字符串布爾日期可以直接賦值,修改不會產生影響。再考慮對象類型為或者的情況。對于結果聲明其類型。判斷對象的類型是還是,結果類型更改。
1. 第一個頁面交互轉載自我的個人博客
歡迎大家批評指正
這里最需要學習的老師的代碼中,每一部分功能都由函數控制,沒有創建一個全部變量。且最后有一個函數來控制執行代碼。這個更多的是思想上的學習吧!
在chrome上相加時,直接兩個數拼接到一起了,而不是數值相加。因為輸入的值,在獲取時,默認是字符串類型的。
在IE8下提示對象不支持“addEventListener”屬性或方法。原因是IE8不支持標準的DOM事件綁定函數,它使用attachEvent
1.1 了解JavaScript是什么JavaScript,一種直譯式腳本語言,是一種動態類型、基于原型的語言,內置支持類。它的解釋器被稱為JavaScript引擎,為瀏覽器的一部分,廣泛用于客戶端的腳本語言,最早是在HTML網頁上使用,用來給HTML網頁增加動態功能。然而現在JavaScript也可被用于網絡服務器,如Node.js。
上面是維基百科上的解釋。不過讓JavaScript流行起來的原因應該是JavaScript 是目前所有主流瀏覽器上唯一支持的腳本語言。下面是MDN對其核心功能的解釋
核心的 JavaScript 中包含有一組核心的對象,包括 Array,Date 和 Math,以及一組核心的語言要素,包括操作符,控制結構和語句。出于多種目的,可以通過為其增補附加的對象,對核心 JavaScript 加以擴展;例如:
客戶端: JavaScript 提供了用于控制瀏覽器(Navigator 或者其它瀏覽器)以及其中的文檔對象模型(DOM)的對象,從而擴展了核心 JavaScript。例如,客戶端擴展允許應用程序在 HTML 的表單中加入元素,以便響應用戶事件,比如鼠標點擊,表單輸入和頁面導航。
服務器端: JavaScript 提供了服務于在服務器上運行 JavaScript 的對象,從而擴展了核心 JavaScript。例如,服務器端擴展可以允許應用程序訪問關系型數據庫,在應用程序的不同調用間提供信息的連續性,甚至于處理服務器之上的文件。
1.2 如何在HTML頁面加載JavaScript代碼可以有三種方法加載在HTML頁面中引入JavaScript代碼:
內聯式: 在HTML標簽的style屬性中定義樣式,在onclick這樣的屬性中定義Javascript代碼;
嵌入式: 在頁面中使用標簽定義Javascript代碼;
引用外部文件: 在標簽中定義src屬性引入Javascript文件.
注意:在或者中都可以創建標簽來創建或者引入JavaScript代碼。
搜索一下,為什么我們讓你把放在前。
瀏覽器在解釋HTML頁面時,是按照先后順序的,所在放在前面的JS代碼就會先被執行。正是因為這種特性,所以放在中的代碼會阻塞頁面的渲染。
其實有些JS代碼可以放在之間,比如IE9以下瀏覽器兼容HTML5標簽的js代碼,這是一個底層的兼容腳本,不涉及任何頁面邏輯。那么它應該放在間。
新版瀏覽器標簽可以使用defer屬性來延遲加載。
最簡單的不就是把能放在body中的代碼放進去嗎?擴展閱讀中有詳細介紹。
1.3 擴展閱讀:JavaScript語言的歷史
JavaScript 的性能優化:加載和執行
2. JavaScript數據類型及語言基礎創建一個JavaScript文件,比如util.js;
實踐判斷各種數據類型的方法,并在util.js中實現以下方法:
2.1 判斷各種數據類型的方法這里比較簡單,可以參考我的另一篇博客JavaScript類型識別.
// 判斷arr是否為一個數組,返回一個bool值 function isArray(arr) { return typeof (arr) === "object" && Object.prototype.toString.call(arr) === "[object Array]"; } // 判斷fn是否為一個函數,返回一個bool值 function isFunction(fn) { return typeof (fn) === "function"; }
在ECMAScript5中,判斷數組類型可以直接使用Array.isArray()。
Array.isArray([]); //true Array.isArray(function(){}); //false2.2 值類型和引用類型的區別.各種對象的讀取、遍歷方式
了解值類型和引用類型的區別,了解各種對象的讀取、遍歷方式,并在util.js中實現以下方法:
2.2.1 深度克隆// 使用遞歸來實現一個深度克隆,可以復制一個目標對象,返回一個完整拷貝 // 被復制的對象類型會被限制為數字、字符串、布爾、日期、數組、Object對象。不會包含函數、正則對象等 function cloneObject(src) { // your implement } // 測試用例: var srcObj = { a: 1, b: { b1: ["hello", "hi"], b2: "JavaScript" } }; var abObj = srcObj; var tarObj = cloneObject(srcObj); srcObj.a = 2; srcObj.b.b1[0] = "Hello"; console.log(abObj.a); console.log(abObj.b.b1[0]); console.log(tarObj.a); // 1 console.log(tarObj.b.b1[0]); // "hello"
思路如下
題目考的主要是有些對象的使用=直接賦值,并不是真正的復制,而是將一個新的變量指向了當前對象,共享同一個地址。在修改原對象時,新對象也會跟著改變。
經過測試,數字、字符串、布爾、日期、可以直接賦值,修改不會產生影響。所以就思考了在使用typeof值為對象或者是原始類型時的情況。且對象類型為Date對象時,也使用直接賦值的方式。
再考慮對象類型為Array或者Object的情況。對于結果聲明其類型。
接著往下走,在遍歷對象時,只考慮其自身的屬性,而不考慮繼承來屬性。若其自身值還是對象,那么 就遞歸調用,進一步解析、賦值,否則直接賦值。
實現:
function cloneObject(src) { var result ;//返回的復制后的結果。 if (typeof(src)==="object"){ //對象為日期對象時也直接賦值。 if(Object.prototype.toString.call(src)==="[object Date]"){ result = src; }else{ //判斷對象的類型是Array還是Object,結果類型更改。 result = (Object.prototype.toString.call(src)==="[object Array]")? [] : {}; for (var i in src){ if (src.hasOwnProperty(i)) { //排除繼承屬性 if (typeof src[i] === "object") { result[i] = cloneObject(src[i]); //遞歸賦值 } else { result[i] = src[i]; //直接賦值 } } } } }else{ //對于原始類型直接賦值。 result = src; } return result; }2.3數組、字符串、數字等相關方法
學習數組、字符串、數字等相關方法,在util.js中實現以下函數
2.3.1 數組去重操作// 對數組進行去重操作,只考慮數組中元素為數字或字符串,返回一個去重后的數組 function uniqArray(arr) { // your implement } // 使用示例 var a = [1, 3, 5, 7, 5, 3]; var b = uniqArray(a); console.log(b); // [1, 3, 5, 7]
思路如下:
新建一下新數組
循環原數組
判斷新數組內元素,原數組是否含有.含有則跳過
這里使用了數組的indexOf方法,找到某個元素在數組中的索引。簡化了查找過程,若使用最簡單的遍歷尋找的話需要嵌套循環,是這樣的,先在循環中取原數組的值,再循環在新數組中查找,若有相等的情況就不添加。(這是我的第一想法,顯然比現在復雜很多).
參看來自MDN的Array對象.里面介紹了一下數組的方法.
返回新數組.
實現:
function uniqArray(arr) { // your implement var result = []; //創建一個新數組。 for (var i = 0, l = arr.length; i < l; i++) { if (result.indexOf(arr[i]) === -1) { //查找是否已經含有該元素 result.push(arr[i]); //添加到新數組 } } return result; //返回新數組 }2.3.2 實現trim函數,去除字符串首尾空白
實現一個簡單的trim函數,用于去除一個字符串,頭部和尾部的空白字符
//1.字符串查找 // 假定空白字符只有半角空格、Tab // 練習通過循環,以及字符串的一些基本方法,分別掃描字符串str頭部和尾部是否有連續的空白字符,并且刪掉他們,最后返回一個完成去除的字符串 function simpleTrim(str) { // your implement } //2.正則 // 很多同學肯定對于上面的代碼看不下去,接下來,我們真正實現一個trim // 對字符串頭尾進行空格字符的去除、包括全角半角空格、Tab等,返回一個字符串 // 嘗試使用一行簡潔的正則表達式完成該題目 function trim(str) { // your implement } // 使用示例 var str = " hi! "; str = trim(str); console.log(str); // "hi!"
實現如下:
//1.字符串查找 //這里就是利用兩個循環,找到頭尾第一個不是空格且不是tab符的元素。記錄它們的索引,之后截取字符串。 function simpleTrim(str) { // your implement var result = ""; for (var i = 0, il = str.length; i < il; i++) { //從頭查找 if (str[i] != " " && str[i] != " ") { break; //查找到第一個不為空格及tab符的元素 } } for (var j = str.length - 1; j >= 0; j--) { //從尾查找 if (str[j] != " " && str[j] != " ") { break; } } result = str.slice(i, j + 1); //截取需要的字符串。 return result; } //2.正則 function trim(str) { // your implement var result = ""; result = str.replace(/^s+|s+$/g, ""); //使用正則進行字符串替換 return result; }2.3.3 遍歷數組,對每一個元素執行fn函數
// 實現一個遍歷數組的方法,針對數組中每一個元素執行fn函數,并將數組索引和元素作為參數傳遞 function each(arr, fn) { // your implement } // 其中fn函數可以接受兩個參數:item和index // 使用示例 var arr = ["java", "c", "php", "html"]; function output(item) { console.log(item) } each(arr, output); // java, c, php, html // 使用示例 var arr = ["java", "c", "php", "html"]; function output(item, index) { console.log(index + ": " + item) } each(arr, output); // 0:java, 1:c, 2:php, 3:html
思路如下:
這里的實現有點類似ECMA5中數組的forEach()方法
由示例可知:item為必須參數,index為可選參數.
且item為數組項,index為數組索引.
這樣就簡單了,循環傳參.
實現:
function each(arr, fn) { // your implement for (var i = 0, l = arr.length; i < l; i++) {//遍歷傳參 fn(arr[i], i); } }2.3.4 獲取對象里第一層元素的數量,返回整數
// 獲取一個對象里面第一層元素的數量,返回一個整數 function getObjectLength(obj) {} // 使用示例 var obj = { a: 1, b: 2, c: { c1: 3, c2: 4 } }; console.log(getObjectLength(obj)); // 3
實現:
//使用for in遍歷時,直接獲取到的就是第一層的結果 //排除繼承來的屬性,使用外部變量保存循環次數 function getObjectLength(obj) { var count = 0; for (var i in obj) { if (obj.hasOwnProperty(i)) { count++; } } return count; }正則表達式
// 判斷是否為郵箱地址 function isEmail(emailStr) { // your implement } // 判斷是否為手機號 function isMobilePhone(phone) { // your implement }
實現思路
這里參考我對于正則表達式入門的兩篇博客
正則表達式-理論基礎篇
正則表達式-基礎實戰篇
手機號碼的匹配
這里匹配的情況是最簡單的情況,并沒有特別完美,比如限制開頭第二位數字的范圍:188,158通過,而123,191,不通過等等。
可利用多選分支,例如:/^1[3|5][0-9]{9}$|^18d{9}$/。不過現在虛擬運營商的加入,號碼段變多了,所以直接用最簡單的方法,也沒事。
郵箱的匹配
在@前能出現哪些東西?這里使用(w+.)*來匹配出現.的情況,表示出現0次或多次因為.后不能緊跟@,所以后面緊跟w+匹配普通的字母數字情況。
@后出現的郵箱后綴并不固定所以使用w+來匹配。
最后考慮域名結尾的級聯情況所以用(.w+)+。
實現如下:
// 判斷是否為郵箱地址 function isEmail(emailStr) { // your implement var reg = /^(w+.)*w+@w+(.w+)+$/; return reg.test(emailStr); } // 判斷是否為手機號 function isMobilePhone(phone) { // your implement var reg = /^1d{10}$/; return reg.test(phone); }2.4 參考資料
JavaScript 數據結構
MDN Array
MDN String
MDN Number
MDN 正則
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91577.html
摘要:獲取下一個元素節點,存在的話,取消現有選中狀態,設置下一個元素節點為選擇中,調用運動框架實現動畫,添加定時器,調用該函數,實現自動播放。移出時,開啟定時器,繼續輪播。輪播間隔時間單位為毫秒,默認為,在內部,以下部分進行修改或添加。 轉載自我的個人博客 歡迎大家批評指正 包括5部分: 小練習1-處理用戶輸入 小練習2-日期對象的使用 小練習3:輪播圖 小練習4:輸入提示框 小練習...
摘要:獲取下一個元素節點,存在的話,取消現有選中狀態,設置下一個元素節點為選擇中,調用運動框架實現動畫,添加定時器,調用該函數,實現自動播放。移出時,開啟定時器,繼續輪播。輪播間隔時間單位為毫秒,默認為,在內部,以下部分進行修改或添加。 轉載自我的個人博客 歡迎大家批評指正 包括5部分: 小練習1-處理用戶輸入 小練習2-日期對象的使用 小練習3:輪播圖 小練習4:輸入提示框 小練習...
摘要:調用函數,判斷是否含有該指定樣式,若含有的話刪除該。分不同的情況來調用函數,并返回對象。慕課網探索之基礎詳解篇慕課網事件探秘。參考資料事件代理委托事件代理實現如下事件代理需要進行事件代理的父元素。 轉載自我的個人博客 歡迎大家批評指正 DOM 添加class、移除class、是否同級元素、獲取元素位置 先來一些簡單的,在你的util.js中完成以下任務: // 為element增加...
摘要:判斷是否為一個函數,返回一個值。使用遞歸來實現一個深度克隆,可以復制一個目標對象,返回一個完整拷貝被復制的對象類型會被限制為數字字符串布爾日期數組對象。經過測試,數字字符串布爾日期可以直接賦值,修改不會產生影響。再考慮對象類型為或者的情況。 //判斷arr是否為一個數組,返回一個bool值 首先javascript有5大基本數據類型:Undefined,Null,Boolean,Num...
摘要:小練習輪播圖組件任務描述在和上一任務同一目錄下面創建一個文件,在目錄中創建,并在其中編碼,實現一個輪播圖的功能。實現思路考察對節點,定時器,事件的處理。 小練習3:輪播圖組件 任務描述在和上一任務同一目錄下面創建一個task0002_3.html文件,在js目錄中創建task0002_3.js,并在其中編碼,實現一個輪播圖的功能。 圖片數量及URL均在HTML中寫好 可以配置輪播的順...
閱讀 600·2021-10-08 10:20
閱讀 1490·2021-09-23 11:22
閱讀 3214·2019-08-30 15:55
閱讀 1581·2019-08-28 18:25
閱讀 1857·2019-08-28 18:14
閱讀 1230·2019-08-26 11:37
閱讀 2893·2019-08-26 10:18
閱讀 2420·2019-08-23 18:39