Cara menggunakan membuat program dengan javascript

Javascript adalah salah satu dari bahasa pemrograman yang populer. Javascript memiliki keunggulan yang cocok untuk pemula. Dalam belajar JavaScript kami menyarankan jika anda harus membangun sebuah website.

Daftar Isi

• 1 Belajar JavaScript Untuk Pemula
  • 1.1 Apa Itu JavaScript ?
  • 1.2 Mengapa Harus Belajar JavaScript
    • 1.2.1 1. Open Source Dan Gratis
    • 1.2.2 2. Tidak Memerlukan Instalasi
    • 1.2.3 3. Komunitas Yang Luas
  • 1.3 Apa Saja Yang Dibutuhkan Untuk Pelajari
  • 1.4 Aturan Penulisan Kode JavaScript
    • 1.4.1 1. Whitespace
    • 1.4.2 2. Line Length
    • 1.4.3 3. Comments
    • 1.4.4 4. Case Sensitive
    • 1.4.5 5. Statement Rules
    • 1.4.6 6. Reserved Words
  • 1.5 Variabel JavaScript
  • 1.6 Tipe Data JavaScript
    • 1.6.1 1. Number
    • 1.6.2 2. String
    • 1.6.3 3. Boolean
    • 1.6.4 4. Function
    • 1.6.5 5. Array
    • 1.6.6 6. Object
  • 1.7 Cara Menulis Kode JavaScript
    • 1.7.1 1. Langsung di File HTML ( Internal JavaScript )
    • 1.7.2 2. Terpisah dari file HTML (External JavaScript)
  • 1.8 Cara Membuat Program Sederhana Dengan JavaScript
  • 1.9 Yuk Belajar JavaScript Sekarang

Belajar JavaScript Untuk Pemula

Apabila anda ingin belajar JavaScript secara profesional anda bisa mengikuti pelatihan yang telah disediakan disini. Dimana artikel ini akan mencoba membahas JavaScript dengan lengkap. Dalam belajar JavaScript anda harus memahami seperti aturan coding JavaScript, penggunaan variabel dan tipe data hingga mempraktekannya sendiri.

Apa Itu JavaScript ?

Javascript adalah bahasa pemrograman yang digunakan untuk membangun website dari sisi client (client side). JavaScript pastinya akan membuat website anda menjadi dinamis dan iteraktif. Ini merupakan sesuatu yang tidak dapat dilakukan HTML maupun CSS.

Bahasa pemrograman JavaScript adalah bahasa singkat tingkat tinggi, berjenis scripting ( script language) Secara dinamis dan dijalankan oleh interpeter.

Dimana JavaScript memiliki aturan dalam penulisannya yang menyerupai bahasa manusia. Sehingga JavaScript mudah di pelajari untuk pemula sekalipun. Script language adalah bahasa yang tertanam didalam program yang lebih besar seperti web browser. Jadi yang menggunakan JavaScript adalah program tersebut.

Javascript dijalankan oleh interpreter. Maksunya ini harus diterjemahkan ke dalam bahasa yang dimengerti komputer dijalankan.

JavaScript adalah salah satu bahasa tertua yang ada di dunia. Ia sudah sejak 1995 dengan nama awal Mocca. Lalu berganti nama menjadi LiveScript hingga akhirnya bernama JavaScript dengan standarisasi dari EcmaScript.

EcmaScript sendiri adalah standarisasi bahasa scriptitng yang dibuat oleh European Computer Manufactures Association (ECMA). Karena cukup lama, Tak herjan jika JavaScript adalah bahasa pemrograman terpopuler berdasarkan survey dari Stack Overflow.

Baca Juga : Belajar Coding & Tips Cara Belajarnya Untuk Pemula

Mengapa Harus Belajar JavaScript

Berikut ini adalah beberapa alasan kenapa anda harus belajar JavaScript :

1. Open Source Dan Gratis

JavaScript adalah bahasa pemrograman open source. Artinya anda tidak perlu meminta izin lisensi untuk dapat menggunakan bahasa ini. Selain itu JavaScript juga GRATIS. Dengan begitu semua fiturnya dapat anda gunakan secaara penuh tanpa perlu membeli.

2. Tidak Memerlukan Instalasi

JavaScript berjalan di program lain seperti web browser. Semua web browser yang ada di pasaran sudah memiliki semacam engine untuk dapat menjalankan JavaScript.

3. Komunitas Yang Luas

Sebagai bahasa pemrograman terpopuler, JavaScript punya dengan komunitas yang luas dan suportif. Dengan begitu anda bisa langsung bertanya dengan komunitas. Mereka akan dengan senang hati menjadi solusi bagi anda untuk mengatasi error yang terjadi.

Apa Saja Yang Dibutuhkan Untuk Pelajari

Untuk bisa belajar JavaScript, Anda membutuhkan beberapa tools yang harus digunakan.

1. Web Browser

Web Browser berfungsi untuk menterjemahkan (interpreter) bahasa JavaScript ke bahasa komputer. Beberapa web browser yang bisa anda gunakan antara lain seperti Chrome , Mozile , Safari dan Beberapa lainnya.

2. Code Editor

Code Editor berfungsi untuk menuliskan sintaks atau kode program agar menjadi lebih sebuah program JavaScript. Beberapa code editor yang bisa anda coba diantarnya seperti Visual Studio Code, Sublime Text, Notepad++.

Hal Yang Perlu Dipahami Sebelum Menggunakan JavaScript

Sebelum anda pelajari jauh tentang JavaScript, Ada beberapa hal yang wajib anda bisa pahami. Mulai dari aturan penulisannya, Variabel, tipe data sampai operator dari JavaScript.

Aturan Penulisan Kode JavaScript

Bahasa pemprograman JavaScript punya beberapa aturan penulisan kode yang harus anda pahami, Diantarnya :

1. Whitespace

Whitespace merupakan area kosong berisi karakter tidak terlihat pada JavaScript seperti spasi, tab atau enter. ini berguna untuk menyusun kode agar terlihat lebih rapi. Penggunaan Whitespace tidak akan menambah ukuran file JavaScript secara signifikan, Sehingga kinerja website tetap optimal.

Berikut ini adalah contoh penggunaan saat coding JavaScript :

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
}

2. Line Length

Line Length atau panjang baris adalah jumlah karakter JavaScript ada dalam satu baris kode. Idealnya satu baris kode terdiri kurang dari 80 karakter. Hal ini bertujuan untuk meningkatkan kenyamanan saat coding JavaScript.

Jika sebuah perintah JavaScript dalam satu baris terlalu panjang, Potong perintah tersebut menjadi dua baris. Usahakan untuk memotong perintah setelah operator (+,-,=) atau koma (,) seperti contoh dibawah ini.

document.getElementById("demo").innerHTML =
"Hello Dolly.";

3. Comments

Pada JavaScript , Komentar berguna untuk mencatat maksud dari sebuah atau beberapa baris kode. Untuk itu pastikan menulis komentar dengan bahasa yang ringan dan mudah di mengerti.

Ada dua cara menandai Komentar JavaScript. Berikut ini contohnya dengan tanda // :

// Change heading:
document.getElementById("myH").innerHTML = "My First Page";

Cara yang kedua adalah komentar beberapa baris dengan tanda /* pada awal dan akhir komentar seperti ini :

/*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 bersifat Case Sensitive artinya ia membedakan penulisan huruf besar dan huruf kecil. Contohnya berada variabel ‘ helloworld’ akan dianggap perintah ‘HelloWorld’

5. Statement Rules

Statement Rules atau pernyataan adalah instruksi alur kerja sebuah program. pada JavaScript terdapat dua aturan dalam penulisan statement. Yang pertama adalah simple statement yang diakhiri dengan titik kome (;) seperti berikut :

const cars = ["Volvo", "Saab", "Fiat"];
 
const person = {
  firstName: "Winny",
  lastName: "Pooh",
  age: 60,
  eyeColor: "blue"
}; // Dengan titik koma

Sementar yang kedua adalah complex statement yang bisa diakhiri tanpa titik kome seperti dibawah ini :

function toCelsius(fahrenheit) {
  return (5 / 9) * (fahrenheit - 32);
} // Tanpa titik koma

6. Reserved Words

Reserved Words adalah kata kata khusu yang tidak boleh untuk digunakan sebagai nama variabel atau fungsi. Pasalnya kata kata tersebut sudah dipakai untuk menjalkan perintah bahawan pada bahasa pemrograman JavaScript.

Berikut ini adalah daftar Reserved Words JavaScript :

Berikut ini adalah aturan penulisannya untuk beberapa Reseved Words diatas :

While

while (i < 10) {
  text += "The number is " + i;
  i++;
}

For

for (let i = 0; i < cars.length; i++) {
  text += cars[i] + "
";
}

Switch Case

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";
}

Baca Juga : Coding: Apa Itu Coding ? Pengertian dan Manfaat Belajarnya

Variabel JavaScript

merupakan sebuah wadah yang digunakan untuk menampung nilai atau data pada bahasa pemrograman. Variabel yang diberi nama ini bisa menampung angka, tulisan , boolean dan lain – lain.

Ada tiga tahap dalam menggunakan variabel ketika belajar JavaScript yaitu :

• Declaration – Tahap mendaftarkan variabel ke dalam program yang ditulis
• Initialization – tahap menyiapkan memori yang nantinya digunakan untuk variabel.
• Assignment – tahap menetapkan nilai spesifi untuk disimpan ke dalam variabel.

Contoh penerapannya seperti ini :

var x; //declaration & initialization
x = 10; //assignment

Berikut ini beberapa aturan pembuatan variabel yang harus anda perhatikan

• Hindari Penggunaan Spasi
  jika nama variabel terdiri dari dua kata , jangan gunakan spasi sebagai pemisah. Sebaiknya gunakan underscore seperti berikut :

  var born_date;

• Hindari Awalan Angka
  Angka tidak boleh digunakan sebagai awalan nama variabel, Tapi bisa digunakan untuk mengakhiri nama variabel seperti ;

  var 1date; //ini salah
  var date1; //ini benar

• Guanakan CamelCase
  CamelCase adalah standar penulisan variabel yang direkomendasikan. Format dasarnya adalah seluruh kata pertama memakai huruf kecil dan huruf pertama kata kedua memakai kapital, contohnya ;

  var bornYear;

• Gunakan Shorthand
  Shorthand adalah metode yang digunakan untuk menyingkat penulisan variabel. Gunanya agar kode program yang dihasilkan jadi lebih ringkas. Berikut adalah contohnya :

  var name = "Arif",
      age = 17,
      pass = true;

Tipe Data JavaScript

Seperti yang sudah sedikit dijelaskan diatas, Nilai atau value disimpan pada variabel. Nah nilai tersebut berisi beberapa tipe data berikut :

1. Number

Tidak seperti bahasa pemrograman lain, JavaScript tidak memakai tipe data angka yang berbeda – beda. Misalnya integer, float dan long. Ia hanya punya satu tipe angka yaitu number yang sanggup menyimpan data hingga 64bit.

JavaScript bisa menggunakan berbagai jenis bilangan seperti :

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

2. String

Pada JavaScript adalah tipe yang digunakan untuk menuliskan data tekstual (plain text). Untuk membuat string, Anda perlu menambahkan tanta petik pada teks tersebut. Contohnya seperti ini :

"Besok adalah hari Jum’at"

Mereka juga bisa menerapkan sebaliknya. Gunakan petik satu untuk memulai string, Jika teks tertentu memakai tanda petik satu untuk memulaistring, Jika teks tertentu memakai tanda petik dua seperti dibawah ini :

‘Mereka sedang melakukan kegiatan “Gerakan Tanam Pohon”’

3. Boolean

Boolean adalah sebuah tipe data JavaScript yang digunakan untuk memberikan nilai logika true atau false. Nah Boolean berguna untuk menentukan aksi berbeda dan mengatur alur kerja program.

Contoh penggunaan Boolean saat coding JavaScript sebagai berikut :

Boolean(10 > 20);
false

4. Function

Function adalah tipe data dalam bentuk perintah yang digunakan untuk bagian program yang memerlukan. Untuk menggunakannya anda perlu membuat Function terlebih dahuluBaru kemudian memanggilnya.

5. Array

Array adalah tipe data javascript yang digunakan untuk menampung lebih dari satu nilai yang memiliki index. Dengan Arrat anda bisa memasukan tipe data yang berbeda dengan satu array.

Contoh Array :

var person = ["John", "Doe", 46];

6. Object

Mirip dengan Array, Object adalah tipe data yang memiliki lebih dari satu nilai. Bedanya, Object tidak punya index tapi nama.

Kenapa Anda harus menggunakan Object saat belajar JavaScript? Ternyata, Object dapat mengorganisir data lebih baik dari Array. Sebab, Anda bisa memasukkan Function dan Array pada Object.

Cara Menulis Kode JavaScript

Ada dua cara yang bisa anda coba untuk membuat kode JavaScript yaitu ;

1. Langsung di File HTML ( Internal JavaScript )

Sesuai dengan namnya anda bisa langsung memasukannya kedalam kode JavaScript apada file yang berformat HTML. Caranya dengan menuliskan kode diantara tag lalu tempatkan skrip tersebut pada tag

Contohnya seperti berikut ini :

2. Terpisah dari file HTML (External JavaScript)

Cara kedua adalah dengan membuat file JavaScript terpisah, Lalu menghubungkannya dengan file HTLM. Eksternal JavaScript lebih direkomendasikan karena :

• Reusability yaitu memungkinkan JavaScript digunakan di banyak file HTML
• Readibility yaitu membuat kode program jadi lebih mudah di baca
• Conciseness yaitu meringkas jumlah baris kode yang dihasilkan.

Berikut ini adalah contoh penggunaan Ekternal JavaScript :

File HTML :

File JavaScript

alert("Ini adalah kode JavaScript!");

Cara Membuat Program Sederhana Dengan JavaScript

Seperti yang sudah dijelaskan , Anda membutuhkan web browser dan code editor untuk mempraktikan tutorial JavaScript. Nah disini kami mengguanakn browser Google Chrome dan Editor Visual Studio Code.

Selain itu, Anda perlu menyiapkan sebuah folder pada komputer sebagai tempat menyimpan file HTML dan JavaScript. Di sini kami membuat folder dengan nama helloworld.

Berikut ini adalah langkah – langkah berikutnya :

Pertama , Buka file Visual Studio Code dan buat file baru dengan cari Klik > New File. Setelah itu tulis kode berikut membuat halaman HTML :

    
    
    
    


    
Ini adalah Program JavaScript Pertama Saya

Simpan file dengan nama index.html

Selanjutnya buat lagi sebuah file, Lalu ketikan kode dibawah ini. Gunanya untuk membuat fungsi untuk menampilkan popup JavaScript.

function button() {
    alert("Ini adalah Tombol JavaScript");
};

Simpan file dengan nama script.js

Kembali lagi ke file index.html, Tambahkan kode berikut setelah tag . Fungsinya untuk menghubungkan file dengan script.js yang tadi dibuat.

Klik Tombol Ini!
    

Lalu simpan perubahan pada file tersebut. Selanjutnya buka folder helloworld, Klik kanan file index.html > open with > Google Chrome. Anda akan melihat tampilan seperti tampilan seperti ini.

Yuk Belajar JavaScript Sekarang

Anda mau belajar JavaScript , Silahkan ikuti kelas Full Stack Develepor yang berada di ITBOX. Nikmati promo terbaru dari ITBOX untuk belajar JavaScript.

Bagaimana cara menjalankan JavaScript?

JavaScript pakai aplikasi apa?

Bagaimana cara yang benar untuk menggunakan file JavaScript di HTML?

Bagaimana cara membuat sebuah fungsi di JavaScript?