Javascript Scripting Tutorial, Web Design

JavaScript Video Tutorial

86 Comments

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 🙂

[adsense]

Code From the Video

86 thoughts on “JavaScript Video Tutorial”

  1. Pingback: Tweets that mention JavaScript Video Tutorial | New Think Tank -- Topsy.com

  2. 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!

    Reply

      2. Very much liked and saved me a lot of time that I don’t have.This gave me all the basics that I need I now know what exists and know that it can be done, I will return here or when I need to be exact on the syntax.
        Thanks

        Reply

  3. 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.

    Reply

    1. 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

      Reply

      2. 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.

        Reply

        1. 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 🙂

          Reply

  4. 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 (lynda.com’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.

    Reply

    1. 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:)

      Reply

  5. 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.

    Reply

  6. hi,
    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.

    thanks
    ron.

    Reply

  7. 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.

    Reply

  9. 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.

    Reply

    1. 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

      Reply

  11. This was great! I’m more accustomed to simple HTML, and just started working with java, and the vids really helped me understand quickly! 🙂

    Reply

  13. 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.. 🙂

    Reply

    1. 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

      Reply

      1. 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 + “ ”);

        Reply

  15. 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?

    Reply

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

    Reply

  17. 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.

    Reply

  19. Hi,
    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,

    Reply

    1. 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

      Reply

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

    Reply

    1. 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

      Reply

  24. Derek,
    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 – http://TENonline.org/art/bsr.html . 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

    Reply

    1. 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

      Reply

    1. 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

      Reply

      1. 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..

        Reply

  29. 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…

    Thanks!

    Reply

    1. 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

      Reply

  30. 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.

    Reply

  32. 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.

    Reply

  33. 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;
    this.init();
    }

    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’});

    firstdiv.css(‘height’,firstdivheight+’px’);

    firstchild.addClass(‘tabulous_active’);

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

    var $options = e.data.myOptions;
    var effect = $options.effect;

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

    firstdiv.addClass(‘transition’);
    links.removeClass(‘tabulous_active’);
    mythis.addClass(‘tabulous_active’);
    thisdivwidth = thisform.find(‘div’+thislink).height();

    if (effect == ‘scale’) {
    alldivs.removeClass(‘showscale’).addClass(‘make_transist’).addClass(‘hidescale’);
    thisform.find(‘div’+thislink).addClass(‘make_transist’).addClass(‘showscale’);
    }
    firstdiv.css(‘height’,thisdivwidth+’px’);
    });
    },

    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 );

    Reply

  34. 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.

    Reply

    1. 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.

      Derek

      Reply

  35. 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!

    Reply

  36. Mr Banas,

    For completeness you have forgotten the code of the function.

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

    Reply

  38. 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:

    and

    charset=ISO-8859-1

    Thanks again

    Reply

    1. 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

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *