Chapter 1 JavaScript foundation [cloud smart link]

Keywords: Javascript Java ECMAScript Spring

Chapter 1 JavaScript Basics

1. What is JavaScript?

HTML+CSS completes the static page display, but to complete better and more complex user interaction and data interaction and display, you need to use JavaScript. JavaScript is an object-based and event driven scripting language with security performance

2. Features of JavaScript

a. You can add interactive behavior to an HTML page

b. Script language, syntax similar to java syntax

c. Explanatory language, explaining while executing

3. Composition of JavaScript

a.ECMAScript standard

b, DOM Document Object Model

c.BOM Browser Object Model

4. Basic structure of JavaScript

html  <script>document.write("Preliminary knowledge JavaScript");</script>  

5. Principle of execution

Input a web address in the browser client. This page is an HTML page with JavaScript. Send it to the server. The server receives and downloads the HTML page with JavaScript, and then returns it to the browser client

6. How to introduce JavaScript

a. Inside

html<script></script>  

Note: it can be placed anywhere if you want to make sure that the js is loaded

b. External

html  <script src="js route" type="text/javascript"></script> 

c. In line

html<input type="button" name="btn" value="Spring box" onclick="javascript:alert('Hello javascript')"/>  

7. What are variables?

Open space in memory to save data

Declare with var, which is the keyword used to declare variables. Variables confirm variable types according to values

javascript  var width; width = 5; //Declare before assigning  
javascript  var width = 5;  //Declare and assign at the same time  
javascript  width = 5;  //Direct assignment not declared, not recommended  

8. Data type?

The undefined type has only one value, undefined. When the declared variable has not been initialized, the default value of the variable is undefined.

The null type also has only one value, which is null. Null is used to indicate an object that does not exist. It is often used to indicate that a function attempts to return an object that does not exist

Number whether it is an integer or a floating-point number, it returns the number type

Boolean boolean type, return true or false

String whether a single character or a string, the returned value is of string type var s s ='s' or string type

Object object

Note: different from java

9. typeof() operator

Used to detect what data type a variable is

For example:

javascript var a = 10;  var b = "Joy";  var x,y,z =10; var arr = new Array(3);  

javascript
typeof(a);         //number

typeof(b);         //string

typeof(x);         //undefined

typeof(z);         //number

typeof(null);      //object

typeof(arr);       //object

typeof(true);      //boolean

10. Array

An array is a variable that opens up a series of spaces to store a series of data of the same data type

javascript
var arr = new Array(5); / / declare an array named arr with a length of 5

var arr = ["aaa","bbb","ccc","ddd","eee]; / / assign value to array arr

arr[0] = "aaa"; / / get the first value in the array

a. Properties of array

javascript  arr.length   //Get the length of the arr array  

b. Array method

javascript  arr.join()  //Put array elements into strings and concatenate them with hyphens  
  
var arr = \["aaa","bbb","ccc"\];  
  
var arrList = arr.join("-");  
  
document.write(arrList);   //aaa-bbb-ccc  
  
arr.sort()       //Array sorting  
  
arr.push()      //Add an element to the arr array  

11. Operators

javascript provides rich operators to satisfy the calculation and comparison in the logic process

|Operator type | operator|
| :--------: | :----------------------------------------------------------: |
|Arithmetic operator | + - * /% + + --|
|Assignment operator | = + = - =|
|Comparison operator | >|
|Logical operator | & & (and) \ | \ | (or)! (not)|

12. Control statement

a. Conditional sentence

javascript  
if(condition){  
 //JavaScript code  
}else{  
 //JavaScript code  
}  
//Execute if block code when the condition in if is met  
//When the condition is not met, else block code is executed  
  
javascript  
switch(Expression){  
 case Constant:  
 //JavaScript code  
 break;  
 case Constant:  
 //JavaScript code  
 break;  
 default:  
 //JavaScript code  
 break;  
}  
//Match the constant after case according to the expression after switch, and execute the current case code after matching  
//break will jump out of the current switch structure  
//The consequence of not writing break is that the following case s are executed directly without matching  
//The default block is the code executed when none of the above case blocks match successfully  

b. Cycle

javascript  
for(Initial value; condition; increment){  
  
 //JavaScript code  
  
}  
//The for loop consists of four parts: a regular loop, the initial value is the initial state of the loop, the condition is the end condition of the loop, and the increment is the initial state of the modified loop  
//When the loop condition is met, the code block within the for loop is executed  
//If you don't write in increments, you will have a life and death cycle  
  
  
javascript  
while(Conditions){  
 //JavaScript code    
}    
//When the conditions in the while loop are met, enter the loop  

  
  
javascript  
do{   
//JavaScript code    
}while(condition)  
   
//Execute the code once, and then judge whether the loop conditions are met. If they are met, execute the loop body  

javascript  
for(var i in Array name){   
//JavaScript code    
}    
//On the basis of for loop, the expression part of for loop is simplified  
//For loop for traversing arrays and collections  
//How many elements are in the array, i represents the subscript of each cycle  

13. Notes

a. One line//

b. Multiline / JavaScript code

14. I / O

a. Output document.write(); alert();

b. Enter prompt ("please enter a number", "");

15. Grammatical conventions

a.javascript is case sensitive

b. Follow the specification of variable naming

c. Write a semicolon after each sentence

16. Program debugging

a.alert()

b. Developer tool mode of browser, combined with alert(), interrupt debugging

17. Functions

a. System function

 javascript  
 parseInt("12aa");   //12. Convert string to integer  
  
 parseFloat("33aa1.34")//33 converting strings to floating-point numbers  
  
 var a = "33vvv";  
  
 var b = "33.2aa3";  
  
 var c = "2";  
  
 document.write(parseInt(a)+","+parseInt(b)+","+parseInt(c));//33,33,2  
  
 document.write(parseFloat(a)+","+parseFloat(b)+","+parseFloat(c));//33,33.2,2  
   
 var d="Hello";  
  
 isNaN(d)      //False: judge whether it is a non numeric value, return true or false  
 

b. Custom function

javascript
function study(){
//JavaScript code
}

1. Reference

javascript  
function study(Parameter 1, parameter 2, parameter......){    
//JavaScript    
}  

For example:

javascript <input type="button" value="Button" onclick="study(prompt('Please enter a number'))"/>  

javascript
<script>
function study(num){
document.write("I love JavaScript");
}
</script>

2. No reference

javascript
function study(){
//JavaScript code
}

For example:

javascript  
<input type="button" value="Button" onclick="study()"/>  
<script>  
 function study(){  
  
 document.write("I love JavaScript");  
  
 }  
  
</script>

Calling function: generally used in combination with the event of form element

18. Scope of variable

a. Local variable

Note: the declaration can only be used in the current function, and other functions cannot access it.

b. Global variable

Description: declared outside the function, all functions can be used.

19. Events

When the user performs some mouse or keyboard operations or some situation occurs on the page, we can capture the operation and process the corresponding response

Name Description

onload a page or an image to complete the loading

javascript window.onload=function(){};

onlick mouse click an object

javascript domObj.onclick=function(){}

onmouseover mouse guide over an element

javascript domObj.onmouseover=function(){}

Onkeydowna keyboard key is pressed

javascript domObj.onkeydown=function(){}

The content of onchang E domain is changed

javascript domObj.onchange=function(){}

Posted by glitch003 on Sat, 27 Jun 2020 22:26:06 -0700