Just like the question!
1. Variables
There are two ways to define
1) the first value assigned to a variable is defined as: Name = "name ";
2) use the keyword VaR to define variables such as VAR name = "name" (recommended)
Naming rules:
1) The first letter must be a letter, underscore, or dollar sign.
2) Other letters can be underscores, dollar signs, or numbers.
2. Original Type
There are five types: undefined, null, Boolean, number, and string. (You can use the typeof operator to obtain the type of a variable)
For example:
Code:
- VaR svalue = "string ";
- Alert (typeof svalue); // output string
3. type conversion
4. Classes and objects
Like the Java syntax, the new keyword is used to create an object. For example, create an array object:
Code:
- VaR array1 = new array ();
- Array1 [0] = "V1 ";
- Array1 [1] = "V2 ";
If class construction has no parameters, you can also omit the brackets.
Code:
- VaR array2 = new array;
1) create an object factory function to create a student object. The Code is as follows:
Code:
- Function createstudent (ID, name, sex ){
- // Create an object
- VaR Ostu = new object;
- // Define attributes
- Ostu. ID = ID;
- Ostu. Name = Name;
- Ostu. Sex = sex;
- // Define the Method
- Ostu. Display = function (){
- Alert (this. Name + "begin to study ");
- }
- // Returns an object.
- Return Ostu;
- }
- // ===== Call ========
- VaR ostu1 = createstudent ("34", "Yang long", 18 );
- Ostu1.display ();
2) constructor (similar to the factory method)
Code:
- Function display () {// similar to a global function
- Alert (this. Name + "begin to study JS ");
- }
- Function Stu (ID, name, sex ){
- This. ID = ID;
- This. Name = Name;
- This. Sex = sex;
- This. Display = display;
- }
- VaR stu2 = new Stu ("19", "nothing", 19 );
- Stu2.display ();
3) Prototype Method
Code:
- // Create an empty Constructor
- Function Stu (){
- }
- // Use prototype to add attributes for Stu
- Stu. Prototype. ID = "44 ";
- Stu. Prototype. Name = "Biao ";
- Stu. Prototype. Sex = "girl ";
- Stu. Prototype. Display = function (){
- Alert = (this. Name + "begin to study JS ");
- }
- // The advantage of using the prototype is that you can add new members to an existing class. For example
- Stu. Prototype. lenb = function (){
- Return this. Replace (/[^/x0-/XF]/g, "##"). length;
- }
===*********** Advanced javascript technology *********** =
1. DOM technology Overview
Dom is a technology used to conveniently process hierarchical documents (such as XML and HTML. Dom also provides an API that allows developers to process these documents in an object-oriented manner. For XML documents, there is an xml dom dedicated to processing XML documents, but the DOM mentioned below is worth the HTML Dom.
The main function of Dom is to obtain various elements (such as Div and form) in the HTML tutorial language, so that the information of these elements can be easily obtained, or dynamically add new elements to these elements.
In fact, JavaScript is also required to operate DOM objects. That is to say, JavaScript code is also required to call Dom APIs.
In JavaScript, the object describing Dom is document. In fact, document is not only HTML Dom, but also xml dom.
To directly operate HTML documents, you can use the documentelement attribute. The Code is as follows:
VaR ohtml#document.doc umentelement; // obtain the HTML Object
Instance:
Code:
- <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
- <HTML>
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
- <Title> JavaScript test01 </title>
- <! -- Start to write JavaScript code (after title) -->
- <SCRIPT type = "text/JavaScript">
- Function showhead (){
- VaR ohtml#document.doc umentelement; // obtain the HTML Object
- VaR ohead = ohtml. firstchild; // get the head object
- Alert (ohead. outerhtml );
- Alert (ohead. innerhtml );
- }
- // Display the body TAG content
- Function showbody (){
- VaR ohtml#document.doc umentelement; // obtain the HTML Object
- VaR obody = ohtml. childnodes [1]; // get the head object
- Alert (obody. outerhtml );
- Alert (obody. innerhtml );
- }
- </SCRIPT>
- </Head>
- <Body>
- <Input type = "button" onclick = "showhead ()" value = "show head label"/>
- <Input type = "button" onclick = "showbody ()" value = "show Body Tag"/>
- </Body>
- </Html>
2. Three methods for obtaining HTML elements
There are three methods in Dom to obtain any HTML element in the current HTML document, which is actually the three methods of HTML document:
Getelementbyid: the property value of ID is unique.
The property value of getelementbyname: Name is not unique. For (VAR I = 0; I <otests. length; I ++) Traversal
Getelementbytagname: obtains the maximum range of HTML elements.
Example: Automatic Image Switching
Code:
- <! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
- <HTML>
- <Head>
- <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
- <Title> JavaScript getdom 2 </title>
- <SCRIPT type = "text/JavaScript">
- Setinterval ("LoadImage ()", 1000); // start the timer in 3000 milliseconds
- VaR images{'01.jpg ', '02.jpg', '03.jpg', '04.jpg', '05.jpg']; // specify the image file name
- VaR I = 0; // global variable I is displayed from the first image file
- Function LoadImage (){
- I ++;
- If (I = 5) I = 0;
- VaR oimage = Document. getelementbyid ('image'); // obtain the IMG tag
- VaR olabel = Document. getelementbyid ('info'); // obtain the label
- Oimage. src = './images/' + Images [I]; // assign values to attributes of the IMG tag
- Olabel. innertext = images [I]; // display the current image file name and insert the first image name.
- }
- </SCRIPT>
- </Head>
- <Body>
- Current image name: <label id = "info"> </label> <p> </P>
- <SCRIPT type = "text/JavaScript">
- VaR olabel = Document. getelementbyid ('info ');
- // Display the first image file during initialization
- Olabel. innertext = images [I];
- </SCRIPT>
- </Body>
- </Html>
-- Java Web development overview
