Basic Introduction Javascript for Beginners

Javascript study guide for beginners. In this internet era, Javascript is a programming language that we must understand. If you have heard programming like NodeJs, Angular, React, Vue is Javascript. So, if you have mastered Javascript, developing applications using the framework is not difficult.

What is Javascript

“JavaScript is a very mature programming language and can be collaborated with HTML documents and used to create interactive websites,” developer.mozilla.org.

The primary purpose of Javascript is to make web pages more interactive and informative. Currently, Javascript not only used on the client side, but javascript is also used on servers, desktop applications, mobile, IoT.

We can do many things with Javascript such as interacting with HTML elements, making responses when doing activities with web elements, creating games, creating 2D and 3D animations, interacting with databases and more.

Learning javascript won’t be perfect if you don’t understand history. Check out the following brief Javascript history so that you are more enthusiastic about learning this programming.

History of Javascript

Brandan Eich created Javascript from Netscape in September 1995. Before it was called Javascript, this programming language was called Mocha, then changed its name to Mona, Livescript and finally officially carried the Javascript name. The initial version of Javascript is only limited to Netscape. The functionality offered is also limited. However, JavaScript continues to be developed by the developer community so that it becomes a broad programming language and used by all browsers.

JavaScript was officially referred to as ECMAScript in 1996, where ECMAScript 2 was launched in 1998, and ECMAScript 3 was introduced in 1999. The ECMAScript was developed to become JavaScript finally. Not only cross-browser, but JavaScript can be used on various devices like mobile devices and computers.

Now, JavaScript has continued to grow and develop. Moreover, JavaScript has switched from a limited and ‘primitive’ programming language to one of the essential components for web developers.

Advantages and Disadvantages of JavaScript

Every programming language has more and less value. Actually, the main thing is not the excess and lack of a programming language, but how we understand and apply a programming language properly.

Read More: Create Simple CRUD with Datatables, Jquery and AdminLTE

Javascript has several advantages that I summarize from various sources:

Advantages of Javascript

• Does not require a compiler because a web browser automatically interprets it with HTML.
• Easy to learn.
• JS can be used in many browsers and platforms.
• Making web pages more informative.
• Easy to find plugins or additional components to speed up application development.
• Many tutorials have been shared free of charge

If Javascript have advantages, of course, Javascript also has some disadvantages that we need to know.

Lack of Javascript

• High risk of exploitation.
• Can be used to activate the malicious code on the user’s computer.
• Can be rendered differently on each device which causes inconsistencies.

Supporting tool for Learning Javascript

Of course, every programming language requires combat tool. What are the tools that must be prepared for learning Javascript?

• Web Browsers (Google Chrome, Mozilla Firefox, Opera, etc.)
• Text Editor (Sublimetext, VS Code, Atom, notepad ++)

How to Detect errors in Javascript programming.

If you develop a javascript application with only a text editor, how do you check the Javascript error message?

Every browser has a console that aims to check for errors that occur on web pages. For example, Chrome by pressing the F12 key or right-clicking on the browser and selecting the Inspect Element menu display the console window. See the picture below.

Console window function in the browser

• Used for test the Javascript code.
• Used to see error messages when debugging Javascript programs.

Already familiar with Javascript? Before going to the next stage, I make sure you already understand what HTML is? Because HTML is closely related to Javascript.

Creating the First Javascript Application

Create a hello world

Until this stage, at least you have mastered Javascript supporting tools, the next step we make the first program using Javascript.

Open your favorite text editor, and copy the following code:

Save the code above with the name index1.html and run it on your favorite browser. Don’t forget to press F12 to see the console window to display the word “Hello World” in the console window.

To display on a web page, we can add the following code under console.log().

From the code snippet above we already know two functions, document.write() and console.log(). We will often use both of these functions for basic Javascript learning.

How to Write a Javascript Code in HTML

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

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

• Embed (Javascript code pasted directly on HTML)

In this way, we use the  tag to paste the Javascript code in HTML. We have done this method when displaying “hello world” above

• Inline (Javascript code written in HTML attributes)

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

For example: click event.

A brief description:

In the onClick attribute, we write the Javascript function there.

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

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

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.

• External (Javascript code is written separately from HTML file)

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

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

The contents of the hello-world.js file:

Fill in the index2.html file:

Run on the browser and the results as shown below

Conclusion

1. Javascript makes web pages more interactive and informative.
2. Javascript is easy to learn and implement
3. We know 3 basic javascript functions console.log(), alert(), document.write().
4. Writing javascript code is very flexible, it can be done in 3 ways embed, inline and external

Until this stage, we already know the essential introduction to Javascript. Then we will study variables, data types, operators and much more.

Other article: Tutorial Simple CRUD Angular 5 And Lumen 5.6 For Beginners

So the Basic Tutorial Javascript for Beginners, hopefully useful.

Next : Understanding Variables And Data Types in Javascript for Beginners