1 / 52

Starting JavaScript

Learn how to create interactive elements in JavaScript with Homage to the Square series by Josef Albers. Explore the basics of colors, user input, and script tags.

seastwood
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 the Homage to the Square</title> </head> <body> <center> <div style="position: relative; width: 500px; height: 500px; background: #FF0000" ms_positioning="GridLayout"> </div> </center> </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 the Homage to the Square</title> </head> <body> <center> <div style="position: relative; width: 500px; height: 500px; background: #FF0000" ms_positioning="GridLayout"> <div style="Z-INDEX: 101; LEFT: 50px; WIDTH: 400px; POSITION: absolute; TOP: 75px; HEIGHT: 400px; background: #FF6600" ms_positioning="GridLayout"> </div> </div> </center> </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. Open a new Notepad file and enter the following.

  15. Code <html> <head> <title>Interactive Homage to the Homage to the Square</title> </head> <body> <script language="JavaScript" type="text/javascript"> alert("Welcome to Homage to the homage to the square."); </script> </body> </html>

  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 the 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 the Homage to the “Homage to the Square” that is, to include quotes. • It 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:

  33. Viewed in browser (A)

  34. Viewed in browser (B)

  35. Viewed in browser (C)

  36. Viewed in browser (D)

  37. A comment • Note that two slashes have been 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 view 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.

  38. Coding code • The next two statements var HomageHTML; HomageHTML = "<center><div style=\"position: relative; width: 500px; height: 500px; background: "; declare a variable called HomageHTML and assign it a literal string value that just happens to be the start of some HTML code. • Note the use of the escape sequence to obtain the quote within the HTML code which is itself inside quotes. (This can be tricky.)

  39. Appending more HTML code • The following statement HomageHTML = HomageHTML + FirstColor; takes the HTML code established by the previous statements and concatenates (adds on) the variable FirstColor which corresponds to an RGB value. • It then assigns this longer concatenated string to the HomageHTML variable. • The effect is to append the color code to the HTML code thus far.

  40. Appending/adding shorthand • The next statement HomageHTML += "\" ms_positioning=\"GridLayout\">"; uses the notation += which is just a shorthand version for HomageHTML = HomageHTML + "\" ms_positioning=\"GridLayout\">"; • (Again one of the trickiest parts can be keeping track of the quotes and quotes within quotes.) • And don’t forget those semicolons!

  41. Progressing through the code • The next two statements HomageHTML += "</div></center>"; alert(HomageHTML); append the closing HTML tags to our string and then display the string in a message window (for purposes of checking on our progress).

  42. document.write • The last two new statements document.write(HomageHTML); document.close; takes the HTML code that is in our HomageHTML variable and puts it into our document so that the browser then knows to render it and change the displayed document accordingly. • The close may not be absolutely necessary, but it is a good idea to indicate that one is finished writing.

  43. More of the same

  44. Viewing in a browser (a)

  45. Viewing in a browser (b)

  46. Viewing in a browser (c)

  47. Viewing in a browser (d)

  48. Even more of the same (use copy and paste)

  49. Even more of the same viewed in a browser

  50. Yet even more of the same

More Related