How to work with javascript

JavaScript — Dynamic client-side scripting

JavaScript is a programming language that allows you to implement complex functionalities 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, or more—you can bet that JavaScript is probably involved.

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

JavaScript is arguably more difficult to learn than related technologies such as HTML and CSS. Before attempting to learn JavaScript, you are strongly advised to get familiar with at least these two technologies first, and perhaps others as well. Start by working through the following modules:

Having previous experience with other programming languages might also help.

After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:

Modules

Our policy on modern JavaScript

JavaScript is an actively evolving language and has changed greatly over the years. In particular, the 6th edition of the language (sometimes known as ECMAScript 2015 or ES6), introduced in 2015, added many new features. At the same time, to maintain backwards compatibility with older websites, old features of the language have been retained, even when they are no longer considered good practice.

We think that the features added to JavaScript in ECMAScript 2015 and subsequent versions enable developers to write more readable, reliable, and expressive code, and that it’s important to learn about them.

The features we teach in this course are stable and have been supported by all major browsers for several years.

This topic contains the following modules, in a suggested order for working through them.

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 JavaScript features in detail, such as variables, strings, numbers and arrays.

In this module, we continue our coverage of all JavaScript’s key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You’ve seen this stuff already in the course, but only in passing — here we’ll discuss it all explicitly.

In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we’ve provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.

In this module we take a look at asynchronous JavaScript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.

When writing client-side JavaScript for websites or applications, you won’t go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other websites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you’ll come across often in your development work.

Solving common JavaScript problems

Solve common problems in your JavaScript code provides a little advice on how to avoid common beginner JavaScript programming mistakes, along with many helpful links to topics that show how to solve common JavaScript programming problems.

See also

The main entry point for core JavaScript documentation on MDN — this is where you’ll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.

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.

An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by Keith Peters.

Found a content problem with this page?

This page was last modified on Jun 30, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

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 on 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 strings, 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.

Found a content problem with this page?

This page was last modified on Jul 3, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник