Scribd
Unggah
465 tayangan

KD 8 Client Side Scripting Dalam Pemrograman Web

Dokumen tersebut membahas tentang client side scripting dalam pemrograman web, termasuk pengertian, tujuan pembelajaran, dan cara menjalankan kode JavaScript di dalam halaman web.

Diunggah oleh

Hari Zulianto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
465 tayangan

KD 8 Client Side Scripting Dalam Pemrograman Web

Dokumen tersebut membahas tentang client side scripting dalam pemrograman web, termasuk pengertian, tujuan pembelajaran, dan cara menjalankan kode JavaScript di dalam halaman web.

Diunggah oleh

Hari Zulianto
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PPTX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 18

PEMROGRAMAN WEB & PERANGKAT BERGERAK

Guru Mapel : Hari Zulianto, ST

KD 8 : CLIENT SIDE SCRIPTING DALAM PEMROGRAMAN WEB


KD 3.8 : MEMAHAMI CLIENT SIDE SCRIPTING DALAM PEMROGRAMAN WEB
KD 4.8 : MEMPRESENTASIKAN CLIENT SIDE SCRIPTING DALAM PEMROGRAMAN WEB

Tujuan Pembelajaran :
 Setelah mencermati materi di slide ini dan mengakses berbagai literatur, siswa
mampu memahami client side scripting programming secara benar.
 Setelah memahami client side scripting dengan benar, siswa mampu
mempresentasikan client side scripting programming sesuai SOP
Apa Itu JavaScript?

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat interaksi dan menambah fitur dinamis ke dalam
halaman web
JavaScript hampir selalu ada di setiap web modern.
Javascript merupakan bagian dari 3 teknologi penting yang harus dikuasai programmer web, yakni HTML untuk konten
(isi dari website), CSS untuk tampilan (presentation), dan JavaScript untuk interaksi (behavior).

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming
Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud
merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox

Bahasa pemrograman Client Side berbeda dengan bahasa pemrograman Server Side seperti PHP, dimana untuk server
side seluruh kode program dijalankan di sisi server.

JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih
cepat tanpa harus menunggu pemrosesan di web server

Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form, namun untuk berbagai keperluan
yang lebih modern. Berbagai animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern, games,
semuanya bisa dibuat menggunakan JavaScript
Cara Menjalankan kode JavaScript
Jika aplikasi Notepad++ dan web browser telah tersedia, saatnya mencoba menjalankan aplikasi JavaScript pertama anda
Cara penulisan JavaScript mirip dengan penulisan bahasa pemograman web lainnya seperti PHP dan CSS, yakni dengan
menyisipkan kode JavaScript di dalam HTML.

<!DOCTYPE
<!DOCTYPE html>
html>
Untuk latihan, kita akan membuat kode java <html>
<html>
script didalam HTML. Ketikkan kode <head>
<head>
<title>Belajar
<title>Belajar JavaScript
JavaScript di
di Duniailkom</title>
Duniailkom</title>
disamping lalu simpan dengan nama
lat_js1.html <script
<script type="text/javascript">
type="text/javascript">
function
function tambah_semangat()
tambah_semangat()
{{
var
var a=document.getElementById("div_semangat");
a=document.getElementById("div_semangat");
a.innerHTML+="<p>Sedang
a.innerHTML+="<p>Sedang BelajarBelajar JavaScript,
JavaScript, Semangat...!!!</p>";
Semangat...!!!</p>";
}}
</script>
</script>
</head>
</head>
<body>
<body>
<h1>Belajar
<h1>Belajar JavaScript</h1>
JavaScript</h1>
<p>
<p> Saya
Saya sedang
sedang belajar
belajar JavaScript
JavaScript di
di duniailkom.com
duniailkom.com </p>
</p>
Klik
Klik tombol
tombol ini
ini untuk
untuk menambahkan
menambahkan kalimat
kalimat baru:
baru:
<button
<button id="tambah"
id="tambah" onclick="tambah_semangat()">Semangaat..!!</button>
onclick="tambah_semangat()">Semangaat..!!</button>
<div id="div_semangat"></div>
<div id="div_semangat"></div>
</body>
</body>
</html>
</html>
Cara Menampilkan Error JavaScript
pesan kesalahan (error) untuk JavaScript tidak langsung ditampilkan
web browser. Web browser pada dasarnya adalah aplikasi untuk
menampilkan halaman web, dan secara default web browser
“menyembunyikan” permasalahan coding halaman web yang
ditampilkan.

Jika anda menggunakan Google Chrome, pada web browser ini


terdapat fitur yang dinamakan Developer Tools dan JavaScript
Console. Sesuai dengan namanya, Developer Tools adalah fasilitas
yang dirancang untuk pengembangan web. Dengan fitur ini, kita bisa
menampilkan pesan kesalahan JavaScript, HTML, CSS dan melihat
efeknya secara real time.

Untuk mengakses fitur ini, silahkan klik tombol setting Google Chrome
yang terletak di kanan atas, cari menu Tools, lalu pilih salah satu
Developer Tools atau JavaScript Console. Developer Tools bisa juga
dibuka dengan shortcut tombol keyboard: ctrl+shift+i. Untuk
kenyamanan, anda dapat menghapalkan tombol shortcut tersebut
karena kita akan sering menggunakan fitur Developer Tools ini.

Berikut adalah tampilan menu pada Google Chrome:


Untuk mengujinya, silahkan edit contoh halaman belajar_js.html kita sebelumnya. Hapus beberapa huruf dari kode
JavaScript yang ada, lalu jalankan dengan jendela Developer Tools dalam keadaan terbuka, maka anda bisa melihat error
program ditampilkan di tab console, beserta baris dimana kode tersebut error.
Selain Google Chrome, Mozilla Firefox merupakan salah satu web
browser populer lainnya. Sama seperti Google Chrome, secara
default bawaan Firefox juga tidak menampilkan pesan error
JavaScript. Untuk menampilkannya, kita harus mengakses
jendela Web Developer.

Untuk memunculkan jendela Web Developer, klik menu Firefox di


kiri atas web browser, lalu pilih menu Web Developer.
Cara Memasukkan kode JavaScript ke dalam HTML

Untuk menginput, atau memasukkan kode JavaScript ke dalam HTML, JavaScript menyediakan
4 alternatif, yaitu:

1. Menggunakan tag <script> (internal JavaScript)


2. Menggunakan tag <script scr=””> (external JavaScript)
3. Menggunakan Event Handler (Inline JavaScript)
4. Menggunakan URL (href:=”javascript:”)
Menggunakan tag <script> (internal JavaScript)

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<head>
<title>Belajar JavaScript </title>

<script>
alert("Hello World!!");
</script>

</head>

<body>
<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar JavaScript</p>
<p>Belajar Web Programming </p>
</body>
</html>
Cara Memasukkan JavaScript Menggunakan tag
Cara atau metode kedua untuk menginput kode JavaScript ke
<script src=” “> (external JavaScript)
dalam halaman HTML adalah dengan memindahkan
kode JavaScript ke dalam sebuah file terpisah, lalu
<!DOCTYPE html>
‘memanggilnya’ dari HTML. <html>
<meta http-equiv="Content-Type"
Sebuah file JavaScript disimpan dalam ekstensi .js, seperti:
content="text/html; charset=UTF-8" />
kode.js, register.js, atau kodeku.js. Dari halaman HTML, kita <head>
<title>Belajar JavaScript </title>
memanggilnya menggunakan tag <script> dengan atribut src.
Atribut src berisi alamat dari file javascript tersebut, seperti <script src="kode_javascript.js"></script>
berikut ini:
</head>
<script src="kode_javascript.js"></script>
<body>
Perhatikan bahwa tag <script> tetap ditutup dengan tag
<h1>Belajar JavaScript</h1>
penutup </script>, atau anda bisa membuatnya menjadi self <p>Saya sedang belajar JavaScript di
duniailkom.com</p>
closing tag seperti berikut ini:
<p>Belajar Web Programming di Duniailkom.</p>
</body>
</html>
<script src="kode_javascript.js" />
Cara Memasukkan JavaScript Menggunakan Event Handler (Inline JavaScript)

Cara ketiga untuk menjalankan JavaScript adalah dengan memanggilnya menggunakan Event Handler dari dalam tag HTML.

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<head>
<title>Belajar JavaScript </title>
</head>

<body>
<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar JavaScript </p>
<p>Belajar Web Programming </p>

<button onclick="alert('Hello World!!')">Klik Saya

</body>
</html>
Cara Memasukkan JavaScript Menggunakan URL (href:=”javascript:”)

Cara terakhir (dan juga paling jarang digunakan saat ini)


adalah dengan menyisipkan JavaScript ke dalam alamat href
dari tag HTML. Cara ini disebut juga dengan protocol
javascript

<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<head>
<title>Belajar JavaScript</title>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p>Saya sedang belajar JavaScript</p>
<p>Belajar Web Programming</p>
<a href="javascript:alert('Hello World!!')">Hallo Dunia...</a>
</body>
</html>
Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML <!DOCTYPE html>
<html>
<head>
Peletakan tag <script> diakhir halaman akan memastikan <meta http-equiv="Content-Type"
bahwa seluruh tag HTML telah tampil pada web browser content="text/html; charset=UTF-8" />
sebelum kode JavaScript. <title>Belajar JavaScript</title>
</head>
Untuk membuktikannya, mari kita ubah kode program <body>
sebelumnya, dan memindahkan kode JavaScript ke posisi <h1>Belajar JavaScript</h1>
akhir halaman: <p> Saya sedang belajar JavaScript </p>
<div id="div_semangat"></div>
</body>

<script>
var
a=document.getElementById("div_semangat");
a.innerHTML="<p>Sedang Belajar JavaScript,
Semangat...!!!</p>";
</script>

</html>
Cara Menampilkan Hasil Program JavaScript
Untuk mempermudah pemahaman cara menampilkan hasil program JavaScript ke dalam web browser, berikut adalah
contoh program untuk menampilkan hasil penjumlahan:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Belajar JavaScript</title>
<script>
window.onload = function()
{ var hasil;
hasil = 1+3+5+7+9;
document.getElementById("tempat_hasil").innerHTML=hasil; }
</script>
</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript </p>
<div id="tempat_hasil">
</div>
</body>
</html>
Fungsi Alert untuk Menampilkan Hasil Program JavaScript <!DOCTYPE html>
<html>
<head>
Fungsi alert akan menampilkan ‘apapun’ yang diberikan <meta http-equiv="Content-Type" content="text/html;
sebagai argumen ke dalam fungsi ini. Setiap output yang charset=UTF-8" />
ditampilkan akan dikonversi menjadi bentuk text (tipe data <title>Belajar JavaScript</title>
String). Fungsi alert akan menampilkan hasil JavaScript
dengan cepat. <script>
window.onload = function()
Berikut adalah contoh kode JavaScript sebelumnya jika {
menggunakan fungsi alert: var hasil;
hasil = 1+3+5+7+9;
alert(hasil);
}
</script>

</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript di duniailkom.com
</p>
</body>
</html>
Fungsi Console.Log untuk Menampilkan Hasil Program JavaScript
<!DOCTYPE html>
<html>
Fungsi console.log akan menampilkan hasil program ke dalam <head>
tab console pada menu Web Developer. Cara penggunaan <meta http-equiv="Content-Type"
fungsi ini sama seperti fungsi alert, dimana kita hanya butuh content="text/html; charset=UTF-8" />
menginput hasil yang ingin ditampilkan kedalam argumen <title>Belajar JavaScript</title>
fungsi ini. Jika fungsi itu bukan bertipe String, maka akan
dikonversi menjadi String. <script>
window.onload = function()
Berikut adalah contoh penggunaan fungsi console.log dalam {
menampilkan hasil program JavaScript: var hasil;
hasil = 1+3+5+7+9;
console.log(hasil);
}
</script>

</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript </p>
</body>
</html>
Cara lain untuk menampilkan hasil dari JavaScript adalah menggunakan fungsi document.write().
Berikut adalah cara penggunaannya:

<!DOCTYPE html>
<html>
<head>
<title>Belajar JavaScript</title>

<script>
window.onload = function()
{
document.write("Hello duniailkom");
}
</script>

</head>
<body>
<h1>Belajar JavaScript</h1>
<p> Saya sedang belajar JavaScript</p>
</body>
</html>
Pengertian Core JavaScript dan DOM (Document Object Model)

Mempelajari JavaScript pada dasarnya terdiri dari 2 bagian besar, yakni JavaScript Inti (sering disebut dengan istilah: Core
JavaScript), serta API yang disediakan oleh web browser (yang dikenal dengan istilah DOM, singkatan dari Document Object
Model).

Core JavaScript atau JavaScript inti adalah istilah yang merujuk kepada ‘Bahasa Pemograman JavaScript‘. Pada bagian Core
JavaScript inilah kita akan belajar tentang aturan pemograman yang umumnya dipelajari, seperti cara pendefenisian
variabel, perbedaan tipe-tipe data, cara pembuatan array, cara penulisan struktur IF, serta cara pembuatan Objek.

DOM (singkatan dari Document Object Model). DOM adalah API (Application Programming Interface) yang disediakan web
browser kepada programmer.

Secara sederhananya, DOM adalah kumpulan aturan atau cara bagi programmer untuk ‘memanipulasi’ apapun yang tampil
dalam halaman web. DOM tidak terikat dengan JavaScript, dan sepenuhnya bukan bagian dari JavaScript. DOM yang sama
bisa juga diakses dengan bahasa client-side lain seperti Jscript

Salah satu contoh DOM yang telah kita gunakan adalah fungsi document.getElementById.

Fungsi document.get ElementById berfungsi untuk mencari sebuah tag HTML berdasarkan id. Selain
document.getElementById, dalam DOM juga disediakan fungsi lain seperti document.getElementByName,
document.getElementByClass
Tugas :

Buat Video Pendek durasi ± 5 menit berisi :


1. Salam Pembukaan
2. Perkenalan nama siswa, kelas & sekolah
3. Menyebutkan nama mapel
4. Menyebutkan guru mapelnya
5. Menyebutkan nama KD
6. Menyebutkan Tujuan Pembelajaran dari materi ini
7. Menyebutkan Materi2x yang ada di slide ini
8. Menyebutkan Kesimpulan dari materi ini
9. Salam Penutup

Kirim Video ke WA Guru Mapel (0822 2083 0749)

Anda mungkin juga menyukai