"Summarize and Organize" JavaScript Basic Primer Learning (MU-class network learning)

Https://www.imooc.com/learn/36

Note: JavaScript can be placed anywhere in the HTML page as a scripting language, but the browser interprets the HTML in order, so the preceding script is executed first. For example, the page display initialization of JS must be placed in the head, because the initialization is required to advance (such as the page body set CSS, etc.), and if the function is executed through the event call the position is not required.

Output HTML tags, and work, tagged with "" enclosed.

<script type= "Text/javascript" >  var mystr= "Hello";d ocument.write (mystr+ "<br>");//Output Hello, Outputs a line break  document.write ("JavaScript");</script>

Workaround:

1. Use the output HTML tag   to resolve

document.write ("  " + "1" + "    " + "23"); Results: 1 23

2. Use CSS styles to resolve

document.write ("<span style= ' white-space:pre; > "+" 1 2 3 "+" </span> "); Results: 1 2 3

Add "WHITE-SPACE:PRE;" at output The Style property. This style means "blank space will be reserved by the browser"

Confirm

<Scripttype= "Text/javascript">    varMymessage=Confirm ("Do you like JavaScript ?"); if(Mymessage==true) {document.write ("very good, come on!"); }    Else{document.write ("js Powerful, to learn Oh!"); }</Script>

Prompt

var myname=prompt ("Please enter your name:"); if (myname!=null)  {   alert ("Hello" +myname);} Else   {  alert ("Hello my friend.");  }

javascript-Opening a new window (window.open)

The open () method can look for an existing or new browser window.

Grammar:

window.open ([URL], [window name], [parameter string])

Parameter description:

URL: Optional parameter, in the window to display the Web page's URL or path. If this argument is omitted, or if its value is an empty string, then the window will not display any documents. Window name: Optional parameter, the name of the window being opened.    1. The name consists of letters, numbers, and underscore characters.    2. " _top "," _blank "," _self "have a special meaning name. _blank: Display the target page in a new window _self: Display the target page in the      Current window      _top: On the frames page, in the upper window, the target page    3. Windows of the same name can only be created one, and if you want to create multiple windows, name cannot be the same.  4.name cannot contain spaces. Parameter string: Optional parameter, set window parameters, each parameter separated by commas.

Parameter table:

For example: Open http://www.imooc.com website, size 300px * 200px, no menu, no toolbar, no status bar, scroll bar window:

window.open (' http://www.imooc.com ', ' _blank ', ' width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars= Yes ')</script>

javascript-Close window (window.close)

Close () Closes the window

Usage:

Window.close ();   Close this window

Or

< Window object >.close ();   Closes the specified window

For example, close the newly created window.

<script type= "Text/javascript" >   var// New Window object, stored in variable mywin    Mywin.close (); </script>

Note: The code above opens a new window, closes the window, and does not see the window being opened.

Understanding the DOM

The Document Object Model DOM defines a standard way to access and manipulate HTML documents. The DOM renders an HTML document as a tree structure with elements, attributes, and text (the node tree).

Let's take a look at the following code:

To decompose the HTML code into a DOM node hierarchy diagram:

An HTML document can say a collection of nodes, three common DOM nodes:

1. ELEMENT nodes:

2. Text node: Content that is presented to the user, such as JavaScript, DOM, CSS, and so on in <li>...</li>.

3. Attribute node: element properties, such as the <a> tag's link property href= "http://www.imooc.com".

Look at the following code:

<a href= "http://www.imooc.com" >javascript dom</a>

InnerHTML Property

We get the <p> elements by id= "Con", and the contents of the elements are output and changed, the code is as follows:

Results:

Change HTML Style

HTML DOM allows JavaScript to change the style of HTML elements. How do you change the style of HTML elements?

Grammar:

Object.style.property=new style;

Note: object is the element that gets the element object, such as by document.getElementById ("id").

Basic attribute Table (property):

There are three ways to cancel a property setting
(1) var obj = document.getElementById ("txt");
Obj.removeattribute ("style");

(2) var obj = document.getElementById ("txt");
Obj.style = null;

(3) Txt.style = "";

"Summarize and Organize" JavaScript Basic Primer Learning (MU-class network learning)