Fundamentals of Web Programming

Size: px

Start display at page:

Download "Fundamentals of Web Programming"

Edith Snow
6 years ago
Views:

1 Fundamentals of Web Programming Lecture 6: web applications Devin Balkcom office: Sudikoff /28

2 Notes Lunch on 4/8 at 2 pm Resume assignment due Saturday 3pm Assignment 6 out Saturday 2/28

3 Why not use Dreamweaver, Wordpress, Drupal, Joomla, Squarespace? Do it, if the tool suits the job:. Basic HTML and CSS for a web page 2. Blog 3. Basic online store Hand code if:. Custom Javascript for a web app 2. You want complete control 3. You want to understand what you are doing 3/28

4 Web applications Browsers are a surprisingly powerful platform for software. Portable across hardware and software (e.g. phones) Can build on display capabilities of the browser Easy to access: user clicks a link from any device Control remains in the hands of the owner. (From ads to updates.) 4/28

5 Example : Slides and lecture notes Why? Why? WHY?. Dogfooding. 2. Easy. Slide software about 305 lines of hasty Javascript 3. Interactive Javascript/HTML exercises, examples 4. Focus on content rather than style 5. Data analytics (CS ) (I did use some programmers tools. Markdown, Jade, Make.) 5/28

4/9/206 FWP lecture 6 Example 2: Facebook http://www.cs.

6 4/9/206 FWP lecture 6 Example 2: Facebook 6/28

Example 3: Cloud 9 http://www.cs.dartmouth.

7 Example 3: Cloud 9 7/28

8 Example 4: Gmail 8/28

9 Why do we need Javascript? HTML doesn't do loops, conditions, functions, variables Javascript can modify the HTML on the fly Javascript can modify the CSS on the fly Javascript can compute with data Javascript interfaces with external resources Javascript allows handling events and drawing 9/28

10 Review: data types Each value has a type: boolean, number, string, array, object, function // simple types var beauty = true; var pi = ; var greeting = "hello"; // array type var days = ["Mon", "Tue", "Wed"]; // dictionary or object type var colors = {red: 650, green: 50, blue: 475}; // function type var draw_smiley = function() { circle(00, 00, 80); }; 0/28

11 Review: objects An object also stores a set of values indexed by name var thedonald = {}; thedonald.party = "Republican"; thedonald.haircolor = "orange"; thedonald.age = 69; Think of an object like a record in a database. Value types may be different. Index using dot notation. /28

12 More on methods Objects can contain references to functions (methods) that have access to the other data in the object. 2 3 var txt = "Find the needle in the haystack."; var pos = txt.search("needle"); print(txt.slice(pos)); 2/28

13 Exercise: reversing a string Go do exercise "reversing a string" in the notes for lecture 6. One line of code by chaining method calls. 3/28

14 The script tag <!DOCTYPE html> <html> <body> <p> This is a simple web page that contains a script.</p> <script> // some Javascript code alert("there be dragons here!"); </script> </body> </html> 4/28

15 The document tree Image from dabrook.org A tree can represent containment, heirarchy, ancestry. HTML expresses a tree relationship bewteen elements. CSS inherits. 5/28

16 The Document Object Model (DOM) Using Javascript, we can fetch an element as an object, and call methods or change values of variables of that object. 6/28

17 The Document Object Model (DOM) <!DOCTYPE html> <html> <body> <p> Here are two pictures of the same baboon:</p> <img id="first_image" src="baboon.jpg" width="00"> <img id="second_image" src="baboon.jpg" width="00"> <script> var imgelement = document.getelementbyid("second_image"); // make the second image tiny: imgelement.width = "50"; </script> </body> </html> 7/28

18 Getting elements Three ways to get an element from the documentobject:. by id document.getelementbyid() 2. by class document.getelementsbyclassname() 3. by tag name document.getelementsbytagname() 8/28

19 style Common variables in objects <!DOCTYPE html> <html> <body> <div id="note">this is a note.</div> <script> var noteelement = document.getelementbyid("note"); </script> </body> </html> 9/28

20 innerhtml Common variables in objects <!DOCTYPE html> <html> <body> <p> Here's a baboon:</p> <img id="first_image" src="baboon.jpg" width="00"> <div id="note"></div> <script> var noteelement = document.getelementbyid("note"); noteelement.innerhtml = "<p>awww, cute!</p>"; </script> </body> </html> 20/28

21 value Common variables in objects <!DOCTYPE html> <html> <body> <textarea id="mytextarea">murder MURDER</textarea> <div id="note"></div> <script> // reverses the string s and returns the result function reverse(s) { return s.split('').reverse().join(''); } // get the text from the textarea var elt = document.getelementbyid("mytextarea"); 2/28

22 Exercise: ticker table Go do "exercise: ticker table" from chapter <!DOCTYPE html> <html> <head> <title>stock ticker table</title> </head> <body> <p>stock values for AAPL, GOOG, and FB over time:</p> <div id="ticker_table"></div> <script> var aapl = " ,07.32, ,06.82, , , , , , "; 22/28

23 Review: callbacks Sometimes you write a function for some other code to use var surprise = function() { print("surprise!"); }; print("in 5 seconds, 'surprise!' will be printed."); // tell Javascript to fun the `surprise` function after 5000 ms settimeout(surprise, 5000); We never called surprisein the code! 23/28

24 Callback functions and events <!DOCTYPE html> <html> <head> <title> A simple clock.</title> </head> <body> <p> The current time is: </p> <div id="currenttime"> </div> <script> var updatetime = function() { var timeelement = document.getelementbyid("currenttime" ); timeelement.innerhtml = new Date(); }; setinterval(updatetime, 000); </script> 24/28

25 Buttons <!DOCTYPE html> <html> <script> var clicked = function() { alert("thank you for clicking! Have a nice day!"); }; </script> <body> <button onclick="clicked();">click me!</button> </body> </html> 25/28

26 Exercise: tabbed pages Go do "exercise: tabbed pages" from chapter <!DOCTYPE html> <html> <head> <title>tabbed pages</title> </head> <body> </body> </html> 26/28

27 APIs <!DOCTYPE html> <html> <head> <style type="text/css"> #map { height: 200px; width: 200px;} </style> </head> <body> <h> Map of Dartmouth</h> <div id="map"></div> <script> // Load map for example of library usage var map; 27/28

28 Asynchronous vs synchronous loading 28/28

Welcome to CS50 section! This is Week 10 :(

Welcome to CS50 section! This is Week 10 :( This is our last section! Final project dates Official proposals: due this Friday at noon Status report: due Monday, Nov 28 at noon Hackathon: Thursday, Dec