WS101 JavaScript Basics
Uploaded by
Eghert MijaresWS101 JavaScript Basics
Uploaded by
Eghert MijaresWS101
WEB SYSTEMS AND TECHNOLOGIES 1
INTRODUCTION TO JAVASCRIPT AND INTERACTIVITY
Example:
What is JavaScript?
When you click a button and
JavaScript (JS) is a programming something happens (like showing a
language that allows websites to be
interactive, dynamic, and responsive. message or changing color) that’s
It works directly in the browser, JavaScript in action.
without needing any special
installation.
In short:
● HTML → builds the structure
● CSS → styles the appearance
● JavaScript → adds behavior and
actions
● It allows real-time interaction with
users.
● Makes static pages come alive
through animations and responses.
● Used in all modern websites and
web applications.
Why JavaScript ● Powers forms, menus, sliders, and
games.
is Important ● Supported by all major browsers
(Chrome, Firefox, Safari, Edge).
Without JavaScript, websites can only
display content — they cannot react to
what users do.
You can place it:
Where to Place JavaScript ● Inside the <head> or <body> tag,
or In an external file with .js
JavaScript code is written inside the extension (e.g., [Link])
<script> tag in an HTML document.
<script src="[Link]"></script>
Example:
<script>
alert("Hello, JavaScript!"); Best practice: put your <script> at the
</script> bottom of <body> so the page loads
first before the script runs.
Basic JavaScript Example:
// This is a comment
Syntax let name = "Eghert";
[Link]("Hello, " + name);
JavaScript syntax refers to the rules
for writing code correctly. Think of syntax as the “grammar” of
JavaScript.
Example:
JavaScript Variables
let score = 95;
Variables are used to store data or [Link]("Your score is " +
values that can change.
score);
Declared using:
A variable is like a labeled box that
let name = "John"; holds data.
let age = 20;
const country = "Philippines";
JavaScript Data Types
Example:
let student = { name: "Anna", age: 18,
passed: true };
Data types help JavaScript know how to
process the information.
Functions - A function is a reusable block of code that performs a specific task.
Structure: Example: To use (or “call”) it:
function functionName() { function greet() { <button >
Me</button>
// code to execute alert("Welcome to my
website!");
}
}
Functions save time by letting you reuse code easily.
JavaScript Events
Events are actions that happen in the browser (like clicking or moving the mouse).
JavaScript can listen to these events and respond with actions.
Event Description
onclick When the user clicks an element
onmouseover When the user moves the mouse over an element
onmouseout When the mouse leaves an element
onchange When input value changes
onload When the page finishes loading
Example: Notes: Events are the bridge between user actions and JavaScript reactions.
<button clicked!')">Click Me</button>
Changing Text, Color, or Image
Example 1 – Change Text Example 2 – Change Color Example 3 – Change Image
<p id="demo">Hello!</p> <p id="para">This is a paragraph.</p> <img id="pic" src="[Link]">
<script> <script> <script>
[Link]("demo" [Link]("para").styl [Link]("pic").src
).innerHTML = "Welcome, [Link] = "blue"; = "[Link]";
student!";
</script> </script>
</script>
JavaScript can manipulate HTML elements using the DOM (Document Object Model).
Example: Click to Change Color
When you click the button, JavaScript changes the style of the text instantly!
<p id="text">Click the button to change my color!</p>
<button Color</button>
<script>
function changeColor() {
[Link]("text").[Link] = "red";
</script>
Using Conditions (if–else)
Conditions allow JavaScript to make decisions.
Syntax: Example:
if (condition) { <script>
let age = 18;
// run this if true
if (age >= 18) {
} else {
alert("You are allowed to vote.");
// run this if false } else {
} alert("You are too young to vote.");
Note: JavaScript uses logic to choose between }
actions — like an “if this, then that” rule. </script>
Nested and Multiple Conditions
You can combine conditions using else if:
Useful for scoring systems, access let grade = 85;
control, or menu choices. if (grade >= 90) {
alert("Excellent!");
} else if (grade >= 75) {
alert("Passed!");
} else {
alert("Failed!");
}
Loops (Repeating Actions)
A loop repeats code multiple times automatically.
1. for Loop 2. while Loop
for (let i = 1; i <= 5; i++) { let count = 1;
[Link]("Number: " + i + "<br>"); while (count <= 3) {
} [Link]("Count is " + count);
count++;
Loops are used for counting, repeating animations, or generating lists.
Example: Counting with a Loop
Loops reduce repetition in code and automate repetitive tasks.
<script> This will display:
for (let i = 1; i <= 5; i++) { Hello 1
[Link]("Hello " + i + "<br>"); Hello 2
} Hello 3
</script> Hello 4
Hello 5
Summary
● JavaScript makes web pages interactive and dynamic.
● Variables store data, functions perform tasks, and events trigger actions.
● You can display output using alert(), [Link](), or [Link]().
● It can change content, styles, and images instantly.
● Conditions and loops let JavaScript think and repeat like logic.
Thank you!
Do you have any questions? If you have just message our respective Group chat.
