Home > Developer > JavaScript
JavaScript can be embedded in HTML in two ways:
Use the SCRIPT tag to embed the SCRIPT in HTML. format:
<SCRIPT>
_ JavaScript statements
</SCRIPT>
The LANGUAGE attribute is used as an option to specify the script LANGUAGE. Its usage is as follows:
<Script language = "JavaScript">
_ JavaScript statements
</SCRIPT>
</SCRIPT> is the end mark of <SCRIPT>, which can contain any number of JavaScript statements.
JavaScript is case sensitive
Example 1: A simple script<HTML>
<HEAD>
<Script language = "JavaScript">
Document. write ("Hello net .")
</SCRIPT>
</HEAD>
<BODY>
That's all, folks.
</BODY>
</HTML>
In example 1, the page is displayed:
Hello net. That's all folks.
Code hidingIn an old version browser that does not recognize JavaScript, you can place the script in the comment field so that the JavaScript code will not be displayed. Enclose the entire script with HTML Annotations:
<! -- Start hiding the script content, which is not displayed in the browser of the old version
// Hiding ends here. -->
After pages are loaded, scripts placed between SCRIPT tags are analyzed. functions are stored but not executed. functions are called and executed by page events.
It is important to correctly understand the differences between defining a function and calling a function. Defining a function only names this function and describes what to do when it is called, the function is called to actually execute the specified action using the transmitted parameters.
Example 2: a script with functions and comments
<HEAD>
<Script language = "JavaScript">
<! -- Start hiding the script content, which is not displayed in the browser of the old version
Function square (I ){
Document. write ("The call passed", I, "to the function.", "<BR> ")
Return I * I
}
Document. write ("The function returned", square (5 ),".")
// Hiding ends here. -->
</SCRIPT>
</HEAD>
<BODY>
<BR>
All done.
</BODY>
The page in example 2 is displayed:
We passed 5 to the function.
The function returned 25.
All done.
Generally, all functions on the page should be defined in the HEAD part of the document, because the HEAD is first loaded, which ensures that before you perform any actions that may call the function, all functions have been loaded.
Example 3 is a script with two functions.
<HEAD>
<SCRIPT>
<! --- Hide script from old browsers
Function bar (){
Document. write ("}
Function output (head, level, string ){
Document. write ("<H" + level + ">" + head + "</H" + level + "> <p>" + string)
}
// End hiding from old browsers -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT>
<! --- Hide script from old browers
Document. write (bar (), output ("Make Me Big", 3, "Make me ordinary ."))
// End hiding from old browsers -->
</SCRIPT>
<P>
Thanks.
</BODY>
Result of Example 3:
Make Me Big
Make me ordinary. undefinedundefined
Thanks.
Enclose string constants with single quotation marks (') and double quotation marks to enclose attribute values so that scripts can distinguish them. in the previous example, In the function bar, the constant left is placed in the attribute value. another example:
<Input type = "button" VALUE = "Press Me" onClick = "myfunc ('astring')">
Scripting Event Handlers)Most JavaScript applications on Navigator are event-driven, and events are often the result of user actions. for example, when a pressing button is an event, the result is to assign the focus to a form element. navigator can identify a specific set of events. you can define event handlers scripts that are automatically executed when an event occurs.
The event handler is placed in the document as an HTML Tag property, and the JavaScript code to be executed is assigned to the HTML Tag. The syntax is as follows:
<TAG eventHandler = "JavaScript Code">
TAG is a TAG of HTML, and eventHandler is the name of the event handler.
For example, if you have created a JavaScript function named compute, you can assign the call to this function to the onClick event handler of this button, so that when you press this button, navigator executes the compute function.
<Input type = "button" VALUE = "Calculate" onClick = "compute (this. form)">
You can place any JavaScript statement in the quotation marks after onClick. Separate multiple statements with semicolons. These statements are executed only when you press this button.
Generally, defining your event handler as a function is a good habit, because:
In this example, use this. form to reference the current form. The keyword "this" is used to reference the current object. this refers to the button object, so this. the form structure is used to reference the form containing this button. in the above example, The onClick event handler is this. form (current form) is used to call the compute () function as a parameter.
Events that can be used in HTML tags are as follows:
If an event can be used in an HTML Tag, you can define an event handler for it. generally, the name of the event handler starts with "on", followed by the event name. for example, the name of the Focus handler is onFocus.
Many objects have methods for simulating events ). for example, a button named click can simulate the button being pressed. note: The Simulated Event method cannot trigger the event handler. for example, method click does not trigger the event handler onClick. however, you can directly call the event handler (for example, explicitly call onClick in the script ).
| Event | When | Event Handler |
| Blur | The user moves the input focus from the form Element | OnBlur |
| Click | Move the mouse over the form element or connection | OnClick |
| Change | The user has changed the value of the text, partition, or selection element. | OnChange |
| Focus | The user assigns the input focus to the form element. | OnFocus |
| Load | The user loads the page into Navigato | OnLoad |
| Mouseover | The user moved the mouse cursor from the link or anchor. | OnMouseOve |
| Select | Select the input field of the form element. | OnSelect |
| Submit | The user submits a form | OnSubmit |
| Unload | Log out of this page | OnUnload |
<HEAD>
<Script language = "JavaScript">
Function compute (form ){
If (confirm ("Are you sure? "))
Form. result. value = eval (form. expr. value)
Else
Alert ("Please come back again ")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Enter an expression:
<Input type = "text" NAME = "expr" SIZE = 15>
<Input type = "button" VALUE = "Calculate" ONCLICK = "compute (this. form)">
<BR>
Result:
<Input type = "text" NAME = "expr" SIZE = 15>
<BR>
</FORM>
</BODY>
Page display in Example 4
Skills and TechniquesThis section describes several useful scripting techniques.
Updating Pages)On Navigator, JavaScript generates results in the order from top to bottom of the page. once something is re-designed (format), you can only re-load this page to change it. Currently, you can only update the whole page, not just update a part. however, you can independently update the "sub-window" in the frame ".
PrintCurrently, JavaScript output cannot be printed. For example, if your page contains the following content,
<P> This is some text
<SCRIPT> document. write ("<P> And some generated text") </SCRIPT>
When printing, you only play "This is some text", even if you can see two lines on the screen.
Use quotation marksBe sure to distinguish between double quotation marks and single quotation marks, because in HTML, the event handler must be enclosed in double quotation marks, and the parameters are enclosed in single quotation marks, for example:
<Form name = "myform">
<Input type = "button" NAME = "button1" VALUE = "Open Sesame! "
OnClick = "too many open('stmtsov.html ', 'newwin', 'toolbar = no, directories = no')">
</FORM>
In addition, you can use the front backslash (\) to escape the quotation marks.
Define functionsDefining All functions in the HEAD part of the HTML page is a good habit. in this way, all functions are defined before any content is displayed. otherwise, when the page is still being loaded, the user may do something to trigger the event handler and call the undefined function, which will lead to errors.
Create an arrayAn array is a set of ordered values. It is referenced by array names and indexes. for example, an array named emp stores employee names and indexes them by employee numbers. therefore, emp [1] is EMPLOYEE 1, and emp [2] is EMPLOYEE 2, and so on.
There is no clear array data type in JavaScript, but because arrays are similar to objects (see JavaScript Object Model), it is easy to create arrays in JavaScript. you can define an array object type as follows:
Function MakeArray (n ){
This. length = n;
For (var I = 1; I <= n; I ++)
This [I] = 0
Return this
}
}
In this way, an array is defined. The first attribute length indicates the number of elements in the array (index is 0), the initial values of other attributes are 0, and the index is an integer greater than or equal to 1.
When new is called, an array is created with the array name and number of array elements.
Emp = new makeArray (20 );
This statement creates an array named emp with 20 elements and the initial value is 0.
Operation Array (Populating an Array)Assign values to array elements to operate arrays. For example:
Emp [1] = "Kathy Jones"
Emp [2] = "PHil Lesh"
Emp [3] = "August West"
And so on.
You can also create an array of objects. For example, define an object type named Employees:
Function Employee (empno, name, dept ){
This. empo = empno;
This. name = name;
This. dept = dept;
}
The following statement creates an array of this object:
Emp = new MakeArray (3)
Emp [1] = new Employee (1, "Kathy Jones", "Engineering ")
Emp [2] = new Employee (2, "Phil Lesh", "Music ")
Emp [3] = new Employee (3, "August", "" Admin)
In this case, the show_props function (defined in the JavaScript Object Model) is used to display the objects in the array, as shown below:
For (var n = 1; n <= 3; n ++ ){
Document. write (show_props (emp [n], "emp") + "");
}
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
