Client vs Server Scripting PHP is a server side scripting method. Why might server side scripting not be a good idea? What is a solution? We could try having the user download scripts that run on their local machine. This is called client side scripting.
Client- Side Scrip.ng download a script/program to the browser, and have it execute within the browser environment: o JavaScript / ECMAScript / JScript o VBScript o TCL we will examine JavaScript as a proxy for this group of client-side languages; much of what we study is immediately transferable to other languages in the group JavaScript is the dominant client-side programming language the basis for much of what we now refer to as Rich Internet Applications (RIA) or Web 2.0
Client- Side Scrip.ng Advantages : o Immediate responsiveness no need for network data exchange with server and page reload by browser e.g. jquery list filtering client-side data validation local code often 10-100 times faster than server interaction o Potential for offline Web apps (supported in HTML5) o Off loads processing tasks to client that is usually less loaded than server
Client- Side Scrip.ng Disadvantages: o scripts themselves must be downloaded from server, increasing size and time for page loads o scripts are readable, can t protect source code (IP), though can obfuscate them o security risk posed by downloaded code; e.g. much of today s malware utilizes client-side scripting to enter your computer
History and Java Relationship JS had to look like Java only less so, be Java s dumb kid brother or boy-hostage sidekick. Plus, I had to be done in ten days or something worse than JS would have happened." -- Brandon Eich, Netscape Communications A lot of syntactic overlap with Java, e.g. comments, if-stmts, forloops, while-stmts are the same as in Java. Some things are very different, e.g. data typing rules, class/object handling, handling of Boolean values, variable scoping, treatment of functions
Using JavaScript In an HTML document, we place JavaScript inside <script> </script> tags. These tags can appear in the <head> </head> or the <body> </body> Can include from a file using: <script language=javascript src= file.js > </script> 6
Key JS Concepts The document object allows us to refer to and change the webpage. document.write( Hi there. ); document.bgcolor( black ); document.fgcolor( red ); Set html content using innerhtml: document.getelementbyid( my_id ).innerhtml = new stuff ; Message Boxes: window.alert( Welcome ); window.confirm( Do you want to quit? ); window.prompt( Please enter your age: );
Event Handlers We can make the page dynamic with events: <some-html-element some-event= JavaScript'> Event handlers Can be a buaon, image, div. onclick onchange onload onmouseover, onmouseout onkeydown onunload Can be a function().
Using Javascript <!DOCTYPE html> <html> <head> <script> function myfunction() { document.getelementbyid("demo").innerhtml = "Paragraph changed."; } </script> </head> <body> Event handler <p id="demo">a Paragraph.</p> <button type="button" onclick="myfunction()">try it</button> </body></html>
JavaScript Typing Dynamically typed m different than Java or C more like Python, and takes some ideas from functional languages like Scheme m a variable can hold any type of value: q number (8-byte IEEE fp) q string q boolean q function (first-class data type) q Object (DOM or JS) q array (whose elements can be of mixed types) m and can hold values of different types at different times during execution!
JavaScript variables Variable declaration var i = 12, msg = hello ; No block-level scope; what will this function display when called? Example block.html function test() { if ( 1 == 1 ) { var j = 12; } alert(j); // displays what? }
JavaScript Variables Caution If you omit a variable declaration (keyword var): The variable is automatically declared at global scope. May seem like a small point, but beware! can lead to subtle hard-to track-down bugs
Literals Usual number, string, boolean literals Function literals (anonymous, lambda functions) var square = function(x) { return x*x; } Object literals var point = { x:2, y:4 }; Array literals (mixed type) var a = [1, foo,true]; Regular expression literals var a = /[1-9][0-9]*/; Ø creates object of type RegExp CSCB20 Databases and Web Apps JavaScript and jquery 13
JavaScript Comments // single-line comment /* * multi-line comment * multi-line comment */
JavaScript Control Flow if statement: if (test) { statements; } else if (test) { statements; } else { statements; } identical structure to Java's if statement... but JavaScript allows almost any value as a test!
JavaScript Control Flow for loop: for (init; test; update) { statements; } for (var i=0; i<10; i++) { print(i + "\n"); } same as Java while loop: while (test) { statements; } do { statements; } while (test); break and continue keywords same as Java
Boolean values: JavaScript Booleans q false-ish : 0, 0.0, NaN, "", null, undefined q true-ish : all other values Unusual treatment of Boolean values can lead to hard-to-find bugs.
JavaScript the Language Cau.ons testing for wrong false-ish value can have bad results: function login(user) { // passes with 0, "", undefined, false,... if (user.name == null) {... } == produces odd results for false-ish values: "" == false // true 0 == false // true "0" == false // true "" == '0' // false "" == 0 // true null == undefined // true " \t \n " == 0 // true
Document Object Model (DOM) q In the pre- standardized world, browsers had different API s different implementa.ons for different browsers = bad news for developers. q The Document Object Model (DOM) is a W3C standard plasorm- (browser) and language- neutral interface (API) q Allows programs and scripts to dynamically access and update the content, structure and style (virtually all proper.es) of documents (both HTML and XML, although the DOM is targeted more at XML). q Standard is not uniformly implemented by browsers, so some browser- specific code s.ll needed (jquery hides these differences)
DOM: Referencing Objects <body> <form id="myform" name="myform"> <input id="b1" type="button" name="turniton"/> </form> </body> by ID (the preferred approach, why?) document.getelementbyid("b1") by element type document.getelementsbytagname( a") by location within DOM tree (why is this a bad idea?) document.forms[0].elements[0] by element name (deprecated, but still widely used) document.myform.turniton