Javascript part 8
This presentation is the property of its rightful owner.
Sponsored Links
1 / 19

JavaScript Part 8 PowerPoint PPT Presentation


  • 75 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

JavaScript Part 8

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


  • Login