Midterm Exam Review HTML and JavaScript
What is HTML? HTML stands for HyperText Markup Language It is the set of instructions hidden behind every web page (called the source of the page) HTML “tags” tell the browser (like Internet Explorer) how to display the page. For example, <B>HI THERE</B> would display the words HI THERE in bold.
What is HTML? HTML “tags” are contained within < > The letters inside the < > are the instructions (like <B> for bold) and may be upper or lower case. Tags often come in pairs…one to begin a feature, and another to end it. In the previous example, <B> means “begin bold here” and </B> means “end bold here”.
HTML Structure Each web page has a HEAD and a BODY. All web pages have required tags like these: <HTML> {begin the page} <HEAD> {some set up instructions </HEAD> are here} <BODY> {the main part of the page </BODY> is here} </HTML> {end the page}
HTML Structure The HEAD section often contains tags to display a page title. The title is displayed at the top of the window (not on the page). Here is an example: <HEAD> <TITLE>My Web Page</TITLE> </HEAD>
HTML Structure The BODY section contains all the instructions for the actual page display. Inside the body section of a web page you will find tags that control text, graphics, lines, links, tables and other special functions. Remember that some, but not all, tags come in pairs.
Text-Related Tags Text is most often displayed in paragraphs, using block form. The paragraph tags <P> and </P> are used before and after a paragraph. <BR> (“line break”) is like pressing Return/Enter. The text that follows is displayed on the next line. NOTE: Just pressing Return/Enter when you are writing a page in HTML does not guarantee that it will be displayed on the next line.
Text-Related Tags Text is sometimes displayed in BOLD or ITALICS. The tag pair <B> and </B> make the text between display in bold. The tag pair <I> and </I> make the text between display in italics. Examples: <B>This is bold text.</B> This is bold text. <I>Here is italics.</I> Here is italics. <B><I>Both!</I></B> Both!
Text-Related Tags NOTE: Though there is a tag for underlining (<U> </U>) it is not a good idea to underline text. It may be confused with a link, since they are usually underlined. The <FONT> </FONT> tag pair can be used to change other aspects of text (e.g., color).
Text-Related Tags You will often see text displayed in large, bold type, almost like a newspaper headline. The “header” tags are used for this purpose. The largest “header” tag is <H1> </H1> (larger numbers make smaller headers). An example: <H1>MY PAGE</H1> displays MY PAGE <H6>MY PAGE</H6> displays MY PAGE
TRAINS Text-Related Tags To center a header, the tag pair <CENTER> </CENTER> is used. An example: <CENTER> <H1>TRAINS</H1> </CENTER> displays… TRAINS
Lines Many web pages use horizontal lines to divide the page. The <HR> tag is used to draw a line. You can control the size (thickness in pixels) and width (% of the window). Examples: <HR> {one pixel thick, 100% of window} <HR SIZE=4 WIDTH=50%> {4 pixels thick, 50% of window}
IMAGE Tags The <IMG> tag is used to display graphics on web pages. The main requirement for the IMG tag is the file name (“source”) of the image. NOTE: Web page images DO NOT become part of a web page file. They are separate files and must be located in the same folder as the web page file unless otherwise noted.
IMAGE Tags An example of an IMG tag that displays a graphic called ME.JPG <IMG SRC=“ME.JPG”> In the example above, the name (“source” or SRC) of the picture file is ME.JPG (stored in the same folder as the web page file). NOTE: The image file’s name must be exactly as stored (upper/lower case, etc.) .JPG and .GIF indicate types of images appropriate for web pages.
Lists Many web pages contain lists. Lists can be “unordered” (using bullets like this list) or “ordered” (with numbers or letters). <UL> </UL> indicates an unordered (bulleted) list. <OL> </OL> indicates an ordered list. <LI> </LI> is used for each list item.
List Examples These tags… <UL> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </UL> Produce this list… Dogs Cats Lizards
List Examples These tags… <OL> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </OL> Produce this list… Dogs Cats Lizards
List Examples These tags… <OL TYPE=“A”> <LI>Dogs</LI> <LI>Cats</LI> <LI>Lizards</LI> </OL> Produce this list… Dogs Cats Lizards
A Word about Links All links use the tag that begins <A HREF= The A stands for “anchor” (think of an anchor chain..it’s made of links…right?). The HREF part will be the name of a web page or a web address.
A Word about Links Here are a couple of examples, you will see the actual message to click on between the “A” tags. This link shows the words Go Back and sends the user to a page called HOME.HTM that is stored in the same folder as the current page. <A HREF=“HOME.HTM”>Go Back</A>
A Word about Links This link shows the words More Info and sends the user to the CSUH home page. <A HREF=“http://www.csuhayward.edu/”>More Info</A>
More about Links Virtually every web page has links…it’s the basic idea of the web and HTML (HyperText refers to links). Link tags look like this: <A HREF=“address”>what to click on</A> The address can be a file name (like home.htm) or a web address (like http://www.csuhayward.edu)
More about Links The “what to click on” is quite often text. Whatever is placed between the <A> tags is displayed on the screen and usually underlined (though you can change it in your browser settings). You can also place an < IMG> tag between the <A> tags, making the image into a link.
More about Links The example below shows an image called TOY.JPG as a link to a page called TOYSTORY.HTM : <A HREF=“TOYSTORY.HTM”> <IMG SRC=“TOY.JPG”></A> The <IMG> tag may also contain HEIGHT, WIDTH, and BORDER information. This way, however, the user will not know that the image is a link. See the next slide for a better idea.
More about Links In the example below, both the image TOY.JPG and the words “GO TO TOY STORY” are part of the link to TOYSTORY.HTM. <A HREF=“TOYSTORY.HTM”>GO TO TOY STORY <IMG SRC=“TOY.JPG”></A> The words in the link can come before or after the <IMG> tag. Placement of text is next to images.
More about Links Sometimes it is convenient to have a list of links. See the example below: <UL> <LI><A HREF=“http://www.csuhayward.edu/”>CSUH </A></LI> <LI><A HREF=“http://www.csuhayward.edu/math/>” College of Math </A></LI> <LI><A HREF=“http://www.csuhayward.edu/bhecker”> Barbara’s Classes</A></LI> </UL>
Colors in HTML When you specify colors in HTML, you can either enter a color by name (for simple colors) OR… You can put in codes that specify the amount of red, green and blue to include in the color (which gives you millions of combinations).
Colors in HTML Here is an example of the use of color in a <FONT> tag. The text will print in red. <FONT color=“red”>The text.</FONT> Here is another way to say “red”: <FONT color=“#FF0000”>The text.</FONT> (weird, huh?) red green blue
Colors in HTML What’s all this “#FF” stuff? If you want more than simple colors, you must specify the amount of red, green, and blue in the color. This is done with six hexadecimal (base 16) numbers (that’s what # means) - two each for red, green and blue. Each pair of numbers ranges from 00 to FF (yes, FF is a number) 00 = none, FF = highest
Colors in HTML Here are some sample color numbers: RED #FF0000 (high red, no green, no blue) GREEN #00FF00 (no red, high green, no blue) BLUE #0000FF (no red, no green, high blue) BLACK #000000 (no red, no green, no blue) WHITE #FFFFFF (high red, high green, high blue) YELLOW #FFFF00 (high red, high green, no blue) CYAN #00FFFF (no red, high green, high blue) MAGENTA #FF00FF (high red, no green, high blue)
Colors in HTML Another place to use color is for a background. Background color is specified in the <BODY> tag. For example, to set the background of a page to light blue, use <BODY BGCOLOR=“light blue”>
Colors in HTML You can also set the link color and text color for the whole page in the <BODY> tag. Here is a tag that sets the background to yellow, the text to red, the links to blue, and the visited links (the ones you have already been to) to purple: <BODY BGCOLOR=“yellow” TEXT=“red” LINK=“blue” VLINK=“purple”>
More about Text Size You know “header” tags make large text (like <H1></H1>) You can also specify text size with a <FONT> tag. Here is an example of very small text: <FONT SIZE=1>Write this.</FONT>
More about Images Web page images are displayed on the left side of a page and in their actual stored size unless otherwise instructed. The HEIGHT and WIDTH of an image can be specified in the IMG tag. HEIGHT and WIDTH are measured in pixels.
More about Images Example: <IMG SRC=“MyPicture.gif” HEIGHT=100 WIDTH=50> The example above displays the graphic file MyPicture.gif with a height of 100 pixels and a width of 50 pixels. NOTE: If you do not specify HEIGHT and WIDTH, the image will appear the size at which it was stored.
More about Images To align an image at the center or the right of the screen, it is easiest to use one of the following tag pairs: <CENTER> </CENTER> <RIGHT> </RIGHT> The IMG tag is placed between the alignment tags: <CENTER><IMG SRC=“picture.jpg”></CENTER> NOTE: If you place several IMG tags in a row (one for each picture), they will appear next to each other when the page is displayed.
More about Images If you want a border (like a frame) around the image, you can put BORDER=thickness in pixels in the IMG tag. Example: <IMG SRC=“kitty.jpg” BORDER=3> Here is an example of an image called BOG.gif which is centered, displayed 200 x 200, with a 4-pixel border. <CENTER> <IMG SRC=“BOG.gif” HEIGHT=200 WIDTH=200 BORDER=4> </CENTER>
Image Maps You have learned that a graphic can be a link. With an image map, a single graphic can be used to link to several different sites. Coordinates within an image are used to “map” various areas, each of which may be used as a link to a different web page.
Image Maps If you could see an image with its map, it might look like this: These areas might link to EAR.HTM Each area could be a separate link. This area might link to FEET.HTM
Image Maps Each area is defined by coordinates in pixels. For rectangular areas, it is the upper left and lower right. This area might be defined as 2,200 (upper left) 205,300 (lower right)
Image Maps The HTML code to make an image map begins with the IMG tag. Here is a sample: <IMG SRC=“pig.gif” USEMAP=“#MIG”> USEMAP says that the graphic is an image map. MIG is the name of the map definition (# means “look in this same document”).
Image Maps The image map definition begins with a map tag: <MAP NAME=“MIG”> The name of this map definition is MIG. </MAP> ends the definition. The lines in between describe the areas (by coordinates) and the web pages that they link to.
Image Maps The lines between <MAP NAME=“MIG”> and </MAP> define the areas, one tag for each area. Here is an example from the pig: <AREA SHAPE=RECT HREF=“FEET.HTM” COORDS=“2,200 205,300”> The shape of the area is a rectangle, the link goes to FEET.HTM, the upper left of the rectangle is at 2,200 and the lower right of the rectangle is at 205,300.
Image Maps How can I find the coordinates? You can search shareware sites for image map programs. You can use a graphics program, if it shows the position of the cursor with “pixels”. Move the cursor over the picture and write down the appropriate coordinates.
Frames A FRAMESET document uses <FRAMESET> and </FRAMESET> instead of <BODY> and </BODY>. The type of frames (rows or columns) must be specified, and each frame must be described with a <FRAME> tag like this: <FRAME SRC =”content1.htm" border="0" NORESIZE >
FRAMESET Sample Here is the FRAMESET code for the example --> <HTML> <HEAD></HEAD> <FRAMESET COLS=“100,*”> <FRAME SRC=“left.htm”> <FRAME SRC=“right.htm”> </FRAMESET> </HTML> WELCOME! Links One Two Three Join us..etc. left.htm right.htm
FRAMESET Sample Two “column” frames - the first (left) is 100 pixels wide. The right frame takes up whatever space is left over (*) on the screen. left.htm is the web page file for the left frame. right.htm fills the right frame. <HTML> <HEAD></HEAD> <FRAMESET COLS=“100,*”> <FRAME SRC=“left.htm”> <FRAME SRC=“right.htm”> </FRAMESET> </HTML>
Self Check - Example Questions Which of the following is NOT a required tag? <HTML> </BODY> <H1> <HEAD>
Self Check - Example Questions Which of the following is NOT a required tag? <HTML> </BODY> <H1> {headings/headlines are common, but not required} <HEAD>
Self Check - Example Questions Which of the tags below will show the words MY PAGE on the page in very large type? <TITLE>MY PAGE</TITLE> <H1>MY PAGE</H1> <H7>MY PAGE</H7> <FONT SIZE=2>MY PAGE</FONT>
Self Check - Example Questions Which of the tags below will show the words MY PAGE on the page in very large type? <TITLE>MY PAGE</TITLE> <H1>MY PAGE</H1> {H1 shows the largest “headline”} <H7>MY PAGE</H7> <FONT SIZE=2>MY PAGE</FONT>
Self Check - Example Questions Which set of tags below would display this text in italics and bold: CLICK HERE <I><B>CLICK HERE</I></B> <I><B>CLICK HERE</B></I> <B>CLICK HERE</B> <H1>CLICK HERE</H1>
Self Check - Example Questions Which set of tags below would display this text in italics and bold: CLICK HERE <I><B>CLICK HERE</I></B> <I><B>CLICK HERE</B></I> * <B>CLICK HERE</B> <H1>CLICK HERE</H1> *Explanation: Tags must be “nested” - the first to be turned on must be the last to be turned off.
Self Check - Example Questions To put a blank line after typing… <BR> <P> and </P> Just press Return/Enter Either <BR> or <P></P> will work.
Self Check - Example Questions To put a blank line after typing… <BR> <P> and </P> Just press Return/Enter Either <BR> or <P></P> will work.
Self Check - Example Questions Which the the following makes a “numbered” list (1., 2., etc.)? <OL></OL> <LI></LI> <UL></UL> <NL></NL>
Self Check - Example Questions Which the the following makes a “numbered” list (1., 2., etc.)? <OL></OL> {a numbered list is an “ordered” list} <LI></LI> <UL></UL> <NL></NL>
Self Check - Example Questions To draw a line across the web page, use… <HR> <LINE> <LI></LI> Must use a graphic.
Self Check - Example Questions To draw a line across the web page, use… <HR> {a line is a “horizontal rule”} <LINE> <LI></LI> Must use a graphic.
Self Check - Example Questions Which of the following displays the words CLICK ME as a link to homepage.htm? <LI “homepage.htm”>CLICK ME</LI> <LI “CLICK ME”>homepage.htm <A HREF=”homepage.htm”>CLICK ME</A> <LINKTO “homepage.htm”>CLICK ME
Self Check - Example Questions Which of the following displays the words CLICK ME as a link to homepage.htm? <LI “homepage.htm”>CLICK ME</LI> <LI “CLICK ME”>homepage.htm <A HREF=”homepage.htm”>CLICK ME</A> <LINKTO “homepage.htm”>CLICK ME
Self Check – Example Questions Which command is used to set the background color of a web page to white… <BODY BGCOLOR=“WHITE”> <BODY BGCOLOR=“#000000”> <BODY BGCOLOR=“NONE”>
Self Check – Example Questions To set the background color of a web page to white… <BODY BGCOLOR=“WHITE”> <BODY BGCOLOR=“#000000”> <BODY BGCOLOR=“NONE”>
Self Check – Example Questions Which of the following places a graphic called “dog.jpg” on a web page? <IMG SRC=“dog.jpg”> <IMG SRC=“DOG.JPG”> <GRP SRC=“dog.jpg”> <IMG GRP=“dog.jpg”>
Self Check - Example Questions Which of the following places a graphic called “dog.jpg” on a web page? <IMG SRC=“dog.jpg”> <IMG SRC=“DOG.JPG”> {case must match file name} <GRP SRC=“dog.jpg”> <IMG GRP=“dog.jpg”>
Self Check - Example Questions Which of the following sets the size of dog.jpg to 100 x 100 pixels? <IMG SRC=“dog.jpg” SIZE = “100x100”> <IMG SRC=“dog.jpg” SIZE1=100 SIZE2=100> <IMG SRC=“dog.jpg” HEIGHT=100 WIDTH=100>
Self Check - Example Questions Which of the following sets the size of dog.jpg to 100 x 100 pixels? <IMG SRC=“dog.jpg” SIZE = “100x100”> <IMG SRC=“dog.jpg” SIZE1=100 SIZE2=100> <IMG SRC=“dog.jpg” HEIGHT=100 WIDTH=100>
Self Check - Example Questions Which of the following creates a link to HOME.HTM by clicking GO HOME? <A HREF=“GO HOME”>HOME.HTM</A> <A HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“GO HOME”>HOME.HTM</A>
Self Check - Example Questions Which of the following creates a link to HOME.HTM by clicking GO HOME? <A HREF=“GO HOME”>HOME.HTM</A> <A HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“HOME.HTM”>GO HOME</A> <IMG HREF=“GO HOME”>HOME.HTM</A>
Self Check - Example Questions Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? <A HREF=“HOME.HTM><IMG SRC=“home.jpg”>GO HOME</A> <A HREF=“HOME.HTM>GO HOME<IMG SRC=“home.jpg”></A> <A HREF=“HOME.HTM><IMG SRC=“home.jpg”></A>
Self Check - Example Questions Which of the following allows the user to click on GO HOME or a graphic (home.jpg) to go to HOME.HTM? <A HREF=“HOME.HTM><IMG SRC=“home.jpg”>GO HOME</A> <A HREF=“HOME.HTM>GO HOME<IMG SRC=“home.jpg”></A> <A HREF=“HOME.HTM><IMG SRC=“home.jpg”></A> {Either graphics first or words first}
Self Check - Example Questions Which of the lists below will results from these tags? <OL> <LI><A HREF=“MINE.HTM”>See Me</A></LI> <LI>GO AWAY!</LI> </OL> See Me GO AWAY! See Me GO AWAY! See Me GO AWAY!
Self Check - Example Questions Which of the lists below will results from these tags? <OL> <LI><A HREF=“MINE.HTM”>See Me</A></LI> <LI>GO AWAY!</LI> </OL> See Me GO AWAY! See Me GO AWAY! See Me GO AWAY!
Self Check - Example Questions Which is the correct text placement if this tag is used? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK! SINK! SINK! SINK!
Self Check - Example Questions Which is the correct text placement if this tag is used? <IMG SRC=“SOS.GIF” ALIGN=TOP>SINK! SINK! SINK! SINK!
Self Check - Example Questions To use a graphic (back1.gif) as a page background, use… <BODY BACKGROUND=“back1.gif”> <BODY><IMG SRC=“back1.gif”></BODY> <BODY BGCOLOR=“back1.gif”> You cannot use a graphic as a background.
Self Check - Example Questions To use a graphic (back1.gif) as a page background, use… <BODY BACKGROUND=“back1.gif”> <BODY><IMG SRC=“back1.gif”></BODY> <BODY BGCOLOR=“back1.gif”> You cannot use a graphic as a background.
Self Check - Example Questions If a background graphic is smaller than the page display… The image is displayed larger to fill the window. The image is centered on the page window. The image is tiled (repeated).
Self Check - Example Questions If a background graphic is smaller than the page display… The image is displayed larger to fill the window. The image is centered on the page window. The image is tiled (repeated).
Self Check - Example Questions To use an image (lineup.gif) as a line, use the following tag(s)… <HR><IMG SRC=“lineup.gif”></HR> <IMG SRC=“lineup.gif”> <HR SRC=lineup.gif”> <HR>lineup.gif</HR>
Self Check - Example Questions To use an image (lineup.gif) as a line, use the following tag(s)… <HR><IMG SRC=“lineup.gif”></HR> <IMG SRC=“lineup.gif”> <HR SRC=lineup.gif”> <HR>lineup.gif</HR>
Self Check – Example Questions Which of the following graphics formats would need to be converted before using on a web page? GIF JPG TIFF BMP PICT
Self Check - Example Questions Which of the following graphics formats would need to be converted before using on a web page? GIF JPG TIFF BMP {You will need a graphics PICT conversion program}
Self Check - Example Questions An image map is… A GIF that shows a map of a country A graphic that links to several different web pages A graphic that links to a single web page There is no such thing!
Self Check - Example Questions An image map is… A GIF that shows a map of a country A graphic that links to several different web pages A graphic that links to a single web page There is no such thing!
Self Check - Example Questions Which of the following tags shows a rectangular area linking to home.htm with coordinates of 100,100 and 300,400? <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100,200,400”> <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100 200,400”>
Self Check - Example Questions Which of the following tags shows a rectangular area linking to home.htm with coordinates of 100,100 and 200,400? <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100,200,400”> <AREA SHAPE=RECT HREF=“home.htm” COORDS=“100,100 200,400”> {No comma between sets of coordinates}
JavaScript
What is JavaScript? JavaScript is a programming language. This means that the instructions you write in JavaScript will make something happen. You can include it easily within the HTML code of a web page to customize the page.
What is JavaScript? JavaScript is related to Java and C++, but it does not need to be “compiled” (translated to binary) before it is used. JavaScript is not the same as Java.
What is JavaScript? JavaScript code is “interpreted” - the browser executes each line of code as it is encountered. JavaScript is free and many existing samples are available.
How do you add JavaScript to a web page? When you copy or type the code, notice where it should go. JavaScript is most commonly placed in the <HEAD> section of a page, but there are often parts that must go elsewhere.
JavaScript - Sample Here is an explanation of a simple use of JavaScript - asking a question and displaying an answer. In this case, there will be a JavaScript function (small program) called getName() placed in the HEAD section of the HTML. It will ask for a name and print Hi and the name.
JavaScript - Sample Here’s what the function looks like: <script language="JavaScript"> var stName="XX" function getName( ) { stName=prompt("Please enter your name"," ") alert("Hi, " + stName) } </script>
JavaScript - Sample The script tags are needed to identify this code as JavaScript. <script language="JavaScript"> var stName="XX" function getName( ) { stName=prompt("Please enter your name"," ") alert("Hi, " + stName) } </script>
JavaScript - Sample The line beginning var sets up a variable called stName with a beginning value of XX. <script language="JavaScript"> var stName="XX" function getName( ) { stName=prompt("Please enter your name"," ") alert("Hi, " + stName) } </script>
JavaScript - Sample function getName() defines the name of the function (notice the two parentheses). <script language="JavaScript"> var stName="XX" function getName( ) { stName=prompt("Please enter your name"," ") alert("Hi, " + stName) } </script>
JavaScript - Sample The braces ({ and }) show where the function begins and ends. <script language="JavaScript"> var stName="XX" function getName( ) { stName=prompt("Please enter your name"," ") alert("Hi, " + stName) } </script>
JavaScript - Sample The line beginning stName= displays the message Please enter your name and waits for an entry, which will be the value of stName. <script language="JavaScript"> var stName="XX" function getName( ) { stName=prompt("Please enter your name"," ") alert("Hi, " + stName) } </script>
JavaScript - Sample The line beginning alert displays Hi, and the value of the variable stName. <script language="JavaScript"> var stName="XX" function getName( ) { stName=prompt("Please enter your name"," ") alert("Hi, " + stName) } </script>
JavaScript - Sample Something has to start the getName() function. This can be done by the user clicking on a graphic or a “form” button.
JavaScript - Sample To start a function, its name will be somewhere in the HTML: getName() You will see this code in an IMG tag: onclick=“getName()” When the graphic is clicked, the function starts.
JavaScript - Sample You will also see this code between <FORM> tags: <input value="HI" onclick="getName()" type="button"> FORMs are used to make buttons and input boxes appear on a web page.
Self Check – Example Questions True or false - JavaScript and Java are exactly the same thing.
Self Check - Example Questions True or false - JavaScript and Java are exactly the same thing. False - Java must be “complied” (translated to binary) before running, while JavaScript runs automatically every time the web page is opened. Java is also much more powerful than JavaScript.
Self Check - Example Questions JavaScript is most often found in the _____ section of the HTML code for a web page. <HEAD> <BODY> <TABLE> <LIST>
Self Check - Example Questions JavaScript is most often found in the _____ section of the HTML code for a web page. <HEAD> <BODY> {may be here, too} <TABLE> <LIST>
Self Check - Example Questions Which of the following is the correct way to begin JavaScript? <SCRIPT LANGUAGE=“Javascript”> <SCRIPT LANGUAGE=“JavaScript”> <JAVASCRIPT> <JavaScript>
Self Check - Example Questions Which of the following is the correct way to begin JavaScript? <SCRIPT LANGUAGE=“Javascript”> <SCRIPT LANGUAGE=“JavaScript”> * <JAVASCRIPT> <JavaScript> * {upper and lower case must be exact}
Self Check - Example Questions Suppose you created the function shown below. What command would activate the function? function HAPPY() happy() HAPPY HAPPY()
Self Check - Example Questions Suppose you created the function shown below. What command would activate the function? function HAPPY() happy() HAPPY HAPPY() {case sensitive; must include ( )}
Self Check - Example Questions Which of the following commands waits for input? prompt alert
Self Check - Example Questions Which of the following commands waits for input? prompt {waits for input and Return/Enter} alert {displays message only}
Object-Oriented Programming Programming languages come in many varieties. Older languages like BASIC and FORTRAN accepted input from the user and displayed information. They could not directly influence “objects” such as graphics or text boxes.
Object-Oriented Programming JavaScript (and other contemporary languages) are classified as object-oriented, because they can affect objects on the screen. For example, JavaScript can be used to change an image when the mouse rolls over it.
Addressing Objects In order to affect objects, JavaScript must have a way of addressing (naming) them. JavaScript uses a “dot scheme” (parts of the web page are addressed using certain terms with periods/dots in between).
Addressing Objects For example, a graphic on a web page might be window.document.button or window.document.images[1] The largest part (window) is first, then a subset of window (document), and finally a subset of document (the image named “button”).
Properties Objects on the screen often have properties (attributes) that can be addressed by JavaScript. For example, each image has a source. A web page document may have a background color.
Properties Here are some “dot” addresses: image source (image place named M) window.document.M.src=“me.gif” image source (2nd image on the page) window.document.images[2].src=“me.gif” web page background color: window.document.bgcolor.value=“blue”
Example - The Status Bar JavaScript can be used to put text into the status bar. For example, a message can be placed in the status bar when the mouse moves over images.
Example - The Status Bar The “dot address” of the status bar is window.status (it doesn’t have anything to do with the web page document, so the term document is not included).
Example - The Status Bar Here is the code to add to an IMG tag to put text into the status bar: onMouseOver=“window.status=‘HI!’” Notice that the entire instruction (from window.status to the end is in quotes (“). The message itself (HI!) is inside single quotes (‘).
Example - The Status Bar The IMG tag might look like this (name of image file is “hello.jpg”) <IMG src=”hello.jpg” onMouseOver=“window.status=‘HI!’”> Other choices for images are onClick (if you click on the image) and onMouseOut (when you move the mouse away from the image).
Example - Text in a Box Forms are used to put buttons and input boxes on the web page. The next JavaScript example will put a message in a text box. The message will depend on the time of day.
Example - Text in a Box This page uses FORM tags for the box: <form name="greet"> <input type="text" size="20”name="greetingbox"> </form> This results in a text box (20 characters long) called greetingbox:
Example - Text in a Box The dot address for the box is: document.greet.greetingbox.value The box is called greetingbox. The box called greetingbox is in the form called greet. The form called greet in in the current web page document. value shows that something will be put into the box.
Example - Text in a Box Here is the JavaScript code: <script language="JavaScript"> currentTime=new Date(); if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!" else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good afternoon!" else document.greet.greetingbox.value="Good evening!" </script>
Example - Text in a Box The SCRIPT tags begin and end the JavaScript: <script language="JavaScript"> currentTime=new Date(); if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!" else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good afternoon!" else document.greet.greetingbox.value="Good evening!" </script>
Example - Text in a Box new Date() puts the current time/date (from your computer) into the variable currentTime: <script language="JavaScript"> currentTime=new Date(); if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!" else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good afternoon!" else document.greet.greetingbox.value="Good evening!" </script>
Example - Text in a Box Look at the structure of the IF statements: if (currentTime.getHours() < 12) document.greet.greetingbox.value="Good morning!" else if (currentTime.getHours() < 17) document.greet.greetingbox.value="Good afternoon!" else document.greet.greetingbox.value="Good evening!” The computer must make a decision about the message, depending on the hour (12=noon, 17=5 pm). currentTime.getHours() contains the hour information (originally from new Date() )
Example - Text in a Box JavaScript IF statements look like this: IF (condition) instructions The condition usually contains == (is equal to) or < (less than) or > (greater than). If the condition is true, the instructions are carried out. If the condition is false, the program goes to the next line without performing the instructions.
Example - Text in a Box In this case there are three choices: The hour is < 12 (before noon) - Good morning! The hour is between 12 and 17 (noon and 5 pm) - Good afternoon! The hour is > 17 (after 5 pm) - Good evening! Using IF, ELSEIF and ELSE lets the computer make the choice among these three options.
Example - Text in a Box If you have looked at the HTML code for this example, you will see something very strange. The JavaScript is in the BODY section, not the HEAD.
Example - Text in a Box The reason for this difference is that computer must be instructed to start the JavaScript. In past examples, we have clicked buttons to start the JavaScript instructions. This time, the instructions start automatically when the browser reaches that part of the HTML.
Self Check – Example Questions True or false - all programming languages are object-oriented. True False
Self Check - Example Questions True or false - all programming langauges are object-oriented. True False {most current languages are object- oriented, but older languages like BASIC are not}
Self Check - Example Questions In order to address objects on the screen, object-oriented languages use: Pixel addresses (form top, from left) Dot addresses (e.g., window.status) They cannot address objects.
Self Check - Example Questions In order to address objects on the screen, object-oriented languages use: Pixel addresses (form top, from left) Dot addresses (e.g., window.status) They cannot address objects.
Self Check - Example Questions The dot address of the source of an “image place” called M1 would be: window.document.src. M1 window.document.M1.src document.M1.src
Self Check - Example Questions The dot address of the source of an “image place” called M1 would be: window.document.src. M1 window.document.M1.src document.M1.src window may be deleted when the address refers to the web page document.
Self Check - Example Questions The dot address of a text box called B in a form called MYFORM would be: window.document.B.MYFORM window.document.MYFORM.B
Self Check - Example Questions The dot address of a text box called B in a form called MYFORM would be: window.document.B.MYFORM window.document.MYFORM.B
Self Check - Example Questions The code to put “HI” into a box called B in a form called MYFORM would be: window.document.MYFORM.B=“HI” window.document.MYFORM.B.src=“HI” document.MYFORM.B.value=“HI”
Self Check - Example Questions The code to put “HI” into a box called B in a form called MYFORM would be: window.document.MYFORM.B=“HI” window.document.MYFORM.B.src=“HI” document.MYFORM.B.value=“HI”
End of Review Midterm Exam is multiple choice, short answer. Covers HTML and JavaScript No programming required but you will have HTML and JavaScript questions that will have you select correct source code to use. (similar to the self-check questions)