Table of contents
foreword
Since I was preparing for the written test interview while submitting my resume, I was delighted and surprised to receive the written test information, and I thought about how to pass the written test. The following is a record of the questions I prepared for the written test in the past two days.
This article is based on Niuke.com's interview questions to check for omissions and fill in vacancies.
HTML
The HTML written test questions are mainly about the application of tags.
table structure
There are two main structures of the table, one is the caption tag as the title, and the other is the thead as the body.
Inside are tr, td. (row, column)
What controls the ranks is col, rol.
Two ways to open a
The attribute set by the opening method of the link is target.
You only need to remember two kinds:
_blank: open the link in a new window;
_self: open the link in the current window.
custom list
Custom lists dl, dd, dt.
dl is a list of definitions, dd defines terms (subtitles), and dt defines descriptions.
Remember these three separately.
single choice, multiple choice
Both single-choice and multiple-choice are input, the difference lies in the type, the single-choice type value is radio, and the multi-choice type value is checkbox. name is used for grouping, and checked is used to set whether it is selected.
Audio and Video Tags
Audio is audio, where controls are audio controls;
The video is video, controls is the video space, and the function after onerror is the error message.
CSS articles
pseudo element
When CSS renders a document, pseudo-elements can add an element (called a label) to HTML through CSS, which cannot be found in the document tree. Pseudo-elements are displayed as CSS styles, and the usage is the same as that of ordinary elements.
have to be aware of is:The default is inline (the setting size needs to be modified), and there must be content.
There are two main types: div::after, div::before.
clear float
Why clear float?
There are multiple sub-boxes in a box, and the sub-boxes are set to float, but the parent box is not set, which will cause the height of the parent box to collapse.
Solution:
1. Set the height of the parent box (not recommended);
2. Add a label behind the parent box, but it must be a block-level element, and add a clear attribute to the label;
3. Add oveflow:hidden attribute to the parent box;
4. Add after pseudo-element. The element css is as follows:
.father::after {
content: '',
display: block;
clear: both;
visibility: hidden;//相当于display: none
*zoom: 1;//IE6，7专有，兼容性
}
Fixed positioning fixed
The browser is used as the visual window, which has nothing to do with the parent element and does not scroll with the scroll bar.
Off-label, (special absolute positioning)
em
Em takes font-size as the standard, and 4em is four times the size of the text.
CSS triangle
It's very simple, set the size of the border, and you can choose the color of each border.
It's fine to make the color that stands out if you want it transparent.
JS details
prototype chain
Take a topic as an example:
请补全JavaScript函数，要求以Boolean的形式返回第一个参数是否属于第二个参数对象的实例。
function _instanceof(left,right) {
// 补全代码
}
If the first parameter is the instance object of the second parameter, then according to the prototype chain: the
prototype object of the constructor can point to the constructor.
We can write code:
function _instanceof(left,right) {
// 补全代码
while(left.__proto__) {
if(left.__proto__.contrustor = right) {
return true;
}
left = left.__proto__;
}
return false;
}
Method of concatenating strings
Method 1: + sign connection;
Method 2: template string, `` used with ${};
Method 3: join() method;
Method 4: concat() method;
recursion
Here is a recursive algorithm. Take simple factorial as an example. For example, if I ask for the factorial of a number, there are many ways. The simpler one is recursion:
function _factorial(number) {
// 补全代码
if(number < 2) return 1;
return number * _factorial(number - 1)
}
JS built-in objects
sort ascending and descending
First of all, sort will change the original array.
arr.sort itself is sorted in ascending order, if you want to sort in descending order:
arr.sort((a, b) => {
b - a})
string uppercase and lowercase
Uppercase: tuUppercase;
lowercase: toLowercase.
Methods of the Objects object
Object.keys(obj): Traverse attribute names;
Object.value(obj): Traverse key values;
Object.entries(obj): The method returns an array whose members are all traversable (not inherited) of the parameter object itself ( enumerable) property's key-value array
usage of date
function _date(number) {
// 补全代码
var date = new Date(number);
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
return year + '-' + month + '-' + day
}
Define the object, get the year, month, and day, and pay attention to adding one to the month. This is the only caveat.
Number rounding
Math.floor(value): Take an integer down
Math.round(value): Return a rounded value
Math.trunc(value): Directly remove the value after the decimal point
The maximum and minimum values of an array
Math object, to use the expansion operator of the array:
Math.max(...arr)
Math.min(...arr)
Web API
Dynamically add elements
请补全JavaScript函数，根据参数数组创建li元素。
要求：
1. li元素的个数和数组的长度一样
2. li元素的内容是数组中的每个元素
3. 将创建的所有li元素插入到ul中
practice:
<html>
<head>
<meta charset=utf-8>
</head>
<body>
<ul></ul>
</body>
<script type="text/javascript">
function createLi(array){
// 补全代码;
var ul = document.querySelector('ul');
for(var i = 0; i < array.length; i++) {
var li = document.createElement('li')
li.innerHTML += array[i]
ul.appendChild(li)
}
}
</script>
</html>
Get the ul first, then create an element through createElement, add content to the element, and finally put the content through appendChild.
stop bubbling
event.stopPropagation() method: prevent bubbling;
event.preventDefault() method: prevent the default event;
return false: prevent bubbling and default events.
window object acquisition
window.location.href Returns the href (URL) of the current page
window.location.hostname Returns the domain name of the web host
window.location.pathname Returns the path or file name of the current page
window.location.protocol Returns the web protocol used (http: or https:)
window.location.assign loads a new document