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