Introduction to Client Side Scripting

1
Introduction toClient Side Scripting

• CS 3505

2
Client Side Scripting

• Client side means the Browser is interpreting the
  script
• Script is downloaded with the HTML page
• Client Browser must have a Script Interpreter
• De Facto Standard is JavaScript , Jscript, or
  EmacsScrip all the same
• Learn a some basics Ref Deitel ch7-14
• Greenlaw Chapter 12
• Learn to Get scripts from Web and insert
• http//developer.netscape.com/docs/manuals/js/clie
  nt/jsguide/contents.htm

3
What are Java Scripts?

• Client side Dynamic content

Html file with scripts
dowloads to client
Execute html Calls script
Execute script generates html
Execute html
html
scripts
4
Simple JScript Example

• lt!-- welcome.html --gt
• lt!-- Displaying a line of text --gt
• lthtml gt
• ltheadgt
• lttitlegtSimple JScript Examplelt/titlegt
• ltscript type "text/javascript"gt
• lt!--
• // Script code in here
• document.writeln("lth1gtWelcome to
  JavaScript Programming!lt/h1gt" )
• // --gt
• lt/scriptgt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

5
Six Basic Functions

• 1) Packaging
• 2) Declare variables and allocate memory
• 3) Input data
• 4) Process
• 5) Output data
• 6) Start execution

When grabbing scripts from the web you should ask
yourself how each of these seven functions are
performed by the script and what you need to
change in your application.
6
Elements of jScript Coding
lt!--HTML code--gt lthtmlgtltheadgt lt!-- //1) Package
Jscript --gt ltbodygt // 6) start
execution lt/bodygtlt/bodygt
// Jscript code
// 2) declare variables // 3) Input data // 4)
Process data // 5) Output data
Pop ups Etc.
lt!-- more HTML -gtgt
7
JScript More details

• For more detail on the six functions a script
  must contain see JavaScriptCodingElements.ppt
• Look at some examples
• DynamicPageTemplate input from form
• Onmousemove read write mouse location
• Children_Deitel Recursive tag analyzer

8
Integrating Scripts

• Take script from children_Deitel and integrate it
  into sfanw4
• Steps
• Find script package
• Find input
• Look at processing
• Find and place output
• Set trigger
• Watch out for Context I.e copy lt!DOCTYPE..gt

9
Get JScripts from the Web

• Java scripts are relatively hard to write and
  harder to debug
• Many scripts are available free on the web
• Search for JavaScript source on your favorite
  search engine
• Try http//javascriptsource.com
• I got this clock example
• Since client side source is readily viewable
• You can copy most scripts directly from sites
• In most cases some editing is required
• Need to know enough HTML and Jscript to do this

10
Step 1

• Go to http//javascript.internet.com/

Click on clocks
11
Step 2
Scroll down to find a clock you like. Here the
basic clock is selected.
Click on get the source code
12
Step 3
Follow these instructions
13
Start with an HTML skeleton

• lthtml gt
• ltheadgt
• lttitlegtbasic clock Examplelt/titlegt
• lt/headgt
• ltbodygt
• lt/bodygt
• lt/htmlgt

Add the on load event handler to the body tag
14
Place the clock

• lthtml gt
• ltheadgt
• lttitlegtbasic clock Examplelt/titlegt
• lt/headgt
• ltbody onLoad"clock()"gt
• lt/bodygt
• lt/htmlgt

Add the placement HTML Code to the body
15
Place the clock
Copy and add the actual java script That is the
code between the script tags ltSCRIPT
LANGUAGE"JavaScript"gt lt/scriptgt

• lthtml gt
• ltheadgt
• lttitlegtbasic clock Examplelt/titlegt
• lt/headgt
• ltbody onLoad"clock()"gt
• lt!-- Adjust the placement of the clock in the
  line below --gt
• ltspan id"pendule" style"positionabsoluteleft3
  00top20"gtlt/spangt
• lt/bodygt
• lt/htmlgt

You can put the script definition of a function
in the body as well since it only executes on
load
16
Final Code

• lthtml gt
• ltheadgt
• lttitlegtbasic clock Examplelt/titlegt
• ltSCRIPT LANGUAGE"JavaScript"gt
• SCRIPT CODE GOES HERE
• lt/scriptgt
• lt/headgt
• ltbody onLoad"clock()"gt
• lt!-- Adjust the placement of the clock in the
  line below --gt
• ltspan id"pendule" style"positionabsoluteleft3
  00top20"gtlt/spangt
• lt/bodygt
• lt/htmlgt

17
Save and execute
Check out the code in BasicClock.html
18
On Click Execution

• lthtml gt
• ltheadgt
• lttitlegtbasic clock Examplelt/titlegt
• ltSCRIPT LANGUAGE"JavaScript"gt
• SCRIPT CODE GOES HERE
• lt/scriptgt
• lt/headgt
• ltbody onLoad"clock()"gt
• lt!-- Adjust the placement of the clock in the
  line below --gt
• ltspan id"pendule" style"positionabsoluteleft3
  00top20"gtlt/spangt
• ltp onclick"clock()"gt click here lt/pgt
• lt/bodygt
• lt/htmlgt

Delete the onLoad"clock()"gt