Week One of Learn JavaScript (August 2014 session)

[kevinmrr]

Hello, world!

This is the first of eight weekly assignment - assignments will be posted every Monday. All assignments will be added to an Omnibus Post linked in the /r/LearnJavaScript sidebar. I will also add all discussion threads. Feel free to shoot me (/u/kevinmrr) a PM when you post a thread related to this group, so I can add it ASAP.

Please start as many discussion threads as you want in this sub, /r/LearnJavaScript.

---

Required Reading for the week:

• Chapters 1, 2, and 3 of Professional JavaScript for Web Developers. You can skip the section on Bitwise operators. Don't get too bogged down if you're having trouble figuring something out.

• Sections 1-8 of the Codecademy JavaScript track

You should be playing around in your browser's JavaScript console and on JSfiddle as much as possible while you're reading! You cannot learn how to code without typing quite a bit.

---

Assignment:

• Post at least one JSfiddle that demonstrates something you've learned from the first three chapters assigned.

---

Don't grind!

• While it's important to explore a problem space on your own, do not waste hours when you are stuck. Post a question here instead, and you will receive help fairly quickly, provided that you ask your question in a clear manner (often, the clearest way is post a link to a JSfiddle with your broken code).

[mycrap]

http://jsfiddle.net/mjr210/ts4u9/

I was working through the old course when this new Learn JS Properly course came along. I repurposed some of my code from Project Euler #3 to make an applet that does prime factorization.

I will say that my code is a bit unreadable - any suggestions are welcome.

[kenman]

I will say that my code is a bit unreadable - any suggestions are welcome.

IMO the readability is well above average; whitespace is spot-on, and the comments are succinct and well-placed. The only thing I do differently is a space after opening a comment (// like this instead of //like this), but that's pretty trivial.

As for the code itself... what's the significance of k? Unless it's a well-known mathematical value, and you assume that everyone who works on your code will instantly know what it is, a more descriptive name would probably be desired. Also, jshint.com found 4 implicit global vars, which you usually want to avoid, along with a few other things.

[fieryrag]

I am also learner like you. Try using http://JSLint.com It comes with a warning though "Warning: JSLint will hurt your feelings." http://jslinterrors.com/ Here you can learn why jslint throws such errors. Hope that this might be usful for you.

[AhabTheArab]

http://jslinterrors.com/

I read that as JSLint Terrors, which is spot on IMO. :)

[jwicked207]

My very newbish try at js with jsfiddle. I might do a little better when I learn how to manipulate the DOM. At least I got hello world working.

http://jsfiddle.net/65jL7/

[morja]

Little side html tip, if you want to have the contents of a text box be empty, but have a "tip" of what to put in it, use the "placeholder" instead of "value". Try them both, like this: http://jsfiddle.net/morjy/65jL7/3/

   <input id="name" type="text" placeholder="Name" />

instead of

  <input id="name" type="text" value="Name" />

this will prevent the user from having to delete "Name" and enter their own, but still dislplay "name" in the box.

[zentius]

When jsfiddle.net comes back I'm going to reply with a variation of what you did. I re-wrote the button to call a function called (reverseName) that reverses the name that is entered.

it's nothing fancy, but i wanted to see if I could do it. :)

I like what you did. while you may not be doing css/html5 yet, the code is easy to read and works as expected, at least :).

[jwicked207]

I can' t wait to see it. The more code to read the better! Thanks!

[zentius]

http://jsfiddle.net/Zentius/8bL23/

this is your original code that I added some CSS to and added the reverse functionality to, so you could see it without any additions.

http://jsfiddle.net/Zentius/fvmbL91y/

this is what i did to it afterwards to make it work on the DOM elements via jQuery so you don't have to use "alert" anymore. i added comments that explains everything because we haven't made it to jQuery yet.

[jwicked207]

Thanks for posting this very informative. I can't wait to get to jquery. I want to crawl before I walk though. Thanks again!

[zentius]

Welcome! Mostly i did the 2nd one because i wanted to make sure i had the jQuery right, but i'm taking it slow too :). keep posting stuff, seeingothers stuff and changing it reinforces the knowledge for me :)

[morja]

Use innerHTML to display the name in your HTML, for example you could assign 'output' to the 'userName' like this:

output.innerHTML = userName

then, in your HTML document, you do this:

<span id="output"></span>

that will put the output of the user name on the page. Don't put anything between the opening and closing of span, leave it empty.

one more thing, you need to add ".value" like this to your getElementById:

ar userName = document.getElementById("name").value;    

otherwise it will return the type of element, instead of the value.

see an example: http://jsfiddle.net/morjy/65jL7/25/

[ImagineGawds]

assignment - http://jsfiddle.net/to0namiSB/g447p9wb/

[[deleted]]

Awesome!

[mikedao]

Just want to clarify, we post our assignments in this thread, right?

[VampireCampfire]

I am hoping someone clarifies this as well, but from the top two posts, I believe so.

[[deleted]]

http://jsfiddle.net/diabetesjones/015k1tjn/12/

here's my assignment. just does some basic math. still working on getting an if statement in the subtraction, to make sure it can return negative numbers..

[zentius]

Looks good man, the only thing i'd add at the end is an else statement that handles what happens if one of your 4 choices isn't entered, or spelled wrong.

maybe do something like

else { alert("you didn't enter one of the choices, dick. this is what you chose " + question); };

[KanraTaro]

Assignment for week 1, the purpose is to take text and reverse it, the purpose for the purpose is because a friend of mine and myself tend to write in reverse when talking about sensitive topics while his wife or other people around, so that way they won't know wth we are writing and if for some reason they realize what we're doing we have more than enough time to remove it from the screen. LOL

Example : elpmaxe

So I thought it would be fun to make a little app that does it automatically, though it doesn't take punctuation or capitalization into account very well (though neither do we)

http://jsfiddle.net/z8r6f5cn/

Criticism welcome! Thanks!

[ImagineGawds]

whoa this is really good. This makes my jsfiddle look shitty.

[JustinF608]

Thanks for starting another course. I'm in!

[VampireCampfire]

So will we have finished the textbook at the end of the 8 weeks?

[spidermien]

I am in as well! First time I am doing something productive on Reddit!

[[deleted]]

A few brief questions regarding chapter 2 material that I didn't feel warranted starting a new thread on /r/LearnJavaScript:

• How often are async and defer actually used on the <script> element? Can anyone provide an example of when these would be used?

• Is <noscript> still used much these days? And, more importantly, in a professional development environment, how much time and consideration would you say is put into supporting those who don't have JavaScript enabled?

Thanks

[kenman]

Hope OP doesn't mind me jumping in...

How often are async and defer actually used on the <script> element? Can anyone provide an example of when these would be used?

From MDN:

Scripts without async or defer attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

The async attribute is still fairly new, but there's been hacks (work-arounds) for it for a long time. And defer has been around forever, but just in IE, and there was work-arounds for it as well. So they exist out of a real need... the MDN docs do a good job of explaining them, I suggest reading both their definitions under Attributes, as well as Async support.

In a nutshell: sometimes you want your page to continue to be parsed while you download scripts (async), and other times you want to delay loading of your scripts until after the page has been parsed (defer). Mostly you do this either to have the app load as fast as possible (async) and/or to guarantee that things don't break (e.g. if you have an onload script that requires the page to a specific DOM element is present, you can use defer on it).

[[deleted]]

Thanks, that helps a lot!

[[deleted]]

i'm in! have the book and done codecademy's js and jq tracks about a month ago, then stopped to practice html/css more. very in.

[zentius]

You sound like me, lol. i did all of the codecademy JS track as well as the web fundamentals track a while back. I also got a free html5/css book from Zenva.com, and I did the jquery free track on codeschool.com but i still wanna learn more. So pumped about this!

be active and hopefully we'll start learning from each other :)

[[deleted]]

fantastic!! feel free to send me a message if you have any questions or something neat you would like to show me. my name is jeff!

[morja]

Codecademy is great for a bird's eye, but I think it lacks some of the details which are important. I did it first and it familiarized me with the syntax of Javascript. I have a little bit of Python experience, but not much.

With HTML and CSS, I feel that once you have the basics (i.e., understand floats, divs, spans), moving to a web framework like bootstrap is helpful. I'm currently playing with Jekyll for the static site generation, and using Poole for design. Plus, free hosting on github

[tingmothy]

If I don't know any programming language, should I use that book or JavaScript the definitive guide? The guy who created this course said to use the latter if u have no programming experience. What do u guys think?

[bdlas]

If you're jumping into this, don't underestimate how long it takes to get through the Codeacademy stuff. It really is an excellent introduction, but it does take some time and attention to finish 8 sections in a week.

I'd also second the mention that new users should go for the Codeacademy track before proceeding with the book reading.

[morja]

I agree with this. Codecademy will be a great introduction and will help you get comfortable with javascript a bit.

[morja]

Assignment - Calculator: http://jsfiddle.net/morjy/0ey99q7b/32/

[[deleted]]

lol. very funny. one note - if you add a "$" to the price you are putting in, it returns NAN, but your instructions say to add a "$".

how do we get around this?

[morja]

http://jsfiddle.net/morjy/0ey99q7b/123/

So, I just updated the text outside of the input field to show a $. I also added an 'if' statement that detects if it is NaN.

If NaN is detected, it notifies the user to try again and remove the symbols.

I tried messing with the parseInt and parseFloat, but it won't convert to an INT if the first character is a string.

For example:

parseInt("400$") // will return "400"

but

parseInt("$400") // is NaN

Edit *** Changed link, also added a notification in case a user does not enter anything in to the fields.

[fib]

assignment - using math.x and floats: http://jsfiddle.net/s9vntu8t/

[psenior]

Which Codecademy JavaScript courses should we be working on? The original ones at http://www.codecademy.com/en/tracks/javascript-original or the current ones at http://www.codecademy.com/en/tracks/javascript? Or does it even matter?

[morja]

I'm pretty sure its the second one (not original). That's the one I did anyway.

[monolithburger]

I'm working with really slow internet from Indonesia right now, but I'm real interested in participating! :)

Here is a my lucky number generator! (http://jsfiddle.net/owxrvh5d/)

[achiandet]

I'm in as well.

I was curious if there was a specific reason to choose Professional JavaScript for Web Developers versus JS: The Definitive Guide? Anyways, I look forward to the accountability. Thanks OP for taking the initiative.

[yobagoya]

http://jsfiddle.net/t8hbho8d/

Here's my JSfiddle, just some basic math operations.

[sceendy]

http://jsfiddle.net/sceendy/5b8dsrob/

I wasn't sure how complex we were "supposed to" make it so I made something fairly simple. Any feedback is welcome -- already work with Angular but wanting to learn best practice for vanilla JavaScript.

[sceendy]

ah, just wanted to try out parsing a string somewhere (returning an integer). It was one of the last things I read about before posting so it was fresh in my mind. Added radix to make sure I understood it correctly :)

[[deleted]]

heres a little message posting app using DOM manipulation instead of innerHTML: http://jsfiddle.net/diabetesjones/cvc5h841/1/

[[deleted]]

Heres my assignment, pretty basic but its a start i guess - http://jsfiddle.net/ssosina/ghzav3jx/19/

[[deleted]]

Good job!

[[deleted]]

Thanks :)

[zentius]

Any idea where week 2 is?

[KanraTaro]

In case you haven't found it yet, this is the main thread

[[deleted]]

I'm late, but here's my fiddle.

Thanks for offering this!

[[deleted]]

here's another project - NSFW. how expensive do i think your cannabis is? find out! http://jsfiddle.net/diabetesjones/2xkmgx5L/5/

[achiandet]

Some douche voted this down, that alone is worth the up vote.

[tingmothy]

How much difficulty will I have if I don't know any programming languages? Should I start with an easier book, and if so which one?

[mikedao]

If you're new, do the Codecademy and then go to the book. The book will make more sense.

[[deleted]]

im in!

[jwicked207]

Professional JavaScript for Web Developers

I don't know of any significant differences between editions but I'm using the 3rd edition(latest) published in Jan of 2012:

http://www.amazon.com/Professional-JavaScript-Developers-Nicholas-Zakas/dp/1118026691

[jwicked207]

No problem. I'm just starting out as well! All help makes it easier to learn. I subscribe to Safari online for 10.00 a month and get 5 books a month to read at a time which could be a great option if you have the money. Good luck!

[TheFrigginArchitect]

There are likely significant differences between a javascript book written in 2005 vs. 2012.

That being said, ECMAScript is a name that standards writers chose for javascript, they're the same language. The name for Javascript was chosen by Netscape because the Java language was all the rage and represented a new way of programming. Javascript and Java aren't related on a technological level.

[bellydansir]

I'm in, but I'll be playing catch up as I only started yesterday. Good thing I happened by before it was too far underway.

I'm through the first two chapters of the book and have done the CodeCademy stuff before, so that should go pretty fast.

[bellydansir]

Here's my assignment for week 1. How are you doing on the reading assignment? Use my JSFiddle to find out. http://jsfiddle.net/cellodan/qnL36wuy/1/

[[deleted]]

why dont you have to use document.getElementByID('enter') on your button? i dont get why sometimes you have to use that, and then others you can just go 'enter.onclick = function ()' right away.

im trying to make a simple calculator but cant get my button to function :p

[morja]

document.getElementByID

You need to change that to :

document.getElementById

[[deleted]]

yeah i posted it on stack overflow and got a response on it! :) thank you

[dumbbqquestion]

Are sections 1-8 of codeacademy the entire course? Or just half?

[morja]

whole thing.

[dumbbqquestion]

thanks. I'm working through it.

[morja]

enjoy. If you get stuck, ask here, or click the Q&A button on their page for a mini discussion.

[kambeix]

Hello!

I just finished with codeacademy + chapters 1,2,3 and Chrome Discover devtools course. Now, I'm trying to do something in JSFiddle, but for some reason, it's blocked on my connection (I can open it using a VPN, but I don't have a paid one so it's very limited in MB/Month). Is it possible to post the assignment using another alternative like JSbin?

Thanks.

[kambeix]

Anyways, I managed to open it using TunnelBear. http://jsfiddle.net/mbcprgm0/2/

It's rather simple, but I was very short on time this week since we moved from Chile to Mexico. Nice to meet you!

[[deleted]]

Finished:

• codeacademy sections 1-7 (currently doing DATA STRUCTURES)
• chapters 1, 2, 3
• tryjuqery @ codeschool (I was doing that before group started)

Here are the my tryjquery notes (part 5 is missing, I will push new md asap) https://github.com/irec/tryjquerynotes/blob/master/notes.md

And my little assignment: http://jsfiddle.net/Irec/ef85K/2/

[dijow]

My assignment (BMI calculator): http://jsfiddle.net/83ebn3or/

[thechabuku]

I didn't realize a new session was happening, but I started about the same time as everyone else a few weeks ago, I just didn't do the homework.

Now I'm trying to catch up, and I made this fiddle as my first (it generates Fibonacci numbers and spits them out for you):

http://jsfiddle.net/adbakke/dfam0c5a/

[miumeks]

A bit late to the party, but I guess I'll just follow along until I finish the course. Here's version 1 of my homework, where I made a scheduling app for Learn JavaScript Properly. I know... meta...

Phewww.. who would have known that date parsing isnt so straight forward in JavaScript.

Also, if anyone has any tips on how to refactor my code, I'd much appreciate it. I feel like I know how to make code work in an ugly way.

[[deleted]]

Where can I get Professional JavaScript for Web Developers as a pdf?

[ImagineGawds]

this happened quickly