INTRODUCTION TO JAVASCRIPT

LESSON NO. 1
OBJECTIVES:

• 1. Define JavaScript and its role in web

development.
• 2. Explain the history and evolution of
JavaScript, including its impact on modern
web applications and trends.
• 3. Practice creating simple JavaScript code.
 WHAT IS JAVASCRIPT?
1.JavaScript is a scripting language.
A scripting language is like a set of instructions that tells a
computer or a web page what to do. Think of it like a recipe
that tells a chef how to cook a dish step by step.
• In web pages, JavaScript is the “recipe” that makes things
move, pop up, or respond when you click a button.
For example:
If you click a button, JavaScript can make a box appear on the
screen.
WHAT IS JAVASCRIPT?
2. JavaScript is a programming language.
A programming language is a tool used to create programs,
or a set of instructions for a computer to follow.
• JavaScript is a programming language because it can do
more than just control websites—it can calculate, make
decisions, and even control robots or games!
 WHAT IS JAVASCRIPT?
3. JavaScript is an object-oriented language.
An object-oriented language is like playing with LEGO
blocks. You can create “blocks” (called objects) that each have
their own properties and actions.
• For example, you can create a “car” object.
• Properties: Color, speed, brand
• Actions: Drive, stop, honk
JavaScript lets you create objects to organize and control your
programs in a simple way.
WHAT IS JAVASCRIPT?
• JavaScript is a high-level, interpreted programming
language primarily used for adding interactivity and
dynamic behavior to websites. It plays a crucial role in
web development by allowing developers to create
interactive elements, respond to user actions, and
manipulate the content and appearance of web pages in
real-time. JavaScript is also being used widely in game
development and Mobile application development.
 How would you link or connect
JavaScript to the states of water, such
as solid, liquid, and gas?
JAVASCRIPT HISTORY

• JavaScript was developed by

Brendan Eich in May 1995,
which appeared in
Netscape, a popular
browser of that time.
• The language was initially called LiveScript and was later
renamed JavaScript. There are many programmers who
think that JavaScript and Java are the same.
• As time went on, web developers discovered the power of
JavaScript and started using it to make websites more exciting.
They added cool animations, made buttons do interesting things
when clicked, and created interactive games that we can play right
in our web browsers.
• Over the years, JavaScript kept growing and improving. People
came up with new ideas and made it even more powerful. They
built frameworks and libraries like jQuery, React, and Vue.js, which
made it easier to create complex web applications.
• JAVA Java is a high-level, object-oriented, and platform-
independent programming language developed by Sun
Microsystems (now owned by Oracle Corporation). It
was first released in 1995 Mainly used in early stages of
mobile development and application development.

• JAVASCRIPT is a scripting language for web development. It

is commonly used with HTML and CSS.
Questions!

1. Can you share what you found most

interesting and
2. Explain why you think the development of
JavaScript is significant in the context of the
Internet?
HOW TO RUN JAVASCRIPT?

• The main advantage of JavaScript is that all modern web

browsers support JavaScript. So, you do not have to
worry about whether your site visitor uses Internet
Explorer, Google Chrome, Firefox or any other browser.
Also, JavaScript runs on any operating system including
Windows, Linux or Mac.
REMEMBER!
REMEMBER!
• JavaScript is one of the 3 languages all web
developers must learn:
• 1. HTML to define the content of web pages.
• 2. CSS to specify the layout of web pages.
• 3. JavaScript to program the behavior of web pages.
Activity: "One-Word-Wrap-Up"

Summarize the day's learning about

JavaScript into a single word.
ASSIGNMENT # 2: (NOTEBOOK)

1.What is the purpose of embedding JavaScript code in an

HTML file using <script> tags?
2.Explain the structure of a basic JavaScript program. What
are the essential components?
3.How do you use console.log() to display output in the
browser console? Provide an example of using console.log()
to print a message to the console.
Deadline: Next meeting!
WRITING AND EXECUTING
JAVASCRIPT CODE

LESSON NO. 2
OBJECTIVES:
• 1. Understand the purpose and importance of embedding
JavaScript code in an HTML file using <script> tags.
• 2. Analyze and interpret the output generated by executing
JavaScript code and make connections to the underlying
program logic.
• 3. Demonstrate the correct syntax for embedding JavaScript
code within <script> tags.
REVIEW!

1. What is the definition of JavaScript?

REVIEW!

2. How has JavaScript evolved over time,

and what is its history?
REVIEW!

3. What are the main differences between

Java and JavaScript?
EMBEDDING JAVASCRIPT CODE IN AN HTML FILE USING
<SCRIPT> TAGS.
• You should place all your JavaScript code within <script>
tags (<script> and </script>) if you are keeping your
JavaScript code within the HTML document itself. This
helps your browser distinguish your JavaScript code from
the rest of the code.
EMBEDDING JAVASCRIPT CODE IN AN HTML FILE USING
<SCRIPT> TAGS.
 VAR
• In JavaScript, the keyword "var" is used to create a variable. A
variable is like a container that holds a value, similar to a box
that can store different things.
• When we use "var" to create a variable, we give it a name, such
as "myVariable", and assign a value to it.
• Using variables it allows to store and manipulate information in
our programs. We can perform calculations, remember data,
and make our programs more flexible by using variables.
EMBEDDING JAVASCRIPT CODE IN AN HTML FILE USING
<SCRIPT> TAGS.
 STRING
- In JavaScript, " (double quotes) are used to
define string literals, which represent text or
sequences of characters. A string is a data type
that stores textual information.
- Double quotes (") in JavaScript are one way to
enclose text or characters, allowing you to create
strings. Strings are immutable and can hold letters,
numbers, symbols, or even spaces.
 CONCATENATION
Concatenation is the process of joining two or more
strings (pieces of text) together to form a single string.
In JavaScript, this is often done using the + operator.
EMBEDDING JAVASCRIPT CODE IN AN HTML FILE USING
<SCRIPT> TAGS.
 PROMPT
The prompt() function in JavaScript is
used to display a dialog box that allows
the user to input text. It is often used for
simple user interaction or gathering data
directly from the user.
 PARSE INT
The parseInt() function in JavaScript is
used to convert a string into an integer
(whole number).
 LESSON NO. 3

UNDERSTANDING THE STRUCTURE OF A BASIC

JAVASCRIPT PROGRAM
REVIEW

• 1. In which section do we include the

tags or code for JavaScript?
REVIEW

• 2. What is a variable in JavaScript?

REVIEW

• 3. What is concatenation?
 UNDERSTANDING THE STRUCTURE OF A BASIC
JAVASCRIPT PROGRAM

•S Y N T A X
• Syntax refers to the rules and structure that define the
correct way to write code in a programming language. It
governs how individual statements and elements are
arranged to form valid and meaningful code.
 UNDERSTANDING THE STRUCTURE OF A BASIC
JAVASCRIPT PROGRAM
• Keywords - Examples of keywords in JavaScript include var,
if, else, and function.

• A keyword in programming is a special word that has a specific meaning

in a programming language. These words are like commands or
instructions that the computer understands and cannot be used for
anything else, like naming a variable.
 UNDERSTANDING THE STRUCTURE OF A BASIC
JAVASCRIPT PROGRAM
• Statements - In programming, you write statements to tell
the computer what to do. Each statement is like a command
or an instruction.

• Ex. console.log("Hello, World!");

• let x = 10;
• if (x > 5) { console.log("x is greater than 5"); }
 UNDERSTANDING THE STRUCTURE OF A BASIC
JAVASCRIPT PROGRAM
• Variables - Variables are used to store and manipulate data.
They have a name and a value.

• Ex. var score = 100;

 UNDERSTANDING THE STRUCTURE OF A BASIC
JAVASCRIPT PROGRAM
• Expressions - Expressions are combinations of values,
variables, operators, and functions that produce a result.

• Ex. 5 + 3 is an expression
 UNDERSTANDING THE STRUCTURE OF A BASIC
JAVASCRIPT PROGRAM
• Brackets and Parentheses - Brackets [ ] and parentheses ( )
are used to group code and indicate precedence.

• Ex. (5 + 3) * 2 uses parentheses to first add 5 and 3, and

then multiply the result by 2.
 IMPORTANCE OF PROPER INDENTATION AND
FORMATTING

1.Proper indentation and formatting play a crucial role

in making code readable and understandable. By
using consistent indentation, such as spaces or tabs,
you visually structure your code and make it easier
to identify blocks of code, such as loops or
conditional statements.
2.Proper formatting, including adding line breaks and
using clear variable names, helps improve code
readability and maintainability.
IMPROPER INDENTATION AND FORMATTING
PROPER INDENTATION AND FORMATTING
INDIVIDUAL ACTIVITY 1