Web Programming
Lecture 6
JavaScript
JS Control Statements
Switch Case.
If-else Statements:
if (age > 18) { let x = "0";
[Link]("You are an switch (x) {
adult."); case 0:
} else { text = "Off";
[Link]("You are a break;
minor."); case 1:
} text = "On";
Loops: break;
for (let i = 0; i < 5; i++) { default:
[Link](i); text = "No value
found";
}
}
JS Loops
for (expression 1; expression 2; expression 3)
{
// code block to be executed
}
Expression 1 is executed (one time) before
the execution of the code block.
Expression 2 defines the condition for
executing the code block.
Expression 3 is executed (every time) after
the code block has been executed.
JS Loops
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let len = [Link];
let text = "";
for (let i=0; i < len; i++) {
text += cars[i] + "<br>";
}
BMW Volvo Saab Ford
DOM Manipulation
What is the DOM?
● Document Object Model: JavaScript interacts with HTML elements
through it.
Example:
[Link]("myElement").innerText = "Hello,
World!";
Common Methods:
► getElementById
► getElementsByClassName
► getElementsByName,
► querySelector
► querySelectorAll
► addEventListener.
DOM Manipulation
<input id="demo" class="example" name="animal"
type="checkbox" value="Cats">
[Link]("demo").[Link] = "red";
num = [Link]("example").length;
let num = [Link]("animal").length;
[Link]("input"); //return first
[Link](".example"); //return all
JS Events
What are Events?
● Events represent user interactions (clicks, typing,
mouse movements, etc.)
● Events can be triggered by the user or
programmatically.
● JavaScript provides a way to handle these events
and respond to them.
● When an event occurs, browser creates an event
object, which contains information about event type,
i.e. click event, and information about the element on
which the event occurred, etc.
JS Events
An HTML event can be something the browser does, or something a
user does.
Here are some examples of HTML events:
● An HTML web page has finished loading
● An HTML input field was changed
● An HTML button was clicked
USES
● <element event='some JavaScript'>
● <button
onclick="[Link]('demo').innerHTML =
Date()">The time is?</button>
● <button onclick="displayAlert()">The time is?</button>
Event Handlers
<html>
<head>
<script>
function onButtonClick(event) {
alert("Button was clicked!");
}
function onDivClick(event){
if ([Link]==="child")
{
alert("Child was clicked.");
}
else
{
alert("Parent was clicked.");
}
}
</script>
</head>
<body>
<div onclick="onDivClick(event)" style="background-color:red">
<h1>Event Handling in HTML</h1>
<button id="child" onclick="onButtonClick(event)">Click Me</button>
</div>
</body>
</html>
<html>
<head>
<script>
function onButtonClick(event) {
alert("Button was clicked!");
}
function onDivClick(event){
if ([Link] === "child")
alert("Child was clicked.");
else
alert("Parent was clicked.");
}
const div = [Link]('div');
const button = [Link]('child');
[Link]("click", onDivClick);
[Link]("click", onButtonClick);
</script>
</head>
<body>
<div style="background-color:red">
<h1>Event Handling in HTML</h1>
<button id="child">Click Me</button>
</div>
</body>
</html>
JS Events
[Link]
Prevent Default Action
[Link]() is used to prevent the default browser
action associated with the event from occurring. It doesn’t stop the
event propagation; it only prevents the browser's default behavior
from happening.
<a href="[Link] id="myLink">Click me (but I won't
navigate!)</a>
<script>
[Link]("myLink").addEventListener("click",
function(event) {
[Link](); // Prevents the link from navigating to the URL
[Link]("Link navigation prevented!");
});
</script>
OnLoad Event
[Link] = writeMessage;
function writeMessage()
{
[Link](“hMsg”).inner
HTML = “Hello World!!”;
}
This keyword
The this keyword refers to the current
execution context, or the object on which a
method was called.
It can change depending on where it is used:
● In a function: Refers to the global object
(window in browsers).
● In a method: Refers to the object the
method belongs to.
● In an arrow function: Refers to the this
value from the surrounding context (lexical
scoping).
This
function showThis() {
[Link]([Link]); // In a function, `this` refers to the global object
(window)
}
const person = {
name: 'Alice',
greet: function() {
[Link]([Link]); // In a method, `this` refers to the object (person).
}
};
showThis(); // Global object
[Link](); // 'Alice'
This in event handling
● In an event listener, "this" refers to the element on which
the event listener is attached.
<button id="myButton">JavaScript Functions</button>
<script>
const button = [Link]('button');
[Link]('click', function() {
alert([Link]); // "this" refers to the button element id
});
</script>
</html>
class Person {
constructor(name, age) {
[Link] = name;
[Link] = age;
}
greet() {
[Link](`Hello, my name is ${[Link]} and I am ${[Link]} years old.`);
}
static sayHello() {
[Link]("Hello from the Person class!");
}
}
const person1 = new Person('Alice', 30);
[Link](); // "Hello, my name is Alice and I am 30 years old."
[Link](); // "Hello from the Person class!"
Private Field in Classes
class Student{
#name
constructor(){
this.#name='abc';
}
getName(){
return this.#name;
}
}
s=new Student();
[Link]([Link]())
Inheritance in Classes
class Person {
constructor(name, age) {
[Link] = name;
[Link] = age;
}
introduce() {
[Link](`Hi, my name is ${[Link]} and I am ${[Link]} years old.`);
}
}
// Child class
class Student extends Person {
constructor(name, age, grade) {
super(name, age); // Call the parent class constructor
[Link] = grade;
}
study() {
[Link](`${[Link]} is studying.`);
}
// Override the introduce method from the parent class
introduce() {
[Link](); // Call the parent method
[Link](`I am in grade ${[Link]}.`);
}
Resources to Learn
Slide 15: Resources to Learn More
● Websites:
○ MDN Web Docs.
○ [Link].
● Platforms:
○ FreeCodeCamp, Codecademy, or W3Schools.