Introduction to JavaScript
JavaScript
• It is used to program the behaviour of web pages.
• It is very important to learn for the web developers.
Date and Time
<button type="button"
= Date()">
Click Here.</button>
<p id=“p1"></p>
Changing HTML Content
<p id="p1">Original</p>
<button type="button"
=
"Changed!"'>Click Here</button>
Changing HTML Attribute Values
<button
>on the light</button>
<img id="myImage" src="[Link]" style="width:100px">
<button
>off the light</button>
Changing HTML Styles
<p id="p1">JavaScript can change the style of an HTML element.</p>
<button type="button"
>e Font Size</button>
Hiding HTML Elements
<p id="p1">JavaScript can hide HTML elements.</p>
<button type="button"
>Me!</button>
Unhiding HTML Elements
<p id= "p1" style="display:none">I am here!</p>
<button type="button"
>to show hidden content</button>
JavaScript in <head>
<html>
<head><script>
function myFunction() {
[Link]("p1").innerHTML = "Paragraph changed.";
}
</script></head>
<body>
<p id="p1">A Paragraph.</p>
<button type="button" it</button>
</body>
</html>
JavaScript in <body>
<p id="p1">A Paragraph.</p>
<button type="button" it</button>
<script>
function myFunction() {
[Link]("p1").innerHTML = "Paragraph changed.";
}
</script>
External JavaScript
External File: [Link]
In HTML: <script src="[Link]"></script>
Using innerHTML
<p id="p1"></p>
<script>
[Link]("p1").innerHTML = 5 + 6;
</script>
Using [Link]()
<script>
[Link](5 + 6);
</script>
Try this with other content.
<button type="button" + 6)">Try
it</button>
Using [Link]()
<script>
[Link](5 + 6);
</script>
Using [Link]()
<script>
[Link](5 + 6);
</script>
To see the output, press F12 and click console.
Using [Link]()
<button this page</button>
JavaScript Statements
<script>
var x, y, z;
x = 5;
y = 6;
z = x + y;
[Link]("demo").innerHTML =
"The value of z is " + z + ".";
</script>
JavaScript Functions
<script>
var x = myFunction(4, 3);
[Link]("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
JavaScript Objects
<script> <script>
// Create an object: // Create an object:
var person = { var person = {
firstName: "John",
firstName: "John",
lastName : "Doe",
lastName : "Doe",
id : 5566,
id : 5566 fullName : function() {
}; return [Link] + " " + [Link];
// Display some data from the object: }
[Link]("demo").innerHTML = };
// Display data from the object:
[Link] + " " + [Link];
[Link]("demo").innerHTML =
</script> [Link]();
</script>
JavaScript “if-else”
<script>
var greeting;
var time = new Date().getHours();
if (time < 10) {
greeting = "Good morning";
}
else if (time < 20) {
greeting = "Good day";
}
else {
greeting = "Good evening";
}
[Link]("demo").innerHTML = greeting;
</script>
JavaScript “switch”
<script>
var day;
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break; //Up to case 6
}
[Link]("demo").innerHTML = "Today is " + day;
</script>
JavaScript “for”
<script>
var cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
var text = "";
var i;
for (i = 0; i < [Link]; i++) {
text += cars[i] + "<br>";
}
[Link]("demo").innerHTML = text;
</script>
JavaScript “while”
<script>
var text = "";
var i = 0;
while (i < 10) {
text += "<br>The number is " + i;
i++;
}
[Link]("demo").innerHTML = text;
</script>
JavaScript “do-while”
<script>
var text = ""
var i = 0;
do {
text += "<br>The number is " + i;
i++;
}
while (i < 10);
[Link]("demo").innerHTML = text;
</script>
