Lecture 7 – Conditional Statements, Loops, Functions & Introduction to jQuery

Lecture 7 – Conditional Statements, Loops, Functions & Introduction to jQuery

Introduction

In the previous lecture, we learned:

  • Control Structures
  • Loop Structures
  • Data Types
  • Arrays
  • Operators
  • Functions

In this lecture, we will continue with practical programming concepts and begin learning jQuery.

Topics covered:

  1. Nested If Statements
  2. Switch Case Statement
  3. Types of Loops
  4. Associative Arrays
  5. Traversing Arrays
  6. Functions and Methods
  7. Function Declaration, Definition and Call
  8. Inline Functions
  9. Introduction to jQuery
  10. jQuery Selectors
  11. jQuery Effects
  12. jQuery DOM Functions
  13. Document Ready Function

1. Nested If Statement

A Nested If means an If statement inside another If statement.

It is used when multiple conditions need to be checked.

Example

if(age >= 18)
{
    if(country == "Pakistan")
    {
        alert("You are eligible");
    }
}

Flow

Check Age
     |
     Yes
     |
Check Country
     |
     Yes
     |
Eligible

Why Use Nested If?

Nested If is useful when:

  • Multiple conditions exist
  • Decisions depend on previous decisions
  • Complex validations are required

2. Switch Case Statement

Switch Case is used when one variable can have multiple possible values.

Instead of writing many If-Else statements, we use Switch.

Syntax

switch(variable)
{
    case value1:
        statement;
        break;

    case value2:
        statement;
        break;

    default:
        statement;
}

Example

switch(country)
{
    case "Pakistan":
        alert("You are welcome");
        break;

    case "Israel":
        alert("Illegal Country");
        break;

    default:
        alert("Country Not Found");
}

Benefits

  • Cleaner code
  • Easy to read
  • Better performance for multiple options

3. Types of Loops

Loops are used to repeat code.

The three most common loops are:

  • For Loop
  • While Loop
  • Do While Loop

For Loop

Used when the number of repetitions is known.

Syntax

for(start; condition; increment)
{
    statements;
}

Example

for(i=1; i<=5; i++)
{
    document.write(i);
}

Output

1
2
3
4
5

While Loop

Runs while a condition remains true.

Syntax

while(condition)
{
    statements;
}

Example

var i = 1;

while(i <= 5)
{
    document.write(i);

    i++;
}

Do While Loop

Runs at least one time before checking the condition.

Syntax

do
{
    statements;
}
while(condition);

Example

var i = 1;

do
{
    document.write(i);

    i++;

}
while(i <= 5);

Loop Comparison

LoopCondition Check
ForBefore execution
WhileBefore execution
Do WhileAfter execution

4. Associative Arrays

In PHP, associative arrays store data using keys.

Instead of numbers, meaningful names are used.

Normal Array

$student = array(
    "Ali",
    "Ahmed",
    "Usman"
);

Access:

$student[0]

Associative Array

$student = array(
    "name" => "Ali",
    "age" => 27,
    "city" => "Lahore"
);

Access:

$student["name"]

Benefits

  • Easy to understand
  • Better organization
  • Real-world data representation

Multi-Dimensional Arrays

Arrays can contain other arrays.

Example

$student = array();

$student[0][0] = "Ali";
$student[0][1] = 27;

$student[1][0] = "Ahmed";
$student[1][1] = 25;

Representation

Ali      27

Ahmed    25

5. Traversing Arrays

Traversing means accessing every item inside an array.

Example

var student = [
    "Ali",
    "Ahmed",
    "Usman"
];

Length Function

.length

Returns total number of items.

Example

student.length

Result:

3

Display Length

document.write(student.length);

6. Functions and Methods

Functions perform specific tasks.

Function

A block of reusable code.

Example

function welcome()
{
    alert("Welcome");
}

Method

A function that belongs to an object.

Examples

alert()

document.write()

student.length

Built-In Functions

Programming languages provide many ready-made functions.

Examples:

alert()

document.write()

parseInt()

parseFloat()

jQuery Built-In Functions

jQuery is full of ready-made functions.

Examples:

.hide()

.show()

.click()

.fadeIn()

.fadeOut()

These functions help us build interactive websites quickly.

7. Function Signature

A Function Signature generally consists of:

Function Name
+
Parameter List

Example

abc(int a, int b)

Function Name:

abc

Parameters:

a
b

Function Declaration

Tells the compiler that a function exists.

Example:

int abc(int a, int b);

Function Definition

Actual code of the function.

Example

function abc(a,b)
{
    var c;

    c = a + b;

    return c;
}

Function Call

Executing a function.

Example:

abc(10,20);

Function Life Cycle

Declaration

↓

Definition

↓

Call

Inline Functions

An inline function performs declaration, definition and call together.

Everything is written in a compact format.

Example:

var total = function(a,b)
{
    return a+b;
};

8. Introduction to jQuery

jQuery is a JavaScript library.

It contains thousands of ready-made functions.

Why Use jQuery?

jQuery helps us:

  • Write less code
  • Work faster
  • Handle animations
  • Manipulate HTML
  • Handle events easily

Traditional JavaScript

document.getElementById("box");

jQuery

$("#box");

Much shorter and easier.

9. jQuery Selectors

Selectors are used to target HTML elements.

By ID

$("#header")

Targets:

<div id="header"></div>

By Class

$(".box")

Targets:

<div class="box"></div>

By Tag

$("p")

Targets:

<p>Hello</p>

10. Document Ready Function

The most important jQuery function.

It ensures the webpage loads before jQuery starts working.

Syntax

$(document).ready(function()
{

});

Shortcut Syntax

$(function()
{

});

11. jQuery Effects

jQuery provides built-in animation functions.

Hide

$("#box").hide();

Hides an element.

Show

$("#box").show();

Displays an element.

Click

$("#btn").click();

Handles click events.

Fade In

$("#box").fadeIn();

Gradually shows an element.

Fade Out

$("#box").fadeOut();

Gradually hides an element.

Slide Up

$("#box").slideUp();

Slides element upward.

Slide Down

$("#box").slideDown();

Slides element downward.

Slide Toggle

$("#box").slideToggle();

Switches between Slide Up and Slide Down.

12. jQuery DOM Functions

These functions work with HTML content.

.html()

Gets or changes HTML.

$("#content").html();

.append()

Adds content at the end.

$("#content").append("New Data");

.prepend()

Adds content at the beginning.

$("#content").prepend("New Data");

13. DOM Traversing Functions

Used to move through webpage elements.

.children()

Gets child elements.

$("#menu").children();

.parent()

Gets parent element.

$("#menu").parent();

.next()

Gets next sibling.

$("#box").next();

.prev()

Gets previous sibling.

$("#box").prev();

.siblings()

Gets all sibling elements.

$("#box").siblings();

$(this)

Represents the current element.

Example

$(this).hide();

If a button is clicked, only that button will be affected.

.css()

Used to get or change CSS properties.

Example

$("#box").css("color","red");

Multiple Properties

$("#box").css({
    color:"red",
    background:"yellow"
});

Summary

In this lecture, we learned:

  • Nested If Statements
  • Switch Case
  • For Loop
  • While Loop
  • Do While Loop
  • Associative Arrays
  • Multi-Dimensional Arrays
  • Array Traversing
  • Functions and Methods
  • Function Declaration, Definition and Call
  • Inline Functions
  • Introduction to jQuery
  • jQuery Selectors
  • Document Ready Function
  • jQuery Effects
  • DOM Manipulation Functions
  • DOM Traversing Functions
  • $(this)
  • .css()

In the next lecture, we will build practical jQuery examples and learn how jQuery interacts with forms, menus, images, and webpage content.