School of Computing and Information Systems CS 371 Web Application Programming Client-side

School of Computing and Information Systems CS 371 Web Application Programming Web-based Applications Internet clie nt server

School of Computing and Information Systems CS 371 Web Application Programming Desktop vs Web-based traditional desktop applications single user, one location data is stored locally can maintain state as fast as the machine web-based applications data is stored in the cloud stateless data sent over public network as fast as the network/client/server

School of Computing and Information Systems CS 371 Web Application Programming REpresentational State Transfer (REST) software architecture clients and servers client sends request when ready for new state server returns new state with links for new requests constraints client-server stateless cacheable layered system code on demand uniform interface HTTP verbs: GET, POST, PUT, etc.

School of Computing and Information Systems CS 371 Web Application Programming JavaScript Origins Syntax and functions Arrays Objects Special features Accessing the DOM

School of Computing and Information Systems CS 371 Web Application Programming JavaScript Origins 1995: Netscape creates LiveScript (quickly changed to JavaScript) Microsoft introduces VBScript and then Jscript 1996: Netscape proposes ECMAScript specification as a standard 1997: ECMA-262 JavaScript is cross-browser compatible most incompatibility issues arise in differences in the DOM and CSS

School of Computing and Information Systems CS 371 Web Application Programming JavaScript - Implementation scripts can be placed internally using tags externally using typically put functions in the head section and scripts as needed in the body

School of Computing and Information Systems CS 371 Web Application Programming JavaScript basic syntax similar to c/c++, java semicolons at end of lines are optional use to prevent older browsers from displaying javaScript code comments - use both // and /*…*/ JavaScript operates in a sandbox, i.e. browser puts a protective wall around code

School of Computing and Information Systems CS 371 Web Application Programming Operators and control structures operators are similar to C and Java except == and != work with strings if, else, switch are just like Java and C loops - like java including the foreach: for(var in collection) objects uses dot operator for properties and methods Strings have many Java methods Date: var myDate = new Date() (date & time) Math object - like java

School of Computing and Information Systems CS 371 Web Application Programming JavaScript data types and variables JavaScript is not strongly typed data types: strings (use either “ or ‘) boolean (false if undefined, null, 0, NaN, null string) numeric (floating point or integer - limit numbers to  2e31) scope using var inside functions is local global vars declared with var outside function and used inside functions without var

School of Computing and Information Systems CS 371 Web Application Programming Built-in objects several built-in objects with helpful information JavaScript: Array, Boolean, Date, Math, Number, String, RegExp and Global properties and functions Browser objects: Window - represents open window navigator - information about the browser screen - information about the visitor’ screen history - URLs visited by user location - information about current URL

School of Computing and Information Systems CS 371 Web Application Programming Date getDate()Returns day of the month (from 1-31) getDay()Returns the day of the week (from 0-6) getFullYear()Returns the year (four digits) getHours()Returns the hour (from 0-23) getMilliseconds()Returns the milliseconds (from 0-999) getMinutes()Returns the minutes (from 0-59) getMonth()Returns the month (from 0-11) getSeconds()Returns the seconds (from 0-59) Many, many more…

School of Computing and Information Systems CS 371 Web Application Programming Number MAX_VALUEReturns the largest number possible in JavaScript MIN_VALUEReturns the smallest number possible in JavaScript toExponential(x)Converts a number into an exponential notation toFixed(x)Formats a number with x numbers of digits after the decimal point toPrecision(x)Formats a number to x length toString()Converts a Number object to a string valueOf()Returns the primitive value of a Number object

School of Computing and Information Systems CS 371 Web Application Programming String charAt()Returns the character at the specified index concat()Joins two or more strings, and returns a copy of the joined strings fromCharCode()Converts Unicode values to characters indexOf()Returns the position of the first found occurrence of a specified value in a string lastIndexOf()Returns the position of the last found occurrence of a specified value in a string match()Searches for a match between a regular expression and a string, and returns the matches replace()Searches for a match between a substring (or reg exp) and a string, and replaces the matched substring with a new substring search()Searches for a match between a regular expression and a string, and returns the position of the match slice()Extracts a part of a string and returns a new string split()Splits a string into an array of substrings substr()Extracts the characters from a string, beginning at a specified start position, and through the specified number of character substring()Extracts the characters from a string, between two specified indices toLowerCase()Converts a string to lowercase letters toUpperCase()Converts a string to uppercase letters valueOf()Returns the primitive value of a String object

School of Computing and Information Systems CS 371 Web Application Programming Arrays var myArray = new Array(); or var myArray = []; var myArray = new Array(‘one’,’two’); var myArray = [‘one’,’two’]; var scores = new Array(); scores[0]=[94,84,79]; scores[1]=[87,64,90]; course[‘371’]=‘scripps’; //associative?

School of Computing and Information Systems CS 371 Web Application Programming Array concat()Joins two or more arrays, and returns a copy join()Joins all elements of an array into a string pop()Removes the last element of an array, and returns it push()Adds new elements to the end of an array reverse()Reverses the order of the elements in an array shift()Removes the first element of an array, and returns it slice()Selects a part of an array, and returns the new array sort()Sorts the elements of an array splice()Adds/Removes elements from an array toString()Converts an array to a string, and returns the result unshift()Adds new elements to the beginning of an array, and returns the new length valueOf()Returns the primitive value of an array

School of Computing and Information Systems CS 371 Web Application Programming User defined functions function(a,b) { return a*b; } parameters do not need types no return type anonymous functions: var f = new Function(“x”,”y”,”return x+y”); f(6,7); f(“hello”,”world”);

School of Computing and Information Systems CS 371 Web Application Programming User Defined Objects using new Object: var myObj=new Object(); myObject.height=12; using object function: function userObj(parm){…} var obj=new userObj(‘oh hey’); using literal notation: var myObj={name:”miltie”,age:33…}

School of Computing and Information Systems CS 371 Web Application Programming Exceptions runtime errors try, catch and finally are like java except there is only one catch and object is not typed use confirm popup to reroute user to other page: window.location="./anotherPage.htm"; throw - allows programmer to throw except syntax errors onerror=handleErr function handleErr(msg,url,line)

School of Computing and Information Systems CS 371 Web Application Programming Popups Used for debugging and user interaction alert(“hey “+x); //displays info if(confirm(“is this ok?”)==true) var age = prompt(“how old are you?”);

School of Computing and Information Systems CS 371 Web Application Programming Security browsers restrict what JavaScript can do to prevent hacker attacks on clients same-origin policy - scripts cannot communicate across domains

School of Computing and Information Systems CS 371 Web Application Programming Setting cookies document.cookie= “var=val;expire=expireDays;path=aPath” example: var p=“myPassword”; var exp=new Date()+30; document.cookie=“pass=“+p+”;expires=“+ exp.toUTCString(); set expires to yesterday to delete

School of Computing and Information Systems CS 371 Web Application Programming Getting cookies cookies are stored as one big string var i=cookie.indexOf(“pass=“); if(i>=0){ var str=cookie.substring(i,cookie.length); var last=str.indexOf(“;”); if(last<0) last=str.length; str=str.substring(0,last).split(“=“); cookie is in str[1]