Download
1 / 52
520 likes | 526 Views
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>
E N D
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> <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>
<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>
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.
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>
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.
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.
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).
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.
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 \”.
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.
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.
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.
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.
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.
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.)
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.
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!
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).
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.
