JavaScript
Introduction to JavaScript
JavaScript is a programming language used to make web pages interactive. It runs inside
the web browser and works together with HTML and CSS. With JavaScript we can
display messages, respond to user actions, validate forms, and dynamically change page
content.
Printing a Simple Message
JavaScript can display messages in different ways.
<script>:
The <script> tag in HTML is used to write or include JavaScript code inside a web
page. It tells the browser that the content inside the tag is JavaScript and should be
executed.
Example: Using [Link]()
<script>
[Link]("Hello! Welcome to JavaScript.");
</script>
Example: Printing inside an HTML element
<p id="demo"></p>
//id="demo" gives a unique name (identifier) to this paragraph.
<script>
[Link]("demo").innerHTML = "Hello Students!";
//document represents the entire HTML webpage.
//getElementById("demo") is a JavaScript method used to find the HTML element
whose id is "demo".
//.innerHTML = "Hello Students!";
InnerHTML is used to change or insert content inside an HTML element.
</script>
Reading Elements in Different Ways
JavaScript can access HTML elements using several methods.
1. Using getElementById
<p id="msg">JavaScript Example</p>
<script>
let text = [Link]("msg").innerHTML;
//let text → Creates a variable named text to store some value.
//let → is a keyword
[Link](text);
//[Link]() prints the value to the browser console.
</script>
2. Using getElementsByTagName
<p>Paragraph One</p>
<p>Paragraph Two</p>
<script>
let items = [Link]("p");
[Link](items[0].innerHTML);
</script>
3. Using getElementsByClassName
<p class="note">Example Text</p>
<script>
let value = [Link]("note")[0].innerHTML;
</script>
Selection List
Example (Fruits)
When a user selects a fruit from a list, JavaScript can display a short message about it.
<select onchange="fruitInfo([Link])">
//onchange is an event in HTML/JavaScript.
It is triggered when the user changes the selected option in the dropdown list.
//function will run when the selected option changes.
//[Link] sends the selected fruit name to the function.
<option value="">Select Fruit</option>
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="mango">Mango</option>
</select>
<p id="result"> Apple is a nutritious fruit </p>
<p id="demo"> Banana gives quick energy </p>
<p id="demo1"> Mango is known as the king of fruits.</p>
<script>
function fruitInfo(fruit){
if(fruit=="apple")
[Link]("result").innerHTML;
else if(fruit=="banana")
[Link]("demo").innerHTML;
else if(fruit=="mango")
[Link]("demo1").innerHTML;
}
</script>
Alert Message
Alert displays a simple message box to the user.
<script>
alert("Welcome to JavaScript!");
</script>
Prompt Box
Prompt asks the user to enter some input.
<script>
let name = prompt("Enter your name:");
[Link]("Hello " + name);
</script>
Confirmation Popup
Confirm box asks the user to choose OK or Cancel.
<script>
let result = confirm("Do you want to continue?");
if(result)
[Link]("User selected OK");
else
[Link]("User selected Cancel");
</script>
Practice Example (Country and Capital Concept)
This exercise can be used in class. Students can create a selection list for countries and
display the capital when the country is selected. Teachers may provide their own
country–capital pairs for practice.
<select onchange="showCapital([Link])">
<option value="">Select Country</option>
<option value="c1">Country 1</option>
<option value="c2">Country 2</option>
<option value="c3">Country 3</option>
</select>
<p id="capital"></p>
<script>
function showCapital(c){
if(c=="c1")
[Link]("capital").innerHTML="Capital of Country 1";
else if(c=="c2")
[Link]("capital").innerHTML="Capital of Country 2";
else if(c=="c3")
[Link]("capital").innerHTML="Capital of Country 3";
}
</script>
<html>
<head>
<title>Country and Capital</title>
<style>
/* CSS style for capital text */
#capital {
color: blue;
font-weight: bold;
font-size: 24px;
margin-left: 20px;
</style>
<script>
function showCapital(country)
let capital = "";
if(country == "India")
capital = "New Delhi";
else if(country == "USA")
capital = "Washington D.C.";
else if(country == "Japan")
capital = "Tokyo";
else if(country == "Australia")
capital = "Canberra";
else if(country == "France")
capital = "Paris";
[Link]("capital").innerHTML = capital;
</script>
</head>
<body>
<h2>Select a Country</h2>
<select onchange="showCapital([Link])">
<option value="">Select Country</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Australia">Australia</option>
<option value="France">France</option>
</select>
<span id="capital"></span>
</body>
</html>
Module-5
Datebox:
<script>
function showDate()
{
let datebox = [Link]("datebox");
[Link] = new Date();
}
</script>
Factorial:
<script>
function findFactorial()
{
let n = prompt("Enter a number");
let fact = 1;
for(let i = 1; i <= n; i++)
{
fact = fact * i;
}
alert("Factorial of " + n + " is " + fact);
}
</script>
Prompt & Alert:
<script>
function showTable()
{
let n = prompt("Enter a number");
let result = "";
for(let i = 1; i <= 10; i++)
{
result = result + n + " x " + i + " = " + (n*i) + "\n";
}
alert(result);
}
</script>
Confirm:
<script>
function findSum()
{
let sum = 0;
let n;
do
{
n = prompt("Enter a number");
sum = sum + Number(n);
}
while(confirm("Do you want to add another number?"));
alert("Total Sum = " + sum);
}
</script>