JavaScript Video Tutorial
In 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
<!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>
<!-- Link to External JavaScript -->
<script language="javascript" src="addfunction.js"></script>
</head>
<body>
<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 />");
}
else
{
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 />");
break;
case "Alaska":
document.write("Worse weather than PA" +"<br />");
break;
case "Pennsylvania":
document.write("Same as me" +"<br />");
break;
default:
document.write("I don't know where you live" +"<br />");
break;
}
// Looping Tools
// While Loop
var count = 1;
while( count <= 10 )
{
/*if(count == 5)
{
break;
} */
/* if(count % 2)
{
count++;
continue;
} */
document.write(count +"<br />");
count++;
}
// Do While Loop
var count = 10;
do {
document.write(count +"<br />");
count--;
} 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 />");
-->
</script>
<noscript>
<h3>JavaScript is Required</h3>
</noscript>
</body>
</html>
85 Responses to “JavaScript Video Tutorial”
Trackbacks/Pingbacks
- Tweets that mention JavaScript Video Tutorial | New Think Tank -- Topsy.com - [...] This post was mentioned on Twitter by elearningstarr and Daniel Taylor, Web Design Magazine. Web Design Magazine said: JavaScript…
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!
Glas you liked it. Many more are available
it is really great saved lots of my time! thanks
Wait… is your name Jared?
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
Thank you 🙂 I’m very happy to have been able to help
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.
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
hey i am having trouble w the var can u please email me alonsoegarcia@yahoo.com
-Mycorvette
PS your videos are very helpful, thankyou
Hi, Thank you 🙂 What problem are you having? I’m not sure what you mean with var. Here is my email derekbanas@verizon.net
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.
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 🙂
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.
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:)
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.
No problem. The newest JavaScript tutorial has a lot more information in it. The other one is slower, but not as detailed
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.
I’ll see what I can do. I’m glad you like the tutorials
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.
Thanks I’m glad you enjoy the videos
Very Good Work. Appreciate your effort
Thank you 🙂 I’m glad you liked it
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.
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
could you maybe make a tutorial on how to make a simple javascript quiz please?
I’m going to do just that in Java. I’ll see if I can do the same in JavaScript
thanks a lot…its fine if you can’t, ill just check out the java one.
I’ll see what I can do. It’s pretty easy to make a JavaScript quiz
This was great! I’m more accustomed to simple HTML, and just started working with java, and the vids really helped me understand quickly! 🙂
I’m glad you liked it.
wow really very helpful and nice tutorial… thanks a lot… 🙂
You’re very welcome. I’m glad you liked it
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.. 🙂
You’re very welcome. I have many more tutorials, on a wide array of topics planned.
yeah! going over to your jquery tutorials real quick.
I’m glad you like them. JQuery is pretty amazing
Why
document.write(“Is 5 > 10 ” + (rand_num1 > rand_num2) + “”);
The statement with comparison is surrounded with parentheses
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
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 + “ ”);
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?
DUH, I was just getting intimidated. I was missing end parentheses, so nevermind the question. Thanks for the tutorials!
That’s OK. Believe me, I have made more mistakes than you can count. If you find that you are struggling with the tutorial check out JavaScript Video Tutorials.
I have a slower version of this fast JavaScript tutorial there. I hope that helps
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.
This looks like it works fingerlakesbmw.org/main/flobfuscate.php
great job brother ….
Thank you 🙂 I’m glad you liked it!
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,
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
First of all thank for these Excellent Tutorials!
I have to ask, Are these tutorials the same as that on your youtube channel?
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
Thanks allot for the tutorials, your explanation is very good.
—
Srinivas Padma
Thank you 🙂 I’m glad you enjoyed it
350357 679593Hey there. I want to to inquire something
Feel free to ask any questions
THX so much! You helped me to save a huge amount of time!
You’re very welcome 🙂
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
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
Superb work! Thanks a lot. Do you have any other videos like this?
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
I have problem understanding boolean in javascript, what should i do.. 😐
Boolean is a data type that can either have the value of true or false. That is pretty much it
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..
I most definitely will cover JSP. I just need to cover Android first because it won my big vote. I’ll cover everything about Java before I quit
Really great site! Thank you.
P.S:
Small error in the Do While Loop: should be while (count > 0);
Really great site! Thank you.
P.S:
Small error in the Do While Loop: should be while (count > 0);
Thank you 🙂
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!
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
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.
I have the faster and slower JavaScript tutorial on this page JavaScript Video Tutorial
Why is all the code he is writing commented out with, ?
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.
I’m very happy that I could help 🙂
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 );
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.
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
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!
I’m very happy I could help. That is exactly what this tutorial was for.
Mr Banas,
For completeness you have forgotten the code of the function.
function addThese(a,b)
{
return a+b;
}
That was silly of me. Sorry about that.
Waiting for AngularJS video tutorial
I’ll do my best
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
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