第二章
1．如果我們在控制台中執行下列語句，結果分別是什么？為什么？
var a; typeof a; undefined
> var s = '1s'; s++; NaN
> !!"false"; true
> !!undefined; false
> typeof -Infinity; number
> 10 % "0"; NaN
> undefined == null; true
> false === ""; false
> typeof "2E+2"; string
> a = 3e+3; a++; 3000
2．執行下面的語句后，v 的值會是什么？
var v = v || 10; 如果將v 分別設置為100、0、null，結果又將是什么？
100, 10, 10
3．編寫一個打印乘法口訣表的腳本程序。提示：使用嵌套循環來實現。
for (let i = 1; i < 10; i++) { for (let j = i; j < 10; j++) { console.log(i + '*' + j + '= '+ i*j); } }
第三章
1．編寫一個將十六進制值轉換為顏色的函數，以藍色為例，#0000FF 應被表示成 rgb(0,0,255)的形式。然后將函數命名為getRGB()，並用以下代碼進行測試。提示： 可以將字符串視為數組，這個數組的元素為字符。
function getRGB(color) { let color1 = color.replace(/#/g, ''); console.log(color1) let a = parseInt(color1.substring(0, 2), 16); let b = parseInt(color1.substring(2, 4), 16); let c = parseInt(color1.substring(4), 16); return 'rgb(' + a + ',' + b + ',' + c + ')'; } 第四章答案
4. 在String()構造函數不存在的情況下自定義一個MyString()的構造器函數。記住，由於String()不存在，因此您在寫構造器函數時不能使用任何屬於內建String對象的方法和屬性。並且要讓您所創建的對象通過以下測試：
var s = new MyString("hello"); s.length; //5 s[0]; //"h" s.toString(); //"hello" s.valueOf(); //"hello" s.charAt(1); //"e" s.charAt("2"); //"l" s.charAt("e"); //"h" s.concat(" world!"); //"hello world!" s.slice(1,3); //"el" s.slice(0,-1); //"hell" s.split("e"); //["h","llo"] s.split("l"); //["he","","o"] answer
function MyString(pstr){ this.str=pstr.toString(); this.length=this.str.length; for(var i=0;i<this.length;i++){ this[i]=this.str[i]; } this.toString=function (){ return this.str; }; this.valueOf=function (){ return this.toString(); }; this.charAt=function(index){ index=parseInt(index,10); index=isNaN(index)?0:index; return this[index]; }; this.concat=function(concatStr){ return this.str+concatStr; }; this.slice=function(startIndex,endIndex){ while(startIndex<0){ startIndex=startIndex+this.length; } while(endIndex<0){ endIndex=endIndex+this.length; } if(endIndex<=startIndex){ return ""; } var resultStr=""; for(var i=startIndex;i<endIndex;i++){ resultStr+=this[i]; } return resultStr; }; this.split=function(s){ var resultArr=[]; var tempStr=""; for(var i=0;i<this.length;i++){ if(this[i]===s){ resultArr.push(tempStr); tempStr=""; }else{ tempStr+=this[i]; } } resultArr.push(tempStr); return resultArr; }; this.reverse=function(){ var tempArr=[]; var i; for(i=0;i<this.length;i++){ tempArr[i]=this[i]; } tempArr.reverse(); this.str=tempArr.join(""); for(i=0;i<this.length;i++){ this[i]=tempArr[i]; } }; } 6.在Array()構造器以及相關的數組文本標識法都不存在的情況下，自定義一個類似的MyArray()構造器，並令其通過以下測試：
var a = new MyArray(1,2,3,"test"); a.toString(); //"1,2,3,test" a.length; //4 a[a.length-1]; //"test" a.push("boo"); //5 a.toString(); //"1,2,3,test,boo" a.pop(); //boo a.toString(); //"1,2,3,test" a.join(","); //"1,2,3,test" a.join(" isn\'t"); //1 isn't 2 isn't 3 isn't test" answer
function MyArray(){ this.length=arguments.length; for(var i=0;i<this.length;i++){ this[i]=arguments[i]; } this.toString=function(){ var resultStr=""; for(var i=0;i<this.length;i++){ if(i===this.length-1){ resultStr+=this[i].toString(); }else{ resultStr+=this[i].toString()+","; } } return resultStr; }; this.push=function(obj){ this[this.length]=obj; this.length++; return this.length; }; this.pop=function(){ if(this.length===0){ return null; } result=this[this.length-1]; this[this.length-1]=undefined; this.length--; return result; }; this.join=function(str){ var resultStr=""; for(var i=0;i<this.length;i++){ if(i===this.length-1){ resultStr+=this[i].toString(); }else{ resultStr+=this[i].toString()+str; } } return resultStr; } }
第七章
1．BOM
作為 BOM 的練習來說，我們可以試着寫出許多錯誤的、富有騷擾性的、對用戶非常 不友好的代碼，以及所有非常 Web 1.0 的東西。例如晃動的瀏覽器窗口。請試着令瀏覽器 彈出一個 200 × 200 的窗口，然后將其大小漸變成 400 × 400，接着將窗口上下左右不停移 動，造成地震效果。為了實現這種效果，我們需要 move*()函數，其中需要一次或多次調用 setInterval()，最后可能還需要 setTimeout()及 clearInterval()來令其停止操作。 或者我們可以更簡單一些，將當前日期時間通過 document.title 實時顯示在瀏覽器的標題欄 中，並像鍾表一樣每秒鍾更新一次。
var win = window.open('http://www.baidu.com', 'packt', 'width=200,height=200,resizable=yes'); setTimeout(() => win.resizeTo(400, 400), 1000); 2. DOM
2.1 換一種不同的方式來實現 walkDOM()方法，以回調函數參數的形式來代替console.log()硬編碼。
function walkDOM(n, callback) { do { callback(n); if(n.hasChildNodes()) { walkDOM(n.lastChild, callback); } } while (n = n.previousSibling); } function callback(n) { console.log(n) } walkDOM(document.documentElement, callback); 2.2 創建一個叫做include()的函數，該函數可以按需將外部腳本引入當前頁面。你可以首先動態創建一個新的<script>標簽，然后設置其 src 屬性，再將它插入到<head>標簽末端。該函數應通過如下測試：
> include('somescript.js');
function include(src) { var script = document.createElement('script'); script.src = src; document.head.appendChild(script); } include('somescript.js'); 3 事件
創建一個叫做myevent的跨瀏覽器事件工具集（或對象集），其中應該包含以下方法。
- addListener(element, event_name, callback) —其中的 element參數也可以是一個元素數組。
- removeListener(element, event_name, callback)。
- getEvent(event)—對於 IE 的早期版本，我們可以通過檢查 window.event 屬性來實現。
- getTarget(event)。
- stopPropagation(event)。
- preventDefault(event)。
其用例如下：
function myCallback(e) { e = myevent.getEvent(e); alert(myevent.getTarget(e).href); myevent.stopPropagation(e); myevent.preventDefault(e); } myevent.addListener(document.links, 'click', myCallback); 執行這段示例代碼應該會使該文檔中所有的鏈接失效，只不過，它們在被單擊時會彈出一個 alert()窗口，以顯示其 href 屬性。 創建一個以像素定位的<div>元素，坐標為 x=100 px， y=100 px。然后編寫代碼使<div> 元素能按照以下按鍵 J（左）、 K（右）、 M（下）、 I（上）或對應方向鍵的操作方式在頁面 中移動。並且，在編寫過程中可以重用您剛剛實現的事件工具集。
let myevent = { addListener(element, event_name, callback) { if (element.length > 1) { for (let item of element) { addEvent(item, event_name, callback); } } else { addEvent(element, event_name, callback); } function addEvent(element, name, callback) { if (element.addEventListener) { element.addEventListener(event_name, callback, false); } else if (element.attachEvent) { element.attachEvent(event_name, callback, false); } else { element.event_name = callback; } } }, removeListener(element, event_name, callback) { if (element.removeEventListener) { element.removeEventListener(event_name, callback, false); } else if (element.detachEvent) { element.detachEvent(event_name, callback, false); } }, getEvent(event) { event = event || window.event; return event; }, getTarget(event) { const target = event.target || event.srcElement; return target; }, stopPropagation(event) { event.stopPropagation() || (event.cancelBubble = true); }, preventDefault(event) { event.preventDefault() || (event.returnValue = false); } } function myCallback(e) { e = myevent.getEvent(e); alert(myevent.getTarget(e).href); myevent.stopPropagation(e); myevent.preventDefault(e); } myevent.addListener(document.links, 'click', myCallback); 4 XMLHttpRequest 對象
創建一個名為ajax的XHR工具集（或對象集），其示例用法如下：
function myCallback(xhr) { alert(xhr.responseText); } ajax.request('somefile.txt', 'get', myCallback); ajax.request('script.php', 'post', myCallback, 'first=John&last=Smith'); answer
let ajax = { request(url, method, callbak, params) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = (function (myxhr) { return function() { if (myxhr.readyState === 4 && myxhr.status === 200) { callbak(myxhr); } } })(xhr); xhr.open(method, url, true); xhr.send(params || ''); } } function myCallback(xhr) { alert(xhr.responseText); } ajax.request('somefile.txt', 'get', myCallback); ajax.request('script.php', 'post', myCallback, 'first=John&last=Smith');