• Wednesday , 18 October 2017

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

Code Canyon



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

3d Ocean

Related Posts

23 Comments

  1. Kyle Bilton
    October 3, 2017 at 10:51

    Im assuming JS has changed quite  a bit since this video, as I struggled to get any of this code working through safari.

  2. MegaMan/ TheProsChannel
    October 3, 2017 at 10:51

    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. Ibrahim W
    October 3, 2017 at 10:51

    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!

  4. Charlie Ennis
    October 3, 2017 at 10:51

    Sweet! Just learned a new Javascript skill I can use. Thanks for the share!

  5. teemoIRL
    October 3, 2017 at 10:51

    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

  6. Chhayvoin Vy
    October 3, 2017 at 10:51

    Wow your explain is really great. Thank you so much!

  7. Elizabeth A.
    October 3, 2017 at 10:51

    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.

  8. suparnaVocal
    October 3, 2017 at 10:51

    awsome

  9. Lennart Hartrumpf
    October 3, 2017 at 10:51

    The gentle hint at a meme in the end "understandable have a great day"

  10. youssef mhamed
    October 3, 2017 at 10:51

    the last 2 vidieos are just hard my brain cant handle them

  11. mike lynch
    October 3, 2017 at 10:51

    @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!

  12. Sham Shahar
    October 3, 2017 at 10:51

    i understands all the the lecture except for "this". i'm so confused what is the this context is.

  13. Ann Arianrhod
    October 3, 2017 at 10:51

    you are a great teacher ..a little bit too fast.. but i love you

  14. Davis Nongthombam
    October 3, 2017 at 10:51

    i need some help in making a website for my resturant plz do help

  15. Muhammad Athar
    October 3, 2017 at 10:51

    I have a question. Can we actually pass functions themselves as parameters or do we need to assign anonymous functions to variables first?

  16. dark wolf
    October 3, 2017 at 10:51

    nice tricks out there !! , specially the last one"changing the context " thnx for that !

  17. Ivan Petrović-Poljak
    October 3, 2017 at 10:51

    What color scheme are you using? Thanks for the tutorial!

  18. Cristiano Peralta
    October 3, 2017 at 10:51

    Thank you for this mini-course. You should do another(but more complex and complete) javascript course. You're a great teacher, keep the good work!

  19. kodie ivie
    October 3, 2017 at 10:51

    This is simply AWESOME! I love the enthusiasm.. Thanks for everything!

  20. WenXuan Liu
    October 3, 2017 at 10:51

    Excellent and Helpful Video!!!!
    but wix.com is so annoying!!!!!!!!!!!!!

  21. Anusha Madala
    October 3, 2017 at 10:51

    hi I'm a newbie to Java script.. When I tried the above code I'm getting reference error: document is not defined. Anyone please help me out

  22. Mohamed haihi
    October 3, 2017 at 10:51

    Wix is trying to stop me from learning web-development!
    IM NEVER GIVING IT UP WIX!

  23. Issac Wiggins
    October 3, 2017 at 10:51

    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 Comment

You must be logged in to post a comment.