1. CS120: Lecture 14 MP Johnson Hunter mpjohnson@gmail.com

2. Agenda Programming –Algorithms  programs –Pseudocode –JavaScript

3. Abstraction & simulation Same logic with M-W and students-hospitals Meaning doesn’t matter –Computer only needs the logic/alg Computers can play chess, without “understanding” the game Computers can simulate the weather, without getting wet Computers can simulate intelligence, without being intelligent (?) –Chess, help with hw, make jokes, debate the movie

4. Next: Programming Algorithms  programs Can express in pseudocode But must code in some prog lang This week: lang = JavaScript in webpages

5. Dynamic webpages Regular webpages are just text (in html) Distrib’ed by HTTP Protocol is asynchronous –Page req, response, disconnect Q: how to make webpages dynamic? –For search engines, ecommerce, etc.

6. Dynamic webpages Image from http://www.scit.wlv.ac.uk/~jphb/cp3024/ Program Client Server HTTP Request Data for program Generated HTML HTML

7. Combine script and html Server-side v. client-side –Server-side: CGI, JSP, Servlets, PHP, ASP –Client-side: JavaScript/JScript, VBScript Which way to embed –“put html inside the program”: CGI, Servlets –“put the program inside the html”: PHP, JSP, ASP, JavaScript/JScript, VBScript In general: server-side is slow because requires round-trips –But allows access to non-local data For modest comput, client-side can be very good –But not for reavy comput JavaScript + XML = AJAX – very popular We’ll use JS

8. JavaScript Called a scripting language –Less powerful than C, Java –But easier, more convenient –Somewhat looser syntax JavaScript code is embedded in HTML –Executed in browser, not on webserver –  efficient –Old, but popular again – AJAX Used in Gmail, Google Maps, Flickr, etc.

9. Embedding JavaScript Inside HTML page, write: – … Vars, math: – x = 2; y = 3; z = x*y + 4; I/O with dialog boxes: – var reply reply = prompt("Type your name"); alert("Hello, " + reply);

10. JavaScript – if, if-else temperature = prompt("What's the temperature?") if (temperature > 212) { alert("boiling") } else if (temperature < 32) { alert("freezing") } else { alert("in between") }

11. JavaScript – while loop fahr = 0; while (fahr <= 212) { celsius = 5 / 9 * (fahr - 32); document.write(fahr + "F is " + celsius + "C"); fahr = fahr + 10 }

12. JavaScript functions – temp.html function ftoc(fahr) { return 5 / 9 * (fahr - 32) } function show_temps(low, high) { var fahr = low while (fahr <= high) { document.write(fahr + "F is " + ftoc(fahr) + "C"); fahr = fahr + 10; } show_temps(0, 212);

13. JavaScript functions – temp2.html Html can be produced by JavaScript: function ftoc(fahr) { return 5 / 9 * (fahr - 32) } function show_temps(low, high) { document.writeln("here is a table of temps: "); document.writeln(" " + "fahr" + " " + "cels" + " "); var fahr = low; while (fahr <= high) { document.writeln(" " + fahr + " " + ftoc(fahr) + " "); fahr = fahr + 10; } document.writeln(" "); } show_temps(0,212);

14. Functions & forms function copyVal() { val = document.myform.source.value; document.myform.dest.value = val; } This page copies a value from one field to another. Source: Dest:

15. Functions & forms function compFact() { number = document.myform.number.value; fact = 1; while (number > 1) { fact = fact * number; number = number-1; } document.myform.fact.value = fact; } This page computes the factorial of the number entered. Number: Factorial: