We can load external JavaScript(.js) and CSS(.cs) files on a page by giving reference in the head section of the web page.
Syntax
<head> <script type="text/javascript" src="myfile.js"> // loading .js file </script> <link rel="stylesheet" type="text/css" href="mypgm.css"/> // loading css file using link reference. </head>
Loading JS file
Following Example to show how to load external .js file
<!DOCTYPE html> <head> <script type="text/javascript" src="myfile.js"> </script> </head> <body onload="greeting();"> </body> </html>
The following code shows myfile.js file
function greeting() {
alert("hello !!!!");
}
- <script type=”text/javascript” src=”myfile.js”> tag is used to define client side script which uses attributes type for specifiying MIME type and src attribute used to specify URL of the file.
- <body onload=”greeting();”> tag uses onload() event which executes the javascript when page is finished loading which will call the function greeting() from myfile.js file to display the alert message.
Loading JS File Demo
- Save the file as load_external.html in your system.
- Just open the file in the browser, you will see the below picture in the browser.
When the execution process is completed successfully we will get the following output:
Loading CSS file
If we want to change style of HTML page then we can make use of CSS by defining required styles for the web page in seperate .css file.Now we will see how to load .css file in JavaScript.
Example to show creation of html file
<!DOCTYPE html> <head> <link rel="stylesheet" type="text/css" href="myfile.css"> </head> <body> <h2>Welcome</h2> <h2>This is JavaBeat home Page</h2> <p class="MyCss">This site is good for beginners</p> <br /> <a href="details.html">Show Details</a> </body> </html>
The following example shows external.css file
body{
background-color: lightyellow;
}
h1 {
color: brown;
text-align: center
}
h2 {
color: blue;
}
p {
color: darkorange;
}
p:hover {
color: green;
}
.MyCss {
font-color: red;
font-weight: bold;
text-align: left;
font-size: 20px;
}
Now we will create details.html file as shown below:
<!DOCTYPE html> <head> <title>Detail</title> </head> <body bgcolor="lightyellow"> <br> JavaBeat publishes Java web development tutorials and articles. It provides articles on many programming langauges such as Java,J2EE and frameworks such as Springs,JSF,Hibernate etc. </body> </html>
- <link rel=”stylesheet” type=”text/css” href=”myfile.css”> tag is used to link with external style sheet by using href attribute which links to myfile.css file.
- <p class=”MyCss”> tag contains class MyCss which determines styles for the text which will display in the browser.
- p:hover is like linke when user mouses over it.
- .MyCss is class name which contains styles such as color,wieght,size etc for the texts which should display in the browser.
- <img alt=”javabeat” src=”C:\jb.jpg”>tag is used to insert image by using src attribute which indicates location of the image.
Loading CSS File Demo
- Save the file as load_externalcss.html in your system.
- Just open the file in the browser, you will see the below picture in the browser.
When the execution process is completed successfully we will get the following output:
Now click on the “My Details” link, the following screen would be displayed:
JavaScript Switch Statement