Client Scripting

1. Client Scripting Internet Systems Design Client Scripting

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

3. What is JavaScript? • JavaScript was designed to add interactivity to HTML pages • JavaScript is a scripting language - a scripting language is a lightweight programming language • A JavaScript is lines of executable computer code • A JavaScript is usually embedded directly in HTML pages • JavaScript is an interpreted language (means that scripts execute without preliminary compilation) • Everyone can use JavaScript without purchasing a license • 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 Client Scripting

4. Are Java and JavaScript the same? • NO! • Java and JavaScript are two completely different languages in both concept and design! • 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 Client Scripting

5. 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("<h1>" + name + "</h1>") 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 From: http://www.w3schools.com/js/js_intro.asp Client Scripting

6. Client Scripting • Computations are performed on the client’s machine, which is why they cannot refer to a database on a server. • 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. • They are browser-specific, so the same code may be interpreted differently depending on the browser being used. Client Scripting

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

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

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

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

11. Object Oriented • An Object can have: • Methods • Properties • Can use objects in JavaScript Client Scripting

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

13. Client-Side JavaScript Example 1 http://www.engineering.uiowa.edu/~ie181/JavaScript/HelloWorld.html <html> <body> <script type="text/javascript"> document.write("Hello World!") </script> </body> </html> Note Object Client Scripting

14. Results of Example 1 Client Scripting

15. JavaScript • <SCRIPT Language="JavaScript"> or <SCRIPT type="text/javascript"> and </SCRIPT> are used to surround JavaScript code • The Script tags let the web browser know that whatever is inside the tag must be interpreted by the JavaScript interpreter Client Scripting

16. Ending Statements With a Semicolon? • With traditional programming languages, like C++ and Java, each code statement has to end with a semicolon. • 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 Client Scripting

17. How to Handle Older Browsers • 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: <script type="text/javascript"> <!– some statements //--> </script> • The two forward slashes at the end of comment line (//) are a JavaScript comment symbol. This prevents the JavaScript compiler from compiling the line. Client Scripting

18. JavaScript • JavaScript is also an object-oriented programming language • 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 Client Scripting

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

20. Variables • 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. • Rules for Variable names: • Variable names are case sensitive • They must begin with a letter or the underscore character • You can create a variable with the var statement: var strname = some value • You can also create a variable without the var statement: strname = some value Client Scripting

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

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

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

24. JavaScript Statements • For • 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 • Syntaxfor ([initial-expression]; [condition]; [increment-expression]) {   statements} Client Scripting

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

26. JavaScript Statements • Var • Declares a variable, optionally initializing it to a value. • Syntaxvar varname [= value] [..., varname [= value] ] Client Scripting

27. JavaScript Comments • Syntax// comment text/* multiple line comment text */ Client Scripting

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

29. JavaScript Example 2 Code Note: Script in header <html> <HEAD> <SCRIPT language="JavaScript"> <!-- 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; } //--> </SCRIPT> </HEAD> <Body> <P> <FORM name="calc"> Number: <INPUT TYPE="text" name="num1" size="5"> Square Root: <INPUT TYPE="text" name="the2root" size="15" Readonly> <P> <INPUT TYPE="button" value="Get Square Root!" onClick="run_cal()"> </FORM> </body> </html> Client Scripting

30. Example 2 Results Client Scripting

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

32. 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'); Client Scripting

33. Example 3 Results Client Scripting