Sachpazis Costas: Geotechnical Engineering: A student's Perspective Introduction
Â
JAVASRIPT and PHP Basics# Unit 2 Webdesign
1. 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
3. 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.
Web Design Mr. N. L. Shelake Department of Information Technology
4. 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).
Web Design Mr. N. L. Shelake Department of Information Technology
5. 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
Web Design Mr. N. L. Shelake Department of Information Technology
6. History of 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 Mr. N. L. Shelake Department of Information Technology
JavaScript
7. History of 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 Mr. N. L. Shelake Department of Information Technology
JavaScript
8. 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 Mr. N. L. Shelake Department of Information Technology
JavaScript
9. 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 Mr. N. L. Shelake Department of Information Technology
JavaScript
10. 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 Mr. N. L. Shelake Department of Information Technology
JavaScript
11. 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 Mr. N. L. Shelake Department of Information Technology
JavaScript
12. 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 Mr. N. L. Shelake Department of Information Technology
JavaScript
13. 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 Mr. N. L. Shelake Department of Information Technology
JavaScript
14. 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..
Web Design Mr. N. L. Shelake Department of Information Technology
15. Basic Syntax
Data types: JavaScript has dynamic types.
īļ Primitive types: Number, String, Boolean, Undefined,
Null.
īļ Reference types: Object, Array, Function.
Web Design Mr. N. L. Shelake Department of Information Technology
16. Basic Syntax
Operators: Arithmetic, Comparison, Logical, Assignment,
Ternary.
Conditionals: if, else if, else, switch.
Loops: for, while, do...while, for...in, for...of.
Web Design Mr. N. L. Shelake Department of Information Technology
17. Basic Syntax
Operators:
ī Arithmetic - + / * % ++ --
ī Assignment =, +=,-=,*=,/=
ī Comparison ==,!=, >, <, >=, <=,
ī Logical &&, ||, !
Web Design Mr. N. L. Shelake Department of Information Technology
18. Basic Syntax
Operators: Arithmetic, Comparison, Logical, Assignment,
Ternary.
Conditionals: if, else if, else, switch.
Loops: for, while, do...while, for...in, for...of.
Web Design Mr. N. L. Shelake Department of Information Technology
19. Basic Syntax
if (condition)
{
}
if (condition)
{
}
else
{
}
if (condition)
{
}
elseif
{
}
Else
{
}
If if else elseif
Web Design Mr. N. L. Shelake Department of Information Technology
20. Basic Syntax
Operators: Arithmetic, Comparison, Logical, Assignment,
Ternary.
Conditionals: if, else if, else, switch.
Loops: for, while, do...while, for...in, for...of.
Web Design Mr. N. L. Shelake Department of Information Technology
21. Basic Syntax
Switch switch(expression) {
case x:
// code block
break;
case y:
// code block
break;
default:
// code block
}
Web Design Mr. N. L. Shelake Department of Information Technology
22. 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>
Web Design Mr. N. L. Shelake Department of Information Technology
23. Basic Syntax
Operators: Arithmetic, Comparison, Logical, Assignment,
Ternary.
Conditionals: if, else if, else, switch.
Loops: for, while, do...while, for...in, for...of.
Web Design Mr. N. L. Shelake Department of Information Technology
24. 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>
Web Design Mr. N. L. Shelake Department of Information Technology
25. 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>
Web Design Mr. N. L. Shelake Department of Information Technology
26. Basic Syntax
â<html>
<body>
<h1>Sample JavaScript Program</h1>
<p id=âsample"></p>
<script>
document.getElementById(âsample").innerHTML = "My First JavaScript";
</script>
</body>
</html>
Web Design Mr. N. L. Shelake Department of Information Technology
27. 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>
Web Design Mr. N. L. Shelake Department of Information Technology
28. 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.
Web Design Mr. N. L. Shelake Department of Information Technology
29. 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.
Web Design Mr. N. L. Shelake Department of Information Technology
30. 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.
Web Design Mr. N. L. Shelake Department of Information Technology
31. 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.
Web Design Mr. N. L. Shelake Department of Information Technology
32. 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.
Web Design Mr. N. L. Shelake Department of Information Technology
33. 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
34. 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.
Web Design Mr. N. L. Shelake Department of Information Technology
35. 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
Web Design Mr. N. L. Shelake Department of Information Technology
36. 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
Web Design Mr. N. L. Shelake Department of Information Technology
37. 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
Web Design Mr. N. L. Shelake Department of Information Technology
39. 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
40. PHP Mr. N. L. Shelake Department of Information Technology
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!
41. PHP Mr. N. L. Shelake Department of Information Technology
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)
42. PHP Mr. N. L. Shelake Department of Information Technology
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
43. PHP Mr. N. L. Shelake Department of Information Technology
PHP Example
<html>
<body>
<?php
$temp = "HelloWorld";
echo "PHP First Program $temp!";
?>
</body>
</html>
PHP First Program HelloWorld!
44. PHP Mr. N. L. Shelake Department of Information Technology
PHP Example
<html>
<body>
<?php
$x = 5;
$y = 4;
echo "Addition is".($x + $y);
?>
</body>
</html>
Addition is 9
45. PHP Mr. N. L. Shelake Department of Information Technology
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);
46. PHP Mr. N. L. Shelake Department of Information Technology
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
47. PHP Mr. N. L. Shelake Department of Information Technology
Operator and Expression
Same as, discussed in JavaScript
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
48. PHP Mr. N. L. Shelake Department of Information Technology
Operator and Expression
Same as, discussed in JavaScript
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(>)
49. CSS Mr. N. L. Shelake Department of Information Technology
Operator and Expression
Same as, discussed in JavaScript
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
50. PHP Mr. N. L. Shelake Department of Information Technology
Operator and Expression
Concatenation Operator::
Concatenation (.):
$string1 = "Hello";
$string2 = " World!";
$greeting = $string1 . $string2;
// $greeting is now "Hello World!"
51. PHP Mr. N. L. Shelake Department of Information Technology
Operator and Expression
īļ 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
52. PHP Mr. N. L. Shelake Department of Information Technology
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";
}
?>
53. PHP Mr. N. L. Shelake Department of Information Technology
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++;
} ?
54. PHP Mr. N. L. Shelake Department of Information Technology
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;
}
?>
55. PHP Mr. N. L. Shelake Department of Information Technology
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;
}
?>
56. PHP Mr. N. L. Shelake Department of Information Technology
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; } ?>
57. PHP Mr. N. L. Shelake Department of Information Technology
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
58. PHP Mr. N. L. Shelake Department of Information Technology
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
59. PHP Mr. N. L. Shelake Department of Information Technology
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.
60. PHP Mr. N. L. Shelake Department of Information Technology
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.
61. PHP Mr. N. L. Shelake Department of Information Technology
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.
62. PHP Mr. N. L. Shelake Department of Information Technology
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
63. PHP Mr. N. L. Shelake Department of Information Technology
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.