D4mations.com

Javascript Events Tutorial Part 2 – Javascript Tutorials for Beginning Web Development



In the last video, I covered Javascript Events for new Javascript Web Developers. Let’s get a little more complex with those events by adding a loop and some different types of event listeners.

Here’s the source code: http://codepen.io/anon/pen/doZbPQ?editors=101

And here’s all the key codes: https://css-tricks.com/snippets/javascript/javascript-keycodes/

A web developer often needs to add an event to multiple elements, but you don’t want to repeat your code all over the place, so the best way to do it is to make a loop.

The good news is, since this loop just goes from i=0, i=1, i=2, etc, we can use one loop and add events to all 3 li’s & inputs with it.

Original source

d4mer

, , , , , , , , , ,

23 responses to “Javascript Events Tutorial Part 2 – Javascript Tutorials for Beginning Web Development”

  2. Sorry if I am a bit stupid, but I am a little bit new to JS so… What's wrong with this? It says "Uncaught SyntaxError: missing ) after argument list"

    for (var a=0; a < listamia.length; a++) {
    if (a == 0 ) {
    alert("hai delle "listamia[a]+" nel tuo cestino");
    } else if (a == 1; a == 3) {
    alert("hai una "listamia[a]+" nel tuo cestino");
    } else if (a == 2) {
    alert("hai della "listamia[a]+" nel tuo cestino");
    }

  3. I studied Web Development client side and server side at the university, I can remember the instructor copy-pasting the code then running it, shows us that it works and then leaves(what a scumbag).
    Thanks for the step by step explanation, however I can understand all of this cause I finished Computer Science BA as I see many struggle through understanding this!

  5. man, this jquery wasnt properly covered and now im trying to get it all to work, so far what ive tryed is ive added the jquery3 js file to my scripts folder and linked it with <script src=…
    but the querySelectorAll isnt working. dont know what to do, unable to progress

  7. Thank you for theses videos so much. I finished this tutorials and I learned a lot! More than any other tutorial here, even when I'm not a native english speaker, I understand you completely. The way you teach is amazing, thank you again.

  11. @12:05 you talk about the which. I think they added something new since your recording, and it's just called key. So you can do console.log(event.key);. so you can replace 13 with Enter.

    function itemKeypress(){
    //console.log(event.key);
    if ( event.key === "Enter"){
    updateItem.call(this);
    }
    }

    I only test in chrome
    Thank you so much for your tutorials!

  23. LearnCode you are by far the best person to teach code. I like your pace and like the fact that you explain what each thing does. I have truly learned more in the past 2 hours watching your videos then i have in the last 3 weeks. Thank you for taking the time to make these tutorials.

    Best regards,

Leave a Reply