Study NOTES: javascript-Advanced article

1. Two-dimensional array

Representation of a two-dimensional array: myarray[[]

var myarr=new Array (); Declare one dimension first
for (Var i=0;i<2;i++) {//one-dimensional length 2
Myarr[i]=new Array (); Re-declare two-dimensional
for (Var j=0;j<3;j++) {//two-D length is 3
Myarr[i][j]=i+j; Assignment, the value of each array element is I+J
}
}

2. Return to week method

<script type= "Text/javascript" >
var mydate=new date ();//Define Date Object
var weekday=["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
Define array objects, assign values to each array item
var mynum=mydate.getday ();//The return value is stored in the variable Mynum
document.write (Mydate.getday ());//Output GetDay () Get value
document.write ("Today is:" + weekday[mynum]);//output Day of the week
</script>

3. Return/Set Time method

<script type= "Text/javascript" >
var mydate=new Date ();
document.write ("Current Time:" +mydate+ "<br>");
Mydate.settime (Mydate.gettime () + 60 * 60 * 1000);
document.write ("Delay One hour:" + mydate);
</script>

4. Returns the character at the specified position

The CharAt () method returns the character at the specified position. The returned character is a string of length 1. Stringobject.charat (Index) Note: 1. The subscript for the first character in a string is 0. The subscript for the last character is the string length minus one (string.length-1). 2. If the parameter index is not between 0 and String.length-1, the method returns an empty string.

5. Returns the location of the first occurrence of the specified string

The IndexOf () method returns the position of the first occurrence of a specified string value in a string. Grammar stringobject.indexof (substring, startpos)

6. String Split split ()

The split () method splits a string into an array of strings and returns this array. Syntax: Stringobject.split (SEPARATOR,LIMIT)

7. Extracting string substring ()

The substring () method is used to extract the character of a string intermediary between two specified subscripts. Syntax: stringobject.substring (Startpos,stoppos)

8. Extract the specified number of characters substr ()

The substr () method extracts a specified number of strings from the string that start at the startpos position. Syntax: Stringobject.substr (startpos,length)

9. Array Connection concat ()

The Concat () method is used to concatenate two or more arrays. This method returns a new array without changing the original array. Grammar Arrayobject.concat (array1,array2,..., Arrayn)

10. Specify delimiter join array element join ()

The join () method is used to put all the elements in an array into a string. The elements are delimited by the specified delimiter. Syntax: Arrayobject.join (delimiter)

11. Selected element Slice ()

The slice () method returns the selected element from an existing array. Grammar Arrayobject.slice (Start,end)

12. Sorting the array sort ()

The sort () method causes the elements in the array to be arranged in a certain order. Syntax: Arrayobject.sort (method function) <script type= "Text/javascript" >
function Sortnum (A, b) {
return a-B;
Ascending, as in descending order, "A-B" should be "b-a"
}
var Myarr = new Array ("80", "16", "50", "6", "100", "1");
document.write (Myarr + "<br>");
document.write (Myarr.sort (sortnum));
</script>

13.JavaScript Timer

In JavaScript, we can execute code after a set interval of time, not immediately after the function is called. Timer type: One-time timer: Fires only once after a specified delay. Interval Trigger timer: Fires once every time interval is specified. Timer method:

14. Timer setinterval ()

Executes the code at the specified time after the page is loaded. Syntax: setinterval (code, interaction time);

Parameter description: 1. Code: The function to invoke or the code string to execute. 2. Interaction time: The time interval between periodic execution or invocation of an expression, in milliseconds (1s=1000ms). Return value: A value that can be passed to clearinterval () to suppress periodic execution of "code." Call function format (assuming there is a clock () function): SetInterval ("clock ()", 1000)
Or
SetInterval (clock,1000)

15. Cancel Timer clearinterval ()

The Clearinterval () method cancels the interaction time set by SetInterval (). Syntax: Clearinterval (Id_of_setinterval)

Parameter description: Id_of_setinterval: The ID value returned by setinterval ().

16. Timer settimeout ()

SetTimeout () timer that, after loading, delays the specified time, executes the expression once and executes only once. Syntax: setTimeout (code, delay time);

Parameter description: 1. The function to invoke or the code string to execute. 2. Delay time: The amount of time, in milliseconds (1s=1000ms), to wait before executing the code.  

17. Cancel Timer cleartimeout ()

SetTimeout () and cleartimeout () are used together to stop the timer. Syntax: cleartimeout (id_of_settimeout)

Parameter description: id_of_settimeout: The ID value returned by setTimeout (). This value identifies the deferred execution code block to be canceled.

18.History Objects

The history object records the pages (URLs) that the user has browsed, and enables the browser to move forward and backward with similar navigation capabilities. Note: Starting from the moment the window is opened, each browser window, every tab, and even each frame has its own history object associated with a particular window object. Syntax: Window.history. [Properties | method]

Note: window can be omitted. History Object Properties

History Object method

19. Return to previous browsed page

Back () method to load the previous URL in the History list. Syntax: Window.history.back ();

For example, to return to the previous browsing page, the code is as follows: Window.history.back ();

Note: The reverse button is equivalent to clicking the browser. Back () equivalent to go (-1), the code is as follows: Window.history.go (-1);

20. Return to the next browsed page

Forward () method to load the next URL in the history list. If you want to go back to the page you browsed before going backwards, you can use the forward () method with the following code: Window.history.forward ();

Note: Equivalent click forward button. Forward () equivalent to go (1), the code is as follows: Window.history.go (1);

 

21. Return to other pages in browsing history

The Go () method loads a specific page in the History list, depending on the page currently in place. Syntax: window.history.go (number);

22.Location Objects

Location is used to get or set the URL of the form and can be used to resolve URLs. Syntax: location. [Properties | method]

23.Navigator Objects

The Navigator object contains information about the browser and is typically used to detect the version of the browser and operating system.

24.userAgent

Returns a string representation of the user-agent header (that is, a string that includes browser version information, etc.) syntax navigator.useragent

Several browsing user_agent., like 360 compatibility mode with IE, speed mode with the Chrom kernel.

the 25.screen Object screen object is used to get the user's onscreen information.

Window.screen. Properties

25.getAttribute () method

Gets the value of the property through the attribute name of the element node. Syntax: Elementnode.getattribute (name)

Description: 1. Elementnode: Use getElementById (), getElementsByTagName (), and other methods to get to the element node. 2. Name: The attribute name of the element node to be queried

26.setAttribute () method

The SetAttribute () method adds a new property that specifies a name and value, or sets an existing property to the specified value. Syntax: Elementnode.setattribute (Name,value)

Description: 1.name: The name of the property to set. 2.value: The property value to set. Note: 1. Set the specified property to the specified value. If a property with the specified name does not exist, the method creates a new property. 2. Similar to the GetAttribute () method, the SetAttribute () method can only be called by the element node object function.

27. Node Properties

In the Document Object Model (DOM), each node is an object. The DOM node has three important properties: 1. NodeName: Name of the Node 2. NodeValue: The value of the node is 3. NodeType: Node Type one, NodeName property: The name of the node, is read-only. 1. The nodeName of the element node is the same as the label name 2. The nodeName of the attribute node is the name of the property 3. The nodeName of a text node is always #text4. The nodeName of a document node is always #document two, NodeValue property: The value of the node is 1. The nodevalue of an element node is undefined or null2. The nodevalue of a text node is the text itself 3. The nodevalue of an attribute node is the value of the property, the NodeType property: the type of the node, which is read-only. Here are some common types of nodes:

28. Accessing child nodes ChildNodes

Accesses the list of all child nodes under the selected element node, the returned value can be considered an array, and he has the length property. Syntax: elementnode.childnodes

Note: If the selected node has no child nodes, this property returns a NodeList that does not contain a node.

29. Accessing the first and last items of a child node

The FirstChild property returns the first child node of the ' ChildNodes ' array. If the selected node has no child nodes, the property returns NULL. Syntax: Node.firstchild

Note: The same effect as elementnode.childnodes[0]. Second, the LastChild property returns the last child node of the ' ChildNodes ' array. If the selected node has no child nodes, the property returns NULL. Syntax: Node.lastchild

Note: The same effect as elementnode.childnodes[elementnode.childnodes.length-1]. Note: In the previous section, we know that Internet Explorer ignores the empty text nodes that are generated between nodes, and other browsers do not. We can filter the child nodes by detecting the node type. (explained in later chapters)

30. Accessing the parent node ParentNode

Gets the parent node syntax for the specified node: Elementnode.parentnode

Note: There can be only one parent node. Take a look at the following example, get the parent node of the P node, the code is as follows: <div id= "Text" >
<p id= "Con" > ParentNode Gets the parent node of the pointing node </p>
</div>
<script type= "Text/javascript" >
var mynode= document.getelementbyid ("con");
document.write (Mynode.parentNode.nodeName);
</script>

Run Result: ParentNode gets the parent node of the pointing node
Div

Access to the ancestor node: ElementNode.parentNode.parentNode

31. Accessing the sibling node

1. The NextSibling property returns the node immediately following a node (at the same tree level). Syntax: nodeobject.nextsibling

Description: If there is no this node, the property returns NULL. 2. The PreviousSibling property returns the node immediately before a node (at the same tree level). Syntax: nodeobject.previoussibling

Description: If there is no this node, the property returns NULL. Note: Two properties get the node. Internet Explorer ignores white-space text nodes (for example, newline symbols) that are generated between nodes, and other browsers do not ignore them.

32. Insert Node AppendChild ()

Adds a new child node after the list of the last child nodes of the specified node. Syntax: AppendChild (newnode)

33. Insert Node insertbefore ()

The InsertBefore () method inserts a new child node before the existing child node. Syntax: InsertBefore (Newnode,node); Parameter: NewNode: The new node to be inserted. Node: Specifies that nodes are inserted before this node. Let's take a look at the following code, inserting a node before the specified node.

34. Delete Node removechild ()

The RemoveChild () method removes a node from the list of child nodes. If the deletion succeeds, this method returns the node that was deleted, such as failure, and returns NULL. Syntax: Nodeobject.removechild (node)

Parameters: node: Required to specify the nodes that need to be deleted. Let's take a look at the code below and delete the child points.

35. Replace element node ReplaceChild ()

ReplaceChild implements the substitution of child nodes (objects). Returns a reference to the object being replaced. Syntax: Node.replacechild (newnode,oldnew)

Parameter: NewNode: Required to replace the Oldnew object. Oldnew: Required, object replaced by NewNode.

36. Create an element node createelement

The CreateElement () method creates an element node. This method can return an Element object. Syntax: document.createelement (tagName)

Parameter: TagName: String value, which is used to indicate the type of element being created. Note: To be used in conjunction with the appendchild () or InsertBefore () method, the element is displayed in the page.

37. Create a text node createTextNode

The createTextNode () method creates a new text node and returns the newly created textual node. Syntax: document.createTextNode (data)

Parameter: Data: String value that specifies the text of this node. Let's create a <div> element and add a message to it with the following code

38. browser window viewable area size

Get the size of the browser window (browser viewport, excluding toolbars and scroll bars): First, for ie9+, Chrome, Firefox, Opera, and Safari:?  Window.innerheight-The internal height of the browser window?  Window.innerwidth-Internal width of the browser window two, for Internet Explorer 8, 7, 6, 5:?  Document.documentElement.clientHeight represents the current height of the window in which the HTML document resides. Document.documentElement.clientWidth represents the current width of the window in which the HTML document resides.  or the Body property of the Document object corresponds to the <body> tag of the HTML documents?  Document.body.clientHeight? Document.body.clientWidth JavaScript scenarios that are useful in different browsers: Var w= document.documentElement.clientWidth
|| Document.body.clientWidth;
var h= document.documentElement.clientHeight
|| Document.body.clientHeight;

39. Page Size ScrollHeight

ScrollHeight and ScrollWidth, get the Web content height and width. First, for IE, opera:scrollheight is the actual height of Web content, can be less than clientheight. Second, for NS, Ff:scrollheight is the Web content height, but the minimum value is clientheight. In other words, when the content of the Web page is less than clientheight, ScrollHeight returns clientheight. Third, browser compatibility var w=document.documentelement.scrollwidth
|| Document.body.scrollWidth;
var h=document.documentelement.scrollheight
|| Document.body.scrollHeight; Note: Case sensitive scrollheight and scrollwidth also get the height and width that the content in the DOM element actually occupies.

40. Page size offsetheight

Offsetheight and offsetwidth, gets the height and width of the page content (including edges such as scrollbars, which change depending on the window's display size). One, the value offsetheight = clientheight + scroll bar + border. Second, browser compatibility var w= document.documentElement.offsetWidth
|| Document.body.offsetWidth;
var h= document.documentElement.offsetHeight
|| Document.body.offsetHeight;

41. Distance and offset of web volume

ScrollLeft: Sets or gets the distance between the left edge of the given object and the leftmost of the currently visible content in the window, which is the contents of the left gray. ScrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window, which is the top gray content. Offsetleft: Gets the computed left position of the specified object relative to the layout or the parent coordinate specified by the OffsetParent property. OffsetTop: Gets the computed top position of the specified object relative to the layout or the parent coordinate specified by the OffsetParent property.

Study NOTES: javascript-Advanced article