Pengenalan Javascript Dasar Bagi Pemula

Javascript ini sangat penting keberadaannya untuk membuat website menjadi lebih interaktif dan me...
Penulis
Admin
Kategori
Tutorial
Estimasi
4 menit baca
Dilihat
930
Posting
24 Jul 2022
Pengenalan Javascript Dasar Bagi Pemula Javascript ini sangat penting keberadaannya untuk membuat website menjadi lebih interaktif dan menarik. Contohnya untuk membuat slider, manipulasi HTML dll. Saat ini, javascript tidak selalu digunakan dalam dunia front-end Pengenalan Javascript Dasar Bagi Pemula
2022-11-25

Dalam dunia teknologi khususnya website, Javascript sangat penting untuk membuat sebuah website menjadi lebih interaktif. Contohnya untuk membuat slider gambar, menerapkan teknik manipulasi dalam HTML, dan masih banyak lagi. Pada zaman sekarang, Javascript dapat digunakan untuk berbagai macam hal seperti server, IOT, game, mobile application, program desktop dan lainnya, cukup keren bukan. 

 

(Belajar Javascript) Pengenalan Javascript Dasar Untuk Pemula

 

Hal ini membuat Javascript menjadi bahasa pemrograman yang paling sering digunakan dalam website perusahaan dan wajib untuk memahami fundamental untuk membuat banyak hal yang keren sesuai dengan kreatifitas kalian.

Oke... sekarang kita langsung saja kepembahasannya, kita berkenalan dulu dengan Javascript.

 

 

1. Apa itu Javascript

Javascript adalah bahasa pemrograman populer yang awalnya dirancang untuk browser. Seiring berkembangnya teknologi, bahasa pemrograman ini tidak hanya digunakan untuk keperluan browser saja, juga digunakan untuk membuat banyak hal lainnya seperti membuat game, server, IOT dan lainnya.

 

Javascript dapat digunakan untuk membuat games, website, server, iot, mobile app, validation

 

Sejarah berawal pada 1995 saat browser Netscape merilis browser mereka dan menciptakan sebuah teknologi yang bernama Livescript yang awalnya bernama Mocha dan berkembang dan berubah nama menjadi Javascript. Tidak mau kalah dengan Netscape, Microsoft pun membuat teknologi baru yang bernama JScript untuk browser Internet Explorer mereka.

Dengan ketatnya persaingan saat itu diantara Javascript dan JScript, pada tahun 1996 Netscape akhirnya mengajukan standarisasi kepada ECMA International dengan standarisasi ECMA-262, maka lahirnya kode standarisasi pada Javascript yaitu ECMAscript. Berikut adalah perilisan ES atau ECMAscript dari awal hingga saat ini:

  • ECMAscript 1 (perilisan tahun 1997)
  • ECMAscript 2 (perilisan tahun 1998)
  • ECMAscript 3 (perilisan tahun 1999)
  • ECMAscript 5 (perilisan tahun 2009)
  • ECMAscript 5.1 (perilisan tahun 2011)
  • ECMAscript 6 (perilisan tahun 2015)
  • ECMAscript 7 (perilisan tahun 2016)
  • ECMAscript 8 (perilisan tahun 2017)

 

2. Membuat Javascript pertama

Lalu bagaimana saya bisa belajar dasar dari bahasa pemrograman ini? langkah pertama yang dilakukan adalah dengan menyiapkan beberapa hal seperti text editor, bisa mengunakan Visual Studio Code atau Notepad++ dan browser seperti Google Chrome, Mozilla Firefox atau Microsoft Edge untuk menjalankan kode nantinya.

Untuk menggunakannya ada 2 cara yaitu dengan mengunakan metode inline atau external/file terpisah. Sekarang kita akan mencontohkan dengan mengunakan metode inline dulu. Setelah sudah mempersiapkan peralatan text editor dan browser, buat file baru dengan nama belajar-javascript.html dan masukan kode baris HTML seperti dibawah:

<!DOCTYPE html>
<html>
<head>
   <title>Belajar Javascript</title>
</head>
<body>
</body>
</html>

 

3. Mengunakan metode inline Javascript

Buat tag baru didalam body dengan nama tag script, dan masukan beberapa syntax kode sederhana, contoh seperti dibawah:

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Javascript</title>
</head>
<body>
  <script>
    console.log("Belajar Javascript");
  </script>
</body>
</html>

Save, lalu jalankan didalam browser, apa yang terjadi? tampilannya blank? ya betul.. sebenarnya dibalik itu, javascript sudah berhasil dieksekusi. Cara untuk mengetahuinya bisa dengan meilhatnya didalam console, klik kanan pada browser dengan melakukan inspect -element, pilih tab console.

Disana akan menampilkan pesan Belajar Javascript dimana kode yang tadi dibuat sudah berhasil. Jika ingin menampilkan text Belajar Javascript kedalam browser, diperlukan 1 baris kode Javascript tambahan yaitu:

document.write("Belajar Javascript");

Menjadi: 

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Javascript</title>
</head>
<body>
  <script>
    console.log("Belajar Javascript");
    document.write("Belajar Javascript");
  </script>
</body>
</html>

 

Dan sekarang coba refresh browser kalian dan hasilnya tampilan browser kalian sudah berhasil menampilkan text tambahan Belajar Javascript. Lanjut ke cara kedua yaitu dengan metode external atau file terpisah.

 

4. Mengunakan Javascript dengan metode external atau file terpisah

Lalu cara kedua yaitu dengan mengunakan external Javascript atau file terpisah, cara ini sangat umum digunakan oleh para developer karena kemudahannya dalam memaintenance, caranya adalah dengan membuat file baru dalam text editor kalian dengan nama belajar-javascript.js posisi file bersamaan dengan file belajar-javascript.html, pindahkan semua syntax kode didalam tag script tersebut kedalam file yang baru tadi dibuat lalu save.

Bagaimana caranya untuk menghubungkan file tadi kedalam HTML? untuk menghubungkannya kedalam HTML, kalian harus merubah tag script sebelumnya dengan syntax src yang bertujuan untuk manggil file yang sudah dibuat tadi kedalam HTML, contoh syntaxnya seperti ini:

<script src="belajar-javascript.js"></script>

Hasil akhirnya akan menjadi seperti ini:

<!DOCTYPE html>
<html>
<head>
  <title>Belajar Javascript</title>
</head>
<body>
  <script src="belajar-javascript.js"></script>
</body>
</html>

Cara ini biasanya digunakan untuk project-project besar karena sangat mudah untuk dimaintenance. Kita sarankan dari sekarang untuk dibiasakan dengan mengunakan metode external agar kedepannya bisa lebih ringan dalam memanage file-file  yang sudah dibuat. Dan selamat kamu sudah berhasil membuat kode Javascript pertama kalian dengan mengunakan metode Inline dan External.

Jika kalian sudah expert dan sepenuhnya mengerti dari bahasa pemrograman ini, kalian bisa mengembangkannya lagi dengan mengunakan Framework seperti Bootstrap, JQuery, React, Vue, Angular.js maupun lainnya.

 

5. Pentingnya memahami Console

Satu hal penting disini adalah kalian sangat perlu untuk memahami console. Apa itu console? console adalah sebuah tool atau alat untuk mendebugging kode javascript didalam browser.

var text = 'hello guys';
console.log(text);

Kenapa harus memahami console? karena dengan memahami console, kalian dapat menguji coba kode Javascript dan melakukan debugging apakah terjadi error atau tidak sebelum digunakan oleh user website kalian.

Console ini hampir tersedia didalam browser seperti Google Chrome, Mozilla Firefox, Microsoft Edge atau lainnya. Contoh pengunaan dalam Google Chrome dengan cara mengklik kanan didalam browser dan pilih inspect-element lalu cari tab console.

 

Kesimpulan

Javascript merupakan bahasa pemrograman yang populer dan hampir semua website diseluruh dunia, sudah dipastikan mengunakan Javascript begitupun Facebook, Google, Netflix atau Amazon. Sama seperti HTML dan CSS, Javascript merupakan hal dasar yang perlu dipahami oleh developer pemula. Dalam dunia kerja, khususnya dunia kerja teknologi, ketiga skill tersebut wajib kalian miliki dan kuasai.

Share