Introduction to Client Side Scripting CS 3505

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 ent/jsguide/contents.htm

What are Java Scripts? Client side Dynamic content dowloads to client Html file with scripts html scripts Execute html Calls script Execute script generates html Execute html

Simple JScript Example Simple JScript Example <!-- // Script code in here document.writeln(" Welcome to JavaScript Programming! " ); // -->

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.

Elements of jScript Coding <!-- //1) Package Jscript --> // 6) start execution // 2) declare variables // 3) Input data // 4) Process data // 5) Output data // Jscript code > Pop ups Etc.

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

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

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 –I got this clock examplethis 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

Step 1 Go to Click on clocks

Step 2 Scroll down to find a clock you like. Here the basic clock is selected. Click on get the source code

Step 3 Follow these instructions

Start with an HTML skeleton basic clock Example Add the on load event handler to the body tag

Place the clock basic clock Example Add the placement HTML Code to the body

Place the clock basic clock Example Copy and add the actual java script That is the code between the script tags … You can put the script definition of a function in the body as well since it only executes “on load”

Final Code basic clock Example … SCRIPT CODE GOES HERE…

Save and execute Check out the code in BasicClock.html

On Click Execution basic clock Example … SCRIPT CODE GOES HERE… click here Delete the onLoad="clock()">