Home > Developer > JavaScript
First, external reference syntax
<script src= "Script.js" ></script>
Second, the position in the page
1. We can place JavaScript code anywhere in the HTML file, but we usually place it in the head or body part of the page.
2, put in the The most common way is to place the <script> element in the head section of the page, and the browser parses the head section to execute the code before parsing the rest of the page.
3, put in the <body> part
The JavaScript code executes when the page reads to the statement.
4. 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.
Third, comments
1, single-line comment, before the content of the note "//"
2. Multiline comments start with "/*" and End with "*/".
Iv. variables
1, the definition of variables using the keyword VAR, the syntax is as follows:
var variable name
2, the variable must first declare and then assign the value
3. Variable can be assigned repeatedly
4. Note:
1. In JS, case-sensitive, such as variable MyChar and MyChar is not the same, the expression is two variables.
2. Variables Although can also not be declared, directly used, but not standardized, need to first declare, after use.
Five, function
1. The basic syntax is as follows:
Function name ()
{
function code;
}
Write a simple function that implements the addition of two numbers, and give the function a meaningful name: "ADD2", the code is as follows:
function Add2 () {
var sum = 3 + 2;
alert (sum);
}
2. Function call, write function directly in the desired position.
Vi. output content (document.write)
1. 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.
2, four medium output mode
The first type: The output content is enclosed in "", directly Output "".
document.write ("I Love javascript! "); Content is output directly from the content in "", "".
The second type: through variables, output content
var mystr= "Hello world!";
document.write (MYSTR); Write the variable name directly, and the output variable stores the contents.
The third type: output multiple items, the content is connected with the + number.
var mystr= "Hello";
document.write (mystr+ "I love JavaScript"); Connect multiple items with a + sign
The fourth type: output HTML tags, and work, the label using "" enclosed.
var mystr= "Hello";
document.write (mystr+ "<br>");//output Hello, output a line break
document.write ("JavaScript");
VII. Warning (Alert message dialog box)
1. Syntax:
Alert (string or variable);
2. Note: Alert pops up the message dialog box (contains a OK button).
3. Note:
1. You cannot do anything else until you click the "OK" button in the dialog box.
2. Message dialogs are commonly used for debugging programs.
3. Alert output can be a string or variable, similar to document.write.
Viii. Confirmation (Confirm message dialog box)
1. 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).
2. Syntax:
Confirm (str);
Parameter description:
STR: The text to display in the message dialog box
Return Value: Boolean value
return value:
Returns True when the user taps the OK button
Returns False when the user taps the Cancel button
Note: By returning a value you can tell what button the user clicked.
For example:
Script type= "Text/javascript" >
var mymessage=confirm ("Do you like JavaScript?");
if (mymessage==true)
{document.write ("very well, come on!");}
Else
{document.write ("JS powerful, to learn Oh!");}
</script>
3. Note: The message dialog is exclusive, that is, the user cannot perform any other action until the dialog button is clicked.
Ix. Questions (Prompt message dialog box)
1. Prompt pop-up message dialog box, usually used to ask some information that needs to interact with the user. Pop-up message dialog box (contains a OK button, Cancel button and a text input box).
2. Syntax:
Prompt (str1, str2);
Parameter description:
STR1: Text to display in the message dialog box, not modifiable
STR2: The contents of the text box can be modified
return value:
1. Click the OK button and the content in the text box will be returned as a function return value
2. Click the Cancel button to return null
For example:
var myname=prompt ("Please enter your name:");
if (myname!=null)
{Alert ("Hello" +myname);}
Else
{Alert ("Hello my friend.");
Note: You cannot perform any other action until the user taps the button in the dialog box.
X. Open a new Window (window.open)
1. The open () method can find an existing or new browser window.
2. Syntax:
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", "_selft" have a special meaning name.
_blank: Display the target page in a new window
_self: Display the target page in the current window
_top: Display the target page in the upper window in the frames page
3. A window of the same name can only create one, and the name cannot be the same if you want to create multiple windows.
4.name cannot contain spaces.
Parameter string: Optional parameter, set window parameters, each parameter separated by commas.
3. Note: The running results consider browser compatibility issues.
Xi. Close window (window.close)
1. Close () Closes the window
Usage:
Window.close (); Close this window
Or
< Window object >.close (); Closes the specified window
For example:
<script type= "Text/javascript" >
var mywin=window.open (' http://www.imooc.com '); Stores the newly-hit window object in the variable Mywin
Mywin.close ();
</script>
4. Note: The above code opens a new window, closes the window, and does not see the window being opened.
12. DOM
1. 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).
13. Get Elements by ID
1. Syntax:
document.getElementById ("id")
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.
14. InnerHTML Properties
1. The InnerHTML property is used to get or replace the contents of an HTML element.
2. Syntax:
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.
Change HTML Style
1. HTML DOM allows JavaScript to change the style of HTML elements.
2. Syntax:
Object.style.property=new style;
Note: object is the element that gets the element object, such as by document.getElementById ("id").
For example:
<p id= "Pcon" >hello world!</p>
<script>
var MyChar = document.getElementById ("Pcon");
Mychar.style.color= "Red";
Mychar.style.fontsize= "20";
Mychar.style.backgroundColor = "Blue";
</script>
16. Show and hide (Display properties)
1. Syntax:
Object.style.display = "Value"
Note: object is the element that gets the element object, such as by document.getElementById ("id").
17. Control class name (ClassName attribute)
1. The ClassName property sets or returns the class property of the element.
2. Syntax:
Object.classname = ClassName
3. Function:
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
JavaScript Basics (ii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
