JavaScript basic syntax-lexical structure

xdirectory [1]java [2] definition [3] case [4] reserved word [5] note [6] blank [7] semicolon before

JavaScript is a simple language and a complex language. It's simple because it takes a moment to learn to use it, and it's complicated because it takes years to really master it. In fact, the front-end engineer is largely referred to as a JavaScript engineer. Getting started with the front end is easy to master, and it's about JavaScript. This article is the first of the basic JavaScript syntax-lexical structure

Relationship with Java

About JavaScript There is a saying that the relationship between Java and JavaScript is Lei Feng and Lei Feng Tower. Does that really matter?

The first name for JavaScript was LiveScript, and then the reason for choosing JavaScript as its official name was probably to make it sound like a famous door. In addition to the syntax that looks like Java, JavaScript and Java are two completely different programming languages

The programming language is divided into two categories: explanatory type and compiler type. Languages such as Java or C + + require a compiler. A compiler is a program that translates source code written in high-level languages such as Java into files that are executed directly on a computer. Interpreted programming languages do not require compilers-they only need an interpreter, and the JavaScript interpreter in the browser is read directly into the source code and executed

Java can theoretically be deployed in almost any environment, but JavaScript tends to apply only to Web browsers. Furthermore, in the JavaScript language, functions are a separate type of data, using the inheritance chain based on the prototype object (prototype), which is much more free of JavaScript syntax than Java

Basically, the name JavaScript is meant to be "very much like the scripting language of Java."

Defined

JavaScript is a dynamic, weakly-typed, interpreted programming language that is ideal for object-oriented and functional programming styles. JavaScript's syntax derives from Java, its class-a function comes from scheme, and its prototype-based inheritance comes from self

JavaScript is used to enhance the dynamic effect of the page, enabling real-time and dynamic interaction between pages and users.

JavaScript consists of three parts: ECMAScript, Dom, and BOM

[1] ECMAScript is defined by ECMA-262 and provides core language functionality (ECMA is the European Association of Computer Manufacturers)

[2] DOM Document Object Model, which provides methods and interfaces for accessing and manipulating Web page content

[3] BOM (Browser object model) browser objects models that provide methods and interfaces for interacting with the browser

Case sensitive

In the language of JavaScript, it is not too much to emphasize that the character is case sensitive. Keywords, variables, function names, and all identifiers in JavaScript must be in a consistent case.

// ' Online ', ' online ', ' online ' , ' online ' are four different variable names

Note HTML is not case sensitive

Reserved words (Reservedword)

Like any other programming language, JavaScript retains some identifiers for its own use. These reserved words cannot be used as normal identifiers. Because a lot of reference books misleading, seemingly reserved words and keywords are separate, in fact, is not, the keyword is only a part of the reserved word. Reserved words include keywords, future reserved words, empty literals, and Boolean literals

Reserved word reservedword::   Keyword   futurereservedword   nullliteral   booleanliteral

Key words

     Break       Doinstanceoftypeof     Case       Else       New               var    Catch      finally    return            void    Continue    for        Switch             whileDebugger Function This withdefault    if         ThrowDeleteinch         Try

Future reserved Words

The following words are used as recommended extension keywords and are therefore reserved so that they may be used in the future

    class      enum        extends       super    const      export     Import

ECMASCRIPT3 version

The above is a reserved word for ECMAScript5, but the reserved word in the ECMASCRIPT3 version is not the same, and if you want the code to run on an interpreter based on the ECMASCRIPT3 implementation, you should avoid using the following reserved words as identifiers

 abstract  boolean byte  char  class  const  double  enum  export extends final float  goto  implements import int  interface  private  protected  public  short  static   super synchronized  throw  transient volatile  

Pre-defined variables and functions

　　In addition, JavaScript pre-defines many global variables and functions, and should avoid having their names used as identifier names.

Arguments Array Boolean Date decodeURI decodeuricomponent encodeURI
encodeURIComponent Error eval evalerror Function Infinity isfiniteisnan JSON Math NaN number Object parsefloat parseint Ra Ngeerrorreferenceerror RegExp String syntaxerror TypeError undefined urierror

Note (Comment)

Not all statements need to be interpreted and executed by the JavaScript interpreter. Sometimes it is necessary to write some information in the script that is only for your own reference or to remind yourself, and you want the JavaScript interpreter to ignore this information directly, such information is a comment

Annotations can help you understand the code flow, and in code they play the role of a note in life that helps us figure out what the script is doing.

[note] Note that it is important to describe the code accurately, and that no comment is worse than no comment

There are several ways to insert comments in JavaScript scripts, including single-line comments, multiline comments, and HTML-style annotations

"1" single-line comment starts with two slashes

// single-line comment

The "2" multiline comment is also called a block-level comment, starting with a slash and an asterisk/*, ending with an asterisk and a slash/*

/*    */

[note] Those characters in block-level annotation/**/may also appear in regular expression literals, so block-level annotations are unsafe for commented blocks of code

/*     var rm_a =/A*/. Match (s); */

"3" HTML-style comments only apply to single-line comments, in fact, the JavaScript interpreter for <!--processing and//processing is the same

<!--This is a comment in JavaScript

If you are in an HTML document, you also need to end the comment

<!--This is a comment in HTML--

But JavaScript does not require this, and it is considered part of the comment content

Note HTML allows such comments to span multiple lines, but each line of the comment must be preceded by a "<!--" as a flag

<!-- I am comment 1<!-- I am comment 2<!--I am comment 3

Because the JavaScript interpreter handles this style of annotation differently from the HTML approach, it's best not to use HTML-style annotations in JavaScript scripts to avoid confusion

Blank (whitespace)

Whitespace is usually meaningless, and sometimes it must be used to separate character sequences, otherwise they will be merged into a single symbol.

var this;

The gap between Var and that is not removable, but other whitespace can be removed

JavaScript ignores spaces between tokens in the program. In most cases, JavaScript also ignores line breaks. Because you can freely use spaces and line breaks in your code, you can make your code more readable by using neat, consistent indentation to create a unified coding style

// improve code readability by adding whitespace characters  for (var1; i++) {    //}

JavaScript recognizes these as whitespace characters whitespace

\u0009    Horizontal tab         <TAB>\u000b    vertical tab          <VT>\u000c    page Break             <FF>\u0020             spaces <SP>\u00a0    non-disruptive       whitespace characters <NBSP>\ufeff    word Fu She Mark

JavaScript recognizes the following characters as a line terminator LineTerminator

\u000a line    break        <LF>\u000d    carriage return         <CR>\u2028    line delimiter        <LS>  \u2029    Paragraph separator      <PS>

Optional semi-colon

JavaScript uses semicolons ; Separating statements is important for enhancing the readability and cleanliness of your code. But JavaScript does not fill the semicolon at all line breaks, and JavaScript fills the semicolon only if the code is not parsed correctly when the semicolon is missing.

var AA=3Console.log (a)

javascript resolves it to:

var3; Console.log (a);

The rules for separating such statements can lead to some unexpected situations

var y = x + f (a+b). toString

javascript resolves it to:

var y = x + f (a+b). toString

Therefore, in order for the above code to parse into two different statements, you must manually fill in the explicit semicolon of the end of the line

Two exceptions

If the current statement and the next line of statements cannot be parsed, JavaScript fills the semicolon after the first line, which is a general rule, with two exceptions

The first exception to "1" is in a scene involving a return, break, continue, throw statement. If these four keywords are followed by a newline, JavaScript fills the semicolon at the line break

return true;

javascript resolves it to:

return; true;

And the code is meant to be:

return true;

"2" The second exception is when the + + and--operators are involved, and if 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 act as the prefix operator for the next line of code and parse it together

x+ +y

javascript resolves it to:

X;++y;

And the code is meant to be:

X++;y;

Although a semicolon is not required, it is best not to omit it, because a semicolon avoids many errors, and there is no semicolon at the end of the line of code to cause a compression error. The addition of semicolons also improves the performance of the code in some cases, because it eliminates the need for the parser to take the time to speculate on where the semicolon should be inserted.

Resources

"1" es5/lexical https://www.w3.org/html/ig/zh/wiki/ES5/lexical
"2" Ruan one peak JavaScript standard reference Tutorial--Grammar Overview http://javascript.ruanyifeng.com/grammar/basic.html
"3" W3school-javascript Advanced tutorial--ecmascript Syntax http://www.w3school.com.cn/js/pro_js_syntax.asp
"4" JavaScript authoritative Guide (6th edition), chapter 2nd lexical structure
"5" JavaScript Advanced Programming (3rd Edition), chapter 3rd Basic Concepts
"6" JavaScript Language Essence (Revised edition), chapter 2nd syntax
"7" JavaScript DOM Programming Art (2nd Edition), chapter 2nd JavaScript syntax

JavaScript basic syntax-lexical structure