A review of the basics of JavaScript ~

---restore content starts---

Can javascript code be written only in HTML files? of course not, we can separate the HTML file and JS code, and create a separate JavaScript file (js file), its file suffix is usually. js, and then the JS code directly in the JS File. note: in the JS file, you do not need to <script> tags, directly write JavaScript code on it. js file can not be run directly, embedded in the HTML file to execute, we need to add the following code in html, the JS file can be embedded in the HTML file.

A single-line comment, with the symbol "//" before the content of the Comment.

<script type= "text/javascript" >  document.write ("single-line annotation using '//'");  I am the comment that the statement function outputs content in a Web page </script>

Multiline comments start with "/*" and end with "*/".

<script type= "text/javascript" >   document.write ("multi-line comment use/* comment content */");   /*    Multiline Comment    develop good habit of writing notes   */</script>


literally, A variable is a variable amount; from a programmatic standpoint, a variable is a memory used to store a certain number of values. We can think of the variable as a box, in order to distinguish the box, you can use Box1,box2 and other names to represent different boxes, BOX1 is the name of the box (that is, the name of the Variable)


A function is a set of statements that complete a particular function. Without a function, it may take five lines, 10 rows, or even more code to complete the Task. In this case, we can put the code block that completes the specific function into a function, call this function directly, save the trouble of repeatedly inputting a lot of code.

How do you define a function? The basic syntax is as follows:

function name () {function code;}

function Call:

Once the function is well defined, it cannot be executed automatically, so it needs to be called, just write the function directly in the desired Position.

document.write()Can be used to write content directly to the HTML output Stream. The simple thing is to print the content directly in the Web Page.

How to output spaces in JS

When you write the JS code, you can find this phenomenon:

document.write ("1 2 3"); results: 1 2 3

No matter how many spaces are in the content of the output, the result appears as if there is only one space.

This is because the browser display mechanism, to manually typed spaces, will be a number of consecutive spaces to display 1 Spaces.

Workaround:

1. Use the output HTML tag &nbsp; to resolve

document.write ("&nbsp;&nbsp;" + "1" + "&nbsp;&nbsp;&nbsp;&nbsp;" + "up to"); 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 "

Javascript-warning (alert Message Dialog box)

When we visit the site, sometimes suddenly pop up a small window, which is written with a text message. If you do not click "ok", you can not do anything to the web page, This small window is the use of alert Implementation.

Grammar:

Alert (string or variable);  

Javascript-confirmation (confirm Message Dialog box)

The Confirm Message dialog box is often used to allow the user to make a selection action, such as: "are you right?" such as A popup dialog box (including a OK button and a cancel button).

Grammar:

Confirm (str);

Parameter description:

str: The text  to display in the message dialog box Boolean value

Return value:

Returns True when the user taps the "ok" button, which returns false when the user taps the "cancel" button

note: The return value can determine what button the user Clicked.

Look at the following code:

<script type= "text/javascript" >    var mymessage=confirm ("do you like javascript?");    If (mymessage==true)    {   document.write ("very good, come on!");   }    else    {  document.write ("js powerful, to learn oh!");   } </script>

Javascript-questions (prompt Message Dialog box)

promptA pop-up message dialog box is typically used to ask for information that needs to interact with the User. Pop-up message dialog box (contains A OK button, Cancel button and a text input box).

Grammar:

Prompt (str1, str2);

Parameter description:

Str1: the text to display in the message dialog box cannot be modified str2: the contents of the text box can be modified

Return value:

1. Click the OK button and the contents of the text box will return the value 2 as the Function. Clicking the Cancel button will return null

Take a look at the following code:

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:

<script type= "text/javascript" > window.open (' http://www.imooc.com ', ' _blank ', ' width=300,height=200,menubar= no,toolbar=no, Status=no,scrollbars=yes ') </script>

Note: The running results consider browser compatibility issues.

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 mywin=window.open (' http://www.imooc.com ');//the newly-hit window object, stored in the 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:

decomposing HTML code into 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>

Get elements by ID

Learn Html/css style, all know that the page is organized by the label information, and the tag id attribute value is unique, as if each person has a social security number, as long as the ID number can be found corresponding to the Person. So in the Web page, we find the tag first, and then we do the Operation.

Grammar:

Take a look at the following code:

result: NULL or [object htmlparagraphelement]

Note: the obtained element is an object, such as the element that you want to manipulate, and we want to pass its properties or METHODS.

Nnerhtml Property

The InnerHTML property is used to get or replace the contents of an HTML Element.

Grammar:

Object.innerhtml

Attention:

1.Object is an element that gets an element object, such as a document.getElementById ("ID").

2. Note that writing, innerHTML is Case-sensitive.

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 an element that gets an element object, such as a document.getElementById ("id").

Basic attribute Table (property):

note: This table is only a small subset of CSS style properties, and other styles can be set and modified by this method.

Take a look at the following code:

Change the style of the <p> element, change the color to red, change the font size to 20, change the background color to blue:

<p id= "pcon" >hello world!</p><script>   var mychar = document.getElementById ("pcon");   Mychar. Style.color= "red";   Mychar. style.fontsize= "a";   Mychar. Style.backgroundcolor = "blue";</script>

Show and Hide (display properties)

The display and hidden effects are often seen in Web pages and can be set by the display Property.

Grammar:

Object.style. Display = value

note: object is an element that gets an element object, such as a document.getElementById ("id").

value takes values:

Take a look at the following code:

Control class name (className Property)

The ClassName property sets or returns the Class property of the Element.

Grammar:

Object.classname = ClassName

Role:

1. Get the class attribute of an element

2. Specify a CSS style for an element within the page to change the appearance of the element

Take a look at the following code to get the class attribute of the <p> element and change the Classname:

Results:

---restore content ends---

A review of the basics of JavaScript ~