JavaScript Introduction to language
One 、JavaScript Introduce
Javascript The birth of language is mainly to complete the data validation of the page . So it runs on the client side , You need to run a browser to parse and execute JavaScript Code .
JS yes Netscape Netscape products , It was first named LiveScript; To attract more java The programmer . Renamed JavaScript.
JS Weak type ,Java It's a strong type .
Two 、JavaScript and html The way code is combined
2.1、 The first way
Only need head In the label , Or in body In the label , Use script label To write JavaScript Code .
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>script Use of labels </title> <script type="text/javascript"> //alert yes JavaScript Language provides a warning box function // It can take any type of parameter , This parameter is the prompt message of the warning box alert("hello javascript!"); </script> </head> <body> </body> </html>
The effect is as follows ：
2.2、 The second way
Use script Tags introduced A separate JavaScript Code file .
Create a js file , Internal writing js Code ：
HTML The page content ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <!-- We just need to pass src Attribute introduction js File can . The way of introduction and directly in script The label says js There are only two ways to code , Can't be used at the same time --> <script type="text/javascript" src="1.js"></script> <script type="text/javascript"> alert("hello2"); </script> </head> <body> </body> </html>
The effect is as follows ：
3、 ... and 、 Variable
What is a variable ？ A variable is a named memory that can hold certain values .
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var i; // alert(i); //undefined i = 12; // alert(typeof(i)); //number // It can take the data type of any variable i = "abc"; alert(typeof(i)); //string var a = 12; var b = "abc"; alert(a * b); //NaN </script> </head> <body> </body> </html>
Four 、 Operator
4.1、 Relationship between operation
be equal to ：==
It's a simple comparison of words
All equal to ：===
In addition to making a literal comparison , It also compares the data types of the two variables
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var a = 12; var b = "12"; alert(a == b);//true alert(a === b);//false </script> </head> <body> </body> </html>
4.2、 Logical operations
&&： And operation
||： Or operations
!： Reverse operation
stay JavaScript In language , All variables can be used as boolean Type variables to use .
0、null、undefined、NaN、""( Empty string ) All are false.
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var a = "abc"; var b = true; var c = false; var d = null; //&& alert(a && b);//true alert(b && a);//abc alert(a && c);//false alert(a && d);//null //|| alert(d || c);//false alert(c || d);//null alert(a || c);//abc alert(b || c);//true </script> </head> <body> </body> </html>
5、 ... and 、 Array （***** a key ）
5.1、 How to define an array
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var arr = []; alert(arr.length);//0 arr[0] = 12; alert(arr[0]);//12 alert(arr.length);//1 // stay JavaScript In language , We assign values to arrays by subscript , So the maximum subscript value , It will automatically expand the array arr[2] = "abc"; alert(arr.length);//3 alert(arr[1]);//undefined // Traversal of array for (var i = 0; i < arr.length; i++) { alert(arr[i]); } </script> </head> <body> </body> </html>
6、 ... and 、 function (***** a key )
6.1、 Two ways to define functions
The first one is ： Use function Keyword to define the function
Format ：
function Function name ( Parameter list ){
The body of the function ;
}
// notes : If the function has a return value , Just use return Keyword return value .
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> function fun1() { alert(" Nonparametric functions fun1() It's out of use "); } fun1();// Function will only execute if it is called function fun2(a,b) { alert(" There are parametric functions fun2() Is called the ,a = " + a + ", b = " + b); } fun2(10,20); function sum(num1,num2) { return num1 + num2; } alert(sum(10,20)); </script> </head> <body> </body> </html>
The second way to define it , The format is as follows ：
var Function name = function( Parameter list ){
The body of the function ;
}
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var fun1 = function () { alert(" Nonparametric functions "); }; fun1(); var fun2 = function (a,b) { alert("a = " + a + ", b = " + b); }; fun2(10,20); var sum = function (num1,num2) { return num1 + num2; }; alert(sum(10,20)); </script> </head> <body> </body> </html>
stay js in , Functions are not allowed to be overloaded , An overload of a function will override the last definition .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> function fun() { alert(" Nonparametric functions "); } function fun(a,b) { alert(" There are parametric functions "); } fun(); </script> </head> <body> </body> </html>
The effect is as follows ：
6.2、 Functional arguments Invisible parameter （ Only in function Within the function ）
Is in the function There is no need to define , But it can be directly used to get all the parameters of the variable . We call it stealth parameters .
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> function fun(a) { alert("a = " + a);//a = 1 for (var i = 0; i < arguments.length; i++) { alert(arguments[i]); } } fun(1,true,"abc"); </script> </head> <body> </body> </html>
7、 ... and 、JS Custom objects in
Code example ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var obj = new Object(); obj.name = " Guo Peng "; obj.age = 25; obj.fun = function () { alert(" Age :" + this.name + ", Age :" + this.age); }; alert(obj.name); obj.fun(); </script> </head> <body> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javascript</title> <script type="text/javascript"> var obj = { name:" Guo Peng ", age:25, fun:function () { alert(" full name :" + this.name + ", Age :" + this.age); } }; alert(obj.age); obj.fun(); </script> </head> <body> </body> </html>
8、 ... and 、js In the event
What is an event ？
The response of a computer input device to interact with a page , We call it an event .
Event registration can be divided into static registration and dynamic registration ：
What is event registration （ binding ）？
It's telling the browser , What operation code should be executed after the event response , It's called event registration or event binding .
Static registration Events ： adopt html The event attribute of the tag is directly assigned to the code after the event response , This is called static registration .
Dynamic registration Events ： To pass first js Code gets tagged dom object , And then through dom object . Event name = function(){} This form is given to the code after the event response , It's called dynamic registration .
Dynamic registration basic steps ：
1、 Get the label object
2、 Label object . Event name = fucntion(){}