1 Basic concepts of JS

1.1 introduction of JS

  • The front three layers

    - HTML - Structure layer describes the structure of the page from a semantic point of view - CSS - Style layer describes the style of the page from a decorative point of view - JavaScript - Behavior layer describes the behavior of the page from an interactive point of viewCopy the code

  • JS composition: ECMAScript + BOM + DOM

  • JavaScript functions: data validation, reading and writing HTML elements, interaction with browser Windows and content, WEB effects, WEB game creation, server-side programming based on Node.js technology

  • ECMAScript version

    ECMAScript 1 (June 1997: first release) ECMAScript 2 (June 1998: version change) ECMAScript 3 (December 1999: regular expressions, try/catch added) ECMAScript 4 ECMAScript 5 (December 2009: Added strict schema, JSON support) ECMAScript 5.1 (June 2011: version change) ECMAScript 6 (June 2015: added classes and modules) ES2015 ECMAScript 7 (June 2016: Added index operators) ES2016 ECMAScript 8 (June 2017: added features) ES2017 ECMAScript 9 (June 2018: added features) ES2018 ECMAScript 10 (June 2019: new features) ES2019 ECMAScript 11 (draft) ES2020Copy the code

1.2 JS reference

<div οnclick="alert('hello world')">Am I</div>   <! -- Internal reference -->
Copy the code
<body>.<! - HTML code - >  
	<script>alert("hello world");</script>		<! -- inline -->    
</body>
Copy the code
<head>
    <script src="xxxx.js"></script>				<! -->
</head>
Copy the code

[note]

  1. Older versions of script tags add the type=”text/javascript” attribute, which is no longer necessary in HTML5.
  2. <noscript>Element: used as replacement prompt text for earlier browsers that did not support JavaScript; If the browser supports scripting, comments are ignored and the text in the NoScript element is not displayed.

1.2.1 Script element attributes

  • SRC: represents the external file that contains the code to execute.
  • Type: Indicates the content type (MIME type) of the scripting language in which the code is written. The default value is text/javascript and is not required. (Replaced obsolete language property)
  • Charset: Represents the character set of code specified by the SRC attribute.
  • Async: Indicates that the script should be downloaded immediately, but should not interfere with other operations on the page, such as downloading additional resources or waiting for other scripts to load. This applies only to external script files.
  • Defer: Indicates that the script can be deferred until the document is fully parsed and displayed. This applies only to external script files.

Deferred versus asynchronous scripts

  • The defer attribute is used to indicate that the script will execute without affecting the construction of the page, and that it will be deferred until the entire page has been parsed, that is, after the
    tag is encountered.
  • Using the async property prevents the page from waiting for two scripts to download and execute, thus asynchronously loading the rest of the page

1.3 the identifier

  • The first character must be a letter, underscore (_), or dollar sign ($), and cannot start with a number
  • Other characters can be letters, underscores, dollar signs, or numbers
  • Keywords and reserved words in JS cannot be used
  • Case sensitive
  • Follow the hump rule
  • Semantic naming is recommended
/ / right
var abc; 
var _abc; 
var $abc; 
var _abc1$; 
function $$abc_(){}

/ / error
var 1abc; 
var *abc; 
function #abc(){}		
Copy the code

1.4 annotations

// Single-line comment
/* Multi-line block-level comments */
Copy the code

1.5 Keywords and Reserved Words

/ / key
break		do			instanceof	typeof	default
case		else		new			var		if
catch		finally		return		void	throw
continue	for			switch		while	delete
in			function	this		with	try
debugger*	   
Copy the code
// Reserved word (ver5, * for non-strict mode)
class*	enum*	extends*	super*	const*	export*	import*
abstract	short		debugger	synchronized	let
boolean		interface	static		implements		static
byte		long		protected	int				implements
char		final		native		volatile		protected
float		package		throws		double			yield
goto		private		transient	public			private
package		public		interface	
Copy the code

1.6 Output Mode

// Page output directly
document.write("sunck is a nice man");

// Console output
console.log("sunck is a good man");

// Prompt box output
alert("sunck is a handsome man");

// Output content directly in an HTML document
document.write();
Copy the code