HTML5 JAVASCRIPTS CHAPTER 16
16th TUTORIAL
ON HTML JavaScript
HTML JavaScript
JavaScript makes HTML pages
more dynamic and interactive.
Example
<!DOCTYPE
html>
<html>
<body>
<h1>My First
JavaScript</h1>
<button
type="button"
onclick="document.getElementById('demo').innerHTML
= Date()">
Click me to display
Date and Time.</button>
<p
id="demo"></p>
</body>
</html>
OUTPUT
My First
JavaScript
The HTML <script> Tag
The <script> tag
is used to define a client-side script (JavaScript).
The <script> element
either contains script 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.
To
select an HTML element, JavaScript most often uses the document.getElementById() method.
This
JavaScript example writes "Hello JavaScript!" into an HTML element
with id="demo":
Example
<!DOCTYPE
html>
<html>
<body>
<h2>Use JavaScript
to Change Text</h2>
<p>This
example writes "Hello JavaScript!" into an HTML element with
id="demo":</p>
<p
id="demo"></p>
<script>
document.getElementById("demo").innerHTML
= "Hello JavaScript!";
</script>
</body>
</html>
OUTPUT
Use JavaScript to Change Text
This example
writes "Hello JavaScript!" into an HTML element with
id="demo":
Hello JavaScript!
Tip: You can learn much more about JavaScript in our JavaScript Tutorial.
A Taste of JavaScript
Here are some examples of what
JavaScript can do:
JavaScript can change HTML content
<!DOCTYPE html>
<html>
<body>
<h1>My First JavaScript</h1>
<p>JavaScript can change the content of
an HTML element:</p>
<button type="button" onclick="myFunction()">Click
Me!</button>
<p id="demo">This is a
demonstration.</p>
<script>function myFunction() {
document.getElementById("demo").innerHTML = "Hello
JavaScript!";}
</script>
</body>
</html>
OUTPUT
My First JavaScript
JavaScript can
change the content of an HTML element:
Click
Me!
This is a
demonstration.
JavaScript can change HTML styles
<!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() {
document.getElementById("demo").style.fontSize =
"25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor =
"yellow"; }</script>
<button type="button"
onclick="myFunction()">Click Me!</button>
</body>
</html>
OUTPUT
My First
JavaScript
JavaScript can change the
style of an HTML element.
Click
Me!
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 scripts:
Example
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
</script>
<noscript>Sorry, your browser does not support
JavaScript!</noscript>
<p>A browser without support for JavaScript will show the text
written inside the noscript element.</p>
</body>
</html>
OUTPUT
Hello JavaScript!
A browser without support for
JavaScript will show the text written inside the noscript element.
Comments
Post a Comment