Review on Basic
JavaScript Syntax
variable and variable declaration
var let
• Function-scoped. • Block-scoped.
• Can be re-declared and • Cannot be re-declared within
updated. the same scope but can be
• Example: updated.
var x = 10; • Example:
let y = 20;
y = 30; // This is valid
variable and variable declaration
const
• Block-scoped.
• Cannot be re-declared or updated after its initial
assignment.
• Example:
const z = 40;
// z = 50; // This would cause an error
Variable
declaratio
n
Input / Output Mechanism
User Input via prompt()
• The prompt() function displays a dialog box that prompts the user for input. It
returns the input as a string.
Form Inputs in HTML
• JavaScript can interact with HTML form elements to get user input. This is more
common in web development.
Output Mechanisms
console.log()
• The console.log() method is used to print outputs to the browser's console. This is often used for
debugging.
alert()
• The alert() function displays an alert box with a specified message and an OK button.
document.write()
• The document.write() method writes text directly to the HTML document. It’s typically used for testing
and not recommended for modern web development because it can overwrite the entire document.
Modifying HTML Content
• JavaScript can modify HTML content dynamically using methods like innerHTML, textContent, or value.
Control Structures
• Conditional Statements
– If
• The if statement is used to execute a block of code only if a specified condition is true.
– if...else
• The if...else statement adds an alternative block of code to be executed if the else ifcondition is
false.
• The else if statement allows you to test multiple conditions in sequence.
– switch
• The switch statement is used to perform different actions based on different conditions. It’s an
alternative to using multiple if...else if statements when comparing a single expression to different
values.
Control Structures
• Loops
– for
• The for loop is used to repeat a block of code a specified number of times.
– while
• The while loop executes a block of code as long as the specified condition is true.
– do...while
• The do...while loop is similar to the while loop, but it executes the block of code once before
checking the condition.
Creating Arrays
• Using Array Literals
– The most common way to create an array is by using square brackets [].
Creating Arrays
• Using the Array Constructor
– You can also create an array using the Array constructor, though this is less common.
Accessing Array Elements
• Array elements are accessed by their index, which starts at 0.
Modifying Arrays
• Changing Elements
– You can modify an element by accessing it through its index.
Modifying Arrays
• Adding Elements
– You can add elements to an array by assigning a value to a new index or using methods
like push().
Modifying Arrays
• Removing Elements
– You can remove elements using methods like pop(), shift(), or splice().
Exercises (30 mins)
(5points) (5points)
1. Create a JavaScript program using 2. Given the array let fruits = ['apple', 'banana',
loops that produces the following output: 'cherry', 'date'];, write the code to:
– Add the string 'elderberry' to the end of the array.
– Remove the first element of the array.
– Print the modified array.
Activity 1 (30 pts)
• Title: Create a Simple Calculator Using HTML, JavaScript, and Switch Case
• Objective:
– Build a simple calculator application using HTML for the user interface and JavaScript for
the logic. The calculator should allow users to perform basic arithmetic operations:
addition, subtraction, multiplication, and division.
• HTML Structure:
– Create an HTML page with a text box where users can see the result or input values.
– Add buttons for digits 0-9, decimal point ., and basic arithmetic operations (+, -, *, /).
– Include buttons for = to perform the calculation and C to clear the input.
