Common objects and methods of JS

1. Review of previous lesson * HTML inside form form * CSS * javascript

2, Content Supplement 1, JS and HTML two combination of methods * Using external file method * <script type= "text/javascript" src= "1.js" > Cannot write JS code </script> 2, Paddi   NG: Inner margin * padding:20px; * Another way to set up:/* Set the padding in the clockwise order */padding:20px 40px 60px 10px;

3, js operator inside = = and = = = Difference if (i==3): Numeric comparison if (i===3): type and value * = comparison is only a value, regardless of type * = = = = = = Compare type and value

3. JS String Object * * Create string Object-var str = "ABC";  -var str1 = new String ("AAA"); * Attribute: Length of string

 * method:   ** HTML-related methods (methods for styling)    -Bold () uses bold to display the string.    -FontColor () uses the specified color to display the string.     * document.write (Str.fontcolor ("Red"));    -fontsize () displays the string using the specified dimensions. The     * size parameter must be a number from 1 to 7.    -link () displays the string as a link.     * document.write (Str.link ("01-Content Supplement. html")); The    -Sub () displays the string as subscript.    -sup () displays the string as superscript.

  ** and Java are similar methods (in Java there is a similar method split)    -charAt () returns the character at the specified position.     * document.write (Str1.charat (7));     * If there is no this character, return the ""    -concat () connection string.     * document.write (Str1.concat (str2));    -IndexOf () retrieves a string. Returns the position of the character if no return-1     * indexOf () method is case sensitive!    -replace () Replace string     * pass two parameters replace (old,new)     * old: The part to replace     * NEW: The part    -split () splits the string into an array of strings.     * var arr = str3.split ("-");

   -* SUBSTR () extracts the specified number of characters from the starting index number in the string.     * two parameters    -* SUBSTRING () extracts the characters between two specified index numbers in a string.     * var str4 = "abcdef123456";     document.write ("substr:" +str4.substr (3,5)); //def12     ** Starting from the third, intercept five-bit     document.write ("<br/>") backwards;     document.write ("substring:" +str4.substring (3,5)); //de [3,5]      ** end from third to fifth bit, but not fifth bit [3,5]

4, JS Array object  * Create array way three kinds of   1, var arr1 = [1, 2, "4"];   2, var arr2 = new Array (3);   3, var arr3 = new Array (4,5,6);  * Property: Length Sets or returns the number of elements in the array.  * method:   -concat (): Connection array    * document.write ("Concat:" +arr.concat (ARR1));   -join () puts all the elements of the array into a string. element is delimited by the specified delimiter.    * document.write ("NEW:" +arr2.join ("-"));   -push () adds one or more elements to the end of the array and returns the new length.    *//Create an array arr4     var ARR4 = ["AAAA", "bbbb", "CCCC"];     //executes the Push method     document.write ("Length:" +arr3.push (ARR4));     //The value     document.write ("<br/>") after executing the push method;     document.write ("NEW:" +ARR3);    **  adds an element, and if an array is added, it is added as a whole   -pop () deletes and returns the last element of the array    *// Pop method    document.write ("

5. JS Date Object * Create Date object var date = new Date ();

Date date = new Date ();   * Method:-tolocalestring (): Converts the Date object to a string based on the local time format. -Get Year: getFullYear () returns the year in four digits from the Date object (without using the GetYear method)-month: GetMonth () returns the month from the date object (0 to 11), plus 1-week: GetDay () from Dat The E object returns one day of the week (0 ~ 6) * Judging if 0, plus 7, represents the Sunday-day: GetDate () returns a day from the Date object one months (1 ~ 31)-Hours getHours ()-min: Getmi Nutes ()-Sec: Getseconds ()

-GetTime () returns the number of milliseconds since January 1, 1970 * * Application scenario: Prevent browser caching

6, JS Math object * Some mathematical operations * The methods in math are static methods-Ceil (x) rounds a number.    -Floor (x) rounds down a number.   -round (x) rounding a number to the nearest integer * var a = 12.6;   Ceil document.write (Math.ceil (a));   Floor document.write ("<br/>");   document.write (Math.floor (a));   Round document.write ("<br/>"); document.write (Math.Round (a));

-Random () returns 0 to 1 of the stochastic number *//generates a random number between 0-9 document.write ("

7, the global function of JS * does not belong to any one object, using the direct write method name eval ();    * Common method:-eval (): Executes the string inside the JS code var str = "alert (' 123 ');";    alert (str);       eval (str); -IsNaN (): Determines whether the current is a number * NaN: Indicates that it is not a number * return is true false * if it is not a number returned ture * If it is a number return false * character encoding, ie browser URL encoding, Firefox bangs Browser base64 encoding-encodeURI (): Encode characters-decodeURI (): Decode characters

-parseint (): Conversion type * document.write (parseint (STR4) +1);

8, JS function overload * Java inside the Overload: there must be overloaded, the method name is the same, the parameters are different * js inside no overload, you can use some other way to simulate the effect of overloading-js inside there is no overload-JS function inside there is an array arguments, this array is used to store the transfer Come over the parameters

* Interview Title: Is there any overload in JS? 1, JS there is no overload 2, but you can use other methods to simulate the implementation, using the arguments array to achieve the effect of simulating overloading

9, JS BOM objects * Broswer Object model: Browser object Models * Object: * * Navigator (Understanding): Browser information-navigator.appname;  -Window.navigator.appName; * * Screen Information-screen.width-window.screen.width * * location (key to master attribute href): URL information * introduced * <input type= "but Ton "value=" button "/>

* Mouse click event onclick= "JS method"

-Property href to set or return the full URL. 1. Get URL Path address-location.href 2, set URL path address//Set URL address, implement page jump to address function href1 () {location.href = "01-content supplement. HT    ML "; }

* * History (three methods): Historical information of the URL * back () load the previous URL in the histories list * forward () load the next URL in the Legacy list

* Go () load a specific page in the history list *-1: Previous Page 1: Next page

* * Simulate implementation up one page, and next page-Create a page h1.html write hyperlink to h2.html-write hyperlink in h2.html to h3.html

* * Window (FOCUS): Windows object, top-Level Object * Method: 1, alert (): Pop up a prompt box on the page-Window.alert ();    2, confirm (): Indicates a confirmation box-var AA = window.confirm ("content displayed on the cue box"); -There is a return value, if clicked OK, returns true; Click Cancel to return False

3. Prompt () displays a dialog box to prompt the user for input. -Prompt (text,defaulttext) * * Text: Content displayed on the input box * * DefaultText: Indicates the default value of the input box 4, open () opens a new browser window-window.open (' URL to Address ', ' ', ' width=200,height=100 ') 5, Close (): Close the window (some browsers do not support)

* Achieve the effect of the timer-every second, on the page alert 123; * Method:-SetInterval (): For example, set is a second, every second will be executed JS code (continuous execution) * * setinterval ("JS code", MM seconds) **setinterval ("Add1 ();", milliseconds)-setTimeout (): For example, set to three seconds, three seconds after the execution of the JS code (will only be executed once) * * SetTimeout ("JS", the number of milliseconds);

-Clearinterval (): Clears the set of SetInterval () * setinterval () when returning an ID * want to clear clearinterval (ID); -Cleartimeout (): Clears the set of SetTimeout () * SetTimeout () when returning an ID * want to clear cleartimeout (ID)

10. JS DOM Object * Document Object Model documents objects models * * Document: Tagged document (HTML, XML) * * Object: JS is an object based, and the object includes properties and methods. Learn the properties and methods of the DOM object provided by JS * * Model: JS provides the DOM object inside the properties and methods to manipulate the tagged document

How to manipulate a tagged document using properties and methods inside a DOM object

* To manipulate a tagged document, you first encapsulate all the contents of the tagged document into objects. * * Includes tags, text, attributes

* * To do this, you must first parse the HTML (tagged document)

* * Parsing of HTML (tagged documents) procedure:-Assigning a tree structure in memory based on the hierarchy of HTML-document objects: Entire documents-element objects (tag objects) element-Attribute Object-Text Object-node object Nod E: Is the parent object of all the objects inside the DOM

* DHTML INTRODUCTION * DHTML is not a technology, but a short name for many technologies * contains: * * HTML: Encapsulated data * * CSS: Provides a number of attributes and property values to achieve changes in data style * * JavaScript (specifically refers to the Ecmascrip T): provides some syntax * * DOM: Document Object model to manipulate tagged documents

11. Dom's Document Object * Method: * * getElementById ()-Gets the element by ID (label)-var u1 = document.getElementById ("Id1"); alert (u1.id);

* * Getelementsbyname ()-Through the Name property is worth the element object (array)-var a1 = Document.getelementsbyname ("username");   alert (a1.length);    Traverse array for (Var i=0;i<a1.length;i++) {var input1 = a1[i];   alert (Input1.value);   }-Gets a label that uses the array subscript directly to implement var a2 = Document.getelementsbyname ("username1") [0]; alert (A2.value);

* * getElementsByTagName ()-Gets the element object (array) by the name of the tag-//Uses getElementsByTagName () to return the array var a3 = Document.getelementsbytagna   Me ("input");   alert (a3.length);    Traverse array for (Var m=0;m<a3.length;m++) {var input2 = a3[m];   alert (Input2.value); }

-Get a label using getelementsbytagname var a4 = document.getelementsbytagname ("input") [0];   alert (a4.length); alert (A4.value);

* * Write (); Output the content to the page, or you can export the HTML code

12, Window case * Case Development Step 1, create two pages * First page: * * There are two text input boxes * * A button, write a mouse click event onclick * * * Mouse click event: Open a new page opening ()

* Second Page * * There is a table with three fields operation number name * * In action there are buttons: * * * Click on this button, the contents of the row of the button is assigned to the first page corresponding to the text box inside * * Page close ()

Common objects and methods of JS