Client-Side Web Programming. Copyright 2017 by Robert M. Dondero, Ph.D. Princeton University

Size: px

Start display at page:

Wilfrid Doyle
5 years ago
Views:

2 Objectives You will learn about: Client-side web programming, alias programming the browser, via JavaScript AJAX JavaScript libraries 2

3 Agenda 1. JavaScript fundamentals 2. JavaScript OOP 3. JavaScript DOM and events 4. JavaScript for client-side web pgmming 5. AJAX 6. JavaScript libraries 3

4 Why JavaScript? Question: Why study JavaScript? Answer: TIOBE index of language popularity: Java, C, C++, C#, Python, JavaScript, PHP, 4

5 Why JavaScript? Website Front End Back End Google.com JavaScript C, C++, Go, Java, Python Facebook.com JavaScript Hack, PHP, Python, C++, Java, Erlang, D, Xhp, Haskell YouTube.com JavaScript C, C++, Java, Python, Go Yahoo JavaScript PHP Amazon.com JavaScript Java, C++, Perl Wikipedia.org JavaScript PHP, Hack Twitter.com JavaScript C++, Java, Scala, Ruby Bing JavaScript ASP.net ebay.com JavaScript Java, JavaScript, Scala MSN.com JavaScript ASP.net h"ps://en.wikipedia.org/wiki/ Programming_languages_used_in_most_popular_websites 5

6 JavaScript Who: Brendan Eich Where: Netscape When: 1995 Why: Client-side scripting language for web pages 6

7 JavaScript Overview Client-side scripting language Embedded into HTML code Interpreted by Netscape browser, then all popular browsers Usage: <script> JavaScriptCode </script> <script src="url"></script> <sometag onsomeevent ="JavaScriptCode"> 7

8 JavaScript vs. Java JavaScript vs. Java JavaScript was originally LiveScript Later changed to JavaScript to capitalize on popularity of Java JavaScript is related to Java only superficially 8

9 The JavaScript Language Yet another programming language!!! No time to cover thoroughly See my personal Subset of JavaScript Link on course website Some simple examples that might help... 9

10 JavaScript Examples See hello1.html The <script> tag See hello2.html Weak convention: Place function definitions in <head> </head> Functions and function calls 10

11 JavaScript Examples See hello3.html Event handling avoids global code See helloerror.html Error reporting In Firefox Error Console (Tools Web Developer Browser Console) In Chrome More tools Developer Tools 11

12 JavaScript Examples See square.html Arguments and parameters Call is by value See squareroot.html Standard Math object 12

13 JavaScript Examples See circle.html (Unusual) use of prompt() Local variables Data types Type conversions 13

14 JavaScript Data Types JavaScript data types Integer 1, 12345, 01, , 0x1, 0x1DB5 Floating point 0.0, 1,23, 1.23e4 String 'hi', "hi" Boolean: true, false Null object null 14

15 JavaScript Examples See euclid.html Control statements: if, while 15

16 JavaScript Statements JavaScript statements var Compound if..else switch while do while for try catch throw break continue Function definition Function call 16

17 JavaScript Examples See intmath.js and testintmath.html Multi-file programs <script src="someurl"> 17

18 JavaScript Examples See datastructures.html Artificial Arrays Associative arrays 18

19 JavaScript Examples See testdivmod1.html Arrays See testdivmod2.html Associative arrays Keys need not be literals; can be names! Can access values using object field selector notation! 19

20 JavaScript Assoc Arrays To create and use an associative array: someassocarray = {"somekey": 18}; someassocarray["somekey"] someassocarray.somekey Can use an assoc array as if it were an object To create and use an object: someobject = {someproperty: 18}; someobject.someproperty someobject["someproperty"] Can use an object as if it were an assoc array 20

21 JavaScript Objects In JavaScript Any associative array is an object Any object is an associative array!!! Or, if you prefer JavaScript has no associative arrays An object can serve the purpose of an associative array 21

22 Agenda 1. JavaScript fundamentals 2. JavaScript OOP 3. JavaScript DOM and events 4. JavaScript for client-side web pgmming 5. AJAX 6. JavaScript libraries 22

23 Objects Create an object var shape1 = {x:1, y:2} shape1.x shape1.y shape1["x"] shape1["y"] var shape1 = {} shape1.x = 1; shape1.y = 2; shape1.x shape1.y shape1["x"] shape1["y"] 23

24 Objects Create an object containing functions var shape1 = { x: 1, y: 2, display: function() { document.write(string(this.x) + ", " + String(this.y)); } } shape1.x shape1.display() this inside of the function def refers to the containing object 24

25 Creating Objects Create an object using an ordinary function function createshape(x, y) { var shape = {x: x, y: y}; shape.display = function() { document.write(string(this.x) + ", " + String(this.y)); } return shape; } var shape1 = createshape(1, 2); shape1.x shape1.display() 25

26 Creating Objects Create an object using a constructor and new function Shape(x, y) { this.x = x; this.y = y; this.display = function() { document.write(string(this.x) + ", " + String(this.y)); } } var shape1 = new Shape(1, 2); shape1.x shape1.display() A constructor is a function that is called via new Calling a constructor instantiates a new object this inside of the constructor refers to the new object 26

27 Creating Objects Create an object using the Object() constructor var shape1 = new Object(); shape1.x = 1; shape1.y = 2; shape1.display = function() { document.write(string(this.x) + ", " + String(this.y)); } shape1.x shape1.display() Unusual 27

28 Creating Objects Summary so far How to create an object: Literally Using a function Using a constructor Using Object() 28

29 Object Example See fraction1.js and testfraction1.html No private properties Use underscores to suggest privacy??? Each object has its own copy of each property Including methods! Other points of note: Cannot include one Javascript file into another! Implicit calls of tostring() method 29

30 Prototypes Prototype: An object to which other objects delegate Each object points/delegates to the prototype of its constructor 30

31 Prototypes Example Create a prototype: function Shape(x, y) { this.x = x; this.y = y; } Shape.prototype.display = function() { document.write(string(this.x) + ", " + String(this.y)); } var shape1 = new Shape(1, 2); shape1.x shape1.display() 31

32 Prototypes Reference a property p of shape1: Use p defined in shape1, or Use p defined in prototype of Shape 32

33 Prototypes Example See fraction2.js and testfraction2.html Each object created via Fraction constructor has its own copy of _num and _den All objects created via Fraction share methods defined in prototype of Fraction More space-efficient 33

34 Agenda 1. JavaScript fundamentals 2. JavaScript OOP 3. JavaScript DOM and events 4. JavaScript for client-side web pgmming 5. AJAX 6. JavaScript libraries 34

35 JavaScript DOM Document Object Model (DOM) A programmatic model of the HTML document in which the JavaScript code appears Each HTML element and attribute is represented as an object Objects are arranged in a containment tree window -> document -> element -> attribute Standardized by World Wide Web Consortium (W3C) Some (old) browsers don't observe 35

36 DOM Details window object Represents the browser window Important property: document document object Represents the current document Contains references to element objects Important methods: write(), getelementbyid() 36

37 DOM Details element objects Each represents an HTML element (<body>, <p>, ) Each contains references to objects representing its attributes Each contains references to objects representing its children 37

38 DOM Example See printdomtree.html Recursively traverses DOM tree Prints DOM tree of current document 38

39 JavaScript Events Event An occurrence on a particular element Event handler JavaScript code Installed on a particular element for a particular event When event occurs on that particular element, event handler is executed 39

40 Installing Event Handlers Attributes for installing mouse event handlers onclick, ondblclick, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, Attributes for installing keyboard event handlers onkeydown, onkeypress, onkeyup Attributes for installing frame/object event handlers onload, onresize, Attributes for installing form event handlers onblur, onfocus, onreset, onselect, onsubmit, 40

41 Events Example See events.html Ways to reference an object within the DOM Event handlers on <body> element Event handlers on <form> element Event handlers on <input> element 41

42 Agenda 1. JavaScript fundamentals 2. JavaScript OOP 3. JavaScript DOM and events 4. JavaScript for client-side web pgmming 5. AJAX 6. JavaScript libraries 42

43 PennyJavaScript App Problem: In Penny apps, missing author name is an error In principle, browser could: Detect missing author name Warn user w/o contacting server And thereby: Provide user feedback more quickly Reduce server load 43

44 PennyJavaScript App Problem: In Penny apps, header morning/afternoon is computed once on server-side Better to compute it continuously on clientside Problem: In Penny apps, footer, current date/time is computed once on server-side Better to compute it continuously on clientside 44

45 PennyJavaScript App Solution: Program the browser 45

46 PennyJavaScript App See PennyJavaScript app runserver, runserver.bat, book.py, database.py header.tpl footer.tpl index.tpl searchform.tpl searchresults.tpl penny.py Some notes... 46

47 PennyJavaScript App penny.py Server side is composed using Python Bottle Could have used Python CGI, Java Servlets, Java Spark, PHP, Still must validate form data!!! User might browse to searchresults page directly 47

48 PennyJavaScript App header.tpl JavaScript code causes browser to compute morning/afternoon repeatedly footer.tpl JavaScript code causes browser to compute current date/time repeatedly 48

49 PennyJavaScript App searchform.tpl JavaScript code calls date-time functions when page is loaded JavaScript code validates author upon form submission searchresults.tpl JavaScript code calls date-time functions when page is loaded 49

50 JavaScript Versions Year Name Description 1997 ECMAScript1 First edition ECMAScript2 Editorial changes only ECMAScript3 Added regular expressions Added try/catch. ECMAScript4 Was never released ECMAScript5 Added strict mode. Added JSON support ECMAScript5.1 Editorial changes ECMAScript6 Added classes and modules ECMAScript7 Added exponentiation operator (**). Added Array.prototype.includes. 50

51 JavaScript Summary JavaScript language summary C/Java-like syntax Weakly typed Unusual object model Objects are associative arrays 51

52 Agenda 1. JavaScript fundamentals 2. JavaScript OOP 3. JavaScript DOM and events 4. JavaScript for client-side web pgmming 5. AJAX 6. JavaScript libraries 52

53 Preliminary Note Each Penny app can be expressed as a single page... 53

54 PennyBottleSingle App See PennyBottleSingle application runserver, runserver.bat, book.py, database.py, header.tpl, footer.tpl search.tpl penny.py 54

55 PennySparkSingle App See PennySparkSingle application Similar (Handouts not provided) 55

56 PennyPhpSingle App See PennyPhpSingle application Similar (Handouts not provided) 56

57 Single Page App Assessment Cons: In the context of this course... Maybe less understandable to programmer Doesn t illustrate state handling Doesn t illustrate A&A as well Pro: In the broader context... User might prefer 57

58 AJAX AJAX: Asynchronous JavaScript and XML Let s consider each part of the title... 58

59 AJAX JavaScript AJAX is accomplished via function calls embedded in JavaScript code 59

60 AJAX Asynchronous JavaScript code registers callback function Browser sends request to HTTP server Browser can do other work Callback from HTTP server alerts browser that response is available 60

61 AJAX XML Data communicated from server to callback function can be (but need not be) an XML doc (AJA X is a misnomer) We ll cover XML soon 61

62 PennyAjax App Wouldn t it be nice if... Penny application could refresh book list with each user keystroke User need not click Submit button (Recall Google search page) 62

63 PennyAjax App See PennyAjax app runserver, runserver.bat, book.py, database.py, header.tpl, footer.tpl search.tpl penny.py Some notes... 63

64 PennyAjax App penny.py Server side is composed using Python Bottle Could have used Python CGI, Java Servlets, Java Spark, PHP, search() Instantiates and returns search.tpl searchresults() Returns book list as plain text 64

65 PennyAjax App search.tpl Contains AJAX code Note code to handle differences among browsers searchresults() Generates reply as a HTML fragment 65

66 PennyAjax App Question: Why abort previous request? Answer: We re interested in the response for only the most recent request 66

67 PennyAjax App Question: Why send messageid? Answer: Make sure that each GET request is unique Otherwise browser may use cached page instead of sending HTTP request 67

68 Agenda 1. JavaScript fundamentals 2. JavaScript OOP 3. JavaScript DOM and events 4. JavaScript for client-side web pgmming 5. AJAX 6. JavaScript libraries 68

69 Motivation for JavaScript Libraries Problem 1: Many incompatibilities among (old) browsers DOM may vary JavaScript may vary! (HTML may vary!!) JavaScript code should account for all/most/ many variations Problem 2: JavaScript/AJAX code uses common patterns and often is repetitive 69

70 JavaScript Libraries Solutions: Keep it simple Use a JavaScript generator Google Web Toolkit, Use a JavaScript library jquery, Use a JavaScript framework AngularJS, React, 70

71 Who: John Resig When: 2006 Why: Simplify JavaScript syntax for finding, selecting, and manipulating DOM elements jquery 71

72 Why jquery? Rank JavaScript Technology Websites 1 jquery 70,000,000 2 jqueryui 10,778,380 3 Bootstrap 7,710,384 4 Modernizr 3,846,285 5 Google Tag Manager 3,432,375 6 Errorception 3,115,600 7 LightBox 2,248,632 8 htmp5siv 1,883,236 9 Backbone.js 985, AngularJS 547, React 114,826 According to on 11/12/17 72

73 jquery Fundamentals jquery syntax: $(selector).action() $: indicates access of jquery selector: selects HTML element(s) As in CSS action(): specifies an action to be performed on the selected element(s) 73

74 PennyJQuery App See PennyJQuery app runserver, runserver.bat book.py, database.py, penny.py header.tpl footer.tpl search.tpl Generalizing... 74

75 PennyJQuery App jquery makes it easier to access DOM Without jquery: var author = document.getelementbyid('authorinput').value; With jquery: var author = $('#authorinput').val(); # => access by id 75

76 PennyJQuery App jquery separates event handling code from HTML (example 1) Without jquery (in search.tpl): <body onload= "getampm(); getdatetime(); "> </body> 76

77 PennyJQuery App With jquery (in search.tpl): <body> </body> With jquery (in header.tpl): <script> $('document').ready(getampm); </script> With jquery (in footer.tpl): <script> $('document').ready(getdatetime); </script> 77

78 PennyJQuery App Without jquery (in search.tpl): <body onload= " document.getelementbyid('authorinput').focus()"> </body> With jquery (in search.tpl): <body> </body> <script> function setup() { $('#authorinput').focus(); } $('document').ready(setup); </script> 78

79 PennyJQuery App jquery separates event handling code from HTML (example 2) Without jquery (in search.tpl): <input type="text" id="authorinput" onkeyup="getresults()"> With jquery (in search.tpl): <input type="text" id="authorinput"> <script> $('#authorinput').keyup(getresults); </script> 79

80 PennyJQuery App jquery makes it easier to program AJAX Without jquery (in search.tpl): function createajaxrequest() {... return req; } function processreadystatechange() {... var resultsparagraph = document.getelementbyid("resultsparagraph"); resultsparagraph.innerhtml = this.responsetext; } function getresults() {... request = createajaxrequest(); request.onreadystatechange = processreadystatechange; request.open("get", url); request.send(null); } 80

81 PennyJQuery App With jquery (in search.tpl): function handleresponse(response) { $('#resultsparagraph').html(results); } function getresults() {... request = $.ajax( { type: "GET", url: url, success: handleresponse } ); } 81

82 AngularJS Who: Miško Hevery When: 2009 Where: Google (but not originally) Why: Address many problems in developing one-page apps 82

83 Why AngularJS? According to h"ps://ho<rameworks.com/ on 6/21/17 Stack Github Overflow Overall Score Score Score ASP.NET (C#) AngularJS (Javascript) Ruby on Rails (Ruby) ASP.NET MVC (C#) React (JavaScript) Django (Python) Laravel (PHP) Angular (JavaScript) Spring (Java) Express (JavaScript) Meteor (JavaScript) CodeIgniter (PHP) Symfony (PHP) Vue.js (JavaScript) Flask (Python) Note: Angular is a complete rewrite of AngularJS 83

84 AngularJS Fundamentals AngularJS Extends HTML with ng- attributes ng-app: defines an AngularJS application ng-model: binds the value of an HTML element (input, textarea, ) to a property of the scope object ng-bind: binds a property of the scope object to an HTML element 84

85 PennyAngular App See PennyAngularJs app runserver, runserver.bat, book.py, database.py header.tpl, footer.tpl, penny.py search.tpl 85

86 PennyAngularJs App search.tpl Controller function Uses values from scope (and thereby from HTML input elements) Assigns values to scope (and thereby to HTML elements) Handles AJAX Generalizing... 86

87 PennyAngularJs App AngularJS encourages MVC architecture on the client side! Model The scope object and its contents View The HTML code Controller The controller object and its function 87

88 React Who: Jordan Walke When: 2011 Where: Facebook Why: Handle user interfaces in web apps 88

89 Why React? According to h"ps://ho<rameworks.com/ on 6/21/17 Stack Github Overflow Overall Score Score Score ASP.NET (C#) AngularJS (Javascript) Ruby on Rails (Ruby) ASP.NET MVC (C#) React (JavaScript) Django (Python) Laravel (PHP) Angular (JavaScript) Spring (Java) Express (JavaScript) Meteor (JavaScript) CodeIgniter (PHP) Symfony (PHP) Vue.js (JavaScript) Flask (Python)

90 PennyReact App Thanks to Lucas Manning See PennyReact app runserver, runserver.bat book.py, database.py search.tpl, penny.py main.js PennyHeader,jsx, PennyFooter.jsx PennySearch.jsx package.json, webpack.config.js 90

91 PennyReact App book.py New method: serialize() Not necessary, but makes penny.py cleaner database.py Same as usual 91

92 PennyReact App search.tpl Python Bottle template Note div element with id root Note fetch of script /static/app.bundle.js Created by WebPack Contains all HTML/JavaScript code 92

93 PennyReact App penny.py Delivers files from /static Specifically, app.bundle.js search() instantiates search.tpl searchresults() generates books in JSON 93

94 PennyReact App main.js In the bundle Defines HTML to be assigned into element whose id is root New versions of JavaScript have import statement New HTML elements!? PennyHeader, PennySearch, PennyFooter 94

95 PennyReact App PennyHeader.jsx, PennyFooter.jsx In the bundle Use JSX A JavaScript extension syntax Allows using HTML tag syntax to render components Define the <PennyHeader> and <PennyFooter> elements Define HTML to be included into main.js 95

96 PennyReact App PennySearch.jsx In the bundle Uses JSX Defines the <PennySearch> element Defines HTML to be included into main.js Issues AJAX request Receives AJAX response 96

97 PennyReact App webpack.config.js Tells WebPack: To create static/app.bundle.js That the bundle should contain main.js (which contains *.jsx) package.json Controls the build process Build process uses 97

98 Node.js Who: Ryan Dahl When: 2009 Why: Allow JavaScript to be used for server-side scripting 98

99 Node.js Node.js JavaScript runtime Based upon Google s V8 JavaScript engine Allows running JavaScript on server-side Can behave as a HTTP server Provides tools to help with development of React client-side PennyReact uses Node.js only in that capacity 99

100 Summary We have covered: Client-side web programming, alias programming the browser via JavaScript AJAX JavaScript libraries The jquery library The AngularJS framework The React framework 100

101 Appendix 1: JavaScript Delegation 101

102 Inheritance Example Shape x y move() display() Square length display() Circle radius display() 102

103 Inheritance in Java See Shapes.java Specified via extends Missing extends => class inherits from Object 103

104 Inheritance in Python See shapes.py Specified via superclass name in parens Missing => class inherits from object 104

105 JavaScript Prototypes Previous example: function Shape(x, y) { this.x = x; this.y = y; } Shape.prototype.display = function() { document.write(string(this.x) + ", " + String(this.y)); } var shape1 = new Shape(1, 2); shape1.x shape1.display() Reference a property p of shape1 Use p defined in shape1, or Use p defined in prototype of Shape 105

106 JavaScript Prototype Chains There s more Each prototype points/delegates to the prototype of some other constructor Except for the prototype of Object, whose pointer is null Thus prototypes form a prototype chain 106

107 JavaScript Prototype Chains Reference a property p of shape1 Use p defined in shape1, or Use p defined in prototype of Shape, or Use p defined in prototype of Object, or Fail JavaScript resolves property references via delegation to prototypes 107

108 Prototype Chains Example See shapes.html JavaScript doesn t implement inheritance Use delegation instead 108

109 Prototype Chains Example Note: Call Object.create() to create a prototype chain function Square { } // Square has a prototype. // The prototype delegates to Object's prototype. Square.prototype = Object.create(Shape.prototype); // Create a new object that has Shape's prototype as // its prototype. Set Square.prototype to reference // that object. Square.prototype.constructor = Square; // Square's prototype has Shape is its constructor. // That's wrong; change Square's prototype to Square. Square.prototype.display = // Add properties to Square's prototype. 109

110 Prototype Chains Example Note: Call square1.display() Use display() defined in square1? No. Use display() defined in prototype of Square? Yes. Call square1.move() Use move() defined in square1? No. Use move() defined in prototype of Square? No. Use move() defined in prototype of Shape? Yes. 110

111 Appendix 2: Java Applets 111

112 Java Applets Java Applets Another client-side web programming technology 112

113 Java Applets vs. JavaScript Applet pros: Uses JVM Completely portable across (supporting) browsers (Arguably) more powerful Java lang & libraries are more powerful than JavaScript lang & libraries (But third-party JavaScript libraries add much power) 113

114 Java Applets vs. JavaScript JavaScript pros: Simpler Run directly by browser, not via JVM Launches faster Better integrated into browser (e.g. resizing) 114

115 Java Applets Popularity Early days of Java: Applets were the motivating force Applications were secondary Now Applets are much less popular See 8q8n3k/a-brief-history-of-the-java-applet We will not cover I have Penny app using Applets; see me if you want 115

Server-Side Web Programming: Python (Part 2) Copyright 2017 by Robert M. Dondero, Ph.D Princeton University

Server-Side Web Programming: Python (Part 2) Copyright 2017 by Robert M. Dondero, Ph.D Princeton University 1 Objectives You will learn about: Python WSGI programming Web app frameworks in general (briefly)