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(){}