JavaScript Home

In this part of the HTML5 course you will learn and practice JavaScript language.
JavaScript is exciting language. However ...

JavaScript is hard to learn because it seemingly violates a ton of the rules you’ve previously learned while working with a different programming language.
So, if you’re new to coding and feeling overwhelmed by JavaScript, know that you are not alone.

About JavaScript

Why? JavaScript is the required language for Web programming. It is one of the three core technologies of Web development: HTML is used to describe the content, CSS is used for presentation, JavaScript is used for interactivity. JavaScript makes it possible to make HTML document dynamic, meaning you can change the HTML document while it is being displayed in the browser.
Frameworks/libraries like React and Angular are 100% based on JavaScript. You must to master JavaScript before you start using such frameworks/libraries.

Some Facts

JavaScript was developed by Netscape in 1995 to create products and applications that run in a browser.
Originally, it was called LiveScript but due to the popularity of Java, it was renamed to JavaScript.
Was originally designed as a scripting language. Actually it is a fully featured object-oriented language. It uses procedural, functional and object-oriented programming concepts.
Javascript is the only language that runs directly in the browser. That why it become extremely popular due to its unique ability to run in browsers, combined with its power and flexibility.
It is primary clint side language. In the last years, it is used also in other areas, such as browser extensions, web servers, smartphone apps, and desktop programs (see What can we build with JavaScript?). So JavaScript isn't just for the Web and beside a browser it can be executed also directly on any machine.
JavaScript is a dynamic, weakly typed programming language which is compiled at runtime.
JavaScript != Java. It was given a similar name probably because of popularity of Java.
JavaScript and Java are different languages.
JavaScript and Java are similar in some ways but fundamentally different in some others. JavaScript follows most Java expression syntax (C syntax), naming conventions and basic control-flow constructs. JavaScript is a very free-form language compared to Java (we will see and understand it from our first steps). It is also influenced by Awk, Perl and Python.
Since JavaScript runs in a browser on the client side it can't access the local filesystem, interact with the operating system ... .
JavaScript has many ways to do anything!

ECMAScript

ECMAScript is the scripting language on which JavaScript is based (ECMA = European Computer Manifacturers Association). In 2009 ECMAScript 5 (ES5) was released. All modern browsers support ES5. From 2015 new versions of ECMAScript specifications are released yearly. ES6 (ECMAScript 20015) is a major upgrade to JavaScript. It adds many new features. Most modern browsers support it.

Look in:

Can I Use who supports ES6
ES6 Browser Compatibility Table
ES6 code can be converted to ES5 (for example by Babel tool) before runnung it in a browser that doesn't support ES6
For new features in ES6 see ECMAScript 6 — New Features: Overview & Comparison
See also ES5 to ESNext — every feature added to JavaScript since 2015 with description
ES6 syntax changes are summarized in Cheat Sheet – ES6 Syntax Changes

If browser doesn't support some feature (it include also html/CSS features), instead of using Babel, you can add a polyfill to support it. A polyfill is a normal JavaScript library that adds a feature if it's missing. You can also use for example a polyfill service like polyfill.io, which detects the browser being used and sends back only the polyfills that person’s browser needs. Include it by:

<script src="https://polyfill.io/v3/polyfill.min.js"><script>
<script>
    // Your scripts...
</script>

Next Lesson

It is easy to learn fundamentals in ES5 and then update to ES6+. Here we will cover the basics of ES5. Some of the ES6 features will be demonstrated.

It is assumed that you are familiar with C or Java language (and object oriented concepts). Pay attention that like the C language, JavaScript is case-sensitive language.

Go to the next lesson in this lecture by pressing the right arrow on the bottom-left side of this page. You will see there the ways to place JavaScript in your document. Then you can start learning the basics of the JavaScript language. For advanced features look at the full guides on MDN, or other sites.

You will learn JavaScript by examples. Most of the pages are interactive - you can choose some predefined options from the lists. Then, you are free to change the codes or write your own to explore various options and to see live preview of your changes.

In many demos console browser window is used to see the results of the demos. One of the ways to open this window in Chrome is to use F12.

In most of the demos we omit the document structure in the HTML Code window. We assume:

The code in the HTML Code window has valid document structure
The code in the CSS Code window (if present) is written in an external file, which is linked to the document
The code in the JS Code window (if present) is written in an external file too and linked to the document

For the complete references, see the links in the 'Sites' tab on the top menu.

Enjoy learning JavaScript!