Twitter
Linkedin

Belajar Bahasa Pemrograman Javascript Dengan Cara Mudah Bagi Pemula

Jika Anda tertarik untuk belajar bahasa pemrograman yang populer pada saat ini, tentu jawabannya adalah JavaScript. Bahasa pemrograman JavaScript ini memiliki banyak keunggulan yang membuatnya sangat cocok bagi pemula. Belajar bahasa pemrograman JavaScript ini diperlukan, dalam tujuannya untuk membuat atau membangun suatu situs atau website.

Tentu pertanyaannya adalah, harus dimulai dari manakah apabila hendak belajar bahasa pemrograman JavaScript ini? Tidak perlu khawatir, TOGI telah menyiapkan beberapa panduan lengkap bagi pemula yang hendak belajar bahasa pemrograman JavaScript berikut ini. 

Sehingga, Anda akan mengetahui apa saja yang dibutuhkan untuk mempelajari JavaScript ini. Misalnya, Anda harus belajar dari apa yang perlu dipahami pertama kali seperti aturan dalam coding JavaScript, penggunaan variabel dan tipe data, hingga bagaimana mempraktikkan sendiri panduan JavaScript ini. 

Pemahaman Mengenai Javascript

Javascript adalah bahasa pemrograman yang digunakan dalam membangun website dari sisi klien (client side). Javascript dapat membuat tampilan website yang Anda buat menjadi lebih dinamis dan interaktif. Hal ini tidak bisa dilakukan dengan HTML dan CSS. Untuk membuat halaman website, Anda tidak harus menggunakan JavaScript. Tetapi pada saat ini, JavaScript hadir di dalam setiap tampilan website modern. Sehingga, JavaScript merupakan salah satu bahasa pemrograman website yang wajib dikuasai oleh seorang web developer

JavaScript merupakan bahasa pemrograman tingkat tinggi, berjenis scripting (scripting language), yang ditulis secara dinamis (dynamically typed), dan dijalankan oleh interpreter atau penerjemah. Karena merupakan bahasa pemrograman tingkat tinggi, maka JavaScript memiliki aturan penulisan yang menyerupai bahasa manusia. Dengan demikian, untuk mempelajarinya akan menjadi lebih mudah, bahkan bagi pemula sekalipun. 

Adapun maksud dari scripting language adalah bahasa pemrograman yang telah tertanam di dalam program yang lebih besar, seperti web browser. Sehingga, yang dapat menggunakan bahasa pemrograman JavaScript ini adalah program tersebut.

Sementara maksud dari dynamically typed adalah satu variabel pada program dengan coding JavaScript yang berisikan tipe data yang berbeda. Anda dapat mengisi variabel dengan angka, kemudian menggantinya ke dalam bentuk huruf, tanpa akan mengalami error

Bahasa pemrograman JavaScript harus dijalankan oleh interpreter, sebab hal ini supaya prosesnya dapat dimengerti oleh komputer supaya dapat dijalankan. Nah, untuk proses ini dapat dilakukan secara otomatis oleh web browser. 

JavaScript dikenal sebagai bahasa pemrograman tertua di dunia. Ia telah ada sejak tahun 1995, dengan nama awal Mocca. Kemudian berganti nama menjadi LiveScript, sebelum pada akhirnya bernama JavaScript dengan standarisasi dari EcmaScript.

Adapun EcmaScript sendiri merupakan sebuah standarisasi bahasa Scripting yang dibuat oleh European Computer Manufacturers Association (ECMA). Dengan adanya EcmaScript, maka JavaScript dapat berjalan lancar di berbagai web browser. Karena telah lama keberadaannya, maka tidak heran apabila JavaScript adalah bahasa pemrograman terpopuler berdasarkan survey Stack Overflow. Sebanyak 97,7% website yang ada di internet menggunakan bahasa pemrograman JavaScript. 

Mengapa Harus Belajar Bahasa Pemrograman JavaScript?

Bahasa pemrograman JavaScript diciptakan pertama kali pada tahun 1995 oleh perusahaan Netscape Communications. Perusahaan ini mendefinisikan JavaScript sebagai “bahasa skrip atau pemrograman yang dapat digunakan untuk membuat hal-hal yang kompleks di dalam sebuah halaman website.” Bahasa ini dapat membuat suatu halaman website menjadi lebih user friendly dan dinamis, sekaligus dapat merespons tindakan dari pengunjung website. Dapat dikatakan jika JavaScript memiliki andil dalam membuat suatu website menjadi lebih interaktif. Itulah sebabnya kenapa banyak orang yang ingin mempelajari bahasa pemrograman tertua ini. 

Berikut ini beberapa alasan mengapa Anda harus belajar bahasa pemrograman JavaScript saat ini juga:

1. Merupakan Open Source dan Gratis 

Belajar JavaScript merupakan aktivitas yang tidak perlu izin lisensi untuk menggunakan bahasa ini. Mengapa demikian? Sebab, JavaScript merupakan bahasa pemrograman yang gratis alias open source. Baik itu untuk penggunaan pribadi maupun untuk keperluan komersial. Selain itu, semua fitur-fiturnya dapat Anda gunakan secara penuh, tanpa harus perlu meminta izin membeli serial number atau bahkan software tertentu. 

2. Tidak Memerlukan Instalasi 

JavaScript adalah program yang berjalan di atas program lain seperti halnya web browser. Oleh karena itu, semua web browser yang ada di pasaran telah memiliki engine untuk dapat menjalankan JavaScript. Selama Anda memiliki web browser, maka Anda dapat langsung melihat hasil codingan dengan menggunakan JavaScript. Dengan demikian, Anda tidak perlu lagi menginstall web server, compiler, atau bahkan dapat melakukan perubahan konfigurasi pada sistem. 

3. Memiliki Komunitas Yang Luas

Dikenal sebagai bahasa pemrograman terpopuler, JavaScript memiliki dukungan komunitas yang sangat luas dan besar, serta suportif. Dengan demikian, apabila Anda hendak belajar JavaScript maka tidak akan merasa kesulitan karenanya. Berikut ini beberapa komunitas terkenal untuk belajar tentang bahasa pemrograman JavaScript: 

  1.     JavaScript Stack Overflow
  2.     Learn JavaScript Reddit
  3.     JavaScript DEV Community
  4.     JavaScript Mastery Community
  5.     JavaScript Indonesia Community

4. Memiliki Ekosistem Yang Besar

JavaScript merupakan bahasa pemrograman yang memiliki ekosistem cukup besar. Mengingat akan perkembangannya yang pesat, JavaScript memiliki banyak framework JavaScript, library, dan plugin yang dapat Anda gunakan sesuai dengan kebutuhan. Tentu dengan adanya ekosistem yang besar tersebut, maka JavaScript tidak lagi hanya digunakan untuk membuat website dari client side saja, tetapi juga dapat dimanfaatkan untuk pengembangan back end, mobile apps, dan sebagainya.

5. Mudah Dipelajari

Masing-masing bahasa pemrograman memiliki tingkat kesulitan yang berbeda-beda. Adapun JavaScript, merupakan sebuah bahasa pemrograman yang mudah untuk dipelajari oleh siapapun termasuk pemula, karena memiliki aturan penulisan yang lebih ringkas dan lebih mudah untuk dimengerti. 

6. Sangat Powerful

JavaScript adalah salah satu bahasa pemrograman yang tertua, inilah yang membuat JavaScript sangat powerfull. Pada mulanya semua website masih menggunakan sistem PHP saja, dan mungkin menggunakan WordPress. Semua logika pemrograman web dibuat dan bergantung kepada sisi server, sehingga membuat tampilan web browser cenderung kaku dan statis. Berkat JavaScript, logika pemrograman web dapat sepenuhnya di-handle pada sisi client, sehingga website dapat lebih dinamis dan interaktif.

Baca juga: Yuk Kenali 9 Perbedaaan Penting Antara Java dan Javascript

Yang Dibutuhkan Untuk Belajar JavaScript

Apabila Anda hendak mempelajari bahasa pemrograman JavaScript, maka terdapat dua tools yang wajib Anda butuhkan. Diantaranya adalah:

1. Web Browser

Web browser memiliki fungsi sebagai penerjemah bahasa JavaScript ke dalam bahasa komputer (interpreter). Beberapa web browser yang dapat Anda gunakan antara lain diantaranya adalah Google Chrome, Microsoft Edge, Mozilla Firefox, dan lain-lain.

2. Code Editor

Code Editor memiliki fungsi untuk menuliskan sintaks atau kode program supaya sebuah program JavaScript tetap utuh. Beberapa code editor yang dapat Anda coba diantaranya adalah Visual Studio Code, Sublime Text, Notepad++. Setelah mempersiapkan keduanya, maka pastikan jika Anda telah memahami terlebih dahulu beberapa panduan dalam bahasa pemrograman JavaScript

Hal-Hal Yang Perlu Dipahami Sebelum Menggunakan JavaScript

Sebelum Anda melangkah lebih jauh dalam belajar coding JavaScript, setidaknya terdapat beberapa hal yang wajib Anda untuk pahami. Mulai dari cara penulisan, variabel, tipe data, hingga kepada operator JavaScript. Langsung saja disimak penjelasan lengkapnya berikut ini!

Aturan Penulisan Kode JavaScript

Bahasa pemrograman JavaScript memiliki beberapa aturan di dalam penulisan kode yang harus Anda patuhi, diantaranya adalah:

1. Whitespace

Whitespace merupakan area kosong yang berisi karakter tidak terlihat pada JavaScript, seperti spasi, tab ataupun enter. Whitespace memiliki fungsi sebagai penata susunan kode supaya terlihat lebih rapi. Adapun penggunaan whitespace ini, tidak akan menambah ukuran file JavaScript secara signifikan, sehingga kinerja pada website tetaplah optimal. Ditambah lagi, whitespace akan diabaikan pada saat browser menjalankan JavaScript.

1

2

3

  function toCelsius(fahrenheit) {

return (5 / 9) * (fahrenheit – 32);

   }

 

2. Line Length

Line Length atau disebut dengan panjang baris adalah jumlah karakter JavaScript yang ada di dalam satu baris kode. Idealnya, satu baris kode terdiri kurang dari 80 jumlah karakter. Hal ini memiliki tujuan untuk meningkatkan kenyamanan pada saat coding JavaScript. Apabila sebuah perintah JavaScript di dalam satu baris terlalu panjang, maka potonglah perintah tersebut menjadi dua baris aja. Usahakan untuk memotong perintah setelah operator (+,-,=), seperti pada contoh di bawah ini:

1

2

  document.getElementById(“demo”).innerHTML =

  “Hello Dolly.”;

 

3. Comments

Pada bahasa pemrograman JavaScript, terdapat komentar yang berguna untuk mencatat maksud dari sebuah atau beberapa baris kode. Untuk itu, maka pastikan kembali untuk menulis komentar dengan bahasa yang ringkas dan mudah untuk dimengerti. Terdapat dua cara menandai komentar di JavaScript.

 

  • Cara yang pertama adalah komentar satu baris yang diawali dengan tanda // seperti contoh berikut ini:
1

2

  // Change heading:

  document.getElementById(“myH”).innerHTML = “My First Page”;

 

  • Adapun cara yang kedua adalah dengan menulis komentar beberapa baris dengan tanda /* pada awal dan pada akhir komentar, seperti contoh berikut ini:
1

2

3

4

5

  /*The code below will change

  the heading with id = “myH”

  in my web page:

  */

  document.getElementById(“myH”).innerHTML = “My First Page”;

 

4. Case Sensitive

Bahasa pemrograman JavaScript memiliki sifat Case Sensitive, yang artinya ia membedakan antara penulisan huruf besar dan kecil. Contohnya pada variabel yang bernama helloworld, maka akan dianggap berbeda dengan perintah HelloWorld. Untuk itulah, diusahakan agar selalu konsisten dalam menulis kode. Sebab, kesalahan di dalam penulisan sekecil apapun dapat menyebabkan error pada website Anda. Apabila perlu, maka hanya gunakan huruf kecil pada saat coding JavaScript.

5. Statement Rules

Statement atau pernyataan adalah sebuah instruksi atau alur kerja pada sebuah program. Di dalam JavaScript, terdapat dua aturan baku di dalam penulisan sebuah pernyataan.

  • Yang pertama adalah simple statement yang diakhiri dengan titik koma (;), seperti pada contoh berikut ini:
1

2

3

4

5

6

7

8

  const cars = [“Volvo”, “Saab”, “Fiat”];

 

  const person = {

  firstName: “John”,

  lastName: “Doe”,

  age: 50,

  eyeColor: “blue”

  }; // Dengan titik koma

  • Adapun yang kedua adalah complex statement dapat diakhiri tanpa titik  koma seperti pada contoh berikut ini: 
1

2

3

  function toCelsius(fahrenheit) {

return (5 / 9) * (fahrenheit – 32);

} // Tanpa titik koma

6. Reserved Word

Reserved Words adalah sebuah kata-kata khusus yang tidak boleh digunakan sebagai nama variabel maupun fungsi. Pasalnya, kata-kata tersebut telah digunakan untuk menjalankan perintah bawaan pada bahasa pemrograman JavaScript. Berikut ini adalah daftar Reserved Words pada JavaScript yang wajib untuk Anda ketahui:

Berikut ini adalah aturan penulisan untuk beberapa Reserved Words di atas:

  • While:
1

2

3

4

  while (i < 10) {

text += “The number is “ + i;

i++;

  }

  • For:
1

2

3

for (let i = 0; i < cars.length; i++) {

text += cars[i] + “<br>”;

  }

  • Switch Case:
1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

switch (new Date().getDay()) {

case 0:

day = “Sunday”;

break;

case 1:

day = “Monday”;

break;

case 2:

day = “Tuesday”;

break;

case 3:

day = “Wednesday”;

break;

case 4:

day = “Thursday”;

break;

case 5:

day = “Friday”;

break;

case 6:

day = “Saturday”;

}

Tetapi selain memahami aturan mengenai penulisan kode di atas, tentunya Anda juga harus paham mengenai variabel. Berikut ini adalah penjelasan mengenai poin tersebut.

Baca juga: Mau Jadi JavaScript Developer Handal? Wajib Pelajari Konsep Dasar JavaScript Ini

Variabel JavaScript

Variabel adalah sebuah wadah yang digunakan untuk menampung nilai ataupun data pada bahasa pemrograman. Variabel yang dapat diberi nama ini, dapat menampung angka, tulisan, boolean, dan lain-lain.

Terdapat tiga tahapan di dalam menggunakan variabel pada saat belajar JavaScript, yaitu:

  1. Declaration – Tahapan mendaftarkan variabel ke dalam program yang akan ditulis.
  2. Initialization Tahapan menyiapkan memori yang nantinya akan digunakan oleh variabel.
  3. Assignment – Tahapan dalam menetapkan nilai spesifik untuk disimpan ke dalam variabel.

Contoh penerapannya adalah seperti ini:

2

  var x; //declaration & initialization

  x = 10; //assignment

Sedangkan tiga Reserved Words yang bisa Anda gunakan untuk mendeklarasikan variabel yaitu var, let, dan const. Tetapi bagi pemula, direkomendasikan untuk menggunakan var saja, sebab memiliki aturan yang lebih ringkas.

Berikut ini adalah beberapa aturan pembuatan variabel yang harus Anda perhatikan:

  1. Hindari Penggunaan Spasi – Apabila nama variabel terdiri dari dua kata, maka usahakan tidak menggunakan spasi sebagai pemisahnya. Sebaiknya, gunakan underscore seperti berikut ini saja:
1   var born_date;
  1. Hindari Awalan Angka – Penulisan angka tidak boleh digunakan sebagai awalan nama variabel, namun dapat digunakan untuk mengakhiri nama variabel, seperti berikut ini:
1

2

  var 1date; //ini salah

  var date1; //ini benar

  1. Gunakan camelCase – camelCase merupakan standar sebuah penulisan variabel yang direkomendasikan. Format dasarnya sendiri adalah seluruh kata pertama yang menggunakan huruf kecil dan huruf pertama kata kedua memakai kapital, contohnya seperti berikut:
1   var bornYear;
  1. Gunakan Shorthand – Shorthand adalah sebuah metode yang digunakan untuk menyingkat penulisan variabel. Adapun kegunaannya sendiri adalah supaya kode program yang dihasilkan menjadi lebih ringkas. Berikut ini contoh penerapannya:
1

2

3

  var name = “Arif”,

    age = 17,

    pass = true;

Dengan adanya Shorthand, maka Anda tidak perlu menuliskan var pada ‘age’ dan ‘pass’, meskipun mereka berdua sebenarnya merupakan variabel.

Setelah Anda belajar apa itu Variabel, selanjutnya silahkan pelajari apa itu tipe data JavaScript.

Tipe Data JavaScript

Seperti yang telah dijelaskan di atas, maka nilai atau value akan disimpan di dalam variabel. Nilai tersebut, dapat berisikan beberapa tipe data seperti berikut ini:

1. Number

JavaScript tidak seperti bahasa pemrograman lainnya. Ia tidak menggunakan tipe data angka yang berbeda-beda. Contohnya, integer, float, dan long. Ia hanya memiliki satu tipe angka saja, yaitu number yang sanggup menyimpan data hingga 64 bit. Di samping itu, JavaScript juga tetap dapat digunakan pada berbagai jenis bilangan, seperti:

  • Bilangan Bulat – Contohnya 10, 1500, dan 12345.
  • Bilangan Pecahan – Misalnya 3.14, 0.5, dan 100.00.
  • Bilangan Eksponensial – Contohnya 123e5 atau 123e-5.
  • Bilangan Negatif – Misalnya -0.25 atau -123.
  • Bilangan Spesial – Contohnya Infinity (10/0), -Infinity (-10/0), dan NaN (0/0).

2. String

Di dalam JavaScript, String merupakan tipe data yang digunakan untuk menuliskan data tekstual (plain text). Untuk dapat membuat string, maka Anda perlu menambahkan tanda petik pada teks tersebut. Dapat berupa petik dua (“”) atau petik satu (“). Pada dasarnya, tidak ada aturan baku yang menjelaskan kapan harus menggunakan tanda petik dua atau tanda petik satu. Namun demikian disarankan, untuk menggunakan petik dua dalam penulisan string. Kemudian, gunakan petik satu dalam penekanan di teks tertentu seperti:

1   “Besok adalah hari Jum’at”

Anda dapat menerapkan sebaliknya. Maka gunakan tanda petik satu untuk memulai string, apabila teks tertentu menggunakan tanda petik dua, maka Anda dapat menuliskan seperti ini:

1 ‘Mereka sedang melakukan kegiatan “Gerakan Tanam Pohon”’

3. Boolean

Nah, Boolean berguna untuk menentukan aksi berbeda dan mengatur alur kerja program. Boolean adalah sebuah tipe data di dalam JavaScript yang dimanfaatkan untuk memberikan nilai logika true ataupun false. Adapun contoh penggunaan Boolean di saat coding JavaScript adalah sebagai berikut:

1

2

  Boolean(10 > 20);

  false

4. Function

Function adalah tipe data dalam bentuk sebuah perintah yang dapat dimanfaatkan di bagian program yang membutuhkan. Untuk penggunaannya, Anda perlu membuat Function terlebih dahulu. Barulah setelah itu memanggilnya. Pada saat belajar JavaScript, terdapat dua jenis Function yang harus Anda ketahui, yaitu:

  • Built-in Function – Adalah Function bawaan milik JavaScript yang telah siap untuk digunakan. Contohnya alert(), confirm(), dan prompt().
  • User-defined Function – Adalah Function yang Anda buat sendiri. Adapun formatnya adalah function name Function().

Berikut ini adalah contoh penggunaan dari Function pada JavaScript:

1

2

3

  var x = myFunction(5, 4);

  function myFunction(a, b) {

    return a * b;

5. Array

Array adalah sebuah tipe data JavaScript yang digunakan untuk menampung lebih dari satu nilai dan memiliki index. Dengan Array, maka Anda dapat memasukkan tipe data yang berbeda di dalam satu Array. Selain itu, Array juga berguna untuk menghemat pemakaian variabel ketika coding JavaScript.

Anda dapat menggunakan Array dengan membuat kurung siku. Kemudian, menulis nilai Array di dalamnya dengan dipisahkan koma.

Contoh penulisan Array pada bahasa pemrograman JavaScript adalah seperti berikut ini:

1 var person = [“John”, “Doe”, 46];

6. Object

Hampir serupa dengan Array, Object juga merupakan tipe data yang memiliki lebih dari satu nilai. Yang membedakan adalah, Object tidak memiliki index tapi nama. Mengapa Anda harus menggunakan Object pada saat belajar JavaScript? Ternyata, Object dapat mengorganisir data menjadi lebih baik dari Array. Karena, Anda dapat memasukkan Function dan Array ke dalam Object. Hasilnya, Anda bisa menghemat baris kode yang dihasilkan saat coding JavaScript. Nah, berikut ini merupakan contoh pemakaian Object pada JavaScript:

1

2

3

4

5

6

7

8

  const person = {

  firstName: “John”,

  lastName : “Doe”,

  score : [5,7,8,10,9],

  fullName : function() {

    return this.firstName + ” ” + this.lastName;

    }

  };

Selain harus menguasai tipe data JavaScript, pastikan bahwa Anda juga mempelajari tentang operator JavaScript. Sebab, kedua hal ini saling berkaitan.

Baca juga: Sertifikasi JavaScript yang Saat Ini Banyak Dicari

Operator JavaScript

Pada JavaScript, operator adalah sebuah simbol yang digunakan untuk melakukan operasi. Baik itu perhitungan, perbandingan, atau logika. Nah, jenis-jenis operator JavaScript adalah sebagai berikut:

1. Aritmatika

Operator aritmatika adalah operator yang dimanfaatkan untuk melakukan perhitungan matematika. Contohnya seperti, penambahan, pengurangan, dan perkalian. Adapun contoh untuk pemakaian operator aritmatika di saat coding JavaScript adalah sebagai berikut:

1

2

3

  5 * 6;

  10 % 2;

  (1 + 2) / 3 * 6;

2. Penugasan

Pada saat belajar JavaScript, operator penugasan (assignment) adalah operator yang digunakan untuk mendeklarasikan nilai dari suatu variabel. Contohnya, operator penugasan dapat Anda lihat pada contoh berikut ini:

1

2

  var x = 10;

  x += 5;

3. Perbandingan

Maksud dari Operator perbandingan (comparison) adalah operator pada JavaScript yang digunakan untuk membandingkan nilai dari dua variabel. Adapun operator perbandingan ini, nantinya akan menghasilkan Boolean (true atau false). Berikut ini, merupakan contoh penggunaan operator perbandingan:

1

2

  10 <= 8;

  false

4. Logika

Operator logika adalah operator yang digunakan untuk menentukan sebuah logika dari beberapa value yang digabungkan. Mirip dengan operator perbandingan, operator yang satu ini, juga dapat menghasilkan Boolean. Contohnya adalah seperti ini:

1

2

3

  var x = 8;

  (x % 2 == 0) && (x < 10);

  true

5. String

Sesuai dengan namanya, operator string ini adalah operator yang digunakan untuk menggabungkan nilai dari tipe data string. Caranya adalah dengan menggunakan tanda + seperti pada operator aritmatika. Berikut ini contohnya pada saat coding JavaScript:

1

2

3

  var text1 = “John”;

  var text2 = “Doe”;

  var text3 = text1 + ” ” + text2;

6. Typeof

Operator typeof adalah operator yang digunakan untuk mengetahui tipe data dari suatu nilai. Berikut ini merupakan contoh penggunaan operator Typeof di dalam bahasa pemrograman JavaScript:

1

2

3

4

  typeof “John”                 // Returns “string”

  typeof 3.14                   // Returns “number”

  typeof false                  // Returns “boolean”

  typeof [1,2,3,4]              // Returns “object”

7. Kondisional

Yang dimaksud dengan operator kondisional adalah, operator yang digunakan untuk melakukan pengecekan pada suatu kondisi. Ia juga dapat menentukan nilai pada saat kondisi tersebut bernilai true dan false.

Contohnya adalah seperti ini:

1    

2

3

  var age = 26;

  var beverage = (age >= 21) ? “Beer” : “Juice”;

  “Beer”

Itu tadi beberapa operator yang Anda akan temukan pada saat belajar JavaScript. Berikutnya mari pelajari bagaimana cara menulis kode JavaScript.

Cara Menulis Kode JavaScript 

Terdapat dua cara yang bisa Anda coba untuk membuat kode JavaScript, yaitu:

1. Langsung di File HTML (Internal JavaScript)

Sesuai namanya, Anda dapat langsung memasukkan kode JavaScript pada file yang berformat HTML. Caranya adalah dengan menuliskan kode diantara tag <script> </script>, lalu tempatkan skrip tersebut pada tag <body>. Contohnya adalah seperti berikut ini:

 

1

2

3

4

5

6

7

8

  <!DOCTYPE html>

  <html>

  <body>

    <script>

        alert(“Ini adalah kode JavaScript!”)

    </script>

  </body>

  </html>

2. Terpisah dari File HTML (External JavaScript)

Cara kedua adalah dengan membuat file JavaScript terpisah, lalu menghubungkannya dengan file HTML. External JavaScript lebih direkomendasikan, karena:

  • Reusability – Dapat Memungkinkan JavaScript digunakan di banyak file HTML.
  • Readability – Dapat Membuat kode program menjadi lebih mudah untuk dibaca.
  • Conciseness – Dapat Meringkas jumlah baris kode yang akan dihasilkan.

Berikut ini adalah contoh penggunaan dari External JavaScript:

File HTML:

1

2

3

4

5

6

  <!DOCTYPE html>

  <html>

  <body>

    <script src=”script.js”></script>

  </body>

  </html>

File JavaScript:

1 alert(“Ini adalah kode JavaScript!”);

Pada poin berikutnya, Anda akan mempraktikkan bagaimana  membuat sebuah program sederhana dengan JavaScript

Cara Membuat Program Sederhana dengan JavaScript

Seperti yang telah dijelaskan, Anda akan membutuhkan web browser dan code editor di dalam mempraktikkan tutorial JavaScript. Nah, Anda dapat menggunakan browser Google Chrome dan editor Visual Studio Code.

Selain itu, Anda perlu menyiapkan sebuah folder di dalam komputer sebagai tempat untuk menyimpan file HTML dan JavaScript. Misalnya saja folder dinamakan dengan helloworld

Setelah menyiapkan beberapa hal di atas, berikut ini adalah tutorial JavaScript membuat program sederhana yang menampilkan pop up pada saat menekan sebuah tombol.

Langkah-langkahnya adalah sebagai berikut:

Pertama, buka Visual Studio Code dan buatlah sebuah file baru dengan cara klik File > New File. Setelah itu, tulislah kode berikut ini untuk membuat sebuah halaman HTML

1

2

3

4

5

6

7

8

9

10

11

12

  <!DOCTYPE html>

  <html lang=”en”>

  <head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Hello World</title>

  </head>

  <body>

    <h1>Ini adalah Program JavaScript Pertama Saya</h1>

  </body>

  </html>

 Simpan file dengan nama index.html.

 Selanjutnya buat lagi sebuah file baru, lalu ketikkan kode di bawah ini. Ini berguna untuk membuat fungsi supaya menampilkan pop up JavaScript.

1

2

3

  function button() {

    alert(“Ini adalah Tombol JavaScript”);

  };

 Kali ini simpan file dengan nama script.js. Kembali lagi ke file index.html, tambahkan kode berikut setelah tag </h1>. Fungsinya untuk menghubungkan file ini dengan file script.js yang tadi dibuat.

1

2

  <button onclick=”button()”>Klik Tombol Ini!</button>

    <script src=”script.js”></script>

Simpan perubahan pada file tersebut.

Baca juga: Keuntungan Belajar Bahasa Pemrograman Javascript

Penutup

Bahasa pemrograman JavaScript adalah bahasa yang paling cocok untuk Anda pelajari, apabila Anda adalah seorang pemula. Sebab, ia dapat digunakan secara gratis, tanpa membutuhkan instalasi rumit, serta punya dukungan komunitas dan ekosistem yang luas.

 Asalkan belajar dengan tekun, tentunya Anda akan semakin terbiasa dengan bahasa pemrograman ini. Apabila telah mahir, maka Anda akan dapat membuat website berbasis bahasa pemrograman JavaScript yang baik. Selanjutnya membuat online website tersebut, supaya dapat diakses oleh banyak orang. Demikian pembahasan mengenai cara belajar bahasa pemrograman JavaScript. Semoga bermanfaat ya!

Apakah Anda fresh Graduate, atau profesional IT yang sedang mencari pekerjaan impian? Jangan ragu-ragu untuk mendaftarkan diri di situs pencarian kerja khusus IT terpercaya dan menjanjikan, yaitu TOGI HR. Segera kirim CV Anda melalui email yang tertera di laman web dan raih masa depan cerah bersama karir yang cemerlang. Upgrade terus skill Anda saat ini dan jangan pernah berpuas diri atas pencapaian yang didapat saat ini ya!


[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=””][fusion_builder_row][fusion_builder_column type=”1_1″ spacing=”” center_content=”yes” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_image_id=”” background_color=”” background_image=”” background_position=”left top” undefined=”” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius_top_left=”” border_radius_top_right=”” border_radius_bottom_left=”” border_radius_bottom_right=”” box_shadow=”no” box_shadow_vertical=”” box_shadow_horizontal=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”no”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]

Klik dibawah ini untuk informasi tentang IT Training dan Info Loker seputar IT

[/fusion_text][fusion_button link=”https://api.whatsapp.com/send?phone=62816999735″ text_transform=”uppercase” title=”” target=”_self” link_attributes=”” alignment=”center” modal=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” color=”default” button_gradient_top_color=”” button_gradient_bottom_color=”” button_gradient_top_color_hover=”” button_gradient_bottom_color_hover=”” accent_color=”” accent_hover_color=”” type=”” bevel_color=”” border_width=”” size=”” stretch=”default” shape=”” icon=”fa-whatsapp fab” icon_position=”left” icon_divider=”no” animation_type=”fade” animation_direction=”static” animation_speed=”0.3″ animation_offset=””]Hubungi Kami[/fusion_button][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]


Leave a Reply

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