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:
- We’ll introduce the topic briefly and provide you with a list of things you should pay attention to ("Points to Ponder").
- You’ll be asked to do readings, watch videos, do online courses or otherwise consume content to initially learn the material.
- Every few lessons you will be asked to build a larger project.
- 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
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.
UPDATED: 17.11.2020
- [17.11.2020] Adding
Understanding Error Types.