6.
Applying JavaScript - internal and external, I/O, Type Conversion
A) Write a program to embed internal and external JavaScript in a web page.
B) Write a program to explain the different ways for displaying output.
JavaScript Introduction
What is JavaScript?
JavaScript is the programming language of the web.
It can update and change both HTML and CSS.
It can calculate, manipulate and validate data.
Why Study JavaScript?
JavaScript is one of the 3 languages all web developers must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
JavaScript Where To
The <script> Tag
In HTML, JavaScript code is inserted between <script> and </script> tags.
What is Internal and External JavaScript?
Internal and External JavaScript are the two ways of adding JavaScript code to an
HTML document. External JavaScript refers to adding JavaScript code in HTML
from a separate .js file using the src attribute of <script> tag while the Internal
JavaScript is the JavaScript code embedded within the script tag in the same
HTML document.
Internal JavaScript
Internal JavaScript refers to embedding JavaScript code directly within the
HTML file using <script> tag, either inside the <head> or <body> tag. This
method is useful for small scripts specific to a single page.
Syntax
<script>
// JavaScript code here
</script>
External JavaScript
External JavaScript is when the JavaScript code written in another file having an
extension .js is linked to the HMTL with the src attribute of script tag.
Syntax
<script src="url_of_js_file"> </script>
Multiple script files can also be added to one page using several <script> tags.
<script src="file1.js"> </script>
<script src="file2.js"> >/script>
A) Write a program to embed internal and external JavaScript in a web page.
Internal JavaScript:
Example:
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
OutPut:
External JavaScript
//Path: C:\Users\Viswanath\Desktop\FSD\HTML\ss.js
// Filename: ss.js
let h2 = document.getElementById("demo");
h2.innerText = "This text is added by External JavaScript";
ExternalJavaScript.html
<html>
<body>
<h2 id="demo">Hello...</h2>
<script src="C:\Users\Viswanath\Desktop\FSD\HTML\ss.js"></script>
</body>
</html>
OutPut:
B) Write a program to explain the different ways for displaying output
JavaScript Output
JavaScript Display Possibilities
JavaScript can "display" data in different ways:
Writing into an HTML element, using innerHTML.
Writing into the HTML output using document.write().
Writing into an alert box, using window.alert().
Writing into the browser console, using console.log().
Using innerHTML
To access an HTML element, JavaScript can use
the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the
HTML content:
Example:
<html>
<body>
<h2>My First Web Page</h2>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
OutPut:
Using document.write()
For testing purposes, it is convenient to use document.write():
Example
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
OutPut:
JavaScript window.alert() Method
The window.alert() method is used to display an alert box with a specified output
(or message) and an OK button.
Syntax:
window.alert();
Example:
<html lang="en">
<head>
<title>JavaScript Output</title>
</head>
<body>
<h2>
Display Output using window.alert() Method
</h2>
<!-- Script to use window.alert() -->
<script>
window.alert("Hello!");
</script>
</body>
</html>
Output:
