Scribd
Upload
16 views

_Unit_4_and_Unit_5

The document provides an overview of JavaScript event handlers, including onclick, onload, onchange, and onmouseover, explaining their definitions, importance, syntax, and examples. It also covers regular expressions, exception handling, data validation techniques, and best practices for validating user input in JavaScript. Additionally, it introduces PHP as a server-side scripting language used for web development.

Uploaded by

Gavi Kiran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
16 views

_Unit_4_and_Unit_5

The document provides an overview of JavaScript event handlers, including onclick, onload, onchange, and onmouseover, explaining their definitions, importance, syntax, and examples. It also covers regular expressions, exception handling, data validation techniques, and best practices for validating user input in JavaScript. Additionally, it introduces PHP as a server-side scripting language used for web development.

Uploaded by

Gavi Kiran
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

Unit 4 and Unit 5

1.Event Handler
Event Handlers in JavaScript
Event handlers in JavaScript are methods that allow you to run JavaScript code
or functions when specific events occur on an HTML element. These events
make web pages interactive and dynamic.
Here’s a detailed explanation of the event handlers onclick , onload , onchange ,
and onmouseover (commonly referred to as onmousehover ).

1. onclick Event Handler


Definition:
The onclick event occurs when the user clicks on an element, such as a button,
link, or image.
Importance:

Used to trigger functions or execute specific actions on a button click.

Essential for user interaction in web applications.

Syntax:

<element onclick="JavaScript code">

Example:

<!DOCTYPE html>
<html>
<body>
<button onclick="alert('Button clicked!')">Click Me</bu
tton>
</body>
</html>

Output:

Unit 4 and Unit 5 1


When the user clicks the button, an alert box appears with the message "Button
clicked!".

2. onload Event Handler


Definition:
The onload event occurs when an element (typically a window or image) has
been completely loaded.
Importance:

Useful for preloading data or images, and initializing functions after the web
page is fully loaded.

Ensures all resources are loaded before running the script.

Syntax:

<element onload="JavaScript code">

Example:

<!DOCTYPE html>
<html>
<body onload="console.log('Page is loaded')">
<h1>Welcome to the Website</h1>
</body>
</html>

Output:

When the page loads, "Page is loaded" is logged to the browser console.

3. onchange Event Handler


Definition:
The onchange event occurs when the value of an input element, <select> , or
<textarea> changes and loses focus.

Importance:

Allows validation or additional processing when a user modifies input.

Unit 4 and Unit 5 2


Enhances user interaction in forms.

Syntax:

<element onchange="JavaScript code">

Example:

<!DOCTYPE html>
<html>
<body>
<label for="name">Enter your name:</label>
<input type="text" id="name" onchange="alert('You chang
ed the input!')">
</body>
</html>

Output:
When the user types something in the input box and moves away (loses focus),
an alert box appears with the message "You changed the input!".

4. onmouseover (Mouse Hover) Event Handler


Definition:
The onmouseover event occurs when the user moves the mouse pointer over an
element.

Importance:

Enables hover effects, dynamic tooltips, or highlighting elements.

Enhances user experience with interactive designs.

Syntax:

<element onmouseover="JavaScript code">

Example:

<!DOCTYPE html>
<html>

Unit 4 and Unit 5 3


<body>
<p onmouseover="this.style.color='red'">Hover over this
text to change its color.</p>
</body>
</html>

Output:

When the user hovers the mouse over the paragraph, its text color changes to
red.

2.Regular Expressions (RegExp)


Definition
Regular Expression (RegExp): An object that describes a sequence of
characters used for defining a search pattern.

Regular expressions are similar to mathematical expressions. However,


instead of numbers, they help browsers manipulate text using special
symbols as operators.

Uses of Regular Expressions


Validation: Validate form fields such as email addresses and phone
numbers.

Text Search: Perform text searches or replacements.

Pattern Matching: Match and extract specific patterns from text.

Defining Regular Expressions


Regular expressions can be defined in two ways:

1. Using the RegExp Constructor


Syntax:

var pattern1 = new RegExp(pattern, modifiers);

Example:

Unit 4 and Unit 5 4


var re1 = new RegExp("xyz", "i");

2. Using Literals
Syntax:

var pattern1 = /pattern/flags;

Example:

var re2 = /xyz/;

count the number of words in a sentence program


using the html and js
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial
<title>Word count</title>
</head>

<body>

<h1>Word count</h1>
<p>Enter the text in the box to count the words and click

<textarea id="sentence" rows="5" placeholder="Enter the se


<button onclick="countWord()">Count Me</button>
<p id="result"></p>

<script>
function countWord() {

Unit 4 and Unit 5 5


// Get the sentence input from the user
let sentence = document.getElementById("sentence"

// Split the sentence by one or more spaces


let words = sentence.trim().split(/\s+/).filter(Bo

// Count the words


let wordCount = words.length;

// Display the result


document.getElementById("result").innerText = "Wo
}
</script>

</body>

</html>

Exception Handling in JavaScript


Exception handling in JavaScript is used to handle errors gracefully without
breaking the execution flow of a program. JavaScript provides the try...catch
mechanism for error handling, allowing you to identify and manage runtime
errors.

Structure of Exception Handling

javascript
Copy code
try {
// Code that may throw an error
} catch (error) {
// Code to handle the error
} finally {
// Optional: Code that runs regardless of success or fa
ilure

Unit 4 and Unit 5 6


}

1. try block:

Contains the code that might throw an error. If an error occurs, control is
passed to the catch block.

2. catch block:
Handles the error. It takes an error object as a parameter, which contains
information about the error.

3. finally block (optional):

This block is always executed, whether an exception occurs or not. It is


useful for cleanup tasks.

4. throw statement (optional):

You can manually throw errors using throw .

Common Error Types in JavaScript


1. TypeError: Occurs when a value is not of the expected type (e.g.,
accessing a property of undefined or null ).

2. ReferenceError: Occurs when referencing an undefined variable.

3. SyntaxError: Happens due to invalid JavaScript syntax.

4. RangeError: Thrown when a value is outside the allowed range.

Program to Handle TypeError


Below is a program that demonstrates how to handle a TypeError when trying
to access a property of an undefined object.

javascript
Copy code
// Exception handling example to handle TypeError
try {
let student = undefined; // An undefined object
console.log(student.name); // Attempt to access 'name'
property (causes TypeError)

Unit 4 and Unit 5 7


} catch (error) {
if (error instanceof TypeError) {
console.error("TypeError occurred: Cannot access pr
operty of undefined.");
} else {
console.error("An unknown error occurred: ", error.
message);
}
} finally {
console.log("Execution completed.");
}

Explanation of Code:
1. try Block:

The student variable is undefined .

Accessing student.name will throw a TypeError .

2. catch Block:

The catch block captures the TypeError .

Using instanceof , the error type is checked to confirm it's a TypeError .

An appropriate message is displayed to the user.

3. finally Block:

The finally block runs regardless of whether an error occurred or not.


It is used here to log the completion of execution.

4. Output:

javascript
Copy code
TypeError occurred: Cannot access property of undefined.
Execution completed.

Manually Throwing Errors

Unit 4 and Unit 5 8


If you want to manually throw a TypeError , you can use the throw keyword:

javascript
Copy code
try {
let student = null;
if (student === null) {
throw new TypeError("Student object cannot be nul
l.");
}
} catch (error) {
console.error(error.message);
} finally {
console.log("Program execution completed.");
}

Key Takeaways:
1. Use try...catch to catch runtime errors.

2. Use instanceof to check the error type and respond appropriately.

3. The finally block is useful for clean-up operations.

4. You can manually throw errors for better control and debugging.

JavaScript Data Validation


Data validation in JavaScript ensures that user input is correct, meaningful, and
secure before it is processed or submitted. It is typically performed on client-
side (browser) before sending the data to the server, which enhances user
experience and reduces server load.
Validation is often used to:

Ensure required fields are not left empty.

Check if input follows the correct format (e.g., emails, phone numbers).

Verify numerical ranges, string lengths, etc.

Unit 4 and Unit 5 9


Improve security by preventing invalid or malicious data (e.g., SQL injection,
XSS attacks).

Types of Data Validation


1. Client-Side Validation:

Performed in the browser using JavaScript. It provides quick feedback to


the user without requiring a server request.

2. Server-Side Validation:
Performed on the server to ensure data integrity and security. This is
crucial because client-side validation can be bypassed.

Common Validation Techniques in JavaScript


1. Required Field Validation
Ensures that mandatory fields are not left empty.

2. Length Validation
Checks whether the input meets a specific character length.

3. Format Validation
Ensures input matches a specific format, such as emails, phone numbers,
or dates.

4. Range Validation

Ensures that numerical or date values fall within a specified range.

5. Regular Expressions (Regex)


Used to validate input against specific patterns.

Code Examples of Data Validation

1. Simple Required Field Validation

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>

Unit 4 and Unit 5 10


<title>Required Field Validation</title>
<script>
function validateForm() {
let name = document.getElementById("name").valu
e;
if (name === "") {
alert("Name field cannot be empty!");
return false; // Prevent form submission
}
return true;
}
</script>
</head>
<body>
<h2>Simple Form Validation</h2>
<form onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
</body>
</html>

Explanation:

Checks if the "Name" field is empty.

If empty, it alerts the user and stops form submission.

2. Email Format Validation Using Regex

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Email Validation</title>
<script>

Unit 4 and Unit 5 11


function validateEmail() {
let email = document.getElementById("email").va
lue;
let regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Em
ail regex
if (!regex.test(email)) {
alert("Invalid email format!");
return false;
}
return true;
}
</script>
</head>
<body>
<h2>Email Validation</h2>
<form onsubmit="return validateEmail()">
<label for="email">Email:</label>
<input type="text" id="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
</html>

Explanation:

Uses a regular expression to check email format.

Alerts the user if the email doesn't match the expected pattern.

3. Number Range Validation

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Range Validation</title>
<script>

Unit 4 and Unit 5 12


function validateAge() {
let age = document.getElementById("age").value;
if (isNaN(age) || age < 18 || age > 60) {
alert("Age must be a number between 18 and
60.");
return false;
}
return true;
}
</script>
</head>
<body>
<h2>Age Validation</h2>
<form onsubmit="return validateAge()">
<label for="age">Age:</label>
<input type="text" id="age" name="age">
<input type="submit" value="Submit">
</form>
</body>
</html>

Explanation:

Validates whether the input is a number and checks if it lies between 18 and
60.

Uses isNaN() to ensure that the input is a valid number.

4. Combining Multiple Validations

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multiple Validation Example</title>
<script>
function validateForm() {

Unit 4 and Unit 5 13


let username = document.getElementById("usernam
e").value;
let password = document.getElementById("passwor
d").value;

// Username validation (required and minimum le


ngth)
if (username === "" || username.length < 4) {
alert("Username must be at least 4 characte
rs long.");
return false;
}

// Password validation (required and strong for


mat)
let passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)[A-
Za-z\d]{6,}$/; // At least 6 characters, 1 letter, 1 number
if (!passwordRegex.test(password)) {
alert("Password must be at least 6 characte
rs, including letters and numbers.");
return false;
}

return true;
}
</script>
</head>
<body>
<h2>Form with Multiple Validations</h2>
<form onsubmit="return validateForm()">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><b
r><br>

<label for="password">Password:</label>
<input type="password" id="password" name="passwor
d"><br><br>

Unit 4 and Unit 5 14


<input type="submit" value="Submit">
</form>
</body>
</html>

Key Points in JavaScript Validation


1. Client-side validation provides faster feedback but can be bypassed, so
server-side validation is always necessary.

2. Use regular expressions for complex pattern matching, such as email or


password formats.

3. Use built-in functions like isNaN() to validate numerical inputs.

4. Validation ensures data consistency, security, and proper processing.

Best Practices for Validation


Always validate on both client and server sides.

Provide user-friendly messages for validation errors.

Use semantic HTML attributes like required , pattern , and min / max for basic
client-side validation.

Use libraries like jQuery or frameworks like React/Angular for complex


validation tasks.

Unit 5
Introduction to PHP
PHP (Hypertext Preprocessor) is an open-source, server-side scripting
language primarily used for web development. It is embedded in HTML and
executed on the server, making it highly efficient for dynamic web page
creation. PHP is widely used for creating dynamic websites, interactive web
applications, and backend services. It can interact with databases, handle
forms, and manage sessions effectively.

Characteristics and Features of PHP

Unit 4 and Unit 5 15


1. Open Source:
PHP is free to download, use, and modify, making it accessible to
developers worldwide.

2. Server-Side Execution:

PHP scripts are executed on the server, and the result (HTML) is sent to the
client’s browser.

3. Cross-Platform Compatibility:
PHP runs on all major operating systems (Windows, Linux, macOS) and
works with most web servers (Apache, Nginx, IIS).

4. Easy to Learn and Use:


PHP syntax is simple and easy to integrate with HTML, making it beginner-
friendly.

5. Supports Databases:

PHP supports a wide variety of databases, including MySQL, PostgreSQL,


SQLite, and more, enabling database-driven applications.

6. Dynamic and Flexible:


PHP allows developers to create dynamic content and flexible applications
with ease.

7. Integration with HTML and JavaScript:


PHP integrates seamlessly with HTML, CSS, and JavaScript, providing full-
stack web development capabilities.

8. Extensibility:
PHP supports numerous libraries, frameworks (like Laravel, CodeIgniter),
and extensions to enhance functionality.

9. Security Features:

Provides built-in tools to handle security threats such as SQL injection, XSS,
and CSRF.

10. Session and Cookie Management:


PHP enables efficient management of user sessions and cookies, essential
for user authentication.

11. Fast and Efficient:

Unit 4 and Unit 5 16


PHP code is lightweight and optimized for high performance, especially for
dynamic content generation.

Applications of PHP
1. Web Development:
PHP is primarily used to build dynamic websites and web applications.
Examples include blogs, forums, and e-commerce platforms.

2. Content Management Systems (CMS):


PHP powers popular CMS platforms such as:

WordPress

Joomla

Drupal

3. E-commerce Platforms:
PHP is used to develop e-commerce sites with platforms like Magento,
WooCommerce, and custom shopping carts.

4. Database Integration:
PHP can create data-driven applications by integrating with databases like
MySQL and SQLite.

5. Social Networking Sites:


Many social networking platforms use PHP for backend operations.
Example: Facebook (originally built in PHP).

6. Web Forms and Data Processing:


PHP handles form submissions, data validation, and processing user input
efficiently.

7. API Development:
PHP is used to build RESTful APIs that allow applications to communicate
with each other.

8. Web-Based Applications:

PHP is used to build various web-based applications like CRMs (Customer


Relationship Management) and ERP systems.

9. Email Management:

Unit 4 and Unit 5 17


PHP can be used to send and receive emails, automate newsletters, and
handle email verification.

10. Server-Side Scripting:


PHP is often used to handle server-side logic, such as authentication, file
uploads, and data encryption.

11. Dynamic Content Generation:


PHP generates dynamic HTML pages based on user inputs or database
queries.

12. Online Ticketing and Booking Systems:


PHP is widely used for systems like airline reservations, hotel bookings, and
event management.

2.how different ways of including php


page- 4 ways
TYPES OF INCLUDE MECHANISMS
There are four types of functions available to achieve include mechanisms.

1. include():
The include() function takes all the text in a specified file and copies it into the
file that uses the include function. If there is any problem in loading a file, then
the include() function generates a warning but the script will continue
execution.

Example:
Create a file menu.php with the following content:

<a href="http://www.tutorialspoint.com/index.htm">Home</a>
<a href="http://www.tutorialspoint.com/ebxml">ebXML</a>
<a href="http://www.tutorialspoint.com/ajax">AJAX</a>
<a href="http://www.tutorialspoint.com/perl">PERL</a> <br /
>

Unit 4 and Unit 5 18


Now create as many pages as you like and include this file to create a header.
For example, now your test.php file can have the following content:

<html>
<body>
<?php include("menu.php"); ?>
<p>This is an example to show how to include PHP file!
</p>
</body>
</html>

Output:
The content of menu.php will be included in the test.php file.

2. require():
The require() function takes all the text in a specified file and copies it into the
file that uses the include function. If there is any problem in loading a file, then
the require() function generates a fatal error and halts the execution of the
script.
So, there is no difference between require() and include() except how they
handle error conditions. It is recommended to use the require() function
instead of include() , because scripts should not continue executing if files are
missing or misnamed.

Example:
You can try using the above example with the require() function, and it will
generate the same result. But if you try the following two examples where the
file does not exist, you will get different results.

1. Using include :

html
Copy code
<html>
<body>
<?php include("xxmenu.php"); ?>
<p>This is an example to show how to include wrong PHP

Unit 4 and Unit 5 19


file!</p>
</body>
</html>

Output:

It will produce the result:


This is an example to show how to include wrong PHP file!

1. Using require :

html
Copy code
<html>
<body>
<?php require("xxmenu.php"); ?>
<p>This is an example to show how to include wrong PHP
file!</p>
</body>
</html>

Output:
This time, file execution halts, and nothing is displayed.

3. include_once() :
Ensures that the specified file is included only once during the execution of
the script, even if included multiple times.

Generates a warning if the file is missing but continues execution.

Example:
File: x.php

<?php
echo "GEEKSFORGEEKS";
?>

Unit 4 and Unit 5 20


Using include_once :

<?php
include_once('header.inc.php');
include_once('header.inc.php');
?>

Output:

GEEKSFORGEEKS

4. require_once():
Similar to require , but ensures the file is included only once.

Generates a fatal error if the file is missing, halting execution.

Using require_once :

<?php
require_once('header.inc.php');
require_once('header.inc.php');
?>

Output:
GEEKSFORGEEKS

3.PHP provides us with four conditional


statements:
1. if statement

2. if…else statement

3. if…elseif…else statement

4. switch statement

1. if Statement:
The if statement is used to execute a block of code only if the specified
condition evaluates to true. This is the simplest PHP conditional statement and

Unit 4 and Unit 5 21


can be written like:

Syntax:

php
Copy code
if (condition)
{
// if TRUE then execute this code
}

Example:

php
Copy code
<?php
$x = 12;
if ($x > 0)
{
echo "The number is positive";
}
?>

Output:
The number is positive

2. if…else Statement:
You can enhance the decision-making process by providing an alternative
choice through adding an else statement to the if statement. The if...else
statement allows you to execute one block of code if the specified condition
evaluates to true and another block of code if it evaluates to false.

Syntax:

Unit 4 and Unit 5 22


php
Copy code
if (condition)
{
// if TRUE then execute this code
}
else
{
// if FALSE then execute this code
}

Example:

php
Copy code
<?php
$x = -12;
if ($x > 0)
echo "The number is positive";
else
echo "The number is negative";
?>

Output:
The number is negative

3. if…elseif…else Statement:
The is a special statement that is used to combine multiple
if...elseif...else

if...else statements. We use this when there are multiple conditions of TRUE
cases.

Syntax:

Unit 4 and Unit 5 23


php
Copy code
if (condition)
{
// if TRUE then execute this code
}
elseif (condition)
{
// if TRUE then execute this code
}
elseif (condition)
{
// if TRUE then execute this code
}
else
{
// if FALSE then execute this code
}

Example:

php
Copy code
<?php
$x = "August";

if ($x == "January")
{
echo "Happy Republic Day";
}
elseif ($x == "August")
{
echo "Happy Independence Day!!!";
}
else
{

Unit 4 and Unit 5 24


echo "Nothing to show";
}
?>

Output:
Happy Independence Day!!!

4. switch Statement:
The switch statement performs in various cases i.e., it has various cases to
which it matches the condition and appropriately executes a particular case
block. It first evaluates an expression and then compares it with the values of
each case. If a case matches, then the same case is executed. To use switch ,
we need to get familiar with two different keywords:

break: Used to stop the automatic control flow into the next cases and exit
from the switch case.

default: Contains the code that would execute if none of the cases match.

Syntax:

php
Copy code
switch(expression)
{
case value1:
// code to be executed if n == value1
break;
case value2:
// code to be executed if n == value2
break;
case value3:
// code to be executed if n == value3
break;
......
default:
// code to be executed if n != any case

Unit 4 and Unit 5 25


}

Example:

php
Copy code
<?php
$n = "February";

switch($n)
{
case "January":
echo "Its January";
break;
case "February":
echo "Its February";
break;
case "March":
echo "Its March";
break;
case "April":
echo "Its April";
break;
case "May":
echo "Its May";
break;
default:
echo "Doesn't exist";
}
?>

Output:
Its February

4. Php looping statements

Unit 4 and Unit 5 26


LOOPS
Loops are used to execute the same block of code again and again, until a
certain condition is met.
The basic idea behind a loop is to automate repetitive tasks within a program to
save time and effort.
PHP supports four different types of loops:

1. for loop

2. while loop

3. do-while loop

4. foreach loop

1. for loop
This type of loop is used when the user knows in advance how many times the
block needs to execute.
These types of loops are also known as entry-controlled loops.

Parameters:

1. Initialization

2. Test Condition

3. Update Expression

Syntax:

php
Copy code
for (initialization expression; test condition; update expr
ession)
{
// code to be executed
}

Explanation:In a for loop, a loop variable is used to control the loop.

1. Initialize this loop variable to some value.

Unit 4 and Unit 5 27


2. Check whether this variable is less than or greater than the counter
value.

3. If the condition is true , execute the loop body, then update the loop
variable.

4. Repeat the steps until the exit condition is met.

Example:

php
Copy code
<?php
for ($num = 1; $num <= 10; $num += 2)
{
echo "$num \n";
}
?>

Output:

Copy code
1
3
5
7
9

Flow diagram

Unit 4 and Unit 5 28


2. while loop
The while loop is also an entry-controlled loop, meaning it checks the
condition at the start of the loop.
If the condition is true , it enters the loop and executes the block of statements
repeatedly as long as the condition holds true .

Syntax:

php
Copy code
while (condition)
{
// code to be executed
}

Example:

Unit 4 and Unit 5 29


php
Copy code
<?php
$num = 2;
while ($num < 12)
{
$num += 2;
echo $num, "\n";
}
?>

Output:

Copy code
4
6
8
10
12

Unit 4 and Unit 5 30


3. do-while loop
The do-while loop is an exit-controlled loop, meaning it first executes the block
of code and then checks the condition.
This ensures that the statements are executed at least once, even if the
condition is false .
Syntax:

php
Copy code
do
{
// code to be executed
} while (condition);

Example:

php
Copy code
<?php
$num = 2;
do {
$num += 2;
echo $num, "\n";
} while ($num < 12);
?>

Output:

Copy code
4
6
8
10
12

Unit 4 and Unit 5 31


4. foreach loop
The foreach statement is used to loop through arrays.
For each iteration, the value of the current array element is assigned to $value ,
and the array pointer moves to the next element.
Syntax:

php
Copy code
foreach (array as $value)
{
// code to be executed
}

Example 1: (Numerical Array)

php
Copy code
<?php
$arr = array (10, 20, 30, 40, 50, 60);
foreach ($arr as $value)

Unit 4 and Unit 5 32


{
echo "$value \n";
}
?>

Output:

Copy code
10
20
30
40
50
60

Example 2: (String Array)

php
Copy code
<?php
$arr = array ("Ram", "Laxman", "Sita");
foreach ($arr as $value)
{
echo "$value \n";
}
?>

Output:

Copy code
Ram
Laxman
Sita

Unit 4 and Unit 5 33


Summary Table of Loops
Loop Type Control Type When to Use

When the number of iterations is known in


for loop Entry-Controlled
advance.

while loop Entry-Controlled When the condition is checked at the start.

do-while loop Exit-Controlled When the block should execute at least once.

Iterative
foreach loop To iterate through array elements.
(Arrays)

Unit 4 and Unit 5 34

You might also like