Hello buddy 👋 , It actually took me a while to understand what to learn first in JavaScript and how to get started, and if you're in the same shoe right now, then this article is for you.
In this episode, I will be introducing you to JavaScript, what to expect and how to get started as a JavaScript developer.
Prerequisites
Before you continue with this introductory article, ensure you:
- Have a working knowledge of HTML and CSS
- Else check out the Skeleton of HTML, CSS and JavaScript
Because you will always see HTML, CSS, and JavaScript.
What is JavaScript
JavaScript is basically a programming language for the web, you can see JavaScript as the official language for web development and the only programming language that allows you to build frontend applications (web interface), backend applications (server+database) down to mobile applications, and machine learning.
This definition only means one thing, and it's that JavaScript knowledge can be applied in multiple fields, and their application also follows the same patterns.
Why Learn JavaScript?
Imagine a website showing the same profile information for every logged-in user, or a button not responding to the action it's labeled, these are properties of static web pages, and a static webpage does not interact with the user because they lack little or no JavaScript (programming).
With JavaScript we can add actions to our web pages, we can define what should happen when a button is clicked or a specific action is being taken or triggered on a web application.
What is a Static Webpage?
A static webpage inherently displays hardcoded contents from the HTML file that won't change based on any user actions.
The contents of the dashboard above can only be updated from the HTML document and not based on the currently logged-in user.
What is a Dynamic Webpage?
A dynamic webpage interacts with the user through triggered actions and a set of conditional rules, the contents of a dynamic web page change based on events and conditions.
The username and profile image are dynamic, which means the dashboard contents change each time a new user logs in.
Getting started with JavaScript
There are a few concepts you should be aware of in order to start creating interactive applications with JavaScript, these concepts are important whether you're interested in using JavaScript for frontend or backend development, mobile applications, or any other area that JavaScript can be applied.
Below are a few concepts you should learn first when learning JavaScript.
1. Learn JavaScript Data Types
Data types are basically the data that can be legally used in JavaScript or any specific programming language.
Just as we have A, B, C to Z as alphabets, and digit 0 to 9 as numerics, similarly JavaScript has a name for each of its acceptable data, which includes a string, number, array, object, undefined, null, and boolean, they are referred to as data types.
The difference between the data types in JavaScript is their syntax, structure, and the operations you can perform with them.
It is important to understand how each of these data types works in JavaScript so that you won't end up performing an addition operation on A, B, C alphabets instead of 0 to 9 numbers.
Learn more about JavaScript data types on w3schools
Check out JavaScript Syntax Profile
2. Learn JavaScript Variables
Variables are like containers that can hold items for later use, we use variables to store any data type in JavaScript so that we can make reference to them later in our code.
A variable can only hold one data type at a time.
- Learn more from Generations of JavaScript Variables article
2.1. Variable Declaration
Variable declaration in JavaScript is all about booking a space (allocating memory) for a data type or value that you're not ready to store yet, it's basically an act of keeping a container to keep a cube of sugar that you're yet to purchase.
There are three major techniques in which variables are created in JavaScript that you need to know, these techniques determine what operation or rules you want to allow for a particular variable you're declaring.
Variable keyword declaration technique includes:
- The
varkeyword - The
constkeyword, and - The
letkeyword
2.2. Variable Initilization
Since variable declaration is the act of keeping space for later use, then variable initialization is the process of assigning or putting the value you're keeping the space for into the declared variable, which then means our container is not empty anymore.
Check out the Generations of JavaScript Variables for full explanations.
3. Learn JavaScript Scope
The term Scope in JavaScript refers to the current context of code, and it determines how variables can be referenced or accessed in the code.
There are 3 main types of JavaScript scopes, which includes:
- Global scope
- Local scope/function scope, and
- Block scope
These 3 scopes provide ways to either secure a variable from being accessed outside or within a particular scope.
- You can learn more about JavaScript scope from Mr. @Tapas Adhikary JavaScript Scope Fundamentals with Tom and Jerry
4. Learn JavaScript Functions
JavaScript functions are like procedures, they contain a set of instructions to be executed or invoked (called) when an event is been triggered.
Functions are capable of accepting inputs and generating output based on the logic in the function.
There are two types of JavaScript functions:
1. Regular function (ES5)
This is the default method of writing functions in JavaScript.
2. Arrow function (ES6)
JavaScript arrow functions came with the release of ECMAScript 2015, also known as ES6, arrow function has a concise syntax and it has some unique features that make it the favorite of several Javascript developers.
Do not bother much about arrow functions if you're still very new to it, you will figure the difference as you code more.
- Learn more about the difference between regular functions and arrow functions
5. Learn JavaScript Hoisting
Hoisting is the next concept to learn when you're done with learning variables scope in JavaScript.
Hoisting is a JavaScript mechanism where variable declarations are moved to the top of their scope before code execution.
This concept will expose you to how JavaScript handles variables in each scope before execution, JavaScript basically moves all the declared variables to the top of every scope whether global or local scope.
You need to know-how var, const, and let works to understand this concept better.
- Here is a detailed article to help you understand Variable Hoisting in Javascript by @Vivek Sharma
6. Learn JavaScript Closures
The JavaScript closure is basically a function inside of another function and this gives the inner function the ability to have access to the variable in the outer function.
- Learn about JavaScript closures here
7. Learn JavaScript Callback functions
A callback is any function that is being passed to another function as an argument (input) and is executed later.
- Learn callback here
8. Learn JavaScript Array and Array Methods.
Array is one of JavaScript's data types that you cannot do without when you're convenient with variables and have a grasp of how functions works then you can proceed to learn JavaScript Arrand its methods.
An array is also a container that can hold items, but unlike a variable that only holds a single data type at a time, the array data type on the other side can store as many collections of different data types at a time.
9. Learn JavaScript Fetch.
Chances are you will not be working with static data forever, learning JavaScript fetch will enable you to interact with backend APIs and perform some HTTPS calls.
10. Learn JavaScript Promises and Async/Await.
While working with Fetch or backend generally, you need a way to resolve failure or success calls from the backend, which might take a while to arrive.
The JavaScript promises is a technique of handling asynchronous operations in JavaScript.
Check out JavaScript Promises - Explain Like I'm Five by @Tapas Adhikary
JavaScript async and await - in plain English, please by @Tapas Adhikary
11. Learn DOM manipulation
The Document Object Model is used to access HTML elements in JavaScript, this concept allows us to interact with the HTML elements directly from the JavaScript code.
DOM can be used to modify the text, color, background color, and other HTML element properties using JavaScript.
You can learn more about DOM manipulation from here
12. Build Projects
The best way to know you've really understood a concept is by implementing those concepts in a project. Ensure to apply all these concepts in a side project as your learning continues.
JavaScript projects you can work on.
- Todo list.
- Count down.
- Tic Tac Toe.
- Pong game.
- Vanilla JavaScript stopwatch.
- JavaScript clock.
- JavaScript calculator.
- A Quiz Application
- A Game Application
- Music App.
- File Converter.
- Interactive Map.
These projects will help you to make use of the JavaScript concepts that you've learned, you can proceed to build more advanced projects with JavaScript when you're convenient understanding how these applications work.
Conclusion
This article covers the important basics of JavaScript that are essential for you to know before proceeding to any of the JavaScript frameworks, I hope this article has helped you to know some concepts to focus on more in JavaScript.
See you in the next one.
Wow, what a journey, I am glad you made it to the end of this article, if you enjoyed and learned something new from this article, I will like to connect with you.
Let's connect on
See you in the next article. Bye Bye 🙋♂️
Top comments (2)
What you’re saying is not exactly true, it is possible and also very much used nowadays to have a static website with user authentication and different data displayed based on the user.
That can be done with zero JavaScript, but instead with server side rendering and POST/GET requests sent from HTML forms. Many sites are built like that and work very well.
That being said, JavaScript is of course a must-learn when it comes to web development that’s for sure, but I just wanted to add that it is possible to have static pages on the client with dynamic content that is generated server side.
Thanks for your input @oskarcodes , this article focuses on showing the reader how *JavaScript * can make a webpage builth with html and css dynamic (no frameworks).
I agree that static pages can be rendered from the server, plus static webpages can have a dynamic component within them, and I also think that is beyond the scope of this article.
Talking about server rending to the reader that is assumed to be a beginner from the begining of the article is really not an introductory article anymore.
And from the example above, the content of the first login page will only change when it is been edited manually (no JavaScript), while the content of the second dashboard will change based on the current user, making it dynamic.
This explanation should help the reader have an understanding of what static and dynamic pages works or looks like, and what differentiate them from one another.