1 / 48

Starting JavaScript

Starting JavaScript. Homage to the Homage to the Square. Homage to the Square. This exercise is based on the series of works by Josef Albers entitled “Homage to the Square”. Use Notepad to enter the HTML code to make a red square using the <div> tag. Code. <html> <head>

gryta
Download Presentation

Starting JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Starting JavaScript Homage to the Homage to the Square

  2. Homage to the Square • This exercise is based on the series of works by Josef Albers entitled “Homage to the Square”

  3. Use Notepad to enter the HTML code to make a red square using the <div> tag.

  4. 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>

  5. Save it and open it in a browser.

  6. Add another <div> tag within the previous.

  7. <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>

  8. Viewed in browser

  9. Add another (copy and paste comes in handy).

  10. Viewed in browser.

  11. Add another (copy and paste comes in handy).

  12. Viewed in browser.

  13. 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.

  14. Add script tags at the bottom but before the </body> (close-body tag).

  15. New Code <script language="JavaScript" type="text/javascript"> alert("Welcome to Homage to Homage to the Square"); </script>

  16. 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.

  17. 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.

  18. Viewed in browser.

  19. 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).

  20. 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.

  21. 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 \”.

  22. Using escape sequence to display quotes.

  23. Viewed in browser.

  24. 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.

  25. Add the next three statements.

  26. User is prompted with message and sample input.

  27. User might change the sample input and then clicks OK.

  28. Here we alert the user as to the input he or she has given.

  29. 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.

  30. 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.

  31. 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.

  32. Next phase: use the id attribute so we can identify the outermost square (div)

  33. Write code to change first square’s color based on user’s input.

  34. The code (note it shoul be on one line, not wrapped as shown below) • document.getElementById("FirstSquare").style.background = FirstColor;

  35. Viewed in browser (A)

  36. Viewed in browser (B)

  37. Viewed in browser (C)

  38. 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.

  39. Give ids to the other squares.

  40. Add code that allows the user to change the second color

  41. Add code for the third and fourth squares.

  42. References • Beginning JavaScript, Paul Wilton • Albers, Werner Spies

More Related