1.Execute JavaScript via document.
write
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script type="text/javascript">
[Link](5 + 6);
</script>
</body>
</html>
Explanation:
[Link](5 + 6); → tells the browser to write directly into the HTML
document.
Output:
2.Execute JavaScript via inside HTML tag
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button onclick="[Link](3+5 +6)">click here</button>
</body>
</html>
Explanation:
The onclick="..." attribute means: when the button is clicked, the JavaScript inside will execute.
Output:
3.Execute JavaScript via inside HTML tag
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script type="text/javascript">
[Link](77-5+6);
</script>
</body>
</html>
Explanation:
[Link](77-5+6);
JavaScript calculates the expression: 77 - 5 + 6 = 78
Then it logs the result (78) to the browser’s console, not on the web page itself.
Output:
Open your webpage in the browser.
Right-click anywhere → Inspect (or press Ctrl + Shift + I).
Go to the Console tab at the top.
[Link] 78
4.Execute JavaScript via innerHTML
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 177 + 986;
</script>
</body>
</html>
Explanation:
● [Link]("demo") → finds the element with id="demo".
● .innerHTML = ... → changes its content.
● 177 + 986 → JavaScript calculates this sum → 1163.
● So, the empty <p id="demo"></p> becomes: <p id="demo">1163</p>
Output:
Learning JavaScript: Variables, Loops, and Functions
● Printing text with variables
● Solving a math equation
● Using loops
● Functions with random number generation
● Mixing HTML + JavaScript
<html>
<body>
<script>
[Link]("<b>LESSON 1: PRINT HELLO WORLD USING
VARIABLES</b><br><br>");
// To start we will create 2 variables:
var variable1 = 'Hello ';
var variable2 = 'World!<br><br>'; // <br> means line break in html
// Create a third variable by adding both variables:
var final_text = variable1 + variable2;
// Print the final result:
[Link](final_text);
[Link]("<b>LESSON 2: SOLVE AN EQUATION</b><br><br>");
var n = 9;
var x = n*n;
[Link]("Result of n*n=" + x);
[Link]("<br><br><b>LESSON 3: PRINT NUMBERS FROM 1 TO
10</b><br><br>");
// Create a loop of 10 elements.
// Variable "i" starts with value 1 and while i<=10 it will increment 1 (i=i+1)
for (var i=1; i<=10; i=i+1) {
[Link](i); // Print the current "i" number
// Print a comma followed by a space if i < 10
if (i<10) {
[Link](", ");
}
}
function show_random_number() {
var random_number = [Link](); // generate random number between 0 and 1
prompt(random_number); // show popup with a random number
</script>
<p style="color: red">
The content above was created with JavaScript.<br>
This content is created with <b>HTML</b>.<br>
You can edit JavaScript and HTML in the left part of the page
and click "<b>Run code</b>" to view results in the right part of the page.
</p>
<b>LESSON 4: CALL A JAVASCRIPT FUNCTION:</b>
<input type=button onClick="show_random_number()" value="Generate random number">
</body>
</html>
Explanation:
● Defines a function show_random_number().
o Inside it:
▪ [Link]() generates a random number between 0 and 1.
▪ prompt(random_number) shows a popup with the number
Output:
When you click the Generate random number button, a popup appears with a random
decimal number.
Function calling: Swap two values
<html>
<head>
<title> Function calling Swap two values </title>
<script type="text/javascript">
function swap(a,b)
{
var temp;
temp=a;
a=b;
b=temp;
alert (" A= "+a +" B= "+b);
}
</script>
</head>
<body>
<form name="form1" >
<h3>Enter A value</h3>
<input type="text" name="A">
<h3>Enter B value</h3>
<input type="text" name="B">
<input type="button" value="click" onClick= swap([Link],[Link])>
</form>
</body>
</html>
Explanation:
1. Form and Input Fields
● A form is created with name="form1".
● It has two input text boxes:
o form1.A → user enters value for A.
o form1.B → user enters value for B.
2. Button
<input type="button" value="click" onClick= swap([Link],[Link])>
● When you press the click button, the JavaScript function swap() is called.
● It sends the values from the two input boxes as arguments a and b.
3. Swap Function
function swap(a,b)
{
var temp;
temp = a; // store a in temp
a = b; // assign b to a
b = temp; // assign temp (old a) to b
alert(" A= " + a + " B= " + b);
}
● Inside the function:
o The values of a and b are swapped using a temporary variable.
o An alert box is shown with the swapped values.
o Example: If A = 54 and B = 23, after swap the alert will show:
o A = 23 B = 54
Output:
Updating the Textboxes
[Link] = a;
[Link] = b;
● Updates the input fields with the swapped values.
● After you click the button:
o First textbox will now show 32
o Second textbox will now show 67
Example 1- inline event handler.
<!DOCTYPE html>
<html>
<body>
<h1 onclick="[Link]='III CSE C!'">Click on this text!</h1>
</body>
</html>
Explanation:
● onclick is an event attribute → it runs when the user clicks on the element.
● [Link]='III CSE C!':
o this → refers to the element that was clicked (the <h1> itself).
o innerHTML → represents the content inside the tag.
o When you click, the text changes from "Click on this text!" to "III CSE C!".
Example 2 - Function-based event handler.
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id)
{
[Link] = "Welcome to FSWD class!";
}
</script>
</body>
</html>
Explanation:
● Again, <h1> has an onclick attribute, but here it calls a function named changeText().
● this is passed to the function → it represents the clicked <h1> element.
● Parameter id refers to the element passed (the <h1>).
● Changes the text content to "Welcome to FSWD class!".