JavaScript - staff.city.ac.uk

Syllabus Week 1  Understanding HTML  A simple Web page  Linking to other Web pages  Publishing your HTML pages Week 2  Text alignments, lists, and special characters  Advanced text formatting and links  Creating HTML forms  Creating your own web page graphics Week 2  Putting graphics on a Web page  Custom backgrounds and colours  Creating animated graphics  Page design and layout Week2 &3  Graphics links and imagemaps  Advanced layout with tables  Using style sheets  Embedding multimedia in Web pages Week 3      Multimedia in web pages Interactive pages with Applets and ActiveX Web page scripting for non-programmers Setting pages in motion with Dynamic HTML Multi page layout with frames Style Classes  A style class is a custom set of formatting specifications that can be applied to any passage of text in a Web page by first defining the tag  The syntax is the name of the tag followed by a set of rules enclosed in left and right curly brace delimiters  The first part of the tag name must be an HTML tag and the second optional part is up to the user e.g h2.headings {font:24pt times roman; Style Classes  To use the above class within the page you would use the following line of code <h2 class=“headings”>City College London. </h2> The word City College London will appear in 24-point Times Roman to people whose browsers support Times Roman  You can create a style class that could be applied to any text rather than specific headings. This can be done by associating the style class with the <div> tag  e.g div.footnote {font-size: 9pt; line-height:12pt; text-align: centre;} Specifying inline styles  In some cases specific styles will be used only in a particular web page.  This can be implemented by enclosing the style sheet between the <style> and </style> tags at the top of the HTML document between the </head> and <body> tags  To specify a style for only a small part put the style attribute within the <p>, <div> or <span> tag  <span> is a dummy tag that does nothing except to specify a range of text to apply to any style attributes you define Specifying inline styles  The only difference between the <div> and <span> is that <div> forces a line break whereas <span> doesn’t <p style=“color: green”> This text is green, but <span style=“color: red”> This text is red.</span> Back to green again, but … </p> <p> ..now the green is over, and we are back to the default colour for this page</P> Positioning and layers <body> <span style=“margin-left: 50px; margin-top: 40px”> <img src=“pretty.gif /> </span> <span style=“margin-left: 60px;”> This is a pretty picture </span>  The above code will position the first image on the page exactly 50 pixels to the left and 40 pixels down from the top-left corner of the browser window. Finally it will indent the text exactly 60 pixels from the left edge of the browser window Positioning and layers  The code below shows how to position an image exactly 50 pixels to the left and 40 pixels down from the top edge of the browser window <span style=“position:absolute; left: 50px;top:40px”> <img src=“pretty.gif” /> </span> If you leave the position: absolute measurements will be relative to wherever the text or image would normally appear on the page Multimedia in web pages  Multimedia is a popular buzzword for sound, motion video and interactive animation  The issues still to be resolved are: - There are many incompatible multimedia file formats from which to choose, and none has yet been standardized - Each new Web browser uses different HTML tags to include multimedia in Web pages Multimedia in web pages  The simplest way to put a multimedia on your web page is to use the <a href> tag e.g <a href=“titanic.avi> Play the Titanic video</a>  Depending on the plug-in in the user computer the application will open the titanic.avi video file  If no appropriate software is found to download the .avi file then the browser will offer the web link to the appropriate site from where the software can be downloaded Embedding sound in a web page  Using the <embed /> tag any file type can be placed directly on any Web page  For the media to appear on the web page the user should have the supporting plug-in or OLEcompatible helper application software  Media players come bundled with Netscape and IE can handle WAV, AU, MPEG, MID, EPS, VRML media types  The following line of code will include a media file named hello.wav and will display the playback controls at the current position of the page <embed src=“hello.wav “ /> Embedding sound in a web page  Within the <embed> tag you can also include the width, height and align attributes  The <embed /> tag also enables to set any number of optional parameters, which are specific to the plug-in or player program e.g <embed src=atune.mid” width=“1” height=“1” autostart=“true” loop=“true” hidden=“true” /> This causes the file atune.mid to play whenever the page is displayed Embedding sound in a web page  autostart, loop and hidden are not standard attributes of the <embed /> tag, so these will be passed on to the plug-in program to interpret  If a suitable plug-in can’t be found then the windows 98 or 2000 versions of Netscape and IE will embed an Object-linking and embedding (OLE)compliant application to play the media file  Therefore, the sound will play successfully in both NN and IE Understanding JavaScript (JS)    Web scripting languages, such as JavaScript, are one of the easiest ways to spice up a Web page and to interact with users in new ways Since HTML is a simple text mark-up language, it can’t respond to the user, make decisions, or automate repetitive tasks Interactive tasks like these require a more complex language: a programming language, or a scripting language Scripts and Programs      A movie or play follows a script- a list of actions (or lines) for the actors to perform A Web script provides the same type of instructions for the browser A script in JavaScript can range from a single line to a fullscale application Some programming languages must be compiled, or translated into machine code, before they can be executed JavaScript, on the other hand, is an interpreted language: The browser executes each line of script as it comes to it. JS   There is one main advantage to interpreted languages: Writing or changing a script is very simple Changing a JavaScript is as easy as changing a typical HTML document, and the change is enacted as soon as you reload the document in the browser Java Applet <html><head><title>Oh Happy Day</title></head> <body><div align="center"> <applet code="Bounce.class" width="500" height="300"> No Java? How sad. </applet> <applet code="RnbText.class" width="500" height="50"> <param name="text" value="B E H A P P Y , L IK E M E !!!" /> </applet> </div></body></html> Introducing JavaScript    JavaScript was developed by Netscape Communications Corporation, the makers of the popular Netscape Navigator Web browser JavaScript was the first Web scripting language to be introduced, and it is by far the most popular JavaScript was originally called LiveScript and was first introduced in Netscape Navigator 2.0 in 1995. It was later renamed JavaScript to indicate its relationship with Java Things you can do with JavaScript       Add scrolling or changing messages to the browser’s status line Validate the contents of a form and make calculations (e.g an order form can automatically display a running total as you enter item quantities) Display messages to the user, either as part of a Web page or in alert boxes Animate images or create images that change when you move the mouse over them Detect the browser in use and display different content for different browsers Detect installed plug-ins and notify the user if a plug-in is required JavaScript vs. Java      Java is a programming language developed by Sun Microsystems that can be used to create applets, or programs that execute within a Web page Java is a compiled language, but the compiler produces code for a virtual machine rather than a real computer The VM code is then interpreted by a Web browser. This portability of Java applets allows the same code to execute the same way on PCs, Macintoshes, and UNIX machines, and on different browsers- at least in theory!! JavaScript and Java are entirely different languages Java vs JavaScript    Java applets are compiled into class files to be used on a Web page; JavaScript uses simple text commands, which can be included in the HTML document itself Java applets are generally displayed in a box within a Web Document; JavaScript can affect any part of the Web document itself While JavaScript is best suited to simple applications and adding interactive features to Web pages, Java can be used for incredibly complex applications How JavaScript fits into a Web page    To add JavaScript to a page use the <SCRIPT> tag The <script> tag tells the browser to start treating the text as a script, and </script> tag returns to the regularly scheduled HTML In most cases, you can’t use JavaScript statements except within <script> tag. The exception is event handlers. <html> <head> <title>Our Home Page</title> </head> <body> <h1>The American Eggplant Society</h1> <p>Welcome to our Web page. Unfortunately, it's still under construction. We last worked on it on this date:</p> <script LANGUAGE="JavaScript" type="text/javascript"> document.write(document.lastModified); </script> </body> </html>   The document.write statement sends output as part of the Web document. In the above example it displays the modification date and time of the document Language=“JavaScript” specifies the scripting language to the browser Where to place the scripts ?     In the body of the page. In this case the output of the script is displayed as part of the HTML document when the browser loads the page In the header of the page, between the <head> tags. Scripts in the header aren’t executed immediately, they can be referred to by other scripts. Often used when defining functions Within an HTML tag. This is called an event handler and allows the script to work with HTML elements. (you don’t need to use the script tag) In an entirely separate file. JavaScript files can be saved with the .js extensions. These can be included by specifying the file within the <script> tag Browsers and JavaScript   Unlike HTML, the results of browser incompatibility with JavaScript are more drastic Rather than simply displaying your text incorrectly, the script may not execute at all, may display an error message, or may even crash the browser Versions of JavaScript     JavaScript 1.0, the original version, is supported by Netscape 2.0 and IE 3.0 JavaScript 1.1 is supported by Netscape 3.0 and mostly supported by IE 4.0 JavaScript 1.2 is supported by Netscape 4.0, and partially supported by IE 4.0 JavaScript 1.3 is supported by Netscape > 4.5      The <script> tag can specify a JavaScript version One of the feature is to prevent older browsers from accessing the script The JavaScript language has been submitted to the ECMA, a European standards committee This committee has finalized the ECMA-262 specification, a standard for the language JavaScript 1.3 follows the ECMA-262 standard Alternatives to JavaScript VBScript  VBScript is Microsoft’s answer to JavaScript  VBScript syntax is loosely based on Microsoft Visual Basic, a popular programming language for Windows machines  To begin a VBScript, use the <script language =“VBScript”> tag  Easier to learn than JavaScript  It is closely integrated with ActiveX, Microsoft’s standard for Web-embedded applications  Disadvantage: Only supported by IE. JS supported by IE and NN Common Gateway Interface (CGI)       CGI is not a language, but a specification that allows programs to run on Web servers CGI programs can be written in a number of languages, including Perl, C, and Visual Basic CGI programs are heavily used on the Web The main difference between CGI and JavaScript is that CGI executes on the server, while JavaScript applications execute on the client The main disadvantage of CGI is that, since the data must be sent to the Web server and back, response time may be slow!! It can read and write files on the server. While a client-side JavaScript program can read information from a form and ActiveX     ActiveX is a specification developed by Microsoft that allows ordinary Windows programs to run within a Web page ActiveX programs can be written in languages such as Visual C++ and Visual Basic, and they are compiled before they are placed on the Web server ActiveX applications, called controls are downloaded and executed by the Web browser, like Java applets. Unlike Java applets, controls can be installed permanently when they are downloaded, eliminating the need to download them again Fortunately, ActiveX includes a signature feature that identifies the source of the control and prevents controls from being modified. You can specify which sources of controls you trust ActiveX <html><head><title>Label Control</title></head> <body> <object id="labelA" classid="clsid:99B42120-6EC7-11CF-A6C7-00AA00A47DD2" type="application/x-oleobject" width="240" height="240" align="left"> <param name="Angle" value="30" /> <param name="Alignment" value="4" /> <param name="BackStyle" value="0" /> <param name="Caption" value="Wowza!" /> <param name="FontName" value="Arial" /> <param name="FontSize" value="36" /> <param name="ForeColor" value="#9900FF" /> </object> </body></html>  ActiveX has two main disadvantages: 1. It isn’t as easy to program as a scripting language to Java 2. ActiveX is proprietary: It works only in IE and only under Windows platform Questions ?? Can a Web page include more than one set of <script> tag ? Yes.  Can you make scripts that work on both NN and IE ? Yes. But not always easy. JavaScript can detect the browser and then run the code for the appropriate browser  What happens if a user’s browser doesn’t support JavaScript at all? You can use the HTML comments to prevent older browsers from displaying JavaScript code  Questions ??    Why do JavaScript and Java have similar names? Although they are different languages, JavaScript’s syntax is based on Java When a user views a page containing a JavaScript program, which machine actually executes the script ? JavaScript programs execute on the Web browser Which of the following languages is supported by both IE and NN? . VBScript . ActiveX . JavaScript Tools for Scripting  For Windows computers, few recommended editors are: - Homesite – An excellent HTML editor that includes JavaScript supports - Microsoft FrontPage 2000- Microsoft’s visual HTML editor. The script builder components allows you to easily create simple scripts - NetObjects ScriptBuilder – A script-oriented editor that simplifies the process of writing scripts A simple JavaScript 1: <script language=“JavaScript1.3”> 2: now = new Date(); 3: y2k = new Date(“Jan 01 2000 00:00:00”); 4: seconds = (now – y2k)/ 1000; 5: document.write(“Seconds after the year 2000: “ + seconds); 6: </script>     Lines 2 and 3 assigns a value ( a date) to a variable Line 2 creates a variable called now and stores the current date and time in it Line 3 creates a variable called y2k and stores the first moment of the year 2000 in it Notice the semicolon at the end of the above statements. These tell the browser that it has reached the end of  The Date is a built-in JavaScript object seconds = (now – y2k)/ 1000;    The above line will give the number of milliseconds after the year 2000 The script then converts the value to seconds and stores it inside the third variable seconds The parenthesis tells the computer the subtraction happens before the division Creating Output     JavaScript displays information using the document.write statement The document.write statement displays text, a number, or anything else you throw at it document.write(“Seconds after the year 2000: “ + seconds); The output will display some text followed by the contents of the seconds variable The ‘+’ sign tells the browser to combine the two values into one string of text <html> <head><title> The year 2004</title></head> <body> <hr /> <script language=“JavaScript1.3”> now = new Date(); yk = new Date(“Jan 01 2004 00:00:00”); seconds = (yk – now) / 1000; document.write(“seconds until the year 2004:”+ seconds); </script> </body> </html> Questions ?? 1. What software do you use to create and edit JavaScript programs? A. A browser B. A text editor C. A pencil and a piece of paper 2. What are variables used for in JavaScript programs? A. Storing numbers, dates, or other values B. Varying randomly C. Causing high school algebra flashbacks 3. What should appear at the end of your JavaScript? A. The <script language=“javascript”> tag B. The </script> tag C. The END statement Improving a Site’s User Interface  Using the Status Line The status line is the grey strip at the bottom of the browser window that is found in all of today’s fashionable browsers. It usually serves two purposes - Displaying descriptions of menu and toolbar items - Displaying the URL of links as the mouse pointer moves over them   Using JS you can take control of the status line yourself. Scrolling messages in the status line is one of the    One common example of JavaScript is to replace the URL display in the status line with a description of the link the mouse pointer is over JavaScript can be used to navigate Web sites The drop-down lists on Web pages where you can select a page’s title from the list to load a particular page is usually accomplished with JS Pop-up Windows and Other Features   You can create pop-up alert, confirmation, or prompt messages with JS A simple example of an alert message is shown below ! This is an alert OK  These can alert the user to an error, present a warning or disclaimer, or prompt for information Graphics and Animation    Using JS you can create dynamic images, which allows the designer to replace one image on a page with another image without reloading the page One of the most common uses of this JS feature is to create images that change when the mouse moves over them. This is usually used to highlight an image used as a link as the user moves the mouse pointer across it Graphics that change when the mouse pointer passes over them are variously known as rollovers or mouseovers    JS can also be used to replace images in a sequence, creating a full-scale animation JS can be used to detect the user’s browser type and version and either send him/her to the appropriate customized page or use JS to customize the output from a single page You can use JS script to detect whether the browser has a particular plug-in installed and modify the HTML page appropriately. If the plug-in is not available, your script can send the user to a different page, or even send him to the download page for the plug-in Complex Scripts <SCRIPT LANGUAGE="JavaScript"> var msg = "This is an example of a scrolling message. Isn't it exciting?"; var spacer = "... ..."; var pos = 0; function ScrollMessage() { window.status = msg.substring(pos, msg.length) + spacer + msg.substring(0, pos); pos++; if (pos > msg.length) pos = 0; window.setTimeout("ScrollMessage()",200); } ScrollMessage(); </SCRIPT>  What are rollovers? A. A trick performed by dogs B. Graphics that change when the mouse passes over them C. A type of cream-filled pastry  What is CGI ? A. A scripting language for Web servers B. A specification that lets programs run on Web servers C. A company that makes Web servers Using Functions   Functions are groups of JS statements that can be treated as a single unit In order to use a function, you must first define it e.g function Greet() { alert (“Greetings.”);    The above function will display an alert message to the user function is a keyword. The functions name is Greet. Notice the parentheses after the function’s name The first and the last line include braces ({ and }). These are used to include all the statements in the functions alert (“Greetings.”);     The Greet here uses the alert built in function This Greet function displays the same message. This avoids a bit of typing. But not very useful To make the function more flexible add parameters, also known as arguments These are variables that are received by the function each time it is called e.g add a parameter called who that tells the function the name of the person to greet Modified Function <HTML><HEAD> <TITLE> Functions</TITLE> <script language=“JavaScript”> function Greet (who) { alert (“greetings,” + who); } </script> </head> <body> This is the body of the page </body> </html> Calling the Function Making use of the function is referred to as calling the function  To call a function, use the function’s name as a statement in a script  You need to include the parentheses and the values for the function’s parameters e.g. Greet (“Fred”);  This tells the JS interpreter to transfer control to the first statement in the Greet function  It also passes the parameter “Fred” to the function. This value will be assigned to the who variable inside the function  Note: Functions can have more than one parameter To define a function with multiple parameters, list a variable name for each parameter, separated by commas To call the function, specify values for each parameter, separated by commas <html><head><title>Functions</title> <script LANGUAGE="JavaScript"> function Greet(who) { alert("Greetings," + who); } </script> </head> <body> <p>Prepare to be greeted twice.</p> <script LANGUAGE="JavaScript"> Greet("Fred"); Greet(“=David"); </script> </body> </html> The two function calls to the Greet function, each has a different name Greet (“Fred”); and Greet(“David”);   Functions can return a value to the script that called them. This can be used to calculate values E.g create a function that averages 4 numbers function Average (a,b,c,d) { result = (a+b+c+d) / 4; return result; } <SCRIPT LANGUAGE=“JavaScript”> Function Average(a,b,c,d) { result = (a + b + c + d) / 4; return result; } </SCRIPT>  To use the above function in a script, use a variable with a function call e.g score = Average(3,4,5,6); Understanding Objects      Like variables, objects can store data – but they can store two or more pieces of data at once The items of data stored in an object are called the properties of the objects E.g. You could use objects to store information about people, as in an address book. The properties of each person object might include a name, an address, and other information JS uses periods to separate object names and property names E.g for a person object called Bob, the properties might include Bob.address and Bob.phone Methods     Objects can also include methods Methods are functions that work with the object’s data E.g The person object for the address book might include a display () method to display the person’s information In Java terminology, the statement Bob.display() would display Bob’s details  JS supports three kinds of objects: - Built-in objects: These are objects built into the JS language e.g Date, Math - Browser objects: These are objects that represent various components of the browser and the current HTML document. E.g. alert() function is a method of the window object - Custom objects: These are objects that you create yourself Web Page Scripting    Scripting is another word for programming Java scripting can be used to create mouse over effects on web page images The first step in creating mouse over effects is to create dark and lit icons using any graphics packages Handling Events      In plain English event handlers are scripts that handle events In real life, an event is something that happens to you. E.g things you write on your calendar are events, Someone’s b’day, GP appointment etc. You also encounter unscheduled events such as traffic tickets, or an unexpected visit from relatives Whether events are scheduled or unscheduled, you probably have normal ways of handling them. When Fred’s b’day arrives send him present or when relatives visit unexpectedly, turn out the light Even handlers in JS are similar: they tell the browser what to do when a certain event occurs Event Handlers  E.g when the mouse button clicks and When this page is finished loading  Event handlers are associated with particular browser objects, and you specify the event handler in the tag that defines the object e.g <img src=“button.gif” onMouseOver=“highlight()”> Interactive highlighting HTML code for Mouse Over <a href=“erica.htm”><img src=“ercadark.jpg” width=98 height=214 border=0 alt=“erica” /> </a>  In order to refer to this specific image at any spot within the web page you need to give it a name <a href=“erica.htm”><img name=“erica” src=“ercadark.jpg<img src=“ercadark.jpg” width=98 height=214 border=0 alt=“erica” /> </a>  Now you can add the JavaScript <a href=“erica.htm” OnMouseOver=“erica.src=‘ercalite.jpg’ ” OnMouseOut=“erica.src=‘ercadark.jpg’ ”><img name=“erica” id=“erica” src=“ercadark.jpg” width=98 height=214 border=0 alt=“erica” /></a> Preloading images for speed   There is a small delay in downloading the lit images. These want be downloaded until someone moves the mouse over it. This can be avoided by using a small JavaScript <script language="JavaScript">  tags are the comment tags. These tags will hide the script from the older browsers. <html><head><title>Parts</title> <script language="JavaScript"> <!-function CalculateTotals(){ f=document.orderform; f.total1.value=parseInt(f.qty1.value)*50; f.total2.value=parseInt(f.qty2.value)*295; f.total3.value=parseInt(f.qty3.value)*395; f.total4.value=parseInt(f.qty4.value)*750; f.grandtotal.value=parseInt(f.total1.value) +parseInt(f.total2.value) +parseInt(f.total3.value) +parseInt(f.total4.value);} //--> </script> </body></html> </script></head> <body> <h1>Parts Order Form</h1> <p>Indicate how many of each part you wish to order in the "Qty" column. The total amount of your order will be calculated automatically. When you are ready to submit your order, click on the <b>Make Purchase</b> button.</p> <form name="orderform" method="post" action="/htbin/generic/order.pl"> <table border="3"><tr> <th>Qty</th><th>Part #</th><th>Description</th> <th>Price</th><th>Total</th></tr> <tr><td> <input name="qty1" size="3" OnBlur="CalculateTotals()" /></td> <td>25791</td><td>Chromated Flywheel Knob</td> <td align="right">$50</td> <td><input name="total1" size="7" OnFocus="document.orderform.qty2.select(); document.orderform.qty2.focus();" /></td></tr> <tr><td> <input name="qty2" size="3" OnBlur="CalculateTotals()" /></td> <td>17557</td><td>Perambulatory Dramograph</td> <td align="right">$295</td> <td><input name="total2" size="7" OnFocus="document.orderform.qty3.select(); document.orderform.qty3.focus();" /></td></tr> <tr><td> <input name="qty3" size="3" OnBlur="CalculateTotals()" /></td> <td>98754</td><td>Triple-Extruded Colorizer</td> <td align="right">$395</td> <td><input name="total3" size="7" OnFocus="document.orderform.qty4.select(); document.orderform.qty4.focus();" /></td></tr> <tr><td> <input name="qty4" size="3" OnBlur="CalculateTotals()" /></td> <td>47594</td><td>Rediculation Kit (Complete)</td> <td align="right">$750</td> <td><input name="total4" size="7" OnFocus="document.orderform.qty1.select(); document.orderform.qty1.focus();" /></td></tr> <tr><td></td><td></td><td></td> <td align="right"><b>GRAND TOTAL:</b></td> <td><input name="grandtotal" size="7" OnFocus="document.orderform.qty1.select(); document.orderform.qty1.focus();" /></td></tr> </table> <br /><input type="submit" value="Make Purchase" /> </form> <script language="JavaScript"> <!-f=document.orderform; f.qty1.value=0; f.qty2.value=0; f.qty3.value=0; f.qty4.value=0; f.total1.value=0; f.total2.value=0; f.total3.value=0; f.total4.value=0; f.grandtotal.value=0; // Steps in creating an order form       Use the name attribute to name all parts of the page JavaScript uses the names of the objects for reference The HTML page is always named as “document” Hence the form is referred as “document.orderform” The first input item is “document.orderform.qty1” The function named CalculateTotals() carried out the computations parseInt() is used to indicate that something is a number whenever you want to do some computations Scripting     The script at the bottom resets all the input elements to 0 when the page first appears The OnFocus happens when the user first clicks in an input box to enter data OnBlur commands are triggered when the user is done entering data in a box and moves on to the next one OnBlur=“Calculate Totals()”. When the user leaves any operation to leave these textboxes, this operation is performed to calculate the current values Learning how to fly Steps to create flying layers  Check to see if the browser can handle Dynamic HTML  Define and name the layer containing the text; hide it out of the sight beyond the edge of the page  Define and name the layers that contain the file tab images  Animate the text layer sliding onto the page Dividing a Web page into layers  <div id="intro" style="text-align: center; z-index: 0; position: absolute; left: -260px; top: 88px; width: 260px"> <h1>The XYZ Files</h1> <h2><i>The Truth Is<br />In There.</i></h2> If you click on the tabs,<br />you might find it.<br /> Then again, you might not.</div> - <div> - This tag is used to centre a bunch of text or - graphics. This can be used to define a region of the page (division or layer) so that something can be performed on the whole region Use the id attribute to give a name to each div section (XHTML standard)  <div id="layer1" style="position: absolute; left: -250px; top: 10px; width: 300; z-index: 1"> <img src="xfolder.gif" width="300" height="330" /></div> <div id="layer2" style="position: absolute; left: -250px; top: 10px; width: 300; z-index: 2"> <img src="yfolder.gif" width="300" height="330" /></div> <div id="layer3" style="position: absolute; left: -250px; top: 10px; width: 300; z-index: 3"> <img src="zfolder.gif" width="300" height="330" /></div> <div style="position: absolute; left: 10px; top: 65px; z-index: 4"> <a href="#" OnClick="layername=makeName('layer1'); yhop=0; ygoal=10; xhop=40; xgoal=70; slide()"> <img src="empty.gif" width= "35" height="85" border="0" /></a> </div> <div style="position: absolute; left: 330px; top: 65px; z-index: 5"> <a href="#" OnClick="layername=makeName('layer1'); yhop=0; ygoal=10; xhop=-40; xgoal=-250; slide()"> <img src= "empty.gif" width="35" height="85" border="0" /></a> </div> <div style="position: absolute; left: 10px; top: 155px; z-index: 6"> <a href="#" OnClick="layername=makeName('layer2'); yhop=0; ygoal=10; xhop=40; xgoal=70; slide()"> <img src="empty.gif" width="35" height="85" border="0" /></a> </div> <div style="position: absolute; left: 330px; top: 155px; z-index: 7"> <a href="#" OnClick="layername=makeName('layer2'); yhop=0; ygoal=10; xhop=-40; xgoal=-250; slide()"> <img src="empty.gif" width="35" height="85" border="0" /></a> </div> Dividing a Web page into layers       The style attribute positions this layer 88 pixels down from the top edge of the browser window A negative 260 pixels from the left means you want be able to see this layer Width is 260 pixels and the text should be centred in that 260 pixel wide region Each of the last three tags contains a single <img /> tag, placing a 300X330 image. But only the rightmost 50 pixels of the image are visible The z-index determines the layer appearance If you give the “intro” layer a z-index of 4 or higher then the text would appear in front of the file Moving a layer around with JavaScript <body OnLoad=“if (checkDHTML()){ Layername=makeName (‘intro’); Yhop=-2; ygoal=20; xhop=10; xgoal=80; slide() “}>  JavaScript commands after OnLoad= in the <body> tag    are carried out as soon as the Web page is displayed The JavaScript on the OnLoad attribute starts the checkDHTML function If it detects the DHTML browser then makeName function is given the layer ID “intro” so that it can create the appropriate IE or Netscape layer name. The results will be saved as layername The yhop, ygoal, xhop, and xgoal tells the slide function where to move the layer and how fast to move it Slide function Function slide() { If ((parseInt (layername.left) != xgoal) || (parsrInt (layername.top) != ygoal)) { layername.left = parseInt (layername.left) + xhop; Layername.top = parseInt(layername.top)+ yhop; Window.setTimeout(“slide()”, delay)} }  First the function determines whether the layer referred to by layername is already at the location specified by xgoal and ygoal, which is where it is to stop  If it is not there it slides the layer xhop pixels horizontally and yhop pixels vertically  If xhop is negative number, the layer will hop to the left instead of to the right Frames    A frame is a rectangular region within the browser window that displays a Web page, alongside other pages in other frames Frames are like tables. They allow to arrange text and graphics into rows and columns Frames can be used to display an unchanged index page whereas another frame could change based on which links the user click Frames Frames  The advantage of using frames is that when the user clicks a link on one of the frames the content on the other frame will change Creating a frameset document    First create the contents of each frame as an ordinary HTML page Use the frameset document to split the Web Page window into multiple frames and define the contents for each frame The tags <frameset> and </frameset> are used to define frames in HTML <html><head><title>The Entropy Almanac</title></head> <frameset rows="80,*"> <frame src="banner.htm" name="top" /> <frame src="greeting.htm" name="main" /> </frameset> <noframes> <body> <h1>The Entropy Almanac</h1> Your browser does not support frames. Please <a href="noframes.htm">click here</a> for the frameless version of this Web site. </body> </noframes> Frames    The row attribute within the frameset tag splits the window or frameset vertically into a number of rows specified by a number An asterisk (*) indicates that the frame should take up remaining space or divide it evenly between multiple frames <frameset rows=“80,*”> Meaning the top frame will be exactly 80 pixels tall, and the bottom frame will take up all the remaining space in the window The cols attribute works similar to rows, except that the window or frameset is split horizontally into columns It is hard to predict the size of all the windows and hence it is better to use the percentages rather than exact pixel values e.g: <frameset cols=“20%, 80%”> This will make the left frame 20% of the width of the browser window and the right frame will take up the remaining 80%  Within the frameset tag you should also have the frame tag which indicates the source HTML document to display in each frame e.g: <frame src=“banner.htm” name=top” id=“top” />  Linking between frames and windows Frames are normally identified by the id attribute e.g <frame src=“greeting.htm” id=“main”>  The above line will display greeting.htm page when the page loads and names the frame “main”  <a href=“facts.htm” target=“main”><img src=“facts.gif” border=0 /></a>  When the user clicks this facts.htm link it will be displayed in the frame named main  Without the target=“main” attribute the facts.htm page would have been displayed in the current frame instead Additional frame tags      marginwidth – Left and right margins of the frame (in pixels) marginheight – Top and bottom margins of the frame (in pixels) scrolling – Display scrollbar for the frame? (“yes” or “no”) frameborder – Display dividers between this frame and adjacent frames (1 means yes, 0 means no) noresize – don’t allow this frame to be resized by the user

JavaScript - staff.city.ac.uk

Products

Support

JavaScript - staff.city.ac.uk

Add this document to collection(s)

Add this document to saved

Suggest us how to improve StudyLib