JavaScript Basic Notes

1. JavaScript Basics
(1) What is JavaScript and what can be done?
is a scripting language developed by Netscape to interact with the page.
JavaScript programs are executed on the browser side
JavaScript programs can be written at the end of the. js file.
Role:
A, front-end authentication (that is, the user submits the data in the form of validation, such as verifying that the user name is empty, if the validation does not pass,
The browser does not submit data to the server)
b, one of the Ajax core technologies used to asynchronously send requests to the server and dynamically update the page.
C. Interact with the page to create a dynamic effect.
D. Get browser-related information.
(2) part of JavaScript
ECMAScript: Grammar Basics (already standardized)
DOM: Document Object Model (partially standardized)
BOM: Browser object Model (not standardized, but most browsers support objects such as Window,location,history,screen)
2. Grammar Basics:
(1) Data type:
A, basic data type
Number: Numeric type
String: Strings
Boolean: Boolean type
NULL: The variable does not hold the address of any object
Undefined: Alert not defined (a);
(2) Variables
JavaScript is a weakly typed language, and the type of the variable is confirmed at run time and can be converted at any time.
JavaScript is case sensitive.
Identifiers cannot use keywords and reserved words
The first letter of the identifier can only start with a$_, and may contain numbers outside the first letter.
Scope of the variable:
Inside a function, a variable that does not apply Var is a global variable with no statement block scope
(3) array
The length of the array in JS is variable, and the type of data stored can be arbitrary
var arr = new Array ();
Arr[0] = 1;
ARR[1] = 2;
alert (arr.lenght);

var arr = [+];

C, common methods and properties of array objects
The Length property returns the lengths of the array
The ToString () method, which returns the string representation of the array
concat method for connecting two arrays
Join method, used to concatenate individual elements in an array into a string
Reverse method, reverses the array
Slice is used to intercept part of an array and put it back in the form of an array
Sort () to redefine the sorting method by the following form
var arr4 = Arr3.sort (function (A1,A2)) {
Return-a1.length+a2.length;
}
D, arrays can be used as stacks and queues
Push ();
Pop ();
Shit ();
(4) Common methods and properties of strings
The Length property returns the lengths of the strings
CharAt (index) returns the character at the specified position
SUBSTRING (from,to) return substring
IndexOf (str) Specifies the first occurrence of a string in the original string
LastIndexOf (str) Specifies the position of the last occurrence of a string in the original string
Match (RegExp) returns a string that matches the specified regular expression, and the returned result is an array
Search (RegExp) returns the position of the string retrieved by the regular expression
Tolowercase/touppercase returns the Case form
Replace (regexp, ' abc ') replaces a string that conforms to the Reg regular expression rule
Split (', '): Decomposition, returns an array

3. DOM (Document Object Model)
(1) What is DOM?
Defines a set of rules for converting structured documents (XML, HTML) into a tree to facilitate the structuring of documents
Carry out the operation of the increase and deletion check.
(2) DOM is not fully standardized due to historical reasons
HTML DOM Model: the oldest DOM model
Web-based DOM model: Mainstream, the major browsers are basically supported when programming, you can use
(3) The DOM model:
Find:
Method 1: Use ID
document.getElementById ()
There's a way:. InnerHTML: HTML code between tags
such as: obj2.innerhtml= ' user name must be filled in ';
Mode 2: Traversal (browser incompatible)
ParentNode
PreviousSibling
NextSibling
ChildNodes
FirstChild
LastChild

getElementsByTagName (tagName): A tag name, looking for a label point
Create
Document.createelement (TagName)
document.createTextNode (text): Use very little, because there is innerhtml.
Add to
AppendChild
InsertBefore
ReplaceChild
Example:
var obj = document.getElementById (' id ');
Obj.appendchild (NewNode);
Add the child nodes as obj to the end.
Obj.insertbefore (Newnode,refnode);
Before you add to Refnode
Obj.replacechild (Newnode,refnode);
Replace Refnode with NewNode
Delete
RemoveChild

Style actions:
Way one, by setting the ClassName property
Mode two, by modifying the style property:
<div id= "D1" style= "" ></div>
var obj = document.getElementById (' D1 ');
CSS property name If there is "-", then the "-" number, the first letter capitalized, such as Background-color into BackgroundColor
Obj.style.backgroundcolor= ' Red ';
(4) HTML DOM
The HTML DOM has only a limited number of node types and cannot be traversed.
Find the document.getElementById you want to use
A, select Object
Property:
Selectindex: User-selected subscript ordinal (subscript starting from 0)
Options: is an array that represents all the options. Each array element is an option object.
B, Option Object
Property:
The value of the Value:option
Text:option the text between tags
A Selected:true/false value of TRUE indicates that the option is selected
How to create an option object:
var op = new Option (text,value);
C, Table Object
Rows Property
Returns an array of all the rows in the table.
The collection includes all the rows defined in <thead> <tfoot> and <tbody>.
Tbodies Property
Returns an array containing all tbody in the table
Tfoot Property
Returns the Tfoot object of a table
Thead Property
Returns the Thead object for the table.
Method:
InsertRow (Index):
var row = InsertRow (index); index starting from 0
Inserts a new row at the specified position in the table.
Returns a TableRow that represents the newly inserted row.
DeleteRow (Index) method:
Deletes the row at the specified location from the table.
D, TableRow objects
Property:
Cells:
Returns an array containing all the cells in the row
RowIndex Properties:
Returns the position of the row in the table.
Method:
Deletecell (Index):
Used to delete cells in a table row (<td> Element)
InsertCell (index);
method is used to insert an empty <td> element at a specified location on one line of an HTML table. The return value is a TableCell object
E, Form Object
Property:
Action
Method
Elements: Returns all the nodes in the form, which is an array
Method:
Submit (): Submits the form, bypassing the form validation.
Reset (): Resetting the form
(5) browser to some HTML tags generated by the event, there is a default behavior such as clicking the link, will jump to the address specified by the href.
form, when the Submit button is clicked, the data for the form is submitted to the server. There are times when you need to suppress the default behavior.
<a href= "abc.do" onclick= "return false;" >test</a>
<form onsubmit= "return false;" >

JavaScript Basic Notes