210304603 FULL STACK

DEVELOPMENT

BCA SEM VI
Prof. Nirav Suthar
Module - 2

1
Client Side Scripting

2
 Why use client-side programming?

●
PHP already allows us to create dynamic web
pages. Why also use client-side scripting?
●
client-side scripting (JavaScript) benefits:
●
usability: can modify a page without having to post
back to the server (faster UI)
●
efficiency: can make small, quick changes to page
without waiting for server
●
event-driven: can respond to user actions like clicks
and key presses
3
●
server-side programming (PHP) benefits:
●
security: has access to server's private data;
client can't see source code
●
compatibility: not subject to browser
compatibility issues
●
power: can write files, open connections to
servers, connect to databases, ...

4
 What is Javascript?
●
a lightweight programming language ("scripting
language")
●
used to make web pages interactive
●
insert dynamic text into HTML (ex: user name)
●
react to events (ex: page load user click)
●
get information about a user's computer (ex: browser
type)
●
perform calculations on user's computer (ex: form
validation)
5
●
a web standard (but not supported
identically by all browsers)
●
NOT related to Java other than by name and
some syntactic similarities

6
 Javascript vs Java
●
Interpreted, not compiled
●
more relaxed syntax and rules
●
key construct is the function rather than the class
●
fewer and "looser" data types
●
variables don't need to be declared
●
errors often silent (few exceptions)
●
"first-class" functions are used in many situations
●
contained within a web page and integrates with its
HTML/CSS content
7
 JavaScript vs. PHP
●
similarities:
– both are interpreted, not compiled
– both are relaxed about syntax, rules, and
types
– both are case-sensitive
– both have built-in regular expressions for
powerful text processing

8
 JavaScript vs. PHP
●
differences:
●
JS is more object-oriented: noun.verb(), less
procedural: verb(noun)
●
JS focuses on user interfaces and interacting
with a document; PHP is geared toward HTML
output and file/form processing
●
JS code runs on the client's browser; PHP code
runs on the web server
9
●
script tag should be placed in HTML page's
head
●
script code is stored in a separate .js file
●
JS code can be placed directly in the HTML
file's body or head (like CSS)
●
but this is bad style (should separate content,
presentation, and behavior
<script src="filename" type="text/javascript"></script>
HTML 10
Event-driven programming

11
 JavaScript functions
●
function name() {
statement
●
;
statement ;
...
●
statement ;
}
● JS
function
●
myFunction() {
alert("Hello!");
●
zalert("How are you?");
} JS

12
●
the above could be the contents of
example.js linked to our HTML page
●
statements placed into functions can be
evaluated in response to user events

13
Document Object Model
(DOM)
●
most JS code manipulates elements on an
HTML page
●
we can examine elements' state
●
e.g. see whether a box is checked
●
we can change state
●
e.g. insert some new text into a div
●
we can change styles
●
e.g. make a paragraph red
14
15
Dom Element Object

16
 Accessing Elements
var name = document.getElementById("id");
JS
<button onclick="changeText();">Click me!</button>
<span id="output">replace me</span>
<input id="textbox" type="text" /> HTML
function changeText() {
var span = document.getElementById("output");
var textBox = document.getElementById("textbox");

textbox.style.color = "red";

} JS

17