当前位置：网站首页>JS Chapter 1 Summary

JS Chapter 1 Summary

2022-06-25 01:04:00 【Play in the clouds】

Introduce JavaScript

What is? JavaScript

JavaScript It's a descriptive language , It's also object based （Object） And event driven （EventDriven） Language , And it has a security scripting language . meanwhile js It is also a weakly typed scripting language , So it's very simple and easy to use .

JavaScript characteristic

JavaScript Mainly used in html Add interactive behavior... To the page
JavaScript Is a scripting language , Grammar and java be similar
JavaScript It is generally used to write client-side scripts
JavaScript It's an explanatory language , Explain while executing

JavaScript Historical development

1992 year ,Nombas company -----Cmm Embedded scripting language
Nombas company -----------LiveScript Scripting language ,1995 Changed its name in JavaScript
1997 year ,JavaScript 1.1 Submitted as a draft to the European Association of computer manufacturers (ECMA), Its source is from Netscape,Sun, Microsoft ,Borland And so on . Final ECMA-262 Standards came into being , This standard defines what is called ECMAScript Scripting language . The following year , International Organization for standardization and International Electrotechnical Commission (ISO/IEC) Also adopted ECMAScript As a standard .

JavaScript The composition of

A complete JavaScript It consists of three different parts
Insert picture description here

ECMAScript standard ： It's a kind of openness 、 Internationally accepted 、 Standard scripting language specification , It does not bind to any specific browser , Mainly describe the following parts
Browser object model BOM： Browser object model (Browser Object Model, BOM), Provides objects that interact with browser windows independently of content , Using the browser object model, you can realize and HTML Interaction .
Document object model DOM： Document object model (Document Object Model, DOM), yes HTML Document object model (HTML DOM) A set of standard methods defined , Used to access and manipulate HTML file .

JavaScript Basic structure and output syntax of

The basic structure

<!--  among type yes script Properties of , Used to specify the language category used by the text ,H5 Don't write type Properties are OK , By default text/javascript -->
	<script type="text/javascript"> </script>

Output syntax

Page output

// Page output 
document.write(" Hello world ");// Can contain html label

result ：
result
for example ： Contains a html label

document.write("<h1> I'm the title 1</h1>");
document.write("<em> I am leaning </em>");
document.write("<h1 style='color: #008000;'> I'm the title 1</h1>");

result ：
Insert picture description here
You can find ： contain html The label will follow a js Command to execute and output the results , conversely , If not used script Will follow the pure text

Console output

// Console output 
console.log("Hello World");

result ：
Insert picture description here

quote JavaScript The way

The first one is ： Inside JavaScript file

Simply put, it's directly in html Written in a file js

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript"> </script>
</html>

The second kind ： External use JavaScript file

The obvious meaning , Is to create a new one outside js file , And then in html Direct reference to , Recommended in the body Write... At the back

<script src="js File path " type="text/javascript" charset="utf-8"></script>

The third kind of ： Directly in HTM In the label

<input type="button" name="btn" value=" Pop up a message box " onclick='javascript:alert(" Welcome ")' />

JavaScript Core grammar

Declaration and assignment of variables

because JavaScript Is a weakly typed language , There is no explicit data type , So when you declare variables , Unwanted
Specifies the type of the variable , The type of variable is determined by the value assigned to it .

Naming rules ：

JavaScript Variable naming and Java The naming rules for variables are the same , That is, it can be represented by numbers 、 Letter , Underline and “$” The symbols make up , But the first letter cannot be a number , And you can't use keywords to name .

Statement ：

Be careful ：js Case sensitive

let i;// The first one is 
var I;// The second kind

assignment ：

let i;// The first one is 
var I;// The second kind 
i=1;
I=' Hello ';

The declaration and assignment of variables can be operated together

let i=1;// The first one is 
var I=' Hello ';// The second kind

You can declare multiple variables at the same time

let i,a,b=1;// The first one is 
var I,f,j=' Hello ';// The second kind

data type

data type	Introduce
Undefined	Undefined , No assignment after variable declaration
null	and undefined equally
Number	value type , All numeric values do not distinguish between integers and decimals
string	Character type , Does not distinguish between characters and strings ,’' and "" It is recommended to use single quotation marks for the same effect
Boolean	Boolean type Same as before false and true
Object	object type , All references are object types , quote ： Array , object , function ,null（ Value of object type ）
NaN	The digital , It is generally used with the return value of some methods , Be regulated to number type

Get the variable type of the variable
typeof（ Variable or value ）： Returns the data type of the value in a variable
for example ：

let j=1;
let i=' Hello ';
let k;
let o=true;
console.log(typeof(j),typeof(i),typeof(k),typeof(o));

result ：
Insert picture description here JavaScript In language String Object also has many methods for handling and manipulating strings

Method	describe
indexOf(str,index)	Find the first occurrence of a specified string in the string
charAt(index)	Returns the character in the specified position
toLowerCase()	Convert string to lowercase
toUpperCase()	Convert string to uppercase
substring(index1,index2)	Return at specified index index1 and index2 String between , And include index index1 Corresponding characters , Excluding the index index2 Corresponding characters
split(str)	Split a string into an array of strings

If you still don't know how to use it, click the hyperlink below to see the specific usage
see string Method case

Array

grammar ：
var Array name = new Array( Number );
assignment

var hu=new Array(3);// Declare an array 
hu[0]=1;// assignment 
hu[1]=2;
hu[2]=3;
console.log(hu[0],hu[1],hu[2]);// Output

result ：
Insert picture description here
Be careful ：
Array subscript is from 0 At the beginning , also js The array length of is variable

Common properties and methods of arrays

attribute	describe
length	Sets or returns the number of elements in an array
join()	Put all the elements of the array into a string , Split by a separator JavaScript Basics

Method	describe
push()	Add one or more elements... To the end of the array , And returns the new length
unshift（）	Add a value to the beginning of the array
pop（）	Delete the last element in the array
shift（）	Delete the beginning element
splice（ Subscript location , Delete the number ）	Deletes the specified element
filter（m => Conditions ）	Gets the qualified elements in the array
every（m => Conditions ）	Judge whether all the conditions are met , yes true, otherwise false
some（m => Conditions ）	As long as one of the conditions is satisfied true otherwise false
find（m => Conditions ）	Returns the first qualified value in the array
reverse（）	Output in reverse order , It's going to change the array
sort（）	Not recommended , Bubble sorting is recommended

Operation symbol

Category	Operation symbol
Arithmetic operator	+ - * / % ++ –
Comparison operator	> < >= <= == != === !==
Logical operators	And or Not
Assignment operator	= += -=

explain ： And （&&） or （||） Not （！）

== Is equal to ,=== Identity ,!== Indicates inequality ,
 Are used for comparison , however == For general comparison ,
=== For strict comparison ,== Data types can be converted during comparison ,=== Strict comparison ,
 As long as the data types do not match, it returns  false.
 for example ,“1”== true  return  true, and “1”===true  return  false.

Logic control statement

Conditional structure

if structure

if () {
    
		
} else{
    
		
}

switch structure

switch (){
    
	case value:
		break;
	default:
		break;
}

Loop structure

for loop

for( initialization ; Conditions ; Increment or decrement ){
    
			
}

while loop

while( Conditions ){
    
			
}

do-while loop

do{
    
			
}while( Conditions )

for-in loop

for( Variable  in  object ){
    

}

5.for-of loop

for(var result of fruit){
    

}

for-in and for-of difference
for-in:

for(var result in fruit){
    
	console.log(result + "---" + fruit[result]);// Output result Is a subscript, not a content , You need an array to get the content 【result】
}

for-of:

for(var result of fruit){
    
	console.log(result);// What you get is content 
}

Break the loop
break: Exit the whole cycle .
continue: Just exit the current loop , Decide whether to carry out the next cycle according to the judgment conditions .

notes

Single-line comments //
Multiline comment /* Content */

Keywords and reserved words

The keyword identifies ECMAScript The beginning and end of a sentence , Keywords are reserved , Cannot be used as variable name or function name

keyword
break	case	catch	continue	default
for	delete	do	else	finally
function	if	in	instanceof	new
with	return	switch	this	throw
try	typeof	var	void	while

Reserved words are reserved words for future keywords in a sense , Therefore, reserved words cannot be used as variable names
Or function name

Reserved words
abstract	boolean	byte	char	class
const	debugger	double	enum	export
extends	final	float	goto	implements
import	int	interface	long	native
package	private	protected	public	short
static	super	synchronized	throws	transient
volatile