JavaScript from Null: Chapter 3
The Full Series
Continuing on with our JavaScript training, in this week’s screencast, we’ll review if, for, and while statements. Secondly, you’ll be introduced to the ternary operator, as well as a handful of the most useful methods of the String object.
In this Screencast, you’ll Learn:
- If statements – long, and short-hand forms.
- For statements
- While statements
- Working with arrays, and loop through them.
- Ternary operator
- Methods of the String object.
Chapter 3: Conditional Statements
Other Viewing Options
- Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web. Ready
Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Kult House - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
This is why I’m glad jQuery exists. Raw JS is great, but jQuery has done the work for me, and now I can feel rest assured that I not only know how it works, but why it makes my job easier.
True – But everything I taught in this lesson applies to jQuery. There’s no jQuery shortcut for an if statement. :)
Good job, I guess?
What I’m saying is, I’ve used pure Javascript for years, and years, and years. jQuery and other FWs such as Mootools and Prototype (and arguably RJS) help me accomplish a job much faster.
When there is a framework for any language out there, it is always good practice to learn the basis of the framework before delving into it’s convenience. I learned this the hard way (in my case with Javascript. ironic…).
But once again, great post Jeff!
http://stackoverflow.com/questions/1917793/degradation-of-skills-as-a-result-of-javascript-libraries
Have a look at that post. What do you think of it?
I believe it’s true to an extend, I learned JS before JQ and I did get rusty on some parts of JS, I’m definitely not as good as I was with pure JS but at the same time I’ve rarely heard employers ask you to code parts of the website in pure JS and nothing else.
But I have learend over 10 programming languages so I tend to loose myself more easily than people who would only concentrate on a few.
I should stop using Rails and just program everything in C and put it in the cgi-bin directory.
My skills are degraded because I know Ruby. :|
Was about to watch this — Then I clicked on the link to that belittling video of the universe you posted on Twitter and I think it’s ruined any chances of me being productive right now, hehe. Instead, I think I’ll go drink until I forget how small we are. :)
Will definitely come back and see this, though. I LOVE THIS SERIES! Great for me as a refresher of things I’ve recently learned. So THANKS!
Is that video crazy? Really puts things into perspective.
Glad to hear you’re enjoying it!
For a change I actually took the time to watch each section, pause, and write the code for myself from memory. I was familiar with most of this already but thats literally as far as my knowledge goes and I’m looking forward to following this whole series in the smae way.
When you teach stuff it sticks in my head, I get bored of learning from books too quickly.
That’s great, Dave. Thanks!!
Jeffry you are the KING!
Jeffry love the screencast’s like so many I’m a visual learner and these lessons hit the mark. Is there nobody in the Envato network that could do the same over at Activetuts maybe a screencast each week on actionscript?
That’s really great..!
Thanks..!
I will try it..!
Hey Jeffrey, it’s great that you’ve started another series of tutorials, BUT are you going to finish the ‘CodeIgniter from Scratch’ series?
You got me, I’m clicking thru.
We need more articles like this, I mean from Null. Thanks … :)
Hej Jeffrey, where did ya get that Textmate theme? I would really like to use it! It calms me down. I dont like using the white background and some of the themes really kinda s*ck. Could you pass me a link or something? Thank you, and great tutorial! Really learning a lot about Javascript!
really useful tutorial, thanks
hey ; )
nice tut as usual but we wud love to see some advanced tips time to time some animations you kno once again great tut and tnx ; )
I wish these were a daily series rather then a weekly, I know you probably dont have a ton of time Jeffery but since these are mainly covering fundamentals they would probably be best watched in shorter succession!
still great and worth a watch though
Cool series, I still need to dig into my Rhino book and practice some statements myself. The while and do statements in particular since I’m not familiar with it.
Tutorials like these are why Jeff is editor. Simple, yet applicable tutorials for beginners, which is the true purpose of a tutorial site. Great series, I’ll be following it till the last chapter.
Nice, We need more articles like this
Nice tut Jeffrey !
It’s “funny” because when i started actionscipt (flash) people said that if you know javascipt you “know” actionscipt. What i see in that tutorial is if you actionscript you know javascript ^^ ( the syntax)
Or something like
if (youKnow = actionScipt){
youKnow === javascript
}
but… i stil don’t know action neither javascript^^’
Thank you,
(again appology the langage :x)
R.
Oh yes i forgot, maybe now you can purchase “text expander” :D
Ps: have you ask for a wage increase ? :p (because of the adds in the begining)
yea those are honestly getting on my nerves. I watched the entire diving into php and wordpress for designers series last weekend and ended up getting to to the point I would click on every ad because it would make it go away sooner. it’s a real headache.
Great series… getting a lot of things Thank you Jeff.
thank you Jeff
are you did action script videos?
Thanks for this training. Also, feel free to browse my new site http://koocha.com with lost of design stuff collected from Internet
I am stoked to see this series. Sick of people referring to JavaScript as jQuery. Good to see something focus on the language itself.
I’ve enjoyed watching the videos… ;)
I didn’t realize the string was wrapped in the String object to do methods/properties. Good to know.
By the way, the & is the bitwise and operator (not usually what is needed) as opposed to the && logical and operator
http://bton.com/tb16/jsref/operator.html
I look forward to the rest of the videos.
Expect a tech tweet tomorrow morning ;)
I really like the fact that JavaScript is very similar to Java.
If by similar you mean share the word “Java” in the name. Other than that, you will quickly find lots of differences including what is efficient, what which is used for, and of course methods! Java has functions! Only methods. (for example).
Thanks again for all your time!
userful
Absolutely can’t wait for more. Do you have such screencasts on PHP as well?
Really enjoying this tutorial series.
Here is a useful tool: http://writecodeonline.com/javascript/
Mr. Way,
We miss new CodeIgniter Tutorials!! You are one of the best teachers when it comes to CodeIgniter. There are not that much (screencast)tutorials to follow and your screencasts are the best out of all!
Great tutorials Jeffrey,
One thing I noticed however, in tutorial 2 you were pretty emphatic to use === as a conditional operator, but in your example in tutorial 3 you reverted to == (2 equal signs instead of 3). This might get a little confusing for anybody new to scripting.
Brian – was just a typo. I noticed that too. :) Use three.
I also noticed you mentioned people might be able to get away with just one & instead of two &. That statement is true; however, for an entirely different reason. & and bitwise and && is logical. (Kind of like ! is the “Logical Not” and ~ is the “Bitwise Not”.) I remember one time I got in an argument with a fellow coder about him using & all the time because even though the statements might work, they won’t always work.
P.S
&, |, ~, <> are all bitwise and are probably too advanced for this tutorial series; however, I could be convinced into writing a short intro if you wanted me to. Be warned though, I’m probably not going to be any better than reading a Wikipedia and spitting out examples for which I have used bitwise “stuff”.
Great Series Jeffrey! I’m really learning alot!
When you explained the valueOf() method, you forgot to include the parantheses and it therefore returned “function valueOf() { [native code] }”. You didn’t really mention what this is good for. Did you mean to include the parantheses, because when you add them, it returns the actual value of the string, which is “Hello World”?
I’m a bit confused as to why I would use the valueOf() method. If you want to see the value of a variable you can just use document.write(myString). Whats the point of writing document.write(myString.valueOf()); ?
I love these tuts!!
But why does my Firefox always crash when I finish one XD
Thanks for the great tutorial. On Chapter 3, at about 14 minutes when you had a “glitch,” is it possible it was because for an instant you had an “infinite” while (i < 10) loop (before you added the i++ to actually increment the variable)?
Hope this helps.
Thanks for these, Jeffrey. You make learning JS easy and fun. :-)
At 08:00 you say that you can include only one thing in the if statement when using short-hand forms. How about this?
var x = 4;
( x === 4 ) ? ( ( x = 3 ) && document.write( x ) ) : document.write( x );
One question. I’ve seen Chapter 1 & 2, but I’m stuck here. I’m doing and everything right, and I’m getting the same results except, my browser isn’t updating automatically like yours is when you type in differences. I’m using Windows 7, Notepad++, and Firefox if it’s any use. Would really like to know how to get mine to update automatically like his.
I’m glad to see there are other folks (like me) still watching this series! Great stuff Jeffrey!
@Blake, I believe the instant updating we see is due to the specific editor that Jeffrey is using – something called “Mocha” I believe?? Or a combo of using Textmate and Mocha?
I’m not a Mac guy so I’m not sure of the exact app, but I believe he mentioned that towards the beginning of this chapter – and you can see “Mocha” in the title bar of that window that is updating.
You’ll also notice that when it had issues in the middle of the tut, he switched over to just using FF for the previews.
I’m not sure if there is anything comparable for us Windows folks. :)
Hope that helps clear up the confusion.
I’m puzzled by an output discrepancy in this 3rd cast.
When you show the second-form if/else statement, you place two document.write(x) commands around it so we see it is 5 before and 10 after. There is no space between the numbers.
But then, when you go into your first for-loop example, suddenly each document.write(i) is printed with a nice space between.
What happened? Why is one spaced and the other not?