端面试笔试题"/>
2019年前端面试笔试题
前端笔试题
-
什么是web标准?
WEB标准不是某一个标准,而是一系列标准的集合。网页主要由三部分组成:结构(Structure)、表现(Presentation)和行为 (Behavior)。
对应的标准也分三方面:结构化标准语言主要包括XHTML和XML,表现标准语言主要包括CSS,行为标准主要包括对象模型(如 W3C DOM)、ECMAScript等。这些标准大部分由W3C起草和发布,也有一些是其他标准组织制订的标准,比如ECMA(European Computer Manufacturers Association)的ECMAScript标准。 -
请解释一下DOCTYPE的作用,有DOCTYPE和没有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, 11, 30, 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 = “.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方案,不少于两种
-
**请设计一套方案,用于确保页面中JS加载完全
-
判断一个字符串中出现次数最多的字符,统计这个次数
更多推荐
2019年前端面试笔试题
发布评论