Home > Developer > Web Develop
JavaScript knowledge note (1)-entry, statement, comment, variable, function, output content, dialog box, window, javascript window
JavaScript can provide beautiful web pages and provide users with a satisfactory online experience.
1. Enhance the dynamic page effect (such as drop-down menu, image carousel, and information scrolling)
2. Real-time and dynamic interaction between pages and users (such as user registration and login verification)
Reference JavaScript:1. Use the <script> tag to add JavaScript code to the HTML file ,:
2. Separate HTML files and JS Code and create a JavaScript file (JS file for short). The file suffix is usually. js, and then the JS Code is directly written in the JS file.
Note: You can directly write JavaScript code without the <script> tag in the JS file.
JavaScript files cannot be run directly. They need to be embedded into HTML files for execution. We need to add the following code to HTML to embed JS files into HTML files.
<script src="script.js"></script>
We can place JavaScript code anywhere in an html file, but we usually place it in the head or body of a webpage.
In the
The most common method is to place the <script> element in the head part of the page. The browser parses the head part and runs the code before parsing the rest of the page.
In the <body> section
JavaScript code is executed when the web page reads the statement.
Note:Javascript, as a scripting language, can be placed anywhere on the html page. However, when the browser interprets html, the script is executed in sequence. For example, JavaScript code for page display initialization must be placed in the head, because initialization must be performed in advance (such as setting css for the page body ); if the function is called through an event, there is no requirement on the location.
Statement and symbol:The JavaScript statement is a command sent to the browser. These commands are used to tell the browser what to do.
JavaScript code format:Statement;
Let's take a look at the following code:
<script type="text/javascript"> alert("hello!");</script> In the examplealert("hello!");Is a JavaScript statement.
The end of a row is regarded as the end of the statement. A semicolon is usually added to the end.";"To end the statement.
Take a look at the following code. There are three statements, each with ";" after the end of each sentence, and the statements are executed in order.
<script type="text/javascript"> document.write("I"); document.write("love"); document.write("JavaScript");</script> Note:
1. The semicolon (;) must be entered in English. Similarly, the code and symbols in JS must be entered in English.
2. Although the Semicolon ";" can also be left blank, but we should develop a good habit of programming, remember to write a semicolon at the end of the statement.
Note:Annotations can improve code readability and help you and others read and understand your JavaScript code. The comments are not displayed on the webpage. Annotations can be divided into single-line and multi-line annotations.
For ease of reading, the comments are generally placed at or around the end of the explain statement.
Single line comment. Add the symbol "//" before the comment content.
<Script type = "text/javascript"> document. write ("single line comment using '//'"); // I am a comment. This statement function outputs content on the webpage </script> Multi-line comments start with "/*" and end.
<Script type = "text/javascript"> document. write ("multi-line comments use/* Comment content */");/* multi-line comments form a good habit of writing comments */</script>Variable: Literally, variables are variable quantities. From a programming point of view, variables are used to store certain or certain values. We can think of variables as a box. To distinguish boxes, we can use names such as BOX1 and BOX2 to represent different boxes. BOX1 is the name of the box (that is, the name of the variable ).
Use the keyword var to define variables. The syntax is as follows:
VarVariable name
Variable names can be named at will, but follow the naming rules:
1. The variable must start with a letter, underscore (_), or dollar sign ($.
2. You can then use any number of English letters, numbers, underscores (_), or dollar signs ($.
3. JavaScript keywords and reserved words cannot be used.
The variable must be declared before being assigned a value, as shown below:
var mychar;mychar="javascript";var mynum = 6;
Variable values can be assigned repeatedly, as follows:
var mychar;mychar="javascript";mychar="hello";
Note:
1. It is case sensitive in JS. For example, the variable mychar is different from myChar, indicating that it is two variables.
2. Although variables can be directly used without declaration, they are not standardized and need to be declared before use.
Judgment statement:The if... else statement executes the code when the specified condition is set, and the code after the else statement is executed when the condition is not set.
Syntax:
If(Condition) {code executed when the condition is set}Else{Code executed when the condition is invalid} Let us determine whether we are adults by age. For example, if we are an adult at the age of 18, we are not adults.The Code is as follows:
<Script type = "text/javascript"> var myage = 18; if (myage> = 18) // myage> = 18 is the judgment condition {document. write ("you are an adult. ");} Else // otherwise, the age is less than 18 {document. write (" under 18 years old, you are not an adult. ") ;}</Script> A function is a set of statements used to complete a specific function. Without functions, you may need five lines, ten lines, or more code to complete the task. In this case, we can put the code block that completes a specific function into a function and directly call this function, saving the trouble of repeatedly inputting a large amount of code.
How to define a function? The basic syntax is as follows:
Function Name (){Function Code ;} Note:
1. function-Defined function keywords.
2. "function name": Your name for the function.
3. Replace "function code" with code that completes a specific function.
Let's 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);} Function call:After a function is defined, it cannot be automatically executed. Therefore, you only need to write the function directly at the desired position to call it,The Code is as follows (click the button to call the FunctionOnclick):
Output content:document.write()It can be used to directly output stream content to HTML. Simply put, the content is output directly on the webpage.
First, the output content is enclosed by "" and the content in "" is directly output.
<Script type = "text/javascript"> document. write ("I love JavaScript! "); // The content is included in" ", and the content in" "is output directly. </Script> Type 2: Output content through variables.
<Script type = "text/javascript"> var mystr = "hello world! "; Document. write (mystr); // directly write the variable name and output the content stored in the variable. </Script>
Third: Output multiple items and connect the content with the "+" sign.
<Scripttype = "text/javascript"> var mystr = "hello"; document. write (mystr + "I love JavaScript"); // connect multiple items with a plus sign </script>
Type 4: Output HTML tags and take effect. The tags are enclosed.
<Script type = "text/javascript"> var mystr = "hello"; document. write (mystr + "<br>"); // output a line feed document after hello. write ("JavaScript"); </script> Warning dialog box: When we visit a website, a small window pops up with a prompt message. If you do not click "OK", you cannot perform any operations on the webpage. This small window is implemented using alert.
Syntax:
Alert (string or variable );
See the following code:
<script type="text/javascript"> var mynum = 30; alert("hello!"); alert(mynum);</script> Note:The alert pop-up message dialog box contains a confirmation button ).
Result: the message box is displayed in order.
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.
Confirmation dialog box: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 when the user clicks "OK". returns false when the user clicks "cancel ".
Note: the return value can be used to determine the button clicked by the user.
See the following code:
<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> Result:
Note: The message dialog box is exclusive. You cannot perform any other operations before clicking the dialog box button.
Question dialog box:promptThe 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: to display the text in the message dialog box, do not modify the content in str2: text box. You can modify
Return Value:
1. Click OK. The content in the text box will return the function value. 2. Click Cancel to return the result.Null
Take a look at the following code:
Var myname = prompt ("enter your name:"); if (myname! = Null) {alert ("hello" + myname);} else {alert ("Hello my friend .");} Result:
Note: you cannot perform any other operations before clicking the button in the dialog box.
Open a new window:The open () method is used to open a new window.
Syntax:
Window. open (<URL>, <window Name>, <parameter string>)
Parameter description:
URL:The URL or path of the window.Window Name:Name of the window to be opened. It can be "_ top", "_ blank", and "_ selft.Parameter string:Set window parameters separated by commas.
Parameter table:
For example: Open the http://www.imooc.com site, size is 300px * 200px, no menu, no toolbar, no status bar, there is a 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:
1. There are spaces before and after the comma and equal sign between parameters. This string is invalid and can run normally only when spaces are deleted.
2. browser compatibility is considered for running results.
Close the window:Close () close the window
Usage:
Window. close (); // close this window
Or
<Window Object>. close (); // close the specified window
For example, close the new window.
<Script type = "text/javascript"> var mywin = window. open ('HTTP: // www.imooc.com '); // store the new window object in mywin. close (); </script> Note: When the code above opens a new window, close the window and you will not be able to see the window to be opened.
----------------------------------------------------------------
The above content refer to self MOOC Network: http://www.imooc.com
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
