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

Source: Internet
Author: User
Tags button type


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


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.