One, understanding JavaScript
1-1
Why learning JavaScript
A), you know, why is JavaScript really worth our learning?
1. JavaScript is supported by all major browsers.
2. Currently, most Web pages in the world use JavaScript.
3. It enables Web pages to present a variety of dynamic effects.
4. As a web developer, JavaScript is an essential tool if you want to provide a nice web page and a user-satisfied Internet experience.
Second), easy to learn sex
1. Learning environment is not outside, as long as there is a text editor, you can write JavaScript programs.
2. We can do some basic operations with simple commands.
1-2
Referencing JS external file
Learning through the previous knowledge, we know that using <script type= "Text/javascript" > tags to add javascript code to HTML files
We can also separate the HTML file and JS code, and create a separate JavaScript file (JS file for short), its file suffix is usually. js, and then the JS code directly written in the JS file.
Note: In the JS file, do not need <script> tags, directly to write JavaScript code.
JS file can not run directly, need to embed into the HTML file execution, we need to add the following code in HTML, you can embed the JS file into the HTML file.
<script src= "Script.js" ></script>
1-3
The location of JS
We can place JavaScript code anywhere in the HTML file, but we usually put it in the head or the body section of the page.
Put it in the The most common way is to place the <script> element in the head section of the page, and the browser will execute this code in the Head section before parsing the rest of the page.
Put it in the <body> part
The JavaScript code executes when the page reads the statement.
Note: JavaScript can be placed anywhere in an HTML page as a scripting language, but the browser interprets HTML in a sequential order, so the preceding 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.
1-4
JS Statements and Symbols
A JavaScript statement is a command sent to the browser. The role of these commands is to tell the browser what to do.
Every JavaScript code format:
Statement
Let's take a look at the following code
<script type= "Text/javascript" >
Alert ("hello!");
</script>
The example of alert ("hello!"); is a JavaScript statement.
The end of a line is identified as the end of the statement, usually at the end with a semicolon ";" To indicate the end of the statement.
Attention:
1. ";" Semicolon to enter in the English state, the same, JS code and symbols must be in English state input.
2. Although the semicolon ";" You can not write, but we have to develop a good habit of programming, remember to write a semicolon at the end of the statement.
1-5
Annotations are important, just like Java.
The purpose of the annotation is to improve the readability of the code, to help yourself and others to read and understand the JavaScript code you have written, and the comments will not be displayed in the page. Comments can be divided into single-line comments and multiline annotations.
To facilitate reading, the annotation content is generally placed at the end or around the statement that needs to be interpreted.
Single-line comment, with the symbol "//" before the annotation content.
<script type= "Text/javascript" >
document.write ("Single note use '//'"); I am a note that the statement features output in a Web page
</script>
Multiline comments start with "/*" and End with "* *".
<script type= "Text/javascript" >
document.write ("Multiline annotation using/* Comment content * *)";
/*
Multiline Comment
Develop a good habit of writing notes
*/
1-6
Variable
A variable is literally a variable amount, and from a programmatic standpoint, a variable is a memory used to store some/some numeric value. 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,
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.
Variables are declared before they are assigned, as follows:
var MyChar;
mychar= "JavaScript";
Variables can be assigned repeatedly, as follows:
var MyChar;
mychar= "JavaScript";
mychar= "Hello";
Attention:
1. Case-sensitive in JS, such as variable MyChar and MyChar is not the same, the expression is two variables.
2. Although variables can also not be declared, direct use, but not specification, need to declare first, after use.
1-7
Function
A function is a set of statements that complete a particular function. Without a function, completing a task may require five lines, 10 rows, or even more code. In this case, we can put the code block that completes a certain function into a function, call this function directly, the trouble that the province repeats to enter a lot of code.
How do you define a function? The basic syntax is as follows:
function functions name ()
{
function 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.
Let's write a simple function that realizes the addition of two numbers and gives the function a meaningful name: "ADD2", the following code:
function Add2 () {
var sum = 3 + 2;
alert (sum);
}
Two, JS Interactive
1-1
1, output content (document.write)
2, Warning (Alert message dialog box)
When we visit the site, sometimes suddenly pop up a small window, which is written with a hint message text. If you do not click "OK", you can not do anything to the Web page, this small window is implemented using alert.
Grammar:
Alert (string or variable);
3, Confirm (Confirm message dialog box)
The Confirm Message dialog box is typically used to allow the user to make a choice of actions such as: "Are you right." Wait Pop-up dialog box (includes a OK button and a Cancel button).
Grammar:
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
Look at 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 function is strong, to learn Oh!"); }
</script>
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)
The Prompt pop-up message dialog box is often used to ask for information that requires interaction with the user. The pop-up message dialog box (contains an OK button, a Cancel button, and a text input box).
Grammar:
Prompt (str1, str2);
Parameter description:
STR1: Text to be displayed in the message dialog box, not modifiable
STR2: The contents of the text box can be modified. (but write code without writing str2, written is the default content in the text box)
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
Look at the following code:
var myname=prompt ("Please enter your name:");
if (myname!=null)
{Alert ("Hello" +myname);}
Else
{Alert ("Hello my friend."); }
5, open a new window (window.open)
The open () method is used to open a new window.
Grammar:
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.
Parameter table:
For example: Open http://www.imooc.com Web site, size 300px * 200px, no menus, no toolbars, no status bar, 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>
Attention:
A. There are spaces between the comma and the equal sign between the arguments, and the string is invalid, and only a space can be removed to function correctly.
B. Run results consider browser compatibility issues.
Second, DOM operations
2-1 Understanding DOM
The Document Object Model DOM defines the standard way to access and process HTML documents. The DOM renders an HTML document as a tree structure (a node tree) with elements, attributes, and text.
Let's take a look at the following code:
<a href= "http://www.imooc.com" >javascript dom</a>
An HTML document can be said to consist of a collection of nodes, three common DOM nodes:
1. Element node: The above <a> is the element node, that is, the label.
2. Text node: Content that is displayed to the user, such as the JavaScript dom above.
3. Attribute node: element properties, such as the <a> tag's link property href= "http://www.imooc.com".
2-2
Get elements by ID
Learned html/css style, know that the Web page by the label to organize information, and the label ID attribute value is the only, like each has an ID card number, as long as the ID number can be found by the corresponding person. So in the Web page, we first find the tag by ID, and then we do the action.
Grammar:
document.getElementById ("id")
2-3
InnerHTML Property
The InnerHTML property is used to get or replace the contents of an HTML element.
Grammar:
Object.innerhtml
Attention:
1.Object is the acquired element object, such as an element obtained by document.getElementById ("ID").
2. Note Writing, innerHTML case sensitive.
We get the <p> element by id= "Con", and the content of the element is exported and changed, the code is as follows:
<script type= "Text/javascript" >
var Mychar=document.getelementbyid ("Con");
document.write ("original title:" +mychar.innerhtml+ "<br>");//output original H2 label content
Mychar.innerhtml= "Modified content"
document.write ("Revised title:" +mychar.innerhtml); H2 label content after output modification
</script>
2-4
Change HTML Style
The HTML DOM allows JavaScript to change the style of HTML elements. How do I change the style of HTML elements?
Grammar:
Object.style.property=new style;
Note: object is an element object that gets, such as an element obtained by document.getElementById ("id").
Note: This table is just a small subset of CSS style properties, and other styles can be set and modified by this method.
Look at the following code:
Change the style of the <p> element, changing the color to red, the font size to 20, and the background color to blue:
<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>
2-5
Show and hide (display property)
The display and hidden effects are often seen in Web pages and can be set by using the Display property.
Grammar:
Object.style.display = value
Note: object is an element object that gets, such as an element obtained by document.getElementById ("id").
Value values:
None: Hidden content
Block: Display content.
2-6
Control class name (ClassName property)
ClassName property to set or return the class attribute of the element.
Grammar:
Object.classname = ClassName
Role:
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
<style>
body{font-size:16px;}
. one{
border:1px solid #eee;
width:230px;
height:50px;
Background: #ccc;
color:red;
}
. two{
border:1px solid #ccc;
width:230px;
height:50px;
Background: #9CF;
Color:blue;
}
</style>
<body>
<p id= "P1" > content to add a style </p>
<input type= "button" value= "Add Style" onclick= ' Add () '/>
<p id= "P2" class= "one" > Want to change the contents of a style </p>
<input type= "button" value= "Change Appearance" onclick= "Modify ()"/>
<script type= "Text/javascript" >
var Mychar=document.getelementbyid ("P2");
document.write ("P2 element class value is:" +mychar.classname)
function Add () {
var P1 = document.getElementById ("P1");
P1.classname= "one";
}
function Modify () {
var P2 = document.getElementById ("P2");
P2.classname= "two";
}
</script>
</body>
