Blog for Learning

This blog contains lesson material, material summary, questions and answers, definitions, types and examples, and others.

Advertisement

Powered by Blogger.

Visitors

Flag Counter

Pages

Javascript Programming: The First Step in Learning Javascript

Learn Javascript Programming from Zero
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.
Github 2017 survey results
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…

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. 1
Inspired by the success of Javascript, Microsoft adopted a similar technology. Microsoft made their own 'Javascript' version called JScript. Then planted on Internet Explorer 3.0.
This has resulted in a ' browser war ', because Microsoft's JScript 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). 2
ECMAScript versionYear of Release
ES 1June 1997
ES 2June 1998
ES 3December 1999
ES 4Abandoned
ES 5December 2009
ES 5.1June 2011
ES 6June 2015
ES 7June 2016
ES 8June 2017

Tools for Learning Javascript

What are the tools that must be prepared for learning 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 Javacript 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 .
Mozilla Firefox Console
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 apa kabar!");
alert("Saya sedang belajar javascript");
Then the result:
Mozilla Firefox Javascript Console
If you use Nodejs, then how to access the console is to type the command nodein Terminal.
Javascript Console at Nodejs
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 name file hello_world.htmland fill in the following code:
<!DOCTYPE html>
<html>
<head>
    <title>Hello World Javascript</title>
</head>
<body>
    <script>
        console.log("Saya belajar Javascript");
        document.write("Hello World!");
    </script>
</body>
</html>
If you use the text editor VS Code, it will look like this:
Write a javascript program in the VS Code text editor
Please save with a name hello_world.html, then open the file with a web browser.
Then the result:
Javascript hello world program
Wait a minute ...
Earlier we wrote the command:
console.log("Saya belajar Javascript");
Why isn't it displayed?
Because the command or function console.log()will display the message in the javascript console . While the command document.write()functions to write to an HTML document, then it will be displayed there.
Now just open the javascript console.
Then we will see a message "Saya belajar Javascript":
The hello world program in the javascript console
Steady… 👍
We already know the function document.write()and console.log(), later we will discuss more about this function in:
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 embeded 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 tags <script>to embed the Javascript code in HTML. This tag can be written in tags <head>and <body>.
Example:
<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <head>
            console.log("Hello JS dari Head");
        </script>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>
        <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </script>
    </body>
</html>
Which is better, written inside <head>or <body>?
Many recommend writing it inside <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!')">Klik aku!</a>
or it could be like this:
<a href="javascript:alert('Yey!')">Klik aku!</a>
The result:
Inline javascript example
Pay attention ...
On the attribute onclickand hrefwe write the javascript function there.
Attribute onclickis an HTML attribute to declare a function that will be executed when the element is clicked.
In the example above, we perform the function alert()This function is a function for displaying dialogs .
Then in the attribute href, we also call the functionalert()preceded javascript:.
The attribute is hrefactually used to fill in the link address or URL.
Because we want to call the javascript code there, then we change the link address 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.
belajar-js/
├── kode-program.js
└── index.html
The contents of the file kode-program.js:
alert("Hello, ini adalah program JS eksternal!");
The contents of the file index.html:
<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Javascript dari Nol</title>
    </head>
    <body>
        <p>Tutorial Javascript untuk Pemula</p>

        <!-- Menyisipkan kode js eksternal -->
        <script src="kode-program.js"></script>
    </body>
</html>
The result:
Examples of external Javascript programs
In the example above, we write separate javascript code with HTML code.
Then, in the HTML code ...
We insert it by giving attributes srcto the tag <script>.
<!-- Menyisipkan kode js eksternal -->
<script src="kode-program.js"></script>
So, anything in the file kode-program.js will be read from the file index.html.
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:
belajar-js/
├── js/
|   └── kode-program.js
└── index.html
So to insert files kode-program.jsinto HTML, we can write them like this:
<script src="js/kode-program.js"></script>
Because the file kode-program.jsis in the directory js.
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>
Reference: https://www.petanikode.com/javascript-dasar/
0 Komentar untuk "Javascript Programming: The First Step in Learning Javascript"

Silahkan berkomentar sesuai artikel

 
Template By Kunci Dunia
Back To Top