A Guide to Javascript and jQuery

Select elements, attributes, or text from an HTML page. For example:

1. Select the text inside all of the "h1" elements on a page
2. Select any elements that have a class attribute with a value of note
3. Find out what was entered into a text input whose id attribute has a value of email

JavaScript allows you to add elements, attributes, and text to the page, or remove them. For example:

1. Add a paragraph of text after the "h1" element
2. Change the value of class attributes to trigger new CSS rules for those elements
3. Change the size or position of an "img" element

JavaScript allows you to specify a set of steps for the browser to follw (like a recipe), which allows it to access or change the content of a page. For example:

1. A gallery script could check which image a user clicked on an ddisplay a larger version of that image.
2. A mortgage calculator could collect values from a form, perform a calculation, and display repayments.
3. An animation could check the dimensions of the browser window and move an image to the bottom of the viewable area (also known as the viewport).

JavaScript allows you to specify a script should run when a spefici event has occurred. For example:

1. A button is pressed
2. A link is clicked or tapped on
3. A cursor hovers over an element
4. Information is added to a form
5. An interval of time has passed
6. A web page has finished loading

A slider positions a series of items next to each other, but only shows one at a time. The image then slide from one to the next.

SLIDER SPECIFICS

This slider:

• Loads several panels, but only sows one at a time.
• Provides buttons that allow users to navigate between each of the slides
• A timer to move them automatically after a set of interval.

MECHANICS

This slider is programmed with the following CSS steps:

1. When the page first loads, CSS hides all of the slides.
2. CSS then sets the display property of the first slide block to make it visible.

The script then goes through each slide and:

1. Assigns an index number to that slide
2. Adds a button for it under the slide group. To keep track of which slide is currently being shown, the script uses a vaiable called "currentIndex" (holding the index number of the current slide). When the page loads, this is 0, so it shows the first slide. It also needs to know which slide it is moving to, which is stored in a variable called "newSlide":
   • If the index number of the new slide is higher than the index number of the current slide, then the new slide is placed to the right of the group. As the visible slide is animated to the left, the new slide automatically starts to come into view, taking its place.
   • If the index number of the new slide is lower than the current index, then the new slide is placed to the left of the group.
3. After the animation, the hidden slides are placed behind the one that is currently active.

SCRIPT OVERVIEW

A jQuery selector finds the sliders within the HTML markup. An anonymous function then runs for each one to create the slide. There are four key parts to the function:

Setup

Each slider needs some variables, they are in function-level scope so they:

• Can have different values for each slider
• Do not conflict with variables outside the script

Changing Slide: move()

move() is used to move from one slide to another, and to update the buttons that indicate which slide is currently being shown. It is called when the user clicks on a button, and by the advance() function.

A timer to show the next slide after 4 seconds: advance()

A time will call move() after 4 seconds. To create a timer, JavScript's window object has a setTimeout() method. It executes a function after a number of milliseconds. The timer is often assigned to a variable, and it uses the following syntax: var timeout = setTimeout(function, delay);

• timeout is a variable name that will be used to identify the timer.
• function can be a named function or an anynymous function.
• delay is the number of milliseconds before the function should run

To stop the timer, call "clearTimeout()". It takes one parameter: the variable used to identify the timer: "clearTimeout(timeout);"

Processing each of the slides that appear within a slider

The code loops through each of the slides to:

• Create the slider
• Add a button for each slide with an event handler that calls the move() function when users click it

SLIDER SCRIPT

STEPS

1. There may be several sliders on a page, So the script starts by looking for every element whose class attribute has a value of s1ider. For each one, an anonymous function is run to process that slider.
2. Variables are created to hold:
   1. $this: The current slider
   2. $group: The element that wraps around the slides
   3. $slides: AIl of the slides in this slider
   4. $button: An array of buttons (one for each slide)
   5. currentIndex: The current slide
   6. timeout: The timer
3. The move() function appears next.
4. The advance () function creates the timer.
5. It starts by clearing the current timer. A new timer is set and when the time has elapsed it will run an anonymous function.
6. An if statement checks whether or not the current slide is the last one:
   1. If it is not the last slide then it calls move() with parameter that tells it to go to the next slide.
   2. Otherwise it tells move() to go to the first slide.
7. Each slide is processed by an anonymous function.
8. A <button> element is created for each slide.
9. If the index number of that slide is the same as the number held in the currentIndex variable, then a class of active is added to that button.
10. An event handler is added to each button. When clicked it calls the move () function. The slide's index number indicates which slide to move to.
11. The buttons are then added to the button container, and to the array of buttons: This array is used by the move () function to indicate which slide is currently being shown:
12. advance () is called to start the timer.

An anynymous function creates the button for each slide.

Logic:

• Creates the button
• Asks if the button represents the current slide:
  • If yes, the button is classified as ".active"
  • If no, a "click" event on a radio element:
    • adds button to container & array
    • calls move()

An advance() function to clear and reset the timer.

Logic:

• Calls clearTimeout() & setTimeout().
• Asks if the button represents the last slide:
  • If yes, the function calls move() to first slide
  • If no, the function calls move() to next slide