DEV Community

Cover image for Modern JavaScript For Everyone: Mastering Modern JavaScript The Right Way.
john mbugua
john mbugua

Posted on

Modern JavaScript For Everyone: Mastering Modern JavaScript The Right Way.

Introduction

JavaScript was introduced in 1995 as its was to add program to web pages in the Netscape Navigator browser.

Its important to note that JavaScript has nothing to do with java programming language, the similar name was being inspired by marketing considerations.

JavaScript cannot only be used in web browser, some database such as Mongo DB and CouchDB use JavaScript as their scripting and query language.

JavaScript Logo

Code Editor For JavaScript

What Is Code Editor?

Code editor is one of the essential tools for programmers, designers and even writers designed to edit the source code of computer programs.

A code editor is basically a text editor but it is also designed to help you write code.

What Is An IDE ?

Its a shorthand for Integrated Development,is one of the most powerful programming tools that combine the different aspects of computer program into a single GUI.

Image code

JavaScript programmers have many good tools to chose from but I would recommend the two below.

  1. Visual Studio Code Download Link

  2. Sublime Text Download Link

Why would you use a code editor instead of an IDE, would say because of speed.

JavaScript can can be written in two ways in your HMTL code:

Internal JavaScript

JavaScript can be used together with the html elements inside HTML file as shown below.

  <script>
  document.getElementById('work')
  </script>
Enter fullscreen mode Exit fullscreen mode

External JavaScript

JavaScript can also be placed in an external file, this file will be containing JavaScript script.

  <!DOCTYPE html>
  <html>
  <body>
  <script src="path to your JavaScript file">
  </body>
  </html>
Enter fullscreen mode Exit fullscreen mode

Advantages Of External JavaScript

Placing the JavaScript externally has the following advantages:

 .It separates JavaScript code and html code.
 .It easier to read.
 .It speed up the page.
Enter fullscreen mode Exit fullscreen mode

JavaScript Fundamentals

Learn modern JavaScript the right way require one to have better understanding of basics of JavaScript.

Below are basics you need to consider when learning JavaScript:

.Data types

.Function

.Keywords

.Variable

.Comments

.Arrays

Data Types

JavaScript variable can hold many data types:

 .String - a character or a string of characters.

 .Number - an integer or floating point number.

 .Boolean - a value with true of false.

 .Function - a user defined method.

 .Objects - a built-in or user-defined objects.
Enter fullscreen mode Exit fullscreen mode

Function

A function is a code block that can repeat to run many times. To define a function, use function-name.

Function is executed when something calls it.

 function myFunction (p1,p2){
     return p1 * p2;
 }
Enter fullscreen mode Exit fullscreen mode

Function Syntax

JavaScript function is defined with function keyword, followed by a name then parenthesis ().

Function names can contain letters ,digits ,underscores and dollar signs.

Keywords

Keywords belong to JavaScript itself. The following are examples of JavaScript keyword:

.Break

.Return

.False

.Typeof

.With

.Forms

Variables

Variable is a symbolic name associated with a value. They are containers for storing data values.


var x = 10;

var y = 14;

var z = y * x;

Enter fullscreen mode Exit fullscreen mode

Comments

Comments in JavaScript can be used to explaining JavaScript code and also prevent execution, when testing alternative code.

There are two type of comment in JavaScript.

Single Line Comments

They start with //.

Code that comes before // will not be executed.

// This is single line comment

Multi-Line Comments

They start with /* and end with */.

Any code between /* and */ will not be executed

/* This is a multi-line comment
*/
Enter fullscreen mode Exit fullscreen mode

Arrays

Arrays in JavaScript are used to store multiple value in a single variable. new Array() will create an array.


var array-name = new Array ("value1","value2","value3");

Enter fullscreen mode Exit fullscreen mode

Showing an array element values we use the following syntax.


document.write (array-name[index]);

Enter fullscreen mode Exit fullscreen mode

Getting the size of an array.

array.length

References

Below are some of the books that can help you in your journey to master JavaScript.

  1. Eloquent JavaScript by Marijn Haverbeke

  2. JavaScript In 8 Hours by Yao Ray

Top comments (0)