Some basic questions about JS-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Some basic questions about JS

jacklove

May 21, 2018 am 10:21 AM

javascript Base question

We often encounter some js problems during development and learning. This article will introduce some related js basic issues.

What is the order in which CSS and JS are placed on the web page?

Generally we put the CSS in the head tag and the JS code at the end of the body code.

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>JS基础</title>
  <style>
    
    /* 这里放css代码 */      
    
  </style></head><body>
  <!-- 这里放HTML代码 -->
    
  <script>

Copy after login

Explanation of white screen and FOUC

White screen: If you put the CSS style at the bottom, in some scenarios (new window opening, refresh, etc.) the page will appear with a white screen instead of the content being displayed gradually. If you use @ Import tag, even if the CSS link is placed and placed in the header, a white screen may occur.

The script will block the display of subsequent content

The script will block the download of subsequent components
For images and CSS, they will be loaded concurrently during loading (such as loading two at the same time under one domain name) file), but when loading JS, concurrency is disabled and other content is prevented from being downloaded, so placing JS at the top of the page will also cause a white screen.

FOUC (Flash of Unstyled Content) Unstyled content flash: If you put the CSS style at the bottom, for IE browser, in some scenarios (click on the link, enter the URL, use the bookmark to enter, etc.), it will The FOUC phenomenon will occur (the unstyled content is gradually loaded, and the page suddenly displays the style after the CSS is loaded). For Firefox, the FOUC phenomenon will always occur.

What are the functions of async and defer? What's the difference?

Without async and defer, the current script will be loaded and executed immediately during browser loading, and the browser will be blocked from rendering the document elements under the script tag. However, with async and defer, the browser can The process of loading and rendering subsequent documents is carried out in parallel with the loading and execution of JS scripts, that is, loading is asynchronous.

The difference between the two is mainly when the script is executed after it is downloaded. defer will delay the execution of the script according to the loading order until the document is parsed and displayed, while async will not matter the order of your declaration, as long as it is loaded. Execute immediately, not in order.
Generally speaking defer is more in line with our usage scenarios.

Rendering mechanism of web pages

Parses HTML tags and builds DOM trees

Parses CSS tags and builds CSSOM trees

Combines the DOM and CSSOM into a rendering tree (render tree) perform basic layout

Calculate the geometric structure of each node

Draw each node to the screen and present it to the user

JavaScript defines several data types ? Which are simple types? Which are complex types?

Null: It is a null pointer

Underfined: There is a pointer but it does not point to any space

Boolean: Boolean value, true or false (true,false)

Number: Numeric type.

String: String type, represented by single quotes or double quotes.

Object: Object, the core concept of JS, the most important data type. (Everything is an object)

The first five types are simple types, and Object is a complex type.

What do NaN, undefined, and null represent respectively?

NaN: The meaning is Not a number, indicating a non-number, not equal to any value, including himself, (one is not equal to any Numeric type of value)

underfined: It is the only value of Underfined, which means that the variable is only declared but not initialized, which means that there is this pointer, but this pointer does not point to any space

null: Null The only value represents a null pointer, which is something that does not exist.

The functions and differences between typeof and instanceof?

The function of typeof can determine the data type of a value returned and put it in the operation In front of the number, the operand can be of any type.

function a(){}
a(){}typeof a"function" //The operand is the function returning functiontypeof 123421"number"typeof "32423423423""string"typeof true"boolean" typeof undefined"undefined" //Use this to check undefined variables typeof window"object" //All others return object

instanceof is used to determine whether a variable is an instance of an object, because typeof encounters The object type will be returned for null, array, and object, so when we want to determine whether an object is an array, or determine whether a variable is an instance of an object, we must use instanceof

Code Problem

1. The following code determines whether a variable is a number, string, Boolean, or function

function isNumber(el){ 
 if ((typeof el)==="Number"){   return true;
   }  else { 
return false
  };
}function isString(el){ 
  if ((typeof el)==="String"){   return true;
   }  else { 
return false
  };
}function isBoolean(el){ if ((typeof el)==="Boolean"){   return true;
   }  else { 
return false
  };
}function isFunction(el){  if ((typeof el)==="Function"){   return true;
   }  else { 
return false
  };
}var a = 2, 
b = "jirengu", 
c = false;alert( isNumber(a) ); //truealert( isString(a) ); //falsealert( isString(b) ); //truealert( isBoolean(c) ); //truealert( isFunction(a)); //falsealert( isFunction( isNumber ) ); //true

Copy after login

2. The output result of the following code is?

Some basic questions about JS

##I am a picture

3.The output result of the following code is?

var a = 1;

a a;typeof a 2;

The result is number2, (typeof has a very high priority, so typeof a is calculated first and the result is number, and 2 is included, so it is number2)

4. Traverse the array and print each element in the array. Square of one term

var arr = [3,4,5]// todo..// Output 9, 16, 25

The code is as follows:

Some basic questions about JS

I am a picture

5. Traverse JSON and print the values inside

var obj = { name: 'hunger', sex: 'male', age: 28}//todo ...// Output name: hunger, sex: male, age:28

The code is as shown in the picture: (reference here)

Some basic questions about JS

I am the picture

6. What is the output of the following code? Why

console.log(a);var a = 1;console.log(a);console.log(b);

The first console.log(a ); The output is underfined because JS will promote global variables, and a is only declared but not assigned.
The second console.log(a); output is 1, because it assigns 1 to a after var a =1;.
The third console.log(b); output will report an error because b is not declared or assigned a value.

This article introduces some basic introduction issues. If you want more related knowledge, please pay attention to the php Chinese website.

Related recommendations:

How to use front-end js to modularize require.js

A picture implemented with CSS Completed button example

The above is the detailed content of Some basic questions about JS. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

4 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

3 weeks ago By DDD

InZoi: How To Apply To School And University

1 months ago By DDD

How to fix KB5055518 fails to install in Windows 10?

3 weeks ago By DDD

Where to find the Site Office Key in Atomfall

4 weeks ago By DDD

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7889

Java Tutorial

1650

CakePHP Tutorial

1411

Laravel Tutorial

1302

PHP Tutorial

1248

Related knowledge

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to solve the problem that jQuery cannot obtain the form element value Feb 19, 2024 pm 02:01 PM

To solve the problem that jQuery.val() cannot be used, specific code examples are required. For front-end developers, using jQuery is one of the common operations. Among them, using the .val() method to get or set the value of a form element is a very common operation. However, in some specific cases, the problem of not being able to use the .val() method may arise. This article will introduce some common situations and solutions, and provide specific code examples. Problem Description When using jQuery to develop front-end pages, sometimes you will encounter

How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

What are the questions in the Rulong 8 Wine Master exam? Feb 02, 2024 am 10:18 AM

What are the questions involved in the Yulong 8 Wine Master exam? What is the corresponding answer? How to pass the exam quickly? There are many questions that need to be answered in the Master of Wine Examination activities, and we can refer to the answers to solve them. These questions all involve knowledge of wine. If you need a reference, let’s take a look at the detailed analysis of the answers to the Yakuza 8 Wine Master exam questions! Detailed explanation of answers to questions in the Rulong 8 Wine Master exam 1. Questions about "wine". This is a distilled liquor produced by a distillery established by the royal family. It is brewed from the sugar of sugarcane grown in large quantities in Hawaii. What is the name of this wine? Answer: Rum 2. Question about "wine". The picture shows a drink made from dry ginseng and dry vermouth. It is characterized by the addition of olives and is known as "cockney"

How to solve the problem of the start menu that cannot be used after win11 installation Jan 06, 2024 pm 05:14 PM

Many users have tried to update the win11 system, but found that the start menu cannot be used after the update. This may be because there is a problem with the latest update. We can wait for Microsoft to fix or uninstall these updates to solve the problem. Let's take a look at it together. Solution. What to do if the start menu cannot be used after win11 is installed. Method 1: 1. First open the control panel in win11. 2. Then click the "Uninstall a program" button below the program. 3. Enter the uninstall interface and find "View installed updates" in the upper left corner. 4. After entering, you can view the update time in the update information and uninstall all recent updates. Method 2: 1. In addition, we can also directly download the win11 system without updates. 2. This is a product without the most

Frequently Asked Questions about Wuhuami's new breakthrough test: February 28, we look forward to your arrival! Feb 26, 2024 pm 05:22 PM

Wuhua Mixin has confirmed that it will conduct a breaking test on February 28. This time we will mainly solve the common problems of the breaking test, including whether you have participated in previous tests, are you eligible this time, the start and end of the test, and the pre-download time? Let’s take a look at what device platforms are supported and other content. Frequently Asked Questions about Wuhuami’s new breakthrough test: February 28, we look forward to your arrival! 1. What is the nature of the "breaking test"? This test is a limited billing and file deletion test for Android. After the test, the game data of this test will be deleted. 2. Have you ever participated in the "Opening Test" or "Entry Test"? Do you have the qualifications to participate in the "Breaking Test" this time? If you have participated in the "Opening Test" or "Entry Test", please scan the QR code below to go to " To players who have participated in the closed beta

See all articles