My JavaScript journey - Part 1 - Basic Introduction

Posted in development on November 2, 2017 by Adrian Wyssmann ‐ 3 min read

In my early days I used to make some websites with php and sometimes involving simple JavaScript in the fronted. So I know the basics (JS, css, html), however I never was a web developer. I also never considered to use JS for more than enhancing html sites, but as of today JS is more than just used for client side scripting but thanks to Nodejs it is heavily used in web applications.

Some words to Javascript

According to Wikipedia JavaScript was developed around 1995 and a first version released with the Netscape Navigator 2.0. This was soley for client side scripting. But some month later, Netscape introduced Netscape Enterprise Server which offered and implementation for server-side scripting. Node.js is another implementaion of SSR which was itroduced in 2009. In order to facilitate the implementation for browser vendors, Netscape submitted JavaScript in 1996 to the Ecma is a standards organization for information and communication systems, which release the first language specification ECMAScript (or ES) as standards ECMA-262 and ISO/IEC 16262. This standard has been evolved over the past years up to edition 8, released in June 2017.

Some key features of JavaScript:

supported by almost all browsers (not always necessarily all latest features)
is dynamically typed
almost entirely object-based, but ituses prototypes instead of classes
no distinction between a function definition and a method definition
relies on a run-time environment e.g. web browser or node.js
use of literals for arrays and objects

Client Side Scripting

Using JavaScript on client side is quite easy as you simply have to include the script(s) in your html page. There are two possibilities, either using the <script>-tag in your html (either in the body or the head)

<!DOCTYPE html>
<html>
    <head>
        <title>JS Example - Inline Script</title>
    </head>

    <body>
        <h1 id="title">No Title</h1>
        <div>
            <p>This is an example page with inline JS script</p>
        </div>
        <script>
            document.getElementById("title").innerHTML = "JS Example - Inline Script";
        </script>
    </body>
</html>

or include an external js-file with the <script>-tag in the head like

<!DOCTYPE html>
<html>
    <head>
        <title>JS Example - External Script</title>
    </head>

    <body>
        <h1 id="title">No Title</h1>
        <div>
            <p>This is an example page with external JS script</p>
        </div>
        <script src="jsexample-file.js">
        </script>
    </body>
</html>

here the respective js file:

document.getElementById("title").innerHTML = "JS Example - Inline Script";

Checkout the respective tutorials and examples under https://www.w3schools.com/js/

Update: 27. Nov. 2017: For people without scripting experiences this might be a good starting point: http://jsforcats.com/ which is an introduction for new programmers.

Server Side Scripting

More interestingly is the server-side scripting which means scripts are run on the server rather than on the client (browser) which means that content for dynamic web pages is created before the page is sent to the user’s web browser. This blog entry shows some interesting comparison between SSR and CSR. To enable server-side scripting a JavaScript runtime is required. Whereas for client-side scripting you have your web browser, on the server you need something else like Node.JS which is such a runtime or more specifically as described under under https://nodejs.org/en/about/ Node.js is…

… an asynchronous event driven JavaScript runtime, Node is designed to build scalable network applications

Together with npm (node js package manager) it enhances Node.js to a large ecosystem of open source libraries.

Libraries and Frameworks

Out of the basic JavaScript evolved a lot of different frameworks which offers functions to simplify application design. http://todomvc.com/ implements a simple Todo-List with different java script framworks. This is quite a good start and especially also a good source to help to decide for a MV* framework.

What next

Both Node.js and it’s ecosystem and JavaScript frameworks are bit topics by their own, so I plan to look in these in some of my next posts. Stay tuned …

Wyssmann Engineering

Title here