Easy to learn JavaScript four: JS Click on the light bulb to light or turn off this lamp's web effects map JS in the HTML role

Last Update:2015-11-19 Source: Internet

Author: User

Tags button type

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

We begin to explain the role JS plays in HTML. for the Internet and the Windows operating system, JavaScript means the future.

(1) JavaScript: Writing HTML output

Instance code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS role</title>
</head>

<body>
<p>
JavaScript can be written directly into the HTML output stream:
</p>

<script type="text/javascript">
Document.write("<h1>This is a heading</h1>");
Document.write("<p>This is a paragraph.</p>");
</script>

<p>
You can only use <strong>document.write</strong> in your HTML output stream.
If you use it after the document has been loaded (such as in a function), it will overwrite the entire document.
</p>
</body>
</html>

The result of the operation is:

Tip: You can only use document.write in HTML output. If you use this method after the document is loaded, the entire document is overwritten.

(2) JavaScript: Responding to events

Instance code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS role</title>
</head>

<body>
<h1>My first JavaScript</h1>

<p>
JavaScript can react to events. For example, a click on a button:
</p>

<button type="button" onclick="alert('Welcome!')">Click here</button>
</body>
</html>

After clicking the button:

The alert () function is not commonly used in JavaScript, but it is very handy for code testing. The onclick event is just what you're going to learn in this tutorial

One of many events.

(3) JavaScript: Changing HTML content

Using JavaScript to work with HTML content is a powerful feature.

Instance code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS role</title>
</head>

<body>
<h1>My first JavaScript</h1>

<p id="demo">
JavaScript can change the content of HTML elements.
</p>

<script type="text/javascript">
Function myFunction()
{
x=document.getElementById("demo"); // find the element
x.innerHTML="Hello JavaScript!"; // Change content
}
</script>

<button type="button" onclick="myFunction()">Click here</button>
</body>
</html>

Before you click:

After clicking:

You will often see document.getElementById ("some id"). This method is defined in the HTML DOM. DOM (Document Object modulo

is a formal standard for accessing HTML elements.

(4) JavaScript: changing HTML images

This meeting dynamically changes the source of the html<image> (SRC):

The light bulb

Tap the light bulb to turn the lamp on or off

Instance code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS role</title>
</head>

<body>
<script type="text/javascript">
Function changeImage()
{
Element=document.getElementById('myimage')
If (element.src.match("bulbon"))
   {
   Element.src="http://www.w3school.com.cn/i/eg_bulboff.gif";
   }
Else
   {
   Element.src="http://www.w3school.com.cn/i/eg_bulbon.gif";
   }
}
</script>

<img id="myimage" onclick="changeImage()"

Src="http://www.w3school.com.cn/i/eg_bulboff.gif">

<p>Click on the light bulb to turn this light on or off</p>
</body>
</html>

Before not clicked:

After clicking:

After clicking again:

JavaScript can change most attributes of any HTML element, not just pictures. This is one of the coolest examples, but also the classic sample

Cases!!

(5) JavaScript: Changing HTML styles

Changing the style of HTML elements is a variant of changing HTML attributes.

Instance code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS role</title>
</head>

<body>
<h1>My first JavaScript</h1>

<p id="demo">
JavaScript can change the style of HTML elements.
</p>

<script type="text/javascript">
Function myFunction()
{
x=document.getElementById("demo") // find the element
X.style.color="#ff0000"; // change the style
}
</script>

<button type="button" onclick="myFunction()">Click here</button>

</body>
</html>

The result of the operation is:

After clicking the button:

(7) JavaScript: Validating input

JavaScript is often used to validate user input.

Instance code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS role</title>
</head>

<body>
<h1>My first JavaScript</h1>

<p>Please enter a number. If the input value is not a number, the browser will pop up a prompt box. </p>

<input id="demo" type="text">

<script type="text/javascript">
Function myFunction()
{
Var x=document.getElementById("demo").value;
If(x==""||isNaN(x))
{
Alert("Not Numeric");
}
}
</script>

<button type="button" onclick="myFunction()">Click here</button>
</body>
</html>

The result after entering Lian is:

(7) Manipulating 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 an HTML element with the specified ID and change its contents:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS role</title>
</head>

<body>
<h1>My First Web Page</h1>

<p id="demo">My First Paragraph</p>

<script type="text/javascript">
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>

The result of the operation is:

JavaScript is performed by a Web browser. In this case, the browser will access the HTML element of the Id= "demo" and put its contents

(InnerHTML) is replaced with "My first JavaScript".

(8) 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 code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS role</title>
</head>

<body>
<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick="myFunction()">Click here</button>

<script type="text/javascript">
Function myFunction()
{
Document.write("Oops! The document has disappeared.");
}
</script>
</body>
</html>

After clicking the button:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Easy to learn JavaScript four: JS Click on the light bulb to light or turn off this lamp's web effects map JS in HTML function

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More