Introduction to JS (v1)

How this course will work

JavaScript is the future of the web. More and more of the logic is making its way to the client side in order to facilitate lightning fast user experiences. Javascript is even moving to the server side with Node.js. That’s why in this course we’ll be diving deep into it to make sure you come out with a good understanding of how it works.

You’ve already completed the Web Development 101 course, right? Good, because now we’ll be moving at warp speed into new frontiers. This section will cover a lot of ground and your brain may meltdown a few times, but don’t worry, that’s just a flesh wound. Patch ‘er up and keep going! When in doubt, build something.

The Path

So how is this course set up? It starts with a deeper look at the basics. You should, however, already have completed the Web Development 101 , specifically the Front End Section section before starting this course.

The last thing you’ll do is a final project which integrates everything you’ve learned in all the courses of this curriculum. This is the kind of project that you’ll be telling employers all about and a great chance to prove that you’re now, officially, a serious web developer.

Format

There’s a lot to cover, but it’s been broken up into bite-sized lessons and their accompanying projects. The projects will give you a chance to apply what you’ve learned and to show what you’re capable of. After a few of them, you’ll really start getting the hang of things.

In each lesson:

  1. We’ll introduce the topic briefly and provide you with a list of things you should pay attention to ("Points to Ponder").
  2. You’ll be asked to do readings, watch videos, do online courses or otherwise consume content to initially learn the material.
  3. Every few lessons you will be asked to build a larger project.
  4. Finally, we’ll include additional helpful resources and other potentially useful tidbits at the end of each lesson.

Enough talk, get learning!

JavaScript – An Introduction

Visit the web page JavaScript For Cats – An introduction for new programmers and start learning about the basic concepts of JavaScript.

Here are some of the basic concepts of the language that you’ll become familiar with after finishing this course:

  • The Browser’s console
  • Strings
  • Values and variables
  • Using functions
  • Built in JS functions
  • Download new JS functions
  • Writing new functions
  • Loops
  • Arrays
  • Objects
  • Callbacks

This introduction is one tough cookie, so take a break before diving into it, grab yourself a cup of hot tea or coffee, open up your code editor and let the journey begin!


Watch the following introduction to JavaScript, by Harvard’s CS50 team. Duration: 50 minutes

Do you have any questions regarding the concepts and code presented in the videos? Leave your questions and comments on the comments section at the bottom of the page.

Understanding Error Messages

Understanding JavaScript error messages makes developing easier.

Let’s get familiar with the most common ones:

  • TypeError: This occurs when some value is not the type it’s expected to be. For example trying to call a function that actually isn’t a function because it is undefined:
let notAFunction = 52;
notAFunction();

Uncaught TypeError: notAFunction is not a function

  • SyntaxError: This occurs when the engine encounters syntactically invalid code. A syntax error will also stop the whole file from executing. For example missing an ‘=’ when assigning values to variables or curly braces without an if, for, while, etc.
let someVar 5;

Uncaught SyntaxError: Unexpected number

  • ReferenceError: This occurs when code refers to a value that does not exist in the current context of execution. It can also be thrown by assigning a value to an undeclared variable. For example trying to access a variable from outside a function.
console.log( ghost );

Uncaught ReferenceError: ghost is not defined

Source: JavaScript Engine Errors Explained by Frontend Dude

Practice: Can you create 6 examples that will 2 of each error type?

Exercise

Create an account at Exercism.io, go to the JavaScript track and solve the first 3 exercises: Hello World, Two Fer and Resistor Color. Paste the solutions in a private GitHub repo and submit the URL in the Quiz below.

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 17.11.2020

  • [17.11.2020] Adding Understanding Error Types.