JavaScript Video Tutorial

Learn JavaScriptIn this JavaScript Video Tutorial I’ll teach you all of the core knowledge needed to write JavaScript code in 30 minutes. I’ve never seen a tutorial like this and was interested in whether you all would like to see more tutorials like this?

I specifically cover the following topics:

  • JavaScript Datatypes
  • Embedding JavaScript
  • Linking to JavaScript
  • Conditional Statements
  • Looping
  • Arrays
  • Strings
  • Functions

And, a great deal more along the way. If you’d like to read this information in a slower for see JavaScript Scripting. I also created another JavaScript tutorial that also proceeds at a slower pace if you’d like to check that out Learn JavaScript.

All of the code used follows the video. Leave any questions or comments below πŸ™‚


Code From the Video

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


<html xmlns="" lang="en" xml:lang="en">


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

    <title>JavaScript Tutorial</title>
    <!-- Link to External JavaScript -->
    <script language="javascript" src="addfunction.js"></script>

  	<script language="javascript" type="text/javascript">
  		<!-- Hide JavaScript Code
  		// JavaScript is case sensitive - Variables & Functions must use the same capitalization
  		// Variables must start with a Letter, _, or $ then numbers
  		// 4 Datatypes- Numbers, Strings, Booleans, Objects
  		// Maximum and Minimum Numbers (Precision is not guaranteed past 16 digits)
  		document.write(Number.MAX_VALUE+"<br />");
  		document.write(Number.MIN_VALUE+"<br />");

		// Strings - Series of characters surrounded by quotes
		var samp_str = "Here are escaped characters \' \" \\ \t \n";
		document.write(samp_str+"<br />"); // Newlines have no control in html
		// String Functions
		var first_str = "First String ";
		var second_str = "and Second String";
		var combined = first_str + second_str;
		document.write(combined+"<br />");
		document.write("Length of string: " + combined.length+"<br />");
		document.write("Substring " + combined.substring(6,12) +"<br />"); // Go 1 more than needed
		document.write("Last character " + combined.charAt(combined.length-1)+"<br />");
		document.write("Index of T " + combined.indexOf('t') +"<br />");
		// Variable Conversion is Automatic
		var str_var = "5";
		var num_var = 10;
		var total = num_var + str_var; // Converts a number into a string
		var mult_total = num_var * str_var; // Converts a number into a string
		document.write("5 + 10 = " + total +"<br />");
		document.write("5 * 10 = " + mult_total +"<br />");
		// Force Datatype Conversion
		total = num_var + Number(str_var);
		document.write("5 + 10 = " + total +"<br />");
		var num_var2 = String(num_var);
		document.write(num_var + num_var +"<br />");
		document.write(num_var + num_var2 +"<br />");
		// Convert Float to Fixed Length String
		var float_var = 3.141592653589793238;
		var float_str = float_var.toFixed(5);
		document.write("Shortened PI " + float_str +"<br />");
		document.write("Integer PI " + parseInt(float_var) +"<br />");
		// Find Datatype of Variable
		document.write("Datatype of float_var " + typeof(float_var) +"<br />");
		document.write("Datatype of float_str " + typeof(float_str) +"<br />");
		// Boolean Variables are false (0 or NaN) or true (Every Other Value)
		bool_var = Boolean(23);
		document.write("Boolean of 23 " + bool_var +"<br />");
		// Comparison Operators
		var rand_num1 = 5;
		var rand_num2 = 10;
		document.write("Is 5 > 10: " + (rand_num1 > rand_num2) +"<br />");
		document.write("Is 5 >= 10: " + (rand_num1 >= rand_num2) +"<br />");
		document.write("Is 5 < 10: " + (rand_num1 < rand_num2) +"<br />");
		document.write("Is 5 <= 10: " + (rand_num1 <= rand_num2) +"<br />");
		document.write("Is 5 == 10: " + (rand_num1 == rand_num2) +"<br />");
		document.write("Is 5 != 10: " + (rand_num1 != rand_num2) +"<br />");
		// Logical Operators
		document.write("Is 5 > 10 and 5 != 10: " + ((rand_num1 > rand_num2) && (rand_num1 != rand_num2))+"<br />");
		document.write("Is 5 > 10 or 5 != 10: " + ((rand_num1 > rand_num2) || (rand_num1 != rand_num2))+"<br />");
		document.write("Opposite of 5 != 10: " + !(rand_num1 != rand_num2) +"<br />");
		// Array Basics
		var vehicles = new Array("car", "truck", "van");
		document.write("The second item in the array is: " + vehicles[1] +"<br />");
		// For In Looping for Arrays
		for(i in vehicles)
			document.write("Values in the array: " + vehicles[i] +"<br />");
		// Conditional Statements
		// Conditional Operator
		var rand_var = (5 < 10) ? "5 is less than 10" : "5 is greater than 10";
		document.write("Research has found that " + rand_var +"<br />");
		// The if Statement
		if (5 > 10) 
			document.write("5 is greater than 10" +"<br />");
		else if (5 < 10)
			document.write("5 is less than 10" +"<br />");
			document.write("5 is equal to 10" +"<br />");
		// The Switch Statement
		var state = "Pennsylvania";
		switch(state) {
			case "California":
				document.write("Better weather than PA" +"<br />");
			case "Alaska":
				document.write("Worse weather than PA" +"<br />");
			case "Pennsylvania":
				document.write("Same as me" +"<br />");
				document.write("I don't know where you live" +"<br />");
		// Looping Tools
		// While Loop
		var count = 1;
		while( count <= 10 ) 
			/*if(count == 5) 
			} */
			/* if(count % 2)
			} */
			document.write(count +"<br />");
		// Do While Loop
		var count = 10;
		do {
			document.write(count +"<br />");
		} while (count > 10);
		// The For Loop
		for(var count = 0; count <=10; count++)
			document.write(count +"<br />");
		// Function Example

function addThese(a,b)
return a+b;
		document.write("5 + 25 = " + addThese(5,25) + "<br />");
  		<h3>JavaScript is Required</h3>

85 Responses to “JavaScript Video Tutorial”

  1. jaxon says:

    i liked this tutorial very much. the pace is fine. no waste. if i needed to retrace no problem. just back up the truck.

    thank you!

  2. Don says:

    Great stuff. I’ve learned more from your site and another than in several books.

    One question: I’m viewing both the fast-paced and slower paced versions to really absorb this. On the “Learn JavaScript” link above, it starts with “Part 1” then goes into “OOP w/JS” and then into “Part 2.”

    Is this the correct order, or should it proceed numerically (Part 1, Part 2, etc.)?

    Thanks, again. I’m in a Digital Media Masters program and this is helping me immensely.

    • admin says:

      Yes I intended people to watch them in that order. You can do which ever feels best to you. The first tutorial was based off of how I thought I should teach. The second is based off of what users told me they wanted.

      In the end I think the users were right and the second version is much better. I’m very glad these are helping you. I hear professors are actually telling their students to watch them. I find that extremely funny since I’m self taught.

      If you need any help feel free to send me an email. Thanks

      • Mycorvtte says:

        hey i am having trouble w the var can u please email me
        PS your videos are very helpful, thankyou

      • Anonymous says:

        I dont agree the first tutorial was brilliant because its all there you dont have to look at 59 different tutorials to learn the basics of Javascript. I wrote all the code down on paper and paused the video when i needed to understand what you where doing.

        Before I saw your video I had seen 60 different videos and could not make sence of what was important or not. I was more confussed then when I startet.

        Can I propose a new video all you need to know about closures. And all you need to know about function.

        Thank for very good turtorials. Best regard Rookie.

        • Derek Banas says:

          I’m glad you found it useful. I’m basically making videos like that right now on each individual topic required to program with Java, or most any OOP language. Some times topics are just to complicated to mash into one video though. I constantly change my teaching style video to video. I have big plans for making the tutorials even better over the next year πŸ™‚

  3. Don says:

    Thanks. Yes, you’d be surprised how little they teach regarding languages. The goal, it seems, is to start doing something with them, which is putting the proverbial cart before the horse.

    I’ve been trying every tutorial I can find (’s JavaScript tutorial isn’t that impressive).

    Personally, learning from these videos works far better than books as I can see the cause and effect on screen and listen to someone describe what’s happening.

    You’re doing a valuable and altruistic service. Please let me know if there’s a PayPal donation area for you.

    • admin says:

      Hi Don

      I’m glad you like the site. Don’t feel the need to donate. Everything is meant to be free and without subscriptions or anything. I want to eventually be a free university, but that will take some time.

      If you like my site just tell others about it. While I never took any computer programming classes I did experience a little college and can remember the situation. Where I went the class sizes were in the hundreds and there was little one on one time provided.

      I’ll keep making tutorials until I’m satisfied that I have covered everything in programming and then on to math. Thanks:)

  4. Don says:

    Sorry to be a bother, Derek. But is there an actual difference in the inf in the two different sets of JS tutorials? I like the fast ones but I still need a little slower pace. Just wanted to make sure I’m getting the same info. Thanks.

  5. ron says:

    great tutorials,
    Any chance you could do a tutorial on Javascript getSelection method and ranges. Can’t really find any good ones on the entire internet.


  6. Jacqueline says:

    Love the fast pace tutorial. I’m doing an Advanced Diploma in Web Design, which basically takes me through Javascript, JQuery, etc. and I find your fast pace video is a great way to revisit and revise stuff already learned.

  7. Very Good Work. Appreciate your effort

  8. Billy Chow says:

    I’m learning JavaScript by watching this video and typing out the examples as I go.. Wow what an awesome jam packed tutorial. Thanks for making this video. You’re an awesome teacher and keep up with the good work.

    • admin says:

      Thank you πŸ™‚ It’s funny everyone told me not to make tutorials that go so fast. This is the fastest tutorial I’ve ever made and it’s a big hit

  9. xinho says:

    could you maybe make a tutorial on how to make a simple javascript quiz please?

  10. NewKid says:

    This was great! I’m more accustomed to simple HTML, and just started working with java, and the vids really helped me understand quickly! πŸ™‚

  11. Ravian says:

    wow really very helpful and nice tutorial… thanks a lot… πŸ™‚

  12. Gaurav Arya says:

    Hi Derek,
    thank you for educating us through these nicely taught javascript tutorials ..It immensely enhanced my javascript knowledge..will continue to look forward to any new releases..kindly keep making them crisp, to the point,informative and last but not the least fast.. πŸ™‚

  13. PaweΕ‚ says:

    document.write(“Is 5 > 10 ” + (rand_num1 > rand_num2) + “”);

    The statement with comparison is surrounded with parentheses

    • admin says:

      It isn’t surrounded with parentheses. Those are the words I want to print to screen. I had to do all kinds of crazy stuff to cover everything in just 1 video. Sorry if it was confusing

      • PaweΕ‚ says:

        I understand almost all!

        But indeed I wanted to ask why have to be

        document.write(β€œIs 5 > 10 ” + (rand_num1 > rand_num2) + β€œ ”);

        And don’t work without parentheses:

        document.write(β€œIs 5 > 10 ” + rand_num1 > rand_num2 + β€œ ”);

  14. Rob says:

    Hello, I have worked through many of your python videos and now I am trying to take a stab at learning JavaScript! I am stuck though, because when I try to open up the html file, I do not get anything to come up when I open the html file. I tried copying from your HTML tutorial codes and that worked fine. So I am trying to print to screen by opening my file and having it pop up in chrome (I tried other browsers too). Any suggestion on what I am doing wrong?

  15. Rob says:

    DUH, I was just getting intimidated. I was missing end parentheses, so nevermind the question. Thanks for the tutorials!

  16. Kelly Henagin says:

    Thanks for all these great tutorials, very helpful!

    Do you know of a good way to obfuscate e-mail that’s clickable?

    Just incase the client wants the phone and e-mail visible to humans.

  17. Ahmed says:

    Started following your videos recently.
    I like the speed at which you deliver these sessions which makes your videos stand out from others.
    Admirable job.
    Hoping to read through them all, lets see:)

    Best Regards,

    • admin says:

      Thank you πŸ™‚ I figured that if I was going to make tutorials I might as well do something different. Thanks for taking the time to say you like them

  18. Kamran Ahmed says:

    First of all thank for these Excellent Tutorials!
    I have to ask, Are these tutorials the same as that on your youtube channel?

    • admin says:

      Thank you very much πŸ™‚ All of the videos on my site re on my YouTube channel. I however have a few hundred articles here that I never made videos for. You can see everything on my 404 page. I’m glad you are enjoying them

  19. Thanks allot for the tutorials, your explanation is very good.

    Srinivas Padma

  20. lVoZrA2S4W6 says:

    350357 679593Hey there. I want to to inquire something

  21. Johannes says:

    THX so much! You helped me to save a huge amount of time!

  22. Ed Zimmer says:

    I very much admire the “New Think Tank” work you’re doing – that takes a great
    deal more time & energy than many of your viewers realize.

    I connected with your Javascript series. When I first put my manufacturing
    business on computer some 35 years ago, scripting with the bourne shell was
    the obvious way to move my paper business systems to it – & the principles &
    process have held up thru these years thru diverse businesses. I wrote them
    up back in ’97 – . Being a tad nervous about
    Apple continuing their Terminal app, javascript is the obvious backup. I was
    getting very frustrated with all the OOP & CompSci noise until I found you.
    Thank you.
    Ed Zimmer

    • admin says:

      You are very very welcome πŸ™‚ Thank you for the kind words. After making a few hundred videos it gets pretty easy. I’d say the hardest part is figuring out the best way to teach things.

      I’m determined to approach other topics that people seem to struggle with like Chemistry, Physics and Calculus. It brings me great joy to make a video that I think will help people. The comments sent in that tell me the videos work help more than you can imagine.

      Thanks for taking the time to tell me you enjoy them – Derek

  23. Pri says:

    Superb work! Thanks a lot. Do you have any other videos like this?

    • Derek Banas says:

      Thank you πŸ™‚ I have a ton of javascript tutorials. In some I cover the language specifically and in others I make a ton of tools using the language. I hope you like them as well

  24. Alan says:

    I have problem understanding boolean in javascript, what should i do.. 😐

    • Derek Banas says:

      Boolean is a data type that can either have the value of true or false. That is pretty much it

      • Maggi says:

        Hi Derek,
        I request to you to make a video series on JSPs..
        I learnt many things from you but not JSPs.

        I very well can handle this JSP but, i guess the only way i can master it is by seeing your tutorials..
        Hope you consider my request..

  25. Anonymous says:

    Really great site! Thank you.

    Small error in the Do While Loop: should be while (count > 0);

  26. Kevin says:

    Really great site! Thank you.

    Small error in the Do While Loop: should be while (count > 0);

  27. Sandi says:

    Priceless. Thanks!

    Hey, wondering if you can advise me as to whether JavaScript is the best way to build a simulation I’m working on. It’s part of an eLearning course to train folks to do a job similar to census-taking. For this part, I just need to simulate on-screen the paper form they have to fill out (scan-tron style, with lots of little bubbles, etc), so they can click to fill in bubbles, then have their answers checked against correct answer. I’ve successfully developed a prototype using variables in Lectora (the eLearning auth/pub software), but it’s incredibly inefficient since it won’t let me actually write code (and therefore can’t copy/paste). Thinking I might be able to do it with JavaScript…


    • Derek Banas says:

      Yes it would be very easy to do that with JavaScript. You could then easily store the information on a server any place you’d like using some JQuery Ajax techniques and a little PHP. That is what I’d do

  28. mike says:

    Where is this slower one? I really want to learn javascript but I am starting from square one. This video to me sounds like a different language.

  29. Anonymous says:

    Why is all the code he is writing commented out with, ?

  30. Fred says:

    This worked well for me because having programmed in another language (Matlab/Octave), I just needed to learn the basics of javascript syntax not relearn the abstract concepts of variables, strings comparative operators, if/then statements and loops.

  31. hemant says:

    how can i add more childs..?? as first child contains effect only… if i wrote a text in any other div under the first child div it get disapeared…:(

    ;(function ( $, window, document, undefined ) {

    var pluginName = “tabulous”,
    defaults = {
    effect: ‘scale’

    // $(‘body { background-color: red; color: white; }’).appendTo(‘head’);

    function Plugin( element, options ) {
    this.element = element;
    this.$elem = $(this.element);
    this.options = $.extend( {}, defaults, options );
    this._defaults = defaults;
    this._name = pluginName;

    Plugin.prototype = {

    init: function() {

    var links = this.$elem.find(‘a’);
    var firstchild = this.$elem.find(‘li:first-child’).find(‘a’);
    var lastchild = this.$elem.find(‘li:last-child’).after(”);

    if (this.options.effect == ‘scale’) {
    tab_content = this.$elem.find(‘div’).not(‘:first’).not(‘:nth-child(1)’).addClass(‘hidescale’);
    } else if (this.options.effect == ‘slideLeft’) {
    tab_content = this.$elem.find(‘div’).not(‘:first’).not(‘:nth-child(1)’).addClass(‘hideleft’);
    var firstdiv = this.$elem.find(‘#tabs_container’);
    var firstdivheight = firstdiv.find(‘div:first’).height();

    var alldivs = this.$elem.find(‘div:first’).find(‘div’);

    alldivs.css({‘position’: ‘absolute’,’top’:’0px’});



    links.bind(‘click’, {myOptions: this.options}, function(e) {

    var $options =;
    var effect = $options.effect;

    var mythis = $(this);
    var thisform = mythis.parent().parent().parent();
    var thislink = mythis.attr(‘href’);

    thisdivwidth = thisform.find(‘div’+thislink).height();

    if (effect == ‘scale’) {

    yourOtherFunction: function(el, options) {
    // some logic

    // A really lightweight plugin wrapper around the constructor,
    // preventing against multiple instantiations
    $.fn[pluginName] = function ( options ) {
    return this.each(function () {
    new Plugin( this, options );

    })( jQuery, window, document );

  32. Andy says:

    Hi Derek

    I’m finding difficulty understanding this javascript I already know html and css and some php but this javascript becoming a nightmare for me. Please help me and tell me where to start from?? How many hours I need to do everyday? I’ve been straggling for about a year. Please help me with good advice please.

    • Derek Banas says:

      Hi Andy,

      I have 2 JavaScript tutorials. 1 is fast and the other is slower. Here they are on one page with links to the code JavaScript Video Tutorial.

      What seems to work best is to print out the code and take notes as you watch in your own words. If something doesn’t make sense, write down the question and I’ll try to help. Experiment as much as possible and try to have fun. Eventually it will start to make sense.


  33. Chris C says:

    Hey there. Thanks a lot for the tutorial. I had done the javascript track at codecademy but I hadn’t coded in over a year. Just needed a refresher and pretty much got everything back in the 30 minutes, no need to pause. Crazy how the brain works. So the pace was excellent! I cannot thank you enough, you saved me a bunch of time! I’m subscribing and keep up the good work!

  34. Rudy Vissers says:

    Mr Banas,

    For completeness you have forgotten the code of the function.

    function addThese(a,b)
    return a+b;

  35. Bharat says:

    Waiting for AngularJS video tutorial

  36. New guy says:

    Hey Derek, very fast…very good, for new guy like me it will take a bit longer to get it all, but you have zip-ed JavaScript very nicely. Some times you get tired of wathcing slow 2600 tutorials on one topic.

    As I follow the say: There is no stupid questions, only stupid answers…

    My question is what this means(represents), what do you get with it:



    Thanks again

    • Derek Banas says:

      Thank you πŸ™‚ Sorry, but I couldn’t see what you typed in code wise. Maybe if you put it between code blocks I can see it. Sorry about that it is a security thing


  1. Tweets that mention JavaScript Video Tutorial | New Think Tank -- - [...] This post was mentioned on Twitter by elearningstarr and Daniel Taylor, Web Design Magazine. Web Design Magazine said: JavaScript…

Leave a Reply

Your email address will not be published.