JAVASRIPT and PHP (Hypertext Preprocessor)

IT for Engineers
Sanjivani Rural Education Society’s
Sanjivani College of Engineering, Kopargaon-423603
(An Autonomous Institute Affiliated to Savitribai Phule Pune University, Pune)
NAAC ‘A’ Grade Accredited, ISO 9001:2015 Certified
Department of Information Technology
(NBA Accredited)
Mr. N. L. Shelake
Assistant Professor

Web Design
Course Contents: -
JavaScript Mr. N. L. Shelake Department of Information Technology

JavaScript
JavaScript is a High Level, versatile and widely used
programming language primarily for web development.
It is a client-side scripting language, executed by web
browsers, making web pages interactive.
JavaScript can also be used for server-side development
with technologies like Node.js.

JavaScript
Its ability to add interactivity and dynamic behavior to
websites
It is one of the core technologies used for web
development, alongside HTML (Hypertext Markup
Language) and CSS (Cascading Style Sheets).

History of JavaScript
JavaScript was created by Brendan Eich in 1995
Netscape Communications Corporation
Initially named "Mocha" and then "LiveScript," it was eventually
renamed JavaScript as part of a partnership with Sun
Microsystems (now Oracle)
It is not related to JAVA
Mainly designed for client-side scripting in web browsers
JavaScript

The first public release of JavaScript was in Netscape Navigator
2.0 in 1995
It allowed developers to add interactive elements and dynamic
behavior to web pages, making the web more engaging for users.
JavaScript's adoption was accelerated by the "Browser Wars" of
the late 1990s and early 2000s, primarily between Netscape
Navigator and Microsoft's Internet Explorer
Implemented their own versions of JavaScript
JavaScript

To address these issues and create a standardized specification for
JavaScript, the ECMA established and ECMAScript standard in
1997.
ECMAScript defines the core features of JavaScript.
The first standardized version was ECMAScript 1
European Computer Manufacturers Association. The organization
was founded in 1961 to standardize computer systems in Europe.
JavaScript

What is JavaScript?
JavaScript is a high-level, interpreted scripting language primarily
used for adding interactivity and behavior to web pages.
It allows developers to create dynamic content, manipulate the
Document Object Model (DOM), and interact with users.
JavaScript

Why JavaScript?
The primary language for web development
JavaScript is supported by all major web browsers (Cross-
Browser Compatibility)
JavaScript is a versatile language that can be used for both front-
end and back-end development
has led to the creation of numerous libraries, frameworks, and
tools that simplify and accelerate web development. like React,
Angular etc (Community)
JavaScript

Why JavaScript?
JavaScript's support for asynchronous programming, building
responsive and non-blocking applications.
 A large pool of JavaScript developers available in the job market,
As compare to other programming language
JavaScript is based on open web standards, making it accessible
and transparent. ECMA
JavaScript can easily integrate with other web technologies like
HTML and CSS, making it an integral part of the web
development stack
JavaScript

Sample Program
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id=“hellodemo">JavaScript can change HTML content.</p>
<script>
document.getElementById(“hellodemo").innerHTML = "Hello";
</script>
</body>
</html>
JavaScript

How do you declare variables in JavaScript?
Variables can be declared using var, let, or const followed by the
variable name. For example
var x = 15;
let x = 5;
const x = 5;
JavaScript

What is the difference between let, const, and var
for variable declaration?
var has function-level scope and can be redeclared within the
same function.
let and const have block-level scope and cannot be redeclared
within the same block.
const is used for variables that should not be reassigned.
JavaScript

Basic Syntax
Variables: Declare variables using var, let, or const.
var has function-level scope.
let and const have block-level scope.
const is used for constants..

Basic Syntax
Data types: JavaScript has dynamic types.
 Primitive types: Number, String, Boolean, Undefined,
Null.
 Reference types: Object, Array, Function.

Basic Syntax
Operators: Arithmetic, Comparison, Logical, Assignment,
Ternary.
Conditionals: if, else if, else, switch.
Loops: for, while, do...while, for...in, for...of.

Basic Syntax
Operators:
 Arithmetic - + / * % ++ --
 Assignment =, +=,-=,*=,/=
 Comparison ==,!=, >, <, >=, <=,
 Logical &&, ||, !

Basic Syntax
if (condition)
{
}
if (condition)
{
}
else
{
}
if (condition)
{
}
elseif
{
}
Else
{
}
If if else elseif

Basic Syntax
Switch switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}

Basic Syntax

<script> let day;
switch (new Date().getDay()) {
case 0: day = "Sunday"; break;
case 1: day = "Monday"; break;
case 2: day = "Tuesday"; break;
case 3: day = "Wednesday"; break;
case 4: day = "Thursday"; break;
case 5: day = "Friday"; break;
case 6: day = "Saturday";
}
document.getElementById(“sample").innerHTML = "Today is " + day;
</script>

Basic Syntax

<html>
<body>
<h1>Sample JavaScript Program</h1>
<p id=“sample"></p>
<script>
document.getElementById(“sample").innerHTML = "My First JavaScript";
</script>
</body>
</html>

Basic Syntax

<html>
<body>
<p id="demo"></p>
<script>
let x, y, z;
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
“addition is " + z + ".";
</script>
</body>
</html>

Basic Syntax

<html><body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++)
{
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body> </html>

Basic Syntax

Output:
JavaScript For Loop
The number is 0
The number is 1
The number is 2
The number is 3
The number is 4

Basic Syntax

<html>
<body>
<h1>Sample JavaScript Program</h1>
<p id="sample">Hi! JavaScript </p>
<button type="button"
onclick='document.getElementById("sample").innerHTML = "Hello
JavaScript!"'>Click Here</button>
</body> </html>

Basic Syntax

Output:
Sample JavaScript Program
Hi! JavaScript
Click Here

Embedding with JavaScript
 Embedding JavaScript refers to the practice of including
JavaScript code within an HTML document.
 This can be done in several ways to add interactivity,
dynamic behavior, or functionality to a webpage.

Embedding with JavaScript
 Inline Script: You can embed JavaScript directly within
an HTML file using a <script> tag.
 External Script: For larger JavaScript code or when you
want to reuse the same code across multiple pages, it's
common to place the code in an external JavaScript file
with a .js extension. You then reference this file in your
HTML using the <script> tag's src attribute.

Validation
 Form validation used to usually take place at the server,
following client submission of all required data with a
click of the Submit button.
 The server would have to send all the data back to the
client and ask that the form be resubmitted with accurate
information if the data entered by the client was missing
or inaccurate.
 This was a very time-consuming procedure that used to
strain the server greatly.

Validation
 JavaScript provides a way to validate form's data on the
client's computer before sending it to the web server. Form
validation generally performs two functions.

Validation
 Basic Validation − First of all, the form must be checked
to make sure all the mandatory fields are filled in. It
would require just a loop through each field in the form
and check for data.
 Data Format Validation − Secondly, the data that is
entered must be checked for correct form and value. Your
code must include appropriate logic to test correctness of
data.

Sample Demonstration
JavaScript program that calculates the area of a circle. Accept user
input radius, perform the calculation and display the result.
<html>
<head>
<title>Circle Area Calculator</title>
</head>
<body>
<h1>Circle Area Calculator</h1>
<label for="radius">Enter the radius of the circle:</label>
<input type="number" id="radius" placeholder="Enter radius">
<button onclick="calculateArea()">Calculate Area</button>
<p id="result"></p>

Sample Demonstration
<script>
function calculateArea()
{
const radius = parseFloat(document.getElementById('radius').value);
if (isNaN(radius) || radius <= 0)
{
document.getElementById('result').textContent = "Please enter a valid positive number for
the radius.";
return;
}
const area = Math.PI * Math.pow(radius, 2);
document.getElementById('result').textContent = `The area of the circle with radius $
{radius} is ${area.toFixed(2)}.`;
}
</script></body></html>

PHP
 The term PHP is an acronym for PHP: Hypertext
Preprocessor.
 PHP is a server-side scripting language designed
specifically for web development.
 It is open-source which means it is free to download and
use. It is very simple to learn and use.
 The files have the extension “.php”.
Web Design Mr. N. L. Shelake Department of Information Technology

PHP
 Rasmus Lerdorf inspired the first version of PHP and
participated in the later versions.
 It is an interpreted language and it does not require a
compiler.
 PHP code is executed in the server.
 It can be integrated with many databases such as Oracle,
Microsoft SQL Server, MySQL, PostgreSQL, Sybase, and
Informix.

PHP
 It is powerful to hold a content management system like
WordPress and can be used to control user access.
 It supports main protocols like HTTP Basic, HTTP Digest,
IMAP, FTP, and others.
 Websites like www.facebook.com and www.yahoo.com
are also built on PHP

PHP
 One of the main reasons behind this is that PHP can be
easily embedded in HTML files and HTML codes can also
be written in a PHP file.
 The thing that differentiates PHP from the client-side
language like HTML is, that PHP codes are executed on
the server whereas HTML codes are directly rendered on
the browser.
 PHP codes are first executed on the server and then the
result is returned to the browser

PHP
 Simple and fast
 Efficient
 Secured
 Flexible
 Cross-platform, it works with major operating systems
like Windows, Linux, and macOS.
 Open Source
 Powerful Library Support
 Database Connectivity

Syntax
<?php
PHP code goes here
?>

PHP Mr. N. L. Shelake Department of Information Technology
Syntax
<html>
<head>
<title>PHP Example</title>
</head>
<body>
<?php echo "Hello, World! This is PHP
code";?>
</body></html>
Output:-
Hello, World! This is PHP code

PHP Variables
 Variables are "containers" for storing information
 A variable can have a short name (like x and y) or a more
descriptive name (age, carname, total_volume).
 PHP variable names are case-sensitive!

PHP Variables
Rules for PHP variables:
 A variable starts with the $ sign, followed by the name of the
variable
 A variable name must start with a letter or the underscore
character
 A variable name cannot start with a number
 A variable name can only contain alpha-numeric characters
and underscores (A-z, 0-9, and _ )
 Variable names are case-sensitive ($age and $AGE are two
different variables)

PHP Example
<html> <body>
<?php
$txt = "Hello world!";
$x = 5;
$y = 10.5;
echo $txt;
echo "<br>";
echo $x;
echo "<br>";
echo $y;
?> </body> </html>
Hello world!
5
10.5

PHP Example
<html>
<body>
<?php
$temp = "HelloWorld";
echo "PHP First Program $temp!";
?>
</body>
</html>
PHP First Program HelloWorld!

PHP Example
<html>
<body>
<?php
$x = 5;
$y = 4;
echo "Addition is".($x + $y);
?>
</body>
</html>
Addition is 9

PHP Datatypes
PHP supports several data types that are used to represent
different kinds of values. Here are some of the commonly used
data types in PHP
 Integers: Example: $number = 42;
 Floats (Floating-point numbers): $floatNumber = 3.14;
 Strings: $text = "Hello, PHP!";
 Booleans: $isTrue = true;
 Arrays: $fruits = array("apple", "orange", "banana");
 NULL: $variable = NULL;
 Constants: define("PI", 3.14);

Operator and Expression
Same as, discussed in JavaScript
Arithmetic Operators:
 Addition (+): $sum = 5 + 3; // $sum is now 8
 Subtraction (-): $difference = 7 - 4; // $difference is now 3
 Multiplication (*): $product = 2 * 6; // $product is now 12
 Division (/): $quotient = 10 / 2; // $quotient is now 5
 Modulus (%): $remainder = 11 % 3; // $remainder is now 2

Assignment Operators:
 Assignment (=): $variable = 10; // Assigns the value 10 to
the variable
 Addition Assignment (+=), Subtraction Assignment (-=):
$x = 5;
$x += 3; // Equivalent to $x = $x + 3; // $x is now 8

Comparison Operators:
 Equal (==): $result = (5 == 5); // $result is true
 Identical (===): $result = (5 === "5"); // $result is false
 Not Equal (!=): $result = (10 != 5); // $result is true
 Not Identical (!==): $result = (10 !== "10"); // $result is true
 Less than(<)
 Greater than(>)

CSS Mr. N. L. Shelake Department of Information Technology
Logical Operators:
 AND (&&): $result = (true && false); // $result is false
 OR (||): $result = (true || false); // $result is true
 NOT (!): $$result = !true; // $result is false
Increment and Decrement Operators
Increment (++): $counter = 5; $counter++; // $counter is now 6
Decrement (--): $counter = 5; $counter--; // $counter is now 4

Concatenation Operator::
Concatenation (.):
$string1 = "Hello";
$string2 = " World!";
$greeting = $string1 . $string2;
// $greeting is now "Hello World!"

In PHP, an expression is a combination of values, variables,
operators, and functions that, when evaluated, produces a
single value.
Expressions can be simple or complex, depending on the
operations involved.
$sum = 5 + 3; // Addition
$difference = 7 - 4; // Subtraction
$product = 2 * 6; // Multiplication
$quotient = 10 / 2; // Division
$remainder = 11 % 3; // Modulus

Control statements
if Statement:
The if statement is used for conditional execution of code.
<?php
$a = 10;
if ($a > 5) {
echo "a is greater than 5";
} else {
echo "a is not greater than 5";
}
?>

Control statements
While Loop:
The while loop executes a block of code as long as the
specified condition is true.
<?php
$i = 1;
while ($i <= 5) {
echo $i;
$i++;
} ?

Control statements
for Loop:
The for loop is used to iterate a statement or a block of
statements.
<?php
for ($i = 1; $i <= 5; $i++) {
echo $i;
}
?>

Control statements
foreach Loop::
The foreach loop is used for iterating over arrays.
<?php
$colors = array("red", "green", "blue");
foreach ($colors as $value) {
echo $value;
}
?>

Control statements
break and continue statement:
The break statement is used to exit a loop prematurely.
The continue statement is used to skip the rest of the code
inside a loop for the current iteration.
<?php
for ($i = 1; $i <= 10; $i++) {
if ($i == 5) {
break; // exit the loop when $i is 5
}
echo $i; } ?>

Hosting tool: XAMPP
XAMPP is a free, open-source cross-platform web server
solution stack package developed by Apache Friends. The
name "XAMPP" is an acronym for the components it bundles:
X - Cross-platform
A - Apache HTTP Server
M - MariaDB (or MySQL)
P - PHP
P - Perl

Hosting tool: XAMPP
 Apache Web Server:
XAMPP includes the Apache HTTP Server, one of the most
widely used web servers globally. It provides a robust and flexible
platform for hosting websites and applications.
 Database Support (MariaDB or MySQL):
MariaDB, a fork of MySQL, is the default database system
included in XAMPP. MySQL can also be used interchangeably.
 PHP, Perl, and Other Programming Languages:
XAMPP supports PHP, a server-side scripting language widely
used for web development. Perl is also included, making it versatile
for various scripting needs.

Hosting tool: XAMPP
phpMyAdmin:
XAMPP comes bundled with phpMyAdmin, a web-based
administration tool for managing MySQL and MariaDB
databases.
Open Source and Cross-Platform:
XAMPP is open-source software, freely available for
Windows, Linux, and macOS. This cross-platform compatibility
makes it easy for developers to work on different operating
systems.

Hosting tool: XAMPP
 Easy Installation and Configuration:
XAMPP has a straightforward installation process, making it
suitable for both beginners and experienced developers.
Configuration files are easily accessible for customization.
 Development and Testing Environment:
XAMPP is designed for creating a local development
environment, allowing developers to test and debug their web
applications before deploying them to a live server.
 Wide Adoption:
Due to its ease of use and comprehensive features, It is widely
adopted by developers and used in educational.

MySQL
 MySQL is an open-source relational database management system
(RDBMS) that is widely used for managing and organizing data.
 It is a key component of the LAMP (Linux, Apache, MySQL,
PHP/Python/Perl) and MEAN (MongoDB, Express.js, AngularJS,
Node.js) stacks, making it a popular choice for web applications.
 Components of MySQL:
 MySQL Server - manages databases, processes queries, and controls
access
 MySQL Workbench: allows developers to design, model
 MySQL Shell: enables administrators and developers
 MySQL Connector: Provides connectors for various programming
languages

MySQL
 MySQL is a powerful, reliable, and widely used relational
database management system.
 Its open-source nature, scalability, and strong community support
make it a preferred choice for developers and businesses looking
for a robust and efficient database solution.

Sample Questions
 Write an PHP program that prompts the user to enter two numbers, calculates their Division and display
it.
<html>
<head><title>Division Calculator</title></head>
<body>
<h1>Division Calculator</h1>
<form method="post" action="">
<label for="num1">Enter the first number:</label>
<input type="number" step="any" id="num1" name="num1" required>
<br><br>
<label for="num2">Enter the second number:</label>
<input type="number" step="any" id="num2" name="num2" required>
<br><br>
<button type="submit">Calculate Division</button>
</form>

Sample Questions
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
$num1 = $_POST["num1"];
$num2 = $_POST["num2"];
if ($num2 == 0)
{
echo "<p style='color: red;'>Error: Division by zero is not allowed.</p>";
}
else {
$result = $num1 / $num2;
echo "<p>The result of dividing $num1 by $num2 is: " . round($result, 2) . "</p>";
}
}
?> </body> </html>

Sample Questions
 Question 1 a) 5 Marks
 b) 5 Marks
 b) 5 Marks
 b) 5 Marks
 Total Marks 30 Marks
 Total Time 1.5 Hours

IT For Engineers
Thank You

JAVASRIPT and PHP (Hypertext Preprocessor)

Recommended

More Related Content

What's hot (20)

Similar to JAVASRIPT and PHP (Hypertext Preprocessor) (20)

Recently uploaded (20)

JAVASRIPT and PHP (Hypertext Preprocessor)