js basic ~ data type, operator, if, while, for

Posted by mwilson on Mon, 31 Jan 2022 10:06:47 +0100

1. Run js in the page

(1)javascript, abbreviated as js, is a functional and weakly typed scripting language.
(2) In a web page:

HTML is responsible for what is in the page.
CSS is responsible for what the page looks like.
JS is responsible for what the page can do.
JS can control HTML and CSS

(3)Js runs in two ways in the page:

  1. Write js code directly in the script tag.
  2. Reference external js files. The Src attribute is filled in the absolute path of the external js file.
<script src="name.js"></script>
Console output: Console.log

Multiple script tags can be associated in a page, and the code will be executed in sequence.
Assignment: assign values from right to left, and assign values on the right of the equal sign to the left

2. Variables and basic data types

(1) Use var xxx to declare a variable, = represents the assignment operator, and its function is to assign the value on the right side of = to the variable on the left side of =.

var  myAge = 31;

(2) Basic data type:
Data type: number, which is used to record a number and enter the number directly.

var num = 30.5; 

String type: string, which is used to record a piece of text. It can be included in double quotation marks or defined in single quotation marks.

var str = "20";   str = 'Dragon';

boolean type: boolean, used to record a true or false value (whether or not). True is true and false is false.

var flag = true; 

3. Basic operators

Four operators: + sign: can be used to add numbers.

var num =1+2+3;
console.log(num);  //6

Variables can also be evaluated through expressions.

var num2 =num+num;

When a string is linked with a + sign, it represents string splicing. For example:

var s1 ="a";
var s2 ="b";
var s3 =s1+s2; //s3 = 'ab'

When a number and a string are added, the code will automatically convert the number into a string and splice it with another string to form a new string.

var s4 ="3"+5;
console.log(s4); //35
-Sign: minus sign. Two numbers are subtracted. For example:
var num3 =5-2;
console.log(num3); //num3 = 3

When only one of the two values involved in the operation is a string, the code will convert the string into a number and then perform mathematical subtraction (provided that the content in the string can be converted into a number). For example:

var num4 ="5" -3;
console.log(num4);=2

*Sign: multiplication sign: multiply two numbers. Different operations have different priorities, and the priority of multiplication is greater than that of addition and subtraction.
When a string participates in multiplication. The rules followed by - (minus sign) are the same,

/Sign: division sign: the same as the multiplication rule,
%No.: remainder operator: the remainder after the division of two numbers,

var num7 =5%3;
console.log(num7);

++And –: self adding 1 and self subtracting 1,

++Write after variable,The representative variable participates in the expression evaluation first,Post self increasing
++Write before variable,Indicates self increment first,Participate in expression calculation after
var num8 =5
var num9 =num8++;
console.log(num8,num9);num8 =6;num9 =5
// The logic is the same as + +,
var num10 =num9--;
console.log("???"+num9,num10);num9 =4;num10 =5
 Other Operators 
// +=Indicates that the self increment operation also has: - = * =/=
var num11 =10;
num11+=5;(numll=numll+5);
console.log(num11);

4. Boolean operator

&&Represents the sum operation. When the Boolean values on both sides of the operator are true, the result is true

var f1 =false&&true;
console.log(f1);

||Represents or operation. As long as one side of Boolean values on both sides is true, the result is true

var f2 =true||false;
console.log(f2);

! Represents a non operation. It is a monocular operator that negates Boolean values, takes false as true, and takes true as false.
Non operations have priority over and or.

var f3 = !true;

5. Comparison operator

var a =6; var b =5;
// When two variables are compared, a boolean result will be obtained. If the inequality is true, it will be false
// < less than (left less than right) > greater than
var f1 =a<b;
// >=Greater than or equal to < = less than or equal to the same rule as greater than or less than
var f2 = a>=b;
// != Not equal to
var f3 = a!=b;

The comparison operator will form an expression. No matter how long the expression is, the system will always return the result of the expression as a bool value when it is detected again.

6.If branch structure

The execution order of programming is to execute the code from top to bottom.
You can determine which part of the code is executed and which part of the code is not executed through the branch structure.
Which part of the code can be executed the corresponding number of times through the loop structure.

  • If statement: if stands for the code that will be executed only if (internally, it is a conditional expression) {the expression is satisfied}
  • Else statement: else / / otherwise execution rule: when the Boolean value in the if bracket is true, execute the code of if {}; otherwise, execute the code of else {}.

If and else must be executed by one person. Multiple if may or may not be executed;
if and else can be used continuously.
Else if: or if.

7.While loop structure

While loop: Format: while (Boolean condition) {loop body}

Execution rules:
1.Judge Boolean condition,If false, jump out of the loop directly. If true, execute the loop body
2.After the loop body is executed once, return to step 1
// var flag =false; 
// When a boolean variable makes a judgment again, the result of the judgment condition should be true

Do while Cycle:
Do it first do Then go to see if the conditions are met. If so, continue do End if not satisfied
var sum =0;
do{  sum++;console.log(sum);}while(sum<10)

8.For cycle

  • For loop format: for (loop control variable assignment; loop condition; loop control variable modification) {loop body}
  • Execution rules:
    Perform initial loop control condition variable assignment
    Judge whether the loop control conditions are met. If not, exit the loop directly. If yes, execute the loop body.
    When the loop is completed, execute the loop control variable modification, and then return to the second step
  • Loop nesting:
// In the loop body, you can use loops to control variables
// i represents the value i of the loop
// A loop can be nested, and another loop can be written inside
for(var i=0;i<10;i++){
	for(var j=0;j<10;j++){
		console.log(i+""+j);
	{
}
  • Cycle exit:
    Continue: immediately end the execution of the loop body, change the loop control variable, and then judge the condition again,
    Break: used to exit the current loop.

The difference between continue and break:
Continue is to skip this cycle and continue to execute the next cycle.
Break is the direct end of the loop.
The nested loop break cannot be called out at one time. If you need to jump out of the outer loop, you can give the outer loop a name and append the name after the break.

9. Difference between =, = = and = = = in JS

=Is an assignment operator
==Yes, judge whether the values are equal
===Yes, judge whether the value and type are equal(Compare values before types)

Topics: Javascript Front-end html5