2021年阿里巴巴前端工程師面試題
小編:管理員 2545閱讀 2021.06.11
?問(wèn)答題
請列舉7種以上常用的HTML標簽，說(shuō)明其語(yǔ)義。
?1.div標簽，是一個(gè)塊元素，就像一個(gè)大盒子，可以放各式各樣的東西，如：圖片....
2.p標簽，也是一個(gè)塊元素，它通常是用來(lái)放一段話(huà)的....
3. h1,h2....h6標簽，也是一個(gè)塊元素，常用來(lái)放標題
4.span標簽，是一個(gè)行內元素，常用來(lái)處理一段話(huà)中的某幾個(gè)字符
5.img標簽，用來(lái)加載圖片的標簽
6.table標簽，用來(lái)創(chuàng )建表格的標簽
7.br標簽，用來(lái)?yè)Q行的標簽
8.hr標簽，用來(lái)畫(huà)線(xiàn)的標簽
9.a一個(gè)點(diǎn)擊跳轉的超鏈接標簽
10.ul一個(gè)用來(lái)做列表的標簽
?請說(shuō)明下面各種情況的執行結果，并注明產(chǎn)生對應結果的理由。
?
function doSomething() {
????alert(this);
}
?
① element.onclick = doSomething，點(diǎn)擊element元素后。
② element.onclick = function() {doSomething()}， 點(diǎn)擊element元素后。
③ 直接執行doSomething()。
?解析：
①彈出element object，通過(guò)函數賦值方式，this直接指向element對象
②彈出window ?object，this是寫(xiě)在doSomething這個(gè)函數里面的，而這種方式的事件綁定寫(xiě)法并沒(méi)有將element對象傳遞給this，而在默認情況下this指向window
③彈出window object，沒(méi)有綁定對象的情況下this默認指向window
?請用JavaScript語(yǔ)言實(shí)現 sort 排序函數，要求：sort([5, 100, 6, 3, -12]) // 返回 [-12, 3, 5, 6, 100]。
如果你有多種解法，請闡述各種解法的思路及優(yōu)缺點(diǎn)。（僅需用代碼實(shí)現一種解法，其它解法用文字闡述思路即可）
?
function sort(arr){
?for(var i=0;i
?for(var j=0;j
?if(arr[j]>arr[j+1]){
?var hand=arr[j];
?arr[j]=arr[j+1];
?arr[j+1]=hand;
?}
?}
?}
?return arr;
}
? ?
?請根據下面的HTML和CSS代碼，畫(huà)出布局示意圖
????
?????? ?
????
????
????#page?{?width:?520px;?}
????.nav??{?width:?200px;?float:?right;?}
????.main?{?width:?200px;?float:?left;?padding-left:?110px;?}????
????.sub??{?width:?100px;?float:?left;?margin:?10px?0?10px?-100px;?}????
????.main?{?border:?1px?solid?#000;?}
????.nav,?.sub?{?border:?1px?dashed?#000;?height:?300px;?}????
????.sub?{?height:?280px;?}
?閱讀以下JavaScript代碼：
if (window.addEventListener) {
???????var addListener = function(el, type, listener, useCapture) {
???????????el.addEventListener(type, listener, useCapture);
???????};
???} else if (document.all) {
???????addListener = function(el, type, listener) {
???????????el.attachEvent("on" + type, function() {
???????????????listener.apply(el);
???????????});
???????};
???}
? ?
請闡述 a) 代碼的功能; b) 代碼的優(yōu)點(diǎn)和缺點(diǎn); c) listener.apply(el) 在此處的作用; d) 如果有可改進(jìn)之處，請給出改進(jìn)后的代碼，并說(shuō)明理由。
?a) 功能：事件注冊
b) 優(yōu)點(diǎn)：跨瀏覽器，特性探測，性能優(yōu)化。缺點(diǎn)：document.all
c) 作用：使得IE中listener的this 為 el，與其它瀏覽器一致
d) 改進(jìn)：document.all改成window.attachEvent; useCapture的默認
?
????????? 請編寫(xiě)一個(gè)JavaScript 函數toRGB，它的作用是轉換CSS中常用的顏色編碼。 要求：
?
alert(toRGB("#0000FF"));????????? // 輸出 rgb(0, 0, 255)
alert(toRGB("invalid"));????????? // 輸出 invalid
alert(toRGB("#G00"));????????????? // 輸出 #G00
? ?
?
function toRGB(color) {
????var regex = /^#([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
????match = color.match(regex)
????return match ? 'rgb('+parseInt(match[1], 16)+','+parseInt(match[2], 16)+','+parseInt(match[3], 16)+')'?: color
}
?嘗試實(shí)現注釋部分的Javascript代碼，可在其他任何地方添加更多代碼（如不能實(shí)現，說(shuō)明一下不能實(shí)現的原因）：
var Obj = function(msg){
????this.msg = msg;
????this.shout = function(){
????????alert(this.msg);
????}??
????this.waitAndShout = function(){
????????//隔五秒鐘后執行上面的shout方法
????}
}
?var Obj = function(msg){
?? ?this.msg = msg;
?? ?this.shout = function(){
?? ??? ?alert(this.msg);
?? ?}?? ?
?? ?this.waitAndShout = function(){
?? ??? ?var that = this;
?? ??? ?setTimeout(that.shout, 5000);
?? ??? ?//隔五秒鐘后執行上面的shout方法
?? ?}
?? ?return this;
}
Obj("shouting").waitAndShout();
?請編寫(xiě)一個(gè)JavaScript函數，它的作用是校驗輸入的字符串是否是一個(gè)有效的電子郵件地址。要求： a)?? 使用正則表達式。 b)?? 如果有效返回true ，反之為false。
?
var checkEmail? = function(email){
var preg =?
????????"(^[a-zA-Z]|^[\\w-_\\.]*[a-zA-Z0-9])@(\\w+\\.)+\\w+$"，,
????pregObj? =new RegExp(preg);
????return pregObj.test(email);
}
?請分別列出HTML、JavaScript、CSS、Java、php、python的注釋代碼形式。
?
// JavaScript 注釋
/*
?* ? JavaScript 多行注釋
?*/
/* CSS 注釋 */
// Java 注釋
/**
?* Java 多行注釋
?*/
// php 單行注釋
# php 單行注釋
/**
?* php多行注釋
?*/
# Python 單行注釋
'''?
Python 多行注釋
'''
?根據下圖，編寫(xiě)HTML結構。要求：遵循xHTML 1.0規范且符合Web語(yǔ)義。
?
?
?請編寫(xiě)一段JavaScript腳本生成下面這段DOM結構。要求：使用標準的DOM方法或屬性。
??
????
淘！你喜歡
? ?
??window.onload = function() {
? ? ? ? ? ? var div = ?document.createElement('div');
? ? ? ? ? ? div.id = ?"example";
? ? ? ? ? ? var p = ?document.createElement('p');
? ? ? ? ? ? p.className = ?"slogan";
? ? ? ? ? ? p.innerHTML = '淘！你喜歡';
? ? ? ? ?? ? div.appendChild(p);
? ? ? ? ? ? ?document.body.appendChild(div);
? ? ? ? }
?請用CSS定義p標簽，要求實(shí)現以下效果: 字體顏色在IE6下為黑色(#000000)；IE7下為紅色(#ff0000)；而其他瀏覽器下為綠色(#00ff00)。
?p{
? ? color:#0f0;
? ? _color:#000;?/*ie6*/ ??
}
/*ie7*/
*+html p{
? ? color:#f00;
}
?請簡(jiǎn)化以下的CSS代碼，并給出簡(jiǎn)單的說(shuō)明。
div.container {
????width: 500px;
????background-image: url(/img/sprite.png);
????????background-repeat: no-repeat;
????????background-position: 0px -78px;
}
div.container ul#news-list, div.container ul#news-list li {
????margin: 0px;
????padding: 0px;
}
div.container ul#news-list li {
????padding-left: 20px;
????background-image: url(/img/sprite.png);
????????background-repeat: no-repeat;
????????background-position: -120px 0px;
}
A {
????font-size: 14px;
????????font-weight：bold；
????line-height: 150%;
????color: #000000;
}
?
div.container {
????width: 500px;
????background: url(/img/sprite.png) no-repeat 0 -78px;
}
#news-list, #news-list li {
????margin: 0
????padding: 0;
}
#news-list li {
????padding-left: 20px;
????background: url(/img/sprite.png) no-repeat -120px 0;
}
A {
????font: bold 14px/150%;
????color: #000;
}
????如果div.container和#news-list li背景圖合并，使用
?
?
?
????div.container,#news-list
li{ background: url(/img/sprite.png)};
?
?
?
????也正確。
?
?
?請編寫(xiě)一個(gè)通用的事件注冊函數（請看下面的代碼）。
function addEvent(element, type, handler)
{
????// 在此輸入你的代碼，實(shí)現預定功能
}
?
function addEvent(element, type, handler)
{
????// 在此輸入你的代碼，實(shí)現預定功能
?
????if (element.addEventListener)
????{
????????element.addEventListener(type, handler, false);
????}
????else if (element.attachEvent)???? //for IE
????{
????????element.attachEvnet(“on” + type, handler);
????}
????else
????{
????????element[“on” + type] = handler;
????}
}
?下面是個(gè)輸入框
當沒(méi)有獲取焦點(diǎn)時(shí)，顯示灰色的提示信息： ?
當用戶(hù)輸入時(shí)，隱藏提示文字，且恢復為默認色： ?
當輸入框失去焦點(diǎn)，如果輸入為空，需還原提示信息： ?
要求： a) 寫(xiě)出HTML和CSS代碼 b) 用JavaScript實(shí)現功能
?
??
?請給JavaScript的String 原生對象添加一個(gè)名為trim 的原型方法，用于截取空白字符。要求
?
alert(" taobao".trim());???? // 輸出 "taobao"
alert(" taobao ".trim());??? // 輸出 "taobao"
? ?
?
String.prototype.trim = function() {???????? ?
????return this.replace(/^\s+|\s+$/g, "");??? ?
};
?請編寫(xiě)一個(gè)JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個(gè)對象，如：
?
var url = “http://www.taobao.com/index.php?key0=0&key1=1&key2=2.....”
var obj = parseQueryString(url);
alert(obj.key0)? // 輸出0
? ?
?
function parseQueryString ( name ){
??name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
??var regexS = "[\\?&]"+name+"=([^&#]*)";
??var regex = new RegExp( regexS );
??var results = regex.exec( window.location.href );
??if( results == null )
????return "";
??else
????return results[1];
}
請指出下面代碼中不符合x(chóng)HTML 1.0規范的地方，說(shuō)明理由，并寫(xiě)出改善后的代碼：
??
小明的表白
- 小明說(shuō)：
- ”淘寶網(wǎng)，天天上?！?/dd>
?????? ?
- ”淘我喜歡！”
?????? ?
?????? ?
? ?
?不合理的地方： 1、 h1元素包含p元素，理由：h1元素內不能包含其他塊級元素；?
2、 dt元素包含p元素和div元素，理由：dt元素內不能包含其他塊級元素；?
3、 p元素包含div元素，理由：p元素內不能包含其他塊級元素；?
4、 i元素，理由：i表樣式斜體，不符合語(yǔ)義化。?
5、 b元素，理由：b表樣式粗體，不符合語(yǔ)義化。?
?請把以下用于連接字符串的JavaScript代碼修改為更有效率的方式
??
var htmlString =
????"
- ";
-
????????+ NEWS[i].LINK + ">"
????????+ NEWS[i].TITLE + "
";
for (var i = 0; i < NEWS.length; i++) {
????htmlString += "
}
htmlString += "
? ?
?
var htmlString ?= ?"
- ";
- " ?
??? ? ? + newsItem.TITLE ?+ "
";
for ?(var i ?= ?0; ?i ?< ?NEWS.length; ?i++)?
{
????var newsItem = NEWS[i];
??? htmlString ?+= ?"
}
htmlString ?+= ?"
?請給Array本地對象增加一個(gè)原型方法，它用于刪除數組條目中重復的條目(可能有多個(gè))，返回值是一個(gè)包含被刪除的重復條目的新數組。
?
Array.prototype.distinct = function() {
????var ret = [];
????for (var i = 0; i < this.length; i++)
????{
????????for (var j = i+1; j < this.length;) {???
????????????if (this[i] === this[j]) {
??? ? ? ? ????? ret.push(this.splice(j, 1)[0]);
??? ? ????? } else {
??? ? ? ? ????? j++;
??? ? ????? }
??????? }
?????}
?????return ret;
}
//for test
alert(['a','b','c','d','b','a','e'].distinct());
?請根據下面的描述，用JSON語(yǔ)法編寫(xiě)一個(gè)對象: “小明今年22歲，來(lái)自杭州。興趣是看電影和旅游。他有兩個(gè)姐姐，一個(gè)叫小芬，今年25歲，職業(yè)是護士。還有一個(gè)叫小芳，今年23歲，是一名小學(xué)老師?！?
var person = ?
?
var person = {"name":"小明","age":"22","form":"杭州","interest":["電影","旅游"],"sister":
[{"name":"小芬","age":"25","job":"護士"},{"name":"小芳","age":"23","job":"小學(xué)老
師"}]};
?請改善以下HTML代碼，使其符合x(chóng)HTML 1.0規范
?
????onClick='doSomething();'> ?
????
?
? ?
?
??? onclick='doSomething();'> ?
???
?
粵公網(wǎng)安備 44010402000066號