1 / 52

Browser Scripting

Browser Scripting. JavaScript. Introduction. Client-Server Architecture. In a client-server architecture, computation is done either in the client or in the server There are cases where we can choose whether to perform the computation in the client or in the server

taariq
Download Presentation

Browser Scripting

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Browser Scripting JavaScript

  2. Introduction

  3. Client-Server Architecture • In aclient-server architecture, computation is done either in the clientor in theserver • There are cases where we can choose whether to perform the computation in the client or in the server • For example, validating forms • There are cases where we cannot choose where to perform the computation • For example, accessing a database

  4. Client Side Technologies • JavaScript • Developed by Netscape, standardized by ECMA • Supported by all browsers (although not all support the standard) • VBScript • Developed by Microsoft • Supported only by Microsoft Internet Explorer • A light version of Microsoft Visual Basic • Java Applets • Developed by Sun

  5. About Applets • An applet is a Java class that runs in a frame that is embedded in a Web page <objecttype="application/x-java-applet" classid="myApplet.class" width="x"height="y"> • When a browser loads the Web page, the applet byte-code (.class file) is downloaded to the client box and executed by the browser • Commonly used for games, graphics, etc.

  6. Browser Scripting • Browser scripts are procedural programs embedded inside HTML <script type="text/javascript">script</script> <script type="text/vbscript">script</script> • Can read and manipulate HTML elements, CSS properties, and the browser itself

  7. Web Architecture for Scripts Client Server Web browser Web (HTTP) Server HTML Page: <SCRIPT> …code..… </SCRIPT> Internet HTML/HTTP TCP/IP HTML/HTTP TCP/IP built-in Script interpreter HTML pages with embedded script

  8. Why are Scripts Needed? • Generating HTML content dynamically • Monitoring and responding to user events • Validating forms before submission • Manipulating HTTP cookies • Interaction among the frames and windows of the browser

  9. JavaScript History • Introduced in Netscape 2 (1996) • Standardized by ECMA under the name ECMAScript (1997-1999) • The latest version is ECMAScript 3, and it is equivalent to JavaScript 1.5

  10. JavaScript Basics

  11. JavaScript is NOT Java! • JavaScript is not compiled • JavaScript is typically executed by Web browsers and not as stand-alone applications • JavaScript and Java have some similarity in syntax • The choice of the name is mainly for historical reasons

  12. Dynamic HTML Content: Example 1 <html> <head><title>JS Example</title></head> <body> <h2>Before the script</h2> <script type="text/javascript"> document.write('<h1>In the script<\/h1>') </script> <h2>After the script</h2> </body></html>

  13. Dynamic HTML Content: Example 2 <html> <head><title>JS Example</title></head><body> <h2>Before the script</h2><h1> <script type="text/javascript"> document.write(new Date().toLocaleString()) </script> </h1><h2>After the script</h2> </body></html>

  14. Dynamic HTML Content: Example 3 <h2>Hello and <i><script type="text/javascript"> hours =new Date().getHours(); if(hours <10){ document.write("good morning")} else{document.write("good day")} </script></i>. </h2>

  15. Basic Constructs • Statement blocks • Semicolon (;) is optional at end of line var x=5, y=7; document.write(x+y); var x=5 document.write(x); • Conditions: if, if-else, ?:, switch if (condition) {statements if true} else {statements if false} x= (y>0)? y:0 • Loops: for, while, do-while • while (condition) {statements}

  16. Variables • JavaScript variables are not typed! (but values are) • var x = 5; x="abcd";... • Thus, the value of a variable is characterized by both value and type • Variables are declared with var keyword: • var x; var y=5; • A variable name consists of letters, digits, and underscores (_), and does not begin with a digit

  17. Data Types • Values have one the following types: • number: 5, 2.3, 0xFF, 6.67e-11 • object:new Date() • Arrays: [1,"ab ba",17.234] • null • string:"Hello World" • boolean:true, false • undefined:no value assigned... You can use typeof(x) to get the type ofx: number, string, object...

  18. Some of the Reserved Words typeof use var void while with abstract as break case catch class const continue default delete do in instanceof interface is namespace new null package private public return else export extends false final finally for function if implements import  static super switch this throw true try

  19. Operators • Arithmetic: +   ++   -    --   *   /   % • Comparison: == != === !== > >= < <= • Logical: & && | || ! • Bitwise: & | ^ ~ << >> >>> • String: + • Assignments: = += -= *= /= <<= |= ...

  20. Types of Equality • The equals == checks if both operands are equal after performing type conversion • The equals === checks if both operands are of the same type and equal • Example: • Is 34 == "34" ? Is 34 =="3"+"4" ? • Is 34 ==="3"+"4" ? Is 34 !=="3"+"4" ?

  21. An Example <script type="text/javascript"> for(varcounter =1; counter <=8;++counter){ var fontsize= counter +10; fontsize+="pt"; document.write("<p style='font-size: "+fontsize+"'>" +"Font size "+fontsize+" <\/p>"); } </script>

  22. Functions

  23. Functions • JavaScript functions are special objects with operator () • Syntax: function fname(args...){statements} • Usually, functions are defined at the head of the file • Why? • Some functions are predefined • For example, parseInt(string) • Functions can return values

  24. Function Example <html> <head> <script type="text/javascript"> functionadd(x,y){ return x+y; } </script> </head> <body> <h1> <script type="text/javascript"> sum =add(4,5); document.write("4+5="+sum); </script> </h1></body> </html>

  25. Function Values • Numbers and Booleans are passed to functions by value • Objects and strings are passed to functions by reference • Numbers and Boolean values are always returned by value • Objects and strings are returned by reference

  26. Undeclared Arguments • Function may receive arguments without declaring them • Within a function, its arguments are held in the arguments array • can be accessed with arguments[i] • The number of arguments is arguments.length • Hence, it is possible to define functions that take any number of arguments

  27. An Example What is the result of the following code? functionmyConcat(separator){ var result=""; // iterate through arguments   for(var i=1; i<arguments.length; i++){  result += arguments[i]+ separator;    } return result; } con =myConcat(", ","red","orange","blue");

  28. Predefined Functions • JavaScript include several predefined functions • For example, • eval(code-string)–gets a string of JavaScript code, evaluates it and executes it • It allows dynamic code execution • parseInt(string) – takes a string argument and converts its beginning to an integer (or return NaN)

  29. Variable Scopes • JavaScript variables are recognized inside their declaration scope • Hence, global variables should be declared outside the functions • A variable declared in a function can also be global, if var is omitted • However, avoid this bad style...

  30. Objects and Arrays

  31. Object Model • JavaScript objects are similar to associative arrays • That is, an object associates identifiers (e.g., firstName) with values (attributes) (e.g., "John") • Those values may be other objects (nested objects) • Those values can also be functions (methods) • e.g., function setPersonAge(age) {this.age = age} • When o.f() is invoked, o can be referred to as this

  32. Creating Objects • Objects can be created in several ways: • Object initializers • Object assignments var theNissan = {make:"Nissan", year:2003, color:"blue"} theMazda ={ make:"Nissan"} theMazda.year =2002; theMazda.color="black";

  33. Creating Objects (cont) • Object Constructors • define a constructor function • create the new object using new functioncar(make,year,color) { this.make = make this.year = year this.color = color } theHonda =newcar("Honda",2001,"green")

  34. Defining Methods • Methods are associated with objects just like attributes function niceString() { return"<span style='color:"+this.color +"'>"+ this.make +" "+this.year +"<\/span>" } theNissan = {make:"Nissan",year:2003,color:"blue",str:niceString}

  35. Defining Methods (cont) theNissan={make:"Nissan", year:2003, color:"blue"} theNissan.str = niceString; functioncar(make,year,color) { this.make = make this.year = year this.color = color this.str = niceString } theHonda =newcar("Honda",2001,"green")

  36. Accessing Object Properties • Object attributes can be accessed in several ways: • object.attName • object["attName"] • Thus, object methods are invoked in Java/C++ style: • object.method(arguments) • Alternatively: • object["method"](arguments)

  37. The Complete Example function niceString() { return"<span style='color:"+this.color +"'>"+ this.make +" "+this.year +"<\/span>" } functioncar(make,year,color) { this.make = make; this.year = year; this.color = color; this.str = niceString } var theHonda =newcar("Honda",2001,"green"); document.write(theHonda.str());

  38. Array Objects • Arrays are supported as objects • Attribute length • Methods include: concat, join, pop, push, reverse, sort, shift, ... • Arrays can be passed to functions as arguments • The array is passed by-reference

  39. Creating Arrays • var a = ["red", "blue", "green"] • Allocates an array of 3 cells and initializes the values • var b = new Array(5) • Allocates an array of 5 cells without initializing values • var c = new Array() • Creates a new empty array

  40. Array Elements • Array elements need not have the same type • arr1 = ["hello", 1, true] • Java-like access: arr[i] • Array indices need not be contiguous • arr1[10] = 66 • Multi-dimensional arrays are arrays of arrays • var matrix = [ [0, 1, 1], [1, 1, 0], [0, 0, 0]]

  41. Miscellaneous

  42. JavaScript and XHTML Strict • Embedding JavaScript code inside XHTML may violate XML rules • e.g., x<5 && x>2 • One solution is to import JavaScript code from external files, e.g.: <script type="..." src="jsfile.js"/> • Always a good habit... • Another solution: wrap the code in an XML CDATA section

  43. Wrapping Code in CDATA <script type="text/javascript"/> //<![CDATA[ regular JavaScript code ... //]]> </script>

  44. The String Object • JavaScript has a built-in String object • not the primitive string! • Create a String object from a string primitive: • myString = new String("This is a string object") • Extract the primitive string from a String object: • str = myString.valueOf()

  45. charAt (index) charCodeAt(index) concat(string) fromCharCode(value1, value2, …) indexOf(substring, index) lastIndexOf(substring, index) slice(start, end) split(string) substr(start, length) substring(start, end) toLowerCase() toUpperCase() valueOf() match(regexp) String Common Methods

  46. An Example - Format Verification • What does the following function do? function getString() { var result =null; while(result==null) { var answer = prompt("Your first name:") if(answer!=null) { result =new String(answer); result = result.toLowerCase().match("^[a-z]+$"); } if(result==null) { alert("Don't mess with me!") } } return answer }

  47. The Math Object • The object Math is used for mathematical operations • E.g.,Math.pow(x,2) • Other useful functions: • cos(x) • sin(x) • tan(x) • exp(x) • pow(x, y) • sqrt(x) • log(x) • max(x, y) • min(x, y) • abs(x) • round(x) • ceil(x) • floor(x) • Math Also includes constants such as: Math.E, Math.PI

More Related