JavaScript Video Tutorial Pt 2

[SirAndresJ]

This went little bit too fast for me, but great tutorials

[derekbanas]

@SirAndresJ Thank you. Yes, it's based off of speed reading. I just cram as much as possible into the smallest video possible :)

[RussianAmistad]

Your channel is amazing! thanks for sharing your immense knowledge!

[shep7484]

Hi,

Have you made a video on learning how to make video's like you and how to set up with utube to submit them? You really inspired me with your excellent set of videos to persue this and share some of my knowledge and experience with others and would appreciate any advice on the requirements and procedures involved. I have just purchased the Debut screen capture software. Also, I would like advice on whether there is a chance to make a modest profit on the efforts, to spport the costs. tnx

[shep7484]

You do a commendable job on your video presentiations. I am learning a lot from them.

I have a question about the settings of 35% for the image (brain). You set the width and height to 35% but from the video, it appears the image only occupies about 10% or so of the vertical display area. Just curious. Keep up the good work.

Jerry E Shepherd

[izaak791]

u save me time like crazy . ありがとう！

[izaak791]

すごい！awesome! i love it

[lebedev9114]

So I copied and pasted you script. Changed the comments, half of it worked half didnt :(

[lebedev9114]

The onClick="alertme();" works, but onDblClick,,, doesnt work . And vise versa, if one works the other one doesn't . Is it possible to fix this?

[derekbanas]

@lebedev9114 I'll look into it. What browser did you have this error on?

[lebedev9114]

@derekbanas Didn't expect you to answer so soon. I am using 3.6.25 version of firefox. And I spent about an hour looking at the code, and everything seems to be right, however if onClick works the Dblclick doesn't and vice versa.

[lebedev9114]

@derekbanas Just to add it didnt seem to work in the Opera latest version either!

[acbudget]

great vids! thnx for your efforts.

However, I took me a bit to figure out, that in HTML 5+Firefox 8.0.x I needed to use clientX, clientY to get mouse coords.

[derekbanas]

@acbudget We are in a strange period in which we all want to use html5, but have to deal with the fact that 15% of people still use the mess that is IE 6, 7, 8. For that reason we are being forced to create different css code for each browser. Sorry I didn't point out all of that craziness :)

[wakiani125]

@derekbanas what do you mean by creating different css code for each browser?you mean that we can make some css and javascript coding for different browsers?plz elaborate ?for the beginners like mine.thanks

[seaM064]

These "onresize" events and script tags aren't compatible with XHMTL 1.0 Strict. I know it's just an intro but most people want to learn the CURRENT way of doing anything. HTML 4 is going to die -- there is no reason to learn the HTML 4 way to do anything unless it's just curiosity or for porting stuff out. :)

[Medimagery]

What is the difference between a Javascript event and object?... and can they each be a node?

[derekbanas]

@Medimagery Continue with the tutorial and you'll understand. I cover object oriented javascript later on. You'll understand it then

[MrBoorla]

hey can u please tell me the software u used to make the video >. :please :)

[derekbanas]

@MrBoorla I capture screen casts with Quicktime player and edit the videos with iMovie. The Quicktime player used to be awesome, but they did away with the zoom feature. I'm probably going to get Screenflow for Mac. CamStudio is ok at making screencasts for pcs

[Gkid8]

document.captureEvents(Event.M­OUSEMOVE); is the correct code. If you notice, he has captureEvent(.... instead of captureEvents(.... It took me a while to figure out why I kept getting a no such function error.

[jackthe7th]

Im confused about one thing, document.captureEvents. Why is this necessary? I understand that you are passing all mouse movements events to the document, but it seems to do this automatically anyway? It does not break the code to ommit this line.

[arunkumarrs]

Hi, great vids and I'm learning a lot. Quick qn - when do I need to grab elements via getElementById as opposed to referencing them directly like "document.formex.textbox1"? Thanks a ton.

[derekbanas]

@arunkumarrs I cover all of that in this tutorial and the JQuery tutorial that follows it

[gkniffen]

6:39 Is #h3style really a class or just an ID? I thought a CSS class was designated with a period.

Example: .h3style

[derekbanas]

@gkniffen Yes # is used for ids and . is used for classes. Sorry if I slipped up on that

[derekbanas]

@Thecashflowman Sorry, but I'm not sure about that. I've never made a true multi-national website

[Bela0Shah]

Hi, I want to create a slideshow of images on a website. I have written some code in JS but does not seem to be working. Can you help me out here? Thanks.

[derekbanas]

@Bela0Shah I did that tutorial. Look for Make Featured Content Slider on my YouTube channel. All of the code is free to download

[autumnreign86]

12:31 "Wonder why I do this, It's cuz, it's what I do". lol.. Enough said..

[wayofki]

When I copy and paste the code from your page and then try to load the saved html file in a browser, the elements show up, but non of the JS seems to work. The brain image doesn't show up (I did save another image into the same folder and named it LittleBrain.png), and non of the events seem to function. What am I missing?

[derekbanas]

@wayofki Replace all of the single and double back quotes with regular quotes. It's a security thing on my website. You can also download all of the code in a zipped archive. Sorry about that

[wayofki]

@derekbanas lol, I finally figured that out, just before I read your comment! thanks though! :)

[bgardens3988]

I have to make a whack a mole game for my homework do you have any tutorials pertaining to moving circles, inserting images in those images, or keeping score by clicking on the pictures when they pop up?

[vishal6099]

function alertme()

{ alertmsg=document.littlebrain.­src+"\nHeight: "+document.littlebrain.height+­"\nwidth: "+document.littlebrain.width; alert(alertmsg); return true;

}

The above function doesnot seems to work even in your example you havent shoen it working

[wayofki]

@vishal6099 It didn't work for me either, but I got it working by changing that line to:

alertmsg = document.getElementById("littl­ebrain").src + "\nHeight: " + document.getElementById("littl­ebrain").height + "\nWidth: " + document.getElementById("littl­ebrain").width;

I'm not sure if that's the best way, but it worked for me :)

[ginost7]

Hi derek im trying to download this video because i dont have my own internet access. PLEASE LET THIS FACILITY HAPPEN. Some of us want to access your valuable knowledge at any time. I dont have internet access all the time.

[riseandrule]

at 17:57 you're talking about 'e' but can you explain it more thoroughly? Thanks

[derekbanas]

@riseandrule e is a reference to the event that occurs. Values in e constantly change as the event is triggered over and over again. e provides me with methods I can use to find out additional information on any event that occurs. Does that help?

[riseandrule]

@derekbanas Thanks for your very quick reply.

But does it mean then if you press a key you get another event with other properties or do you stick to the same event as before?

[derekbanas]

@riseandrule Its a new event so e and all it's values or variables are different.

[riseandrule]

@derekbanas

So basically you keep the same event properties but with other values depending on your event?

Btw, how are u able to use document.formex.keypress.value ? I'm trying the very same but i end up with an error like: document.formex.keypress.value undefined.

[riseandrule]

@derekbanas

If I give my inputbox an id and use getElementById it works fine.

[marwaha1234]

hi can you please advise me on the specific tutorial on how to calculate two fields and show the result in the third field without refresh



[derekbanas]

@marwaha1234 Check out pt 5 of this series and you'll understand how to dynamically work with information using Javascript

[QuatreiZer0]

Hi, thanks for the tutorial but... I've been having a problem lately...

document.GetelementID().Style.­___ doesn't seem to work for other browsers like chrome and firefox but works for IE... I noticed your using chrome. Thanks in advance

[bisonback]

excellent 

[derekbanas]

@bisonback Thanks :) Glad you liked it

[calctmnt]

nevermind i just hid them using css. Thanks again.

[derekbanas]

@calctmnt You're welcome. Thanks for watching :)

[calctmnt]

Hey Great tutorials. But why is it that when I load the showPara() function (the check box function) the paragraphs start as visible. In your tutorial they start hidden? Thanks.

[derekbanas]

I'll definitely watch it. Thanks for doing that :)

[sie85]

@derekbanas

I created a video for you to let you see what i try to achieve with my iframe and own socket server. please take a look at watch?v=L2AHZ9bR1SA in 720p fullscreen to get a look at a simple setup of this technique... u may use this for your own tutorial too.

[sie85]

Nice again! For the next js tut do regex. Have you already a date in mind for the uml tut? And the hidden iframe + php-socket tut? :-)

[derekbanas]

@sie85 I was thinking about briefly covering regex because I've done so many tutorials on it. Regex is the same for most every language. I'll cover it but you might like my web design and programming tutorial pt 24. It goes into grabbing complicated info with regex. I'm going to cover everything else you mentioned very soon. Thanks