Skip to content 
A basic overview of JavaScript will allow you to develop interactive web sites that will engage the end user.
You have probably experienced a site that reacts to some event without reloading the page. A drop down menu shows up, a form validates your input, a modal dialog box appears. That is JavaScript at work. While HTML provides a structural layout for a page and CSS adds visual appeal, JavaScript is what makes a page come alive. It is the difference between a static brochure and a dynamic web page.
If you are just beginning, JavaScript may appear daunting. There is a great deal to learn and the environment is constantly evolving. However, the basic ideas of JavaScript are much more accessible than you may think. Once you understand several of the elementary concepts of JavaScript, you will begin to connect the dots and understand how everything fits together. Below is a review of the top five elementary concepts that will get you off to a strong start.
1. Variables: Holding Data
In its most basic form, JavaScript is about managing data. In order to manage that data over time, you need to be able to hold onto it somewhere, and that is exactly what a variable is. A variable is essentially a named container for data.
You create variables using special words such as let, const and (in earlier versions of the language) var. At present, focus on let and const. Use let when you wish to alter the value of a variable later; use const when you wish the value of a variable to remain unchanged.
Data can be placed in variables in many forms – numbers, text, true/false values, and even lists of items or complex structures. What makes variables so useful is that you assign a meaningful name to each piece of data, making your code readable and understandable. For example, instead of having to remember that #ff0000 is the hexadecimal code for the color red, you could simply create a variable called “primaryColor” and store #ff0000 in it.
Variables are the basis of everything else. Without variables, you would have no way to keep track of anything as your program executes. Whenever you need to keep track of something, whether it is a user’s name, a score, a selected item, you will turn to a variable.
2. Functions: Reusable Sections of Code
Once you have variables holding data, you need to have a way to perform operations on that data. That is where functions come in. A function is a reusable section of code that performs a certain task. Once defined, you can invoke it anytime you need that task performed.
Think of functions as recipes. A recipe is a list of instructions that describes how to prepare a particular dish. You can follow a recipe at any point to make that dish again. Similarly, a function is a list of instructions, and you can follow those instructions at any time you want to perform that operation.
Functions can accept input (parameters), and can output values. This makes them very versatile. You could write a function that accepts two numbers and returns their sum. Or a function that accepts a user’s name and returns a custom greeting. Once you write it, you can use that function numerous times in multiple locations.
Functions are also a tool for organizing your code. Rather than writing one large script that does everything, you can divide it into smaller, specialized functions. This makes your code easier to read, to test, and to debug.
3. Control Flow: Making Choices
Programs would be quite dull if they were nothing more than linearly executed scripts that always executed the same code every time. Control flow is what allows your code to decide what to do and to repeat certain tasks.
One of the most common ways to decide what to do is with if/else statements. You evaluate a condition, and if that condition is true, you execute one block of code. If the condition is false, you might execute a second block of code. This is how you deal with different scenarios, showing a welcome message if a user is logged in, and showing a login form if they are not.
To repeat a task, you have loops. A for loop will allow you to execute the same code a specified number of times. A while loop will continue executing the same code until a condition becomes false. Loops are necessary for dealing with lists of data, such as displaying every product in a shopping cart.
Control flow is what makes your programs react to different circumstances. It is the logic that determines what occurs based upon user input, data values, or other criteria.
4. The DOM: Interacting with the Page Structure
JavaScript, which is running in a browser, has access to a component of the browser known as the DOM, the Document Object Model. The DOM is a tree like model of your HTML page. Every element, every attribute, every string of text in your page is represented as a node in the tree.
Using JavaScript, you can interact with the DOM. You can locate elements, examine their contents, modify their appearance, insert new elements, or delete elements. This is the mechanism that supports the creation of dynamic web pages.
When you click a button and a menu appears, JavaScript likely applied a style rule to make that menu visible. When you submit a form and see an error message, JavaScript likely created that error message and injected it into the DOM. The ability of JavaScript to interface with the page structure is what enables the dynamic nature of web pages.
Learning how to manipulate the DOM involves understanding how to select elements by id, by class, by tag name, etc., as well as how to modify them. Once you grasp this, you will be able to cause your pages to react to user activity in real time.
5. Events: Reacting to User Activity
Variables hold data, functions help you organize your code, control flow allows you to make choices, and the DOM is the representation of your page. But how do you combine everything? That is where events come in.
An event is a user activity that happens within the browser – clicking a button, pressing a key, submitting a form, loading a page. JavaScript can listen for these events and execute a function when an event occurs. This is what underlies interactivity.
You attach an event handler to an element, determine what kind of event you are interested in listening for, and indicate what function to run when the event occurs. When a user clicks a button, your function runs. When they enter a value into an input field, another function runs. This results in a highly interactive and responsive experience for the user.
Event based programming is a different way of thinking. Rather than your code executing from top to bottom and doing the same thing every time, it is idle, waiting for user activity. When something happens, your code springs to life, and then waits again.
Combining Everything
With the above five ideas (variables, functions, control flow, the DOM, and events) as your foundation, you will have enough tools to begin developing surprisingly sophisticated interaction systems.
Begin with the basics. Create a script that modifies the text of a heading when a button is clicked. Then extend it. Include a counter that records the number of times the button is clicked. Next include a reset button. Each step builds upon the previous steps and utilizes the same underlying concepts.
As you progress, you will discover additional subjects such as asynchronous coding, APIs, frameworks, and tools. But everything builds upon this foundation. Once you have mastered these five ideas, you will feel confident to explore whatever comes next.
Introduction to JavaScript Core Concepts Checklist
Below is a brief checklist that you can reference during your introduction to JavaScript.
Know the basics of variables and data types. Understand the difference between let and const. Familiarize yourself with strings, numbers, booleans, arrays, and objects.
Get started writing functions. Begin with simple functions that take parameters and return values. Then try functions that change the appearance of the page.
Learn to use conditionals and loops. Create if statements to support handling different conditions. Use loops to process lists of data.
Experiment with the DOM. Find out how to choose elements and change their attributes. Attempt creating and deleting elements.
Write event listeners. Attach click handlers to buttons. Handle form submissions. Create interactive pages.
For deeper explorations of any of these subjects, the MDN JavaScript Guide is the best resource available. It is complete, accurate and totally free. An additional resource you may find helpful is JavaScript.info, which is a structured, contemporary tutorial for the JavaScript language.
Every expert was once a novice. JavaScript is a language, and like any language, it takes practice to become proficient. Develop small programs, build incrementally, and don’t be discouraged if you make errors. That is how we all learn.
New to HTML? Start Here: HTML Tutorial for Beginners: Your Complete Introduction to HTML Basics
New to CSS? Start Here: CSS Introduction: Master 5 Core Concepts Easily
[INSERT_ELEMENTOR id=”122″]
