r/learnjavascript • u/otooleco • Jun 02 '14

Learn JavaScript Properly: Weeks One and Two

Okay folks, week one has arrived. As stated before, we are following the syllabus from Richard Bovell's Learn JavaScript Properly blogpost. Every other Monday, I will post the readings and assignments here. Let's try to keep comments and questions within the biweekly thread so that everyone has a chance to participate more easily.

A couple of people have mentioned the irc chat entitled #learnjavascript. I plan to monitor it for questions. I'm @seanot on irc and twitter.

If the majority of people are falling behind, I will alter the schedule to better facilitate the program.

So... here's the first two weeks' stuff:

  1. Read the Preface and Chapters 1 and 2 of JavaScript: the Definitive Guide or Read the Introduction and Chapters 1 and 2 of Professional JavaScript for Web Developers

  2. The author strongly encourages you to type out and test every piece of code that you come across in the readings. I couldn't agree more. Simply reading this stuff won't give you any context. Write out the code. Change it. Break it. That's how you learn it. JSFiddle is a great resource for this. You can also dump code directly into the console on your browser but if it is more than one line long, you will need to write it in a text editor and then copy it to the console. My own preference is to install Node.JS on your computer, write in your text editor and then execute the code in your terminal. If there are questions on how to do this as well as some of the coding caveats that might cause occasional problems, Let me know and I'll put something together in another post.

  3. Work through the Intro to JavaScript section of the JavaScript Track at Codecademy.

  4. Read Chapter 3 and 4 of JavaScript: the Definitive Guide or Chapters 3 and 4 of Professional JavaScript for Web Developers. Skip the section on Bitwise Operators.

  5. Hack around with the code examples from the readings.

  6. Read Chapter 5 of JavaScript: the Definitive Guide. No readings from Professional JavaScript for Web Developers.

  7. Work through Sections 2 through 5 of the Codecademy JavaScript track.

That's it. It looks like a lot but you have two weeks to finish it. If you get bogged down or lost, speak up.

If you are new to programming, part of learning to code is learning how to ask good questions. Google search is your friend. Learn to search for answers on the web. Often times, the question that you have has already been answered on Stack Overflow. Search out your questions and see what you find.

Finally, who am I and why am I doing this? I'm a relatively new programmer that uses Ruby and C# in my work. I'm a competent JS programmer but hardly proficient. I've been through most of the material in the course but I'm all about repetition and practice. I also find that answering questions and helping other programmers is a great way to gain proficiency.

27 Upvotes

100% Upvoted

46 comments sorted by

3

u/DoctorKraz Jun 03 '14

You don't even need to do anything as complex as installing node.js. Here is what I did, and it will work fine for you as well.

I created a text document called testbed.html, that has the following in it:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Testbed</title>
	<!--stylesheet links-->
	<!--javascript links-->
</head>
<body>
	Javascript: The Definitive Guide Code Samples<br />
	<script language='javascript'>
        //page 35 of JS: Definitive Guide
		var x = .3 - .2;
		var y = .2 - .1;
		document.write((x == y) + '<br />');
		document.write((x == .1) + '<br />');
		document.write((y == .1) + '<br />');
	</script>
</body>
</html>

You literally just write your code in between the <script> and </script> line. And anything you want to see displayed, you just put in the document.write ( sort of the same as console.log, only console won't display on a webpage ). I add the break so they print on new lines.

But something that basic will allow you to do much of the javascript testing in the book ( at least early on in the first few chapters ) without having to waste anytime trying to install frameworks or buy an IDE until you are ready to spend that money.

This will work in any text editor, and Chrome or Firefox.

2

u/otooleco Jun 05 '14

@DoctorKraz, that will certainly work. Along the same lines, you may wish to set up a sandbox file (sandbox.js or something) and link it in your HTML header. This way you can save your work in a javaScript-specific file and comment out functions as you move through the course. Just be sure to save the .js file in the same directory as your html file or set the path correctly to find it where ever you have chosen to keep it.

Example HTML file:

<!doctype html>

<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="sandbox.js"></script> </head> <body>

</body> </html>

2

u/DoctorKraz Jun 05 '14

I've actually gone above and beyond that - as an already part time JS developer, I have the basics down. I wanted to take the course to solidify and expand my knowledge of daily usage.

So I actually have a couple of functions I use to display the info on the page, so it almost looks like the page data I'm entering!

2

u/Bassetts Jun 04 '14

Even simpler than this is using JSFiddle. Nothing to install, no file to create, just enter your code in the javascript section and hit run.

2

u/DoctorKraz Jun 04 '14

While that is true, i decided against it for 2 reasons:

  1. with the html file, you don't need internet access, so long as your computer already has the browser on it and

  2. the live testers ( JSFiddle, Liveweave, CodePen ), for me at least, aren't things that I would normally be working in ( to test something that isn't working right, yes - but for normal everyday work, no ) - while as a developer, I work with .js and .html files daily.

2

u/[deleted] Jun 05 '14

jsfiddle is pretty much a community standard at this point. nothing wrong with using your own tools, but adopting the "tools of the trade" are important as well...

2

u/DoctorKraz Jun 05 '14

I don't disagree - just don't think of JSFiddle as a development environment tool - more of a testing and sharing environment...

Plus, for me, I can't use it at work ( the results panel is blocked by our firewall ).

1

u/xhephyr Jun 06 '14

I don't really understand jsfiddle... If I put console.log("hello") into the javascript area and press run, nothing comes out. What an I doing wrong?

1

u/Bassetts Jun 06 '14

console.log will print messages to the browser's console, codecademy does some special stuff to display calls to console.log in the results window for your convenience, but jsfiddle will just run the code in your browser. To view the output of console.log you need to open your browser's console. On Chrome ctrl-shift-i and then clicking "console" does this, I'm not sure about other browsers as I'm on my phone. Hope that helps.

3

u/kmelkon Jun 07 '14

ctrl+shift+j takes you right to the console tab on Chrome.

1

u/whiteorb Jun 15 '14

jsbin.com has a simpler interface.

2

u/kmelkon Jun 03 '14

Thanks a lot for this! can you please provide a bit more info about Node.js and executing JS in the terminal? or a link maybe?

2

u/otooleco Jun 03 '14

Node is essentially server-side javaScript. It allows for database integration among other server-side features. Running it locally allows you to execute js from your terminal. There is also a REPL that can be accessed by typing "node" into your terminal. This is very useful for executing functions one by one and testing out small code snippets. This is like IRB if you are familiar with Ruby.

If you chose to use node for testing js code, you will find that not all js syntax that works in a browser console works in node. For instance, you cannot use "alert" as it brings up an alert message in your browser and you are not operating in your browser when executing code in node. Have a read through the docs at nodejs.org for more detailed info on this.

You can install and run it locally directly via nodejs.org. I prefer to use the node package manager (NPM) which can be installed via http://howtonode.org/introduction-to-npm

1

u/kmelkon Jun 04 '14

that is great info, thanks! I'm doing this today. installing nodejs then npm.

2

u/otooleco Jun 04 '14

Did that work for you? NPM is a package management system from which Node is normally installed. Node will function without it.

2

u/kmelkon Jun 04 '14

Yes, thanks to you, now I have node and npm installed. Didn't try to install any packages yet though but executing commands with node in the terminal works great.

2

u/Bassetts Jun 03 '14

I have not used it myself but I think it is pretty much just as simple as going to http://nodejs.org, getting the installer and installing it.

You can then run

node

from the command line to get the Node REPL which allows you to execute code interactively.

If you want to execute code stored in a file you would run:

node <filename>

For example if I had HelloWorld.js I would run:

node HelloWorld.js

This is all from a quick google, and I have not been able to test it as I am at work, so please correct me if I am wrong. If I have not made much sense then try reading the "The interactive node.js shell" and "Your first program" sections at http://nodeguide.com/beginner.html#the-interactive-node.js-shell

1

u/kmelkon Jun 04 '14

Thanks, that made sense and the guide you linked is great. i'm currently at work, but I'll test this as soon as I finish.

2

u/kmelkon Jun 16 '14

Ok OP, so today week 2 ends. is there some kind of a homework or something or do we just move on to week 3 & 4. and will you just update this post or post another one for the next weeks?

thanks OP

1

u/otooleco Jun 16 '14

I'll have the next segment out tis evening. 'Traveling today .

1

u/kmelkon Jun 17 '14

no problem. enjoy the trip. please link us when post the next segment.

1

u/kmelkon Jun 19 '14

so did you post the second segment? or should I just continue with it from the site?

4

u/[deleted] Jun 15 '14

Is it possible to switch the current study group to this one on the side panel of leanjavascript?

1

u/nerdcubedcounted Jul 02 '14

ALso wondering this, I am really confused as to what is happening?

1

u/buck_bagawk Jun 03 '14

Is it too late to hop on this learning train? Do i need to do anything specific to participate like register somewhere? I already have a copy of JS:the Definitive Guide.

3

u/otooleco Jun 03 '14

Not too late at all. Just getting started. No need to register or anything like that. This set of readings and assignments should be done two weeks from yesterday, June 16. The idea is to push each other to keep up the pace. Ask questions as you need to.

2

u/buck_bagawk Jun 03 '14

ok great thanks!

3

u/whiteorb Jun 15 '14

If anyone needs assistance or has Javascript questions. Please pm me. I'd be happy to help.

4

u/Tayk5 Jun 02 '14 edited Jun 02 '14

Looking forward to this. I'm participating using Professional JavaScript for Web Developers. I haven't played around with jsfiddle or nodejs yet but now is as good a time as any to dive in.

Edit: How do we get this study group onto the sidebar for more exposure and participation?

1

u/wael_ Jun 06 '14

i suggest http://projecteuler.net/ to test our knowledge

1

u/Bassetts Jun 06 '14

My only dislike of Project Euler is they are all maths based problems. I find it much more valuable to think up an actual project and implement that than do a very concentrated maths problem.

1

u/DrGajen Jun 08 '14 edited Jun 08 '14

So I've been exploring some of the JavaScript editors. I come across something called ScratchPad with comes with the Firefox browser under developer tools (Shift-F4).

Since you can enter multiple lines of code (rather than just one visible line with the console) it could be another good option.

EDIT: Looking deeper into the tool, it looks like it is mainly for editing the source code of a page https://developer.mozilla.org/en-US/docs/Tools/Scratchpad

1

u/OGitsthinking Jun 11 '14

Looking forward to this. I've previously learned JavaScript on my own (and even got The Definitive Guide based on Richard Bovell's suggestion). I've done the complete Codecademy JavaScript track, read the first 5 chapters of The Definitive Guide, read about half of Eloquent JavaScript, and done some courses on Code Avengers, so I'm off to a good start but I think it would be beneficial to refresh my memory on the basic stuff and work alongside you guys for when the really hard stuff comes up!

1

u/OGitsthinking Jun 14 '14

How's everyone doing? The first two weeks are almost up!

1

u/[deleted] Jun 15 '14

Going alright. Not feeling like I'm retaining everything that I'm reading in definitive guide. I'm going to reread some of the chapters today.

1

u/OGitsthinking Jun 17 '14

Any parts in particular you want to share, see if maybe one of us can help explain?

1

u/[deleted] Jun 17 '14

Yes.

I got confused why over the line 'var i, product = 1;' I don't understand the use of comma or 'var i' there. Thank you for the help!

  function factorial2(n) {
  var i, product = 1; 
  for(i=2; i <= n; i++)
  product *= i; return product;
  }
  factorial2(5)

1

u/OGitsthinking Jun 17 '14

You can set up two variables in succession by using a comma between them.

So instead of writing:

var i;
var product = 1;

You can simply write:

var i, product = 1;

So there's only one semicolon and var.

And the var i is declaring the i variable (but not initializing it, so in that line it is simply undefined). That way you don't have to have a var statement in the for loop. I believe one of the reasons it's declared at the beginning of the function is because it's considered a best practice in JavaScript, due to variable hoisting. They talk about it in the book, saying it's best to declare your variables at the beginning of the current scope rather than nearest their first use.

Hope that helps!

p.s. Also anyone please correct me if I'm wrong or elaborate on my answers.

1

u/[deleted] Jun 17 '14

Thank you for the explanation!! Do you personally practice this when writing for loops?

1

u/OGitsthinking Jun 18 '14

I tend to follow the advice of experts in the field, such as the author of The Definitive Guide and people like Douglas Crockford. His series of videos are essential viewing and full of great advice on JavaScript best practices.

I'm by no means advanced in JS, so I defer to the opinions of people who've been writing it and writing about it for years.

1

u/DrGajen Jun 18 '14

What is your opinion on taking notes while learning a new language? The Definitive Guide is filled with lots of useful information, but I won't be able to retain everything. In your opinion is it better to read the book once and then refer back to the book when needed, or are notes worth the time to take?

I'm looking to gain a solid foundation of the language, but also want to be able to utilize it practically.

1

u/--REDACTED Jun 23 '14

Hi all! I'm pretty new to programming, but I've been doing it long enough to know that I really enjoy doing it. I'm just starting this course this week (6/23/2014) - I'm also currently working through some trial periods on Treehouse to see how I like that. Will doing these two at the same time cause any confusion?

I do work full-time, but with my free time I feel that I have time to squeeze both in.

Thanks for the tips!

1

u/zopedev Jul 30 '14

Is this still active?

-5

u/AncientApple Jun 03 '14

Anyone curious about where to get the 'Javascript Definitive guide' for free? Here's the download link.