#belajar javascript dasar

New Post has been published on https://loveyourcode.com/mengenal-konsep-javascript-lanjutan-event-handler/

Mengenal Konsep Javascript Lanjutan

Event Handler

Event adalah aksi dari user yang bisa menghasilkan interaktifitas. Event handler menyatu dengan kode HTML sehingga tidak perlu dimulai dengan tag <SCRIPT>.

Baca materi sebelumnya :

Panduan 4: Mengenal Konsep Javascript Dasar

Event Handler

Event Keterangan onClick Event handler terjadi pada saat user melakukan klik terhadap satu elemen yang berhubungan dengan event. onSubmit Event handler terjadi pada saat melakukan klik tombol submit. onReset Event handler terjadi pada saat user menghapus data suatu form.

  Contoh penggunaan event handler :

<SCRIPT> <a HREF=http://www. sirkel.informatics.uii.ac.id onClick="document.bgColor= '#990033'; return true"> Klik di sini</a> </SCRIPT>

Dari skrip di atas, maka akan muncul tampilan seperti ini dibawah ini :

  Struktur Kendali

Perancang halaman web membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi untuk membuat suatu halaman yang dinamis dan interaktif. Perintah-perintah tersebut diantaranya :

1. Percabangan (if else)

Percabangan merupakan bagian dari algoritma program yang mengatur jalannya program jika terdapat lebih dari satu kondisi.

Bentuk umum percabangan if :

If (kondisi) Pernyataan 1 else Pernyataan 2

  2. Perulangan (for dan while)

Perulangan merupakan suatu proses yang mengekseskusi sintaks dalam sebuah program secara terus menerus sampai terdapat kondisi untuk menghentikannya. Struktur perulangan for digunakan untuk melakukan perulangan yang telah diketahui banyaknya. Sedangkan struktur do-while digunakan untuk melakukan perulangan yang tidak diketahui banyaknya.

Bentuk umum perulangan for :

for (penghitung; kondisi loop berhenti; modifikasi penghitung) Blok instruksi

Bentuk umum perulangan while :

while (kondisi terpenuhi) Blok instruksi

Kotak Dialog

Kotak dialog di dalam javascript terdiri dari tiga bagian, yaitu:

1.  Alert

Metode alert memungkinkan navigator untuk menampilkan suatu kotak dialog yang berisi satu tombol OK dan teks keterangan. Pada saat kotak ini muncul, user tidak punya pilhan lain selain menekan tombol “OK”.

Sintaks dan screenshot hasil untuk pemanggilan alert :

<script type=”text/javascript”> window.alert(“Berhasil Login”); </script>

Hasilnya :

belajar javascript dasar

2. Confirm

Metode confirm hampir sama dengan alert, terdapat perbedaan dimana pada alert hanya terdapat satu tombol sebagai navigator, sedangkan confirm memiliki dua tombol yaitu “OK” atau “cancel”.

Sintaks dan screenshot hasil untuk pemanggilan confirm : 

<script type=”text/javascript”> var konfirmasi = window.confirm(“Apakah anda yakin untuk melanjutkan?”); </script>

Hasilnya :

belajar javascript confirm

3.Prompt

Metode prompt merupakan pelengkap dari metode confirm, dimana pada metode ini dilengkapi dengan satu cara untuk mendapatkan informasi dari user. Ada dua jenis metode prompt yaitu berupa isian teks default dan isian teks manual yang harus diisi oleh user.

Sintaks dan screenshot hasil untuk pemanggilan prompt :

<script type=”text/javascript”> var dialog = prompt(“Masukkan Komentarmu”); </script>

Hasilnya :

belajar javascript promt

  Variabel

Variabel adalah suatu objek yang berisi data-data, yang mana dapat dimodifikasi selama pengeksekusian program. Di Javascript, kita bisa memberikan nama variabel sepanjang yang kita suka, akan tetapi harus memenuhi kriteria sebagai berikut ini :

Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter “_”.

Nama variabel bisa terdiri dari huruf-huruf, angka-angka atau karakter “_” dan (spasi kosong tidak diperbolehkan).

Nama Variabel tidak boleh memakai nama-nama berikut ini (reserved oleh program)

abstract

boolean, break, byte

case, catch, char, class, cons, continue

debugger, default, delete, do, double

else, export, extends

Dan lain-lain

Contoh variabel pada operator string:

teks1=”Hello” teks2=”Javascript” teks3=”teks1+teks2”

  PENTING !!!

Javascript bersifat Case Sensitive (memperhatikan perbedaan variabel antara huruf besar dan huruf kecil)

Mendeklarasikan Variabel

a)  Eksplisit

Metode penulisan di javascript dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel.

Contoh :

var coba=”Hello” 

b)  Implisit

Metode penulisan di javascript dengan menuliskan secara langsung nama dari variabel dan nilai dari variabel.

Contoh :

coba=”Hello”

Meletakkan variabel

1. Lokal

Jika dideklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu, maka variabel itu hanya bisa diakses dari dalam fungsi tersebut, dan artinya variabel ini tidak berguna bagi fungsi-fungsi yang lain.

2. Global

Jika dideklarasikan di bagian awal dari script program, yang artinya sebelum pendeklarasian semua fungsi, maka semua fungsi di dalam program bisa mengakses variabel ini. Berikut contoh skrip untuk penggunaan variabel lokal dan global :

New Post has been published on https://loveyourcode.com/pengenalan-javascript-dasar/

Pengenalan Javascript Dasar

Pengenalan Javascript

Kamu masuk ke materi javascript dasar, disini kamu akan dapat pengetahuan dasar tentang javascript, hal ini penting karena javascript akan sangat membantu dalam membuat design website dan juga validasi. Sebelum masuk ke materi ini lebih baik jika kamu paham dahulu tentang HTML dan CSS, materi tersebut dapat di baca disini :

Panduan 1 : Belajar HTML 5 Dasar (Wajb)

Panduan 2: Belajar Dasar – Dasar CSS 3

Javascript merupakan bahasa yang menggunakan client side scripting, yang artinya pengeksekusian perintah-perintahnya dilakukan di sisi browser (client) bukan di web server. Seperti bahasa Java ataupun C, setiap instruksi diakhiri dengan karakter titik koma (;). Oleh karena itu hasil dari pemanggilan Javascript tergantung pada browser.

Beberapa keuntungan menggunakan Javascript:

  1. Keuntungan Menggunakan Javascript

Keuntungan Kekurangan Hampir semua browser sudah mendukung Javascript seperti IE, Mozilla Firefox, Google Chrome, dll. Skrip tidak terenkripsi. Artinya tidak terlindungi, karena dengan melalui text editor user bisa melihat dan meniru sourcenya. Dapat menciptakan halaman web yang lebih interaktif dengan user.

  Kemampuan terbatas. Walaupun javascript dapat membuat web menjadi interaktif dan dinamis, namun javascript tidak mampu membuat aplikasi sendiri seperti halnya java. Memvalidasi data yang akan dikirimkan ke server. Keterbatasan objek. Artinya javascript tidak mampu membuat kelas-kelas yang bisa menampung objek-objek tambahan karena javascript telah memiliki objek built in pada struktur bahasanya.

  Ada beberapa hal penting yang perlu diketahui dalam Javascript yaitu:

Menggunakan blok awal “”dan blok akhir “”.

Case Sensitive artinya membedakan penamaan variable dan fungsi yang menggunakan huruf besar dan huruf kecil.

Ekstensi umumnya menggunakan “*.js”.

Setiap statement dapat diakhiri dengan “;” sebagaimana dengan c++, tetapi dapat juga tidak.

Jika tidak didukung dalam browser versi lama scriptnya, scriptnya dapat disembunyikan diantara tag ”<!—“ dan //–>.

Jika program dalam satu baris terlalu panjang dapat disambung ke baris berikut dengan karakter “\”.

Berikut adalah contoh skrip sederhana dari file javascript.

<html> <head> <script type="text/javascript"> function alertFunction() alert("Belajar coding Bersama Loveyourcode.com"); </script> </head> <body> </body> </html>

  Perbedaan Java dengan JavaScript

Berikut adalah perbedaan Java dengan JavaScript.

perbendaan javascript dan java

  Bentuk Script Dari Javascript.

Script dari Javascript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dalam jendela browser, karena ada tag tertentu yang memerintahkan browser untuk memperlakukan bahwa script dari Javascript.

Javascript dapat dituliskan dalam sebuah dokumen HTML dengan 2 cara :

Sebagai statement dan fungsi menggunakan tag SCRIPT.

Sebagai pengontrol perintah menggunakan tag HTML.

Tag Script yang dituliskan dalam HTML adalah sebagai berikut :

<SCRIPT> JavaScript Statements......... </SCRIPT>

Ada beberapa cara untuk meletakkan kode Javascript di halaman HTML.

1. Internal dalam file HTML

Pada umumnya kita meletakkan tag <SCRIPT> diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag <HEAD> dan </HEAD>. Pemanggilan fungsi Javascript (atau disebut juga event) adalah seperti berikut :

<SCRIPT> Program Javascript Disini </SCRIPT>

Perintah tersebut biasanya diletakkan diantara tag <BODY>….</BODY>.

2. Menggunakan File Ekstern

Cara berikutnya adalah menuliskan kode program Javascript dalam suatu file teks dan kemudian file teks tersebut dipanggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas).

Kode yang kita sisipkan kedalam dokumen HTML adalah sebagai berikut:

<SCRIPT SRC=”url/file.js”></SCRIPT>

Dimana url/file.js adalah lokasi dan nama file yang berisi kode Javascript. Jika perintah tambahan “SRC” tidak disertakan maka tag Script akan mencari kode yang terletak dalam tag Script.

Memberikan Komentar (Script tidak tereksekusi)

Memberikan komentar pada javascript ini bertujuan agar program javascript ini tidak dieksekusi/dijalankan. Berikut contoh penggunaan komentar dalam javascript:

<SCRIPT> <!-- ini namanya komentar //--> </SCRIPT>

Selain penggunaan komentar di atas, javascript juga mendukung dua bentuk format komentar yang lainnya, yaitu:

Komentar satu baris, diawali dengan suatu double slash (//).

Komentar banyak baris, diawali dengan suatu /* dan diakhiri dengan suatu */.

Operator

  1. Operator Pembanding

  Operator Pembanding Javascript

Operator Penjelasan Contoh == Sama dengan 5==8 menghasilkan false != Tidak sama dengan 5!=8 menghasilkan true > Lebih besar dari 5>8 menghasilkan false < Lebih kecil dari 5<8 menghasilkan true >= Lebih besar atau sama dengan 5>=8 menghasilkan false <= Lebih kecil atau sama dengan 5<=8 menghasilkan true

2.Operator Logika