csd 340 (blum)1 starting javascript homage to the homage to the square
TRANSCRIPT
CSD 340 (Blum) 1
Starting JavaScript
Homage to the Homage to the Square
CSD 340 (Blum) 2
Homage to the Square
• This exercise is based on the series of works by Josef Albers entitled “Homage to the Square”
CSD 340 (Blum) 3
Use Notepad to enter the HTML code to
make a red square using the <div> tag.
CSD 340 (Blum) 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>
CSD 340 (Blum) 5
Save it and open it in a browser.
CSD 340 (Blum) 6
Add another <div> tag within the previous.
CSD 340 (Blum) 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>
CSD 340 (Blum) 8
Viewed in browser
CSD 340 (Blum) 9
Add another (copy and paste comes in handy).
CSD 340 (Blum) 10
Viewed in browser.
CSD 340 (Blum) 11
Add another (copy and paste comes in handy).
CSD 340 (Blum) 12
Viewed in browser.
CSD 340 (Blum) 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.
CSD 340 (Blum) 14
Open a new Notepad file and enter the following.
CSD 340 (Blum) 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>
CSD 340 (Blum) 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.
CSD 340 (Blum) 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.
CSD 340 (Blum) 18
Viewed in browser.
CSD 340 (Blum) 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).
CSD 340 (Blum) 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.
CSD 340 (Blum) 21
A problem
• Suppose we wanted the message window to sayWelcome 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 \”.
CSD 340 (Blum) 22
Using escape sequence to display quotes.
CSD 340 (Blum) 23
Viewed in browser.
CSD 340 (Blum) 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.
CSD 340 (Blum) 25
Add the next three statements.
CSD 340 (Blum) 26
User is prompted with message and sample input.
CSD 340 (Blum) 27
User might change the sample input and then clicks OK.
CSD 340 (Blum) 28
Here we alert the user as to the input he or she has given.
CSD 340 (Blum) 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.
CSD 340 (Blum) 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.
CSD 340 (Blum) 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.
CSD 340 (Blum) 32
Next phase:
CSD 340 (Blum) 33
Viewed in browser (A)
CSD 340 (Blum) 34
Viewed in browser (B)
CSD 340 (Blum) 35
Viewed in browser (C)
CSD 340 (Blum) 36
Viewed in browser (D)
CSD 340 (Blum) 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.
CSD 340 (Blum) 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.)
CSD 340 (Blum) 39
Appending more HTML code
• The following statementHomageHTML = 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.
CSD 340 (Blum) 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!
CSD 340 (Blum) 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).
CSD 340 (Blum) 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.
CSD 340 (Blum) 43
More of the same
CSD 340 (Blum) 44
Viewing in a browser (a)
CSD 340 (Blum) 45
Viewing in a browser (b)
CSD 340 (Blum) 46
Viewing in a browser (c)
CSD 340 (Blum) 47
Viewing in a browser (d)
CSD 340 (Blum) 48
Even more of the same (use copy and paste)
CSD 340 (Blum) 49
Even more of the same viewed in a browser
CSD 340 (Blum) 50
Yet even more of the same
CSD 340 (Blum) 51
Yet even more of the same viewed in a browser
CSD 340 (Blum) 52
References
• Beginning JavaScript, Paul Wilton
• Albers, Werner Spies