ITWS02
ITWS02
<script type="text/javascript">
<!--
var money;
var name;
//-->
</script>
NEUST.SIC. Web Systems and Technologies 2. 2023
JavaScript Variables
Variables can also be declared multiple times with
the same var keyword as follows:
<script type="text/javascript">
<!--
var money, name;
//-->
</script>
4+5=9
• Arithmetic Operators
• Comparison Operators
• Logical (or Relational) Operators
• Assignment Operators
if (expression) {
Statement(s) to be executed if expression is
true
}
if (expression) {
Statement(s) to be executed if expression is
true
} else {
Statement(s) to be executed if expression is
false
} NEUST.SIC. Web Systems and Technologies 2. 2023
<html>
<body>
<script type = "text/javascript">
<!--
var age = 15;
default: statement(s)
}
NEUST.SIC. Web Systems and Technologies 2. 2023
<html>
<body>
<script type = "text/javascript">
<!--
var grade = 'A';
document.write("Entering switch block<br />");
switch (grade) {
case 'A': document.write("Good job<br />");
break;
while (expression) {
Statement(s) to be executed if expression is
true
}
let sum = 0;
while(number >= 0) {
if (x == 5) {
continue; // skip rest of the loop body
}
document.write( x + "<br />");
}
document.write("Exiting the loop!<br /> ");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>
</head>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say
Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello('Zara', 7)" value
= "Say Hello">
</form>
<p>Use different parameters inside the function and then
try...</p>
</body>
</html>
NEUST.SIC. Web Systems and Technologies 2. 2023
JavaScript – Function
The return statement. A JavaScript function can
have an optional return statement. This is
required if there is a need to return a value from a
function. This statement should be the last
statement in a function.
<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "secondFunction()" value = "Call
Function">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>
NEUST.SIC. Web Systems and Technologies 2. 2023
JavaScript – Events
What is an event?
JavaScript's interaction with HTML is handled
through events that occur when the user or the
browser manipulates a page.
<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say
Hello" />
</form>
</body>
</html>
NEUST.SIC. Web Systems and Technologies 2. 2023
JavaScript – Events
onsubmit Event Type. Is an event that occurs
when submitting form values. A form validation
can be placed against this event type.
<body>
<form method = "POST" action = "t.cgi" onsubmit = "return
validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>
NEUST.SIC. Web Systems and Technologies 2. 2023
JavaScript – Events
onmouseover and onmouseout. These two event
types will help in creating nice effects with images
or even with text as well. The onmouseover event
triggers when bringing a mouse pointer over any
element and the onmouseout triggers when
moving a mouse pointer out from that element.
<body>
<p>Bring your mouse inside the division to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
oncanplay script Triggers when media can start play, but might has
to stop for buffering
onloadedmetadata script Triggers when the duration and other media data of
a media element is loaded
onloadstart script Triggers when the browser starts to load the media
data
onmessage script Triggers when the message is triggered
onmousedown script Triggers when a mouse button is pressed
onmousemove script Triggers when the mouse pointer moves
onratechange script Triggers when the media data's playing rate has
changed
onreadystatechange script Triggers when the ready-state changes
onredo script Triggers when the document performs a redo
onresize script Triggers when the window is resized
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick =
"Warn();" />
</form>
</body>
</html>
NEUST.SIC. Web Systems and Technologies 2. 2023
JavaScript – Dialog Boxes
Confirmation Dialog Box. A confirmation dialog
box is mostly used to take user's consent on any
option. It displays a dialog box with two
buttons: OK and Cancel.
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getConfirmation();" />
</form>
</body>
</html>
NEUST.SIC. Web Systems and Technologies 2. 2023
JavaScript – Dialog Boxes
Prompt Dialog Box. The prompt dialog box is very
useful when a pop-up text box is used to get user
input. Thus, it enables interaction with the user. The
user needs to fill in the field and then click OK.
<body>
<p>Click the following button to see the result: </p>
<form>
<input type = "button" value = "Click Me" onclick = "getValue();" />
</form>
</body>
</html>
<?php
...
?>
<?
...
?>
<%
...
%>
<script language=“PHP”>
...
</script>
$int_var = 12345;
$another_int = -12345 + 12345;
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Variable Types
Doubles. They are numbers with decimals. By
default, doubles print with the minimum number of
decimal places needed.
$many = 2.2888800;
$many_2 = 2.2111200;
$few = $many + $many_2;
print(.$many + $many_2 = $few<br>.);
if (TRUE)
print("This will always print<br>");
else
print("This will never print<br>");
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Variable Types
Null. NULL is a special type that only has one value:
NULL. To give a variable the NULL value, simply
assign it like this:
$my_var = NULL;
<?php
define("MINSIZE", 50);
echo MINSIZE;
echo constant("MINSIZE"); // same
thing as the previous line
?>
if (condition)
code to be executed if condition is true;
else
code to be executed if condition is false;
<?php
$d = date("D");
if ($d == "Fri")
echo "Have a nice weekend!";
else
echo "Have a nice day!";
?>
</body>
</html>
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Decision Making
ElseIf Statement. Is used with the if...else statement
to execute a set of code if one of the several
condition is true.
if (condition)
code to be executed if condition is true;
elseif (condition)
code to be executed if condition is true;
else
code to be executed if condition is false;
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Decision Making
<html>
<body>
<?php
$d = date("D");
if ($d == "Fri")
echo "Have a nice weekend!";
else
echo "Have a nice day!";
?>
</body>
</html>
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Decision Making
Switch Statement. Is used to select one of many
blocks of code to be executed. The switch
statement is used to avoid long blocks of
if..elseif..else code.
case label2:
code to be executed if expression = label2;
break;
default:
code to be executed
if expression is different
from both label1 and label2;
}
while (condition) {
code to be executed;
}
do {
code to be executed;
}
while (condition);
do {
$i++;
}
while( $i < 10 );
echo ("Loop stopped at i = $i" );
?>
</body>
</html>
<?php
$array = array( 1, 2, 3, 4, 5);
</body>
</html>
<?php
$i = 0;
</body>
</html>
<?php
$array = array( 1, 2, 3, 4, 5);
</body>
</html>
• Numeric Array
• Associative Array
• Multidimensional Array
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Arrays
Numeric Array. These arrays can store numbers,
strings and any object but their index will be
represented by numbers. By default array index
starts from zero.
<?php
/* First method to associate create array. */
$salaries = array("mohammad" => 2000, "qadir" => 1000, "zara" => 500);
</body>
</html>
PHP Arrays
Multidimensional Array. A multi-dimensional
array each element in the main array can also be
an array. And each element in the sub-array can
be an array, and so on. Values in the multi-
dimensional array are accessed using multiple
index.
<?php
$marks = array(
"mohammad" => array (
"physics" => 35,
"maths" => 30,
"chemistry" => 39
),
</body>
</html>
PHP Strings
They are sequences of characters, like "PHP
supports string operations". The following are
valid strings:
print($literally);
print "<br />";
print($literally);
?>
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Strings
There are no artificial limits on string length -
within the bounds of available memory, you
ought to be able to make arbitrarily long strings.
Strings that are delimited by double quotes (as in
"this") are preprocessed in both the following two
ways by PHP:
• Certain character sequences beginning with
backslash (\) are replaced with special
characters
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Strings
• Variable names (starting with $) are replaced
with string representations of their values.
<?php
$string1="Hello World";
$string2="1234";
<?php
echo strlen("Hello world!");
?>
<?php
echo strpos("Hello world!","world");
?>
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Web Concepts
This session demonstrates how PHP can provide
dynamic content according to browser type,
randomly generated numbers or User Input. It
also demonstrated how the client browser can be
redirected.
</body>
</html>
<?php
if( $_POST["name"] || $_POST["age"] ) {
if (preg_match("/[^A-Za-z'-]/",$_POST['name’]
)) {
die ("invalid name and name should be
alpha");
}
echo "Welcome ". $_POST['name']. "<br />";
echo "You are ". $_POST['age']. " years
old.";
exit();
}
?>
PHP Web Concepts
Browser Redirection. The PHP header() function
supplies raw HTTP headers to the browser and
can be used to redirect it to another location. The
redirection script should be at the very top of the
page to prevent any other part of the page from
loading.
</select>
<input type = "submit" />
</form>
</body>
</html>
<?php
if( $_POST["location"] ) {
$location = $_POST["location"];
header( "Location:$location" );
exit();
}
?>
PHP GET and POST Methods
There are two ways the browser client can
send information to the web server.
• GET Method
• POST Method
name1=value1&name2=value2&name3=value3
http://www.test.com/index.htm?name1=value
1&name2=value2
</body>
</html>
<?php
if( $_GET["name"] || $_GET["age"] ) {
echo "Welcome ". $_GET['name']. "<br />";
echo "You are ". $_GET['age']. " years
old.";
exit();
}
?>
PHP GET and POST Methods
POST Method. The POST method transfers
information via HTTP headers. The information is
encoded as described in case of GET method
and put into a header called QUERY_STRING.
exit();
}
?>
<html>
<body>
</body>
</html>
PHP File Inclusion
A PHP file can be included into another PHP file
before the server executes it. There are two PHP
functions which can be used to include a PHP file
into another PHP file:
• The include() Function
• The require() Function
</body>
</html>
PHP File Inclusion
The require() Function. 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
halt the execution of the script.
<head>
<title>Reading a file using PHP</title>
</head>
<body>
<?php
$filename = "tmp.txt";
$file = fopen( $filename, "r" );
</body>
</html>
PHP Files and I/O
Writing a file. A new file can be written or text can
be appended to an existing file using the
PHP fwrite() function. This function requires two
arguments specifying a file pointer and the string
of data that is to be written. Optionally a third
integer argument can be included to specify the
length of the data to write. If the third argument is
included, writing would will stop after the
specified length has been reached.
NEUST.SIC. Web Systems and Technologies 2. 2023
<?php
$filename = "/home/user/guest/newfile.txt";
$file = fopen( $filename, "w" );
<head>
<title>Writing a file using PHP</title>
</head>
<body>
<?php
$filename = "newfile.txt";
$file = fopen( $filename, "r" );
fclose( $file );
</body>
</html>
PHP Functions
PHP functions are similar to other programming
languages. A function is a piece of code which
takes one more input in the form of parameter
and does some processing and returns a value.
<head>
<title>Setting Cookies with PHP</title>
</head>
<body>
<?php echo "Set Cookies"?>
</body>
</html>
PHP Cookies
Accessing Cookies with PHP. PHP provides many
ways to access cookies. Simplest way is to use
either $_COOKIE or $HTTP_COOKIE_VARS
variables.
/* is equivalent to */
echo $HTTP_COOKIE_VARS["name"]. "<br />";
/* is equivalent to */
echo $HTTP_COOKIE_VARS["age"] . "<br />";
?>
PHP Cookies
Use isset() function to check if a cookie is set or
not.
<?php
if( isset($_COOKIE["name"]))
{
echo "Welcome " . $_COOKIE["name"] . "<br />";
}else
{
echo "Sorry... Not recognized" . "<br />";
}
?>
NEUST.SIC. Web Systems and Technologies 2. 2023
PHP Cookies
Deleting Cookies with PHP. Officially, to delete a
cookie call setcookie() with the name argument
only but this does not always work well, however,
and should not be relied on.
<head>
<title>Deleting Cookies with PHP</title>
</head>
<body>
<?php echo "Deleted Cookies" ?>
</body>
</html>
PHP Sessions
An alternative way to make data accessible
across the various pages of an entire website is
to use a PHP Session. A session creates a file in a
temporary directory on the server where
registered session variables and their values are
stored. This data will be available to all pages on
the site during that visit.
<?php
unset($_SESSION['counter']);
?>
NEUST.SIC. Web Systems and Technologies 2. 2023