WEB DEVELOPMENT – SCRIPTING NOTES
1. SCRIPTING
Scripting refers to writing small programs (scripts) that are interpreted rather than compiled.
Scripting languages are commonly used to make web pages dynamic, interactive, and functional.
1.1 Functions of Scripting Languages
Scripting languages perform the following functions:
Make web pages interactive (user input, validation, animations)
Handle form processing
Control website behavior without reloading pages
Communicate with databases
Automate repetitive tasks
Enhance user experience
1.2 Types of Scripting Languages
Scripting languages are grouped into two main categories:
(a) Client-Side Scripting Languages
Executed on the user’s browser
Improve responsiveness and interaction
Example: JavaScript
(b) Server-Side Scripting Languages
Executed on the server
Handle data processing, authentication, and database operations
Examples: PHP, Python, [Link]
2. JAVA SCRIPTING (JavaScript)
JavaScript is a client-side scripting language used to create dynamic and interactive web pages.
2.1 JavaScript Statements
Statements are instructions that tell the browser what action to perform.
Examples:
1. In the browser console
[Link]("Hello World");
Open your browser → Right-click → Inspect → Console to see the output.
2. On a web page
<!DOCTYPE html>
<html>
<body>
<script>
[Link]("Hello World");
</script>
</body>
</html>
3. Using an alert box
alert("Hello World");
2.2 JavaScript Variables
Variables are used to store data values.
Types of variable declarations:
var (old method)
let (block scoped)
const (constant values)
Examples:
Basic example
let message = "Hello World";
[Link](message);
Using multiple variables
let word1 = "Hello";
let word2 = "World";
let message = word1 + " " + word2;
[Link](message);
On a web page
<script>
let message = "Hello World";
[Link](message);
</script>
Using const (recommended if value won’t change)
const message = "Hello World";
[Link](message);
2.3 JavaScript Operators
Operators are symbols used to perform operations.
Types of operators:
Arithmetic operators (+, -, *, /)
Assignment operators (=, +=, -=)
Comparison operators (==, ===, !=, >)
Logical operators (&&, ||, !)
examples
1. Arithmetic Operators
Used for mathematical calculations.
let a = 10;
let b = 5;
[Link](a + b); // Addition → 15
[Link](a - b); // Subtraction → 5
alert(a * b); // Multiplication → 50
[Link](a / b); // Division → 2
[Link](a % b); // Modulus (remainder) → 0
[Link](a ** b); // Exponentiation → 100000
2. Assignment Operators
Used to assign values.
let x = 10;
x += 5; // x = x + 5
x -= 2; // x = x - 2
x *= 3; // x = x * 3
x /= 2; // x = x / 2
3. Comparison Operators
Used to compare values (returns true or false).
let a = 10;
let b = "10";
[Link](a == b); // true (value only)
[Link](a === b); // false (value + type)
[Link](a != b); // false
[Link](a !== b); // true
[Link](a > 5); // true
[Link](a <= 10); // true
4. Logical Operators
Used to combine conditions.
let age = 20;
[Link](age > 18 && age < 30); // AND → true
[Link](age > 18 || age < 15); // OR → true
[Link](!(age > 18)); // NOT → false
5. String Operators
Used with strings.
let firstName = "Hello";
let lastName = "World";
let result = firstName + " " + lastName;
[Link](result); // Hello World
2.4 JavaScript Data Types
JavaScript supports different data types:
String
Number
Boolean
Null
Undefined
Object
Array
Example:
a. Primitive Data Types
1. Number
Used for integers and decimals.
let age = 25;
let price = 99.99;
2. String
Used for text (inside quotes).
let name = "John";
let message = 'Hello World';
3. Boolean
Represents true or false.
let isLoggedIn = true;
let hasAccess = false;
4. Undefined
A variable declared but not assigned a value.
let x;
[Link](x); // undefined
5. Null
Represents “no value” intentionally.
let data = null;
6. BigInt
Used for very large numbers.
let bigNumber = 12345678901234567890n;
b. Non-Primitive (Reference) Data Types
1. Object
Stores key-value pairs.
let person = {
name: "Alice",
age: 30
};
2. Array
Stores multiple values.
let colors = ["red", "green", "blue"];
3. Function
A block of reusable code.
function greet() {
return "Hello!";
}
3. typeof Operator
Used to check the data type.
[Link](typeof 10); // number
[Link](typeof "Hello"); // string
[Link](typeof true); // boolean
[Link](typeof undefined); // undefined
[Link](typeof null); // object (JS quirk)
[Link](typeof {}); // object
[Link](typeof []); // object
[Link](typeof function(){}); // function
Summary Table
Data Type Example
Number 10, 3.14
String "Hello"
Boolean true
Undefined let x;
Null null
BigInt 123n
Symbol Symbol()
Object {}
Array []
Function function(){}
QUIZ!!!What is the difference between null and undefined data type?
2.5 JavaScript Functions
Functions are blocks of code that perform a specific task.
Example:
function greet() {
alert("Hello Students");
}
Greet();
2.6 JavaScript Objects
Objects store multiple values in one variable.
Example:
let student = {
name: "John",
age: 21,
course: "ICT"
};
alert([Link] + ' ' + [Link] + ' ' + [Link]);
2.7 JavaScript Events
An event is an action that happens in the browser, such as:
Clicking a button
Moving the mouse
Typing on the keyboard
Loading a page
JavaScript can respond to these actions.
Common JavaScript Events
Event Description
onclick When an element is clicked
onload When page finishes loading
onchange When input value changes
onmouseover When mouse is over an element
onmouseout When mouse leaves an element
onkeydown When a key is pressed
onsubmit When a form is submitted
1. Click Event (onclick)
HTML + JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Click Event Example</title>
</head>
<body>
<button onclick="sayHello()">Click Me</button>
<script>
function sayHello() {
alert("Hello!");
}
</script>
</body>
</html>
Notes:
1. The <button> has an onclick attribute that calls the function sayHello().
2. The sayHello function is defined in the <script> tag.
3. When clicked, a popup alert will show "Hello!".
2. Event Using addEventListener (Best Practice)
<button id="btn">Click Me</button>
<script>
[Link]("btn").addEventListener("click", function() {
alert("Button clicked!");
});
</script>
3. Mouse Events
<p id="text">Hover over me</p>
<script>
let text = [Link]("text");
[Link]("mouseover", () => {
[Link] = "red";
});
[Link]("mouseout", () => {
[Link] = "black";
});
</script>
4. Keyboard Event
<input type="text" onkeydown="keyPress()">
<script>
function keyPress() {
[Link]("Key pressed");
}
</script>
5. Form Submit Event
<form onsubmit="return validate()">
<input type="text" id="name">
<button type="submit">Submit</button>
</form>
<script>
function validate() {
alert("Form submitted");
return false; // prevents page reload
}
</script>
6. Event Object
The event object gives details about the event.
[Link]("click", function(event) {
[Link]([Link]);
});
Summary
Events respond to user actions
addEventListener is preferred
Events make pages interactive
You can handle mouse, keyboard, form, and many other events
2.10 JavaScript Arrays
Arrays store multiple values in one variable.
Example:n
let subjects = ["Maths", "English", "ICT"];
alert(subjects[0]);
3. PHP (Hypertext Preprocessor)
PHP is a server-side scripting language mainly used for web development.
3.1 Importance of PHP
Creates dynamic web pages
Handles form data
Connects to databases
Manages sessions and cookies
Supports user authentication
3.2 PHP Syntax
PHP code is written inside <?php ?> tags.
Example:
<?php
echo "Hello PHP";
?>
3.3 PHP Variables
Variables start with a $ sign.
Example:
<?php
$name = "Erick";
$age = 25;
?>
3.4 PHP Data Types
Common PHP data types include:
String
Integer
Float
Boolean
Array
Object
NULL
3.5 PHP Operators
Types of operators:
Arithmetic operators (+, -, *, /)
Assignment operators (=)
Comparison operators (==, !=, >, <)
Logical operators (AND, OR)
3.6 PHP Control Structures
Control structures control the flow of execution.
Examples:
if statement
if...else
switch
while loop
for loop
Example:
<?php
if ($age >= 18) {
echo "Adult";
} else {
echo "Minor";
}
?>
3.7 PHP Functions
Functions are reusable blocks of code.
Example:
<?php
function greet() {
echo "Welcome Student";
}
?>
3.8 PHP Arrays
Arrays store multiple values.
Types:
Indexed arrays
Associative arrays
Example:
<?php
$courses = array("ICT", "Business", "Engineering");
?>
3.9 PHP Forms
PHP is commonly used to process HTML forms.
Example:
<form method="post" action="[Link]">
<input type="text" name="username">
<input type="submit" value="Send">
</form>
4. DATABASE CREATION
A database is a structured collection of data.
Common databases:
MySQL
MariaDB
PostgreSQL
Example of database creation:
CREATE DATABASE school;
5. DATABASE LINKAGE
Database linkage refers to connecting a web application to a database.
Example: PHP Database Connection
<?php
$conn = mysqli_connect("localhost", "root", "", "school");
if (!$conn) {
die("Connection failed");
}
?>
REVISION QUESTIONS
Section A: Scripting
1. Define scripting and explain its role in web development.
2. State four functions of scripting languages.
3. Differentiate between client-side and server-side scripting languages.
4. Give two examples of client-side scripting languages and two server-side scripting
languages.
Section B: JavaScript
5. What is JavaScript? State three uses of JavaScript in web development.
6. Explain the difference between var, let, and const in JavaScript.
7. List and explain four types of JavaScript operators.
8. Identify five JavaScript data types and give an example of each.
9. What is a JavaScript function? Write a simple function that displays a message.
10. Explain what JavaScript events are and give three examples.
11. Distinguish between JavaScript arrays and objects.
Section C: PHP
12. Define PHP and state four reasons why PHP is important in web development.
13. Describe the basic syntax rules of PHP.
14. Explain PHP variables and state the rules for naming them.
15. List and explain five PHP data types.
16. What are control structures? Name four PHP control structures.
17. Explain the difference between indexed arrays and associative arrays in PHP.
18. Describe how PHP is used to process HTML forms.
Section D: Databases
19. What is a database?
20. State three advantages of using databases in web applications.
21. Explain the meaning of database linkage.
22. Write a PHP code snippet used to connect to a MySQL database.
ASSIGNMENTS
Assignment 1: JavaScript Basics
Create an HTML page that:
Displays a welcome message using JavaScript
Uses variables to store a student name and marks
Calculates and displays the total marks using JavaScript operators
Assignment 2: JavaScript Events and Arrays
Develop a web page that:
Contains a button that displays an alert when clicked
Uses a JavaScript array to store at least five course names
Displays the courses on the webpage
Assignment 3: PHP Basics
Create a PHP script that:
Declares variables for name, course, and age
Uses an if...else statement to check if the user is eligible for admission
Displays the result on the browser
Assignment 4: PHP Forms
Design an HTML form that collects:
Student name
Admission number
Course
Process the form using PHP and display the submitted details.
Assignment 5: Database Creation and Linkage
Create a database named college
Create a table called students
Write a PHP script to connect to the database
Insert at least three student records into the table
Retrieve and display the records in a table format on a webpage