1. Introduction to Web Site Development John Hurley Department of Computer Science California State University, Los Angeles Lecture 7: JavaScript I

2. Student Presentations Student presentations

3. Difficulty of This Unit Some of you are CS majors taking this class to learn skills necessary for your major Some just want to learn how to make basic web pages Some have taken programming classes, some haven’t Those who have programming backgrounds will find the next two weeks much easier than those who don’t Someone with no prior programming experience should be able to get an A if s/he works hard If you are a programmer and find the material too easy, feel free to go beyond the assigned work. I’ve read a couple of books on JS and can’t recommend any of them, but references are easily available on the web.

4. JavaScript Our work so far has involved pre-written content More sophisticated sites generate content interactively based on information from the client This can be done with either client-side or server-side programming You will learn about server-side programming in CS320 To the extent that processing can be done on client computers, web site owners save expense The industry has experienced challenges in taking advantage of this possibility

5. JavaScript Programming language that executes while you are browsing Sent to the browser as code and interpreted by browser add-on JavaScript is the dominant client-side scripting language of the world wide web IE supports VBScript, other browsers don’t So JavaScript is the only alternative

6. JavaScript Generally used for simple functionality to enhance web pages, yet it is a real Turing-complete programming language A Google search will easily turn up some small to medium-sized apps. Here are some fun ones: Space Invaders: http://matthaynes.net/playground/javascript/glow/spaceinvad ers/ emulator for the old Applesoft II BASIC interpreter: http://www.calormen.com/Applesoft/ Some colleges, especially community colleges, teach entire courses on Javascript Santa Monica College has an online JS class at least once a year.

7. Scripting Languages Term is used oddly Originally applied to languages used for scheduling jobs on mainframes under batch processing (that is, jobs that required no runtime I/O and were queued up to run) Then applied to languages used to simulate use of a GUI or actions of some agent (like a nonplayer character in a video game) But JS code often takes live user input at runtime In web development, used to mean roughly “interpreted languages used in web programming”

8. JavaScript JavaScript is a misnomer Syntax similarities to Java are due to common legacy of Algol/C family languages and superficial adoptions from Java Java was the hot new thing when JS came out, and Sun was one of the early endorsers of JS. The name was pasted on although the internal working of JS are radically different from those of Java

9. It’s Not All JavaScript’s Fault! Most developers consider JavaScript to be suboptimal in some ways Javascript sometimes gets a worse rap than it deserves Much of the difficulty programmers experience with client side scripting is not caused by JS

10. It’s Not All JavaScript’s Fault! JavaScript is different from the most of us usually work with, and thus sometimes seems weird. It is designed to be lighter weight than, say, Java A language that stood on ceremony about OOP, as Java does, would be overkill for the typical use situations of JavaScript There are severe environmental constraints on client-side programs browser security measures required to support anonymously- sourced programs from the internet cross-browser incompatibilities aggravated by Microsoft standards-busting and competition between MS and the other original endorsers (Netscape and Sun)

11. It’s Not All JavaScript’s Fault! JS is designed to be forgiving rather than efficient. You can get away with a lot of things that would cause errors in, say, Java. This requires a larger interpreter and causes slower performance.

12. It’s Not All JavaScript’s Fault! Most aggravating of all: you always need a fallback in case JS doesn’t work Users in high-security organizations like banks are not allowed to enable Javascript in their browsers Those who are just security conscious or who have been burned by security bugs may turn off Javascript support Future browsers may not be backward compatible with the JS you write now, or users may use a browser that can’t run your JS Your browser does not support JavaScript. You may not be able to use all the functionality of this page! This is caused by the nature of the internet and of business competition, not by the design of JavaScript

13. JavaScript History 1995 – Invented by Netscape (now Mozilla) Became a standard called ECMAScript-262 JavaScript is now a dialect of ECMAScript-262 Current version: JavaScript 1.8.1 Support Firefox 3.5: JavaScript 1.8.1 Supported Internet Explorer 8: JScript 5.8 JScript is Microsoft’s dialect of the ECMA-262 standard. They cannot use JavaScript because JavaScript is trademarked by Sun Microsystems.

14. Internal JavaScript JavaScript can be written inside an HTML file using the SCRIPT element Start and end tags are required Example: // your JavaScript code goes here

15. Notes About Internal JavaScript The SCRIPT element can go inside the HEAD Script is run before BODY is loaded The SCRIPT element can go inside the BODY Script is run as BODY is being loaded

16. External Scripts Include a script that is saved in a separate file, much like using an external CSS

17. The Window Object Every browser has a window object that you can access through your JavaScript There are five important functions that we need to know about window: window.alert(message); window.open(URL); window.showModalDialog(URL); window.prompt(message, defaultValue); window.confirm(message);

18. The Window Object Notice that: The object name, window, comes first Next is the period, which is called the member access operator Next is the name of the function Next is the left parenthesis Next is zero or more comma-separated arguments Next is the right parenthesis And finally, there is the semicolon

19. The Window Object Example Example: window.alert("Free Beer!"); window.prompt("How many people want free beer?", 26); window.confirm("Are you sure you want free beer?"); window.open("http://www.yahoo.com"); window.showModalDialog("http://www.noprescriptiondru gs.com/");

20. Alerts window.alert displays a simple dialog box window.alert(message); window.alert(x); message is a JavaScript string that you would like to have shown in an alert box

21. Prompts window.prompt displays a simple dialog box with a text input box, that allows the user to enter text This function is used for user input. var value = window.prompt(message, default-value); message is a JavaScript string that you would like to have shown in an prompt box default-value is a JavaScript string that you would like to have shown in the input box value is the JavaScript string that was in the input box when the user closed the prompt dialog box by pressing OK; if the user pressed CANCEL, the keyword null is returned.

22. Confirmation window.confirm displays a simple dialog box with a message and two button, OK and CANCEL This function is used for user input. var value = window.confirm(message); message is a JavaScript string that you would like to have shown in the confirm box value is the JavaScript boolean value that is true if the user pressed the OK button, and false if the user pressed the CANCEL button

23. Popup Windows window.open displays a popup window Most users now have multiple popup blockers, so you may want to avoid this Note: Whether or not a popup window opens in a tab or a new window is up to the browser. window.open(URL); URL is a JavaScript string that represents the URL that you would like to open up in a popup window

24. Modal Dialogs window.showModalDialog opens up a modal dialog A modal dialog is a popup window that prevents you from going back to the parent document; you must answer a modal dialog before proceeding window.showModalDialog(URL); URL is a JavaScript string that represents the URL that you would like to open up in a popup window showModalDialog is often used by obnoxious marketers this way: w indow.showModalDialog("http://www.vicodin4pain.com"); That’s downright rude!

25. Statements A computer program executes statements A statement is the smallest unit of execution in a computer program A statement should always be terminated by a semicolon in JavaScript There are many types of statements assignment return if… else… Plus many more!!!

26. JavaScript Data Types There are three basic data types that we need to worry about, numbers, strings, and Booleans Numbers 1, 2, 3, 1.0, 2.0, 3.0, -1.0, -2.0 Strings " This is a string of characters. " Boolean true, false

27. JavaScript Variables In an HTML page, sometimes we need to maintain the state of something To do this we can using a named variable The name can be any alpha-numeric character Just don’t start it off with a number To declare a variable, use the var keyword The syntax is: var variable-name = initial-value;

28. Assignment Statements Each one of the four statements below is an assignment statement var x = 0; var y; y = 10; x = 10 + 14 – 3;

29. Variables Example Example: var x = 3; var y = 1.0; var str = "This is a string."; var b1 = true; var b2 = false;

30. if… else… Statements We use the if… else… statement in conjunction with Boolean and logical expressions to execute branches of statements The syntax is: if(boolean-or-logical-expression) single-statement; else single-statement; Example: if(x < 10) y = 3; else y = 4;

31. if… else… Statements If multiple statements are needed, use curly brackets to label a block (a set of statements). The syntax is: if(boolean-or-logical-expression) { statement1; statement2; statement3; } else { statement1; statement2; statement3; }

32. Expressions An expression is sequence of numbers, variable names, values, function calls, and operators that computes a single value 3 + 4, is an expression that computes 7 ((7 – 2)*4), is an expression that computes 20 There are many different types of expressions Mathematical Boolean Logical

33. Mathematical Expressions Addition: x + y Subtraction: x – y Multiplication: x * y Division: x / y Remainder (Modulus): x % y

34. Boolean Expressions A Boolean expression is an expression that computes either true or false Less Than: x < y Greater Than: x > y Less Than or Equal: x <= y Greater Than or Equal: x >= y Equal: x == y Not Equal: x != y

35. Preview of Document Functions document.write(str) A function that allows you append HTML code to your document while it is being loaded If the output contains html tags, the browser will render the output using them. CSS styles apply to markup generated this way

36. Quotes Nested In Output You sometimes (for example, in lab 7) need to nest quotes inside string quotes in document.write or other JavaScript statements Choice a: more intuitive but less rigorous use single quotes for literal quotes (that is, ones you want to render as quotes) document.write(" "); Choice b: weirder but more logical escape with backslash document.write(" ");

37. Preview of Loops Loops are used in programming to repeat actions Loop breaks when some condition is met, for example when x == 100 or cancelled == true Here is the simplest kind of loop in JavaScript: var x = 0; while (x < 100) { document.write(x); x++; // increment x by 1 }

38. Preview of Loops Loops may be nested var x = 0; var y = 0; while(x < 10){ y = 10; while (y > 0){ document.write("x = " + x + "; y = " + y +" "); y--; } document.write("\n"); x++; }

39. Preview of Loops If the browser freezes while you testing a script with a loop: Stop loading if possible otherwise, close the browser check to make sure the loop increments correctly and that the condition for breaking the loop is eventually met

40. View Source and JS View Source will *not* show you the output from execution of JavaScript, even with document.write, which is executed at load time.

41. In Class Exercise Open a new html document and paste this embedded stylesheet into it: h4{font-size:120%} h3{font-size:140%} h2{font-size:160%} h1{font-size:180%} include a script that runs on page load and outputs the numbers 1 to 5 with increasing emphasis, using tags

42. In Class Exercise