Super detailed basic JavaScript syntax rules

01 JavaScript (abbreviated as: js)

js is divided into three parts:

• ECMAScript standard ---- basic syntax of js
• DOM------Document Object Model Document Object Model
• BOM------Browser Object Model

What is JavaScript?

• It is a scripting language (no need to compile, direct execution, common scripting languages: t-sql, cmd)
• It is an interpreted language
• It is a dynamically typed language
• It is an object-based language

Note:

1. Compiled language is a language that needs to be translated into a binary language that the computer can recognize before it can be executed.

2. The front-end foundation is HTML (markup language, display data)

CSS (beautify the page)

JavaScript (user and browser interaction)

The original name of js is not JavaScript, but LiveScript

What is the role of js?

Solve the problem of interaction between users and browsers

js code can be written in three places:

1. In the HTML file, write the js code in the script tag

2.js code can be written in the html tag

<script> 
//js code alert("Study hard and make progress every day"); //Pop up a dialog box on the page</script> 
<input type="button" value="button" onclick="alert('Clicked');"/>

3. You can write js code in the js file, but you need to introduce src="js path" in the script tag in the html page

02 Operators

Operators: some symbols used for calculation

• Arithmetic operators: + - * / %
• Arithmetic expressions: expressions connected by arithmetic operators
• Unary Operators: This operator takes only one operand to operate on. ++ –
• Binary Operator: This operator requires two operands to operate.
• Ternary operator: conditional expression? expression1:expression2
• Compound operators: += -= *= /= %=
• Compound operation expression: an expression connected by compound operators

 var num=10; 
 num+=10;----->That is: num=num+10; 
 console.log(num);20

• Assignment operator: =

Relational operators:

> < >= <=

==Not strict

=== Strict

!= loose inequality

!== Strict inequality

Relational operation expression:

Expressions connected by relational operators

The result of a relational expression is of Boolean type.

Logical operators:

&&—Logical AND – AND

||—Logical OR—Or

!—Logical NOT—Negation—Negation

Logical operation expression:

Expressions connected by logical operators

• expression1&&expression2

If one is false, the whole result is false

• expression1||expression2

If any one is true, the whole result is true

• !Expression 1

The result of expression 1 is true, and the whole result is false

The result of expression 1 is false, and the whole result is true

var num1=10; 
var num2=20; 
console.log(num1==num2&&5>6 )
var num=20; 
console.log(num>10||5<0 )
var flag = false; 
console.log(!flag )
var num=10; 
var sum=(num+10)*5; 
console.log(sum 
var result = (4 >= 6 || '人' != '狗' && !(12 * 2 == 144) && true) ;
console.log(result);
var num = 10; 
var result2 =( 5 == num / 2 && (2 + 2 * num).toString() === '22') ;
console.log(result2); 
​var num=20; 
var result = num/3; //num variable modulo 3 ---> remainder of 10/3 console.log(parseInt(result) 
var num=20; 
var result = num%3; //num variable modulo 3 ---> remainder of 10/3 console.log(result)
var num=10; 
var sum=(num+10)+1 
var num = 20; 
       num %= 5; 
// num=num-5; 
console.log(num )
var str="5"; 
var num=5;
console.log(str===num )
console.log(5>10);//false 
console.log(5>=5);//true 
console.log(5>3);//true 
console.log(5==10);//false

03 JS variables

Note on variable names - naming of variable names:

1. Follow the camel case naming convention (the first letter of the first word is lowercase, and the first letters of all subsequent words are uppercase)

2. Variable names should be meaningful

3. Variable names should be standardized

4. Keywords cannot be used (some words that come with the system cannot be used)

Declare variables and initialize them - Initialize variables - declare variables and assign values

Declare a variable named num to store a number 100

 var num=110;

Output the value of this variable

 alert(num); // pop-up window

The browser console is in the console option in the developer tools in the browser (shortcut key: F12)

console.log(num); // Output the content in the browser console

Declare multiple variables and assign values ​​to them one by one

var num1,num2,num3;//declaration//assign values ​​num1=10 in sequence;   
num2=20;   
num3=30;

Declare multiple variables and assign values

var num1=10,num2=20,num3=30; 
var num=10;
var $break=10;
var shuZi=10;

Note: All data operated is in memory.

• How to store data in js using variables (name, value -> data)
• Variables declared in js are all stored with var ---->, and the data should have corresponding data types
• String values ​​in js are enclosed in double quotes or single quotes

04 JS variable function

The function of variables is to store data or operate data

Variable declaration (var has variable name, but no value)

Variable initialization (var has variable name and value)

Variable declaration method:

var variable name;

var number; // variable declaration, no value is assigned at this time, 
//Declare multiple variables at once var x, y, z, k, j; //All are declarations, no values ​​are assigned //Variable initialization (variables are declared and assigned values ​​at the same time)
// = means: the meaning of assignment //store a number 10
var number = 10; 
//Store a 5
var number2 = 5; 
//Store a person's name var name = "Xiao Hei"; 
//Store true
var flag = true; 
//Store a null--->equivalent to empty var nll = null; 
//Store an object var obj = new Object();

05 Swapping JS variables

Use third-party variables for swapping

var num1=10; 
var num2=20; 
  // Take the value of the variable num1 and put it in the temp variable var temp=num1; 
// Take the value of the variable num2 and put it in the variable num1 num1=num2; 
// Take the value of temp variable and put it in num2 variable num2=temp;
console.log(num1);//20 
console.log(num2);//10

The second method of exchange: generally applicable to the exchange of numbers

var num1 = 10;  
var num2 = 20; 
// Take the value in the variable num1 and the value in the variable num2, add them together, and reassign them to the variable num1 num1 = num1 + num2; //30 
   // Take the value of num1 and num2, and assign the result of subtraction to num2
        num2 = num1 - num2; // 10 
// Take the value of num1 and num2, and assign the result of subtraction to num1
        num1 = num1 - num2; // 20
console.log(num1, num2);
​

Note: Variable names cannot be repeated, because the latter will overwrite the former.

var num1=10; 
var num1=20; 
console.log(num1); 

Extended variable exchange: just look at the code, no need to understand (bit operations)

var num1 = 10;  
var num2 = 20;  
num1 = num1 ^ num2;  
num2 = num1 ^ num2;  
num1 = num1 ^ num2;  
console.log(num1, num2);

06 Comments

Comment method:

• 1. Single line comment //
• 2. Multi-line comments /**/

//Single-line comment: usually used above a line of code

/Multi-line comments: generally used above a function or a section of code/

//The commented code is not executed //console.log("Haha, I'm beautiful again"); 
//console.log("second line"); 
//Declare variables and initialize them //var num=10;

07 JS data types

Value type (basic type):

String

Numbers - integers and decimals (Number)

Boolean

Null

Undefined

Symbol

Reference data types:

Object

Array

Function

var num; 
console.log(num+10); //NaN-----not an number---->Not a number var num; 
console.log(num);
How to get the data type of this variable? Use typeof to get //typeof syntax* to get the data type of this variable!
     * typeof variable name * typeof (variable name)
     * 
var num = 10; 
var str = "Xiaobai"; 
var flag = true; 
var nll = null; 
var undef; 
var obj = new Object();
//Use typeof to get the type of the variable console.log(typeof num);//number 
console.log(typeof str);//string 
console.log(typeof flag);//boolean 
console.log(String(nll));//is null 
console.log(typeof nll);//Not null 
console.log(typeof undef); //undefined 
console.log(typeof obj);//object 
console.log(typeof(num));

08 JS digital type

 // Number type: integer and decimal var num = 12; 
 num=20; // integer num=98.76; // decimal (in other languages, floating point type --- single precision, double precision floating point) 
 // All numbers are of type number

09 base

What bases can be represented in js?

var num=10;//decimal

var num2=012;//octal

var num3 = 0x123; // hexadecimal

var num=12;//decimal console.log(num); 
var num2=012;//octal systemconsole.log(num2); 
var num3=0x1a; //hexadecimal console.log(num3); 
var num=0x1f; 
   console.log(num);

Notice:

To represent decimal: just a normal number To represent octal: start with 0 To represent hexadecimal: start with 0x

10 NaN

Don't use NaN to verify whether it is NaN

var num;  
console.log(num+10==NaN); 
console.log("Hello"=="I am fine");

How to verify whether the result is NaN? You should use isNaN()

var num; //-----The variable is declared but not assigned a value, the result is: undefined 
 Isn't it a number----->Isn't it a number? NaN--->Not a number console.log(isNaN(10));

To determine if the result is not a number, use isNaN(variable name)

var str="Hello"; 
var num;  
var sum=num+10;//NaN 
console.log(sum); 
console.log(isNaN(sum)); // true if it is not a number, false if it is a number

Note: Do not use NaN to determine whether it is NaN, you should use isNaN(value or variable)

11 Type Conversion

1.parseInt();//Convert to integer

console.log(parseInt("10"));//10 
console.log(parseInt("10afrswfdsf"));//10 
console.log(parseInt("g10")); //NaN 
console.log(parseInt("1fds0"));//1 
console.log(parseInt("10.98"));//10 
console.log(parseInt("10.98fdsfd"));//10

2.parseFloat()//Convert to decimal

console.log(parseInt("10"));//10 
console.log(parseInt("10afrswfdsf"));//10 
console.log(parseInt("g10")); //NaN 
console.log(parseInt("1fds0"));//1 
console.log(parseInt("10.98"));//10 
console.log(parseInt("10.98fdsfd"));//10

3.Number(); //Convert to numbers

console.log(Number("10"));//10  
console.log(Number("10afrswfdsf")); //NaN 
console.log(Number("g10")); //NaN 
console.log(Number("1fds0")); //NaN 
console.log(Number("10.98"));//10.98 
console.log(Number("10.98fdsfd"));//NaN

Note: If you want to convert an integer, use parseInt(); if you want to convert a decimal, use parseFloat()

Want to convert numbers: Number(); is stricter than the above two methods

Other types to string types

1. toString()

// var num = 10; 
// console.log(num.toString());//String type// //2 String(); 
// var num1 = 20; 
// console.log(String(num1));

If the variable makes sense, call .toString() to convert it. If the variable does not make sense, use String() to convert it.

var num2; 
console.log(num2.toString()); 
var num3=null; 
console.log(num3.toString()); 
    //This can be var num2; 
console.log(String(num2)); 
var num3=null; 
console.log(String(num3));
​

Other types to Boolean types

console.log(Boolean(1)); //true 
console.log(Boolean(0));//false 
console.log(Boolean(11));//true 
console.log(Boolean(-10));//true 
console.log(Boolean("哈哈"));//true 
console.log(Boolean(""));//false 
console.log(Boolean(null));//false 
console.log(Boolean(undefined)); //false

12 JS basic code standards

• Declare variables in js using var
• Each line of code in js should end with a semicolon; (it’s a habit to have semicolons when writing code)
• js is case sensitive: var N=10; n
• Strings in js can use single quotes or double quotes. For now, we will use double quotes.

The above is the details of the super detailed basic JavaScript grammar rules. For more information about JavaScript grammar rules, please pay attention to other related articles on 123WORDPRESS.COM!