Web Programming

1
Web Programming

• Marios Tziakouris
• University of Cyprus
• EPL602
• Fall 2004

2
Agenda

• Background of web apps
• Intranets/Extranets, Internet
• Scripting languages
• Client-side Vs Server-side scripting
• Next generation web apps
• Web programming issues
• Javascript crash course

3
Objectives

• Understand the scope, complexity and other
  important issues in Web Programming design and
  implementation
• Have comprehensive knowledge of up-to-date
  technologies for Web Development
• Be able to develop Web-based, database-driven
  information systems using efficient and effective
  technologies
• Be exposed to different technologies in
  developing web based apps

4
Background of web apps

• All took off with the introduction of the
  Internet
• Easy/light way of distributing information
• First web pages/apps
• Static HTML text, images
• Enterprises embrace the idea
• First Intranets appear
• Then Intranets became Extranets
• And then Extranets became Internet (with security
  flavors added)

5
What is a web application

• To build web applications, first you need to
  understand the foundations of the web
• HyperText Markup Language (HTML) Presentation
• HyperText Transfer Protocol (HTTP) - Transport
• Development Frameworks (CGI, ASP, JSP, Servlets)
  
• Cookies

6
Background of web apps

• Why Intranets/Extranets/Internets took off
• Easy way of distributing information
• Significantly reduces connectivity costs
  (Internet)
• Instant updates (no client maintenance is needed)
  
• Preparation of docs/pages using HTML was fairly
  easy
• Accessible anywhere, anytime

7
Intranets/Extranets, Internet

• As with any promising technology, IT people
  wanted more
• Static pages were not enough
• some logic was required
• database information could not be retrieved
• no user interactivity
• one-way communication
• Innovation of scripting languages
• Both server-side and client-side
• Scripting languages refer in mixing code with
  HTML
• They are written directly in the web page
• They are interpreted languages

8
Client VS Server side scripting

• Client-side scripting
• Javascript, VBScript, Perl e.t.c
• Executed by the browser so there are
  compatibility and security issues
• Code is viewable by user
• Enhances interactivity
• Offloads web server processing cycles (e.g Forms
  validation)
• Sometimes requires additional knowledge of DHTML
  and DOM (Document Object Model)
• Normally Javascript is the safest option for
  Internets. Use any other if you can control the
  browser version (Intranets)

9
Client VS Server side scripting

• Server-side scripting
• The cornerstone of web programming
• Highly capable technology nowadays almost
  identical possibilities as normal programming
• Allows full extensibility
• Allows secure access to databases (very
  important)
• Idea is that all logic is executed and managed on
  the server and the browser only renders pure HTML
  pages
• Have extensions according to the scripting
  language (i.e. .asp, .jsp, .php, .pl)
• Contains pure HTML, server-side scripting code,
  client-side scripting code and other objects i.e.
  ActiveX, Java applets, Macromedia Flash

10
Client VS Server side scripting

• Server-side scripting
• First technology CGI (Common Gateway Interface)
• Highest install base, even today
• Then ASP/JSP/PHP and few others
• Currently
• ASP/COM/DCOM Equivalent to Java Servlets
• Custom ISAPI applications Like CGIs but less
  resource intensive
• Java Servlets For enterprise multi-tier web apps
• Java RMI Similar for multi-tier web apps
• ASP.NET Major Breakthrough

11
Client VS Server side scripting

• Other technologies (mostly client-side)
• ActiveX Created by Visual C or VB
• Must be loaded on the client except when used as
  COM/DCOM
• Java applets
• Client-side enhances interactivity, saves
  roundtrips
• Macromedia Flash
• For animations and demonstrations

12
Next generation web apps

• Web Services
• Redefines the way information are shared
• A whole new era for exchanging information
  between entities in a standard way
• Based on
• SOAP
• WSDL
• UDDI
• Focus of all major industry players (Microsoft,
  IBM)

13
Web Programming Issues

• User Identification
• HTTP protocol is stateless
• Session handling
• Server-side Vs Client-side scripting
• Where my code is running
• Client control and maintenance policy
• Security
• HTML source available
• Server/Application exposed to public
• Sensitive data
• Access to local network

14
Web Programming Issues

• 24x7 availability
• Protect from DoS attacks
• No downtime or defacement
• Volume
• Multi-tier
• Web Farms

15
JavaScript Crash Course

• JavaScript was designed to add interactivity to
  HTML pages
• JavaScript is a scripting language i.e.
  lightweight programming language
• A JavaScript is usually embedded directly in HTML
  pages
• JavaScript is an interpreted language (means that
  scripts execute without preliminary compilation)
  
• JavaScript is supported by all major browsers,
  like Netscape and Internet Explorer
• Java and Javascript are not the same although
  they share some common syntax

16
JavaScript Crash Course

• What can a JavaScript Do?
• JavaScript gives HTML designers a programming
  tool - HTML authors are normally not programmers,
  but JavaScript is a scripting language with a
  very simple syntax! Almost anyone can put small
  "snippets" of code into their HTML pages
• JavaScript can put dynamic text into an HTML page
  - A JavaScript statement like this
  document.write("lth1gt" name "lt/h1gt") can write
  a variable text into an HTML page
• JavaScript can react to events - A JavaScript can
  be set to execute when something happens, like
  when a page has finished loading or when a user
  clicks on an HTML element
• JavaScript can read and write HTML elements - A
  JavaScript can read and change the content of an
  HTML element
• JavaScript can be used to validate data - A
  JavaScript can be used to validate form data
  before it is submitted to a server, this will
  save the server from extra processing

17
JavaScript Crash Course

• Inserting Javascript into an HTML page
• lthtmlgt
• ltbodygt
• ltscript type"text/javascript"gt
• document.write("Hello World!")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt
• Handling old browsers
• ltscript type"text/javascript"gt
• lt!-- some statements //--gt
• lt/scriptgt
• Note that semicolons are optional

18
JavaScript Crash Course

• Javascript is usually placed in the HEAD section
• Make sure that the function is loaded before used
• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• some statements
• lt/scriptgt
• lt/headgt
• ltbodygt
• Some HTML
• lt/bodygt
• You can place any number of scripts in one page
• Can write code to a file and load the file
• lthtmlgt
• ltheadgt
• ltscript src"xxx.js"gtlt/scriptgt
• lt/headgt
• ltbodygt lt/bodygt
• lt/htmlgt

19
JavaScript Crash Course

• Variables
• Used to store information
• Variable name are case sensitive
• Must begin with a letter or the underscore
• Example
• var strname Paraskeuas
• Or
• strname " Paraskeuas
• Scope of variables are as usual
• Local within the functions
• Global (page level) if declared outside the
  functions

20
JavaScript Crash Course

• Arithmetic Operators

21
JavaScript Crash Course

• Assignment Operators

22
JavaScript Crash Course

• ComparisonOperators

23
JavaScript Crash Course

• Logical Operators

24
JavaScript Crash Course

• Concatenation
• txt1"What a very"
• txt2"nice day!"
• txt3txt1 txt2
• txt3 contains What a very nice day!

25
JavaScript Crash Course

• Functions
• Creating functions
• function myfunction(argument1,argument2,etc)
• some statements
• Functions with returning values
• function result(a,b)
• cab
• return c
• Calling Functions
• myfunction(argument1,argument2,etc)

26
JavaScript Crash Course

• Control Structures
• IF and If..Else statement
• ltscript type"text/javascript"gt
• //If the time on your browser is less than 10,
• //you will get a "Good morning" greeting.
• var dnew Date()
• var timed.getHours()
• if (timelt10)
• document.write("ltbgtGood morninglt/bgt")
• lt/scriptgt

27
JavaScript Crash Course

• Switch statement
• ltscript type"text/javascript"gt
• //You will receive a different greeting based
• //on what day it is. Note that Sunday0,
• //Monday1, Tuesday2, etc.
• var dnew Date()
• theDayd.getDay()
• switch (theDay)
• case 5
• document.write("Finally Friday")
• break
• case 6
• document.write("Super Saturday")
• break
• case 0
• document.write("Sleepy Sunday")
• break
• default

28
JavaScript Crash Course

• Looping structures
• while
• while (condition)
• code to be executed
• do...while
• do
• code to be executed
• while (condition)
• for
• for (initialization condition increment)
• code to be executed

29
JavaScript Crash Course

• Document Object Model (DOM)
• Contains all HTML elements loaded in a web page
• Can be used by scripting languages to manipulate
  HTML on the fly
• DOM objects

30
JavaScript Crash Course

• Anchor Object (Change URL and text)
• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function myHref()
• document.getElementById('myAnchor').innerText"Vis
  it W3Schools"
• document.getElementById('myAnchor').href"http//w
  ww.w3schools.com"
• lt/scriptgt
• lt/headgt
• ltbodygt
• lta id"myAnchor" href"http//www.microsoft.com"gtV
  isit Microsoftlt/agt
• ltformgt
• ltinput type"button" onclick"myHref()"
  value"Change URL and text"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

31
JavaScript Crash Course

• Display the names of all elements in a form
• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function showFormElements(theForm)
• str"Form Elements "
• for (i0 ilttheForm.length i)
• str" \n " theForm.elementsi.name
• alert(str)
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltformgt
• First name ltinput type"text" name"fname"
  size"20"gt
• ltbr /gt
• Last name ltinput type"text" name"lname"
  size"20"gt
• ltbr /gtltbr /gt

32
JavaScript Crash Course

• Writing formatted text
• lthtmlgt
• ltbodygt
• ltscript type"text/javascript"gt
• document.write("lth1gtHello World!lt/h1gt")
• lt/scriptgt
• lt/bodygt
• lt/htmlgt

33
JavaScript Crash Course

• Submitting a form
• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function formSubmit()
• document.forms.myForm.submit()
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltform name"myForm" actionsample2.asp"
  method"get"gt
• Firstname ltinput type"text" name"firstname"
  size"20"gtltbr /gt
• Lastname ltinput type"text" name"lastname"
  size"20"gtltbr /gtltbr /gt
• ltinput type"button" onclick"formSubmit()"
  value"Submit"gt
• lt/formgt
• lt/bodygt
• lt/htmlgt

34
JavaScript Crash Course

• Validating a form
• lthtmlgt
• ltheadgt
• ltscript type"text/javascript"gt
• function validate()
• xdocument.myForm
• atx.email.value.indexOf("_at_")
• if (at -1)
• alert("Not a valid e-mail")
• return false
• lt/scriptgt
• lt/headgt
• ltbodygt
• ltform name"myForm" action"tryjs_submitpage.htm"
  onsubmit"return validate()"gt
• Enter your E-mail

35
Javascript Resources

• http//www.javascript.com
• http//www.pageresource.com/jscript/
• http//www.htmlgoodies.com/beyond/js.html
• http//javascript.internet.com/
• http//javascriptkit.com/
• Use Google
• Book Professional Javascript by Wrox