07 Jan 2018
JavaScript – Placement
Where to place JavaScript
JavaScript code must be placed between <script></script> tags in html. It can be placed in the <body>, or in the <head> section of HTML page, or in both.
Example:
<html>
<head>
<script>
alert(“Hello World”);
</script>
<head>
<body></body>
</html>
<head>
<script>
alert(“Hello World”);
</script>
<head>
<body></body>
</html>
Functions in JavaScript
Function is a block of code, we can write user defined functions in JavaScript in JavaScript. A function can be called when an event occurs, like on button click.
Example:
<html>
<head>
<title>Html JavaScript</title>
<script>
function welcome() {
document.getElementById(“msg”).innerHTML = “Welcome to JavaScript!”;
}
</script>
</head>
<body>
<input type=”button” onclick = “welcome()” value=”Click Me”/>
<br/>
<span id=”msg”></span>
</body>
</html>
<head>
<title>Html JavaScript</title>
<script>
function welcome() {
document.getElementById(“msg”).innerHTML = “Welcome to JavaScript!”;
}
</script>
</head>
<body>
<input type=”button” onclick = “welcome()” value=”Click Me”/>
<br/>
<span id=”msg”></span>
</body>
</html>
External JavaScript
Like external CSS we can also keep JavaScript code in a separate file and then include it in required html document. External scripts are very useful when the same code or javascript function used in many different web pages.
External javascript file must be save with .js extension.
To import the external javascript file src (source) attribute of a <script> tag is used:
Example:
External file: externalScript.js
<script>
function welcome() {
document.getElementById(“msg”).innerHTML = “Welcome to JavaScript!”;
}
</script>
function welcome() {
document.getElementById(“msg”).innerHTML = “Welcome to JavaScript!”;
}
</script>
<html>
<body>
<script src=”externalScript.js”></script>
<input type=”button” onclick = “welcome()” value=”Click Me”/>
<span id=”msg”>Hello World</span>
</body>
</html>
<body>
<script src=”externalScript.js”></script>
<input type=”button” onclick = “welcome()” value=”Click Me”/>
<span id=”msg”>Hello World</span>
</body>
</html>
External JavaScript Advantages
- JavaScript code as well as HTML code is easily readable
- External JavaScript files are cached by browsers and can speed up page load times.
- Designers can work along with coders parallel without code conflicts