Desain & Pemrograman Web Javascript

Javascript Desain & Pemrograman Web

Salhazan Nasution, S.Kom, MIT

Pengenalan Javascript

2 Desain & Pemrograman Web (Semester Genap 2018/2019) - www.salhazan.com

• Javascript merupakan bahasa scripting. • Dikembangkan oleh Netscape pada tahun 1995. • Merupakan client side scripting karena eksekusi

perintah-perintahnya dilakukan di sisi browser (client) bukan di web server.

• Dengan Java Script kita bisa dengan mudah membuat sebuah halaman web yang interaktif.

• Javascript ≠ Java.

Pengenalan Javascript

Desain & Pemrograman Web (Semester Genap 2018/2019) - www.salhazan.com

Keuntungan menggunakan Javascript : • Didukung oleh hampir semua browser. • Membuat halaman web menjadi lebih interaktif. • Memvalidasi data yang akan dikirim ke server. • Free dan dapat digunakan siapa saja tanpa harus

memiliki license. • Tidak membutuhkan tools khusus, cukup

menggunakan teks editor seperti halnya saat membuat HTML.

Pengenalan Javascript (2)

Ciri-ciri Javascript : • Menggunakan blok awal “ { ” dan diakhiri “ } “. • Extension file menggunakan “.js” • Case Sensitive. • Setiap statement diakhiri dengan “ ; ” tetapi bisa juga

tidak. • Jika script terlalu panjang dalam satu baris, dapat

disambung ke baris selanjutnya dengan karakter “ \ ”

Pengenalan Javascript (3)

Script Javascript (JS)

Ada beberapa cara untuk meletakkan kode Javascript didalam dokumen HTML : • Internal dalam dokumen HTML. • Menggunakan file ekstern. • Melalui event tertentu.

Script JS

Script diletakkan diantara tag <script> pada bagian header (head) dari dokumen HTML. Pemanggilan fungsi javascript diletakkan di bagian badan (body).

contoh : <html> <head> <title>Javascript Sederhana</title> <script language="javascript"> document.write ("Belajar Javascript. "); </script> </head> <body>Pemrograman Web</body> </html>

Script JS (internal)

Membuat kode program Javascript dalam file tersendiri dan kemudian dipanggil dari dokumen HTML.

contoh : <script language="javascript" src="kode.js"> </script

Script JS (ekstern)

Melalui suatu perintah yang dilakukan ketika suatu event dilakukan oleh user. Contohnya saat meng-klik tombol submit/button.

contoh : <input type="button" value="OK” onclick="alert('OK')">

Script JS (event handler)

Seperti bahasa pemrograman atau scripting lainnya, pada Javascript juga dapat dituliskan sebuah komentar dimana script komentar ini tidak akan dieksekusi sebagai program. Komentar satu baris diawali dengan “//”, komentar banyak baris diapit oleh “/*” dan “*/”.

contoh : <script language="javascript"> /* ini adalah komentar dalam javascript yang tidak akan dieksekusi */ document.write ("Belajar Javascript. "); </script>

Komentar pada JS

Tag ini digunakan untuk menampilkan pesan pada browser yang tidak mendukung Javascript. Jika browser sudah mendukung Javascript, maka tag ini akan diabaikan dan isinya tidak akan ditampilkan.

contoh : <NOSCRIPT> Browser Anda tidak mendukung Javascript </NOSCRIPT> <SCRIPT language="javascript"> document.write ("Browser Anda sudah mendukung Java Script dengan baik") </SCRIPT>

Tag <noscript>

Operator pada Javascript

• Operator Matematika. • Operator Assignment. • Operator Pembanding. • Operator Logika.

Operator pada Javascript

Operator Fungsi

+ Penjumlahan

- Pengurangan

* Perkalian

/ Pembagian

% Sisa pembagian (mod)

++ Penaikan (increment)

-- Penurunan (decrement)

Operator Matematika

Operator Contoh Ekuivalen dengan

= x=y x=y

+= x+=y x=x+y

-+ x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y

Operator Assignment

Operator Penjelasan

== Sama dengan

!= Tidak sama dengan

> Lebih besar dari

< Lebih kecil dari

>= Lebih besar atau sama

<= Lebih kecil atau sama

Operator Pembanding

Operator Penggunaan

&& and

Operator Logika

Variabel, Event Handler

Adalah suatu objek yang berisi data yang digunakan saat pengeksekusian program.

Kriteria penamaan variabel : • Terdiri dari huruf, angka dan karakter “ _ ” • Harus dimulai oleh huruf atau karakter “ _ ” • Tidak boleh mengandung spasi. • Tidak boleh memakai nama-nama yang telah di

reserved oleh program (abstract, boolean, break, byte, case, catch, char, dll).

Variabel

Mendeklarasikan variabel dapat dilakukan dengan dua cara : • Eksplisit → dengan menuliskan kata kunci var

kemudian diikuti dengan nama & nilai variabel contoh : var nama = “budi”

• Implisit → dengan langsung menuliskan nama variabel dan diikuti oleh nilai variabel

contoh : nama = “budi”

Deklarasi Variabel

Suatu perintah yang dilakukan ketika suatu aksi (event) dilakukan oleh user. Event handler tidak perlu dimulai dengan tag <script> tapi dituliskan langsung di dalam script HTML.

contoh : <input type="button" value="OK” onclick="alert('OK')">

Event Handler

Event Keterangan

onMouseover User meletakkan kursor mouse di atas suatu elemen

onFocus User memberikan fokus pada suatu elemen

onBlur Elemen kehilangan fokus, user melakukan klik diluar elemen

onChange User melakukan modifikasi isi dari data pada suatu field

onClick User melakukan klik terhadap elemen

onLoad Ketika browser memanggil/load suatu halaman

onMouseout Kursor mouse meninggalkan posisinya

onKeyPress Saat mengetikkan sesuatu pada keyboard

Event Handler

Struktur Kendali & Fungsi

• Instruksi IF • Switch Case • Perulangan FOR • Perulangan WHILE

Struktur Kendali

if (condition1) { code to be executed if condition1 is true } else if (condition2) { code to be executed if condition2 is true } else { code to be executed if condition1 and condition2 are not true }

Instruksi IF

switch(n) { case 1: execute code block 1 break; case 2: execute code block 2 break; default: code to be executed if n is different from case 1 and 2 }

Switch Case

for (var=startvalue; var<=endvalue; var=var+increment) { code to be executed }

Perulangan FOR

while (var<=endvalue) { code to be executed }

Perulangan WHILE

Subprogram yang memungkinkan untuk menjalankan sekelompok instruksi tertentu dengan melakukan pemanggilan terhadap nama fungsi tersebut.

function functionname(var1,var2,...,varX) { some code }

Fungsi

See you next time..

Any Question?

Desain & Pemrograman Web Javascript

Documents

Transcript of Desain & Pemrograman Web Javascript

Pemrograman Web Dengan HTML, CSS, Dan JavaScript

MODUL PRAKTIKUM PEMROGRAMAN GAME - if.ummu.ac.idif.ummu.ac.id/images/download/090907-MODUL PRAKTIKUM PMEROGRAMAN...MODUL PRAKTIKUM PEMROGRAMAN GAME Bahasa Pemrograman HTML5 dan Javascript

Pemrograman Web-Javascript

JAVASCRIPT - Gunadarmanisa_raihani.staff.gunadarma.ac.id/Downloads/files/65178... · •JavaScript adalah bahasa script yang berbasis pada pemrograman java •JavaScript digunakan

JavaScript - ftp.gunadarma.ac.idftp.gunadarma.ac.id/handouts/S1_Sistem Informasi/pemrograman web...dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan

Pemrograman Javascript

06 Javascript

Materi - Javascript

Presentation 1 - Desain dan pemrograman web 2

Andry Javascript

Desain & Pemrograman Web HTML Lanjut - salhazan.staff.unri ...

JavaScript - lily.staff.gunadarma.ac.idlily.staff.gunadarma.ac.id/.../5465/Pertemuan4_Present_JavaScript.pdfdan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape

Pemrograman Web Desain Web

Tutorial JavaScript

Desain dan Pemrograman Web

Pemrograman Web · 2014-11-05 · menggunakan mesin virtual Java. Javascript: bahasa pemrograman untuk pengolahan halaman HTML ... struktur program yang memungkinkan suatu kumpulan

MODUL PEMBELAJARAN PEMROGRAMAN DASAR … · javascript vb script xml Bahasa Pemrograman yang berkembang dan semakin pesat, berdasarkan fungsi bahasa pemrograman dapat juga di kategorikan

DESAIN MODEL PEMBELAJARAN PEMROGRAMAN MEKANISME …

MODUL PEMROGRAMAN WEB - rillopambudy.files.wordpress.com filehtml, css, javascript, php_____ daftar isi html (hypertext markup language).....1

Buku pemrograman web html-css-javascript