JavaScript Primer Series Knowledge points Summary _javascript tips

JavaScript is a literal translation script language, a dynamic type, a weak type, a prototype based language, and a built-in support type. Its interpreter, known as the JavaScript engine, is widely used as a scripting language for clients, and is used in HTML (an application under standard Universal Markup Language) to add dynamic functionality to HTML Web pages.

First, the preparatory work:

1. Why learn JavaScript

All the mainstream browsers are just JavaScript.

Most Web pages use JavaScript

It enables Web pages to present a variety of dynamic effects

Easy to learn

2, how to insert JS

<script> tags to appear in pairs, and write JavaScript code between <script></script>.

<script type= "Text/javascript" > indicates the text type between <script></script>. JavaScript is meant to tell browsers that the text inside is a JavaScript language.

3. Refer to JS External file

HTML files and JS code can be separated, and create a separate JavaScript file (JS file for short), its file suffix is usually. js
In the JS file, do not need <script> tags, directly to write JavaScript code.

Copy Code code as follows:

<script src= "Script.js" ></script>

4, the position of JS in the page

JavaScript, as a scripting language, can be placed anywhere in an HTML page, and we typically place it in the head or body part of the page. But the browser interprets HTML in a sequential order, so the previous script is executed first. For example, the initialization of the page display JS must be placed in the head inside, because the initialization requires in advance (such as the page body set CSS, etc.), and if it is through the event call to execute the function so the location is not required.

5, statements and symbols

Every JavaScript code format: statement;

6. Annotation method

Single-line comment, with the symbol "//" before the annotation content.

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

7, variable

Define variables using the keyword VAR, the syntax is as follows:

var variable name

Variable names can be named arbitrarily, but follow the naming rules:

1. The variable name must begin with a letter or an underscore (_).

2. Variable names must be made up of English letters, numbers, underscores (_).

3. Variable names cannot use JavaScript keywords and javascript reserved words.

8. Judgment Statement (If...else)

Grammar:

if (condition)
{code executed when the condition is set}
else
{code executed when the condition is not tenable}

9. function

function function name ()
{
functional code;
}

Description

1. function defines the key word for functions.

2. "Function name" the name you take for the function.

3. "Function code" is replaced with code that completes a particular function.

Function call:

After the function is defined, it cannot be executed automatically, so call it, just write the function directly in the desired position.

Ii. Common methods of interaction

1, output content (document.write)

document.write () can be used to write content directly to the HTML output stream. Simply put the output directly in the Web page.

The first type: the output is enclosed with "", and the contents of the "" number are directly output.

Second: Through variables, output content

Third: Output multiple content, the content is connected with the + number.

Fourth: Output HTML tags, and function, tags use "" enclosed.

2, Warning (Alert message dialog box)

pops up a small window with a hint message text (Alert pop-up message dialog box containing a OK button): alert (string or variable);

Attention:

1. No other action can be performed until you click the "OK" button in the dialog box.

2. The message dialog box can usually be used to debug a program.

3. Alert output, can be a string or variable, similar to document.write.

3, Confirmation (Confirm message dialog box)

Pop-up dialog box (includes a OK button and a Cancel button). Confirm (str);

Parameter description:

STR: Text to display in the message dialog box

Return Value: Boolean value

return value:

Returns True when the user clicks on the "OK" button

Returns False when the user clicks the Cancel button

Note: You can tell what button the user clicked by return value

Note: The message dialog box is exclusive, that is, the user can not do anything else before clicking on the dialog Box button.

4. Questions (Prompt message dialog box)

Pop-up message dialog box (contains a OK button, Cancel button and a text input box) prompt (str1, str2);

Parameter description:

STR1: Text to be displayed in the message dialog box, not modifiable

STR2: The contents of a text box that can be modified

return value:

1. Click OK button, the contents of the text box will be returned as the function value

2. Click the Cancel button to return null

Note: No other action can be performed until the user clicks the button on the dialog box.

5. Open a new window (window.open)

The open () method is used to open a new window: window.open (<url>, < window name, < parameter string >)

Parameter description:

URL: Opens the URL or path of the window.

Window Name: The name of the window being opened.

Can be "_top", "_blank", "_selft" and so on.

Parameter string: Sets the window parameters, separated by commas. (Top,left,width,height,menubar,toolbar,scrollbars,status)

Attention:

1. There are spaces between the comma and the equal sign between the parameters, the string is invalid, and only the space can be removed to function correctly.

2. Running results consider browser compatibility issues.

6, close the window (window.close)

Window.close (); Closes the specified window

< Window object >.close ();

Third, Dom operation

1. Know Dom

The Document Object Model DOM defines the standard way to access and process HTML documents. The DOM renders an HTML document as an element,

The tree structure (node tree) of the properties and text.

1. Element node: The above image

2. Text node: Content that is displayed to the user, such as JavaScript, DOM, CSS, etc. in <li>...</li>.

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

2, get the element by ID

document.getElementById ("id")

Note: The element that gets is an object, and if you want to manipulate the element, we pass its properties or methods.

3, innerHTML Property

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

Object.innerhtml

1.Object is the acquired element object, such as an element obtained by document.getElementById ("ID").

2. Note Writing, innerHTML case sensitive

4. Change HTML style

Object.style.property=new style;

Note: object is an element object that gets, such as an element obtained by document.getElementById ("id").
Basic attribute sheet (property);

Backgroundcolor/height/width/color/font/fontfamily/fontsize

5, Show and hide (Display properties)

Object.style.display = value

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

Value values:

None: This element will not be displayed (hidden)

Block: This element will appear as blocks-level elements (display)

6, Control class name (classname property)

Sets or returns the class attribute of an element

Object.classname = ClassName

1. Get the class attribute of the element

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