Hello World!
January 24, 2011 11:44 AM   Subscribe

I'm trying to learn the basics of Javascript and it seems like even when broken down to the simplest kindergarten-level explanation, I still don't get it at all.

So I'm trying to follow this "Learn How to Code" post on Lifehacker which looks amazing, but I still have so many questions. My only other experience with writing code is VERY minimal html knowledge. By that I mean I knew how to manually make a link or insert a picture back in the Geocities days of the 20th century.

For one, where am I doing this? In Microsoft Word? In notepad? Does it matter? If I save it as an html document will it open in my browser exactly as it would in a professional coding/scripting program?

Secondly, the author talks about deciding on a "naming scheme" for words. Here's where I'm already lost. In his case he uses "my" and types everything out as myVariable or myNumber or myString, but says I'll probably want to pick something different. So uh... What do I pick? What is the purpose of this again? What is with putting "var" in front of it and why does it say you can choose not to do it or not? Will this make a difference?

The "reserved words" - Are these like the official words of the Javascript language? Is simply typing "Variable = 5; " under the Javascript tag similar to typing the "a href =" business in HTML? What is typing Variable=5 even supposed to do here?

Sorry, I get none of this and come from absolutely no background. I feel like there are those who were meant to understand the world of coding and those who will just never get it - sort of like math, which I've always naturally sucked at and despised. I just feel like understanding the very fundamentals of coding could be really beneficial for my job.

If anyone could answer a few of these questions or point me to a resource that breaks this stuff down even simpler, I'd love to hear it. Thanks!
posted by windbox to Computers & Internet (28 answers total) 28 users marked this as a favorite
1. for any coding use a text editor, like notepad++, or editplus... i like notepad++ and it's recommended by lifehacker too. MS word can fill file with ugly code and other stuff.

2. He means, everytime you make a variable, use the same scheme... so if you choose variables are v_nameOfVariable, or something like that, just stick with it... don't be inconsistent.
posted by fozzie33 at 11:47 AM on January 24, 2011

notepad++ = http://notepad-plus-plus.org/
posted by fozzie33 at 11:48 AM on January 24, 2011 [1 favorite]

You might want to start with an actual book on Javascript, preferably one that includes a cd with project tutorials. This might be helpful.
posted by Kimberly at 11:48 AM on January 24, 2011

For one, where am I doing this? Anything that can write pure text files. Notepad always does that, so start with Notepad.

naming scheme Follow the author's suggestion of a "my" prefix. You will see later.

"reserved words" JavaScript needs to know which stuff you write belongs to the language and which parts don't - they are the official words of the JavaScript language as you say.
posted by devnull at 11:49 AM on January 24, 2011

if you need anymore help, i teach javascript at a university, so i can give some assistance on particular stuff. ...
posted by fozzie33 at 11:50 AM on January 24, 2011

I remember (way back when) learning JavaScript basics using Thau's JavaScript Tutorial on Webmonkey. It still looks good to me, but I had more of a coding background than you at the time, so it might not be for the absolute beginner.

For learning just about anything though, I can't say enough good things about the Lynda.com tutorials. I don't like video tutorials, but I like those A LOT.

But to be honest, it sounds like you're putting the cart before the horse. If your goal is to learn general programming, JavaScript may not be the best language. And if your goal is to learn JavaScript, the more you've mastered HTML and CSS, the better off you'll be. The primary strength of JavaScript is manipulating HTML and CSS elements, and if you don't have a solid understanding of how those things work, it's going to be very difficult to get far.

I recommend working on your HTML, and then adding JQuery to your pages. JQuery lets you do cool things without necessarily having to understand what's going on under the hood (although it's useful to learn eventually).
posted by coolguymichael at 11:57 AM on January 24, 2011 [2 favorites]

This book is a very helpful introduction to basic programming principles and jargon, though it is about Python.
posted by dfriedman at 11:58 AM on January 24, 2011 [1 favorite]

If you're starting to learn any web-related coding, try W3 Schools. It's geared for complete beginners, is free, and even offers you a built in editor that lets you try out new code live. Their JavaScript tutorial starts here, but I'd advise getting comfortable with HTML first, because JavaScript is about working in a browser with HTML.

The web site lynda.com offers tutorials on a variety of topics. It's usually $25 month, but their JavaScript Essentials includes a few free video lessons. This lets you figure out if they're teaching to your level or if they're too advanced.
posted by maudlin at 12:02 PM on January 24, 2011 [2 favorites]

Personally, I feel that Javascript is perhaps not the best place to start learning a language. The DOM (your HTML document) is sort of screwed up, there's some nastiness that exists between Javascript and CSS, and while Javascript allows you to do some neat stuff really quickly without normal programming overhead, beyond simple scripts really requires you to have a decent knowledge of programming paradigms.

I would really recommend picking up a nice statically typed, object oriented language* like C# or Java. JavaRanch is a great place of people starting out programming. There are strong IDEs out there that give you little squiggly lines to tell you when you're syntax is wrong and help suggest what methods and properties are available to you at a place in your code. Plus, most of the good Javascript books assume you have a familiarity with object oriented languages and kind of start out as a launching point. In fact, I'd go so far as to say that any book, on any popular language is going to assume you are acquainted with object oriented programming, even if the language itself is functional.

* Yes, yes I know Javascript can be a fine object oriented language, but from a pedagogical perspective I think you'd find more resources on a language like Java or C# than you would from Javascript.
posted by geoff. at 12:03 PM on January 24, 2011 [1 favorite]

Javascript is a bit of a doozey for a first time language, because it is so easy to mess up something unrelated to the language in the web page you've stuck it in, and instead get something really odd. You might want to try http://learnpythonthehardway.org/index <>
>For one, where am I doing this? In Microsoft Word? In notepad? Does it matter? If I save it as an html document will it open in my browser exactly as it would in a professional coding/scripting program?

Notepad is a fine place to start, however a text editor might be a better place to go. If you're on windows, go for http://notepad-plus-plus.org/release/5.8.6 (it's free and will install no spyware on your system). Remember you need to use the File->Open menu to open the HTML document after you name it .html

You need to save the pages as HTML, and yes, the browser will see it like an HTML page created by a "real" program.

>Secondly, the author talks about deciding on a "naming scheme" for words. Here's where I'm already lost. In his case he uses "my" and types everything out as myVariable or myNumber or myString, but says I'll probably want to pick something different. So uh... What do I pick? What is the purpose of this again? What is with putting "var" in front of it and why does it say you can choose not to do it or not? Will this make a difference?

Programmers are all over the map on this. Here is one use: first word is lower case, every other word in the variable name is capitalized. If there is a noun, it's the last word. So here are what my variables look like:

screen, firstTextBox, submitButton, header.

>The "reserved words"

Reserved words are words you can't use for variables.

A better resource to learn javascript is Alan Gauld's website on the same. Here is a link:
posted by gte910h at 12:04 PM on January 24, 2011 [1 favorite]

Don't use MS Word,mostly because it's easy to forget to use the 'save as plain text' option and accidentally save your work as an unusable .doc file. Use a plain text editor. And, yeah, code is just text; browsers try to interpret the text as code (whether it's HTML or javascript or css or whatever), any text editor will just show you the text.

"Reserved words" are, as you guessed, the words that make up the actual language of javascript. Variables you can name anything except one of those reserved words. There are lots of different naming schemes people use for variables, for various reasons, but you can use whatever you want. It's best to pick something that later on you'll be able to remember what the variable was for in the first place, but other than that go nuts.

What is with putting "var" in front of it and why does it say you can choose not to do it or not? Will this make a difference?

Some languages require you to explicitly declare your variables. In javascript it's optional. Don't stress out about stuff like this too much at this point -- if you try to understand every little detail of why everything is the way it is before you use it, you'll never get anywhere; there's a lot to be said for just hacking around and playing with it to see what works and what doesn't.

What is typing Variable=5 even supposed to do here?
Well, that would create a variable named "Variable" and set its value to 5. Which isn't that exciting, granted, but it's just a first step; presumably they'll get to more interesting examples later on.

I feel like there are those who were meant to understand the world of coding and those who will just never get it

Well, if you feel this way you're never going to get anywhere. So stop feeling this way. It isn't true.
posted by ook at 12:14 PM on January 24, 2011 [1 favorite]

Oh man, Thau's tutorial takes me way back. Use that.
posted by phrontist at 12:24 PM on January 24, 2011

I looked at that "Learn How to Code" article, and it's not amazingĀ at all. In fact, it's terrible. It tries to cram tons of information into a small space without explaining it well, and it omits the background information you need to actually get started (like where you actually write this code and how to make it run). And it goes on tangents about things you don't even need to know at this stage (like "JavaScript is a loosely-typed language" when you're not even sure what "type" really means). And I see some people making exactly the same mistakes in this thread. It's hard to realize that people are not born knowing this jargon.

I think you're better off with a different article or book, but I can't recommend an introduction to JavaScript (I need to read one myself!). To answer your questions:

1. Notepad is fine (better than Word, because you're editing plain text).

2. Variables are named containers that hold values (numbers, text, etc.). The "type" is the category of thing that they hold; some languages let you use the same variable for more than one type of thing, but others make you use it only for one type (in which case you have to "declare" what type that is). You can name variables anything you want, as long as you don't use weird characters or reserved words (more on that below). Since variables are named containers, you should pick a name that makes it clear what the variable's value means. A variable representing your user name could be called userName, and its value could be set to "windbox". A variable representing the number of a MetaFilter thread could be called threadNumber and its value could be 176588. Variables that contain very abstract things can be hardĀ to name, but good naming makes a program easier to read and understand. There are also "naming conventions"; a very common one is capitalizingLikeThis.

3. Reserved words are words that have a special meaning in the programming language; you're not allowed to name variables the same thing because then the interpreter/compiler can't tell whether you mean the special word or your variable (and besides, you'd confuse other people and even yourself). "Variable = 5;" sets the value of variable whose (poorly chosen) name is Variable to 5. Don't compare JavaScript to HTML, because HTML is not a programming language and it doesn't have variables.

Unfortunately you'll need some math to write good code, wait until later to worry about that.
posted by Chicken Boolean at 12:33 PM on January 24, 2011 [1 favorite]

Oh boy. First, you are really starting from scratch. HTML is nothing like Javascript. HTML is markup (tags describing how text should be displayed), Javascript is a scripting language (code executed in a browser). Don't try to compare the two - they're nothing alike. You need to start from square one.

I highly recommend starting with W3Schools Javacript tutorials. It explains where to put the JavaScript, variables, and much more. Read through all the chapters, try out the working examples, make your own test pages, etc.

After that, you may want to peruse the free Eloquent JavaScript e-book, which is a bit wordier and doesn't seem to be as beginner-friendly.

I agree with some of the others that JavaScript is a bit of a mess so may not be the best language to get a basic understanding of programming. Even if you do decide to go ahead with learning JavaScript, reading up on "object oriented programming" will provide some helpful background knowledge that will also apply to most other popular programming languages.

Good luck! You can do it. I have never been good at math, but I can do programming and I'm sure you can too.
posted by geeky at 12:35 PM on January 24, 2011

Yeah, Javascript might not be the best to start off with, because the only fun parts are where it interacts with HTML, so then you're learning not ONE but TWO things. tryruby.org has an interactive walkthrough for a language called Ruby that might be fun, just to get an idea of how one specific language works.

But let's do a simple breakdown of the simplest simple Javascript things for you:

1) Where can you write it?

Anywhere! The magic of Javascript is that it's all just a bunch of words in a file. When you're on a web site, you can go to View > View Source and see all of the "a href=" business that HTML uses - it's the exactly same way with Javascript.

The PROBLEM is, though, that something like Word doesn't like you to just type things out. It wants you to have bold letters, and indenting, and all sorts of extra bits. When you save a Word file, it's also saving a lot of extra notes in the file that you can't see. If you opened it in a web browser and looked at View > View Source, you'd see that it's full of gibberish. SO you'll want to stick to something like Notepad, which is super simple and doesn't include any of that extra junk.

1a) If I save it as an html document will it open in my browser exactly as it would in a professional coding/scripting program?

The funny thing about Javascript is that since it really only runs on browsers, that is the professional environment to view it in. As for professional environments to write it in, they're basically the exact same thing as Notepad. The major benefit to a "professional scripting program" is when you type something that isn't legal Javascript it might give you little squiggles underneath, like when you use bad grammar in Word. You can really just use Notepad.

2) "naming scheme" for variables

First we'll talk about variables.

You know in math, when you have 2x = 6, and then x = 3? That's how variables work. That "var" thing you asked about? That's how Javascript knows it's a variable! It's like saying "Mr. Rogers" - the "Mr." lets you know the next word is a man's name, just like the "var" lets javascript know what comes next is a variable.
var x
So you've made a variable named 'x.' Congratulations! The thing is, though, that it isn't going to be useful until you tell the computer what x means
var x = 3
Now you're saying, "Hey Computer, I've made a variable named x! From now on, whenever I use it, pretend I said '3' instead."
var y = x + 2
So the computer looks at that x, replaces it with '3', and figures out that 2+3 is 5. Then it takes that '5' and puts it in the new variable you made named y!

You'll notice I didn't use 'var' again - that's because once you've used it once, the computer knows that every time you use 'x' you're going to mean the variable.
var z = y + x
And so on! But back to "naming schemes" -

Like boring people names, variable names can only be one word. No funky hyphens or apostrophes or any of that allows - nothing but letters! So you can name your variable "buttercup" but you can't name it "stick of butter" - the second one has spaces.

A naming scheme in the real world would be something like, "every time I have a kid I am going to name it something starting with V." In the programming world, you'd say "every time I make a variable I am going to put 'my' in front of what it does." So, if you have a variable that is supposed to hold your name, you'll call it "myName". If it holds your dog's name, "myDogsName". Capitalizing like that is just so you can pretend it's multiple words. Remember: no spaces in variable names!

Do you need to have a naming scheme? No. Right now you just call things what you want to call them and doesn't make up arbitrary rules for yourself.

3) Reserved words

You know how every time you're going to use 'x' Javascript is going to think you mean the variable '3'? The language itself has a bunch of words it already knows mean things. For example, "var" means "up next is a variable." Imagine if you set it to mean '3' instead! Everything would get real crazy real fast.

Reserved words are just words Javascript doesn't let you use, because they all have magic meanings!

4) Summation

Really, Javascript is a terrible terrible terrible language to learn. I'm not sure what you should go with, though!
posted by soma lkzx at 12:49 PM on January 24, 2011 [2 favorites]

I'd avoid relying on the W3Schools tutorials and help pages if you can; it teaches bad practices, poorly.

Google Code University has a series of videos entitled HTML, CSS, and Javascript from the Ground Up that you might find useful.
posted by lantius at 12:53 PM on January 24, 2011 [1 favorite]

Evening classes - there are maybe a dozen brand-new concepts you need to get under your belt. Then you can go back to the self-directed learning with a set of tools you know how to use.
posted by Leon at 1:02 PM on January 24, 2011 [2 favorites]

The registration (free) is closed for this session but all documentation is open to the public for those not getting in and want to follow along.

You may want to sign-up with the school of webcraft if nothing to just get on the list for the next session.
posted by doorsfan at 2:27 PM on January 24, 2011 [1 favorite]

I also agree that javascript isn't a great place to start... for the reasons already mentioned and also because a beginner needs to quickly accomplish simple tasks with a minimum of fuss to maintain their momentum and motivation. Want actual output with javascript? Go learn html, css, how the DOM works, how browsers work, and preferably jquery or some even more complicated framework. All for "hello world." Its a tall order.

I also differ a bit from the others and would recommend that you start with an IDE (Integrated development environment), which is like MS Word but tailored for computer, not human languages. Autocomplete can help demonstrate how objects and libraries work, grammar check is much easier to deal with than reading cryptic compiler errors, and most importantly, a graphical debugger can show how code behaves when its in action, which can be a real learning experience. Wikipedia has a great list of free and not-free IDEs.
posted by tempythethird at 3:08 PM on January 24, 2011

Either way, have fun!!!! Once you get a hold on HTML, CSS, and Javascript you can do some cool stuff, although your gonna have to learn Python, Java, C#, etc. if you're gonna be able to create a website soup-to-nuts.

Surprised no one mentioned Firebug. MUST HAVE FIREBUG!!!!! It will help you step through your javascript so you can see what is going on. As mentioned above, you can 'view source' and with Firebug you can step through anyone's code and see how they make the magic happen.
posted by jasondigitized at 3:10 PM on January 24, 2011 [1 favorite]

As w3 schools has been mentioned, I feel I need to also point everybody to w3fools, which points out the many errors on w3schools.

I also highly recommend the book Learn To Progrm it's very good to get the basics of programming down before learning something like JavaScript.
posted by miscbuff at 3:16 PM on January 24, 2011 [1 favorite]

soma lkzx answered your specific questions very well, and ook's closing comment is very important too, I'll just add some further comments based on that:

I'm going to go against the flow here and suggest that JavaScript is a great programming language to learn first because, like the old 8-bit BASICs, it comes with its own display primitives built in. There's nothing better for getting immediate, visible, useful results from a small amount of code.

coolguymichael mentioned the WebMonkey JavaScript tutorial, that all got turned into a full length book - I have the first edition of it and I really liked it (but I also had prior programming experience when I read it). A more modern equivalent might be DOM Scripting but that assumes you already know HTML & CSS. With that in mind I would recommend getting your HTML & CSS straight first with the HTML Dog tutorials and then working your way up to JavaScript once you have a better idea of how it all fits together in a web page.
posted by robertc at 5:31 PM on January 24, 2011

Nthing the pack here ... you need to learn the basics of programming before jumping into javascript. Learn to Program as mentioned above covers variables in an introductory fashion.
posted by benzenedream at 5:36 PM on January 24, 2011

Javascript is not a very friendly way to learn programming, but it is does have the advantage of there being runtime environments in every web browser you touch. I agree with everyone above who says get Python or Ruby to learn with, because that will be most flexible in the long-term.

Javascript is regular text. A text editor that you can save boring old ASCII text files with (not rich text or anything like that) is a must. You can have javascript execute in a web browser. If you do everything right the first time, Notepad.exe (or vi) + a web browser will have everything you need. Write code, save in a text file, load in browser. Easy!

No, it's not easy. That's a big lie. When learning, you'll want the best, most descriptive debugging you can find in your execution environment. In a perfect world, the debugging mechanism will tell you exactly what you did wrong, and how it went wrong. At the very least, your debugger should tell you what line is broken. This means your text editor should also be able to take you directly to specified lines. Otherwise, there's a whole lot of suffering in your future, digging into what you could have screwed up, not seeing the problem, and getting incredibly frustrated when all you really needed was something to say "missing ';' in line 24".

Once you get past alert('hello world!'); you'll be wondering if there's anything out there that will help you remember all the ;,{} and (). There are text editors out there that will help you. There are full-fledged development environments that will streamline the whole process and workflow.

Workflow??? Yeah, especially when learning, you're going to write, run, tweak, run, tweak again, run, get rid of that last change, tweak, run....there are whole environments that will make that easy on you. Look for them, and try out a whole bunch.

Good luck! Give it a try, figure out how to turn on debugging, find an environment of some sort that suits you, and have fun.
posted by graftole at 6:04 PM on January 24, 2011

Nthing much of what has already been said: JavaScript is not a great place to start if you have no previous experience (that being said, I owe a lot to the aforementioned Webmonkey JavaScript tutorial by Thau. It's what made the lightbulb go on in my head when I was trying to learn 13 years ago.)

I would recommend finding a learning to program book that uses Python, not Java or C# - those are good languages to learn once you already understand fundamentals, but they'll just make your brain hurt jumping into the deep end. (Java totally mystified me until I had the benefit of a few years' experience with JavaScript and PHP.)

Anyway - Python is nice because it's easy to read and write, but capable of very elegant and powerful things as your skills develop. I wish I had a specific recommendation for a "learning to program" book, but I will say that nearly every "For Dummies" title I've read on any subject (including programming) has been very good, once I swallow my annoyance at the titles. I would also say, don't be too proud to start with a book geared towards kids; "grown up" books and online tutorials often make a lot of assumptions about prior knowledge and can be frustrating. Good luck!
posted by usonian at 8:03 PM on January 24, 2011

(Also: my standard Admonition for writers of plain old HTML, which you'll probably be doing once you do get up to speedwith JavaScript: Learn to code HTML by hand, not using a GUI/WYSIWYG tool like Dreamweaver or Frontpage. Understanding how HTML documents workis essential to understanding how JavaScript and CSS interact with them. Once you really know how to code a web page by hand you can go ahead and use fancy software to do a lot of the grunt work for you, but if you start with the fancy software you'll never learn anything other than how to use the fancy software.)
posted by usonian at 8:13 PM on January 24, 2011 [1 favorite]

I would highly recommend taking an 'Intro to Programming' class at a local community college or the equivalent. Many have Continuing Education classes on nights and weekends. It may not be in JavaScript per se, but you will learn a lot of concepts that are then transferable to JavaScript. My classes were/are in C#.

And definitely learn to code HTML by hand. Even CSS. Really helps the understanding.

(I speak from experience. Over the years, I tried teaching myself programming, and I got nowhere. This included JavaScript. So one year ago, after getting frustrated at my lack of progress - and an inheritance to pay for the tuition - I took an 'Intro. to Programming' class in C#, and then a more advanced C# class. And now I'm taking a theory class on some of the more advanced concepts of Object Oriented Programming languages. After my C# classes, learning JavaScript was a lot easier. Especially since compilation happens right in the browser, and you probably won't have to write any %)(*^$ .dlls.)
posted by spinifex23 at 10:20 PM on January 24, 2011

nthing the suggestion that JS is a terrible first language to learn (which I understand is frustrating because it's also one of the most useful languages to know).

Learning a server-side language like PHP might be a bit easier for you at first. PHP's nice, because it holds your hand, and is very forgiving of....er....sloppy programming.

Personally, my first language was C++, which I learned in High School. It was awesome, precisely because it didn't hold your hand, and only gave you enough to perform the most basic of academic exercises. I'd probably never write another program in a C dialect, although the knowledge was tremendously useful. (And, yes. I do realize that I've just directly contradicted myself)

Python's allegedly a good place to start out, although you can't jump right into writing web applications with it.
posted by schmod at 9:54 AM on January 25, 2011

« Older Where can I find a unique and flattering black...   |   Countdown! Newer »
This thread is closed to new comments.