Web前端开发初级上册习题答案

JavaScript语法基础章节练习1.声明a,b,c,d4个变量，类型分别为整型、浮点型、布尔型、字符串型，分别判断并打印出4个变量的数据类型。答：```pythona=1b=2.0c=Trued="hello"print(type(a))#<class'int'>print(type(b))#<class'float'>print(type(c))#<class'bool'>print(type(d))#<class'str'>```2.定义两个变量，vara=15和varb=9,将两个不同类型的变量按整数相乘，打印出结果。答：```pythonvara=15varb=9result=int(vara)*int(varb)print(result)#135```3.vara=11,varb=7。打印出a除以b的整数部分和余数部分。答：```pythonvara=11varb=7quotient=vara//varbremainder=vara%varbprint(quotient)#1print(remainder)#4```4..用for循环和if语句打印出20以内的单数，1,3,5,7,…答：```pythonforiinrange(1,21):ifi%2==1:print(i,end=",")```输出结果为：1,3,5,7,9,11,13,15,17,19,5.用switch语句识别一个变量的数据类型，如果是数字就乘以2输出，如果是字符串就直接打印，如果是null就打印为空，如果是Boolean类型就输出布尔。答：```pythonvalue=10#判断传入值的数据类型ifisinstance(value,int)orisinstance(value,float):print(value*2)elifisinstance(value,str):print(value)elifvalueisNone:print("空")elifisinstance(value,bool):print("布尔类型")```6.写一段程序，打印出100以内的质数(除1外，只能被自己整除的数)答：```pythonforiinrange(2,100):forjinrange(2,i):ifi%j==0:breakelse:print(i,end=",")```输出结果为：2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97,7.声明一个数组，包含一些重复元素，再声明另一个空数组，用遍历和判断的方式向空数组中插入元素，使新数组中消除原数组的重复元素。答：```pythonarr1=[1,3,2,5,1,7,1,3,9]arr2=[]foriinarr1:ifinotinarr2:arr2.append(i)print(arr2)#[1,3,2,5,7,9]```8.寻找两个数组中相同元素中最小的元素。例如：vararrl=[1,2,5,9,10],varar2=[3,4,6,9,10]。答：```pythonvararr1=[1,2,5,9,10]vararr2=[3,4,6,9,10]min_num=float("inf")foriinvararr1:ifiinvararr2andi<min_num:min_num=iprint(min_num)#9```9.判断一个字符串中出现次数最多的字符，并统计这个次数。例如，varstr='addddfffssdfsadfsdfsafjsd'。答：```pythonstr_val="addddfffssdfsadfsdfsafjsd"freq_dict={}#统计每个字符出现的次数foriinstr_val:freq_dict[i]=freq_dict.get(i,0)+1max_val=0max_char=""#找到最大的出现次数以及对应的字符forchar,freqinfreq_dict.items():iffreq>max_val:max_val=freqmax_char=charprint(f"字符'{max_char}'出现了{max_val}次")```10.输入两个字符串，从第一个字符串中删除第二个字符串中的所有字符串，且不可以使用replace。例如：①输入“Theyarestudents”和“aeiou”;②删除之后的第一个字符串变成“Thyrstdnts”。答：下面是解决这个问题的一种方法:```pythondefremove_substring(str1,str2):forcharinstr2:str1=str1.replace(char,"")returnstr1str1="Theyarestudents"str2="aeiou"result=remove_substring(str1,str2)print(result)#"Thyrstdnts"```11.写一段正则表达式，能正确匹配IP地址格式。例如，varstr="255.221.221.12"。答:正则表达式匹配IP地址格式的例子如下:```pythonimportreip_address="255.221.221.12"pattern=r"\d{1,3}.\d{1,3}.\d{1,3}.\d{1,3}"ifre.match(pattern,ip_address):print("IP地址格式正确")else:print("IP地址格式错误")```12.写一段正则表达式，将输入的数字分割成每三个以一个逗号划分。例如：输入16867245,输出16,867,245。答：使用正则表达式将输入的数字分割成每三个以一个逗号划分的例子如下:```pythonimportrenumber="16867245"pattern=r"\d{1,3}(?=(\d{3})+(?!\d))"result=re.sub(pattern,r"\g<0>,",number)print(result)#"16,867,245"```13.设计一个模拟购物车的对象结构，对象的键为商品id,对象的值为商品数量，向对象中插入商品id,首先判断对象中是否含有此id。如果没有，则将id加入对象，并在值上加数量1;如果含有此id,则直接在此id的值上使数量加1。编写一段此类算法的程序。答：下面是一个模拟购物车的对象结构和相关代码示例:```pythonclassShoppingCart:def__init__(self):self.items={}definsert_item(self,item_id):ifitem_idnotinself.items:self.items[item_id]=1else:self.items[item_id]+=1defget_item_count(self,item_id):returnself.items.get(item_id,0)cart=ShoppingCart()cart.insert_item("item1")cart.insert_item("item2")cart.insert_item("item1")cart.insert_item("item3")print(cart.items)#{'item1':2,'item2':1,'item3':1}print(cart.get_item_count("item1"))#2print(cart.get_item_count("item4"))#0```14.写一个具有a和b两个参数的函数，函数体中计算a加b的数值求和，并返回。答：计算两个数的和并返回的函数示例如下:```pythondefcalculate_sum(a,b):returna+bresult=calculate_sum(3,5)print(result)#8```15.写一个函数，可以传入一个数组，函数返回此数组的最大值。答：获取数组最大值的函数示例如下:```pythondefget_max_value(arr):returnmax(arr)array=[5,8,2,9,4]result=get_max_value(array)print(result)#9```16.写一个函数，可以传入一个对象，此函数为每个对象添加一个流水id,id值每次增加1。答：向对象中的每个对象添加一个流水id的函数示例如下:```pythondefadd_id(obj):forkey,valueinobj.items():value["id"]=value.get("id",0)+1products={"product1":{"name":"Product1"},"product2":{"name":"Product2"}}add_id(products)print(products)#{#"product1":{"name":"Product1","id":1},#"product2":{"name":"Product2","id":1}#}```17..写一个求圆面积函数，传入一个半径，返回此圆的面积(π直接用3.14计算)。答：计算圆的面积的函数示例如下:```pythonimportmathdefcalculate_circle_area(radius):returnmath.pi*radius**2result=calculate_circle_area(5)print(result)#78.53981633974483```18.写一个函数，获取当前时间，格式为××××年××月××日××时××分。答：获取当前时间的函数示例如下:```pythonimportdatetimedefget_current_time():now=datetime.datetime.now()returnnow.strftime("%Y年%m月%d日%H时%M分")current_time=get_current_time()print(current_time)#"2023年11月07日02时54分"```19.写一个函数，传入日期格式(如2019-2-19),返回此日期是星期几。答：判断给定日期是星期几的函数示例如下:```pythonimportdatetimedefget_weekday(date_string):date=datetime.datetime.strptime(date_string,"%Y-%m-%d")weekday=date.weekday()weekdays=["星期一","星期二","星期三","星期四","星期五","星期六","星期日"]returnweekdays[weekday]date="2019-2-19"weekday=get_weekday(date)print(weekday)#"星期二"```JavaScript对象模型章节练习1..写一个diy,根据浏览器的宽度和高度，将div设置在屏幕的中心位置。答：这是一个根据浏览器宽度和高度将div设置在屏幕中心位置的DIY：```html<!DOCTYPEhtml><html><head><style>#centeredDiv{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}</style></head><body><divid="centeredDiv"><!--在这里添加你想要在屏幕中心显示的内容--></div><script>window.addEventListener('resize',centerDiv);functioncenterDiv(){varcenteredDiv=document.getElementById('centeredDiv');varscreenWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;varscreenHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;centeredDiv.style.top=screenHeight/2-centeredDiv.offsetHeight/2+'px';centeredDiv.style.left=screenWidth/2-centeredDiv.offsetWidth/2+'px';}//页面加载完成后首次居中divwindow.addEventListener('load',centerDiv);</script></body></html>```2.打印本浏览器访问的URL地址。答：在JavaScript中，你可以使用`window.location.href`获取当前浏览器地址栏中显示的URL。例如：```javascriptconsole.log(window.location.href);```3.打印浏览器的刷新频率。目前大部分浏览器不提供直接获取浏览器刷新频率的API。但是你可以使用JavaScript中的`requestAnimationFrame`来估计刷新频率，它通常与显示器的刷新频率相匹配。例如：```javascriptvarstartTime=performance.now();varframes=0;functioncountFrames(){frames++;varcurrentTime=performance.now();if(currentTime-startTime>=1000){console.log('刷新频率:',Math.round(frames/((currentTime-startTime)/1000)),'fps');frames=0;startTime=currentTime;}requestAnimationFrame(countFrames);}countFrames();```4.在页面上写一个table标签，写一个按钮，响应单击事件，调用一个函数，每单击一次，为table增加一行数据，单元格中内容任意。答：这是一个向table中添加行数据的示例，按钮每次点击都会调用相应的函数：```html<!DOCTYPEhtml><html><head><script>functionaddTableRow(){vartable=document.getElementById('myTable');varrow=table.insertRow();varcell1=row.insertCell();cell1.innerHTML='数据1';varcell2=row.insertCell();cell2.innerHTML='数据2';}</script></head><body><tableid="myTable"><tr><th>列1</th><th>列2</th></tr></table><buttononclick="addTableRow()">添加行</button></body></html>```5.上述table中生成的每行尾部单元格内加一个删除链接，当点击此链接时删除当前行(提示：使用parentNode,行节点是单元格节点的父，单元格节点是链接节点的父)。这是一个在每行末尾添加删除链接的示例，点击链接时会删除对应的行：```html<!DOCTYPEhtml><html><head><script>functionaddTableRow(){vartable=document.getElementById('myTable');varrow=table.insertRow();varcell1=row.insertCell();cell1.innerHTML='数据1';varcell2=row.insertCell();cell2.innerHTML='数据2';vardeleteLink=document.createElement('a');deleteLink.innerHTML='删除';deleteLink.href='#';deleteLink.onclick=function(){varcurrentRow=this.parentNode.parentNode;currentRow.parentNode.removeChild(currentRow);returnfalse;};vardeleteCell=row.insertCell();deleteCell.appendChild(deleteLink);}</script></head><body><tableid="myTable"><tr><th>列1</th><th>列2</th><th>操作</th></tr></table><buttononclick="addTableRow()">添加行</button></body></html>```JavaScript事件处理章节练习1.背诵记忆JS事件的三个阶段。答：在JavaScript中，事件具有三个阶段：捕获阶段、目标阶段和冒泡阶段。-捕获阶段：事件从最外层的元素（document对象）开始向内层元素传播，直至目标元素。-目标阶段：事件到达目标元素，触发事件处理程序。-冒泡阶段：事件从目标元素开始向外层元素传播，直至最外层的元素（document对象）。2.在页面上写一个text输入框，响应焦点离开事件，当焦点离开时，判别输入框中输入的是否是数字，如果不是，则弹出提示框，只能输入数字。答：在页面上写一个text输入框，响应焦点离开事件，当焦点离开时，判断输入框中输入的是否是数字，如果不是，则弹出提示框，只能输入数字的实现可以如下：```html<inputtype="text"id="myInput"><script>varinput=document.getElementById("myInput");input.addEventListener("blur",function(e){varvalue=e.target.value;if(isNaN(value)){alert("只能输入数字！");e.target.value="";//清空输入框}});</script>```当输入框失去焦点时（焦点离开），会触发blur事件。在事件处理程序中，使用`isNaN()`函数判断输入的值是否是数字，如果不是数字，则弹出提示框，并清空输入框的值。3.尝试将6.3.3节中的鼠标拖曳实例改写成页面上有多个div,鼠标可以拖曳任意一个div方块。将6.3.3节中的鼠标拖曳实例改写成页面上有多个div，鼠标可以拖曳任意一个div方块的实现可以如下：```html<style>.draggable{width:100px;height:100px;background-color:red;position:absolute;cursor:pointer;user-select:none;}</style><divclass="draggable"id="box1"></div><divclass="draggable"id="box2"></div><!--添加更多div--><script>varelements=document.getElementsByClassName("draggable");varmouseOffset={};functionhandleMouseDown(e){vart