Loading…

JavaScript tutorial – part 1 – overview

I’ve just decided to start a new series about the most widespread web based programming language – JavaScript. I have already a lot of experiences with this beautiful language and I want to improve myself, therefore I have decided to share my new knowledge with you by writing new articles about my steps. It will help me to memorise new principals better and hopefully it will help you too. Series will not be focused on fundamentals and coding itself. I want to focus more on principles, architecture, possibilities and specifications.

Overview

Whereas HTML stands for webpage’s structure, content and metadata and CSS stands for the visual part and formatting, JavaScript should be considered as the middleware providing the richness and flexibility to our web applications.

JavaScript is a container, which contains several different elements. JavaScript core ECMAScript is the most important part. I will speak about it later. Next instance is the large number of WEB APIs, including the DOM for example.

The core – ECMAScript

The core language of JavaScript is standardised by the ECMA TC39 committee and is called ECMAScript. The latest version of ECMAScript specification is Edition 7 (released June 17, 2016).

The usage of this core is not now days targeted only for browsers. It is also used for instance in node.js, the non-browser environment.

And what is covered by the ECMAScript scope? I will list some instances bellow.

  • Language syntax (parsing rules, keywords etc.)
  • Error handling mechanisms (throw, try/catch, ability to create user-defined Error types)
  • Types (boolean, number, string, function, object…)
  • A prototype-based inheritance mechanism
  • Built-in objects and functions (JSONMathArray.prototype methods, Object introspection methods…)
  • The global object. In a browser, this global object is the window object, but ECMAScript only defines the APIs not specific to browsers, e.g. parseIntparseFloatdecodeURIencodeURI
  • Strict mode

Browser support

The updated browsers should now support the most things from ES6 and 2016+. New ECMAScript Editions are published on a yearly basis. The best way how to find out particular information about support is to visit this page. The ES5 is considered as stable and supported by almost every browser, so if you want to stay in a safe zone, but use features of ES6, you can use workarounds like babel compiler etc.

DOM

The core of the DOM

The Document Object Model is basically the hierarchy of a website, or a given page. Once the browser renders HTML and Javascript you are left with the DOM. You can view the DOM in the Elements tab in for example Chrome Developer Tools, where you see a lot of extra markups depending on what plugins you have running and what your Javascript is doing from your source. The DOM is a language  independent on APIs, because no matter what you use to build a website, the DOM will always be the final rendered result. All browsers use it, regardless of operating system or front-end / back-end languages used.

So remember that the DOM is a hierarchical structure, which allows you to traverse the tree (for instance the one shown on picture below) and manipulate (CRUD) the particular elements.

Other notable APIs

 

At the end I am putting an easy peasy hello world JavaScript code snippet. Just as an example of our code snipped editor we will be using in the future parts. You can select the code and copy it to your IDE, or double click inside the editor, do some temporary changes and then by cmd+a / ctrl+a select all text for copying.

 


<html> 
    <body> 
        <script language="javascript" type="text/javascript"> 
            document.write("Hello World!")
        </script> 
    </body> 
</html>
.

 

This article was based on information gained from MDN and sometimes uses it’s statements. Visit this site for further information. I highly recommend you to study technologies on MDN, because it is really well structured site with correct information from the best ones among us.