Javascript part 8
Download
1 / 19

JavaScript Part 8 - PowerPoint PPT Presentation


  • 94 Views
  • Uploaded on

JavaScript Part 8. George Mason University June 21, 2010. Topics. Popup Windows Jump Menu Dynamically Changing Menus Image Rotation Moving Object on Screen Date Object. Popup Windows.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' JavaScript Part 8 ' - odele


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Javascript part 8

JavaScriptPart 8

George Mason University

June 21, 2010


Topics
Topics

Popup Windows

Jump Menu

Dynamically Changing Menus

Image Rotation

Moving Object on Screen

Date Object


Popup windows
Popup Windows

win=window.open("content.html","newWin", "toolbar=yes,location=yes,scrollbars=yes, resizable=yes,width=300,height=300");

-the first argument specified the content to be displayed in the window

-the second argument gives the window a name, so it can be referred to through the target attribute in HTML)


Popup windows1
Popup Windows

The third argument specifies the attributes of the window; if you don't specify anything, all things are included by default, but if you specify some things, the default for the things not mentioned will be no

Don't put spaces in the third argument

Browsers often block popup windows

Assigning the window.open to a variable, in this case win, allows you to refer to this window later in code


Select and go navigation
Select-and-Go Navigation

  • <body onload='document.getElementById("newlocation").selectedIndex=0;'> <!– to reset the page when you come back to it -->

  • <form><select id="newlocation" onchange="jumpPage();"><option value="currentpage.html">Select a topic</option><option value="html.html">HTML</option<option value="css.html">CSS</option><option value="javascript.html">JavaScript</option>

  • </select></form>

    The value attribute of the options is set equal to the page you want to jump to


Select and go javascript
Select-and-Go JavaScript

<script>

function jumpPage() {

newPage = document.getElementById("newLocation").options[document.getElementById("newLocation").selectedIndex].value;

window.location = newPage; }

</script>


Dynamically changing menus
Dynamically Changing Menus

<body onload="reset();"

<form>

<select id="first" onchange="changesecond();">

<option>Choose sport</option>

<option>Basketball</option>

<option>Soccer</option>

</select>

<select id="second">

<option>Select Team</option>

</select>

</form>


Dynamically changing menus1
Dynamically Changing Menus

  • <script>

    function reset() {

    document.getElementById("first").selectedIndex = 0;

    document.getElementById("second").selectedIndex = 0;

    }


Dynamically changing menus2
Dynamically Changing Menus

function changesecond() {

b=document.getElementById("second");

b.selectedIndex = 0;

switch(document.getElementById("first").selectedIndex) {

case 1: b.options.length = 3;

b.options[1].text = "Lakers";

b.options[2].text = "Celtics";

break;

case 2:

b.options.length = 4;

b.options[1].text = "US";

b.options[2].text = "England";

b.options[3].text = "Slovenia"; break;

} // end switch

} // end function

</script>


Dynamically changing jump menus
Dynamically Changing Jump Menus

  • The dynamically changing second menu can also function as a jump menu (e.g. at billpegram.com)

  • To each option, add a value that specifies the URL where one is supposed to go, e.g. b.options[1].value = "http://www.lakers.com";

  • Add an onchange event handler to the second <select> tag using

    window.location=document.getElementById("second").options[selectedIndex].value;


Executing javascript after specified delay
Executing JavaScript after Specified Delay

  • setTimeout("JS", milliseconddelay);

  • setInterval("JS", milliseconddelay);

    Difference is that setTimeOut executes once, whereas setInterval executes repeatedly

    Earlier JS versions didn't have setInterval so one could emulate that through recursive design (function calling itself)


Animation examples of use of js delay
Animation Examples of Use of JS Delay

Image Rotation

Moving Object on Screen

Scrolling status line – I don't like these so you'll have to do the code yourself!


Image rotation
Image Rotation

<script>

i = 1; // initialize i, you start at the second picture since the first one is already displaying to avoid additional lag

NUM_IMAGES = 2; // this and following statement are moved out of the function

pics = new Array("aol.gif","microsoft.gif"); // no need for them to execute each time

function rotate() {

if (i>=NUM_IMAGES) i=0; // JavaScipt arrays start at 0

document.getElementById("pic").src = pics[i];

i++;}

</script>

</head>

<body onload="setInterval('rotate()',2000);">

<img src="aol.gif" width="249" height="43" id="pic" />


Image rotation cont
Image Rotation (cont.)

Preceding code works fine in IE8 and Opera, but in Firefox 3 the image change doesn't occur till after the time lag or one moves the cursor, whichever happen later


Moving object on screen
Moving Object on Screen

<script>

x = 0;

function move() {

document.getElementById("pic").style.left = x;

x +=1; }

</script>

<style>

#pic {position:relative}

</style>

</head>

<body onload="setInterval('move()',50);">This is some text

<img src="aol.gif" width="249" height="43" id="pic" />This is some more text


Moving object in screen
Moving Object in Screen

The preceding code works in IE8 and Opera, but not in Firefox; perhaps the caching behavior of Firefox is the culprit


Date object
Date Object

  • d = new Date(); creates a Date object with the current day and time – i.e. when the code is executed.

  • One can pass in values to set the Date, e.g.

    d = new Date("12/25/2010" );

    Alternatively, one can create the date with the current date and then change it to the desired date using set methods of the Date object


Date object1
Date Object

setYear(year)

setMonth(month) (month is 0-11)

setDate(dayofmonth)

getYear()

getDate()

getDay() (0-Sunday, 6-Saturday)

getMonth() (month is 0-11)


Date object2
Date Object

These and other methods of the Date object can be used in conjunction with conditional statements (switch, if, if else if) to output dates in standard format


ad