Web Development Technology--javascript Syntax 1 (manipulating HTML elements, annotations)

Source: Internet
Author: User

JavaScript typically used to manipulate HTML elementsManipulating HTML elements

If you want to access an HTML element from JavaScript, you can use the document.getElementById (ID) method.

Use the ID property to identify the HTML element:

Example

Access the HTML element with the specified ID and change its contents:

<!DOCTYPE HTML><HTML><Body>    <H1>My First Web Page</H1>    <PID= "Demo">My First Paragraph</P>    <Script>document.getElementById ("Demo"). InnerHTML= "My First JavaScript";</Script></Body></HTML>

JavaScript is performed by a Web browser. In this case, the browser will access the HTML element of id= "demo" and replace its contents (InnerHTML) with "My first JavaScript".

Write to document output

The following example writes the <p> element directly to the HTML document output:

Instance
<!DOCTYPE HTML><HTML><Body>    <H1>My First Web Page</H1>    <Script>document.write ("<p>my First javascript</p>");</Script></Body></HTML>

Warning

Please use document.write () to write only to the document output.

If document.write is executed after the document has finished loading, the entire HTML page will be overwritten:

Instance
<!DOCTYPE HTML><HTML><Body>    <H1>My First Web Page</H1>    <P>My first Paragraph.</P>    <Buttononclick= "myFunction ()">Click here</Button>    <Script>        functionmyFunction () {document.write ("Oh, crap! The document disappears. "); }</Script></Body></HTML>
JavaScript in Windows 8

tip: Microsoft supports creating Windows 8 apps with JavaScript.

For the Internet and the Windows operating system, JavaScript means the future.

JavaScript statements

A command issued by a JavaScript statement to the browser. The purpose of the statement is to tell the browser what to do.

The following JavaScript statement outputs the text "Hello World" to the HTML element of the Id= "demo":

document.getElementById ("Demo"). Innerhtml= "Hello World";
Semicolon

Semicolons are used to separate JavaScript statements.

Usually we add semicolons at the end of each executable statement.

Another useful use of semicolons is to write multiple statements in one line.

tip: You may also see cases with no semicolons.

In JavaScript, concluding sentences with semicolons are optional.

JavaScript Code

JavaScript code (or JavaScript only) is a sequence of javascript statements.

The browser executes each statement in the order in which it is written.

This example will manipulate two HTML elements:

Instance
document.getElementById ("Demo"). Innerhtml= "Hello World";
document.getElementById ("Mydiv"). Innerhtml= "How is it?";
JavaScript code block

JavaScript statements are combined in the form of blocks of code.

The block starts with the left curly brace and ends with the closing curly brace.

The function of a block is to make the statement sequence execute together.

JavaScript functions are a typical example of combining statements in blocks.

The following example runs a function that can manipulate two HTML elements:

Instance
function MyFunction ()
{
document.getElementById ("Demo"). Innerhtml= "Hello World";
document.getElementById ("Mydiv"). Innerhtml= "How is it?";
}
JavaScript is case sensitive.

JavaScript is sensitive to capitalization.

When writing JavaScript statements, be aware of whether to turn off the case toggle key.

The function getElementById is different from the getElementById.

Similarly, variable myvariable and myvariable are also different.

Space

JavaScript ignores extra spaces. You can add spaces to the script to improve its readability. The following two lines of code are equivalent:

var name= "Hello";
var name = "Hello";
Wrapping lines of code

You can wrap lines of code in a text string with backslashes. The following example will display correctly:

document.write ("Hello \
World! ");

However, you cannot fold a line like this:

document.write \
("Hello world!");
Did you know that?

Tips: JavaScript is a scripting language. The browser executes the script code on a line-by-row basis when reading the code. For traditional programming, all code is compiled before execution.

JavaScript comments

JavaScript annotations can be used to improve the readability of your code.

JavaScript comments

JavaScript does not execute annotations.

We can add comments to explain JavaScript, or to improve the readability of the code.

Single-line comments begin with//.

Example

The following example uses a single-line comment to interpret the code:

// Output title: document.getElementById ("myH1"). Innerhtml= "Welcome to my homepage"; // Output paragraph: document.getElementById ("MyP"). Innerhtml= "This is my first paragraph.";
JavaScript Multi-line comments

Multiline comments start with/* and end with */.

The following example uses a multiline comment to interpret the code:

Example
/* The following code will output a title and a paragraph and will represent the beginning of the home page */ document.getElementById ("myH1"). Innerhtml= "Welcome to my homepage";d Ocument.getelementbyid ("MyP "). Innerhtml=" This is my first paragraph. ";
Use annotations to block execution of Example 1

In the following example, a comment is used to block the execution of one of the lines of code (available for debugging):

// document.getElementById ("myH1"). Innerhtml= "Welcome to my homepage"; document.getElementById ("MyP"). Innerhtml= "This is my first paragraph.";
Example 2

In the following example, a comment is used to block the execution of a block of code (available for debugging):

/* document.getElementById ("myH1"). Innerhtml= "Welcome to my homepage";d Ocument.getelementbyid ("MyP"). Innerhtml= " This is my first paragraph. "; */
Use annotations at the end of a line

In the following example, we put the comment at the end of the line of code:

Example
var x=5; Declare x and assign the value 5 to it.
var y=x+2; Declare y and assign the x+2 to it.

Web Development Technology--javascript Syntax 1 (manipulating HTML elements, annotations)

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.