Getting started with javascript-common ways to interact

Source: Internet
Author: User

Why learn JavaScript

One, you know, why is JavaScript so worthwhile for us to learn?

1. JavaScript is supported by all major browsers .

2. Currently, most Web pages worldwide use JavaScript.

3. It allows Web pages to present a variety of dynamic effects .

Second, easy to learn sex

1. There is no outside learning environment, as long as there is a text editor , you can write JavaScript programs.

2. We can do some basic operations with simple commands .

Three, where to start learning?

The starting point for learning JavaScript is working with Web pages , so let's start with the basic syntax and How to use the DOM for simple operations .

How to insert JS

In one step, use the <script> tag to insert JavaScript code in the HTML page. Note that the <script> tag should appear in pairs and write the JavaScript code <script></script> between them.

<script type="text/javascript"> Indicates that the text type is between <script></script>

JavaScript is meant to tell the browser that the text is in the JavaScript language.

Reference JS External file

Add JavaScript code to the HTML file using the <script> tag:

Law two: Separate the HTML file and JS code, and create a single 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.

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

The location of JS in the page

We can place JavaScript code anywhere in the HTML file , but we usually place it in the head or body of the page .
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.
Put in the <body> section
The JavaScript code executes when the page reads to the statement.

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.

javascript-recognize statements and symbols

JavaScript statements are commands that are sent to the browser . The purpose of these commands is to tell the browser what to do.

Each line of JavaScript code format: 语句;

The end of a line is considered the end of the statement, usually with a semicolon at the end ";" to represent the end of the statement.

The following code, there are three statements, each sentence after the end of ";", in order to execute the statement.

<script type= "Text/javascript" >   document.write ("I");   document.write ("Love");   document.write ("JavaScript");</script>

Attention:

1. ";" Semicolon to enter in the English state, the same, JS code and symbols are entered in the English state.

2. Although the semicolon ";" can also not write, but we have to develop a good habit of programming, remember to write a semicolon at the end of the statement.

javascript-notes are important

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

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

javascript-What is a variable

From a programming standpoint, a variable is a memory used to store a certain number of values. We can think of variables 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).

Define variables using the keyword Var, with the following syntax:

var variable name

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

1. The variable must start with a letter, an underscore (_), or a dollar ($) symbol.

2. You can then use any number of English letters, numbers, underscores (_), or dollar ($) characters.

3. You cannot use JavaScript keywords with javascript reserved words.

Variables must be declared and then assigned , as follows:

var mychar;mychar= "JavaScript"; var mynum = 6;

Variables can be assigned repeatedly , as follows:

var mychar;mychar= "javascript"; mychar= "Hello";

Attention:

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.

javascript-Judgment Statement (If...else)

javascript-function

A function is a set of statements that complete a particular function.

The basic syntax is as follows:

function name () {function code;}

Description

1. function defines the keyword for the functions.

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

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

Function call:

After the function is well defined, it cannot be executed automatically, it needs to be called, that is, to write the function directly in the desired position, the code is as follows:

javascript-Output content (document.write)

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.

First Kind : output content is enclosed in "", Direct output "" content within the number.

<script type= "Text/javascript" >  document.write ("I Love javascript! "); Content is output directly from the content in "", "". </script>

The second Kind : through variables, output content

<script type= "Text/javascript" >  var mystr= "Hello world!";  document.write (mystr);  Write the variable name directly, and the output variable stores the contents. </script>

Third Kind : output multiple content, between content + number of connections.

<script type= "Text/javascript" >  var mystr= "Hello";  document.write (mystr+ "I love JavaScript"); Connect between multiple items with a + sign </script>

Fourth Type : Output HTML label, and function, label using "".

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

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);  

Look at the following code:

<script type= "Text/javascript" >   var mynum =;   Alert ("hello!");   Alert (mynum);</script>

Note:alert pops up the message dialog box (contains a OK button).

Result: Pop-up message box sequentially

Attention:

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.

javascript-Confirmation (Confirm message dialog box)

The Confirm Message dialog box is typically used to allow the user to make a selection action. A popup dialog box (including a OK button and a Cancel button).

Grammar:

Confirm (str);

Parameter description:

str: The return value  of the text to be displayed 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>

Results:

Note: The message dialog box is exclusive , that is, the user cannot do anything else until the dialog button is clicked.

javascript-Questions (Prompt message dialog box)

a pop-up message dialog box is typically used to ask for information that needs to interact with the user. prompt 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

Content in a text box

Returns the value 2 as a 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.");  }

Results:

Note: You cannot perform any other action until the user taps the button in the dialog box.

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, the window will not display any documents.
Window Name:
Optional parameter, the name of the window to be 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 with 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. 4.name cannot contain spaces.
Parameter string:
Optional parameters, set the window parameters, the parameters are 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>

Note: The running results consider browser compatibility issues .

javascript-Close Window (window.close)

Close () Closes the window

Usage:

Window.close ();      
//close this window
< Window object >.close ();   
//Close the specified window

For example, close the newly created window.

<script type= "Text/javascript" >   
Stores the newly-hit window object 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.

Programming Exercises

Getting started with javascript-common ways to interact

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.