1. Client Scripting1 Internet Systems Design

2. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize, and automate the facilities of an existing system.” - ECMA International

3. Client Scripting3 What is JavaScript? n JavaScript was designed to add interactivity to HTML pages n JavaScript is a scripting language - a scripting language is a lightweight programming language n A JavaScript is lines of executable computer code n A JavaScript is usually embedded directly in HTML pages n JavaScript is an interpreted language (means that scripts execute without preliminary compilation) n Everyone can use JavaScript without purchasing a license n JavaScript is supported by all major browsers, like Netscape and Internet Explorer Note: Much of this presentation is taken from: http://www.w3schools.com/js/js_intro.asp

4. Client Scripting4 Are Java and JavaScript the same? n NO! n Java and JavaScript are two completely different languages in both concept and design! n Java (developed by Sun Microsystems) is a powerful and much more complex programming language - in the same category as C and C++. From: http://www.w3schools.com/js/js_intro.asp

5. Client Scripting5 What can a JavaScript Do? n 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 n JavaScript can put dynamic text into an HTML page - A JavaScript statement like this: document.write(" " + name + " ") can write a variable text into an HTML page n 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 n JavaScript can read and write HTML elements - A JavaScript can read and change the content of an HTML element n 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 From: http://www.w3schools.com/js/js_intro.asp

6. Client Scripting6 n Computations are performed on the client’s machine, which is why they cannot refer to a database on a server. n Client scripting can lessen the burden on servers and are particularly useful for such tasks as validating data before sending to server side to be processed. n They are browser-specific, so the same code may be interpreted differently depending on the browser being used.

7. Client Scripting7 Client Scripting Languages n Netscape JavaScript n Microsoft Jscript –Developed after Netscape JavaScript n ECMAScript –Developed based on JavaScript and JScript n VBScript

8. Client Scripting8 JavaScript n We will concentrate on JavaScript n JavaScript was originally developed by Netscape and first appeared in Netscape Navigator 2.0 n Compatible with Internet Explorer starting with version 3.0 and other web browsers such as Mozilla

9. Client Scripting9 JavaScript vs. Java n JavaScript is entirely different from the Java programming language n Java is a programming language developed by Sun n However, there are some syntax similarities between JavaScript and Java –It is possible to copy and paste some code from one to the other

10. Client Scripting10 Compiled Vs. Interpreted n Compiled code – converted to machine instructions ahead of time by compiling program. n Interpreted programs must be converted to machine instructions when run. n Compiled programs therefore generally faster than interpreted. n Usually easier to develop interpreted programs since no necessity to recompile program after changes made.

11. Client Scripting11 Object Oriented n An Object can have: –Methods –Properties n Can use objects in JavaScript

12. Client Scripting12 JavaScript n HTML is limited in functionality i.e. can only display text and images n JavaScript is an advanced scripting language that can be embedded within HTML to enhance a website n Most web browsers have built-in JavaScript interpreters

13. Client Scripting13 Client-Side JavaScript Example 1 http://www.engineering.uiowa.edu/~ie181/JavaScript/HelloWorld.html document.write("Hello World!") Note Object

14. Client Scripting14 Results of Example 1

15. Client Scripting15 JavaScript n or and are used to surround JavaScript code n The Script tags let the web browser know that whatever is inside the tag must be interpreted by the JavaScript interpreter

16. Client Scripting16 Ending Statements With a Semicolon? n With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon. n Many programmers continue this habit when writing JavaScript, but in general, semicolons are optional! However, semicolons are required if you want to put more than one statement on a single line. From: http://www.w3schools.com/js/js_intro.asp

17. Client Scripting17 How to Handle Older Browsers n Browsers that do not support scripts will display the script as page content. To prevent them from doing this, we may use the HTML comment tag: <!– some statements //--> n The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line.

18. Client Scripting18 JavaScript n JavaScript is also an object-oriented programming language n Portions of code are programmed as objects with certain behaviors –In example 1, ‘document’ is the object, while ‘write’ is the method to write the text –Objects can also have properties, which we saw with the ActiveX property box

19. Client Scripting19 JavaScript Reference n Refer to: http://www.w3schools.com/js/http://www.w3schools.com/js/ n Provides a complete reference to JavaScript syntax

20. Client Scripting20 Variables n A variable is a "container" for information you want to store. A variable's value can change during the script. You can refer to a variable by name to see its value or to change its value. n Rules for Variable names: –Variable names are case sensitive –They must begin with a letter or the underscore character n You can create a variable with the var statement: var strname = some value n You can also create a variable without the var statement: strname = some value

21. Client Scripting21 From: http://www.w3schools.com/js/js_operators.asp

22. Client Scripting22 JavaScript Objects, Methods, and Properties n Function n Specifies a string of JavaScript code to be compiled as a function n Syntax function name([param[, param[,... param]]]) { statements }  To call the function: name ();

23. Client Scripting23 JavaScript Objects, Methods, and Properties n Math n A built-in object that has properties and methods for mathematical constants and functions n function getAbs(x) { return Math.abs(x) }

24. Client Scripting24 JavaScript Statements n For n Creates a loop that consists of three optional expressions, enclosed in parentheses and separated by semicolons, followed by a block of statements executed in the loop n Syntax for ([initial-expression]; [condition]; [increment-expression]) { statements }

25. Client Scripting25 JavaScript Statements n IF…Else n Executes a set of statements if a specified condition is true. If the condition is false, another set of statements can be executed. n Syntax if (condition) { statements1 } [else { statements2 }]

26. Client Scripting26 JavaScript Statements n Var n Declares a variable, optionally initializing it to a value. n Syntax var varname [= value] [..., varname [= value] ]

27. Client Scripting27 JavaScript Comments n Syntax // comment text /* multiple line comment text */

28. Client Scripting28 JavaScript Example 2 n http://www.engineering.uiowa.edu/~ie181/Jav aScript/SquareRoot.html http://www.engineering.uiowa.edu/~ie181/Jav aScript/SquareRoot.html n User enters a number in the “number” text box and clicks the “get square root!” button to call the function run_cal() n The Internet Explorer JavaScript interpreter performs the computation of the JavaScript and the corresponding square root is displayed to the user

29. Client Scripting29 JavaScript Example 2 Code <!-- function run_cal() { var numb1=document.calc.num1.value; var the_ans=Math.sqrt(numb1); if (numb1<0) the_ans="No Negatives"; document.calc.the2root.value=the_ans; } //--> Number: Square Root: Note: Script in header

30. Client Scripting30 Example 2 Results

31. Client Scripting31 Example 3 n Age Finder JavaScript Example http://javascript.internet.com/clocks/age- finder.html http://javascript.internet.com/clocks/age- finder.html n Code from http://javascript.internet.com/ is here:http://javascript.internet.com/ http://www.engineering.uiowa.edu/~ie181/ JavaScript/AgeFinder.html

32. Client Scripting32 Note user data input code: var mm = prompt('What month were you born in?','1-12'); var bday = prompt('What day were you born on?','1-31'); var byear = prompt('What year were you born in?','1975');

33. Client Scripting33 Example 3 Results