JavaScript Video Tutorial Pt 2

JavaScript EventsIn this video tutorial I cover numerous techniques that can be implemented by monitoring events. If you missed part 1 watch it first JavaScript Video Tutorial.

This video is both a review of what you were taught in part 1, but also you’ll learn:

  • Every Single Event in JavaScript
  • How to Create Inline JavaScript
  • How to Change CSS Styling on Anything Dynamically
  • Change Elements or Delete them Completely
  • Monitor Every Mouse Movement and Key Press Dynamically

And, numerous other things. All of the code follows the video. If you have any questions or comments, leave them below.

Code From the Video

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <title>JavaScript Tutorial</title>
    
    <style>
    	#h3style {
    		color: gray;
    	}
    </style>
    
     </head>
  
  	<body onResize="changeImage();" onLoad="alert('Website Loaded');">
  	
  	<script language="javascript" type="text/javascript">
  		<!-- Hide JavaScript
  			
  		function alertme()
  		{
  			alertmsg = document.littlebrain.src + "\nHeight: " + document.littlebrain.height + "\nWidth: " + document.littlebrain.width;
  			alert(alertmsg);
  			return true;
  		}
  		
  		function changeColor()
  		{
  			document.getElementById("h3style").style.color="red";
  			document.getElementById("h3style").firstChild.nodeValue="Excited";
  			return true;
  		}
  		
  		function changeAgain()
  		{
  			document.getElementById("h3style").style.color="gray";
  			document.getElementById("h3style").firstChild.nodeValue="Bored";
  			return true;
  		}
  		
  		function showPara()
  		{
  			document.getElementById("first").style.visibility=(document.formex.firstpara.checked) ? "visible" : "hidden";
  			document.getElementById("second").style.visibility=(document.formex.secondpara.checked) ? "visible" : "hidden";
  			document.getElementById("third").style.visibility=(document.formex.thirdpara.checked) ? "visible" : "hidden";
  			return true;
  		}
  		
  		function changeImage()
  		{
  			document.getElementById("littlebrain").style.height="35%";
  			document.getElementById("littlebrain").style.width="35%";
  			return true;
  		}
  			
  		-->
  	</script>
  	<noscript>
  		<h3>This site requires JavaScript</h3>
  	</noscript>
  	
  	<img src="LittleBrain.png" id="littlebrain" onClick="alertme();" onDblClick="alert('You Double Clicked');"/>
  	
  	<h3 id="h3style" onMouseOver="changeColor();" onMouseOut="changeAgain();">Rollover</h3>
  	
  	<p id="first">This is the first paragraph</p>
  	<p id="second">This is the second paragraph</p>
  	<p id="third">This is the third paragraph</p>
  	
  	<form name="formex">
  		<input type="checkbox" name="firstpara" onClick="showPara();" />First Paragraph<br />
  		<input type="checkbox" name="secondpara" onClick="showPara();" />Second Paragraph<br />
  		<input type="checkbox" name="thirdpara" onClick="showPara();" />Third Paragraph<br />
  		<p><b>Text Input</b><br />
		<input type="text" name="textinput" onBlur="alert('onBlur Triggered');" onChange="alert('onChange Triggered');" onFocus="alert('onFocus Triggered');"/></p><br />
  		<input type="text" name="mousex"/>Mouse X Position<br />
  		<input type="text" name="mousey"/>Mouse Y Position<br />
  		<input type="text" name="keypress"/>Key Pressed<br />
  		<input type="text" name="mousebutton"/>Mouse Button Pressed<br />
  		
  	</form>
  	
  	<script language="javascript" type="text/javascript">
  		<!-- Hide JavaScript
  		
  		var mie = (navigator.appName == "Microsoft Internet Explorer")?true:false;
  		
  		if (!mie)
  		{
  			document.captureEvents(Event.MOUSEMOVE); // Specifies that you want all mouse movement events passed to the document
  			document.captureEvents(Event.MOUSEDOWN);
  		}
  		
  		document.onkeypress = keyPressed;
  		document.onmousemove = mousePos;
  		document.onmousedown = mouseClicked;
  		var mouseClick = 0;
  		var keyClicked = 0;
  		var mouseX = 0;
  		var mouseY = 0;
  		
  		function mousePos(e)
  		{
  			if (!mie) 
  			{
  				mouseX = e.pageX;
  				mouseY = e.pageY;
  			} 
  			else
  			{
  				mouseX = event.clientX + document.body.scrollLeft;
  				mouseY = event.clientY + document.body.scrollTop;
  			}
  			
  			document.formex.mousex.value = mouseX;
  			document.formex.mousey.value = mouseY;
  			return true;
  		}
  		
  		function keyPressed(e)
  		{
  			if (mie)
  			{
  				e = window.event;
  				keyClicked = e.keyCode;
  			}
  			else
  			{
  				keyClicked = String.fromCharCode(e.charCode); // Converts char code to character
  			}
  			
  			if (!keyClicked)
  			{
  				return false;
  			}
  			document.formex.keypress.value = keyClicked;
  			return true;
  		}
  		
  		function mouseClicked(e)
  		{
  			if (mie)
  			{
  				switch(event.button)
  				{
  					case 0:
  					 document.formex.mousebutton.value = "Left";
  					 break;
  					 case 1:
  					 document.formex.mousebutton.value = "Middle";
  					 break;
  					 default:
  					  document.formex.mousebutton.value = "Right";
  					  break;
  				} 
  				return false;
  				
  			}
  			else
  			{
  				switch(e.which)
  				{
  					case 1:
  					 document.formex.mousebutton.value = "Left";
  					 break;
  					 case 2:
  					 document.formex.mousebutton.value = "Middle";
  					 break;
  					 default:
  					  document.formex.mousebutton.value = "Right";
  					  break;
  				} 
  				return true;
  			}
  		}
  		
  		/* The other JavaScript Events
  		OnAbort - Called when a page load is interrupted
  		OnError - Called when an error occurs during page load
  		OnKeyDown - When key is pressed but not released
  		OnKeyUp - When key is released
  		OnMouseUp - When mouse button is released
  		OnReset - When reset button is clicked
  		OnSelect - When text is selected
  		OnSubmit - When submit button is clicked
  		OnUnload - When user leaves a page
  		
  		
  		*/
  					 
  		
  		-->
  	</script>
  	
  	</body>
</html>

90 Responses to “JavaScript Video Tutorial Pt 2”

  1. Thanks for sharing the video tutorial and the script code from the video. It was very helpful to me.

  2. jaxon says:

    tremendous instruction. perfect paste with no waste. if something slips by, or my ADD imposes itself, i just back it up.

    perfect!

    thank you!!

  3. jaxon says:

    perfect pace with no waste. sorry ’bout that.

  4. nadeem says:

    you have provided very nice tutorials. thankssssss alot

  5. Needlemouth says:

    Is it me or does it sound like Seth Rogen is teaching you JavaScript?

    I’m just say’n…

  6. Moin Uddin says:

    Hi Derek,
    Hope you are fine.
    I’ve become a great fan of you. 😑
    I watched all of your javascript tutorial. All of those are awesome. Thank you very very much. These tutorials helped me to learn javascript. πŸ™‚

    **there’s a problem in this tutorial. My browser is IE9. I’m not sure, may be for IE9 or for all IE version Left click : 1; Right Click : 2 and Middle : 4

    • admin says:

      IE is different than all of the other browsers. Yes the mouse buttons among other things have different codes. As irritating as it is you’ll need to write code that works for both IE and every other browser.

      As you learn more you’ll get better at making code work on IE. It just requires some experimenting. I hope that helps?

  7. Shein says:

    Your tutoria are the best i have came across, well done!!!
    THE CODE about mousemouse position is not working, i code myself and also copy from you, just does not work,

    any idea and solution please?

    • admin says:

      Is there an error message, or have you tried checking the values for the mouse position. If so what values are you getting? It’s probably a typo. I just checked the code and it still works. Make sure if you copy my code that you replace all backquotes with regular quotes.

  8. Laura says:

    I am new to coding in general. I love your tutorials and their high compression of details. I can follow your logic so well in the videos. But I have a lot of trouble translating the logic so I can make up my own code. I would like to experiment with your code to understand it better. I replaced the back quotes and inserted my own illustration for the brain.

    http://medimagery.com/newThinkTankTutorial/JavascriptTutorial.html

    But my code isn’t working the way yours does in the tutorial, as you can see by clicking that link.

    Any insights?

    Thanks, Laura

    • admin says:

      I performed a view source on your page in a browser and I keep seeing this weird code ’Äú Replace that with ” and you should be fine. Tell me if that doesn’t work. Thank you for taking the time to say Hi πŸ™‚

      • Laura says:

        I certainly see what you are talking about, in the source on Chrome. But when I return to my original file, or even when I copy/paste this source into gEdit, those strange Äú characters do not appear. So, the first error which appears in Chrome as,

        appears in gEdit as,

        And that’s how it should appear, with single quotes, right?

        Originally, I had simply copy/pasted your code to gEdit.

        Well, thanks for your quick answer. I appreciate your assistance very much!

        Laura

        • admin says:

          Chrome doesn’t copy properly from the Element Inspector so watch out for that error. I think the problem lies with Facebooks in ability to translate character codes. I used to have a deep understanding of their system, but after the recent changes I need to take another look. I’ll tell you what I come up with

      • Laura says:

        Oh, I guess the code didn’t paste.

        Oh! My sample code didn’t paste. I guess I should have made it a comment?…

        appears in gEdit as,

        <!–

  9. Laura says:

    …..Still didn’t work…. All I was trying to show is that the Äô appears as a single quote in my code.

  10. Laura says:

    Thanks!

  11. sandya says:

    Hi

    i like yourο»Ώ teaching,i have one doudt in this

    what is the differnece between using

    document.getElementById(“littlΒ­ebrian).style.height and document.littlebrain.height

  12. tnagya says:

    Hi!

    On the video when you write these 2 lines of code:
    document.onmousemove = mousePos;
    document.onmousedown = mouseClicked;

    You put parentheses at the end of mousePos(); and mouseClicked();
    But a minute later the parentheses disappear.

    Anyways, Cool tutorials Just watch-em paying very close attention, and you will have a touch and feel what you learn next. Very good, many thanks.

    Cheers, Adam

    • admin says:

      Hi Adam, The reason why I don’t always do everything in the same way is because I write most of this code out of my head. I don’t often pre-plan everything in advance. I’m not sure how others do tutorials, but I think I probably have a tendency to improv much more than others. That’s why my code doesn’t always match my videos perfectly. Hopefully that isn’t too distracting.

      I’m glad you like the videos. Thanks for taking the time to say Hi πŸ™‚

  13. Chanpeer says:

    Hi,

    Many Thanks for your tutorials, they are really awesome πŸ™‚
    I tried your mouse position capture code, unfortunately it doesnot work with me.

    However, I found out:

    Unbenanntes Dokument

    no javascript supported

    Text input
    Mouse X Position
    Mouse Y Position

    //document.onclick = showMousePos;
    document.onmousemove = showMousePos
    //document.onmousedown = mouseClicked;

    function showMousePos(evt)
    {
    //alert(‘hello’)

    evt = evt || window.event;
    var x = 0; var y = 0;

    //alert(evt.pageX)
    //alert(evt.pageY)

    if (evt.pageX)
    {
    x = evt.pageX;
    y = evt.pageY;
    }
    else if (evt.clientX)
    {
    x = evt.clientX + document.documentElement.scrollLeft;
    y = evt.clientY + document.documentElement.scrollTop;
    }

    document.formex.mousex.value = x;
    document.formex.mousey.value = y;
    return true;
    }

    this works ….

  14. nathan says:

    Hi, really great videos! I picked it all up very quickly.
    I just have a question. I am finding JavaScript a bit hard to use on my page because all me HTML code in inside an echo. so when it come to a point when i want to write a JavaScript alert, for example, i have this problem:

    eheo(‘

    html code… onClick=”alert({can’t use ‘ or “} alert message {same problem});”

    ‘);

    is there a way I can get around this? (also the reason I have to echo it is because I have PHP variable in the same line and through out all my html code)

    • admin says:

      Hi, I’m not sure what you’re problem is. I’m guessing you typed echo wrong only in this comment and not in your code. If you need to use the same quotes you can always backslash them like this \” \’

      Another common problem I see is that people want to use JavaScript variables in JQuery for example. This is accomplished like this $(β€˜.ntt_thumb_box div:nth-child(β€˜+first_child_thumb+’)').animate({opacity: 0.4});

      You place the quotes and then the variable is surrounded with plus signs. I hope that helps. If not tell me and I’ll try to help

  15. adam says:

    Thank You Mr. Derek i really enjoy your tutorial
    Adam-Indonesia

  16. totto says:

    I cannot understand , what is event.button and e.which ?

    • admin says:

      The objects event and e contain information on the events that are triggered on the page. You can then use them to ask for example: Which button was pressed? Which mouse button was pressed, etc

  17. Ankit Taneja says:

    Hi Derek,

    I viewed your tutorials and may sound rhetoric but you are doing an amazing job !!!

    I am a C++ programmer and recently got a web development task to accomplish.

    Here is the Task:

    Web-based Annotation Tool

    The task is to implement a simple prototype of a web-based annotation tool. The tool must be implemented on the server side using Java and on the client side using HTML and JavaScript. The following requirements must be fulfilled:

    Compulsory:
    1) After starting the server, a user can access the tool by pointing the latest Firefox version to a certain URL
    2) The user is presented with a text of your choice (mind the Umlaut characters).
    3) The user can click-drag anywhere in the text to create an annotation. An annotation is a marker that remains visible after the user has ended the click-drag operation.
    4) Additional markers can be created by repeating the click-drag operation explained in 3).
    5) When the user has ended a click-drag operation, a JSON encoded AJAX message is sent to the server containing: the characters position in the text where the marker begins/ends and the marked text.
    6) When the messaged produced in 5) is received by the server, it prints out the information contained in the message to the console.

    Optional:
    7) Markers can be overlapping, e.g.

    =====
    =======
    ======

    This is a test.

    8) Make sure the tool works with longer texts (min. 2000 words). Long text should be word-wrapped by the browser to fit into the browser window, potentially forcing the browser to display a scroll bar. Markers remain properly positioned if the text is re-layouted due to a change of the browser window size or due to scrolling.

    First of all, I do not have any exp with Javascript or Ajax, but I don’t think it’s too difficult to grab. My question is, I can grab the click and drag events using the javascript mouse events, but how to I select the respective text. Also, how to display bars or something for the marked text ( as in example).

    I do not wish and expect you to code this for me, but I want to learn and any type of help or guidance would be highly appreciated.

    Best regards,
    ANkit

    • AT says:

      Also, I would like to know, should I use Java Server Pages for the server side?? And it would be a great help, if you can at least direct me towards which of your tutorials I should watch to accomplish the task.

      • admin says:

        I’d probably use PHP instead of Java. You could definitely use Java though. What you’re looking for is an advanced HTML5 JavaScript tutorial. I’ll see what I can do. I’ll also need some new JavaScript frameworks I haven’t used yet

    • admin says:

      Hi Ankit,

      That is a big job! I’ve often thought about making a design your own website WYSIWYG editor. Maybe something that pops out a WordPress theme, or something like that? What you want to do seems like a great exercise using HTML5. The only problem is that it won’t run on every browser.

      What browsers would you need this to work on? I plan on making a JSON and much more complicated HTML5 / JavaScript web application tutorials in the very near future. If you don’t care that this can be accomplished if it doesn’t work on browsers previous to IE 8 then I can cover much of what you are looking for in a future tutorial.

      Thanks
      Derek

  18. Anonymous says:

    These Tutorials are excellent!

  19. Anonymous says:

    Thanks for the helpful videos.
    ut I was wondering if you could direct me to any system requirements for the code to work properly as the only function that is being properly called is the ‘changeImage’ function in my program.

    I know its not a mistake of mine because I copied and pasted your code and that didn’t work either.

    I’m using notepad ++, and switching between google chrome and firefox. Thanks.

    • admin says:

      I’m sorry about this, but you have to replace all backquotes like ”, β€œ, ’, β€˜ and β€³ with ” and ‘

      It was an old security feature that I haven’t had time to fix.

  20. Anonymous says:

    Hello
    I have tried ur codes exactly as it is, But couldnt get success on mouse click or mouse move events. I am using Chrome. Please suggest me if i need anything extra code.

    Thanks in advance.

  21. Biswajit Dash says:

    Hello
    I have tried ur codes exactly as it is, But couldnt get success on mouse click or mouse move events. I am using Chrome. Please suggest me if i need anything extra code.

    Thanks in advance.

    • Don says:

      Hey Biswajit, the code should work fine in Chrome without any modifications. If you right-click in chrome, and then click “Inspect Element”, and then click “Console” for the window that pops-up, you will be able to see errors. Make sure you’re not missing any semi-colons or quotes!

  22. lucky says:

    This video was so cool….
    I would like to know why most of my java script doesn’t yield proper result on browsers like chrome and ie,but the same scripts runs good on firefox…………is the problem with the code or browser.

    thanks

  23. Steve says:

    Hey there, great video, thank you for posting.

    I have a naive question for you — which Java Script editor would you recommend I use to run and test code. Is there an editor that will go through line by line?

    • admin says:

      Thank you very much πŸ™‚ I just use TextWrangler (Mac) or NotePad++ (PCs). I am not a big fan of ides for JavaScript since the code is normally simple. I normally check for variable changes in the code for debugging if something goes wrong

  24. maha says:

    i love it .your tutorial is realy very helpfull.thanks a lot.

  25. maha says:

    i like your videos very much.its really very helpfull.i want onething in javascript that is mouse events.if you have any video on mouse event please send me .thanks a lot.

  26. Lisa says:

    I love your videos and learnt a lot from them. I also love how you can customize these comments with HTML tags πŸ™‚

    Can you please help me give a reason to this?
    This is strange. When I typed in the code…

    Rollover

    into my HTML, where “Rollover” would be changed to “excited” when the cursor touches it, but it didn’t work. The CSS was not applied either. I had checked everything more than twice, including spacing, but it still didn’t co-operate. When I had copied the one from the above codings, it magically worked. This is what i copied and pasted in:
    Rollover
    They seem exactly the same.

    • Lisa says:

      I’m not sure if you could see the codes I’ve put in the previous comment, but I can’t so i hope you can see them here.
      This is the one I typed in

      <h3 id=”h3style” onMouseOver=”changeColor();” onMouseOut=”changeAgain();”>Rollover</h3>

      and this is the one I copied and pasted

      <h3 id=”h3style” onMouseOver=”changeColor();” onMouseOut=”changeAgain();”>Rollover</h3>

      • admin says:

        I’ll look into this. I have a terrible cold right now, but I’ll solve this issue once and for all. What browsers have you had this problem on by the way?

  27. simon says:

    very nice tutorials, as an FYI these “fast” tutorials are great for people with coding backgrounds. for example any scripting tools where the viewer understands the terminology and concept.

    Very impressive …

  28. Emma says:

    Very very helpful videos! Thank you very much!

  29. CHEN S. says:

    hi!
    your tutorials are really great!
    good level good speed – thanks!!!
    I would like to ask if you could show how to start a project/site – that could be used to pack all the java script lessons?
    thanks again!

    • Derek Banas says:

      Thank you πŸ™‚ check out my tutorials on how to design a website and how to layout a website. I provide many examples on how I complete sites from start to finish. I hope they help

  30. Phae Deepsky says:

    Hey Derek!

    Good work on the tutorials. I’m a rookie Objective-C dev poking around in JS land for a little break. I was playing around tonight and ran across a problem in the alertme() function on line 28 of your source. Whenever I tried to use the notation alertmsg = document.littlebrain.src both Safari and Chrome threw exceptions. Safari said “TypeError: ‘undefined’ is not an object (evaluating ‘document.littlebrain.src’)” and Chrome said basically the same thing.

    I managed to get the function working again like this:

    var myImage=document.getElementById("myImage");
    alertmsg=myImage.src + "\nHeight:" + myImage.height + "\nWidth:" + myImage.width;
    alert(alertmsg);
    return true;

    Has there been a change in the language since the original publication, or is this just one of those things that went sideways?

    Thanks again!

    • Derek Banas says:

      That is strange because it still works on my end? I’ll have to investigate why that is happening. It is better to use getElementById like you did, but I was trying to show alternative ways to do things in JS. Thanks for pointing that out

      • Emad says:

        I had the same issue and the solution worked for me.

      • PeterUstinox says:

        Macs πŸ˜€
        having the same issue as comment-OP πŸ˜€
        played a bit with this dot-operator and the getElementById-Method.

        seems like the dot-operator works with the name-attribute of a html tag.
        getElementById of course the id. Returning the same afaik.

        am i right?

        great tutorial anyway, Derek Bananas!

  31. Hernand says:

    You haven’t been honest. I observed that you stopped and edited the video.
    Besides, that code isn’t 100%.

    Watch it!!!!!

  32. Anonymous says:

    Your tutorials are simply superb…just amazing thanks a million

  33. Dave says:

    For those of you who may have had issues with showing the mouse position, you need to change .captureEvents() with .addEventListener()

    • Wal says:

      Hi Dave,

      Many thanks for that update that addEventListener needs to be used instead of captureEvent.
      The code then suddenly works πŸ™‚

      Cheers,

      Wal

  34. Akinwale says:

    Hi, Derek i am working on Ajax, i have the knowledge of javascript but my problems in javascript remains the DOM. and event handlers, i don’t understand the keypress and event.button event

  35. Beck says:

    Hi Derek,

    Been working through your tutorials which are awesome! I am so glad I found you on the internets. I have been using a lot of different subscription sites like tuts+ and treehouse but I have found I definitely prefer your clear and condensed videos. I have just one request, I hope I’m no being picky but is there any way you could provide the starting html files that you use before you put in all the javascript? I like to follow along but sometimes with the code you post its difficult to know what you started with.

    Thank you so much for all your hard work and dedication and giving this gift of knowledge to everyone free.

    — Beck

    • Derek Banas says:

      Hi Beck,

      I’m very happy that you are enjoying my videos. They will always be free so you don’t need to worry about that.

      I will try to get you what you need, but I’m a bit confused by what you mean by my starting html files.

      Sorry it took so long to get to your message

      Derek

  36. Benjamin Pinaya Gutierrez says:

    These are really useful tutorials! Thank you!!!!
    Keep it up!

  37. Saimon says:

    Wow. These videos are perfect introductory tutorials for people with some programming knowledge. Just what I was looking for. Thanks a lot. I’ll recommend them to anyone who wants to learn javascript. I just bookmarked this webpage, and the thing about my bookmarks is that-THEY’RE THE BEST… Haha!! So keep up the good work man, I’m really glad that I stumbled across these videos.

  38. Madiraju Krishna Chaitanya says:

    Hi Derek,Nice Videos.Thanks a LOT for sharing these videos and Code content along with them.Please keep up the Good Work.ALL THE BEST…

  39. Jem says:

    Hello sir Derek,

    I’m having a problem on the alertMe(); function on line 26 of your code.
    I’ve enabled my console on chrome and everytime i click the image (single click) i always encounter the error:

    Uncaught TypeError: Cannot read property ‘src’ of undefined

    I’ve tried the exact code above, and the same error always pops up, other than that all functions are fine.

    Thanks for the tutorial BTW. ^_^

  40. Basit says:

    Thank you for the tutorial. This made JavaScript a lot easier for me.

  41. mourad says:

    there is a little mistake in the function alertMe it’s not working, i did some research i found that you have to write it like that document.images.littlebrain.src // .width // . height .. Thanks you for the helpfull tutoriel.. (y)

  42. Pratyush Barik says:

    Thanks a lot. Now I can see how I blindly used jQuery to get the work done and missed the real beauty of core JavaScript. I am learning exponentially. πŸ˜€

  43. Xel says:

    Hey wow! you’re awesome!! I know coding but I don’t know how to code in JavaScript. I love that it’s straight forward, quick but understandable. I supper need to high five you!!! *high five!*

Leave a Reply

Your email address will not be published.

Google+