Try Tuts+ Premium, Get Cash Back!
JavaScript from Null: Chapter 2
basixvideos

JavaScript from Null: Chapter 3

on Dec 18th 2009 with 50 comments
This entry is part 3 of 7 in the series javascript-from-null

The Full Series


javascript-from-null

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

Ready to take your skills to the next level, and start profiting from your scripts and components? Check out our sister marketplace, CodeCanyon.

CodeCanyon


Series Navigation«JavaScript from Null: Chapter 2JavaScript from Null: Chapter 4»

 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. Also, I'm finishing up my latest book on Laravel Testing! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • Matt

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      True – But everything I taught in this lesson applies to jQuery. There’s no jQuery shortcut for an if statement. :)

      • Matt

        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.

    • http://matt-bridges.com Matt Bridges

      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!

    • Ben
      • Zi

        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.

      • Matt

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

  • Giovanni

    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!

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Is that video crazy? Really puts things into perspective.

      Glad to hear you’re enjoying it!

  • http://davekingsnorth.com Dave

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      That’s great, Dave. Thanks!!

  • http://www.urbanvideos.tv alan

    Jeffry you are the KING!

  • John

    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?

  • http://sonergonul.com Soner Gönül

    That’s really great..!

    Thanks..!

    I will try it..!

  • ricochet

    Hey Jeffrey, it’s great that you’ve started another series of tutorials, BUT are you going to finish the ‘CodeIgniter from Scratch’ series?

  • http://www.steps-to-trade.com/knigi.html Books on Forex

    You got me, I’m clicking thru.

  • http://www.mcgoo.pl McGoo

    We need more articles like this, I mean from Null. Thanks … :)

  • http://www.twitter.com/stvproductions Thomas Verschoof

    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!

  • http://www.kaplang.com Michelle

    really useful tutorial, thanks

  • http://xsaiddx.0fees.net kosaidpo

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

  • http://www.timesrecordnews.com christopher simmons

    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

  • http://www.visual-blade.com Daquan Wright

    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.

  • Towel

    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.

  • http://smashingwebs.com/ SmashingWebs.com

    Nice, We need more articles like this

  • Raoul

    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.

  • Raoul

    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)

    • http://www.timesrecordnews.com christopher simmons

      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.

  • Khalil

    Great series… getting a lot of things Thank you Jeff.

  • abdulrahman

    thank you Jeff

    are you did action script videos?

  • http://koocha.com Koocha

    Thanks for this training. Also, feel free to browse my new site http://koocha.com with lost of design stuff collected from Internet

  • http://thejavascriptblog.com Merrick Christensen

    I am stoked to see this series. Sick of people referring to JavaScript as jQuery. Good to see something focus on the language itself.

  • http://elijahmanor.com Elijah Manor

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

  • RC GFX

    I really like the fact that JavaScript is very similar to Java.

    • Daniel

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

  • Tylor Skory

    Thanks again for all your time!

  • http://tutorialblog.info tutorial blog

    userful

  • Dennis

    Absolutely can’t wait for more. Do you have such screencasts on PHP as well?

  • Daniel

    Really enjoying this tutorial series.

    Here is a useful tool: http://writecodeonline.com/javascript/

  • http://www.twitter.com/ThomasVerschoof Thomas Verschoof

    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!

  • http://www.brianfidler.com brian fidler

    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.

    • http://www.jeffrey-way.com Jeffrey Way
      Author

      Brian – was just a typo. I noticed that too. :) Use three.

      • Daniel

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

  • http://www.dynamicpalette.com Chris Seckler

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

  • Deoxys

    I love these tuts!!
    But why does my Firefox always crash when I finish one XD

  • Dan

    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.

  • Matias

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

  • Blake

    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.

    • http://pogul.com Marc Pogul

      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.

  • Walker

    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?

  • http://wingsofweb.blogspot.in Rohan

    Thanks Jeffrey for this wonderful tutorial. I’m on windows, so it’ll be helpful if u can suggest me the text editor that works same as Espresso. I meant for LIVE reloading of page without having to refresh.