JS学习 JavaScript前端开发案例教程配套资源 参考答案.docx
《JS学习 JavaScript前端开发案例教程配套资源 参考答案.docx》由会员分享,可在线阅读,更多相关《JS学习 JavaScript前端开发案例教程配套资源 参考答案.docx(20页珍藏版)》请在冰豆网上搜索。
JS学习JavaScript前端开发案例教程配套资源参考答案
第一章
一、填空题
1.document.body
2.undefined
3.字节顺序标记
4.2
二、判断题
1.错。
2.错。
3.对。
4.错。
三、选择题
1.A
2.C
3.B
四、编程题
1.
//接收用户输入的信息
varinputs=prompt('请自定义用户信息:
');
//输出到网页中
document.write(inputs);
第二章
1.false
2.-2
1.对。
2.对。
3.错。
1.B
2.D
3.D
1.素数概念:
除了1和它本身以外不再有其他的因数,最小的素数为2。
//遍历1~100之间的数据
for(varn=1;n<=100;n++){
if(n==1){
continue;
}else{
varflag=true;//用来保存n是否为素数,默认n为素数
for(varj=2;jif(n%j==0){//若能被j整除,则n不是素数flag=false;}}}if(flag){//如果是质数,在网页中打印该数据document.write("100以内的素数有:"+n+'');}}2.方式一:根据题目描述可知,红球最多为25个,白球最多为31个,黑球最多为28个。因此,依次遍历循环循环,按照条件对比即可。for(varred=0;red<=25;++red){for(varwhite=0;white<=31;++white){for(varblack=0;black<=28;++black){if(((red+white)==25)&&((white+black)==31)&&((red+black)==28)){document.write('红球:'+red+',白球:'+white+',黑球:'+black);}}}}方式二:根据题目描述可知,每种颜色的球最多为多少个,选择一个颜色的球为基准,使用表达式表示出另外两种球的个数,最后再根据条件进行判断即可。假设以白球为基准,最多为31个,遍历并计算红和黑球。for(varw=0;w<=31;++w){varr=25-w;varb=31-w;if((r+b)==28){document.write('红球:'+r+',白球:'+w+',黑球:'+b);}}第三章一、填空题1.342.-1二、判断题1.对。2.错。3.对。三、选择题1.D2.C3.C四、编程题1.。//创建数组vararr=[1,2,3,4,2,5,6,2,7,2];//index表示新数组newarr的下标,默认为0varindex=0,newarr=[];//遍历数组for(variinarr){//数组元素不全等于2,则将其保存到newarr中if(arr[i]!==2){newarr[index]=arr[i];++index;}}2.//创建数组vararr=['a','b','d','d','c','d','d'];//待查找的元素varsearch='d';//nwarr保存search在arr中的下标,i用于指定查找位置,j用于设置newarr的下标varnewarr=[],i=j=0;while(i//在arr中从i开始查找search,查找到第一个停止,返回对应的下标,没有找到返回-1varres=arr.indexOf(search,i);//在arr中找到searchif(res!==-1){newarr[j]=res;//将当前查找的元素下标保存到newarr中i=res+1;//从新指定查找的位置++j;//改变newarr的下标}}console.log('arr中元素d出现的次数:'+newarr.length+';对应的所有索引下标:'+newarr);第四章一、填空题1.122.函数作用域3.12二、判断题1.错。2.错。3.对。三、选择题1.B2.C3.D四、编程题1.div{width:50px;height:50px;border:1pxsolid;}change
if(n%j==0){//若能被j整除,则n不是素数
flag=false;
}
if(flag){//如果是质数,在网页中打印该数据
document.write("100以内的素数有:
"+n+'');
2.方式一:
根据题目描述可知,红球最多为25个,白球最多为31个,黑球最多为28个。
因此,依次遍历循环循环,按照条件对比即可。
for(varred=0;red<=25;++red){
for(varwhite=0;white<=31;++white){
for(varblack=0;black<=28;++black){
if(((red+white)==25)&&((white+black)==31)&&((red+black)==28)){
document.write('红球:
'+red+',白球:
'+white+',黑球:
'+black);
方式二:
根据题目描述可知,每种颜色的球最多为多少个,选择一个颜色的球为基准,使用表达式表示出另外两种球的个数,最后再根据条件进行判断即可。
假设以白球为基准,最多为31个,遍历并计算红和黑球。
for(varw=0;w<=31;++w){
varr=25-w;
varb=31-w;
if((r+b)==28){
'+r+',白球:
'+w+',黑球:
'+b);
第三章
1.34
2.-1
1.D
3.C
1.。
//创建数组
vararr=[1,2,3,4,2,5,6,2,7,2];
//index表示新数组newarr的下标,默认为0
varindex=0,newarr=[];
//遍历数组
for(variinarr){
//数组元素不全等于2,则将其保存到newarr中
if(arr[i]!
==2){
newarr[index]=arr[i];
++index;
2.
vararr=['a','b','d','d','c','d','d'];
//待查找的元素
varsearch='d';
//nwarr保存search在arr中的下标,i用于指定查找位置,j用于设置newarr的下标
varnewarr=[],i=j=0;
while(i//在arr中从i开始查找search,查找到第一个停止,返回对应的下标,没有找到返回-1varres=arr.indexOf(search,i);//在arr中找到searchif(res!==-1){newarr[j]=res;//将当前查找的元素下标保存到newarr中i=res+1;//从新指定查找的位置++j;//改变newarr的下标}}console.log('arr中元素d出现的次数:'+newarr.length+';对应的所有索引下标:'+newarr);第四章一、填空题1.122.函数作用域3.12二、判断题1.错。2.错。3.对。三、选择题1.B2.C3.D四、编程题1.div{width:50px;height:50px;border:1pxsolid;}
//在arr中从i开始查找search,查找到第一个停止,返回对应的下标,没有找到返回-1
varres=arr.indexOf(search,i);
//在arr中找到search
if(res!
==-1){
newarr[j]=res;//将当前查找的元素下标保存到newarr中
i=res+1;//从新指定查找的位置
++j;//改变newarr的下标
console.log('arr中元素d出现的次数:
'+newarr.length+';对应的所有索引下标:
'+newarr);
第四章
1.12
2.函数作用域
3.12
div{width:
50px;height:
50px;border:
1pxsolid;}
change
varbtn=document.getElementById('btn');
vardiv=document.getElementsByTagName('div')[0];
btn.onclick=function(){
div.style.border='doublered';
第五章
2.constructor
String.prototype.trim=function(){
returnthis.replace(/(^\s*)|(\s*$)/g,'');
};
String.prototype.ltrim=function(){
returnthis.replace(/(^\s*)/g,'');
String.prototype.rtrim=function(){
returnthis.replace(/(\s*$)/g,'');
Object.prototype.create=function(obj){
if(Object.prototype.create){
returnObject.prototype.create;
functionF(){}
F.prototype=obj;
returnnewF();
第六章
1.window或window对象
2.setTimeout()
3.length或length属性
div{
height:
50px;
line-height:
text-align:
center;
border:
double#ccc;
width:
100px;
暂停/开始
window.onload=startTime;
vartimer=null;
functionstartTime()
{
varnow=newDate();//获取当前的时间的毫秒数
varh=now.getHours();//获取now的小时(0~23)
varm=now.getMinutes();//获取now的分钟(0~59)
vars=now.getSeconds();//获取now的秒数(0~59)
//利用两位数字表示分钟和秒数
m=m<10?
'0'+m:
m;
s=s<10?
'0'+s:
s;
document.getElementById('clock').innerHTML=h+":
"+m+":
"+s
timer=setTimeout('startTime()',500);
//通过按钮控制时钟暂停或开始
document.getElementById('btn').onclick=function(){
if(timer){
clearTimeout(timer);
timer=null;
startTime();
第七章
1.document.createElement()
2.标签
2.B
table{width:
80%;border:
1pxsolid#69c;border-collapse:
collapse;margin:
10pxauto;}
tabletrth,tabletrtd{border:
1pxsolid#69c;height:
30px;font-size:
12px;
center;}
(function(){
//分别获取全选按钮、全不选按钮、反选按钮
varcheckAll=document.getElementById('checkAll');
varcheckNone=document.getElementById('checkNone');
varcheckInvert=document.getElementById('checkInvert');
//获取所有复选框
varcheckboxes=document.getElementsByName('books');
checkAll.onclick=function(){//全选
for(variincheckboxes){
checkboxes[i].checked=true;
checkNone.onclick=function(){//全不选
checkboxes[i].checked=false;
checkInvert.onclick=function(){//反选
checkboxes[i].checked=checkboxes[i].checked?
false:
true;
})();
第八章
1.事件处理程序
2.事件监听
1.C
①CSS样式-
#toolbar{border:
1pxsolid#ff5c00;border-radius:
8px;width:
60px;position:
absolute;height:
30px;line-height:
30px;top:
0;left:
0;display:
none;background-color:
#fff;text-align:
center;font-size:
12px;}
#toolbare{position:
absolute;top:
-5px;left:
20px;width:
10px;height:
5px;background:
url(arrow.gif)no-repeat;}
②编写HTML
显示悬浮工具栏。
分享
④事件处理
vartoolbar=document.getElementById('toolbar');
varshare=document.getElementById('share');
share.onmouseup=function(event){
//获取鼠标按下时的位置
varpageX=event.pageX||event.clientX+document.documentElement.scrollLeft;
varpageY=event.pageY||event.clientY+document.documentElement.scrollTop;
//判断是否有文本选中,选中则显示浮动工具栏
if(window.getSelection().toString()||document.selection.createRange().text){
toolbar.style.display='block';
//设置浮动工具栏的显示位置
toolbar.style.left=pageX-20+'px';
toolbar.style.top=pageY+10+'px';
document.onmousedown=function(event){
varevent=event||window.event;
vartarget=event.target||event.srcElement;
vartargetId=target.id;
//没有发生在toolbar身上才隐藏悬浮工具栏
if(targetId!
="toolbar"){
toolbar.style.display='none';
①CSS样式
.login-header{width:
100%;text-align:
center;height:
24px;line-height:
30px;}
*{margin:
0;padding:
0;}
.box{width:
400px;height:
300px;border:
5pxsolid#eee;box-shadow:
2px2px2px2px#666;position:
15%;left:
30%;display:
none;}
.hd{width:
100%;height:
25px;background-color:
#7c9299;border-bottom:
1pxsolid#369;line-height:
25px;color:
white;cursor:
move;}
#box_close{float:
right;cursor:
pointer;}
点击,弹出登录框
注册信息(可以拖拽)
【关闭】
③JavaScript处理键盘按键
//获取“点击,弹出登录框”的链接、登录框的关闭按钮、登录框、页面背景色
varlink=document.getElementById("link");
varcloseBtn=document.getElementById("box_close");
varlogin=document.getElementById("box");
//点击登录显示登录框和遮罩
link.onclick=function(){
login.style.display="block";
//点击关闭按钮隐藏登录框和遮罩
closeBtn.onclick=function(){
login.style.display="none";
//按下键盘上的ESC键隐藏登录框和遮罩
document.onkeydown=function(e){
console.log(e.keyCode);//ESC键的键盘码是27
if(e.keyCode===27){
closeBtn.onclick();
第九章
1.\b,\B
2.改变限定符的作用范围
2.A
//定义正则
varreg=/[0-9]{4}|[a-z]{4}/gi;
//测试
console.log('12abcd3456'.match(reg));
varreg=/^\d{6}\d{4}[01]\d[0123]\d\d{3}[\d|X]$/i;
console.log('110555************'.match(reg));
第十章
1.Content-Type
2.onreadystatechange事件
3.A、C
输入用户名:
varchk=document.getElementById('chk');
varusername=document.getElementById('username');
chk.onclick=function(){
if(username.value===''){
alert('用户名不能为空!
returnfalse;
varxhr=newXMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===XMLHttpRequest.DONE){
if(xhr.status>=200&&xhr.status<300||xhr.status===304){
vardata=JSON.parse(xhr.responseText);
if(data.isReg){
alert('对不起,该用户名已经被注册');
alert('恭喜您,该用户名可以注册!
alert('服务器发生错误。
xhr.open('GET','user.php?
username='+username.value);
xhr.send();
user.php
php
$username='admin';
echo['isReg'=>($_GET['username']==$username)]);
varweather=document.getElementById('weather');
vardata=JSON.parse(xhr.responseText).weatherinfo;
weather.innerHTML=data.city+''+data.weather+''+data.temp2;
xhr.open('GET','wea
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1