Learn javascript notes

The Special Data Type of javascript learning notes is: * Undefinedvara; // declare a variable, but it is not assigned alert (a); // but it still has a value, its value is undefinedalert (B); // but note that an error will occur when an undefined variable is output, rather than un... syntaxHighligh

Javascript Study Notes
 
Special Data Types: * Undefined
Var a; // declare a variable without assigning a value to it
Alert (a); // but it still has a value. Its value is undefined.
Alert (B); // but note that an error occurs when an undefined variable is output, rather than the undefined variable.
NaN is A special value, meaning "Not A Number"-it is Not A Number. If you fail to convert other values into numbers, you will get this value.
Var str = "some string here! ";
Var num = 123;
Alert (str * num); // It will output NaN. Because the multiplication operator can only be used for numbers, the computer will convert the field string into numbers During computation.
Bool type conversion
Var str = "some string ";
Alert (!! Str); // true, because non-operators operate on boolean values, you must convert other types to boolean values only twice in a row.
Str = "";
Alert (!! Str); // output false. The value is false only when a null string is converted to a Boolean value. If a non-null string is converted to a Boolean value, true is returned.
Var num = 0;
Alert (!! Num); // false
Num =-123.345;
Alert (!! Num); // true. If any number except 0 is converted to a Boolean value, the value is true.
// Another important thing is that converting an empty string to a number will be 0.
Alert ("* 1); // outputs 0
Obtains the typeof operator of the variable type.
You can use window. prompt to pop up a window containing the input box. The user input will be the return value of this function.
Built-in object Math and Date
The Date object is like a time machine.
Var d = new Date (); // Date object needs to be created
The Date object can represent a Date range of approximately January 1, 1970 years before and after January 1, 285,616.
Alert (d); // output this object directly, and a string representing the time will be obtained.
This object has some methods that can be used to obtain each part of time.
Alert (d. getYear (); // obtain the year, // The Personal test shows a problem, to be verified
Alert (d. getFullYear (); // always returns the 4-digit expression of the year
Alert (d. getMonth (); // returns the month. Note that the month is counted from 0, so 0 is returned on January 1, January.
Alert (d. getDate (); // returns the number of today
Alert (d. getDay (); // returns the day of the week today. Sunday is 0, and Monday is 1 ....
Alert (d. getHours (); // returns the hour
Alert (d. getMinutes (); // returns the minute
Alert (d. getSeconds (); // returns the second
Alert (d. getMilliSeconds (); // returns millisecond // one test is not supported
Alert (d. getTime ());
Returns an integer that represents the number of milliseconds between the time calculated from January 1, January 1, 1970 and the time in the Date object. The Date range is approximately January 1, 1970 years before and after midnight January 1, 285616, A negative number indicates that we can not only obtain the time value from the date before January 1, 1970, but also set the time value corresponding to those of the getXXX method. The function just changes get to set
Var d = new Date ();
D. setFullYear (1690); // you can specify the year as 1900.
Alert (d. getFullYear (); // 1900 is returned.
Alert (d. getTime (); // the output value is negative, which verifies the preceding getTime () return value.
The biggest benefit of setXXX is that if we set an incorrect value, the script will not make an error, but the date will be automatically corrected.
Remember, the month starts counting from 0.
Array and Object
Array, like Date, is also a built-in object, which needs to be created using the new operator
Var arr = new Array ();
The array length in JavaScript increases automatically and the length attribute is updated automatically.
Arr = new Array (6); // It will not work as expected, because it is declaring an empty Array with a length of 6
You can also use the array literal
Arr = []; // an air bracket is almost equivalent, but more flexible and convenient
The array can be mixed to store strings, values, Boolean values..., almost all types of values, including Arrays
Arr = new Array (, true, "some string", new Array ("a", 3); // The fifth element is an Array.
Alert (arr [4]); // output "a", 3
Alert (arr [4] [0]); // output ""
Add or delete elements to an array)
Arr. push (a); // The push method adds the element to the end of the array.
Arr. push ("a", "B"); // you can add multiple elements at a time.
Automatic growth of array Length
Arr [arr. length] = "new element ";
Using delete is the same as the following statement.
Arr = ["#", "$", "%"];
Alert (arr );
Arr [2] = undefined; // undefined is a value.
Alert (arr );
The join method returns all elements in the array with strings separated by separators.
Arrays and objects are connected.
Var arr = new Array ();
Var obj = new Object ();
Alert (typeof arr); // object
Alert (typeof obj); // object
The array can use the string subscript
Var person = new Array ();
Person ["age"] = 18; // note that the subscript in brackets is a string, so quotation marks are required.
Person ["weight"] = "123 ";
Person ["height"] = "170 ";
Person ["arm"] = 2;
Person ["leg"] = 2;
The object can also use similar syntax to access its attributes.
Var obj = new Object ();
Obj. property = "some data ";
Alert (obj ["property"]); // "some data"
// Of course, numeric subscript can also be used
Obj [1] = 123;
Alert (obj [1]); // 123
Alert (obj. property); // "some data"
Alert (obj. length); // but unlike the array, it does not have the length attribute and outputs undefined
Corresponding to the array literal, there is also a way to declare the object literal
Var obj = {
A: 123, // here, a and B are also the property names of objects.
B: 456 // note that there is no comma
};
You can also write
Obj = {
"A": 345, // although space and other characters that do not conform to the variable naming conventions can be used if quotation marks are used, it is strongly not recommended
"B": 333
};
For... in... loop appears (for the study object, the for in loop is too useful)
String object and some methods and attributes used for strings
Str = new String ("some string here ");
// On the surface, this is the same effect as the directly created string
Str = "some string here ";
However, because the new String (); is used, the object is created.
Var str = new String ();
Alert (typeof str); // object
// Because it is an object, there are naturally many attributes and Methods
The string itself also stores this method.
There are many methods and attributes used to process strings.
• Length attribute, returns the length of the string www.2cto.com
• IndexOf method, returns the character location of the first occurrence of the substring in the string
• LastIndexOf method, returns the last position of the substring in the string
• CharCodeAt method, returns an integer representing the Unicode encoding of characters at the specified position
• FromCharCode method returns a string from some Unicode character values
• Replace Method for text replacement, returns the replace of the replaced string
• The substr method returns a substring of the specified length starting from the specified position.
• The substring method returns the substring located at the specified position in the String object.
• The toLowerCase method returns a string in which letters are converted to lowercase letters.
• The toUpperCase method returns a string in which all letters are converted to uppercase letters.
• Split the string into a string array.
Script tag and access HTML page
This object is a persistent object and cannot be declared (this is the keyword). Here, this refers to "this", which refers to this label! JavaScript automatically parses HTML elements into an object.

We recommend that you place the script in the head section! So, this requires the use of another event onload
Window. onload = initAll; // write all the code in a function and register it with the onload event attribute of the window object.
// Window Indicates the window object. As long as the window opens, it will always exist. When the page is loaded, the onload event on the window object will be triggered.
Function initAll (){
Var img = document. getElementById ("myImg ");
Img. onclick = myFn;
Function myFn (){
Alert ("image loading is complete! ");
}
}
In this way, the code will not go wrong. No matter where the script is placed, initAll will be executed only after the page is loaded.
Access the HTML page: HTML DOM
Html dom treats the entire page as a document object, and the tags in HTML must be accessed through the document Object. Each tag in the document,
It is converted into an object.

We use a p tag to demonstrate

It will be converted to the following object.
{
TagName: "p ",
ClassName: "demo ",
Title: "First paragraph: DOM tree ",
Id: "p1 ",
InnerHTML: "We use a p tag for demonstration"
}
You may wonder why the class attribute of the tag changes to the className attribute of the object rather than the class. class is a reserved JavaScript word !!! TagName indicates its tag name, while innerHTML indicates its HTML code
 
After browsing and converting an HTML tag into such an object, it is much easier to access the attributes or content of the tag in JavaScript, but the question is how to access this object !!
* First add an ID to the label and then use document. the getElementById method can be used to access it. Note that you should put the code of the HTML page to be accessed on the onload event processing of the window!
Window. onload = initAll;
Function initAll (){
Var p = document. getElementById ("p1 ");
Alert (p. className );
Alert (p. tagName );
Alert (p. title );
Alert (p. id );
Alert (p. innerHTML );
}
Accessing HTML pages is that simple! After obtaining an element, you can not only read its property value, but also set its property value!
 
With this, we can already make some exciting things!
// Some CSS
. Over {
Color: red;
Background: blue;
Font-size: larger;
}
. Out {
Color: black;
Background: white;
Font-size: smaller;
}
. Click {
Color: yellow;
Background: yellow;
Font-size: 12px;
}
// HTML code

A large line of text, they are all common text!

// JavaScript code
Window. onload = initAll;
Function initAll (){
Var p = document. getElementById ("p1 ");
P. onclick = clickFn; // except for the intra-row registration method, the event registration method has fewer parentheses. The others are the same.
P. onmouseover = overFn;
P. onmouseout = outFn;
}
Function clickFn (){
This. className = "click"; // here, this is also available
// Note that it is className, not class
}
Function overFn (){
This. className = "over ";
}
Function outFn (){
This. className = "out ";
}
The obtained page element does not stop this kind of file. Doc ument. the getElementsByTagName method can also obtain page elements, which are obtained through HTML tags rather than IDs. because an HTML page has a unique ID and most tags are the same, the getElementsByTagName method has only one parameter, that is, the tagName in the string format ), the returned value is an array-like HTML element list.
Window. onload = initAll; // you still need to write it in the window. onload event processing function.
Function initAll (){
Var pList = document. getElementsByTagName ("P ");
// Why should I use uppercase P? In fact, it can be written in lower case p, not case sensitive. However, because the tagName of an object is reported in upper case
Alert (pList. length); // similar to an array, length reports the number of elements and the number of p tags on the page.
Alert (pList [0]. innerHTML); // This way to access the first p element
}
In addition, for the document. getElementsByTagName method, you can also pass a "*" number as a parameter to get all the elements of the page, similar to wildcards in CSS
Window. onload = initAll;
Function initAll (){
Var allThings = document. body. getElementsByTagName ("*");
// The getElementsByTagName method can be called on any DOM element. When this method is called on the body, tags outside the body will not be obtained.
Alert (allThings. length); // The number of labels on the page, the report is as much (including DOCTYPE)
Alert (allThings [3]. innerHTML); // access the fourth element.
}
Javascript: pseudo Protocol
The pseudo-protocol is used for associating applications, unlike the real existence of http: //, https: //, and ftp: // on the Internet. for example, tencent: // (associated with QQ), data :( base64 encoding is used to output binary files in the browser), and javascript:
Javascript: the pseudo-Protocol has a problem. It will return the execution result to the page of course.
A
The solution is simple.
A
// Add undefined to the end
Although javascript pseudo-Protocol provides some flexibility, try not to use it on the page! For JavaScript debugging, the javascript pseudo protocol is very useful!

 
Author: Xie xiaoge