Concepts that help you understand JavaScript better

JavaScript Concepts: because great things start with (“hello world”)

Keyboard

When it comes to talk about JavaScript, it’s useful to start with an overview of the language’s history. JavaScript was created in 1995 by Brendan Eich while he was an engineer at Netscape. JavaScript was first released with Netscape 2 early in 1996. Several months later, Microsoft released JScript with Internet Explorer 3. It was a mostly-compatible JavaScript work-alike. Several months after that, Netscape submitted JavaScript to Ecma International, a European standards organization, which resulted in the first edition of the ECMAScript standard that year. The standard received a significant update as ECMAScript edition 3 in 1999, and it has stayed pretty much stable ever since.

 

What is JavaScript, really?

JavaScript (“JS” for short) is a full-fledged dynamic programming language that, when applied to an HTML document, can provide dynamic interactivity on websites. It was invented by Brendan Eich, co-founder of the Mozilla project, the Mozilla Foundation, and the Mozilla Corporation.

JavaScript is incredibly versatile. You can start small, with carousels, image galleries, fluctuating layouts, and responses to button clicks. With more experience, you’ll be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more!

JavaScript itself is compact yet very flexible. Developers have written a large variety of tools on top of the core JavaScript language, unlocking a vast amount of extra functionality with minimum effort. These include:

  • Browser Application Programming Interfaces (APIs) — APIs built into web browsers, providing functionality like dynamically creating HTML and setting CSS styles, collecting and manipulating a video stream from the user’s webcam, or generating 3D graphics and audio samples.
  • Third-party APIs to allow developers to incorporate functionality in their sites from other content providers, such as Twitter or Facebook.
  • Third-party frameworks and libraries you can apply to your HTML to allow you to rapidly build up sites and applications.

Because this article is only supposed to be a light introduction to JavaScript, we are not going to confuse you at this stage by talking in detail about what the difference is between the core JavaScript language and the different tools listed above.

Variables 

var

Everyone knows about var. To declare a variable, you need to use the var keyword and provide that variable a name.

(Hopefully something that makes sense)

let

let is introduced in ES6 (ES2015 ). This gave us another way to define variables that can be reassigned, and are block scoped.

Unique Let Names

You cannot re-declare a variable using the let keyword. It will throw an error and crash your app.

const

const is also a new way to define variables, cannot be reassigned, and are block scoped.

const is MUTABLE

const values cannot be reassigned or redeclared. But, you can mutate the data that is in it.

const must be initialized.

Since const cannot be reassigned, it must hold a value when it is first being declared.

Destructuring

Destructuring is a new syntax in JavaScript that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Global vs. Local

Scope determines the accessibility, or visibility, of variables and functions.

Variables defined within a function is called a “local” variable. If you try to access that variable anywhere else other than that function, you will get an error.

Variables defined outside a function is called a “global” variable. You can access this variable from anywhere in your code.

These can be used as standalone variables or as part of function parameters.

A “hello world” example

Computer with Hello World

 

The above section might sound really exciting, and so it should — JavaScript is one of the most lively web technologies, and as you start to get good at using it, your websites will enter a new dimension of power and creativity.

However, becoming comfortable with JavaScript is a little harder than becoming comfortable with HTML and CSS. You may have to start small and keep working in small consistent steps. To start, we’ll show how to add some basic JavaScript to your page, creating a “hello world!” example (the standard in basic programming examples).

  1. First, go to your test site and create a new folder named ‘scripts’ (without the quotes). Then, within the new scripts folder you just created, create a new file called js. Save it in your scriptsfolder.
  2. Next, in your htmlfile enter the following element on a new line just before the closing </body> tag:

<script src=”scripts/main.js”></script>

  1. This is basically doing the same job as the <link>element for CSS — it applies the JavaScript to the page, so it can have an effect on the HTML (along with the CSS, and anything else on the page).
  2. Now add the following code to the jsfile:
  3. var myHeading = document.querySelector(‘h1’);

myHeading.textContent = ‘Hello world!’;

  1. Finally, make sure the HTML and JavaScript files are saved, then load htmlin the browser. You should see something like the following:

Note: The reason we’ve put the <script> element near the bottom of the HTML file is that HTML is loaded by the browser in the order it appears in the file. If the JavaScript is loaded first and it is supposed to affect the HTML below it, it might not work, as the JavaScript would be loaded before the HTML it is supposed to work on. Therefore, putting JavaScript near the bottom of the HTML page is often the best strategy.

What happened?

Your heading text has now been changed to “Hello world!” using JavaScript. You did this by first using a function called querySelector() to grab a reference to your heading, and store it in a variable called myHeading. This is very similar to what we did using CSS selectors. When wanting to do something to an element, you first need to select it.

After that, you set the value of the myHeading variable’s textContent property (which represents the content of the heading) to “Hello world!”.

Note: Both of the features you used above are parts of the Document Object Model (DOM) API, which allows you to manipulate documents.

Feel the love for programming? Become a Web Developer in less than a year and join one of the fastest, growing professions in the planet here

 

2018-07-09T18:05:48+00:00