JavaScript from Null: Chapter 4
basixvideos

JavaScript from Null: Chapter 4

on Dec 30th 2009 with 68 comments
This entry is part 4 of 7 in the series javascript-from-null

The Full Series


javascript-from-null

JavaScript University continues today as we learn about methods of the Array object, how to return values from functions, scope, and even your first animation.

Remember – though each new chapter builds upon the previous ones, you can still follow along perfectly well if you haven’t watched the other entries in the series!

In this Screencast, you’ll Learn:

  • Methods of the Array object: push, pop, unshift, shift
  • Pull values outside of functions
  • Reducing your “global footprint” by creating an object
  • SetInterval
  • Create your first animation
  • Methods of the String object.

Chapter 4: Arrays, Functions, and your First Animation

Other Viewing Options

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

CodeCanyon


Series Navigation«JavaScript from Null: Chapter 3JavaScript from Null: Chapter 5 – Events»

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
← Older Comments
  • Oscar

    Great tutorial!

    I have some problem when im trying to implement this into a eventListener. Im already spawning the element on a eventListener. But I wanna add another function where I can fade the element in.

    var hiddenElement = document.getElementById(‘hiddenElement’);

    hiddenElement.addEventListener(‘click’, fadeIn, false);

    function fadeIn() {
    setInterval(function() {
    hiddenElement.style.opacity += .08;
    }, 1000 );
    }

    Any help would be appreciated :)

    • Oscar

      Forgot to say that only want it to run ones on the ‘click’.

    • Michael M

      Hi

      Javascript is trying to do string concatenation.

      The following code should work as a basic example:

      YOUR CODE
      var box = document.getElementById(‘box’);

      var currentOpacity = parseFloat(box.style.opacity);

      setInterval(function(){
      currentOpacity += 0.02;
      box.style.opacity = currentOpacity;
      console.log(currentOpacity)
      },100)

      Make sure the opacity is set to 0 to begin with.

  • taylor

    wut if i wanted to pass in multiple variables to one parameter of the fadeOut function? like using an array?
    so i dont have to declare the same function twice.

    i.e.

    function fadeOut( elem, speed ) {

    …

    }

    fadeOut( [box, anotherbox], 1000 );

  • http://moonufoi.heliohost.org/ salaam

    Here is something I created…

    //fade out function
    function fadeOut(elem,speed){
    elem = document.getElementById(elem.substr(1));
    if(typeof speed === ‘undefined’){
    speed = 500;
    }

    if(elem.style.display != ‘none’){
    var current_opacity = 1;
    var intervalhand;
    intervalhand = setInterval(function(){

    current_opacity -= 0.05;
    elem.style.opacity = current_opacity;

    if(current_opacity fadeOut(‘#box’, 1000);

← Older Comments