第二章
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; //5s[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
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
第七章
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');