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.

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.

-~-~~-~~~-~~-~-
Also watch: "Responsive Design Tutorial - Tips for making web sites look great on any device"
-~-~~-~~~-~~-~-

[swiftgoosy]

Man, after watching this video I decided to concatenate my js for a project by implementing the DRY methodology and I went from over 300 lines of code to about 47.

[avalance]

"I know that it sounds confusing, it's probably too much... but whatever" hahahh love it

[DivyanshBatham]

God Bless this Person :D
Seriously Man, the way to teach is splendid. Thankyou very much for creating these videos.

[mikelynch]

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

[voujum]

First watching and following steps: This just have blown my mind even though I remember less than half.

[alcegui]

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.

[PatrickKrawczykowskiDesigner]

One thing I noticed that might save you a couple cycles.

A function declaration will always be parsed first in its respective scope (in this case global) before ANY step by step threading is done to the rest of the stack. I've always found best practice to be just to put declarations at the top, because they'll be moved there anyway.

function foo() { };

If you're wanting to call anything into memory later you'll need to call an anonymous function expression.

var foo = function() { };

There is a third kind (or really a combo) that will let you stick a declaration anywhere and expression is valid

var foo = function bar() { };

[camronclendening]

I must say, you have some amazing, extremely helpful videos! I'm watching them over and over again and always adding another few each couple days and practicing the new knowledge. Thanks for the vids!

[kodieivie]

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

[alenaranjo]

Hey man, nice tutorials, very helpful. When will you continue? Keep doing the videos, we really appreciate this. Greetings from Costa Rica!

[ronarmengol]

amazing stuff ...still relevant and useful in 2021 love from Zambia

[sasopavlovic]

man you really do this all so easy, congrats your even better than bucky

[kwinini]

I am really impressed by the way you teach and been here for a while and your tutorial really helps me a lot. I would really look forward if you can also make a c# gave development tutorial or any c# related thanks and more tutorial to come!

[aminelagab]

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

[niklennart]

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

[kayele]

So that's how call() works!! awesome tut

[Runderwunderknopf]

Thanks dude, your tutorial is awesome. Greetings from germany!

[vzxxl]

Thanks for the video! At some point I stucked with a problem of 'null' return in the console. For anybody who has the same problem, take a look at the place you put your js refference in HTML. Mine was in the 'head' section and then I realized that since it says 'null' it doesnt see my html elements in the body section. (or didnt make a DOM before running the code). So I moved it to the place right before </body> and it worked. So if I concluded right when the js refference is in the 'head' it is being executed first not parallel as I thought. Oh that newbie problems, lol!

[sigmiami]

You should show the html with the JavaScript then the run, it’s hard to understand the logic when the html is missing

[NorthernStrider]

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!