Tag: dasar javascript

Photo by Clément Hélardot on Unsplash

Mengawali pembelajaran terhadap suatu Bahasa pemograman apapun, harus mengenal tentang variable.

(more…)

Tag: dasar javascript

Mengenal Variabel

Dalam kamus besar bahasa Indonesia (KBBI), Variabel adalah suatu data yang berubah – ubah, bermacam – macam. Jadi, jika kita hubungkan kedalam suatu bahasa pemrograman maka variabel adalah suatu simbol yg digunakan untuk menyimpan sebuah data, data tersebut tidaklah tetap suatu waktu bisa berubah. Dalam javascript, penulisan variabel di mulai dengan simbol var. Perhatikan contoh dibawah ini :

var a = 5;
var b = 7;
var hasil = a+b;
console.log(hasil);

 

(more…)

Tag: dasar javascript

Photo by Fili Santillán on Unsplash

Artikel ini merupakan artikel lanjutan dari series Pembelajaran Fundamental Javascript. Kali ini kita akan membahas bagaimana Pengenalan javascript bagian 2 menyisipkan dan menulis kode javascript. seperti halnya CSS, javascript bisa kita tulis melalui 3 cara :

  1. event tertentu pada elemen html seperti onlick, onchange, onmouseover, onmouseout, onkeydown, onload, dll
  2. internal javascript disisipkan pada tag head atau didalam body, diawal atau diakhir document
  3. external javascript, Javascript disisipkan pada file terpisah dengan file html

Oh iya sebelum kita belajar lebih lanjut mengenai javascript, alangkah baiknya terlebih dahulu kita memiliki kemampuan dasar HTML/CSS dan jangan lupa untuk menginstall browser seperti Google Chrome, Modzilla Firefox, atau Safari (dengan catatan: selain Internet Explorer/Microsoft Edge). Jika rekan-rekan disini belum memahami apa itu HTML/CSS atau bahkan tidak mengenal browser sama sekali, rekan-rekan bisa baca artikel Dasar Pemrograman Web  terlebih dahulu. Untuk lebih jelasnya, mari kita liat contoh penempatan sintaks javascript di 3 tempat yang berbeda.

Pada script diatas kita menyisipkan langsung code javascript kedalam event onclick, tanpa menyisipkan code <script> terlebih dahulu. Pembahasan lebih lanjut mengenai javscript events akan kita bahas di pertemuan selanjutnya. Perhatikan contoh selanjutnya dibawah ini.

Pada script diatas kita menyisipkan function ke dalam sebuah event, lalu menuliskan function tersebut didalam tag <script>. tag ini bisa kita sisipkan di head, body atau di tengah-tengah document. namun perlu diketahui tanpa event tertentu, pastikan javascript dijalankan setelah semua elemen html di load terlebih dahulu. setelah kita memahami proses dari kedua contoh script diatas, mari kita buat kode javascript dengan file terpisah.

buatlah tag html dengan script seperti dibawah ini, lalu simpan dengan nama belajar_javascript.htm

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Belajar javascript</title>
  </head>
  <body>
    <h3 id="title">Mari kita belajar javascript</h3>
    <button id="changeBtn">Click here to change title</button>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

 

Perhatikan baris dengan tag <script type=”text/javascript” src=”app.js”></script>, itu artinya kita sedang memanggil kode javascript dengan nama file app.js. Mari kita buat file selanjutnya, lalu simpan dengan nama app.js

functionchangeTitle(){ 
    document.getElementById('title').innerHTML = 'Mengenal dasar-dasar Javascript' 
}

 

document.getElementById(“changeBtn”).addEventListener(“click”,changeTitle);

pada script diatas, kita membuat function dengan nama changeTitle(). dalam function tersebut, kita menyisipkan kode untuk merubah text dari id title. sedangkan baris selanjutnya adalah kita memasukkan event listener untuk memanggil function changeTitle kedalam element html yang memiliki id changeBtn. perhatikan kembali kode html di belajar_javascript.html, disana kita akan melihat elemen dengan id changeBtn.

Demikian penjelasan singkat yang bisa Mangcoding Share mengenai pengenalan javascript bagian 2. mudah-mudahan rekan-rekan diberikan kemudahan dalam proses belajar. ikuti terus blog ini, insya allah materinya akan saya update secara berkala. Jangan lupa share ke teman-teman yang baru belajar.

Tag: dasar javascript

Photo by Pankaj Patel on Unsplash

Link MangcodingKenapa Javascript?

Javascript merupakan salah satu bahasa pemrograman yg harus dikuasai dalam pembuatan web. dan pada artikel ini kita akan belajar mengenai Javascript atau Pengenalan Javascript, setidaknya ada 3 bahasa yg wajib dikuasai oleh seorang web developer :

  1. HTML untuk membuat sebuah layout halaman web
  2. CSS untuk mengatur tampilan, tata letak, background dan color dari suatu elemen web
  3. Javascript untuk mengatur tingkah laku suatu eleman secara interaktif

Dalam perkembangannya javascript saat ini tidak hanya mendukung pemrograman web saja, bahkan javascript saat sudah bisa menghandle backend system, mobile, server, desktop programming dan banyak lagi. anda bisa mencari beberapa artikel mengenai hal ini, salah satunya link ini

http://www.creativebloq.com/web-design/things-you-didnt-know-javascript-could-do-6122835

Melalui blog ini, saya akan mencoba berbagi pengalaman belajar saya untuk menjadi seorang web developer. Terlepas dari siapapun pembaca sekalian, semua teknologi diatas bisa kita kuasai jika kita bersungguh-sungguh. Ada ungkapan alah bisa karena biasa, jadi untuk menjadi seorang yg expert di suatu bidang yg dibutuhkan adalah membiasakan melakukan suatu hal berulang-ulang dan konsisten.

ada beberapa refferensi saya untuk belajar javascript, dua diantaranya adalah dibawah ini yg saya pakai sebagai acuan untuk menulis blog ini:

Link MangcodingApa yang bisa dilakukan Javascript?

1. javascript bisa merubah konten html

Kita bisa mengubah elemen html berdasarkan nama elemen, id, class dan selector lainnya. dibawah ini akan saya contohkan cara mengubah elemen html menggunakan id (document.getElementById).

2. javascript bisa merubah attribut elemen html

Kita bisa mengubah value daari suatu attribute elemen dengan menggunakan selector kemudian menuliksan nama attribute. dibawah in akan saya contohkan cara mengubah attribute src pada gambar dengan selector getElementById.

3. javascript bisa merubah style css

Kita bisa mengubah style dari suatu attribute elemen dengan menggunakan selector kemudian menambahkan style dan value dari style itu. dibawah in akan saya contohkan cara mengubah background dengan menggunakan selector getElementById.

Demikian penjelasan singkat mengenai pengenalan javascript yang bisa Mangcoding sharing. tertarik untuk belajar lebih lanjut? kita pelan-pelan saja, semua pasti bisa kita mulai dari fundamental banget. jadi tidak usah khawatir. jika ada pertanyaan seputar materi, silakan kirimkan di kolom komentar.