Additional Resources on JavaScript

I’m working the JavaScript section, but I don’t feel it’s really helping me understand JavaScript conceptually. Does anyone have any other good resources for explaining JS? Thanks.

2 Likes

I would search on YouTube and search for introduction to JavaScript. There are lots of great videos on this topic.

Can you describe what it is that is causing to concern?

1 Like

You lucky, I was building a list of training resources for work. Use any that interests you. When I get a chance, I will be making a Github pages website for these and many more training resource links.

You can get a 3-month free subscription to Pluralsight.com by signing up for Visual Studio Dev Essentials.

JavaScript

Code Bootcamps’ Free Prep courses

These Code Bootcamps offer free prep courses covering HTML, CSS, JavaScript, Node.js and Ruby.

  1. Viking Code School
  2. Fullstack Academy
  3. Flatiron School
  4. Firehose Project
  5. Coderbyte.com
  6. General Assembly
  7. Hack Reactor
  8. LaunchSchool
  9. Le Wagon
  10. devCamp by Bottega

i. Tutorials

  1. JavaScript Basics (codecademy.com)
  2. Learn JavaScript (codecademy.com)
  3. Intro to jQuery (codecademy.com)
  4. Make an Interactive Website (codecademy.com)
  5. Learn how to use the SoundCloud API! (codecademy.com)
  6. Learn how to use the YouTube API! (codecademy.com)
  7. jQuery Path (FCC)

ii. Courses

  1. Basics of Programming with JavaScript (pluralsight.com)
  2. Advanced JavaScript (pluralsight.com)
  3. Create HTML5 Apps with jQuery Jump Start(MVA)
  4. Learn JavaScript Properly subreddit (reddit.com)
  5. Preparing for Exam MTA 98-375 HTML5 App Development Fundamentals (MVA)
  6. Developing in HTML5 with JavaScript and CSS3 Jump Start (MVA)
  7. JavaScript Online Training (tutorialspoint.com)
  8. jQuery Online Training (tutorialspoint.com)
  9. Javascript and jQuery (theodinproject.com)
  10. HTML/JS: Making webpages interactive (khanacademy.org)
  11. HTML/JS: Making webpages interactive with jQuery (khanacademy.org)
  12. Intro to JS: Drawing & Animation (khanacademy.org)
  13. JavaScript Beginner Tutorial (htmldog.com)
  14. JavaScript Intermediate Tutorial (htmldog.com)
  15. JavaScript Advanced Tutorial (htmldog.com)
  16. JavaScript Jumpstart (fullstackacademy.com)

iiii. E-Books

  1. You-Dont-Know-JS Book Series (github.com)
  2. Eloquent JavaScript (eloquentjavascript.net)

iv. References

  1. JavaScript reference (MDN)
  2. Using jQuery Core (jquery.com)
  3. jQuery Events, from jQuery Documentation (jquery.com)
  4. jQuery AJAX, from jQuery Documentation (jquery.com)
  5. jQuery API (jquery.com)
  6. JavaScript Snippets (css-tricks.com)

v. Articles

  1. Some Important jQuery Methods (code.tutsplus.com)
  2. Chrome Dev Tools (developer.chrome.com)
  3. Function Declarations and Expressions (JavaScript.info)
  4. Working with JavaScript Dates and Times (javascript.info)
  5. JavaScript Prototype (javascriptissexy.com)
  6. JavaScript this (javascriptissexy.com)
  7. JavaScript Objects (javascriptissexy.com)
  8. You Might Not Need jQuery (youmightnotneedjquery.com)
  9. Three ways to define a JavaScript class (phpied.com)
  10. JavaScript hacks explained (mdnbar.com)
  11. Four Things Web Developers Need to Know about Debugging in Visual Studio 2013(credera.com)
  12. Using Visual Studio to Debug JavaScript in IE(codeproject.com)
  13. Visual Studio 2013 can’t debug javascript in cshtml (stackoverflow.com)
  14. QuickBytes: Visual Studio 2013 and JavaScript Debugging(sumitmaitra.wordpress.com)
  15. I Love My IIFE (gregfranko.com)
  16. Immediately-Invoked Function Expression (benalman.com)
  17. 12 Simple (Yet Powerful) JavaScript Tips (javascriptissexy.com)
  18. Javascript design patterns and IIFE (codeproject.com)
10 Likes

I got stuck too…felt like I had a bunch of bits and pieces, but wasnt sure really how they connected together or what those bits and pieces actually were for that matter. I hit pause and did the codeacadamy course on javascript, only took me 2 days to complete it but came away feeling sooo much more enlightened. Instead of javascript feeling like a dark room, I now have a flashlight. Or maybe pen light. Better than where I was before anyway :laughing:

Im now reading the You Dont Know JavaScript book series on github, and that is pulling things together even more. Very tough to get through but every so often I actually get what hes talking about, and for everything else, Im at least getting exposed to the terminology so that it will be familiar to me. Ill def need to read this series over again at some point.

2 Likes

It’s nothing specific, exactly–I just don’t feel I “get” what JavaScript is for. I’ve gotten some things from my local library that are helping. Thanks!

Thank you!! I will definitely check these out. These are sure to be helpful.

I will check those out, too. Thanks very much!

Actually, I should say that I DO get what it’s for, but I don’t quite get how all the pieces fit together. I feel like I’m back in freshman Algebra class. :slight_smile:

I totally get what you mean… before I found FCC I took the Javascript path on Pluralsight (which included classes by the instructor was actually the guy who wrote the You Dont Know Javascript books) and as I got into the Intermediate part of the path, I felt like all I had were bits. Okay, I know what an array is…okay, I get it loops…conditions, awesome, but…how do I write a script in Javascript?!! lol Thats what sent me on the hunt and how I found FCC

Irony, now that Im learning more about it, Im realizing oh…those bits and pieces are literally it…the whole thing turned out to be a lot simpler than I realized it was…I just needed that one last bit of info oh how they all work together and not just what they were independently.

1 Like

Programming is the process of using technology to solve a problem, big or small. When you have a problem, you don’t look at it in how do you solve this big complex problem.

You take the big complex problem and broke it into many smaller problems. Then, you go about solving the smaller problems, which in turn will solve the bigger complex problem.

All programming languages have the same little bits.

  1. Storing data in a container.
  2. Using loops to examine and process the container.
  3. Using conditionals and switches to control the process flow.
  4. At the end, you have solved a problem.

The hard part is truly understanding the problem you are attempting you solve. There are many companies who didn’t fully understand the problem, choosing the wrong path and solution. They end up failing wasting money and resources, because they didn’t understand the problem needing to be solved.

4 Likes

That part I got…it was more of trying to comprehend how the parts of the formula go together. Like as a complete beginner, learning what a function, array, loop, conditional, etc was,with no direction to how they connect together was where I felt directionless… Sort of like …explaining what flour, butter and milk is and finishing up with…And thats how you make bechamel sauce!! lol

Of course now that Ive fille din that blank, it makes sense in a…oh jeez of course Ive got this…kind of way. But I learned that through doing the exercises here on FCC and also taking the course on CodeAcadamy. But yeah, just learning what the parts of code meant without any kind of full picture to connect them together left me feeling lost…

1 Like

Yep–I’m a conceptual learner and learning in little chunks sometimes makes me feel lost. But “little chunks” is the nature of coding, I guess.

Yup, same here… Im seeing though how it really is like learning a new language…just a matter of learning to see and understand things in a different way. Im doing the CS50x course now, and they are teaching C. I was kind of concerned about learning that seeing how Im having enough trouble with JavaScript, but there are so many similarities in the logic that it hasnt been any issue at all… as a matter of fact, doing the coursework for C has been helping me with my JavaScript.

1 Like

Ah, I have been there before. I would say the best way to understand how it all fits together is do small projects. The more you work on build things the more sense it will make. In a broad sense programming is solving a puzzle or a question.

Lets say I ask you to code a guess the number game. The game makes use of a random number between 1 and 10. The number is generate but not shown. As a player I have 3 tries to guess the number. If I fail to guess the number I lose, If I guess before my 3 guess are up I win. Also each wrong guess will tell me “to high” when I am over the number or “to low” when I am below the number.

Now look at it from the point of view of the programmer. You will need a few things to make this app.

  1. need to generate a random number and store it in a variable.
  2. need a user input
  3. need to send a response
  4. need to track the number of tries
  5. app runs until the number of tries have been exhausted or the guess is correct.

Now using JavaScript, html and maybe some CSS make this game. Think about how it will look. grab some paper and draw it.

What does the page look like?
How does the user interact with it?
How do they see the response (to high/low, you win, you lose)

Now make what you have drawn in html, do not worry about function just yet, just make the interface so you can see it. Look at it and think about how a user will interact with it, make sure it makes sense for the user.

You will have the random number generated when the page loads in the browser, but should it display a I’m ready message or just wait for the users first guess?

How does the user enter a value? Text field? select drop down? radio buttons? a slider?

How is the guess sent to the code? A button that read Guess? when the for value field loses focus?

do you show failed guesses?

What I am trying to show here is programming is about taking a problem and breaking it down into smaller and smaller chunks which can then be made into a function and each function should perform 1 simple task. So thinking about the app above you need one function to get a random number between 1 and 10. This random number will need to store the number in a variable and it should do this when the html page is loaded.

So if you do some searching you will see a few way to do this and one of the popular ones is jQuery.

in script tags you can add the following

$.ready(function(){
});

this will run after the html page is fully loaded and is ready.

inside of that add

$.ready(function(){
var number = 1 + Math.floor(Math.random() * 10);
});

and there we go. now you have code that will make a random number between 1 and 10 and will work on the html ready, not a on page load but close enough.

Now what is the next thing to add?

and you keep doing this until you complete all of the parts (functions, events, html, css and logic) that will make the entire app.

I am skipping over a lot, but I just want to give you a “how it fits together” I hope you find this helpful.

1 Like

Thanks! I think what I’m finding is that JavaScript is simply compiled of small parts that fit together in different ways–and that’s necessary since it’s interactive.