HTML+JS+CSS interview questions

1. How to eliminate duplicate elements in an array?

var arr1 = [1,2,2,2,3,3,3,4,5,6],
var arr2 = [],
for( var i = 0 , len = arr1.length ; i< len ; i++ ){
    if( arr2.indexOf(arr1[i]) < 0 )
        arr2.push(arr1[i]);
}
document.write(arr2);

 

2. Block elements, line elements, empty elements

Block elements, also known as block elements, usually start (and end) with a new line when displayed by the browser.

Common block elements:

address、blockquote、center、dir、div、dl、form、h1-h6、table、td、th、tr、p、ul、ol等

Common row elements:

a、b、code、em、img、input、label、select、span、strong、textarea等

Common empty elements:

area、link、col、meta、track等

 

3. Browser Kernel

IE browser - Trident kernel

Firefox browser - Gecko kernel

Safari browser - Webkit kernel

Opera Browser - Presto Core

Chrome Browser - Blink Core

 

Commonly used DOCTYPE specific declarations

 

1.htm5  :  <!DOCTYPE html>

 

2.html 4.01: Strict mode includes all HTML elements and attributes, excluding presentational and deprecated elements (such as font), and framesets are not allowed; transition mode includes all HTML elements and attributes, including presentational For deprecated and deprecated elements (such as font), framesets are not allowed; frame mode is equivalent to transition mode, but frameset content is allowed. 


HTML 4.01 Strict :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

 

3.XHTML 0.1: The first three modes are the same as above, XHML must be written in well-formed XML. 

XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

XHTML 1.0 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

XHTML 1.0 Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 

XHTML 1.1 This DTD is equivalent to XHTML 1.0 Strict, but allows adding models. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 

5. Draw a triangle with pure CSS with a bottom edge of 100px

 

<div id="sanjiaoxing"></div>


#sanjiaoxing{
    width: 0px;
    height: 0px;
    border-left: 50px slide transparent;
    border-right: 50px slide transparent;
    border-bottom: 100px slide transparent;
}

 

6.js randomly generated numbers

 

Math.random(); /*The result is a random number between 0-1 (including 0, excluding 1)*/
Math.floor(num); /*The parameter num is a number, and the result of the function is the integer part of num*/
Math.round(num); /*The parameter num is a number, and the result of the function is the rounded integer of num*/

Math.ceil(n); /*Return the smallest integer greater than or equal to n. */
/*When using Math.ceil(Math.random()*10);, the random integers from 1 to 10 are mainly obtained, and the probability of taking 0 is extremely small. */

Math.round(n); /*Return n rounded integer value. */
/*Use Math.round(Math.random()); to obtain random integers from 0 to 1 in a balanced manner.
When using Math.round(Math.random()*10);, random integers from 0 to 10 can be obtained in a basic equilibrium, and the probability of obtaining the minimum value of 0 and the maximum value of 10 is less than half. */

Math.floor(n); /*Return the largest integer less than or equal to n. */
/*When using Math.floor(Math.random()*10);, random integers from 0 to 9 can be obtained evenly. */

 

7. Please explain in as much detail as possible how AJAX works

Create ajax object (XMLHttpRequest/ActiveXobject(Microsoft.XMLHttp))

Determine the data transmission method (GET/POST)

open link open()

send send()

When the ajax object completes the fourth step (onreadystatechange) data reception is completed, judge the http response status (status) between 200-300 or 304 (cache) to execute the callback function

 

8. Native js implements ajax process

 

var Ajax = {
    get: function (url,fn){
        var obj=new XMLHttpRequest(); // The XMLHttpRequest object is used to exchange data with the server in the background          
        obj.open('GET',url,true);
        obj.onreadystatechange=function(){
            if (obj.readyState == 4 && obj.status == 200 || obj.status == 304) {
                // readyState==4 indicates that the request has been completed
                fn.call(this, obj.responseText); //Get data from server
            }
        };
        obj.send(null);
    },
    post: function (url, data, fn) {
        var obj = new XMLHttpRequest();
        obj.open("POST", url, true);
        obj.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Content encoding type when sending information to the server
        obj.onreadystatechange = function () {
            if (obj.readyState == 4 && (obj.status == 200 || obj.status == 304)) {  // 304未修改
                fn.call(this, obj.responseText);
            }
        };
        obj.send(data);
    }
}

 

jQuery implements ajax

 

$.ajax({
    type: "POST",
    url: "index.php",
    dataType: "json",
    data:{
        "val1": "abc",
        "val2": 123,
        "val3": "456"
    },
    beforeSend: function(){

    },
    success: function(msg){
        console.log(msg)
    },
    error: function(){
         console.log("error")
    }
})

  

 

9. How to detect that a variable is of type string in js? Please write a function implementation

 

typeof(obj) == 'string';

obj.constructor == string;

 

10. What is the difference between browser standards mode and quirks mode?

Box model doesn't make sense

 

11. What data types does JavaScript's typeof return?

string  number  boolean  undefined  object  function

 

12. Count the number of letters in a string, or the letter with the most occurrences

var str = "aaaabbbccccddfgh";
var obj = {};
for(var i=0;i<str.length;i++){
    var v = str.charAt (i);
    if(obj[v] & obj[v].value == v){
        obj[v].count = ++ obj[v].count;
    }else{
        obj [v] = {};
        obj[v].count = 1;
        obj[v].value = v;
    }
}
for(key in obj){
    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1
}

 

 13. Variable promotion

Write the output of the following program

function test() {
    console.log(a);
    console.log(foo());
    var a = 1;
    function foo() {
        return 2;
    }
}

test();

The output is undefined 2

 

Let's look at a few more examples

    var scope="global variable";
    function checkscope(){
        var scope="local variable";
        function nested(){
            var scope = "local variables in nested scopes";
            alert(scope);//Output: local variables in nested scopes
        }
        nested();
        alert(scope);//Output: local variables
    }
    checkscope();
    alert(scope);//Output: global variable

As you can see from the above example, the scope of local variables is only inside the function, and after the function body is exited, the local variables will be destroyed. In the nested() function, although another scope is declared, the scope in nested() is a local variable, but it has the same name as the global variable, not a global variable. Therefore, although the scope is assigned as " A local variable in a nested scope", but this is just a variable with the same name as the global variable, and does not change the value of the global variable.

 

Let us further understand the problem of function scope with the following example.

    var scope="global variable";
    function checkscope(){
        var scope="local variable";
        function nested(){
            scope = "local variables in nested scopes";
            alert(scope);//Output: local variables in nested scopes
        }
        nested();
        alert(scope);//Output: local variables in nested scopes
    }
    checkscope();
    alert(scope);//Output: global variable

 In the above part of the code, in the nested() function, we did not use var to declare the scope, so the scope of the scope here is promoted, that is, we reset the value of the scope in the checkscope, so When outputting, the output is "local variables in nested scopes".

 

 14. What is a pseudo-array in JavaScript? How to convert pseudo-array to standard array?

Pseudo-arrays (array-like): You cannot call array methods directly or expect any special behavior from the length property, but you can still traverse them with true array traversal methods. Typical is the argument parameter of the function, as well as calls such as getElementByTagName, document.childNodes, etc., which all return NodeList objects are pseudo-arrays. Arrays can be converted to real Array objects using Array.prototype.slice.call(fakeArray).

function log(){
    var args = Array.prototype.slice.call(arguments);
    //In order to use the unshift array method, convert the argument to a real array
    args.unshift('(app)');

    console.log.apply(console, args);
};

 

 15. Please write out the comment code format of HTML, JavaScript, CSS, Java, PHP, Python respectively.

<!--
<html>
</html>
--!>

 

//javascript

/*
*javascript
*/

 

/* css */

 

//java

/*
*java
*/

 

//PHP
#PHP
/*
*PHP
*/

 

#Python
'''
Python
'''

 

 

 

 

Guess you like

Origin http://10.200.1.11:23101/article/api/json?id=326624734&siteId=291194637