How to Install Operating System ??Complete Guide Installing The Operating System

The First Step in Learn Javascript Programming for beginners

Javascript Programming – Javascript is a programming language that you must learn if you want to explore the world of web development. Currently, javascript is not only used on the client (browser) side. Javascript is also used on servers, consoles, desktop programs, mobile, IoT, games, and others.

This makes javascript more popular and becomes the most used language on Github.

Javascript Programming
Javascript Programming

In this article, we will learn Javascript from the ground up. Starting from the introduction of Javascript, to make the first program with Javascript.

Ready?

Let’s start at…

What is Javascript?

Javascript is a programming language that was originally designed to run on a browser.

However, as time goes by, javascript does not only run on the browser. Javascript can also be used on the server side, games, IoT, desktop, etc.

Javascript was originally called Mocha, then changed to LiveScript when the browser Netscape Navigator 2.0 was released in beta (September 1995). However, after that, it was renamed Javascript.

Inspired by the success of Javascript, Microsoft adopted a similar technology. Microsoft made its own version of ‘JavaScript’ called JScript. Then planted on Internet Explorer 3.0.

This has resulted in ‘browser wars’ because Microsoft’s JavaScript is different from Netscape’s Javascript mix.

Finally, in 1996, Netscape sent ECMA-262 standardization to Ecma International. So the standardization of Javascript code was born called ECMAScript or ES. Currently, ECMAScript has reached version 8 (ES8).

Versi ECMAScriptYear of Release
ES 1June 1, 1997
ES 2June 1, 1998
ES 3December 1, 1999
ES 4Abandoned
ES 5December 1, 2009
ES 5.1June 1, 2011
ES 6June 1, 2015
ES 7June 1, 2016
ES 8June 1, 2017

Tools for Learn Javascript

What are the tools that must be prepared to learn Javascript?

  1. Web Browser (Google Chrome, Firefox, Opera, etc.)
  2. Text Editor (recommendation: VS Code)

That is all?

Yes, that’s enough. If you want to learn Javascript from Nodejs, please read Introduction to Nodejs for Beginners.

My recommendation: learn Javascript from the client side first. Later Nodejs later.

Get to know the JavaScript Console

Some say, learning javascript is difficult because when you see the results in a web browser, the error message does not appear. This opinion is incorrect. Because we can see it through the console.

We can open the Javascript Console through Inspect Element-> Console.

Javascript Programming
Javascript Programming

Inside the console, we can write functions or javascript codes and the results will be immediately displayed.

For example, let’s try the following code:

console.log ("Hi, how are you!");
alert ("I'm learning javascript");

Then the result:

Javascript Programming
Javascript Programming

If you use Nodejs, then how to access the console is to type the command node in the Terminal.

Javascript Programming
Javascript Programming

After trying the Javascript console, we can conclude:

  • The console can be used to test functions or Javascript code;
  • We can use the Console to see error messages when debugging programs.
  • … what else?

Creating the First Javascript Program

Already know how to open and use a javascript console?

Nice…

Then, let’s create the first program with Javascript.

Please open the text editor, then create a file called hello_world.html and fill in the following code:

<! DOCTYPE html>
<html>
<head>
      <title> Hello World Javascript </title>
</head>
<body>
      <script>
      console.log ("I am learning Javascript");
      document.write ("Hello World!");
      </script>
</body>
</html>

If you use the text editor VS Code, it will look like this:

Javascript Programming
Javascript Programming

Please save it as hello_world.html, then open the file with a web browser.

Then the result:

Javascript Programming
Javascript Programming

Wait a minute …

Earlier we wrote the command:

console.log ("I am learning Javascript");

Why isn’t it displayed?

Because the command or function console.log () will display messages in the javascript console. While the document.write () command functions to write to an HTML document, then it will be displayed there.

Now just open the javascript console.

Then we will see the message “I am learning Javascript”:

Javascript Programming
Javascript Programming

We already know the document.write () and console.log () functions, we will discuss further this function in:

  • How to Display Output in Javascript
  • Get to know the DOM API for manipulating HTML in Javascript

Now, what we need to know next is:

How to Write Javascript code in HTML?

In the example above, we have written javascript code in HTML.

This method is an embedded method.

There are still some more ways that we need to know:

  1. Embed (Javascript code pasted directly on HTML. Example: the one before)
  2. Inline (Javascript code written in HTML attributes)
  3. External (Javascript code is written separately from HTML file)

Let’s look at an example …

1. Writing Javascript Code With Embed

In this way, we use the <script> tag to embed the Javascript code in HTML. This tag can be written in the <head> and <body> tags.

Example:

<! DOCTYPE Html>
<html>
     <head>
          <title> Learning JavaScript from Zero </title>
          <script>
                 // This is a replacement for the JavaScript code
                 // inside the <head> tag
                 console.log ("Hello JS from Head");
          </script>
     </head>
     <body>
          <p> JavaScript Tutorial for Beginners </p>
          <script>
                 // This is a replacement for the JavaScript code
                 // inside the <body> tag
                 console.log ("JS Hello from body");
          </script>
     </body>
</html>

Which is better, written in <head> or <body>?

Many recommend writing it in <body> because it will make the web load faster.

2. Writing Inline Javascript Code

In this way, we will write the javascript code in the HTML attribute. This method is usually used to call a function for a particular event.

For example: when the link is clicked.

Example:

<a href="#" onclick="alert('Yey!')"> Click me! </a>

or it could be like this:

<a href="javascript:alert('Yey!')"> Click me! </a>

The result:

Javascript Programming
Javascript Programming

Pay attention …

In the onclick and href attributes, we write the javascript function there.

The onclick attribute is an HTML attribute to declare a function that will be executed when the element is clicked.

In the example above, we run the alert() function. This function is a function for displaying dialogs.

Then in the href attribute, we also call the alert() function with javascript:

The href attribute is actually used to fill in the link address or URL.

Because we want to call the javascript code there, then we change the link address to javascript: then followed by the function to be called.

3. Writing External JavaScript Code

In this way, we will write the javascript code separately with the HTML file.

This method is usually used on large projects because it is believed – in this way – can more easily manage the project code.

Let’s look at an example …

We create two files, namely: HTML and Javascript files.

study-js /
+ - code-program.js
+ - index.html

Fill in the code-program.js file:

alert ("Hello, this is an external JS program!");

Fill in the index.html file:

<! DOCTYPE html>
<html>
     <head>
          <title> Learning JavaScript from Zero </title>
     </head>
     <body>
          <p> JavaScript Tutorial for Beginners </p>

          <! - Insert external js code ->
          <script src = "code-program.js"> </ script>
     </body>
</html>

The result:

Javascript Programming
Javascript Programming

In the example above, we write a separate javascript code with HTML code.

Then, in the HTML code …

We insert it by giving the src attribute to the <script> tag.

<! - Insert external js code ->
<script src = "code-program.js"> </script>

So, anything in the code-program.js file will be read from the index.html file.

What if the javascript file is in a different folder?

We can write the full address of the folder.

Example:

Suppose we have a folder structure like this:

study-js /
+ - js /
| + - code-program.js
+ - index.html

So to insert the code-program.js file into HTML, we can write it like this:

<src = "js / code-program.js"> </script> script

Because the code-program.js file is in the js directory.

We can also insert javascript on the internet by providing the full URL address.

Example:

<script src = "https://www.petanikode.com/js/kode.js"> </ script>

What is Next?

You already know JavaScript and have made the first program with Javascript.

Have a good study.

Sending
User Review
0 (0 votes)

Add a Comment

Your email address will not be published. Required fields are marked *