The previous words
Javascript is a simple language and a complex language. It is simple because it only takes a moment to learn to use it; it is complicated because it takes years to truly master it. In fact, front-end engineers refer to javascript engineers to a large extent. It is easy to get started with the front-end and difficult to master. It refers to the front-end, and more importantly, JavaScript. This article is the first article in basic grammar of javascript - lexical structure
Relationship with java
There is such a saying about JavaScript: The relationship between Java and JavaScript is the relationship between Lei Feng and Lei Feng Tower. So does it matter?
The initial name of javascript was LiveScript. The reason why I chose javascript as its official name was probably to make it sound like a famous family. In addition to the syntax that looks similar to Java, javascript and java are two completely different programming languages.
Programming languages are divided into two categories: interpreted and compiled. Languages such as java or C++ require a compiler. A compiler is a program that can translate source code written in high-level languages such as java into files that are executed directly on the computer. Interpreted programming languages do not require compilers - they only require interpreters, and the javascript interpreter in the browser will read directly into the source code and execute it.
Java can theoretically be deployed in almost any environment, but JavaScript tends to be applied only to web browsers. Moreover, in the JavaScript language, functions are independent data types, using inheritance chains based on prototype objects, and JavaScript syntax is much freer than Java.
Basically, the original meaning of the name JavaScript is "very similar to Java scripting language"
definition
JavaScript is a dynamic, weak type interpreted programming language that is very suitable for object-oriented and functional programming styles. The syntax of javascript comes from java, its first-class function comes from scheme, and its prototype-based inheritance comes from self
JavaScript is used to enhance the dynamic effect of the page and realize real-time and dynamic interaction between the page and the user.
JavaScript consists of three parts: ECMAScript, DOM and BOM
[1]ECMAScript is defined by ECMA-262 and provides core language functions (ECMA is the European Association of Computer Manufacturers)
[2] DOM (Document Object Model) document object model, providing methods and interfaces for accessing and manipulating web page content
[3] BOM (Browser Object Model) browser object model, providing methods and interfaces for interacting with the browser
Case sensitivity
Regarding the language JavaScript, no matter how much it is emphasized, it is case sensitivity. Keywords, variables, function names and all identifiers in javascript must be consistent in upper and lower case.
//'online', 'Online', 'OnLine', 'ONLINE' are four different variable names
[Note] HTML is not case sensitive
Reserved Word
Like any other programming language, javascript retains some identifiers for its own use. These reserved words cannot be used as ordinary identifiers. Due to the misleading of many reference books, it seems that reserved words and keywords are separated, but in fact, they are not. Keywords are just part of reserved words. Reserved words include keywords, future reserved words, empty literals, and boolean literals
ReservedWord::
Keyword
FutureReservedWord
NullLiteral
BooleanLiteral
Keywords
break do instanceof typeof
case else new var
catch finally return void
Continue for switch while
debugger function this with
default if throw delete
in try
Future reserved words
The following words are used as suggested extension keywords and are therefore reserved so that these extensions may be adopted in the future.
class enum extends super
const export import
ECMAScript3 version
The above are reserved words for ECMAScript5, but the reserved words in the ECMAScript3 version are different. If you want the code to run on an interpreter based on ECMAScript3 implementation, you should avoid using the following reserved words as identifiers.
abstract boolean byte char class constdouble enum export extends final float
goto implements import int interfacelong native package private protected
public short static super synchronized throw transient volatile
Predefined variables and functions
In addition, JavaScript predefined many global variables and functions, and should avoid using their names as identifier names
arguments Array Boolean Date decodeURI decodeURIComponent encodeURIencodeURIComponent Error eval EvalError Function Infinity isFinite
isNaN JSON Math NaN Number Object parseFloat parseInt RangeError
ReferenceError RegExp String SyntaxError TypeError undefined URIError
Comment
Not all statements require a javascript interpreter to interpret and execute. Sometimes you need to write some information in the script for your own reference or reminder, and hope that the javascript interpreter can directly ignore this information. This type of information is comments
Comments can effectively help understand the code flow, and they play the role of life note in the code, which can help us figure out what scripts do.
[Note] Comments must describe the code accurately. Useless comments are worse than no comments
There are many ways to insert comments in javascript scripts, including single-line comments, multi-line comments, and HTML-style comments
【1】Single line comments start with two slashes
//Single line comment
【2】Multi-line comments are also called block-level comments, starting with a slash and an asterisk/*, ending with an asterisk and a slash*/
/*
This is a multi-line comment
*/
[Note] Those characters in block-level comments/**/ may also appear in regular expression literals, so block-level comments are unsafe for commented code blocks.
/*
var rm_a = /a*/.match(s);
*/
【3】HTML style comments are only applicable to single-line comments. In fact, the javascript interpreter handles <!-- and //
<!-- This is a comment in javascript
If in HTML documents, you also need to end the comment with -->
<!-- This is a comment in HTML->
But javascript does not require this, it will treat --> as part of the comment content
[Note] HTML allows comments like this above to span multiple lines, but each line of such comments must be added as a flag at the beginning of the comment "<!--"
<!-- I'm Comment 1
<!-- I'm Comment 2
<!-- I'm Comment 3
Because the JavaScript interpreter is different from HTML when dealing with comments in this style, it is best not to use it in Javascript scripts to avoid confusion.
HTML style comments
WhiteSpace
Blanks are usually meaningless, sometimes they have to be separated by using them, otherwise they will be merged into a symbol.
var that = this;
The blanks between var and that cannot be removed, but other blanks can be removed
JavaScript ignores the spaces between the tokens in the program. In most cases, JavaScript also ignores line breaks. Since spaces and line breaks can be used at will in the code, neat and consistent indentation can be used to form a unified encoding style, thereby improving the readability of the code
// Improve code readability by adding whitespace characters for(var i = 1; i < 10; i++){//}JavaScript recognizes the following as whitespace characters WhiteSpace
/u0009 Horizontal tab character <TAB>
/u000B Vertical tab character <VT>
/u000C Page change <FF>
/u0020 Space character <SP>
/u00A0 Non-interrupt space character <NBSP>
/uFEFF character order mark
JavaScript recognizes the following characters as line terminator LineTerminator
/u000A newline character <LF>
/u000D Carriage Return Character <CR>
/u2028 Line Delimiter <LS>
/u2029 Paragraph splitter <PS>
Optional semicolon
JavaScript uses semicolons; separates statements, which is very important for enhancing the readability and neatness of the code. But javascript does not fill semicolons at all newlines. Only when the code cannot be parsed correctly without the semicolon, javascript will fill semicolons.
var a
a
=
3
console.log(a)
Javascript parses it as:
var a;
a = 3;
console.log(a);
This separation rule of statements can lead to some unexpected situations
var y = x + f
(a+b).toString
Javascript parses it as:
var y = x + f(a+b).toString
Therefore, in order to allow the above code to be parsed into two different statements, the explicit semicolon at the end of the line must be manually filled in the end of the line
Two exceptions
If the current statement and the next line statement cannot be merged and parsed, javascript will fill in the semicolon after the first line, which is a common rule, but there are two exceptions
[1] The first exception is in the scenario involving return, break, continue, throw statements. If these four keywords are followed by a line break, javascript will fill in the semicolon at the line break
Return
true;
Javascript parses it as:
return;true;
And the original meaning of the code is:
return true;
[2] The second exception is that when ++ and -- operators are involved, if it is used as a suffix expression, it should be the same line as the expression. Otherwise, the end of the line will fill the semicolon, and ++ or -- will be used as the prefix operator for the next line of code and parsed with it
x
++
y
Javascript parses it as:
x;++y;
And the original meaning of the code is:
x++;y;
Although semicolons are not necessary, it is best not to omit it, as adding semicolons can avoid many errors, and not having semicolons at the end of the line of code will lead to compression errors. Adding a semicolon will also improve the performance of the code in some cases, because the parser will no longer have to spend time guessing where to insert a semicolon.