Table of contents
Embed JavaScript code in HTML documents
Write JavaScript code in a script file
JavaScript code execution order
Several important concepts in JavaScript
JS (single-line or multi-line) comments
Knowledge about JavaScript
Regarding the development of front-end web pages, Html is the structure and content of building pages
Css is the style to beautify the page
JavaScript is to add dynamic interface and dynamic data to the page
Advantages of JavaScript
JavaScript is the most popular client-side scripting language , which is easy to learn. After learning something, you can use some JavaScript-based frameworks to develop front-end or back-end applications;
JavaScript can run in a web browser without configuring any special runtime environment;
JavaScript has a wide range of applications, such as mobile application development, desktop application development, Web game development, etc.
JavaScript has a large number of high-quality frameworks and libraries, with which the development time can be greatly reduced.
The realm of JavaScript
JavaScript can be used in various areas of web development, such as:
Web application development : The web pages we browse in daily life are all composed of HTML, CSS, and JavaScript. JavaScript can update the style of elements in the web page in real time, and can realize the interaction between people and web pages (such as monitoring whether the user clicks mouse or press a button, etc.), you can also add some cool animations to the web page;
Mobile application development : In addition to web application development, JavaScript can also be used to develop applications on mobile phones or tablets, and we can also use some excellent frameworks (such as React Native) to make development easier;
Web games : those small games we have played on web pages can all be implemented using JavaScript;
Back-end Web application development : In the past, we used JavaScript to develop the front-end part of Web applications, but with the emergence of Node.JS (a JavaScript runtime environment), JavaScript can also be used to develop the back-end of Web applications part.
The composition of JavaScript
Complete JavaScript is composed of the following three parts:
Core (ECMAScript): Provides the syntax and basic objects of the language;
Document Object Model (DOM): Provides methods and interfaces for processing web content;
Browser Object Model (BOM): Provides methods and interfaces for interacting with the browser.
Features of JavaScript
1) Interpreted scripting language
JavaScript is an interpreted scripting language. Code written in JavaScript does not need to be compiled and can be parsed and run directly by the browser .
2) Object-oriented
JavaScript is an object-oriented language . Using JavaScript, you can not only create objects, but also manipulate and use existing objects.
3) weak typing
JavaScript is a weakly typed programming language, and there are no strict requirements on the data types used . For example, a variable can be initialized to any type, and the type of the variable can be changed at any time.
4) Dynamic
JavaScript is an event-driven scripting language that can respond to user input without the help of a web server. It is possible to respond directly to these events.
5) Cross-platform
JavaScript does not depend on the operating system and can run in the browser . Therefore, a JavaScript script can run on any system after it is written, as long as the browser on the system supports JavaScript.
First JavaScript program
Embed JavaScript code in HTML documents
Step 1, create a new HTML document
Step 2
<head>, insert a<script>tag inside the tag.Step 3
<script>, settype="text/javascript"attributes for the tag.Step 4, document represents the web page document object;
document.write() means calling the write() method of the Document object,
Writes an HTML string in the source code of the current web page
"<h1><h1>Helloworld<h1></h1>".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.write("<h1>Helloworld<h1>")
</script>
</head>
<body>
</body>
</html>Write JavaScript code in a script file
Step 1, create a new text file and save it as test.js. Note that the extension is
.js, which indicates that the text file is a JavaScript type file.Step 2, open the test.js file and write the following JavaScript code in it.
Step 3, create a new HTML document and save it as test.html.
Step 4,
<head>insert a<script>tag inside the tag. Define the src attribute and set the attribute value to the URL string pointing to the external JavaScript file
javascript content
alert("hello world")Html content
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
document.write("<h1>Helloworld<h1>")
</script>
<script src="/first.js"></script>
</head>
<body>
</body>
</html>JavaScript code execution order
When a browser parses an HTML document, it will parse and display it line by line from top to bottom according to the document flow.
JavaScript codes are also part of HTML documents, so the execution order of JavaScript scripts is also determined according to the position of
<script>tags , and JavaScript codes are parsed step by step from top to bottom.
Several important concepts in JavaScript
identifier
Legal identifiers should observe the following rules:
The first character must be a letter, underscore (_), or dollar sign ($)
Unicode characters can be used in positions other than the first character. It is generally recommended to use only ASCII-encoded letters, and double-byte characters are not recommended
Cannot have the same name as JavaScript keywords and reserved words
Unicode escape sequences can be used
keywords
| break | delete | if | this | while |
|---|---|---|---|---|
| case | do | in | throw | with |
| catch | else | instanceof | try | default |
| continue | finally | new | typeof | function |
| void | for | return | was | switch |
reserved word
Reserved words are a set of names (or commands) that are prepared for use within the JavaScript language . These names have no specific use at present and are reserved for JavaScript upgrades. Users are advised not to use them.
| abstract | double | goto | native | static |
|---|---|---|---|---|
| boolean | enum | implements | package | super |
| byte | export | import | private | synchronized |
| char | extends | int | protected | throws |
| class | final | interface | public | transient |
| const | float | long | short | volatile |
case sensitive
JavaScript is strictly case-sensitive, so Hello and hello are two different identifiers.
In order to avoid typing confusion and grammatical errors, it is recommended to use lowercase to write code
Uppercase is recommended when:
1) The first letter of the constructor is recommended to be capitalized
2) If the identifier consists of multiple words, you can consider using camel naming - except for the first word, the first letter of the following words is capitalized
Literal
Literal is also called literal, which is a specific value, that is, a value that can directly participate in calculation or display , such as string, numeric value, Boolean value, regular expression, object literal, array literal, function literal, etc. .
//empty string literal
1 //value literal
true //boolean literal
/a/g //regular expression literal
null //special value literal
{} //empty object literal
[] // Empty array literal
function(){} //Empty function literal, that is, function expression
JS (single-line or multi-line) comments
1. A single-line comment
//starts with a double slash, and//all subsequent content will be regarded as the content of the comment, and//the previous content will not be affected2. Multi-line comments
/*begin with and*/end with, and everything between/*and will be regarded as the content of the comment*/