Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
7 views

IP Chapter-4&5 JavaScript and Server-side Programming

JavaScript is a client-side scripting language that enhances web pages by enabling dynamic and interactive features. It can be integrated into HTML and is executed by web browsers, with its syntax being case-sensitive and supporting various data types and operators. The document also compares JavaScript with Java, introduces ECMA Script, and provides guidance on writing and implementing JavaScript programs.

Uploaded by

biruktilahundinki
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

IP Chapter-4&5 JavaScript and Server-side Programming

JavaScript is a client-side scripting language that enhances web pages by enabling dynamic and interactive features. It can be integrated into HTML and is executed by web browsers, with its syntax being case-sensitive and supporting various data types and operators. The document also compares JavaScript with Java, introduces ECMA Script, and provides guidance on writing and implementing JavaScript programs.

Uploaded by

biruktilahundinki
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 60

Chapter-4

Introduction to
JavaScript
JavaScript Introduction 1
What is Java Script ?
 JavaScript is a client-side scripting language.
 A scripting language is a lightweight programming
language.
 JavaScript is programming code that can be inserted
into HTML pages.
 JavaScript inserted into HTML pages, can be
executed by all modern web browsers.
 Java Script can enhance the dynamics and
interactive features of your page by allowing you to
perform calculations, check forms, write interactive
games, add special effects, customize graphics
selections, create security passwords and more.

JavaScript Introduction 2
What is Java Script ?
 JavaScript is used in Web site development to such
things as:
 check or modify the contents of forms
 change images
 open new windows and write dynamic page content.
 to make DHTML by CSS.
 This allows you to make parts of your web pages
appear or disappear or move around on the page

JavaScript Introduction 3
Java Script Vs Java
JavaScript Java
Interpreted (not compiled) Compiled on server before
by client. execution on client.
Object-based. Code uses Object-oriented. Applets
built-in, extensible objects, consist of object classes with
but no classes or inheritance. inheritance.
Applets distinct from HTML
Code integrated with, and
(accessed from HTML
embedded in, HTML.
pages).
Variable data types not Variable data types must be
declared (loose typing). declared (strong typing).
Secure. Cannot write to hard Secure. Cannot write to hard
disk. disk.
JavaScript Introduction 4
ECMA Script
 The responsibility for the development of a
scripting standard has been transferred to an
international body called the European
Computer Manufacturers Association
(ECMA).
 The standard developed by the ECMA is
called ECMA Script, though browsers still
refer to it as JavaScript.
 The latest version is ECMA-262, which is
supported by the major browsers.

JavaScript Introduction 5
Writing a Java Script Program
 The Web browser runs a JavaScript program when
the Web page is first loaded, or in response to an
event.
 JavaScript programs can either be placed directly
into the HTML file or they can be saved in external
files.
 placing a program in an external file allows you to
hide the program code from the user
 source code placed directly in the HTML file can
be viewed by anyone
JavaScript Introduction 6
Writing a Java Script Program
 A JavaScript program can be placed
anywhere within the HTML file.
 Many programmers favor placing their
programs between <head> tags in order to
separate the programming code from the
Web page content and layout.
 Some programmers prefer placing programs
within the <Body> of the Web page at the
location where the program output is
generated and displayed.

JavaScript Introduction 7
How to use/implement Java Script?

 We can implement Java script in our web page


by following three ways-
1. Inside the head tag

2. Within the body tag

3. In an external file (with extension .js)

JavaScript Introduction 8
Implementing Java Script
1. Inside HEAD Tag:
Syntax:
<HTML>
<HEAD>
<SCRIPT TYPE= “TEXT/JAVASCRIPT”>
<!- -
Java Script Code
// - ->
</SCRIPT>
</HEAD>
<BODY>

</BODY>
</HTML>

JavaScript Introduction 9
Implementing Java Script

2. Within BODY Tag:


Syntax:
<HTML>
<HEAD>
</HEAD>
<BODY>
<SCRIPT TYPE= “TEXT/JAVASCRIPT”>
<!- -
java script code
// - ->
</SCRIPT>
</BODY>
</HTML>

JavaScript Introduction 10
Implementing Java Script

3. In an External Link:
Syntax:
<HTML>
<HEAD>
<SCRIPT SRC= “myscript.js”>
</SCRIPT>
</HEAD>
<BODY>
<input TYPE=“Button” onclick=“msg()” value=“Message”>
</BODY>
</HTML>
Myscript.js:
function msg()
{ alert("Hello") }

JavaScript Introduction 11
Java Script Syntax Issue
 JavaScript commands and names are case
sensitive.
 JavaScript command lines end with a
semicolon to separate it from the next
command line in the program.
 in some situations, the semicolon is
optional
 semicolons are useful to make your code
easier to follow and interpret

JavaScript Introduction 12
Displaying some text on web Page

 You can write on page by using following


statement of Java script-
document.write(“message”)
document.writeln(“message”)

Example:
document.write(“<h1><B>My first
message</B></h1>” ) ;

JavaScript Introduction 13
JavaScript Display Possibilities
 JavaScript does NOT have any built-in print or
display functions.
 JavaScript can "display" data in different ways:
 Writing into an alert box, using window.alert().

 Writing into the HTML output

using document.write().
 Writing into an HTML element,
using innerHTML.
 Writing into the browser console,

using console.log().

JavaScript Introduction 14
window.alert( )
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<script>
window.alert(5 + 6);
</script>
</body></html>

JavaScript Introduction 15
JavaScript Introduction 16
document.write()
<html>
<body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<button type="button"
onclick="document.write(5 + 6)">
Try it</button>
</body>
</html>

JavaScript Introduction 17
JavaScript Introduction 18
innerHTML
<html> <body>
<h1>My First Web Page</h1>
<p>My First Paragraph.</p>
<p id="demo"></p>
<script>
document.getElementById("demo")
.innerHTML = 5 + 6;
</script>
</body>
</html>
JavaScript Introduction 19
JavaScript Introduction 20
console.log()
<!DOCTYPE html>
<html><body>
<h1>My First Web Page</h1>
<p>My first paragraph.</p>
<p> Activate debugging in your browser
(Chrome, IE, Firefox) with F12, and
select "Console" in the debugger menu.
</p>
<script> console.log(5 + 6);
</script>
</body>
</html> JavaScript Introduction 21
JavaScript Introduction 22
Working with Variables & Data
 A variable is a named element in a program
that stores information.
var varName;
 The following restrictions apply to variable
names:
 the first character must be either a letter or an
underscore character ( _ )
 the remaining characters can be letters, numbers,
or underscore characters
 variable names cannot contain spaces
 Variable names are case-sensitive.
JavaScript Introduction 23
Types of Variables
 JavaScript supports four different types
of variables
Numeric variables can be a number, such
as 13, 22.5, or -3.14159
string variables is any group of characters,

such as “Hello” or “Happy Holidays!”


Boolean variables are variables that

accept one of two values, either true or false


null variables is a variable that has no

value at all
JavaScript Introduction 24
Declaring/Creating a Variable
 Before you can use a variable in your
program, you need to declare a variable
using the var command or by assigning the
variable a value.
 Any of the following commands is a valid
way of creating a variable named “Month”:
var Month;
Month = “December”;
var Month = “December”;

JavaScript Introduction 25
Operators in JavaScript

 Following operators are used in


JavaScript-
1. Arithmetic Operator

2. Comparison Operator

JavaScript Introduction 26
Operators in JavaScript

 Following operators are used in JavaScript-


1. Arithmetic Operator
Operator Meaning Example

+ Addition 2+4

- Subtraction 6-2

* Multiplication 5*3

/ Division 15 / 3

% Modulus 43 % 10

JavaScript Introduction 27
<body>
Example
<script type="text/JavaScript">
var a = 2
var b = 10
var linebreak = "<br />"
document.write(“a + b = ")
var result = a + b
document.write(result)
document.write(linebreak)
document.write(“b * b = ")
result = b * b
document.write(result)
document.write(linebreak)
document.write(“b / a = ")
result = b / a
document.write(result)
</script>
</body>

JavaScript Introduction 28
Output
a + b = 12
b * b = 100
b / a = 5

JavaScript Introduction 29
Operators in JavaScript
2. Comparison Operator
Operato
Meaning Example Result
r
== Equal To x == y false
=== Equal value and equal
x===y true
type
!= Not Equal To x != y true
!== not equal value or not
x!== false
equal type
< Less Than x<y true
> Greater Than x>y false
<= Less Than or Equal To x <= y true
Greater Than or Equal
>= x >= y false
To

JavaScript Introduction 30
Built-in JavaScript Functions
 Functions provided by the language and you cannot
change them to suit your needs.
 Some of the built-in functions in JavaScript are
shown here:
 eval - eval(expr)
 eval evaluates the expression or statements
 isFinite
 Determines if a number is finite
 isNaN
 Determines whether a value is “Not a Number”
 parseInt
 Converts string literals to integers
 parseFloat
 Finds a floating-point value at the beginning of a string.

JavaScript Introduction 31
JavaScript Functions
 A function is a block of organized reusable
code (a set of statements) for performing a
single or related action.
 Begins with keyword “function” and the
function name and “( … )”
 Inside the parentheses
 We can pass parameters to the function

 E.g. function myfunction(arg1, arg2) {…}

 Built-in and user-defined functions

JavaScript Introduction 32
Creating JavaScript Functions
Declaration Syntax
 Functions are declared using the function
reserved word
 The return value is not declared, nor are the
types of the arguments

function function_name(parameters) {
JavaScript commands
}
 parameters are the values sent to the function
(note: not all functions require parameters)
 { and } are used to mark the beginning and end of
the commands in the function.

JavaScript Introduction 33
Creating JavaScript Functions: Eg
<HTML>
<HEAD>
<SCRIPT TYPE=TEXT/JAVASCRIPT>
<!- -
function myMessage()
{
document.write(“<B>Hello World<B>”);
}
// - ->
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE=BUTTON onClick=myMessage()
Value=Click >
</BODY>
</HTML>
JavaScript Introduction 34
Event in JavaScript
 JavaScript is its ability to help you create dynamic web pages
that increase user interaction
 The building blocks of an interactive web page is the
JavaScript event system.
 An event in JavaScript is something that happens with or on
the webpage.
 A few example of events:
 A mouse click
 The webpage loading
 Mousing over a hot spot on the webpage, also known
as hovering
 Selecting an input box in an HTML form
 A keystroke

JavaScript Introduction 35
Event in JavaScript

 JS Event Handler
 Onclick
 onMouseOver
 onMouseOut
 onLoad
 onkeydown

JavaScript Introduction 36
Chapter 5

Introduction to
Server-Side Programming
Server-side Programming

 Server-side scripting is a technique used in


web development which involves employing
scripts on a web server which produce a
response customized for each user's (client's)
request to the website.
 Server-side programming, is the general
name for the kinds of programs which are run
on the Server.

38
Uses of server-side programming

 Process user input.


 Display pages.
 Structure web applications.
 Interact with permanent storage (SQL, files).
Examples
 PHP
 Python
 ASP.Net in C#, C++, or Visual Basic.
39
PHP Overview
 Easy learning
 Syntax Perl- and C-like syntax. Relatively
easy to learn.
 Large function library
 Embedded directly into HTML
 Interpreted, no need to compile
 Open Source server-side scripting language
designed specifically for the web.

40
What is PHP?

 PHP == ‘Hypertext Preprocessor’


 Open-source, server-side scripting language
 Used to generate dynamic web-pages
 PHP scripts reside between reserved PHP tags
 This allows the programmer to embed PHP
scripts within HTML pages

41
What is PHP (cont’d)
 Interpreted language, scripts are parsed at run-
time rather than compiled beforehand
 Executed on the server-side
 Source-code not visible by client
 ‘View Source’ in browsers does not display the PHP
code
 Various built-in functions allow for fast
development
 Compatible with many popular databases

42
History of PHP
 PHP began in 1995 when Rasmus Lerdorf developed a
Perl/CGI script toolset he called the Personal Home Page
or PHP
 PHP 2 released 1997 (PHP now stands for Hypertex
Preprocessor). Lerdorf developed it further, using C
instead
 PHP3 released in 1998 (50,000 users)
 PHP4 released in 2000 (3.6 million domains). Considered
debut of functional language and including Perl parsing,
with other major features
 PHP5.0.0 released July 13, 2004 (113 libraries>1,000
functions with extensive object-oriented programming)
 PHP5.0.5 released Sept. 6, 2005 for maintenance and bug
fixes
43
Common uses of PHP
 PHP performs system functions, i.e. from files on a
system it can create, open, read, write, and close
them.
 PHP can handle forms, i.e. gather data from files,
save data to a file, through email you can send data,
return data to the user.
 You add, delete, modify elements within your
database through PHP.
 Access cookies variables and set cookies.
 Using PHP, you can restrict users to access some
pages of your website.
 It can encrypt data.
44
What does PHP code look like?
 Structurally similar to C/C++
 Supports procedural and object-oriented
paradigm (to some degree)
 All PHP statements end with a semi-colon
 Each PHP script must be enclosed in the
reserved PHP tag

<?php
…
?>

45
First PHP script
 Save as sample.php:
<!– sample.php -->
<html><body>
<strong>Hello World!</strong><br />
<?php
echo “<h2>Hello, World</h2>”; ?>
$myvar = "Hello World";
echo $myvar;
?>
</body></html>

46
Comments in PHP

 Standard C, C++, and shell comment symbols

// C++ and Java-style comment

# Shell-style comments

/* C-style comments
These can span multiple lines
*/

47
Variables in PHP

 PHP variables must begin with a “$” sign


 Case-sensitive ($Foo != $foo != $fOo)
 Global and locally-scoped variables
 Global variables can be used anywhere
 Local variables restricted to a function or class
 Certain variable names reserved by PHP
 Form variables ($_POST, $_GET)
 Server variables ($_SERVER)
 Etc.

48
Variable usage

<?php
$foo = 25; // Numerical variable
$bar = “Hello”; // String variable

$foo = ($foo * 7); // Multiplies foo by 7


$bar = ($bar * 7); // Invalid expression
?>

49
echo & print
 The PHP commands ‘print’ and ‘echo’ are
used to output the parameters passed to it
 The typical usage for this is to send data to the
client’s web-browser
 Syntax
 void echo (string arg1 [, string argn...])
 In practice, arguments are not passed in
parentheses since echo is a language construct
rather than an actual function

50
Echo example
<?php
$foo = 25; // Numerical variable
$bar = “Hello”; // String variable

echo $bar; // Outputs Hello


echo $foo,$bar; // Outputs 25Hello
echo “5x5=”,$foo; // Outputs 5x5=25
echo “5x5=$foo”; // Outputs 5x5=25
echo ‘5x5=$foo’; // Outputs 5x5=$foo
?>

 Notice how echo ‘5x5=$foo’ outputs $foo rather than replacing it with 25

 Strings in single quotes (‘ ’) are not interpreted or evaluated by PHP

 This is true for both variables and character escape-sequences (such as “\n” or “\\”)

51
Arithmetic Operations
<?php
$a=15;
$b=30;
$total=$a+$b;
Print $total;
Print “<p><h1>$total</h1>”;
// total is 45
?>

 $a - $b // subtraction
 $a * $b // multiplication
 $a / $b // division
 $a += 5 // $a = $a+5 Also works for *= and /=

52
Concatenation

 Use a period to join strings into one.


<?php
$string1=“Hello”;
$string2=“PHP”;
$string3=$string1 . “ ” . $string2;
Print $string3;
?>
Output

Hello PHP

53
PHP Control Structures
 Control Structures: Are the structures within a language that
allow us to control the flow of execution through a program or
script.
 Grouped into conditional (branching) structures (e.g. if/else) and
repetition structures (e.g. while loops).
 Example if/else if/else statement:

if ($foo == 0) {
echo ‘The variable foo is equal to 0’;
}
else if (($foo > 0) && ($foo <= 5)) {
echo ‘The variable foo is between 1 and 5’;
}
else {
echo ‘The variable foo is equal to’.$foo;
}
54
If ... Else...

If (condition) <?php
If($user==“John”)
{ {
Print “Hello John.”;
Statements; }
Else
} {
Print “You are not John.”;
Else }
{ ?>

Statement;
} No THEN in PHP

55
While Loops
<?php
While (condition) $count=0;
While($count<3)
{ {
Statements; Print “hello PHP.”;
$count += 1;
} // $count = $count + 1;
// or
// $count++;
?>

Output
hello PHP. hello PHP. hello PHP.

56
PHP Functions
 Functions MUST be defined before then can be
called
 Function headers are of the format
function functionName($arg_1, $arg_2, …, $arg_n)

 Note that no return type is specified


 Unlike variables, function names are not case
sensitive
 Eg. foo(…) == Foo(…) == FoO(…)

57
Functions example
<?php
// This is a function
function foo($arg_1, $arg_2)
{
$arg_2 = $arg_1 * $arg_2;
return $arg_2;
}

$result_1 = foo(12, 3); //


Store the function
echo $result_1; // Outputs 36
echo foo(12, 3); // Outputs 36
?>

58
PHP - Forms
•Access to the HTTP POST and GET data is simple in PHP
•The global variables $_POST[] and $_GET[] contain the
request data
<?php
if ($_POST["submit"])
echo "<h2>You clicked Submit!</h2>";
else if ($_POST["cancel"])
echo "<h2>You clicked Cancel!</h2>";
?>
<form action="form.php" method="post">
<input type="submit" name="submit" value="Submit">
<input type="submit" name="cancel" value="Cancel">
</form>

59
The End!
Thank You!
60

You might also like