Lab 1: Homage to the Square.
advertisement
Starting JavaScript Homage to the Homage to the Square CSD 340 (Blum) 1 Homage to the Square • This exercise is based on the series of works by Josef Albers entitled “Homage to the Square” CSD 340 (Blum) 2 Use Notepad to enter the HTML code to make a red square using the <div> tag. CSD 340 (Blum) 3 Code <html> <head> <title>Homage to "Homage to the Square"</title> <meta name="keywords" content="Josef Albers, Homage to the Square"> </head> <body> <div align="center"> <div style="position: relative; width: 500px; height: 500px; background: #FF0000" ms_positioning="GridLayout"> </div> </div> </div> </body> </html> CSD 340 (Blum) 4 Save it and open it in a browser. CSD 340 (Blum) 5 Add another <div> tag within the previous. CSD 340 (Blum) 6 <html> <head> <title>Homage to "Homage to the Square"</title> <meta name="keywords" content="Josef Albers, Homage to the Square"> </head> <body> <div align="center"> <div style="position: relative; width: 500px; height: 500px; background: #FF0000" ms_positioning="GridLayout"> <div style="position: absolute; width: 400px; height: 400px; left: 50px; top: 75px; background: #AA5500" ms_positioning="GridLayout"> </div> </div> </div> </body> </html> CSD 340 (Blum) 7 Viewed in browser CSD 340 (Blum) 8 Add another (copy and paste comes in handy). CSD 340 (Blum) 9 Viewed in browser. CSD 340 (Blum) 10 Add another (copy and paste comes in handy). CSD 340 (Blum) 11 Viewed in browser. CSD 340 (Blum) 12 Making it interactive • Now let us make a version which involves the user by letting him or her select the colors by entering RGB values. • An important concept when interfacing with a user is validation – making sure the user has done something sensible within the context of the program. But we have enough to worry about with this exercise, so we will put off validation for another time. CSD 340 (Blum) 13 Add script tags at the bottom but before the </body> (close-body tag). CSD 340 (Blum) 14 New Code <script language="JavaScript" type="text/javascript"> alert("Welcome to Homage to Homage to the Square"); </script> CSD 340 (Blum) 15 The script tag • The <script> tag tells the browser that the text that follows is not HTML but something else. • The language attribute informs the browser that the text within is written in JavaScript. • The type attribute does the same. The reason for doing it twice is because of possible browser differences. Hopefully the browser will understand one of the versions. CSD 340 (Blum) 16 The alert function • The line between the open and closing script tag – alert("Welcome to Homage to Homage to the Square."); is a predefined function that pops up a message window with the given text displayed. CSD 340 (Blum) 17 Viewed in browser. CSD 340 (Blum) 18 Some vocabulary • A function is a set of code with some well defined action. • In this case, we are just using a function that someone else wrote and that is known to most browsers. Our code is said to call the function (that is, ask that the code be run or executed). CSD 340 (Blum) 19 Some more vocabulary • The function has an argument or parameter (in this case the text in the quotes, in the parentheses). An argument allows a function to adapt to different situations; in this case the message window can have different messages. • The text in the quotes is called a literal string – we want the message literally to say exactly what we have in the quotes. The term string refers to a set of consecutive characters. CSD 340 (Blum) 20 A problem • Suppose we wanted the message window to say Welcome to Homage to “Homage to the Square” that is, to include quotes. • The browser would interpret the first quote we want printed as the ending quote of the literal. • We can handle this by using an escape sequence – replacing the quotes we want printed by \”. CSD 340 (Blum) 21 Using escape sequence to display quotes. CSD 340 (Blum) 22 Viewed in browser. CSD 340 (Blum) 23 Vocabulary: Delimiter • Note that the line of code (known as a statement) ends with a semicolon. • The semicolon is known as a delimiter. A delimiter is used to separate one element from another. For example, the English language uses a space as a delimiter between words. CSD 340 (Blum) 24 Add the next three statements. CSD 340 (Blum) 25 User is prompted with message and sample input. CSD 340 (Blum) 26 User might change the sample input and then clicks OK. CSD 340 (Blum) 27 Here we alert the user as to the input he or she has given. CSD 340 (Blum) 28 Variables • In the first new statement var FirstColor; we are said to be declaring a variable. • If a quantity might change in the execution of the program, we declare a variable to set aside a place (in memory). This allows us to change it but also to hold the value until we have a chance to use it. CSD 340 (Blum) 29 • The second new statement FirstColor = prompt("Enter a color in hexadecimal RGB (e.g. #FF0000 is red)","#FF0000"); is a combination of two things. – The first part is the predefined prompt function which has two arguments – the first is a message and the second is a sample input for the user. Both arguments are literal strings. The function brings back (returns) input from a user. – The second part is called an assignment statement (symbolized by the equal sign) that makes the variable on the left-hand side equal to the value obtained from the right-hand side. CSD 340 (Blum) 30 Concatenation • The third new statement alert("You have selected " + FirstColor); uses the alert function again. • But instead of a simple literal string as an argument, this time the argument is the concatenation of a literal string with a variable having a string value. – Concatenation is a fancy term for having one string follow another. CSD 340 (Blum) 31 Next phase: use the id attribute so we can identify the outermost square (div) CSD 340 (Blum) 32 Write code to change first square’s color based on user’s input. CSD 340 (Blum) 33 The code (note it shoul be on one line, not wrapped as shown below) • document.getElementById("FirstSquare"). style.background = FirstColor; CSD 340 (Blum) 34 Viewed in browser (A) CSD 340 (Blum) 35 Viewed in browser (B) CSD 340 (Blum) 36 Viewed in browser (C) CSD 340 (Blum) 37 A comment • Note that two slashes can be added to one of the previous statements //alert("You have selected " + FirstColor); This makes the line of text into a comment. A comment is not executed, it has no effect on what the browser displays. It is only seen when one views the source. – It can be used to disable code (as seen here) or to convey information to anyone who might read one’s code. • This allows one to document one’s code which is very important. CSD 340 (Blum) 38 Give ids to the other squares. CSD 340 (Blum) 39 Add code that allows the user to change the second color CSD 340 (Blum) 40 CSD 340 (Blum) 41 CSD 340 (Blum) 42 CSD 340 (Blum) 43 Add code for the third and fourth squares. CSD 340 (Blum) 44 CSD 340 (Blum) 45 CSD 340 (Blum) 46 CSD 340 (Blum) 47 References • Beginning JavaScript, Paul Wilton • Albers, Werner Spies CSD 340 (Blum) 48
