Basic Javascript learning notes (for cainiao) and javascript learning notes

Source: Internet
Author: User

Basic Javascript learning notes (for cainiao) and javascript learning notes

What is a variable?

A variable is a container used to store information.

Variable Declaration

Syntax:

Var variable name

Variable name = value;

The variable must be declared before being assigned a value.

Variable values can be assigned repeatedly.

Variable naming rules

The variable must start with a letter;

Variables can also start with $ and _ (but we do not recommend this );

Variable names are case sensitive (a and A are different variables ).

Statement

The statement ends with a semicolon. If the semicolon is omitted, the end of the statement is determined by the parser.

There is a good coding habit, all should end;

Data Type

InJavaScriptA piece of information is a value.(Value). Values have different types. The most familiar type is numbers. The string value is enclosed in

One or more words in quotation marks.

Any numeric value. A number can contain a decimal point or 68.57

Character in string quotation marks. You can use single or double quotation marks "hello, world"

Boolean)TrueOrFalseTrue

Undefined and Null UndefinedThis value indicates that the variable does not contain any value. You can clear a variable by setting its value to null.

Any value associated with the object

Value returned by the function

1 var a; // a is undefined2 var a = 6; // a is the number 3 var a = "Jason"; // a is the string

What is a function?

A function is a set of JavaScript statements that execute a task.

Basic Syntax:

Function Name () {function Code ;}

Function Name ();

Note:

Function defines the function keywords.

"Function name": the name you use for the function.

Replace "function code" with code that completes a specific function.

"Second function name"

1 function add2 () {2 var sun = 3 + 2; 3 alert (sun); 4} 5 add2 (); // call the function and write the function name directly to bring up the function code.
1 <input type = "button" value = "click" onclick = "add2 ()"/> 2 <! -- Click the button to call the function. onclick is the click event. -->

Output content (document. write)

Document. write ()Output content directly on the webpage.

First, the output content is enclosed by "" and the content in "" is directly output.

document.write("I love JavaScript!");

Type 2: Output content through Variables

Var mystr = "hello world"; document. write (mysrt); // directly write the variable name and output the content stored in the variable.

Third: Output multiple items and connect the content with the "+" sign.

Var mystr = "hello"; document. write (mystr + "I love Java Script"); // connect multiple contents with a plus sign

Type 4: Output HTML tags and take effect. The tags are enclosed.

Var mystr = "hello"; document. write (mystr + "<br>"); // output a line break, document. write ("JavaScript ");

Warning (alert message dialog box)

When we visit a website, a small window pops up with a prompt message. If you do not click "OK", you cannot do anything on the webpage.

This small window is implemented using alert.

Syntax:Alert (string or variable );

 

var mynum = 30;alert("hello!");alert(mynum);

Result: the message box is displayed in order (the alert message dialog box contains a confirmation button)

Note:

1. You cannot perform any other operations before clicking "OK" in the dialog box.

2. message dialog boxes can be used to debug programs.

3. alert output content, which can be a string or variable, similar to document. write

Confirm selection (confirm message dialog box)

In addition to providing information to users, we also want to obtain information from users. The confirm message dialog box is used.

The confirm message dialog box is usually used to allow users to select actions, such as: "Are you right ?" . A dialog box (including a confirmation button and a Cancel button) is displayed ).

Syntax: confirm (str );

Parameter description: str: Return Value of the text to be displayed in the message dialog box: Boolean

Return Value:

Returns true if you click OK.

If you click "cancel", false is returned.

Note: the return value can be used to determine the button clicked by the user.

<Script type = "text/javascript"> var mymessage = confirm ("do you like JavaScript? "); If (mymessage = true) {document. write (" good, come on! ");} Else {document. write (" JS is powerful. Learn! ") ;}</Script>

Question (prompt message dialog box)

Sometimes, not only do you want the user to answer Yes/No. Instead, you want to get a more specific response. In this case, we can use prompt.

The prompt pop-up message dialog box is usually used to ask information that needs to interact with users. The pop-up message dialog box contains a confirmation button, a Cancel button, and a text input box ).

Syntax:

prompt(str1,str2);

Parameter description:

Str1: the text to be displayed in the message dialog box cannot be modified.

Str2: Content in the text box, which can be modified

Return Value:

1. Click OK. The content in the text box is used as the function return value.

2. Click Cancel to return null.

Function rec () {var score; // score variable, used to store the score value entered by the user. Score = prompt ("Enter your score", "90"); if (score> = 90) {document. write ("You are great! ");} Else if (score> = 75) {document. write (" good luck! ");} Else if (score> = 60) {document. write (" Come on! ");} Else {document. write (" you have to work hard! ");};};
<Script> var myName = prompt ("enter your name"); if (myName! = Null & myName! = "") {Document. write ("welcom to" + myName);} else {document. write ("welcom to my friend") ;}</script>

Open a new window (window. open)

Syntax:

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

Parameter description:

URL:Optional. The URL or path of the webpage is displayed in the window. If this parameter is omitted or its value is a Null String, no document is displayed in the window.

Window name: optional parameter, the name of the window to be opened.

1. the name consists of letters, numbers, and underscores.

2. Window name: Optional. This string is a comma-separated feature list that declares the name of The Opened Window. Yes

Yes"_ Top", "_ blank", "_ selft", and "_ parent".

_ BlankDisplay the target webpage in a new window

_ SelftDisplay the target webpage in the current window

_ ParentThe target webpage is displayed at the current position of the entire window on the Framework webpage.

_ TopThe target webpage is displayed in the upper window of the Framework webpage.

3. SameNameOnly one window can be created. To create multiple windowsNameCannot be the same.

4.NameIt cannot contain spaces.

Parameter string: optional parameter. Window parameters are set. parameters are separated by commas.

Parameter table:

TOpNumber of rows that exit the top of the screen at the top of the window
LeftNumber of records that exit the left end of the window
WidthNumber window width
HeightNumber window height
MenubarYes, there is no menu in the no window
ToolbarYes. Is there any toolbar in the no window?
ScrollbarsYes. There is no scroll bar in the no window.
StatusYes, there is no status bar in the no window

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

Close window)

Close ()Close Window

Usage:

1 window. close (); // close this window 2 <window Object>. close (); // close the specified window

For example, close the new window.

1 <script type = "text/javascript"> 2 var mywin = window. open ('HTTP: // www.bkjia.com '); // store the new window object in the variable mywin. close (); 4 </script>

InnerHTML attributes

InnerHTMLProperty is used to obtain or replaceHTMLElement Content.

Syntax:

 Object.innerHTML

An Object is an acquired Element Object. For example, you can use document. getElementById ("ID") to obtain an element.

<Script type = "text/javascript"> var mychar = document. getElementById ("con"); document. write ("original title:" + mychar. innerHTML + "<br>"); // output the original h2 TAG content mychar. innerHTML = "hello world" document. write ("modified title:" + mychar. innerHTML); // output the modified h2 TAG content </script>

Change HTML Style

Syntax:

Object.style.property=new style;

Note:Object is the retrieved Element Object.For example, the elements obtained through document. getElementById ("id ")

<script type="text/javascript">  var mychar= document.getElementById("con");  mychar.style.color="red";  mychar.style.background="#ccc";  mychar.style.width="300px";</script>

Display attribute)

Syntax:

Object.style.display = value

Value:

NoneThis element is not displayed (and hidden)

BlockThis element is displayed as a block-level element (that is, displayed)

mychar.style.display = "block"

Control class name (className attribute)
Set the className attribute or return the class attribute of the element.
Syntax:

object.className = classname

Purpose:
1. Obtain the class attribute of an element.
2. Specify a css style for an element in the webpage to change the appearance of the element.

p2.className = "two";

The above Javascript basic learning notes (which cainiao must read) are all the content shared by Alibaba Cloud xiaobian. I hope you can give us a reference and support for the customer's home.

Related Article

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.