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
[Link]()
• The [Link]() 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.
[Link]()
• The [Link]() 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.