Introduction
The chapter demonstrates about HTML JavaScript. In html the combination of html and CSS used to control the style and JavaScript is used control the behavior of the web document, following are the concepts covered.
- Embedded JavaScript
- External JavaScript
- No Script
- JavaScript Examples
Description
JavaScript are used to make HTML pages more dynamic and interactive. With the help of JavaScript user can apply styles and add content to the HTML document at run time.
Embedded JavaScript means including the JavaScript in html file by using the <script> tag. Use the <script> tag in <head> tag or <body> tag. By using the script tag user can observe the behavior of the elements in a web document. The code below demonstrates embedding the script file into the web document and behavior of the elements.
[html]
<!DOCTYPE html>
<html>
<head>
<script>
/* Your Javascript goes here */
</script>
</head>
<body>
<script type="text/javascript">
function Javascript_demo()
{
alert("Welcome to SPlessons");
}
</script>
<input type="button" onclick="Javascript_demo()" value="Click here" />
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When the user click on the above button then user will get a dialogue box is as shown below.
Description
External JavaScript means all the script files are taken into a single file and link the file to the web page, the extension of the file must be .js file Eg: Script.js. In order to add those files to the web page user need to use the <script> tag and src attribute for the URL of the file.
The code below demonstrates the adding the external script file is as shown below.
splessons.js is a javascript file in the below snippet code.
[html]
function Hello()
{
alert("Hello, SPlessons");
}
[/html]
Now add the above script file to the html code is as shown below.
[html]
<!DOCTYPE html>
<html>
<head>
<title>Javascript External Script</title>
<script src="splessons.js" type="text/javascript"/></script>
</head>
<body>
<input type="button" onclick="Hello();" name="ok" value="Click Me" />
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When the user click on the above button the browser dispay a dialogue box is as shown below.
Description
In order to display the disabled JavaScript or lacks supported browsers user need to use the tag which is used to know the no support or JavaScript disabled by the browser.
The code below demonstrates the JavaScript element.
[html]
<!DOCTYPE HTML>
<html>
<script type="text/JavaScript">
document.write("Welcome to SPlessons")
</script>
<noscript>
<p>Please,Turn "on" Javascript or your browser lacks support.</p>
</noscript>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
By using the JavaScript user will get the behavior of the elements. With the help of JavaScript user can do the many changes to the html documents. Few examples are demonstrated below.
The below code demonstrates the use of JavaScript and user can change the content of the html document.
[html]
<!DOCTYPE html>
<html>
<body>
<h1>SPLESSONS</h1>
<p>JavaScript can change the content of an HTML element:</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo">SPlessons Introduction</p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello splessons!";
}
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When the user click on the above button then the content of the document will change as shown in below image.
The code below demonstrates changing the style of the document by using the java script.
[html]
<!DOCTYPE html>
<html>
<body>
<h1>SPLESSONS</h1>
<p id="demo">Welcome to SPlessons.</p>
<script>
function myFunction() {
document.getElementById("demo").style.fontSize = "25px";
}
</script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When the user click on the above button the document style get changed as shown in below image.
The code below demonstrates changing the images by using the JavaScript.
[html]
<!DOCTYPE html>
<html>
<body>
<script>
function light(sw) {
var pic;
if (sw == 0) {
pic = "splessons.JPG"
} else {
pic = "splessons1.JPG"
}
document.getElementById('myImage').src = pic;
}
</script>
<img id="myImage" src="splessons1.JPG" width="300" height="250">
<p>
<button type="button" onclick="light(1)">Next</button>
<button type="button" onclick="light(0)">Prev</button>
</p>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
When the user click on the above buttons then user can get the next image as shown in below image.
Example
The example below demonstrate the content of container and div is added by JavaScript.
HTML
[html]
<div id="Container"></div>
[/html]
Java Script
[html]
document.getElementById("Container").innerHTML = "My First Script";
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Key Points
- User can include the script either internally or externally.
- Behavior of the web page controlled by JavaScript.
- <script> tag demonstrates the script.