Home > Developer > JavaScript
If you want to use JavaScript in HTML, you must possess it first. You can use it only when you have it. It is like learning it. You must recognize it first before learning it, the following describes how to answer this question.
How JavaScript exists in HTMLThere are two methods for JavaScript to exist in HTML. One is direct and the other is indirect reference. The advantages and disadvantages of the two methods will not be discussed much. We all know that what we just want to talk about is the specific implementation.
Directly existYou can directly write the corresponding JavaScript code in the HTML document, as shown in the following code:
<HTML> Indirect existThe corresponding JS file is introduced in the HTML document, as follows:
<! -- Content in the HTML document --> <HTML> Use JavaScriptJavascript can be used in two ways: direct use and event-based use.
Direct useThe javascript code block in HTML will allow the browser's control program to be handed over to the corresponding javascript interpreter. If it is a custom function, JavaScript will not execute it, unless we call this function directly in the JavaScript code block, for example, the say () function in the "exist directly" code is the same as that in the process function, other JavaScript statements in JavaScript code blocks are directly interpreted and executed.
Indirect useFor functions in JavaScript (custom and built-in), the event is implemented through the Javascript event mechanism. The event is embodied in some attributes added to the tag by HTML to respond to this function, it describes some behaviors that occur on HTML elements.Specific events include:
The following code is an example of indirect use of Javascript in HTML, which is completed through events:
<HTML>Basic JavaScript syntax
Data TypeData types include: String, number, array, Boolean, object, null, undefined
The data type in JavaScript does not have the corresponding keyword. It can only represent this data type in the form of its value. Therefore, JavaScript is called a weak type language, when the Declaration changes, it is best to assign the corresponding value to it. Otherwise, the computer does not know what data type this variable represents. what's even worse, if we use this variable without assigning an initial value, the result cannot meet our expectation.
The following code describes how to determine the Data Type of a variable. String: var strname = ""; or var strname; strname = ""; number: var intcount = 0; var floatcount = 0.0; array: var arr = new array (); arr (0) = "adsf"; Boolean: var flag = true;
Type conversionThere are two types of conversions: implicit conversion and display conversion.
Implicit conversion: If the expression contains different types of data, implicit type conversion is performed during calculation. Number + String: Number to string; Number + Boolean: True to 1, false to 0; string + Boolean: Boolean to string true or false.
Display type conversion: The function used for display type conversion is as follows. Function parseint (): forcibly converted to an integer. For example, parseint ("3.14") equals to 3. Function parsefloat (): forcibly converted to a floating point. For example, parsefloat ("3.14 ") equals 3.14; function eval (): forcibly converts a string to an expression and returns the result. For example, Eval ("1 + 2") equals to 3, Eval ("1 <2 ") equal to true.
OperatorArithmetic Operators: + (Concatenation Operators that can be used as strings),-, *,/, ++, --, % (remainder), value assignment operators: =, + =, and so on; relational operators: = ,! =, = (Strictly equal to), >,<, >=, <=; logical operator: &, || ,!. If you don't talk about other things, but you don't want to talk about the specific things, you just need to try it on your own.
Block Structure Sequence StructureThe ordered structure is a continuous set of single statements. Break, continue, and so on. The ordered structure is everywhere. a single statement can also be called an ordered structure.
Select StructureIf... Else (either) Format
// You can nest if-else; you can directly include if; you can omit {}, but if or else acts on the next statement if (expression) {// code where the expression is actually executed} else {// code where the expression is falsely executed}Switch... Case (select one more) Format
Switch (expression) {Case match 1: Statement ......; Break; Case match 2: statement ......; Break; default: // when the expression result is not matched with all matching values, the code will be executed}Loop StructureFor format
For (initial condition; judgment condition; action after each loop) {// cyclic code block}While format
While (Judgment condition) {// cyclic code block}Do ...... While format
Do {// The first time, first run, then judge} while (Judgment condition)For ...... In (traversing arrays)
var myArr= new Array("0","1","2");for(var index in myArr){ alert(myArr[index]);}Exception Handling StructureTry ...... Catch ...... Finnally
Try {// manually throw an exception throw new error ("custom error message prompt! ");} Catch (Ex) {// displays the error message indicating alert (" error: "+ ex. message);} finally {alert ("whether or not the exception is caught, execute the code of this block! ");}FunctionCommon Format. Others are explained in the object-oriented features.
// Method 1: function name () {// This method can be used as a private method of the "function"} // Method 2: var fmethod = function () {// at this time, the variable name fmethod is the variable name of the method (excluding parentheses ), method 1 and method 2 have the same functions. // This method can also be used as a private method of the "function"} // method 3: fmethod = function () {// The variable name fmethod of this method is the variable name of this method (excluding parentheses). This method is used as the internal method of the "function". // This function is a global function, it can be used as a method in a "function", but it is meaningless. It is not encapsulated. the outside world can access it directly through its name.} // Method 4: This. fmethod = function () {// This method uses the encapsulation technology. This refers to the object of the function. That is to say, it cannot be directly accessed by the outside world. It must be an "object}Note: There is an implicit arguments object in the function to save the function parameters. arguments is an array. We do not need to declare parameters in the function. When using parameters, you just need to directly transfer it to it. That is to say, the definitions of functiona () and functiona (x, y) functions are actually the definition of a function, and our parameters are completely unnecessary. Using functions, when you need to pass parameters inside, you can directly transfer the parameters. When you want to find those parameters that are passed in, you can directly use the aruments array (this does not require our function, declare that this is the one that the system automatically provides)
Object-oriented features
When programming, we compile a function first, and then call it when needed. The function first compiled is a template and will not be executed automatically, it is executed only when we call it. OK. After we know this, we are looking at Javascript. Functions in Javascript have a major feature, that is, nesting can be implemented, that is, in addition to some variables, function a can also contain function B. Because of this mechanism, JavaScript can implement object-oriented encapsulation. In addition, there is a variable in Javascript that can store such a function, corresponding to the function pointer. That is to say, function A has a variable, which is previously defined as function B, function A can use this variable to inherit all the methods and variables of function B. Of course, function a can also use this variable to change the functions of function B, this is the rewrite mechanism first. Of course, the function can also implement the overload mechanism. In the description of this section, the "function (a)" we are talking about is similar to our object-oriented class, but it is not a class and does not know what it is called, just know its mechanism. We can call this "function" as a "class". When you need to pay attention to it, this "function" can also be called as a general function, the "variable (pointing to other functions)" mentioned above is called an "object". Well, let's not talk about it much, next, let's take a look at how JavaScript implements object-oriented encapsulation, inheritance, and polymorphism mechanisms.
EncapsulationEncapsulation makes methods and variables have certain boundaries to achieve a purpose that can be used without any "things". To use them, you must use the "guard" to use them, this greatly improves data security (imagine how big the hidden danger is that thousands of unrelated functions can access these variables. Javascript is implemented through functions.
<HTML> InheritanceThe Inheritance mechanism described above is not actually a real mechanism. It is actually made in the form of a prototype chain. What you need to know here is, the function object contains a prototype attribute, which can store the reference of its parent. After defining a function object, when using a method of this object, it will look up in its own return to see if there is any corresponding method. If not, the system will follow the prototype reference to find the corresponding search in the parent function, and so on, until the query is found, the following code describes inheritance through the prototype chain method.
<HTML> PolymorphismThe implementation of polymorphism includes method overloading and rewriting. With regard to rewriting, the above inheritance already exists. Below we only write one example about overloading, because Javascript is a weak type language, the type of the variable can be determined only when the input is used. According to this feature, we can realize its polymorphism as follows:
<HTML> ClosureClosures are the nesting of functions. They are read through internal functions (closures) and the data in external functions. The closure can read the variables in the external function. The closure keeps the value of the read external variable in the memory.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
