Belajar Pemrograman Javascript Lengkap Untuk Pemula

Belajar Pemrograman Javascript Lengkap Untuk Pemula

Pada artikel kali ini kita akan membahas banyak point yang berkaitan dengan belajar pemrograman javascript lengkap untuk pemula. Dimana belajar pemrogram javascript untuk pemula ini dibuat secara lengkap dan terdapat artikel pendukung dari tiap-tiap sub pembahannya.

Baca Juga: Jenis-jenis Bahasa Pemrograman

Oke jangan berlama-lama, langsung saja kita bahas materinya.

Berkenalan Dengan Javascript

Bapada bagian pertama kita akan berkenalan degan bahasa pemrograman javascript, dimana javascript merupakan bahasa pemrograman yang tentunya digunakan untuk membuat suatu halaman website yang dinamis dan juga interaktif. Dengan adanya javascript tentunya website akan serasa lebih hidup karena terdapatnya elemen-elemen dan animasi yang dapat menarik perhatian serta melibatkan pengunjung website dalam interaksinya.

Bahasa pemrograman javascript merupakan bahasa pemrograman yang dijalankan pada sisi client, yang dapat kita artikan kode javascript dijalankan pada browser pengguna atau client. Namun dengan kemunculannya teknologi Note.js dan lainnya, Bahasa pemrograman javascript kini dapat digunakan sebagai bahasa pada sisi server dan membuatnya sangat serba guna. Yang dimana Javascript ini sangat handal dalam mengembangkan sisi fornt-end website serta saling bersinergi dengan HTML dan juga CSS.

Jika teman-teman ketika menggunakan kotak penelusuran atau search box pada beranda (homepage) di suatu website, memeriksa skor ataupin pertandingan olahraga secara langsung pada situs berita, Kemungkinan besar teknologi dari javascript yang mengaktifkan dan menjalankannya untukmu.

Baca Juga: Sejarah Pemrograman Javascript

Belajar Pemrograman Javascript Pemula

Pada bagian kedua kita akan membahas mengenai tutorial javscript lengkap untuk pemula, dimana point-point yang disajian dibawah ini merupakan point-point penting yang harus teman-teman kuasai dalam pemrograman javascript, yang nantinya akan mempermudah untuk teman-teman dalam membuat aplikasi website yang melibatkan bahasa pemrograman javascript.

Belajar Array Javascript

Belajar array javascript merupakan suatu objek, sepeti halnya dengan properti dan metode array pada umumnya. Array pada pemrograman javascript tentunya memiliki beberapa ciri sebagai berikut:

  1. Array pada pemrograman javascript merupakan suatu variabel yang berisi banyak nilai atau item.
  2. Sintaks pada array javscript sangat mirip seperti variable biasanya.
  3. Array pada pemrograman javascript digunakan untuk menyimpan daftar item yaitu (nama, dulu dan lain-lain).
  4. Array pada pemrograman javascript merupakan variable yang dapat berisikan lebih dari satu objek.
  5. Terdapat dua cara untuk dapat mendefinisikan sebuah array dalam javascript, tetapi ini dianggap sebagai praktik yang tentunya lebih baik untuk menggunakan suatu metode yang dinamakan literal array.
  6. Array pada javascript dapat digunakan untuk menyimpan fungsi, objek dan juga lainnya.
  7. Array memiliki berbagai metode dan juga properti yang berguna.

Cara Membuat Array Pada Javascript

Pada bagian cara membuat array pada javascript akan disajikan syntax array dan juga penggunaannya dalam pemrograman javascript. Ketika teman-teman perlu untuk mendeskripsikan daftar dari suatu item, teman-teman tentunya harus menempatkan mereka kedalam suatu variable yang berbeda seperti berikut ini:

var mahasiswa1 = "Rizal";
var mahasiswa2 = "Asep";
var mahasiswa3 = "Agus";

Tetapi tentunya tidak semudah membuat variable baru untuk setiap nilainya, cara seperti diatas sangat tidak direkomendasikan karena jika kalian mempunyai item contohnya 100 maka akan sangat sulit dan rawan terjadi kesalahan dalam penulisan variable dan objek yang berbeda.

Untuk memperbaiki permasalahan tersebut, teman-teman dapat menggunakan array pada pemrograman javascript. Karena dengan menggunakan array tentuya dapat menampung lebih dari satu nilai, kemudian ketika teman-teman ingin mencari item dalam array, teman-teman cukup menggunakan nomor indeksnya yang dimulai dari angka 0.

Array sangat berguna jika teman-teman memiliki data nilai yang memiliki jenis yang sama. Tetapi penggunaan objek akan lebih baik jika teman-teman mempunyai jenis yang berbeda.

Sintaks yang digunakan untuk membuat array pada javascript tentunya sangat mirip dengan variable javascipt biasa. yang harus kalian lakukan yaitu:

  1. Mendeklasikan atau mendefisinikan variable (var).
  2. Memberi nama variable dengan(array_name).
  3. Memberi tanda sama dengan (=).
  4. Diikuti dengan braket persegi ([).
  5. Membuat daftar urut item seperti berikut ([“item1″,”item2”,…]).
  6. Jangan lupa ditutup dengan kurung siku (]).
  7. Hasil akhirnya seperti berikut: var array_name = [“item1″,”item2”,…];

Yang harus diingat adalah jika nilainya adalah string (teks) maka kalian harus merangkumnya dalam tanda kutip. Jika tidak, item yang sudah didaftarkan pada array tidak akan terbaca oleh javascript. Aturan tersebut tidak berlaku untuk array.

Dalam array penulisan spasi dan jeda baris tidak penting. Dengan deklarasi tentunya dapat menjangkau beberapa baris:

const cars = [
    "BMW",
    "Honda",
    "Kawasaki"
];

Kita juga dapat membuat array pada javascript dengan menyediakan elemen contohnya seperti berikut:

const motor = [];
motor[0]= "Honda";
motor[1]= "Yamaha";
motor[3]= "BMW";

Selanjutnya kita juga dapat menggunakan kata kunci untuk membuat array pada javscript, contohnya dengan memberikan nilai kepada array tersebut:

const motor = new Array("Honda", "Yamaha", "BMW");

Selanjutnya kita akan mengenal javascript array sort, silahkan simak pembahasan dibawah ini.

Array Sort Pada Javascript

Array sort pada javscript merupakan suatu metode yang dapat memungkinkan kalian untuk mengurutkan elemen dari suatu array yang berada di tempat. Selain dapat mengembalikan array yang diurutkan, sort() metode ini dapat mengubah posisi elemen dalam array asli.

Secara defaultnya, metode sort() dapat mengurutkan elemen array dalam suatu urutan naik dengan nilai terkecil terlebih dahulu dan juga nilai terbesar terakhir.

Pada metode sort() gips elemen untuk string dan dapat membandingkan string untuk menentukan perintahnya. Perhatikan contoh berikut ini:

let numbers =  [0, 1, 2, 3, 10, 20, 30]; numbers.sort(); console.log(numbers);

Pada contoh script diatas maka akan menghasilkan output seperti berikut:

[0, 1, 10, 2, 20, 3, 30]

Dalam hasil diatas kita akan melihat hasil dari metode sort() yaitu menempatkan angka 10 sebelum angka 2 karena string “10” muncul sebelum angka “2” saat melakukan perbandingan dari string.

Untuk memperbaiki permasalahan diatas, maka kita harus menggunakan fungsi perbandingan ke dalam metode sort(). Metode ini akan menggunakan fungsi membandingkan untuk dapat menentukan perintah elemen, berikut merupakan pengaplikasian dari sintaks sort() method:

array.sort(comparefunction)

Pada sort() metode menerima suatu argumen opsional yang merupakan suatu fungsi yang dapat membandingkan dua buah elemen array. jika teman-teman menghilangkan suatu fungsi perbandingan, sort() metode ini dapat mengurutkan elemen dengan urutan pengurutan berdasarkan nilai titik kode Unicode.

Fungsi dari membandingkan sort() metode untuk menerima dua buah argumen dan mengembalikan nilai yang menentukan ururtan, Dibawah ini merupakan contoh sintaks dari fungsi compare:

function compare(a, b) {// ...}

Fungsi compare() menerima dua buah argumen yaitu a dan b. Metode sort() akan mengurutkan elemen berdasarkan nilai kembalinya compare() fungsi dengan aturan seperti berikut ini:

  1. Jika compare(a,b) kurang dari nol, sort() metode yaitu dengan mengurutkan a ke indeks yang lebih rendah dari b. dengan kata lain a akan didahulukan.
  2. Jika compare(a,b) lebih besar dari nol, sort() method akan mengurutkan b ke dalam indeks yang lebih rendah dari a, yaitu b akan didahulukan.
  3. Jika compare(a,b) mengembalikan angka nol, sort() method menganggap a sama dengan b dan tentunya akan membiarkan posisinya tidak berubah.

Untuk memperbaiki urutan atau permasalahan nomor, teman-teman dapat menggunakan sintaks dibawah ini:

let numbers = [0, 1 , 2, 3, 10, 20, 30 ]; numbers.sort( function( a , b){ if(a > b) return 1; if(a < b) return -1; return 0; }); console.log(numbers);

Hasilnya akan muncul seperti berikut:

[ 0, 1, 2, 3, 10, 20, 30 ]

Kalian juga tentunya dapat mendefinisikan fungsi perbandingan dengan menggunakan sintaks fungsi panah, untuk contoh nya seprti berikut:

let numbers = [0, 1 , 2, 3, 10, 20, 30 ]; numbers.sort((a,b) => { if(a > b) return 1; if(a < b) return -1; return 0; }); console.log(numbers);

Dan berikut merupakan cara yang paling sederhana karena elemen dari array hanya berupa angka:

let numbers = [0, 1, 2, 3, 10, 20, 30]; numbers.sort((a, b) => a - b); console.log(numbers);

Array Filter Pada Javascript

Materi selanjutnya belajar pemrograman javascript pemula akan berkenalan dengan array filter pada javascript, dimana nantinya kita dapat menggunakan fungsi filter array javascript. Akan disajikan juga sintaks dan kode program untuk menambah pemahaman teman-teman dengan konsep yang lebih baik.

Apa yang dilakukan fungsi filter Javascript?

Fungsi larik filter pada javascript digunakan untuk memfilter larik berdasarkan dari kriteria yang sudah ditentukan. Setelah melakukan filter, ia akan mengembalikan array dengan nilai yang melewati filter.

Fungsi dari filter javascript sendiri adalah untuk mengulangi nilai yang terdapat dalam larik dan mengembalikan nilai yang lurus. Kriteria pencarian dalam fungsi filter javascript diteruskan dengan menggunakan filte callbackfn.

Fungsi panah juga dapat digunkaan untuk membuat script array filter javascript lebih mudah dibaca.

Sintaks Filter Pada Javascipt():
array.filter(function(value, index, arr), thisValue)

Pada contoh script diatas, array mengacu pada larik asli yang ingin kalian filter.

Parameter:

1. function – yang dibutuhkan. Suatu fungsi atau kriteria pencarian yang akan digunakan untuk memfilter nilai dan array

  • value – Diperlukan, element saat ini yang perlu difilter
  • index – Opsional, jika teman-teman ingin memulai literasi dari indeks tertentu.
  • arr – Objek array yang dipanggil

2. thisValue – Opsional, nilai yang terdapat ini tentunya akan diteruskan jika parameternya kosong.

Untuk pembahasan lebih rinci silahkan baca artikel dibawah ini. Karena banyak yang akan dibahas mengenai Array filter pada javascript.

Baca Juga: Filter Array Pada Javascript

Belajar Function Pada Javascript

Belajar pemrograman javascript pemula ini kita akan belajar javascript function parameter, dimana function atau fungsi merupakan salah satu blog bangunan medasar dalam Javascript. Function dalam javascript hampir mirip dengan prosedur- satu set pernyataan yang dapat melakukan tugas atau yang dapat menghitung nilai, tetapi agar prosedur dapat memenuhi syarat sebagai suatu fungsi, yang dimana harus mengambil beberapa input dan mengembalikan output dimana tedapat beberapa hubungan yang sangat jelas antara masukan dan juga keluaran. Untuk menggunakan suatu function parameter pada javascript, kalian harus mendefinisikan di suatu tempat dalam suatu lingkup dari mana kalian ingin memanggilnya.

Sintaksis:

Nama fungsi(paramet1, paramet2, paramet3,paramet4) {
    // Pernyataan
}

Aturan Pada Function Parameter

  • Kita tidak perlu menentukan tipe data untuk parameter dalam definisi suatu fungsi.
  • Itu tidak harus melakukan tipe berdasarkan suatu fungsi javascript yang diteruskan.
  • Itu tidak memeriksa jumlah dari argumen yang diterima.

Parameter

Name : Ini digunakan untuk menentukan nama fungsi tersebut.

Argumen : Ini disediakan pada bidang argumen fungsi.

Parameter Default Pada Function Parameter

Jika pada suatu fungsi dipanggil dengan argumen yang hilang (kurang dari yang kita sudah deklarasikan), nilai yang hilang diatur menjadi undefined.

Terkadang hal tersebut dapat diterima, tetapi kadang juga akan lebih baik untuk menetapkan nilai default ke parameter, untuk contohnya seperti dibawah ini:

function namaFunction(x, y) {
  if (y === undefined) {
    y = 2;
  }
}

Pada ECMAScript 2015 dapat memungkinkan nilai parameter default dalam deklarasi suatu function parameter, contohnya seperti dibawah ini:

function (x, y = 2) {
  // function code
}

Untuk pembahasan lebih rinci silahkan baca artikel dibawah ini. Karena banyak yang akan dibahas mengenai Parameter default pada function parameter.

Baca Juga: Belajar Fungsi Pada Javascript

Cara Membuat Objek Javascript

Pada bagian ini kita akan belajar cara membuat objek pada javascript dimana Objek sendiri merupakan variabel yang berisikan nilai (properti) dan fungsi (method), pada bahasa pemrograman ini yaitu javascript, objek merupakan bagian yang sangat penting, apabila teman-teman mampu memahami objek pada javascript dengan baik maka kita akan dengan mudah untuk mempelajari bahasa pemrograman javascript ini.

Contoh pada pembelajaran kali ini adalah kita akan mencoba membuat objek Motor:

Lalu bagaimana kita memodelkan objek motor tersebut pada pemrograman javascript, berikut merupakan contoh penerapannya:

var motor = { nama : 'Kawasaki H2R', merek : 'Kawasaki', warna : 'Metalik' };

Agar kita lebih mudah untuk memahaminya, dapat ditulis juga seperti berikut ini:

var motor = { 
    nama : 'Kawasaki H2R', 
    merek : 'Kawasaki', 
    warna : 'Metalik'
};

Dari contoh diatas kita barusaja membuat suatu properti dengan menggunakan objek motor, dimana properti (variabel) merupakan suatu nilai dari objek motor yang berisikan properti nama Kawasaki H2R, merek Kawasaki, warna Metalik.

Sedangkan method merupakan perilaku dari objek (fungsi), Untuk script lengkapnya seperti berikut ini:

var motor = { 
    nama : 'Kawasaki H2R,', 
    merek : 'Kawasaki', 
    warna : 'Metalik'
};
 
// method
start = function() {
     console.log('Ini method start motor');
};

Selanjutnya untuk mengakses objek yaitu dengan menggunakan tanda titik dan selanjutnya diikuti dengan nama properti dan juga method.

Dibawah ini merupakan contoh script yang digunakan untuk mengakses objek.

// cara akses variabel objek motor
console.log(motor.nama);
 
// cara akses method start
start();

Untuk pembahasan lebih rinci silahkan baca artikel dibawah ini. Karena banyak yang akan dibahas mengenai Objek pada javascript.

Baca Juga:

Penggunaan Fungsi Date() Pada Javascript

Terdapat sebuah fungsi khusus yang disediakan oleh bahasa pemrograman javasript untuk menampilkan tanggal. Kita juga dapat menggunakan fungsi Date() untuk menampilkan tanggal pada pemrograman PHP. dan untuk mengatur format tanggal yang akan ditampilkan, kalian dapat menyesuaikan dengan memberikan/mengisi format tanggal sesuai dengan keinginan didalam paramater fungsi Date().

Yang harus teman-teman perhatikan yaitu, pada bahasa pemrograman javascrupt memiliki sifat case sensitive, yang artinya penulisan pada javascript sangat berpengaruh sekali mengenai besar atau kecilnya suatu huruf. Jadi untuk meluliskan fungsi date dengan diawali huruf D yang besar: Date().

Contoh Menampilkan Tanggal Pada Javascript

Pada bagian ini kita akan bahas mengenai contoh menampilkan tanggal pada javascript dengan menggunakan fungsi Date().

Silahkan teman-teman perhatikan contoh dibawah ini.

<!DOCTYPE html>
<html>
<head>
	<title>Belajar Penggunaan Fungsi Date() Pada Javascript</title>
</head>
<body>
	<h1>Menampilkan Tanggal Dengan Javascript</h1>
	<h2>www.serverkoding.com</h2>
 
	<!-- id hasil -->
	<div id="hasil"></div>
 
	<script>
		var tanggal = new Date();
 
		document.getElementById("hasil").innerHTML = tanggal;
	</script>
</body>
</html>

Pada contoh diatas, saya memasukan fungsi date kedalam variabel tanggal dan kemudian memanggilnya. Untuk Script dari pemanggilannya seperti dibawah ini:

var tanggal = new Date();
 
document.getElementById("hasil").innerHTML = tanggal;

Untuk pembahasan lebih rinci silahkan baca artikel dibawah ini. Karena banyak yang akan dibahas mengenai Fungsi Date() pada javascript.

Baca Juga:

Belajar Operator Pada Javascript

Pada bagian ini kita akan belajar operator pada javascript, dimana operator pada javascript ini merupakan pemahaman dasar yang wajib kalian pelajar dan pahami.

Komputer merupakan kalkulator yang sangat kuat dimana ia dapat memahami perintah yang diberikan dalam bentuk matematika dengan menggunakan angka, operator aritmatika dan lain-lain. Dimana kalian akan melihat bagaimana persamaan dalam penulisan bahasa pemrograman javascript dengan materi matematika leguler.

Tips Utama Operator Pada Javascript

  • Pada bahasa pemrograman javascript mempunyai beberapa operator aritmatika, operator penugasan, perbandingan, operator logis dan operator bersyarat.
  • Operator yang berbeda pada javascript tentunya dapat melayani fungsi berbeda dalam kode javascript.
  • Kalian dapat menggunakan operator javascript untuk dapat melakuka berbagai perhitungan dan juga melakukan perbandingan pada bahasa pemrograman javascript. Persamaan penulisan dan operator tentunya sangat mirip dengan aritmatika biasa.

Selanjutnya kita akan mempelajari mengenai Operator Aritmarika. Silahkan teman-teman simak kembali pembahasan dibawah ini.

Operator Aritmatika Pada Javascript

Salah satu jenis dari operator ialah operator aritmatika. Dimana operator ini digunakan untuk melakukan suatu perhitungan numerik dalam pemrograman javascript. Kalian dapat melihat daftar operator serta descriptnya pada bagian dibawah ini:

  • ( + ) Digunakan untuk penambahan.
  • ( – ) Digunakan untuk melakukan pengurangan.
  • ( * ) Digunakan untuk melakukan perkalian.
  • ( ** ) Digunakan untuk eksponensial.
  • ( / ) Digunakan untuk pembagian.
  • ( % ) Digunakan untuk membuat modulus.
  • ( ++ ) Digunakan untuk increment.
  • ( — ) Digunakan untuk decrement.

Pada operator penambahan, pengurangan, perkalian dan juga pembagian merupakan operator yang paling sering digunakan. Mari kita periksa beberapa contoh penambahan dan juga operator perkaliannya.

Operator Penambahan Pada Javasript

Operator penambahan tentunya menjumlahkan dari nomor yang diberikan. untuk contoh dari penerapannya silahkan perhatikan kode dibawah ini:

var a = 5;
var b = 3;
var c = a + b;

Selanjutnya admin akan mencontohkan penerapan operator perkalian pada javascript.

Operator Perkalian Pada Javascript

Operator perkalian yaitu mengalikan angka dalam javascript, untuk penerapannya silahkan perhatikan contoh dibawahi ini:

var a = 5;
var b = 3;
var c = a * b;

Untuk pembahasan lebih rinci silahkan baca artikel dibawah ini. Karena banyak yang akan dibahas mengenai Operator pada javascript.

Baca Juga: Jenis Operator Pada Javascript

Belajar Looping Pada Javascript

Loop ataupun perulangan pada javasript dapat digunkana untuk melakukan tugas ataupun perulangan berdasarkan suatu kondisi. Paad loop ataupun perulangan pada umumnya dapat tersedia di semua bahasa pemrograman meskipun implementasinya berbeda.

Bahasa pemrograman tentunya mempunyai syarat untuk mampu menangani proses-proses secara dinamis, termasuk pada loop ataupun perulangan pada bahasa pemrograman javascript bertujuan untuk mengulangi instruksi hingga suatu kondisi tertentu maka perulangan tersebut akan berhenti.

Adapun jenis-jenis perulangan pada javascript, berikut penjelasan lengkapnya.

Jenis-jenis Perulangan Pada Javascript

Beberapa jenis loop atau perulangan pada bahasa pemrograman javascript yang dapat digunkaan tergantung pada data yang akan kita olah. Pada proses loop atau perulangan ini tentunya dapat memudahkan kita untuk membuat suatu daftar . Berikut tipe-tipe perulangan yang terdapat pada pemrograman javascript.

  • For
  • While
  • Do While
  • ForEach

Berikut merupakan contoh penulisan sintaks loop atau perulangan pada pemrograman javascript.

for(let i = 0; i < 10; i++){
    document.write("<p>Perulangan ke-" + i + "</p>")
}

Untuk pembahasan lengkap Untuk pembahasan lebih rinci silahkan baca artikel dibawah ini. Karena banyak yang akan dibahas mengenai Perulangan Pada Javascript.

Baca Juga: Belajar Looping Pada Javascript

Kesimpulan

Kita sudah belajar pemrograman javascript pemula, yang dimana tutorial kali ini dibahas secara lengkap karena disertai dengan artikel pendukungnya. Semoga artikel ini dapat memberikan pengetahuan dan manfaat bagi teman-teman semua. Terimakasih telah membaca artikel ini Belajar Pemrograman Javascript Lengkap Untuk Pemula.

Silahkan lanjutkan ke:

Salam Success – by Muhammad Rizal Supriadi.

Leave a Comment

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