1. SE-2840 Dr. Mark L. Hornick 1 Modifying webpage behavior using client-side scripting Javascript

2. 2007 quote: “HTML with Javascript is going to become the GUI technology of choice, killing off ‘rich client’ and desktop apps written in languages such as C, C++, Java and C#.” James Shore, author, SE-2840 Dr. Mark L. Hornick 2

3. 3 JavaScript affects the behavior of a web page via manipulation of the browser’s Document Structure: HTML5 Presentation: CSS With JavaScript, you can modify both structure and presentation after the page is loaded The browser requests a page. The browser returns the page. web page The user interacts with the browser Javascript embedded in the webpage is “executed” by the browser

4. SE-2840 Dr. Mark L. Hornick 4 Familiar applications of Javascript  Cascading menus  Modify images on mouse “rollover”  Validate forms before submitting to server  Num of chars, non-blank input, non-alpha numerics, etc  Background (color, music) effects  “Simple” applications  Calendars, payment calculators, etc  “Complex” applications  Google docs

5. SE-2840 Dr. Mark L. Hornick 5 JavaScript is not Java Java is a completely different high- level language invented by Sun Microsystems Javascript was created in 1995 by Netscape First called “Livescript” …then “Javascript” as a marketing strategy Sun was making headlines with Java at the same time

6. SE-2840 Dr. Mark L. Hornick 6 Scripts intially had a bad reputation from abuse of their capabilities Annoying pop-up ads Malware/Spyware

7. SE-2840 Dr. Mark L. Hornick 7 Today’s Javascript is purposely limited Due to Security issues, JavaScript can't directly interact with private system resources (files) of the computer running the browser Although HTML5 includes “local storage” capabilities that can be accessed from JavaScript

8. Enabling scripting in IE and Firefox SE-2840 Dr. Mark L. Hornick 8

9. 9 Embedding Javascript in a web page // Javascript code can be placed in the or // of an HTML document; other locations are not recommended Example Javascript /* Javascript can be placed inline or in an external.js file */ The … tags tell the browser that the contained content is not HTML to be displayed, but Javascript to be interpreted. The Javascript code is not displayed to the user.

10. Javascript errors are reported via an Error Console when one is enabled SE-2840 Dr. Mark L. Hornick 10 Implementation and activation varies by browser

11. SE-2840 Dr. Mark L. Hornick 11 Javascript is it’s own complete high- level programming language, with familiar elements Variables Constants Expressions Conditional control statements (if, else if, switch) Looping and iteration (for, while, do…while) Exception handling (try-catch) As well as some unfamiliar concepts: No formal classes (instead uses prototypes) Weak typing Functions outside of objects Global variables

12. SE-2840 Dr. Mark L. Hornick 12 Javascript is a weakly (dynamically)- typed language, unlike C++ or Java A variable doesn’t really have a type; rather, a variable is bound to a value of a specific type var msg = “hello”; // a variable bound to a string The variable can be dynamically bound to another type over the lifetime of a variable! msg= “hello”;// here it’s bound to a string msg = 23;// now it’s bound to an integer There are three primitive datatypes boolean number string

13. SE-2840 Dr. Mark L. Hornick 13 Javascript automatically converts types var var1 = 4 + 7.0; is converted to a floating-point value var var2=“100” + 15; 15 is promoted to string; result=“10015” var var3= 15 +“100”; 15 is promoted to string; result=“15100” Mixing numbers and strings results in strings

14. SE-2840 Dr. Mark L. Hornick 14 An explicit conversion is required to turn a string to a number var1 = parseInt(“10”); var1 = parseFloat(“3.14”); The value NaN is assigned when a string cannot be parsed The opposite conversion from a numeric value to a String is done via: var1 = 100; // var1 contains numeric value 100 var1 = String(100); // var1 contains “100”

15. SE-2840 Dr. Mark L. Hornick 15 Aspects of weakly-typed data Javascript has the following boolean globlal functions that allow you to inquire about a variable’s bound type: isNaN( var ) // returns true if Not a Number isFinite( var ) // returns true if a finite number Infinity is +/- infinity (note: capital “I”) undefined indicates an unitialized variable NaN represents a value that is “not a number”

16. Arrays in Javascript var myArray; // untyped and undefined myArray = new Array(); // size not needed myArray[0] = “Hello”; // array size now 1 myArray[1] = 1; // array size now 2 myArray[2]= new Array(); // array element 3 is another array If an array size is specified, and the number of elements assigned to the array exceeds the size of the array, the array grows itself! SE-2840 Dr. Mark L. Hornick 16

17. More on arrays var myArray = [0,1,2,3]; // declared & initialized myArray[4]= -1; // now [0,1,2,3,-1] myArray[6]= 8; // now [0,1,2,3,-1, undefined, 8] myArray[0]= “hello”; // legal! SE-2840 Dr. Mark L. Hornick 17

18. Javascript supports the concept of global functions function myMethod(param1, param2) { var localVar = param1 + … return localVar; } 0 or more formal parameters Formal parameters are not typed Return value of function is not typed return statement is optional If no return statement, function returns “undefined” Local variables have function scope and visibility Note: no block { } scope in Javascript! SE-2840 Dr. Mark L. Hornick 18

19. Javascript supports the concept of global variables var x = “I’m global!” function myMethod(param1, param2) { var localVar = … return localVar + x; // x is visible here } Global variables are visible everywhere Local variables are only visible in their function scope This is changing in ECMAScript 6 (2015) with the introduction of the “let” statement SE-2840 Dr. Mark L. Hornick 19

20. JavaScript supports objects, but without needing formal classes CS-422 Dr. Mark L. Hornick 20 var person = { firstName: “Roscoe”, lastName: “Raider” } This is called an object literal

21. Object constructors function MyObject(param1, param2) { this.property1 = param1; this.property2 = param2; this.doSomething = function(…) { // function body goes here } Looks like a simple function No formal attribute declarations Use of “this” automatically creates an attribute Be careful; typos may introduce unwanted attributes SE-2840 Dr. Mark L. Hornick 21

22. Method declarations can also be defined outside of the constructor MyObject.prototype.setXXX=function(param) { this.property1 = param; } MyObject.prototype.getXXX=function() { return this.property1; } Note each method is “declared” to be a function SE-2840 Dr. Mark L. Hornick 22

23. Using a JavaScript constructor to create objects var x = new MyObject(“arg1”, “arg2”); x.setXXX(“arg1b”); var y = x.getXXX(); SE-2840 Dr. Mark L. Hornick 23

24. JavaScript “core API” defines only a few native objects – the remainder come from the hosting environment (i.e. the browser) String – similar to the Java String class Array – generic container/collection class Math - like the Java Math class Number, Boolean – wrapper classes similar to Java wrapper classes (Integer, Double etc) var x = 123; // x is treated as a Number var y = “123”; // y is treated as a String var z = new Number(“123”); // z is a Number Date – represents dates and times CS-422 Dr. Mark L. Hornick 24

25. Other Javascript features Functions are actually objects! Having their own properties and methods Functions can be passed as arguments to other Functions C/C++ can do this, but Java cannot Functions can nest other Functions Functions are called methods when they are defined within an object SE-2840 Dr. Mark L. Hornick 25