Scribd
Upload
16 views

FSD-EXP-6(Applying JavaScript - internal and external, IO, Type Conversion)

The document provides an introduction to JavaScript, detailing its role in web development and the methods for embedding it in HTML through internal and external scripts. It includes example programs demonstrating both internal and external JavaScript usage, as well as various output methods such as innerHTML, document.write(), window.alert(), and console.log(). The document emphasizes the importance of JavaScript in manipulating web page behavior and displaying data.

Uploaded by

swethaj789
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views

FSD-EXP-6(Applying JavaScript - internal and external, IO, Type Conversion)

The document provides an introduction to JavaScript, detailing its role in web development and the methods for embedding it in HTML through internal and external scripts. It includes example programs demonstrating both internal and external JavaScript usage, as well as various output methods such as innerHTML, document.write(), window.alert(), and console.log(). The document emphasizes the importance of JavaScript in manipulating web page behavior and displaying data.

Uploaded by

swethaj789
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

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:

You might also like