How to get to javascript
How to get to javascript
How to Learn JavaScript Faster – Tips and Resources to Get Started Coding JS
JavaScript is a programming language commonly used for web development, among many other things. It works in conjunction with HTML and CSS to add dynamic functionality to websites.
About 97% of the websites in the world use JavaScript – so you can see that it’s a popular and widely-used language.
JavaScript is the sauce of the web. It is what makes things dance. JavaScript enables web pages to do things like display updated content, show maps that you can interact with, and many other things.
Today we are going to learn how to learn JavaScript faster so that you can command JavaScript as you please and use it effectively in your projects.
What We’ll Cover in this Article
How to Practice Coding in JavaScript
Practicing is what makes you progress. Whether it’s in music, dancing, singing, playing basketball – or coding.
Practicing is really repetitive and can be tiring, but it is what helps us and sets us apart in the long run. It is through the action of practicing and repetition that we are able to be good at all these activities. Coding is not different.
Work through Courses and Tutorials
Courses and tutorials are a good way to learn. You can find various learning materials from a lot of places on the web. If you would like to take a course on a particular programming language, you can find them on sites like LinkedIn, Codecademy, and Udemy.
If you like videos, there are many great channels on YouTube that post coding tutorials for free. My favorite one-stop-shop is freeCodeCamp’s channel.
freeCodeCamp’s channel on YouTube
These channels might focus on JavaScript or include videos on other programming languages as well.
A good rule that I use on YouTube is to check the number of views a tutorial has. This will help you know if it is a good one to follow along with.
Also the length of the tutorial matters a lot. Longer tutorials cover the basics well if you’re just beginning to program in JavaScript.
Try the Free JavaScript Curriculum on freeCodeCamp
FreeCodeCamp’s curriculum is a perfect way to practice coding. It offers small challenges that you can practice and, once your tests pass, proceed to the next step. It almost works like a game without the gaming part.
You can understand how the language works by doing the challenges the curriculum offers. This is really nice for people who like playing games.
Here is an example of what to expect:
First, you will need to Sign in when you are accessing freeCodeCamp. This allows you to save your score/points.
sign in to freeCodeCamp
Here you can select from a variety of free courses. In our case, we only need the JavaScript course, so we select that one:
freeCodeCamp courses
Comment Your JavaScript Code challenge
Now, you will be able to learn as you code. You will also be able to run your tests which are at the bottom left of your screen.
On the right side, you can see that I have completed the challenge.
Attempt of the challenge
Completed the challenge
Keep doing the challenges until you feel comfortable.
How to approach courses/tutorials to avoid tutorial hell
It is easy to fall into the trap of watching tutorial after tutorial – and not really retaining any information. Sometimes these tutorials come one after another like the episodes on a Netflix series.
I’ve been there. It happened when I was learning React for the first time. I followed through an online course. There was a hackathon coming up for which I needed to know React, and I deep dived into the course.
How I enjoyed it. The instructor was great! «How easy is React?,» I said. I went to the hackathon and joined a team. With my new knowledge of React, I told them to leave the front end to me which required React. It was during the implementation that reality hit me. I couldn’t write anything in React.
How I escaped tutorial hell
So I found myself watching tutorials a lot. And the defining moment for me was when I started implementing what I learned by coding along while watching the tutorial. I was able to create a project after watching a tutorial. I then created another one then another one and another one.
I was now ready to try out the projects on my own. Using the projects I created, I would borrow concepts from them like the navigation bar or the footer, and I would implement it in my new project. At the end, I was able to create a new project on my own without the help of tutorials.
Read the Documentation
The ability to read documentation is an underrated but important skill. Reading the documentation can give you a better understanding of the language.
Most tutorials will only teach you the basic things so you can get started programming in JavaScript. But if you fully understand the language and how it works, this can increase your skills ten-fold.
This reminds me of when I was learning how trains work. Well, a story for another day. 🙂
Also, reading documentation helps you understand the best practices of JavaScript. A lot of the time, without knowing best practices, you might fall into the trap of writing bad code that isn’t efficient. This leads you down the rabbit hole of never ending inefficient code.
There are a lot of tools you can use to browse documentation. Some of these include Zeal, DevDocs, and Devbook, which are all free. If you feel that you want to understand your functions better, you can use their search functionality inside the app, and read more about it without having to Google. (Source: Bruno Edoh)
What you will learn from reading the documentation
Sometimes learning through a tutorial leaves you with more questions than you had answered. This is where documentation comes in.
A concept might get introduced by the course instructor that leaves you hanging. Fortunately, you can often learn more about that concept by going to the documentation.
For example, in this beginners course on learning JavaScript by Beau Carnes:
Beginners course to learn JavaScript by Beau CarnesBeau has really brought out the concepts well! But if you feel that you would like to explore variables more, for example, you could go and google «variables in JavaScript».
Alternatively you can Google using this special method: the Search keyword will search the query within the website that you want. Let’s use the MDN Web Docs as an example: «developer.mozilla.org variables»:
Google search of variables on Mozilla website.
When I follow the link, it takes me to the documentation about variables.
Here in the documentation, you can learn what variables are. When I follow the link «Declaring variables in JavaScript»:
And there I can learn a lot more about JavaScript variables.
Var, Let, Const on the MDN web docs.
When I scroll down a bit, I am able to learn more about Data types. Here you can explore more by following their individual links.
Data types in JavaScript
Some best practices you can adopt from reading documentation
The best thing about documentation is that you get answers to questions that you have not asked yet.
You can find all the functions that you are ever going in the documentation. If you skim through it, you might get an idea or two that can be very helpful in your future projects.
Another advantage is that it’ll help you write efficient code. Reading documentation introduces you to better ways of writing your code. This helps you avoid hours of searching on Stack overflow and Google as to why your code doesn’t work.
Contribute to Open Source Projects
Another great way to learn is to contribute to open-source projects.
There are a lot of open-source projects you can learn from and contribute to on GitHub. Some of these projects include:
You-Dont-Know-JS.
This repository will help you learn more about JS at a deeper level.
You Don’t Know JS repository.
You will be able to learn as you contribute. Contributions to open-source can be as small as a typo fix. You can go through the README (which you can find on the repository’s main page at the bottom) to get a better understanding of the project.
Some other contributions you can make include sharing suggestions in issues, helping to write blogs, and also coding.
If you are unfamiliar with the repository, or as a first time user, you can start with the issues labeled as good-first-issues on the issues tab.
Issues tab on GitHub for a repository.
Here is the link to the repository: www.github.com/getify/You-Dont-Know-JS
Make sure you have a GitHub account if you want to clone the repository or you have changes that you have made and you want to make a Pull Request to the repository.
Other projects you can contribute to and with an inclusive community are:
Read through the code of these projects and learn how they structure their code. You can also study the languages and frameworks they use which will help you practice and cement your learning in JavaScript.
The open-source community is also generally very welcoming. If you find a project that you like, give it a try!
How to contribute to open source
To be able to contribute to open source, you only need three things:
To create a GitHub account, go to GitHub’s website.
GitHub’s sign up page.
Here, you can sign up for a GitHub account. After signing up, you sign in with your new credentials.
Sign in page of GitHub.
After signing in, you can now begin your journey into open-source development!
A good place to start is to search for any project that you would like to contribute to. We will use an example of a JavaScript project, hosted on GitHub.
How to find projects to contribute to
In the search bar, I type «JavaScript».
I’ll then select «All GitHub» in my search to search the whole of GitHub. It’s the one currently highlighted in blue.
When I search, it will bring me to this page.
It returns may repositories that I can contribute to, or I can just view their codebase.
There are more than one million repositories on JavaScript. In my case, I’ll select the «Airbnb’s JavaScript Style Guide».
airbnb’s style guide.
By selecting this style guide, it takes me to their repository.
AirBnB’s JavaScript style guide.
A good thing to note, as well, is that this repository is a good place to learn JavaScript. It will teach you the right way of writing JavaScript and also show you the bad way.
Airbnb’s README example code on GitHub.
You can also select the «Issues» tab where you can look for an issue which you are comfortable solving.
The issues tab on GitHub’s AirBnB’s repository.
When you click on it, it takes you to the current issues that the developers of this repository are trying to solve and would appreciate your help resolving.
If the repository is not one which you are comfortable contributing to or it is not beginner friendly, you can check out other beginner friendly repositories like Web development resources or the EddieHub community where you can share resources, learn, and be part of a community.
Being a part of a community is great!
Web development resources repository
Remember to select All GitHub in the search since we want to search the whole of GitHub. Other options are in this repository to search within this repository and in this organization to search within the organization.
Web Development Resources repository search.
EddieHub Community
Still in GitHub, you can search for EddieHub where you can find a community of welcoming developers, ready to help new developers contribute to the open source repositories for free. It has great repositories where you can learn and contribute.
Build Lots of Projects
Building projects really helps you get a grasp of how software works.
Ever wondered how, when you click the mouse or keyboard, something happens – and you always wanted to know how? Making projects helps you understand all that.
The more projects you make, the better you will understand a topic. And the more you’ll satisfy your maybe lifelong desire to uncover how it all works.
Making projects also toughens you up. You become a person who likes solving problems no matter how small or big they are. The ability to face programming challenges and solve issues that arise sells you as a problem solver. This ability is applicable everywhere in life.
«The best way to learn cycling is by buying a bicycle and to start cycling.» Karlgusta.
To start riding a bike, you don’t really read about the bicycle. Sometimes you don’t know the bicycle parts, but you still cycle and learn along the way, if you are curious enough.
It’s also in building projects that creativity meets technical skills. Most industries don’t have a way where you can use your technical skills and your creativity together. But the software industry does.
You will not face the same problems each time you build something, so you will need to be creative to find solutions. The challenges, and the solutions you come up with, are where the fun and satisfaction lies.
It is a fine balance between documentation, tutorials, coding (mostly), and reading other people’s code. Trust your gut in the process.
If you need guidance to boost up your confidence, here are some resources that might be of help.
Resources that can inspire you to build projects
Here are some resources that might be helpful in building your first JavaScript project:
In this video tutorial by Per Harald Borgen, you will learn about creating a passenger counter app using JavaScript. You’ll learn how to create a variable, add buttons, add event listeners, functions, strings, if else statements, arrays, and much more. All this is in JavaScript and its free.
In the same video, there is an even nicer secret gift! Building a chrome extension. Oops! I said it.
2. How to create a counter clock (Free).
In this video tutorial, you will learn how to create a counter clock that resembles a counter clock on an ecommerce site like Amazon.
3. 40 free JavaScript Projects for Beginners
In this article, Jessica shares 40 JavaScript projects you can build to practice your skills as you learn.
You’ll build a responsive navbar, a countdown clock, a platformer game, and many more.
Conclusion
JavaScript is a powerful programming language and it’s a great one to learn if you want to get started coding.
Your ability to read documentation will give you a better understanding of the language. It will also help you in understanding JavaScript best practices.
Practicing coding through the curriculum, learning through tutorials while coding a project, and contributing to open-source will set you apart from your peers. It will also make you a better programmer.
By making projects, you get to understand how JavaScript works and generally how software works. This also helps you unleash your creativity.
I hope you enjoyed reading this article. If you have any questions or suggestions, feel free to hit me up on Twitter.
JavaScript basics
JavaScript is a programming language that adds interactivity to your website. This happens in games, in the behavior of responses when buttons are pressed or with data entry on forms; with dynamic styling; with animation, etc. This article helps you get started with JavaScript and furthers your understanding of what is possible.
What is JavaScript?
JavaScript is a powerful programming language that can add interactivity to a website. It was invented by Brendan Eich.
JavaScript is versatile and beginner-friendly. With more experience, you’ll be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more!
JavaScript itself is relatively compact, yet very flexible. Developers have written a variety of tools on top of the core JavaScript language, unlocking a vast amount of functionality with minimum effort. These include:
It’s outside the scope of this article—as a light introduction to JavaScript—to present the details of how the core JavaScript language is different from the tools listed above. You can learn more in MDN’s JavaScript learning area, as well as in other parts of MDN.
The section below introduces some aspects of the core language and offers an opportunity to play with a few browser API features too. Have fun!
A Hello world! example
JavaScript is one of the most popular modern web technologies! As your JavaScript skills grow, your websites will enter a new dimension of power and creativity.
However, getting comfortable with JavaScript is more challenging than getting comfortable with HTML and CSS. You may have to start small, and progress gradually. To begin, let’s examine how to add JavaScript to your page for creating a Hello world! example. (Hello world! is the standard for introductory programming examples.)
Warning: If you haven’t been following along with the rest of our course, download this example code and use it as a starting point.
Getting Started With JavaScript
In this tutorial, you will learn about different ways to run JavaScript on your computer.
Video: JavaScript Getting Started
JavaScript is a popular programming language that has a wide range of applications.
JavaScript was previously used mainly for making webpages interactive such as form validation, animation, etc. Nowadays, JavaScript is also used in many other areas such as server-side development, mobile app development and so on.
Because of its wide range of applications, you can run JavaScript in several ways:
1. Using Console Tab of Web Browsers
All the popular web browsers have built-in JavaScript engines. Hence, you can run JavaScript on a browser. To run JavaScript on a browser,
Using Node.js
Node is a back-end run-time environment for executing JavaScript code. To run JS using Node.js, follow these steps:
Note: It is also possible to run JavaScript on the terminal/command prompt directly. For that, simply type node and press enter. Then you can start writing JS code.
Run JS code in node
By Creating Web Pages
JavaScript was initially created to make web pages interactive, that’s why JavaScript and HTML go hand in hand. To run JS from a webpage, follow these steps:
Now that you know how to run JavaScript, let’s start learning the fundamentals of JavaScript from the next tutorial.
What is JavaScript?
Welcome to the MDN beginner’s JavaScript course! In this article we will look at JavaScript from a high level, answering questions such as «What is it?» and «What can you do with it?», and making sure you are comfortable with JavaScript’s purpose.
| Prerequisites: | Basic computer literacy, a basic understanding of HTML and CSS. |
|---|---|
| Objective: | To gain familiarity with what JavaScript is, what it can do, and how it fits into a web site. |
A high-level definition
JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third layer of the layer cake of standard web technologies, two of which (HTML and CSS) we have covered in much more detail in other parts of the Learning Area.
The three layers build on top of one another nicely. Let’s take a simple text label as an example. We can mark it up using HTML to give it structure and purpose:
Then we can add some CSS into the mix to get it looking nice:
And finally, we can add some JavaScript to implement dynamic behavior:
Try clicking on this last version of the text label to see what happens (note also that you can find this demo on GitHub — see the source code, or run it live)!
JavaScript can do a lot more than that — let’s explore what in more detail.
So what can it really do?
The core client-side JavaScript language consists of some common programming features that allow you to do things like:
What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.
APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.
They generally fall into two categories.
Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:
Note: Many of the above demos won’t work in an older browser — when experimenting, it’s a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use).
Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:
Note: These APIs are advanced, and we’ll not be covering any of these in this module. You can find out much more about these in our Client-side web APIs module.
There’s a lot more available, too! However, don’t get over excited just yet. You won’t be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that’s why you’re here — let’s move on!
What is JavaScript doing on your page?
Here we’ll actually start looking at some code, and while doing so, explore what actually happens when you run some JavaScript in your page.
Let’s briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).
A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded and executed in the order it appears on the page. Errors may occur if JavaScript is loaded and run before the HTML and CSS that it is intended to modify. You will learn ways around this later in the article, in the Script loading strategies section.
Browser security
Each browser tab has its own separate bucket for running code in (these buckets are called «execution environments» in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.
Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won’t cover in this course.
JavaScript running order
When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let’s return to the block of JavaScript we saw in our first example:
Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code blocks are called «functions») asks the user for a new name, and then inserts that name into the paragraph to update the display.
Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.
Interpreted versus compiled code
You might hear the terms interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don’t have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.
Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code.
JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.
There are advantages to both types of language, but we won’t discuss them right now.
Server-side versus client-side code
You might also hear the terms server-side and client-side code, especially in the context of web development. Client-side code is code that is run on the user’s computer — when a web page is viewed, the page’s client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about client-side JavaScript.
Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET, and even JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our Dynamic Websites – Server-side programming topic.
Dynamic versus static code
The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.
A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.
JavaScript First Steps
In our first JavaScript module, we first answer some fundamental questions such as «what is JavaScript?», «what does it look like?», and «what can it do?», before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key building blocks in detail, such as variables, strings, numbers and arrays.
Looking to become a front-end web developer?
We have put together a course that includes all the essential information you need to work towards your goal.
Prerequisites
Before starting this module, you don’t need any previous JavaScript knowledge, but you should have some familiarity with HTML and CSS. You are advised to work through the following modules before starting on JavaScript:
Note: If you are working on a computer/tablet/other device where you don’t have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Glitch.
Guides
Welcome to the MDN beginner’s JavaScript course! In this first article we will look at JavaScript from a high level, answering questions such as «what is it?», and «what is it doing?», and making sure you are comfortable with JavaScript’s purpose.
Now you’ve learned something about the theory of JavaScript, and what you can do with it, we are going to give you a crash course in the basic features of JavaScript via a completely practical tutorial. Here you’ll build up a simple «Guess the number» game, step by step.
When you built up the «Guess the number» game in the previous article, you may have found that it didn’t work. Never fear — this article aims to save you from tearing your hair out over such problems by providing you with some simple tips on how to find and fix errors in JavaScript programs.
After reading the last couple of articles you should now know what JavaScript is, what it can do for you, how you use it alongside other web technologies, and what its main features look like from a high level. In this article we will get down to the real basics, looking at how to work with the most basic building blocks of JavaScript — Variables.
At this point in the course we discuss maths in JavaScript — how we can combine operators and other features to successfully manipulate numbers to do our bidding.
Next we’ll turn our attention to strings — this is what pieces of text are called in programming. In this article we’ll look at all the common things that you really ought to know about strings when learning JavaScript, such as creating strings, escaping quotes in string, and joining them together.
Now we’ve looked at the very basics of strings, let’s move up a gear and start thinking about what useful operations we can do on strings with built-in methods, such as finding the length of a text string, joining and splitting strings, substituting one character in a string for another, and more.
In the final article of this module, we’ll look at arrays — a neat way of storing a list of data items under a single variable name. Here we look at why this is useful, then explore how to create an array, retrieve, add, and remove items stored in an array, and more besides.
Assessments
The following assessment will test your understanding of the JavaScript basics covered in the guides above.
In this assessment you’ll be tasked with taking some of the knowledge you’ve picked up in this module’s articles and applying it to creating a fun app that generates random silly stories. Have fun!
See also
An excellent resource for aspiring web developers — Learn JavaScript in an interactive environment, with short lessons and interactive tests, guided by automated assessment. The first 40 lessons are free, and the complete course is available for a small one-time payment.