1. JavaScript is a scripting language designed for interaction with web pages. Its composition
ECMAScript (core) DOM (document object model) BOM (browser object model)
1.1ECMAScript
ECMAScript defined by ECMA-262 has no dependency with the web browser. ECMA-262 only defines the basics of this language and provides core language functions.
ECMAScript is a scripting language standardized through ECMA-262. ECMA-262 stipulates languages: syntax, type, statement, keyword, reserved word, operator, object
1.2 DOM (Document Object Modle)
DOM is an application programming interface for XML but has been extended for HTML, providing methods and interfaces for accessing and manipulating web content.
DOM maps the entire page into a multi-layer node structure. Each component in the HTML or XML page is a certain type of node, which contains different types of data.
1.3 BOM (Bower Object Model)
Control the part other than the page displayed by the browser. The BOM only processes the browser windows and frameworks, and provides methods and interfaces for interacting with the browser.
2. <script> elements
2.1 Reference javascript file
External reference to javascript files:
The code copy is as follows:
<script type="text/javascript" src="../../XX.js"></script>
Page embed javascript code
The code copy is as follows:
<script type="text/javascript">
//javascript code
</script>
JavaScript code contained within the <script> element will be explained in sequence from top to bottom
2.2 Properties of <script> elements
defer delay script: Tell the browser to download immediately, the script will be delayed until the entire page has been parsed before it is executed. defer is only suitable for script files introduced externally
The code copy is as follows:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" defer="defer" src="example.js"></script>
</head>
</html>
Although the <script> tag is located in the <head> tag, demo.js will be delayed until the browser encounters</html>.
async asynchronous script: the page must wait for the script to be downloaded and executed, so as to load other contents of the page asynchronously
Like defer, it is only applicable to externally imported script files. Async tells the browser to download files immediately, but unlike defer, the marking of async scripts does not guarantee execution in the order in which they are specified. It is recommended that asynchronous scripts do not modify the DOM during loading.
The code copy is as follows:
<!--Async script-->
<script type="text/javascript" async="async" src="example1.js"></script>
<script type="text/javascript" async="async" src="example2.js"></script>
2.3 Properties of <noscript> elements
The code copy is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<!--Delay script-->
<scripttype="text/javascript" defer="defer" src="example.js"></script>
<!--Guide script-->
<script type="text/javascript" async="async" src="example1.js"></script>
<script type="text/javascript" async="async" src="example2.js"></script>
</head>
<body>
<noscript>
<p>This page shows that browser support (enabled) Javascript is required
</noscript>
</body>
</html>
The browser does not support scripts
The browser supports scripts, but the script is disabled, and the browser will display the content in <noscript>
This page will display a message to the user if the script is invalid, and in a script-enabled browser, the user will never see it
The above is all about this article. I hope you can like it. This series will continue to be updated.