Getting started with JavaScript

Getting started with JavaScript

In this tutorial you going to be learning about core JavaScript. First we need to choose a working environment to run our code and also the tools we are going to be using to write the code.

Before you start the JavaScript you need to have a basic knowledge of your computer (or tablet or phone or whatever development environment you will be using) and its operating system. You should have knowledge about its directory system so that you can navigate through folders, locate, save, and open files.

If you use an android tablet or phone then you need to install a good file manager like:

  • MT manager Mt manager
    or
  • File manager+ File manager+

Lastly and most importantly, you must have a basic knowledge of HTML.

Code editor

A code editor is a software that a programmer uses to write programming instructions (scripts in this case). There are basically two types of code editors you can choose from; Integrated Development Environment (IDE) and lightweight code editors.

Integrated Development Environment (IDE)

An IDE is a powerful code editor with many features especially design for working on a “whole project”. Its a full “development environment”. An IDE usually provides code autocompletion based on the project and also on the programming language syntax, a debugging environment for testing the code and other project-related tools. If you are going to use an IDE, I am not going to choose a good IDE for you because the goodness of an IDE depends on a combination of personal opinion, affordability, operating system enviroment. However here are some IDEs you can choose from;

The IDEs mentioned above are all cross-platform.

Lightweight code editors

“Lightweight code editors” are not as powerful as IDEs. However they are fast, and simple to use. Unlike IDEs, “lightweight code editors” are used only to open and edit code files.

Here are some code editors you can choose from:

Web Development environments on Android

If for any reason you have no access to a PC, don’t lose heart, there are a lot of code editors and IDEs in playstore that run on Android.

Here are some you can choose from:

  • anWriter (for both HTML and JavaScript) anWriter
    or
  • AIDE web (for both HTML and JavaScript) Aide web
    or
  • Dory Nodejs (for JavaScript and Nodejs)

Developer console

Every modern browser can run JavaScript and that is where we are going to run most of the code we will learn here. During development you are going to make a lot of errors in your code and that’s pretty normal. However, in a web browser, JavaScript errors are not visible by default. The code usually fails silently.

To see errors we enable “developer tools” that are embedded in web browsers. Chrome and Firefox have the best “developer tools” and naturally I would recommend you to use either of the two. There are many functions in the “developer tools”, one of which is the “console” which we are going to be using regularly when testing JavaScript codes.

In browser developer console we use the console.log() function mostly for debugging purposes. The function outputs messages to the console screen.

To open “developer console” on Chrome press key:F12.

In console, type the following:

console.log("Hello!");

In the example above, console.log() function prints “Hello!” to the console (and then prints undefined because console.log() has no return value
).

Inserting JavaScript in HTML documents

JavaScript programmes can in HTML documents without an special preparation needed. Let’s see how.

The <script> tag

With the help of the <script> tag, JavaScript programs can be inserted in any part of an HTML document.

For example:


<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>
  <h1> Welcome to my webpage </h1>
 
  <script>
    alert('Hello, champion!');
  </script>

</body>

</html>

Alert

As you can see in the example above we used the <script> tag to insert a JavaScript alert on the webpage.

External scripts

You can use the script tag to point the browser to an external JavaScript file. This method is preferable if there is a lot of JavaScript code or if you want to separate page logic from page design. The script is put in a separate file.

For example, you can open your code editor and create a file named something like myScript.js then add the following code in the file:

alert("Hello from the other side");

Then you link the JavaScript to the HTML file using the src attribute of <script>:

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>

<body>
  <h1> Welcome to my webpage </h1>
 
  <script src ="myScript.js">
  </script>

</body>

</html>

Make sure the two files are in the same folder and then run the HTML file.

Js alert

You can even use a full url as the src attribute.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>

Several JavaScript files can be inserted using multiple tags:

<script src="myGame.js"></script>
<script src="logic.js"></script>
…

If src is set, the script content in the tag will be ignored.”

<script src = "myCode.js">
  alert("hi"); // This content will be ignored, because src is set
</script>