COMP

5. DOM and DHTML (Late 1990s - Early 2000s):

2ND QUARTER
JavaScript's role expanded to include the Document Object
Model (DOM), which allowed developers to dynamically
INTRODUCTION TO JAVASCRIPT manipulate web page elements. This led to the creation of
JavaScript is a high-level, versatile, and widely-used dynamic HTML (DHTML) and more interactive web
programming language primarily used for web applications.
development. It allows you to add interactivity and
dynamic behavior to websites. JavaScript is a client-side 6. ECMAScript 5 and Modernization (2009): ECMAScript 5
scripting language, which means it runs in the user's web (ES5) introduced several significant enhancements to
browser, enabling you to create responsive and interactive JavaScript, including strict mode, JSON support, and
web pages. It is not related to Java, despite the similar improved array manipulation methods. These changes
name. modernized the language and helped eliminate some of its
HISTORY OF JAVASCRIPT earlier quirks.

The history of JavaScript is a fascinating journey through

7. The Rise of Libraries and Frameworks (2000s -
the development of a programming language that has
Present): JavaScript libraries like jQuery (2006) and
become an integral part of web development. Here's an
frameworks like Angular (2010) and React (2013) have
overview of the history of JavaScript:
significantly accelerated web development. These tools
provided pre-built solutions for common tasks and
1. Birth of JavaScript (1995): JavaScript was created by
contributed to the popularity of JavaScript in modern web
Brendan Eich in 1995 while he was working at Netscape
development.
Communications. It was initially developed under the
name "Mocha" and was later renamed "LiveScript." Finally,
8. ECMAScript 6 (ES6) and Beyond (2015 - Present):
in a strategic partnership with Sun Microsystems, it was
ECMAScript 6, also known as ES2015, introduced
renamed "JavaScript" to leverage the popularity of Java.
numerous new features and enhancements to JavaScript,
Despite the name, JavaScript and Java are entirely
making the language more powerful and
different programming languages.
developer-friendly. Subsequent versions of ECMAScript
(ES7, ES8, ES9, etc.) continue to add new features and
2. Introduction to Netscape Navigator (1995): The first
improvements to the language.
version of JavaScript was introduced in the Netscape
Navigator browser, and it allowed web developers to add
9. Server-Side JavaScript (Node.js, 2009): Node.js,
client-side interactivity to web pages. This was a
developed by Ryan Dahl, brought JavaScript to the
groundbreaking development as it reduced the reliance on
server-side, allowing developers to use JavaScript for
server-side processing for dynamic content.
building server applications. This marked a significant
expansion of JavaScript's role beyond the browser.
3. Standardization with ECMAScript (1997): To establish a
standardized version of the language, JavaScript was
10. Widespread Adoption (Present): JavaScript has
submitted to Ecma International, a European standards
become one of the most widely used programming
organization. The standardization effort resulted in
languages globally. It's not only used for web development
ECMAScript, which is the formal specification for the
but also for server-side scripting, mobile app
language. ECMAScript 3, released in 1999, became the
development, and even desktop application development.
most widely supported version of JavaScript at the time.

The history of JavaScript is a testament to its evolution and

4. Competition and Browser Wars (late 1990s): Microsoft
adaptability. It has grown from a simple scripting language
introduced JScript, a JavaScript-compatible scripting
in a web browser to a versatile language used for various
language for Internet Explorer, leading to a period of
applications, and it continues to evolve with each new
intense competition between Netscape and Microsoft in
iteration of ECMAScript.
the "browser wars." This competition influenced the
development of JavaScript as both companies added
proprietary features to their scripting engines.
 METHODS OF JAVASCRIPT 3. External Script
Inline, internal, and external are three common methods External scripts are JavaScript code stored in separate .js
for including JavaScript code in web development. Each files and linked to the HTML document using the <script>
method has its own use cases and advantages, depending element's src attribute.
on the complexity of the code and the need for reusability
Example:
and maintainability.
<script src="myscript.js"></script>

1. Inline Script
Pros:
Inline scripts are JavaScript code embedded directly within
● Promotes code organization, maintainability, and
the HTML document, typically within HTML attributes,
reusability.
such as onclick, onload, or href.
● Suitable for complex scripts and projects with
multiple pages.
Example:
● Enhances page load performance since the
<button onclick="myFunction()">Click
me</button> browser can cache external scripts.

Pros: Cons:
● Ideal for small, page-specific functionality and ● Requires additional HTTP requests to load the
event handling. external script, which can affect initial page load
● Quick and simple for adding interactivity to times.
specific elements. THE POPUP BOX
● Good for prototyping and experimenting. A popup box, often referred to as a "popup," is a
graphical user interface (GUI) element that appears
Cons: on top of a web page or application window,
● Mixing HTML and JavaScript can make code less providing information, interactivity, or user prompts.
maintainable for larger projects. Popups are typically used to draw attention to
● Not suitable for complex scripts or code that need specific content, messages, or actions, and they can
to be reused. be seen in various forms on websites and in software
applications.
2. Internal Script
Internal scripts, also known as embedded scripts, are Three Common Types of Popup Boxes:
JavaScript codes included within the HTML document
using the <script> element. These scripts can be placed ● Alert Box: An alert box is a simple popup that
within the <head> or the <body> of the HTML file.
displays a message to the user and typically
includes an "OK" button. It's used to provide
information or alerts.
Example:
<script>
Sample Syntax:
// Your JavaScript code goes here
</script>
alert("This is an alert box!");
Pros:
● Prompt Box: A prompt box is a popup that
● Suitable for small to moderately complex scripts.
prompts the user to input data. It contains an
● Can access and manipulate the DOM. input field for the user to enter information
● Easy for beginners and quick scripting needs. and "OK" and "Cancel" buttons.

Cons: Sample Syntax:

● May block page rendering if placed in the <head>.
● Not the best choice for larger projects or scripts var userInput = prompt("Please
that need to be reused across multiple pages. enter your name:");
 ● oncontextmenu — user right-clicks on an element
● Confirm Box: A confirm box is used to get the to open a context menu
user's confirmation for an action. It displays a ● ondblclick — The user double-clicks on an
message and typically offers "OK" and element.
"Cancel" buttons. The user's choice (OK or ● onmousedown — The user presses a mouse
Cancel) can be used to make decisions in the button over an element.
code. ● onmouseenter — The pointer moves onto an
element.
Sample Syntax: ● onmouseleave — The pointer moves out of an
element.
var userConfirmed = confirm("Do
you want to proceed?"); ● onmousemove — The pointer is moving while it is
if (userConfirmed) { over an element.
alert("You chose to ● onmouseover — when the pointer is moved onto
proceed."); an element or one of its children
} else { ● onmouseout — The user moves the mouse
alert("You chose to pointer out of an element or one of its children.
cancel.");
● onmouseup — The user releases a mouse button
}
while over an element.
TABLE TAGS
<table> - Defines a table Sample Code:
<th> - Defines a header cell in a table
<tr> - Defines a row in a table
<html>
<td> - Defines a cell in a table
<head>
<caption> - Defines a table caption
<title> Event Handler </title>
</head>
EX.
<body>
<table>
<h1 align=center
<tr>
<th>Company</th> onmouseover=”document.bgColor=’Gr
<th>Contact</th> een’”
<th>Country</th> onmouseout=”document.bgColor=’Yel
</tr> low’”>
<tr> Change the Background Color
<td>Alfreds Futterkiste</td> </h1>
<td>Maria Anders</td> </body>
<td>Germany</td> </html>
</tr>
<tr>
<td>Centro comercial Moctezuma</td> The provided HTML code is a simple webpage that uses
<td>Francisco Chang</td> inline event handlers to change the background color of an
<td>Mexico</td> `<h1>` (header) element when the mouse pointer
</tr> interacts with it. However, there is a minor issue with the
</table>
attribute values, which should use double quotes `"`
JAVASCRIPT EVENTS instead of curved quotation marks `”`.
JavaScript events are actions or occurrences that happen
Here's a breakdown of the code:
in the browser, typically as a result of user interactions or
system events. JavaScript allows you to respond to these 1. `<html>` and `<head>`: These are standard HTML
events by defining functions that will execute when the elements. The `<head>` section typically contains
event occurs. Events can include user actions like clicking a metadata and the page title, which is set using the `<title>`
button, hovering over an element, typing on the keyboard, element.
and more.
2. `<title>`: This element sets the title of the webpage,
which will be displayed in the browser's title bar or tab.
JavaScript Mouse Events
● onclick — The event occurs when the user clicks 3. `<body>`: This element represents the content of the
on an element. webpage.
4. `<h1 align="center" Let's break down each part of this general form:
onmouseover="document.bgColor='Green'"
onmouseout="document.bgColor='Yellow'">`: This is the ● function: This is the JavaScript keyword used to
most important part of the code: declare a function.

- `<h1>`: This is an HTML header element, creating a ● functionName: This is the name of the function.
large and bold heading text. You choose a descriptive name that reflects what
the function does. Function names must follow
- `align="center"`: This attribute is used to horizontally variable naming rules in JavaScript, such as no
center-align the text within the `<h1>` element. spaces, starting with a letter, and using camelCase
or underscores for multi-word names.
- `onmouseover="document.bgColor='Green'"`: This is
an inline event handler that specifies what should happen ● parameters (optional): These are placeholders for
when the mouse pointer is moved over the `<h1>` values that the function expects as input.
element. It sets the background color of the entire Parameters are enclosed in parentheses and
document to green using the `document.bgColor` separated by commas if there are multiple
property. The `document.bgColor` property allows you to parameters. For example,
change the background color of the entire webpage. functionName(parameter1, parameter2).

- `onmouseout="document.bgColor='Yellow'"`: This is ● Function Code: This is the block of code that

another inline event handler, but it is triggered when the defines what the function does. It can be a
mouse pointer moves away from the `<h1>` element. It sequence of statements, calculations, or any
sets the background color of the entire document back to JavaScript code. It is enclosed within curly braces
yellow. {}.

5. Text inside the `<h1>` element: This is the content of the ● return statement (optional): If the function should
heading. In this case, it reads "Change the Background produce a result or return a value, you can use the
Color." return statement. This statement is followed by
the value or expression you want to return. If the
So, when you view this webpage in a browser, the heading function doesn't return a value, you can omit the
text "Change the Background Color" is centered on the return statement.
page. When you move the mouse pointer over it, the
background color of the entire page changes to green. Here's an example of a simple JavaScript function that
When you move the mouse pointer away from the text, adds two numbers and returns the result:
the background color changes back to yellow. The effect is
achieved by using the `onmouseover` and `onmouseout` function addNumbers(a, b) {
event handlers to modify the `document.bgColor` var sum = a + b;
property of the document. return sum;
}
JAVASCRIPT FUNCTIONS
JavaScript functions are blocks of reusable code that can In this example:
be executed to perform a specific task. Functions are a
fundamental concept in JavaScript and other programming ● addNumbers is the function name.
languages. They help you organize your code into smaller, ● a and b are parameters.
manageable pieces and promote code reusability. ● var sum = a + b; is the function code that
calculates the sum of a and b.
A JavaScript function is defined using the function keyword ● return sum; is the return statement that returns
and can take parameters (inputs) and return a value the result.
(output). Functions can be called (invoked) whenever you
need to execute the code they contain. You can call this function with values, like addNumbers(5,
3), to perform the addition and get the result.
The general form of a JavaScript function is as follows:
function functionName(parameters) { JavaScript functions can be more complex and perform
// Function code or logic here various tasks, and they are a fundamental building block
// ... for organizing and reusing code in JavaScript applications.
return result; // Optional
}
 4. <body>: This element represents the content of the
webpage.

Example: 5. <p align="center">: This is a paragraph element that is

center-aligned.
<html> 6. <span> elements: Inside the center-aligned paragraph,
<head> there are three <span> elements with different text
<title> JavaScript Functions </title> labels ("Orange," "Red," and "Green"). These labels
<script type=”text/JavaScript”> are clickable and will trigger the JavaScript functions to
function BgToOrange(){
change the background color.
document.bgColor = “orange”;}
function BgToRed(){ ● onclick="BgToOrange()": When you click
document.bgColor = “red”;} the "Orange" text, it calls the
function BgToGreen(){ BgToOrange() function, which changes the
document.bgColor = “green”;} background color to orange.
</script> ● onclick="BgToRed()": Clicking "Red"
</head> triggers the BgToRed() function, changing
<body> the background color to red.
<p align = “center”> ● onclick="BgToGreen()": Clicking "Green"
<span onclick = “BgToOrange()”> Orange invokes the BgToGreen() function,
</span> | changing the background color to green.
<span onclick = “BgToRed()”> Red
</span> | When you view this webpage in a browser and click on any
<span onclick = “BgToGreen()”> Green
of the color options, the background color of the entire
</span>
</p> page will change to the selected color. This example
</body> demonstrates how JavaScript functions can be used to
</html> create interactive elements on a webpage, allowing users
to trigger actions in response to their interactions.
The provided HTML code demonstrates a simple webpage JAVASCRIPT VARIABLES
that uses JavaScript functions to change the background
Variables in JavaScript are used to store data, and their
color of the page when you click on different color
options. values can change or vary. To declare a variable, you use
the var keyword followed by the variable name. This
Here's a breakdown of the code: should be identified with unique names. These unique
names are called identifiers.
1. <html>, <head>, and <title>: These are standard HTML
elements. The <head> section typically contains
Example: var month;
metadata, and the <title> element sets the title of the
webpage, which is displayed in the browser's title bar
or tab. Rules for Naming Identifiers
● Identifiers can contain letters, numbers,
2. <script type="text/JavaScript">: This is where the underscores, and dollar signs.
JavaScript code is embedded. The type attribute ● Identifiers must begin with a letter, $ or _.
specifies that the content is JavaScript. ● Identifiers are case-sensitive.
● Reserved words cannot be used as identifiers.
3. JavaScript Functions: Inside the <script> element,
there are three JavaScript functions defined. These
functions are used to change the background color of Data Types
the page when called. Variables can contain different types of values and data
Here are the functions: types. You use = to assign them:
● BgToOrange(): Sets the background color to ● Numbers — var age = 23
orange. ● Variables — var x
● BgToRed(): Sets the background color to red.
● Text (strings) — var a = "init"
● BgToGreen(): Sets the background color to
green. ● Operations — var b = 1 + 2 + 3
These functions use the document.bgColor property to ● True or false statements — var c = true
change the background color of the entire webpage. ● Constant numbers — const PI = 3.14
 ● Objects — var name = {firstName:"John",
lastName:"Doe"} 7. String Operators: Used for string manipulation.
● + (string concatenation)
Array
8. Typeof Operator: Used to determine the type of a
An array is a special variable that can hold more
value.
than one data of the same type.
● type of variable
General Form: JAVASCRIPT CONDITIONAL STATEMENTS
var name = [“Data 1”, “Data 2”, JavaScript conditional statements are programming
“Data 3”, …]
constructs that allow you to make decisions in your
JAVASCRIPT OPERATORS code based on specified conditions. These statements
Operators in JavaScript are symbols or keywords that allow enable your code to take different actions or follow
you to perform operations on variables and values. There different paths depending on whether a condition is
are several types of operators in JavaScript: true or false. Conditional statements are a
fundamental part of JavaScript and programming in
1. Arithmetic Operators: Used for basic general.
mathematical operations.
● + (addition) Different Types of JavaScript Conditional Statements
● - (subtraction)
● * (multiplication) 1. If Statement: The if statement is the most basic
● / (division) form of a conditional statement. It executes a
● % (modulo, returns the remainder) block of code only if a specified condition is true. If
● ** (exponentiation) the condition is false, the code block is skipped.
2. Assignment Operators: Used to assign values to Syntax:
variables.
● = (assignment) if (condition) {
● += (addition assignment) // Code to execute if the condition
● -= (subtraction assignment) is true
● *= (multiplication assignment) }
● /= (division assignment)

3. Comparison Operators: Used to compare values Example:

and return a Boolean result.
● == (equal to) var age = prompt("Enter your age:");
● != (not equal to) if (age >= 18) {
alert("You are eligible to vote.");
● === (strict equal to, checks value and type)
}
● !== (strict not equal to)
● < (less than) Explanation:
● > (greater than)
● <= (less than or equal to) ● This code prompts the user to
● >= (greater than or equal to) enter their age using the prompt
function.
4. Logical Operators: Used for logical operations. ● It then uses an if statement to
● && (logical AND) check if the age is greater than
● || (logical OR) or equal to 18.
● ! (logical NOT) ● If the condition is true, it
displays an "eligible to vote"
5. Increment/Decrement Operators: Used to alert.
increase or decrease the value of a variable.
● ++ (increment)
● -- (decrement)
2. If-Else Statement: The if-else statement allows you
6. Ternary (Conditional) Operator: A shorthand way to execute one block of code if a condition is true
of writing conditional statements. and another block if the condition is false.
● condition ? expression1 : expression2
Syntax:
var fruit = prompt("Enter a fruit
if (condition) { (apple, banana, or orange):");
// Code to execute if the condition var message;
is true
} else { if (fruit === "apple") {
// Code to execute if the condition message = "You selected an apple.";
is false } else if (fruit === "banana") {
} message = "You selected a banana.";
} else if (fruit === "orange") {
message = "You selected an
Example: orange.";
} else {
var response = confirm("Are you sure message = "Invalid fruit.";
you want to delete this item?"); }
if (response) {
alert("Item deleted."); alert(message);
} else {
alert("Item not deleted."); Explanation:
}
● This code uses a prompt to ask
the user to enter a fruit.
Explanation: ● It then uses an if-else if-else
statement to check the user's
● This code uses a confirm dialog input and assigns an appropriate
to ask the user if they want to message to the message variable.
delete an item. ● Finally, it displays the message
● It then uses an if-else statement using an alert.
to check the user's response
(true for "OK" and false for
"Cancel").
● If the response is true, it 4. Switch Statement: The switch statement is used to
displays an "Item deleted" alert; select one of many code blocks to be executed. It
otherwise, it shows an "Item not is often used when you have multiple possible
deleted" alert. values for a variable and want to perform different
actions based on the value.

3. If-Else if-Else Statement: The if-else if-else Syntax:

statement is used when you have multiple
conditions to test. It allows you to test a series of switch (variable) {
conditions and execute different code blocks case value1:
based on the first condition that is true. // Code to execute if variable
equals value1
Syntax: break;
case value2:
if (condition1) { // Code to execute if variable
// Code to execute if condition1 is equals value2
true break;
} else if (condition2) { default:
// Code to execute if condition2 is // Code to execute if no case
true matches
} else { }
// Code to execute if no conditions
are true
} Example:

var userChoice = prompt("Choose a

fruit: apple, banana, or orange");
var message;

Example: switch (userChoice) {

 case "apple": that their visibility is limited to the block,
message = "You selected an statement, or expression where they are
apple."; defined. Block scope is introduced with
break; the use of curly braces {}.
case "banana":
message = "You selected a
Hoisting:
banana.";
break;
case "orange": var: Variables declared with var are
message = "You selected an hoisted to the top of their scope. This
orange."; means that you can use a variable before
break; it's declared in the code, but its value will
default: be undefined until the actual declaration
message = "Invalid choice."; is reached.
}
let and const: Variables declared with let
alert(message); and const are also hoisted, but unlike var,
they are not initialized until the
interpreter reaches the declaration. This is
Explanation:
known as the "temporal dead zone," and
if you try to access the variable before its
● The prompt dialog asks the user
to choose a fruit by entering declaration, you will get a ReferenceError.
"apple," "banana," or "orange."
● The switch statement evaluates Reassignment and Mutability:
the value entered by the user
(userChoice) and enters the var: Variables declared with var can be
corresponding case block. redeclared and reassigned.
● Depending on the user's choice,
the message variable is assigned let: Variables declared with let can be
a specific message, and an alert reassigned, but not redeclared in the
popup box displays the message. same scope.
○ If the user enters "apple,"
it will display "You const: Variables declared with const
selected an apple." cannot be reassigned after their initial
○ If the user enters "banana," assignment. They are constant. However,
it will display "You keep in mind that for objects and arrays
selected a banana." declared with const, while the reference
○ If the user enters "orange," cannot be changed, the content of the
it will display "You object or array can be modified.
selected an orange."
○ If the user enters any other
value, the default case will
execute, displaying "Invalid
choice."
JAVASCRIPT VARIABLES
In JavaScript, let, var, and const are used to declare
variables, but they have some key differences in terms of
scope, hoisting, and mutability:

Scope:
var: Variables declared with var are
function-scoped, meaning they are only
visible within the function where they are
declared. If declared outside any function, HTML Structure:
they are globally scoped.
Head Section:
let and const: Variables declared with let
and const are block-scoped. This means
 ● The head section contains the title tag that sets } else if (user>=12 && user<=16){
the title of the HTML page to "Variables and alert("Junior High School");
Operators." } else if (user>=17 && user<=18){
alert("Senior High School");
}else{
Script Section (Inside Head): alert("Invalid");
● JavaScript code is embedded in the head section. }
● An array month is declared to store month names. }

Body Section: </script>

● The body section contains a paragraph with the </head>
<body onload="age()">
text "Attendance."
</body>
</html>
Script Section (Inside Body):
● JavaScript code prompts the user for the name of TOPICS TO FOCUS ON
the student and the number of days present for Written Examination:
each of the three months. 1. HTML Table Tags and Attributes:
● The Days function is then called with the input - Understand the purpose and usage of HTML table
values as arguments. tags.
- Familiarize yourself with common attributes for
JavaScript Function Days: designing tables.
2. HTML Form Tags and Attributes:
Parameters: - Comprehend the role of HTML form tags in web
development.
● The function Days takes three parameters (a, b,
- Learn essential attributes for creating effective
and c), representing the number of days present
forms.
for each month. 3. Introduction to JavaScript:
- Explore key terms related to JavaScript.
Calculation: - Briefly understand the historical context of
● The variables m1, m2, and m3 are treated as JavaScript.
global variables, and their values are used in the 4. JavaScript Events and Functions:
document.writeln statements within the function. - Grasp the concept of events in JavaScript.
● The total number of days (td) is calculated by - Understand the role and creation of functions in
converting each input to an integer and summing JavaScript.
them up. 5. JavaScript Popup Boxes:
● parseInt is used to convert the values retrieved - Learn to create alert, confirm, and prompt boxes
from the input fields (representing the number of using JavaScript.
6. JavaScript Variables:
days present for each month) into integers.
- Understand the concept of variables in JavaScript.
- Practice declaring variables in different contexts.
Output: 7. JavaScript Operators:
● The function outputs the student's name in - Familiarize yourself with basic JavaScript
uppercase, the total number of days present, and operators and their usage.
the number of days present for each month using 8. JavaScript Conditional Statements:
document.writeln. - Master the creation of conditional statements for
decision-making in JavaScript.
User Interaction:
● The user is prompted to enter the student's name
and the number of days present for each of the
three months.
CONDITIONAL STATEMENT AND LOGICAL
OPERATORS
<!DOCTYPE html>
<html>
<head>
<script>
function age(){
var user=prompt("enter your age");

if (user>=6 && user<=11){

alert("Grade School");