JavaScript Syntax - Part 1

Md Touhidul Islam

Development Environment

Code Editor

Visual Studio Code (Recommended)
Recommended Extensions for VS Code:
- Live Server
- HTML CSS Support
- Prettier
- JavaScript Code Snippets

Browser Developer Tools

💡 Pro Tip:
Press F12 or Ctrl+Shift+I (Windows) / Cmd+Option+I (Mac) to open browser developer tools and access the Console tab!

Open the Broswer Console and Try:

console.log("Hello!");
console.log("I am learning JavaScript")

Why Do We Need JavaScript?

HTML/CSS

Define the content and layout

Structure
Styling
Static content

JavaScript

Handle changes and updates

Interactivity
Dynamic content
User events

JavaScript Code Locations

Four Ways to Add JavaScript: All examples below do the same thing - they display "Hello from JavaScript!"

1. Inside <head> Tag

<!DOCTYPE html>
<html>
<head>
    <script>
        function showMessage() {
            document.getElementById('demo').innerHTML = 'Hello from JavaScript!';
        }
    </script>
</head>
<body>
    <h1 id="demo">Original Text</h1>
    <button onclick="showMessage()">Click Me</button>
</body>
</html>

2. Inside <body> Tag

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1 id="demo">Original Text</h1>
    <button onclick="showMessage()">Click Me</button>
    
    <script>
        function showMessage() {
            document.getElementById('demo').innerHTML = 'Hello from JavaScript!';
        }
    </script>
</body>
</html>

3. External File (Recommended!)

HTML file:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1 id="demo">Original Text</h1>
    <button onclick="showMessage()">Click Me</button>
    
    <script src="script.js"></script>
</body>
</html>

script.js file:

function showMessage() {
    document.getElementById('demo').innerHTML = 'Hello from JavaScript!';
}

4. Inline JavaScript (Avoid!)

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <h1 id="demo">Original Text</h1>
    <button onclick="document.getElementById('demo').innerHTML = 'Hello from JavaScript!'">Click Me</button>
</body>
</html>

JavaScript Statements

Statement Terminators

Semicolon ; - Explicit terminator
New line - Implicit terminator
You can use either, but be consistent in teamwork!

EXPERIMENT: Both Styles Work

// With semicolons (more common)
console.log("First statement");
console.log("Second statement");
console.log("Third statement");

// Multiple statements on one line (needs semicolons)
let x = 5; let y = 10; console.log(x + y);

// Without semicolons (JavaScript adds them automatically)
console.log("Fourth statement")
console.log("Fifth statement")

Output:

JavaScript Comments

Single Line

// comment

Multi Line

/* comment */

TRY IT: Practice Comments

// This is a single line comment
console.log("This will run");

// console.log("This won't run - it's commented out!");

/*
This is a multi-line comment
You can write multiple lines
None of this will execute
*/

console.log("Back to running code");

/* You can also use multi-line comments inline */ console.log("Inline comment");

// TODO: Try commenting and uncommenting different lines!
console.log("Experiment with comments!");

Output:

JavaScript Variables

Declaring Variables

Use var keyword (older style)
Use let keyword (modern, recommended)
Use const for constants
No need to declare data type!

⚠️ Variable Naming Rules:

Case sensitive: myVar ≠ myvar
Can contain: letters, numbers, $, _
Cannot start with numbers
Cannot use keywords (like if, for, etc.)

PLAYGROUND: Create Your Variables

// Try creating your own variables!
var numberOfStudents = 30;
let studentName = "Sam";
const COURSE_NAME = "IST 411"; // Constants use UPPER_CASE

console.log("Students:", numberOfStudents);
console.log("Name:", studentName);
console.log("Course:", COURSE_NAME);

// Variables can change (except const)
numberOfStudents = 35;
studentName = "Alex";
console.log("Updated students:", numberOfStudents);
console.log("Updated name:", studentName);

// Try adding your own variables below:

Output:

JavaScript Data Types

Basic Data Types

number - integers and floats (3.14, 42)
string - text ("hello", 'world')
boolean - true/false
undefined - not assigned
object - complex data

💡 Use typeof: The typeof operator tells you the data type of any variable!

EXPLORE: Data Types & typeof

// Numbers
let age = 25;
let price = 19.99;
console.log("age:", age, "| type:", typeof age);
console.log("price:", price, "| type:", typeof price);

// Strings
let name = "JavaScript";
let quote = 'Learn by doing!';
console.log("name:", name, "| type:", typeof name);

// Boolean
let isStudent = true;
let hasGraduated = false;
console.log("isStudent:", isStudent, "| type:", typeof isStudent);

// Undefined
let futureVariable;
console.log("futureVariable:", futureVariable, "| type:", typeof futureVariable);

// Try creating variables with different types!

Output:

Data Type Conversion

To Number

Number()
parseInt()

To String

String()
.toString()

To Boolean

Boolean()

EXPERIMENT: Convert Data Types

// String to Number
let strNum = "99";
let num1 = Number(strNum);
let num2 = parseInt("100");
console.log("String to Number:", num1, num2);

// Number to String
let number = 42;
let str1 = String(number);
let str2 = number.toString();
console.log("Number to String:", str1, str2);

// To Boolean
let bool1 = Boolean("true");  // true
let bool2 = Boolean("");      // false
let bool3 = Boolean(0);       // false
let bool4 = Boolean(1);       // true
console.log("Booleans:", bool1, bool2, bool3, bool4);

// Try your own conversions!

Output:

JavaScript Operators

Operator Types

Arithmetic: + - * / % ++ --
Comparison: > >= < <=
Equality: === (strict) vs == (loose)
Logical: && (AND) || (OR) ! (NOT)

⚠️ Always use === and !== instead of == and !=
Strict equality checks both value AND type!

CALCULATOR: Test Operators

// Arithmetic
console.log("5 + 3 =", 5 + 3);
console.log("5 - 3 =", 5 - 3);
console.log("5 * 3 =", 5 * 3);
console.log("5 / 2 =", 5 / 2);
console.log("5 % 2 =", 5 % 2);  // remainder

// Comparison
console.log("5 > 3:", 5 > 3);
console.log("5 < 3:", 5 < 3);

// Equality: === vs ==
console.log("1 === '1':", 1 === "1");  // false (different types)
console.log("1 == '1':", 1 == "1");    // true (converts types)

// Logical
console.log("true && false:", true && false);  // AND
console.log("true || false:", true || false);  // OR
console.log("!true:", !true);                   // NOT

// Try your own calculations!

Output:

JavaScript Control Flow

Conditional Statements

if, else if, else
switch statement

Looping Statements

while loop
for loop
break and continue

PRACTICE: Conditions & Loops

// IF statements
let score = 85;
if (score >= 90) {
    console.log("Grade: A");
} else if (score >= 80) {
    console.log("Grade: B");
} else {
    console.log("Grade: C");
}

// FOR loop
console.log("\nCounting 1 to 5:");
for (let i = 1; i <= 5; i++) {
    console.log(i);
}

// WHILE loop
console.log("\nCountdown from 3:");
let count = 3;
while (count > 0) {
    console.log(count);
    count--;
}

// Try changing the score or loop values!
// Add your own if/else or loops:

Output:

JavaScript Functions

Function Syntax


                    function functionName(param1, param2) {

                      // code here

                      return result;

                    }

Use function keyword to define
Can accept parameters (inputs)
Use return to send back results
Functions are reusable blocks of code

BUILD: Create Functions

// Basic function
function greet(name) {
    return "Hello, " + name + "!";
}

console.log(greet("Student"));
console.log(greet("JavaScript Learner"));

// Function with math
function addNumbers(a, b) {
    return a + b;
}

console.log("5 + 3 =", addNumbers(5, 3));
console.log("10 + 20 =", addNumbers(10, 20));

// Function with multiple statements
function calculateArea(width, height) {
    let area = width * height;
    console.log("Calculating area...");
    return area;
}

console.log("Area:", calculateArea(5, 10));

// Create your own functions below!

Output:

🎉 Congratulations!
You've completed JavaScript Syntax - Part 1! Keep experimenting with the code examples and build your own variations. The best way to learn is by doing!

Practice Problem 1: Variables & Math

🎯 Your Challenge:
Create a simple calculator that stores two numbers in variables, performs arithmetic operations, and displays the results.

Instructions:

Create two variables: num1 and num2 with any numbers you like
Calculate and display their sum, difference, product, and division
Use console.log() to show each result with a label

💡 Example Output:
Sum: 15
Difference: 5
Product: 50
Division: 2

YOUR CODE: Complete the Calculator

Output:

Practice Problem 2: Age Checker

🎯 Your Challenge:
Write a program that checks someone's age and displays an appropriate message.

Instructions:

Create a variable called age with any number
Use if, else if, and else statements
Display different messages based on age:
- Under 13: "You're a kid!"
- 13-17: "You're a teenager!"
- 18-64: "You're an adult!"
- 65 and above: "You're a senior!"

💡 Hint: Use comparison operators like <, >=, etc.

YOUR CODE: Build the Age Checker

Output:

Practice Problem 3: Build Your Own Function

🎯 Your Challenge:
Create a function that takes a name and an age, then returns a personalized greeting message.

Instructions:

Create a function called createGreeting
It should accept two parameters: name and age
Return a message like: "Hello, Alice! You are 25 years old."
Test your function with at least 2 different names and ages

💡 Remember: Use the return keyword to send back your message, and use + to combine strings!

YOUR CODE: Create the Greeting Function

Output: