Javascript User Manual
1. Introduction to Javascript Javascript is a Web scripting language developed by Netscape Based on Client browsers, oriented (based) objects, and event-driven web pages. The predecessor of JavaScript is livescript. Javascript features: simple, easy to learn, easy to use; supports IE and navigator, complies with ECMA (European Computer Manufacturing Association) standards; event-driven scripts Program Design Concept; dynamic and interactive operations. Functions of javascript: Interactive operations, form verification, webpage special effects, web games, and server script development. Javascript compiling environment: Text Editor. Execution platform: Web browser. Execution method: Explain the execution (from top to bottom ). Javascript version: javascript1.0 -- javascript1.4 Browser support for javascript: javascript/ie3.0, javascript1.2/ie4.0; Microsoft allows users to set their own JavaScript processing mode. Relationship between JavaScript and Java, VBScript, and JScript: The differences between JavaScript and Java are as follows: First, they are two different products developed by two companies. Java is a new generation of object-oriented programming language launched by sun, which is particularly suitable for Internet application development; javascript is a product of Netscape, which aims to expand the functions of Netscape Navigator. It is an object-and event-driven explanatory language that can be embedded into web pages. Secondly, JavaScript is object-based, while Java is object-oriented, that is, Java is a real object-oriented language. Even if you develop simple programs, you must design objects. Javascript is a scripting language that can be used to create complex software that is unrelated to the network and interacts with users. It is an object-and event-driven Programming Language . Therefore, it provides a wide range of internal objects for designers. Third, the two languages are executed differently in their browsers. Java Source code Before being passed to the client for execution, it must be compiled. Therefore, the client must have a simulator or interpreter on the corresponding platform. It can be compiled independently of a specific platform through the compiler or interpreter. Code . Javascript is an interpreted programming language. Its source code does not need to be compiled before it is sent to the client for execution. Instead, it sends the character code in the text format to the client and is interpreted and executed by the browser. Fourth, the variables used by the two languages are different. Java uses a strongly typed variable check, that is, all variables must be declared before compilation. The variable declaration in Javascript uses its weak type. That is, variables do not need to be declared before use, but the interpreter checks their data types at runtime. Fifth, the code format is different. Java is an HTML-independent format. It must be loaded by referencing external media in HTML, and its code is saved as byte code in an independent document. JavaScript code is a text character format that can be directly embedded into HTML documents and loaded dynamically. Compiling HTML documents is as convenient as editing text files. Sixth, the embedding method is different. In HTML documents, the two programming languages have different identities. Javascript uses <SCRIPT>... </SCRIPT>, while Java uses <APPLET>... </APPLET>. 7. Static binding and dynamic binding. Java uses static concatenation, that is, Java object reference must be carried out during compilation, so that the compiler can implement a strong type check. If it is not compiled, the object reference check cannot be implemented. Javascript uses dynamic concatenation, that is, JavaScript Object Reference is checked during runtime.
Ii. Javascript format: Javascript is case sensitive; JavaScript scripts must be embedded in HTML files; JavaScript scripts cannot contain HTML code. (double quotation marks) write a script statement per line; You can add points at the end of a statement; The Javascript script program can be independently saved as an external file, but it cannot contain the <SCRIPT> </SCRIPT> tag. Several Basic formats of JavaScript scripts: 1 <SCRIPT> Document. Write ("Hello world !!! "); </SCRIPT> 2 <script language = "JavaScript"> Document. Write ("Hello world !!! "); </SCRIPT> 3 <script language = "JavaScript" type = "text/JavaScript"> Document. Write ("Hello world !!! "); </SCRIPT> 4 <script language = "javascript1.2"> Document. Write ("Hello world !!! "); </SCRIPT> 5 <SCRIPT src = "Hello. js"> </SCRIPT> Note: Document. Write ("Hello world !!! "); Must be saved as an external file: Hello. js 6 <script language = "JavaScript"> <! -- Document. Write ("Hello world !!! "); --> </SCRIPT> Use the Javascript protocol: <A href = "javascript: Alert ('Hello world !!! ') "> Click </a> <A href = "#" onclick = "alert ('Hello world !!! ') "> Click </a> <A href = "/JavaScript: //" onclick = "alert ('Hello world !!! ') "> Click </a> Iii. Javascript data types: Numeric value: an integer (composed of positive and negative numbers, octal, decimal, and hexadecimal), a floating point number (composed of positive and negative numbers, digits, and decimal points, which can be a regular or scientific Notation ); Logical value: Boolean (true, false ); String Value: single quotation marks and double quotation marks; Null: NULL Undefined value: non-existent objects, defined but not assigned values; Iv. Javascript constants: Boolean constant: True False Integer constant: 3721 0007 0 xaff (0 xaff) Floating Point constant: 3.14. 001 3.721e + 3-3.721e-3 String constant: "your email address is incorrect! " String constants with escape characters: \ B backspace) \ F form feed) \ N newline) \ R return (carriage return) \ T Tab) \ 'Single quotes (') \ "Double quotation marks (") \ Backslash (\) Example: Document. Write ("I love \ 'javascript \'") Document. Write ("file under c: \ windows ") Document. Write ("<PRE> under 18 years old \ n cannot enter! </PRE> ") Document. Write ("under 18 years old <br> cannot enter! ") Document. Alert ("Wrong Password \ n please try again! ") Array constant: Holobby = ["Listening to music", "watching movies"] Holobby [0], holobby [1] Holobby = ["Listening to music", "watching movies",] Holobby [0], holobby [1], holobby [2], holobby [3] V. Javascript variables:
1. variable naming rules: The first character must be an uppercase or lowercase letter, underscore (_), or dollar sign ($). Subsequent characters can be letters, numbers, underscores, or dollar signs; the variable name cannot be a reserved word; the length is arbitrary; case sensitive; Convention: Set the cluster to top; use local variables whenever possible; easy to understand: avoid confusion. 2. Declare variables: VaR stdid; VaR name, sex; VaR Total = 3721; VaR notnull = true; VaR name = "bruce lee", sex = "sir "; VaR I = J = 0; 3. Variable assignment: Stdid = 2004007; 3. variable scope: (method and position) Global variable: omitted var or declared outside the Function Local variable: declared in the function Global variables can be used in the entire script and can be referenced in different windows (specify the window name) Example: <SCRIPT> VaR langjs = "JavaScript"; // langjs is a global variable Test (); Function Test (){ VaR langvbs = "VBScript"; // langvbs is a local variable. Document. Write ("<li>" + langjs ); Document. Write ("<li>" + langvbs ); } Document. Write ("<li>" + langjs ); Document. Write ("<li>" + langvbs ); </SCRIPT> 6. Javascript expressions: Arithmetic expression; String expression; Relational (comparison) expression; Logical expression. VII. Javascript operators: 1. Based on the number of processed objects, there are cell operators, binary operators, and ternary operators. 2. assignment operator: = + =-= * =/= % = (remainder) 3. Arithmetic Operators: +-*/% (remainder) + + (ascending) -- (descending )- Example 1: <SCRIPT> VaR x = 11; Var y = 5; With (document ){ Write ("x = 11, y = 5 "); Write ("<li> X + Y is", x + y ); Write ("<li> x-y is", x-y ); Write ("<li> X * Y is", x * y ); Write ("<li> x/y is", x/y ); Write ("<li> X % Y is", X % Y ); Write ("<li> ++ X is", ++ X ); Write ("<li> -- y is", -- y ); } </SCRIPT> Example 2: <SCRIPT> VaR x = y = 3; With (document ){ Write ("x = 3, y = 3 <br> "); Write ("after X = y ++ :"); X = y ++; // y → X, Y + 1 → y Write ("X is", X, "; y is", Y, "<br> "); Write ("perform the X = ++ y operation again :"); X = ++ y; // y + 1 → X, Y + 1 → y Write ("X is", X, "; y is", y ); } </SCRIPT> 4. String operators: ++ = 5. Comparison operators: = ,! =, = (Value and type ),! = (Value and type), <, <=,>,> =. Example: <SCRIPT> VaR x = 5; // X is the value 5 Var y = '5'; // y is the string 5 VaR z = 6; // X is the value 6 With (document ){ Write ("x = 5, y = '5', Z = 6 "); Write ("<li> X = y? ", X = y ); Write ("<li> X = y? ", X = y ); Write ("<li> X! = Y? ", X! = Y ); Write ("<li> X! = Y? ", X! = Y ); Write ("<li> x <= Z? ", X <= z ); Write ("<li> Y <= Z? ", Y <= z ); // Automatic type conversion } </SCRIPT> 6. logical operators: &, || ,! Example 1: <SCRIPT> VaR T = true; VaR F = false; With (document ){ Write ("<ol> <li> true & true:", T & T ); Write ("<li> true & false: The result is", T & F ); Write ("<li> false & true: the result is", F & T ); Write ("<li> false & false: The result is", F & F ); The result of write ("<li> true & (1 = 1) is", T & (1 = 1 )); Write ("<li> false & 'A' the result is", F & 'A '); Write ("<li> the result of 'A' & false is", 'A' & F ); Write ("<li> true & 'A' the result is", T & 'A '); Write ("<li> the result of 'A' & True is", 'A' & T ); Write ("<li> the result of 'A' & 'B' is", 'A' & 'B '); // &: One is not a logical value. If the value of the first operand is flase, the value of the first operand is flase. Otherwise, the value of the second operand is returned. } </SCRIPT> Example 2: <SCRIPT> VaR T = true; VaR F = false; With (document ){ Write ("<ol> <li> true | true:", T | T ); Write ("<li> true | the result of false is", T | F ); Write ("<li> false | the result of true is", f | T ); Write ("<li> false | the result of false is", f | F ); Write ("<li> true | (1 = 1) the result is", T | (1 = 1 )); Write ("<li> false | the result of 'A' is", f | 'A '); Write ("<li> 'A' | the result of false is", 'A' | F ); Write ("<li> true | the result of 'A' is", T | 'A '); Write ("<li> 'A' | true:", 'A' | T ); Write ("<li> 'A' | the result of 'B' is", 'A' | 'B '); // |: A non-logical value. If the value of the first operand is true, a character, or a non-zero number, the value of the first operand is returned. Otherwise, returns the value of the second operand. } </SCRIPT> Example 3: <SCRIPT> With (document ){ Write ("<li>! The result of true is ",! True ); Write ("<li>! The result of false is ",! False ); Write ("<li>! The result of 'A' is ",! 'A '); Write ("<li>! The result of 0 is ",! 0 );} </SCRIPT> 7. bitwise operators; Special operators: ①. New OPERATOR: create an object (Instance) Format: Object Name = new object type (parameter) ② This operator: indicates the current object Format: This [. Attribute] Example: <SCRIPT> Function validate (OBJ ){ Alert ("the value you entered is:" + obj. value ); } </SCRIPT> Enter any character: <br> <Input type = "text" onkeyup = "Validate (this)"> ③ Conditional operators: ternary Operators Format: <condition expression>? First value: second value Example: NS = (document. layers )? 1: 0; Ie = (document. All )? 1: 0; Window. Screen. width> 800? Imgheight = 100: imgheight = 100 Window. Screen. width> 800? Imgleft = 15: imgleft = 122 <SCRIPT> Function showsex (){ Onoroff = Document. Forms [0]. Sex [0]. Checked Status = (onoroff )? "Handsome guy": "Beautiful Girl" Alert ("Hello! "+ Status) } </SCRIPT> Enter your gender: <Form onclick = showsex ()> <Input type = radio name = sex> boys <Input type = radio name = sex> female </Form> Operator execution priority: Parentheses () One dollar! ~ -++ -- Typeof void Delete Arithmetic */+- Bit displacement <>>>> Comparison <=>>==! = Bit logic & ^ (XOR) | Logic & | Ternary condition? Assignment = + =-= * =/= % = <<=>>>>>=<=^= | =
VIII. Javascript statements: 1. Comment statement: Single line comment: // comment text Multi-line comment :/* Comment text */ Example: /*************************************** * Home of source code * * Http://www.mycodes.net * * Download: http://www.mycodes.net * * Forum http://www.mycodes.net/bbs * **************************************** */ 2. With statement: (Object operation statement) Function: Creates a default object for a program. Format: With (<Object> ){ <Statement group> } Example 1: With (document ){ Write ("time-limited flash sale items :"); Write ("<li> viewsonic 17 \" display. "); Write ("<li> Epson printer. "); } Example 2: Document. Write ("snap-up item :"); Document. Write ("<li> viewsonic 17 \" display. "); Document. Write ("<li> Epson printer. "); Example 1 is equivalent to Example 2. 2. If... else statement: Format 1: If (<expression>) <Statement 1>; Else <Statement 2>; Or If (<expression>) <Statement 1>; Else <Statement 2>; Example: <SCRIPT> VaR now = new date (); VaR hour = now. gethours (); If (6 Document. Write ("Work hard to harvest! "); Else Document. Write ("take a break and start again after charging. "); </SCRIPT> Format 2: If (<expression> ){ <Statement group 1> } Else { <Statement group 2> } Format 3: If (<expression 1> ){ <Statement group 1> } Else if (<expression 2> ){ <Statement group 2> } Else { <Statement group 3> } Example 1: <SCRIPT> VaR now = new date (); VaR day = now. getday (); VaR dayname; If (Day = 0) dayname = "Sunday "; Else if (Day = 1) dayname = "Monday "; Else if (Day = 2) dayname = "Tuesday "; Else if (Day = 3) dayname = "Wednesday "; Else if (Day = 4) dayname = "Thursday "; Else if (Day = 5) dayname = "Friday "; Else dayname = "Saturday "; Document. Write ("Today is happy", dayname ); </SCRIPT> Example 2: <SCRIPT> VaR now = new date (); VaR day = now. getday (); VaR dayname; If (Day = 0) dayname = "Sunday "; Else if (Day = 1) dayname = "Monday "; Else if (Day = 2) dayname = "Tuesday "; Else if (Day = 3) dayname = "Wednesday "; Else if (Day = 4) dayname = "Thursday "; Else if (Day = 5) dayname = "Friday "; Else dayname = "Saturday "; Document. Write ("Today is happy", dayname ); </SCRIPT> While statement: Format 1: While (<expression>) Statement; Format 2: While (<expression> ){ <Statement group> } Example: <SCRIPT> VaR I = 5; While (I> 0 ){ Document. Write ("I =", I, "<br> "); I --; } </SCRIPT> Do... while statement: Format: Do { <Statement group> } While (<expression>) Example: <SCRIPT> VaR I = 5; Do { Document. Write ("I =", I, "<br> "); I --; } While (I> 0) </SCRIPT> For statement: Format: For (<initial expression>; <condition expression>; <variable expression> ){ <Statement group> } Example: <SCRIPT> For (VAR I = 5; I> 0; I --){ Document. Write ("I =", I, "<br> "); } </SCRIPT> ... in statement: Execute all attributes of the specified object repeatedly. Format: for (variable in object) { }< br> example: Break statement: Format: Break example: continue statement: Format: Continue example: switch statement: Format: switch ( ) { case : break; case : break; ... default } Example: <SCRIPT> Function greet (givensex ){ Switch (givensex ){ Case "handsome guy": Alert ("Hello! "); Break; Case "beauty": Alert ("Hello! "); Break; } } </SCRIPT> Enter gender: <Form> <Input type = "radio" name = "sex" onclick = "Greet ('handsome guy ')"> Handsome guy <Input type = "radio" name = "sex" onclick = "Greet ('beauty ')"> Beauty </Form> |