19年前端筆試題小結（一）詳情 - javascript,css,html5,前端,筆試雲魚博客

什麼是web標準？
WEB標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行為（Behavior）。
對應的標準也分三方面：結構化標準語言主要包括XHTML和XML，表現標準語言主要包括CSS，行為標準主要包括對象模型（如 W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發佈，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。
請解釋一下DOCTYPE的作用，有DOCTYPE和沒有DOCTYPE有什麼區別？
<!DOCTYPE>聲明位於位於HTML文檔中的第一行，處於 <html> 標籤之前。告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
XHTML與HTML有什麼區別
- XHTML 元素必須被正確地嵌套。
- XHTML 元素必須被關閉。
- 標籤名必須用小寫字母。
- XHTML 文檔必須擁有根元素。

嚴格模式與混雜模式——如何觸發這兩種模式，區分它們有何意義。

當瀏覽器廠商開始創建與標準兼容的瀏覽器時，他們希望確保向後兼容性。為了實現這一點，他們創建了兩種呈現模式：標準模式和混雜模式。

在標準模式中，瀏覽器根據規範呈現頁面；在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。
混雜模式通常模擬老式瀏覽器的行為以防止老站點無法工作。
瀏覽器根據DOCTYPE是否存在以及使用的哪種DTD來選擇要使用的呈現方法。如果XHTML文檔包含形式完整的DOCTYPE，那麼它一般以標準模式 呈現。對於HTML4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面以標準模式呈現。包含過渡DTD和URI的DOCTYPE也導致頁面以標準 模式呈現，但是有過渡DTD而沒有URI會導致頁面以混雜模式呈現。DOCTYPE不存在或形式不正確會導致HTML和XHTML文檔以混雜模式呈現。
根據DOCTYPE是否存在選擇呈現模式，被稱為DOCTYPE切換或DOCTYPE偵測。
DOCTYPE切換是瀏覽器用來區分遺留文檔和符合標準的文檔的手段。無論是否編寫了有效的CSS，如果選擇了錯誤的DOCTYPE，那麼頁面就將以混雜 模式呈現，其行為就可能會有錯誤或不可預測。因此一定要在每個頁面上包含形式完整的DOCTYPE聲明，並且在使用HTML時選擇嚴格的DTD。

寫出3個使用this的典型應用

（1）在html元素事件屬性中使用，如：

<input type=”button” onclick=”showInfo(this);” value=”點擊一下”/>

（2）構造函數

function Animal(name, color) {
　　this.name = name;
　　this.color = color;
}

（3）input點擊，獲取值

<input type="button" id="text" value="點擊一下" />
<script type="text/javascript">
    var btn = document.getElementById("text");
    btn.onclick = function() {
        alert(this.value);    //此處的this是按鈕元素
    }
</script>

(4)apply()/call()求數組最值

var  numbers = [5, 458 , 120 , -215 ]; 
var  maxInNumbers = Math.max.apply(this, numbers);  
console.log(maxInNumbers);  // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers);  // 458

數組去重

// 方法一
var norepeat = funtion(arr){
    return arr.filter(function(val, index, array){
        return array.indexOf(val) === index;
    });
}
norepeat()


// 方法二
var set = new Set(arr);

數組求和

var sum = function(arr){
    return arr.reduce(function(x, y){
        return x + y
    });
}

sum()

如何顯示/隱藏一個DOM元素？
Display
visibility
Opacity

JavaScript中如何檢測一個變量是一個String類型？

function isString(str){
 return (typeof str == "string" || str.constructor == String);
}

網頁中實現一個計算當年還剩多少時間的倒數計時程序，要求網頁上實時動態顯示“××年還剩××天××時××分××秒”

function counter() { 
    var date = new Date(); 
    var year = date.getFullYear();
    var date2 = new Date(year, 12, 31, 23, 59, 59);
    /*轉換成秒*/
    var time = (date2 - date) / 1000;
    var day = Math.floor(time / (24 * 60 * 60))
    var hour = Math.floor(time % (24 * 60 * 60) / (60 * 60))
    var minute = Math.floor(time % (24 * 60 * 60) % (60 * 60) / 60);
    var second = Math.floor(time % (24 * 60 * 60) % (60 * 60) % 60);
    var str = year + "年還剩" + day + "天" + hour + "時" + minute + "分" + second + "秒";
    console.log(str);
}
window.setInterval("counter()", 1000);

補充代碼，鼠標單擊Button1後將Button1移動到Button2的後面.

<div>
<input type="button" id ="button1" value="1" onclick="moveBtn(this);">
<input type="button" id ="button2" value="2" />
</div>
<script type="text/javascript">
function moveBtn(obj) {
var clone = obj.cloneNode(true);
var parent = obj.parentNode;
parent.appendChild(clone);
parent.removeChild(obj);
}
</script>

JavaScript中如何對一個對象進行深度clone

方法一：

function deepClone(obj){
  var str = JSON.sringify(obj);
  var newobj = JSON.parse(str);
  return newobj;
 }

方法二：

//深克隆
function deepClone(obj){
    if (!obj) { return obj; }
    var o = obj instanceof Array ? [] : {};
    for(var k in obj){
        if(obj.hasOwnProperty(k)){
            o[k] = typeof obj[k] === "object" ? deepClone(obj[k]) : obj[k];
        }
    }
    return o;
}

鼠標點擊頁面中的任意標籤，alert該標籤的名稱．（注意兼容性）

<script type="text/javascript">
   function elementName(evt){
    evt = evt|| window.event;
    var selected = evt.target || evt.srcElement;
    alert(selected.tagName);
   }
   
   window.onload = function(){
    var el = document.getElementsByTagName('body');
    el[0].onclick = elementName;
   }
  </script>

請編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析為一個對象

var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;


function parseQueryString(argu){
    var str = argu.split('?')[1];
    var result = {};
    var temp = str.split('&');
    for(vari=0; i<temp.length; i++){
        var temp2 = temp[i].split('=');
        result[temp2[0]] = temp2[1];
    }
    return result;
}

如何點擊每一列的時候alert其index?

<ul id=”test”>
    <li>這是第一條</li>
    <li>這是第二條</li>
    <li>這是第三條</li>
</ul>

(function A() {
    var index = 0;
    var ul = document.getElementById("test");
    var obj = {};
    for (var i = 0, l = ul.childNodes.length; i < l; i++) {
        if (ul.childNodes[i].nodeName.toLowerCase() == "li") {
            var li = ul.childNodes[i];
            li.onclick = function() {
                index++;
                alert(index);
            }
        }
    }
})();

請給出異步加載js方案，不少於兩種
1）defer，只支持IE
2）async/await
3）創建script，插入到DOM中，加載完畢後callBack，見代碼：

請設計一套方案，用於確保頁面中JS加載完全

function loadScript(url, callback){
    var script = document.createElement("script")
    script.type = "text/javascript";
    if (script.readyState){ //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" || script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else { //Others: Firefox, Safari, Chrome, and Opera
        script.onload = function(){
            callback();
        };
    }
    script.src = url;
    document.body.appendChild(script);
}

loadScript('http:/xxx.min.js',function(){
    alert('ok');
})