JavaScripts make HTML pages more dynamic and interactive.
The HTML <script> Tag
The <script> tag is used to define a client-side script, such as a JavaScript.The <script> element either contains scripting statements or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
The script below writes Hello World! to the HTML output:
<script>
document.write("Hello World!")
</script>
Example:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("Hello World!")
</script>
</body>
</html>
The HTML <noscript> Tag
The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn�t support client-side scripting.The <noscript> element can contain all the elements that you can find inside the <body> element of a normal HTML page.
The content inside the <noscript> element will only be displayed if scripts are not supported, or are disabled in the user�s browser:
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
Example:
<!DOCTYPE html><html>
<body>
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text in the noscript element.</p>
</body>
</html>
A Taste of JavaScript (From Our JavaScript Tutorial)
Here are some examples of what JavaScript can do:JavaScript can write directly into the HTML output stream:
document.write("<p>This is a paragraph</p>");
Example:
<!DOCTYPE html><html>
<body>
<p>
JavaScript can write directly into the HTML output stream:
</p>
<script>
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 the HTML output.
If you use it after the document has loaded (e.g. in a function), the whole document will be overwritten.
</p>
</body>
</html>
JavaScript can react to events:
<button type="button" onclick="myFunction()">Click Me!</button>
Example:
<!DOCTYPE html><html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">
JavaScript can react to events. Like the click of a button.
</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
JavaScript can manipulate HTML styles:
document.getElementById("demo").style.color="#ff0000";
Example:
<!DOCTYPE html><html>
<body>
<h1>My First JavaScript</h1>
<p id="demo">
JavaScript can change the style of an HTML element.
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // Find the element
x.style.color="#ff0000"; // Change the style
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
HTML Script Tags
Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts
No comments:
Post a Comment