JavaScript Dasar - Menampilkan Hasil Program

Pertemuan 13-15
JAVASCRIPT
Pengantar
 Nama JavaScript memang sering membuat bingung
programmer pemula. Ini karena terdapat bahasa
pemrograman populer lain yang bernama JAVA. Tidak
sedikit yang beranggapan bahwa JavaScript adalah
versi “ringan” dari JAVA, atau JavaScript adalah bahasa
pemrograman JAVA yang digunakan khusus membuat
web.
 JavaScript sepenuhnya berbeda dari JAVA. Penamaan
yang mirip ini tidak lepas dari sejarah dan ide marketing
oleh Netscape Communications, selaku perusahaan
yang pertama kali mengembangkan JavaScript.
Aplikasi Menjalankan Javascript
 Untuk menjalankan JavaScript, kita hanya butuh
aplikasi text editor dan sebuah web browser.
 Aplikasi text editor yang dipakai boleh bebas. Jika
butuh yang ringan, bisa coba Notepad++. Atau jika
ingin yang lebih modern, bisa ke Microsoft VS Code.
Teks editor lain seperti Atom atau Sublime Text juga
bisa jadi pilihan alternatif.
 Untuk web browser, juga bebas ingin memakai aplikasi
web browser apa saja. Rata-rata web browser modern
sudah mendukung standar EcmaScript terbaru.
Pilihan terbaik bisa ke Google Chrome, Mozilla
Firefox, atau Microsoft Edge.
Cara Menjalankan Javascript
 Setelah aplikasi teks editor dan web browser
tersedia, saatnya coba mulai 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.
Contoh javascript
Penjelasan Contoh Javascript
 Untuk menguji kode JavaScript yang telah
dibuat, silahkan klik tombol “Semangaat..!!”
beberapa kali. Seharusnya kalimat baru
akan ditambahkan di akhir halaman:
Jenis JavaScript
 External Javascript
 Internal Javascript
 Inline Javascript
 Javascript Protocol
Internal Javascript
Disebut Internal karena kode Javascript itu
ditulis pada halaman yang sama dengan kode
HTML , dan atau di dalam satu file HTML. Kode
javascript diinput menggunakan tag <script>.
Internal Javascript cukup sering digunakan,
terutama jika kode itu tidak terlalu panjang dan
hanya dibutuhkan pada satu halaman saja.
Kode Javascript ditulis antara tag pembuka
<script> dan tag penutup </script>.
Internal Javascript
<script>
Kodejavascript diletakkan disini
</script>
Contoh Internal Javascript
Tampilan Javascript
Penjelasan Internal
 tag <script> ke dalam tag <head> pada baris ke 6. Tag
<script> tersebut berisi 1 baris perintah, yakni
alert("Hello World!!");. Ini adalah kode untuk
menjalankan fungsi alert() milik JavaScript.
 alert() adalah perintah khusus untuk menampilkan
kotak informasi. Fungsi ini sering dipakai dalam proses
pembuatan kode JavaScript sekedar untuk
menampilkan output sederhana. Teks informasi tersebut
ditulis antara tanda kurung dan dalam tanda kutip.
 Save file diatas dengan nama sembarang selama
memiliki extension .html, misalnya index.html, lalu
akses di web browser:
External Javascript
• Cara kedua untuk menginput kode JavaScript ke dalam file
HTML adalah dengan memindahkan kode JavaScript ke
dalam sebuah file terpisah, lalu diakses dari file HTML.
Karena file JavaScript ini berada di luar file HTML, disebut
juga sebagai external JavaScript. Cara ini lebih disarankan
untuk kode JavaScript yang panjang, dan dipakai oleh
banyak halaman.
• File JavaScript external disimpan dalam ekstensi .js, seperti:
kode.js, register.js, atau kodeku.js. Dari halaman HTML,
kita memanggilnya menggunakan juga dengan tag <script>,
tapi kali ini dengan tambahan atribut src. Atribut src berisi
alamat dari file JavaScript tersebut, seperti berikut ini:
External Javascript
• Perhatikan bahwa tag <script> langsung ditutup
dengan tag </script>. Di antara tag ini, tidak
bisa ditulis kode internal JavaScript lain, tapi
harus dipisah ke dalam tag tersendiri:
• Sebagai contoh praktek, saya akan pindahkan

perintah alert(“Hello World!!”) ke dalam file
tersendiri. Silahkan buat file baru dengan nama
external.js, kemudian isi dengan perintah
berikut:
Contoh External Javascript
Penjelasan External
 perintah pemanggilan file External.js ada di
baris 5. Hasilnya, ketika di jalankan akan
langsung tampil jendela alert seperti contoh di
internal JavaScript.
 Penamaan file JavaScript dengan akhiran .js
sebenarnya juga sebuah kesepakatan.
Namun agar lebih nyaman dan tidak
membuat bingung, sebaiknya tetap mengikuti
kesepakatan dengan menggunakan
akhiran .js.
Inline Javascript
 Cara ketiga untuk menjalankan JavaScript adalah
dengan metode inline JavaScript. Ini bisa dilakukan
menggunakan konsep event handler.
 Konsep event handler termasuk bagian dari DOM
(Document Object Model) baru. Namun sederhananya,
event handler adalah memanggil kode javascript
ketika ‘sesuatu’ terjadi di dalam tag HTML.
 Sesuatu ini maksudnya ketika sebuah element HTML
di klik, di klik kanan, di arahkan mouse, dll. Event
handler di dalam JavaScript ditulis dengan
penambahan kata on, sehingga jika sebuah tombol di-
klik, menggunakan onclick, atau jika mouse berada
diatas element disebut sebagai onmouseover, dst.
Contoh Inline Javascript
Penjelasan Inline Javascript
 baris 10 dari contoh kode di atas. Ke dalam tag <button>,
saya menambahkan onclick="alert('Hello World!!')", ini
merupakan kode JavaScript yang diinput melalui metode
event handler.
 Meskipun praktis, cara menginput kode JavaScript seperti ini
kurang disarankan. Alasannya karena kita mencampurkan
kode JavaScript dengan HTML. Dan jika kode JavaScript
agak panjang, tidak lagi praktis ditulis dalam 1 baris saja.
 Di dalam pemrograman Javascript, ada istilah yang disebut
sebagai unobtrusive JavaScript. Unobtrusive JavaScript
adalah filosofi atau paradigma yang berpendapat bahwa
content (HTML) sedapat mungkin harus terpisah dari
behavior (JavaScript) agar mudah dalam pemeliharaan dan
lebih fleksibel.
Javascript Protocol
Cara terakhir dan juga sudah sangat
jarang dipakai, adalah dengan
menyisipkan kode JavaScript ke dalam
alamat href dari tag HTML. Cara ini
disebut juga sebagai JavaScript
Protocol. Disebut demikian, karena kita
mengganti alamat link dari yang biasa
menggunakan protocol http// menjadi
javascript.
Contoh Javascript Protocol
Penjelasan Javascript Protocol
 Jika anda menjalankan kode diatas dan men-klik link Hallo
Dunia… akan tampil alert Hello World!!. Jendela ini berasal
dari kode JavaScript di tag <a> pada baris 10:
Cara Menampilkan
Hasil Program
Javascript
Menampilkan Hasil JavaScript dengan document.write()
Cara pertama untuk menampilkan hasil

kode program JavaScript di web browser
adalah dengan perintah document.write().
Tampilan document.write()
Penjelasan Tampilan document.write()
 Perintah document.write() akan menampilkan teks yang ditulis dalam tanda
kurung (sebagai argument).
 Di baris 10 saya membuat variabel foo yang akan menampung hasil dari
penambahan 1+3+5+7+9. Variabel ini kemudian ditampilkan dengan perintah
document.write(foo) di baris 11. Hasilnya, akan tampil angka 25 di web browser.
 Fokus tutorial ini sekedar menampilkan hasilnya saya dengan perintah
document.write().
 Lanjut, di baris 13 terdapat perintah document.write("<br>"). Di HTML, tag <br>
dipakai sebagai tanda untuk pindah baris. Ini semata-mata agar tampilan kita
lebih rapi saja.
 Di baris 15 giliran variabel bar yang saya isi dengan sebuah object {a:'16'}. Pada
saat ditampilkan, hasilnya adalah [object Object].
 Inilah salah satu kelemahan jika ingin menampilkan hasil kode program
menggunakan perintah document.write(). Jika datanya cukup kompleks, yang
tampil adalah tipe data dari variabel, bukan nilainya.
Menampilkan Hasil JavaScript dengan innerHTML
Cara kedua untuk menampilkan hasil

JavaScript adalah dengan mengakses
property inner HTML dari sebuah element.
Untuk keperluan ini, kita juga harus minta
bantuan perintah
document.getElementById() untuk mencari
dimana hasil ini akan ditampilkan.
Tampilan Program Innerhtml
Penjelasan Tampilan InnerHTML
 Sama seperti contoh di document.write(), saya ingin
menampilkan isi dari variabel foo dan bar. Hasil tampilan
juga akan sama persis seperti sebelumnya.
 Di baris 9-10, terdapat 2 tag <div> dengan atribut
id="result1" dan id="result2". Disinilah kita akan
meletakkan hasil kode program JavaScript.
 Caranya, akses kedua element dengan perintah
document.getElementById(), lalu isi property innerHTML
dengan variabel foo dan bar seperti di baris 13 dan 16.
 Penjelasan lebih lanjut terkait cara kerja perintah
document.getElementById(). Secara singkat perintah ini
dipakai untuk mencari element HTML berdasarkan nilai
atribut id.
Menampilkan Hasil JavaScript dengan alert()
Perintah alert() sudah beberapa kali kita

gunakan, dan ini adalah cara paling
sederhana untuk menampilkan hasil
program JavaScript. alert() akan
menampilkan apapun yang diinput sebagai
argument.
Tampilan Program Hasil alert
Tampilan hasilnya
Penjelasan Alert()
 Perintah alert() di akses pada baris 13
dan 16. Pada saat dijalankan, isi
variabel foo dan bar akan tampil di
jendela alert secara bergantian. Setelah
men-klik tombol OK dari hasil alert(foo),
barulah tampil hasil alert(bar).
 Meskipun sangat praktis, perintah alert()
tetap menampilkan isi variabel bar
sebagai [object Object].
Menampilkan Hasil JavaScript dengan console.log()
 Dari ketiga cara yang sudah kita bahas, terdapat

sedikit masalah saat menampilkan variabel bar
yang berisi object. Ketiganya kurang informatif
untuk data-data kompleks JavaScript. Sebagai
solusi, kita bisa mengakses hasil kode
JavaScript dengan perintah console.log().
 Perintah console.log akan menampilkan hasil
program ke dalam tab console pada menu Web
Developer. Cara penggunaan fungsi ini sama
seperti alert, hanya butuh menginput hasil yang
ingin ditampilkan sebagai argument.
Tampilan Program console.log()
Penjelasan console(log)
 Hasilnya, isi variabel foo dan bar tampil beserta nilai yang
ada.
 Pilihan apakah menggunakan perintah alert() dan
console.log() tergantung kepada kenyamanan kita sebagai
programmer. Dalam tutorial JavaScript di Duniailkom ini saya
akan lebih banyak menggunakan console.log() yang lebih
informatif dan tampilan hasil program menjadi lebih rapi.
 Namun perintah alert() dan console.log() hanya untuk
proses development saja. Untuk web asli nanti, lebih cocok
memakai perintah document.getElementById() dan
innerHTML seperti cara kedua, sebab hasilnya langsung
terlihat di web browser.
EmcaScript dan DOM
JavaScript pada dasarnya terdiri dari 2
bagian besar, yakni EcmaScript dan DOM
(Document Object Model).
EmcaScript
 EcmaScript adalah sebuah standar bahasa
pemrograman yang dibuat oleh Ecma (European
Computer Manufacturers Association), yang salah
satunya diterapkan ke dalam JavaScript. Sebagai
analogi, jika EcmaScript adalah bahasa resmi
sebuah daerah, maka JavaScript adalah salah satu
dialek dari bahasa tersebut.
 Selain JavaScript, dulunya terdapat bahasa
pemrograman JScript dan ActionScript yang
sama-sama menggunakan standar EcmaScript,
namun sekarang bahasa tersebut sudah tidak
dipakai lagi.
Pengertian Emcascript
 Perbedaan nama JavaScript dan EcmaScript muncul karena masalah
trademark. Merek datang dari kata “Java” di dalam JavaScript, dimiliki
oleh Sun Microsystem (saat ini menjadi bagian dari Oracle), sehingga
tidak bisa dipakai tanpa izin oleh perusahaan-perusahaan lain.
 Di dalam EcmaScript, berisi aturan dasar sebuah bahasa
pemrograman (syntax), seperti cara pendefenisian variabel, perbedaan
tipe data, cara pembuatan array, cara penulisan struktur if, atau cara
pembuatan object.
 EcmaScript banyak mengambil inspirasi dari bahasa pemrograman C
dan C++, sehingga jika pernah menggunakan bahasa pemograman
C++ atau turunannya seperti PHP, tidak akan terlalu sulit untuk
mempelajari aturan penulisan EcmaScript.
 Selama mempelajari JavaScript, kita akan sering mendengar istilah
seperti EcmaScript 6 atau ES6, EcmaScript 7 atau ES7, dst. Angka ini
menunjukkan versi dari EcmaScript yang dipakai. Umumnya, web
browser akan selalu mengikuti standar EcmaScript terbaru
DOM (Document Object Model)
 Bagian kedua yang akan kita pelajari dalam menguasai client-
side JavaScript adalah DOM (singkatan dari Document Object
Model). DOM adalah API (Application Programming
Interface) yang disediakan web browser kepada programmer.
 Secara sederhananya, DOM berisi kumpulan aturan atau cara
bagi programmer untuk memanipulasi apapun yang tampil dalam
halaman web. DOM tidak terikat dengan JavaScript, dan juga
bukan bagian dari JavaScript. DOM yang sama bisa diakses
dengan bahasa client-side lain seperti JScript.
 Tag atau element yang ada di dalam HTML diatur di dalam DOM.
Dengan menggunakan JavaScript, kita bisa memanipulasi
seluruh tag HTML ini. Salah satu contoh perintah DOM yang
telah kita gunakan adalahdocument.getElementById().
DOM (Document Object Model)
 Perintah document.getElementById() berfungsi untuk
mencari sebuah tag HTML berdasarkan atribut id.
Untuk keperluan yang sama, tersedia juga perintah-
perintah lain seperti document.getElementByName(),
document.getElementByClass(), dan lain-lain. Fitur-fitur
seperti inilah yang akan kita pelajari pada bagian DOM.
 Karena sifatnya yang berbeda, tutorial JavaScript di
duniailkom akan memisahkan antara EcmaScript
dengan DOM. Jika anda berencana belajar Nodejs,
yakni penerapan bahasa JavaScript di sisi server, maka
tidak perlu belajar DOM, cukup EcmaScript saja dan
lanjut ke Nodejs.
Aturan Dasar Penulisan Kode
Program JavaScript
Perbedaan Penulisan Huruf (Case Sensitivity)
 Di dalam JavaScript, penulisan huruf besar dan huruf

kecil dibedakan, atau dalam istilah pemrograman bersifat
Case Sensitif.
 Ini berarti penulisan variabel, keyword, dan nama fungsi
di JavaScript harus konsisten. Variabel nama, Nama,
dan NAMA merupakan 3 variabel berbeda. Sedangkan
untuk penulisan keyword while, harus ditulis dengan
while, bukan While atau WHILE.
 Namun karena HTML sendiri tidak bersifat case-sensitif,
aturan ini bisa berbeda. Contohnya, jika menggunakan
event handler bisa ditulis onclick, onClick, atau
OnClick. Ketiga penulisan ini dibolehkan di dalam HTML.
Penggunaan Karakter Whitespace
 Whitespace adalah sebutan dari

karakter-karakter yang tidak terlihat,
seperti spasi, enter, tab. Secara umum,
whitespace akan diabaikan pada saat
pemrosesan oleh JavaScript.
 Karakter-karakter whitespace ini bebas
digunakan untuk menjorokkan atau
meng-indenting kode program agar lebih
mudah dibaca.
 Misalnya kode berikut:
 Akan diproses sama oleh JavaScript dengan

Cara Penulisan Baris Komentar
 Baris komentar atau comment adalah kode program yang
ditambah untuk memberi keterangan / penjelasan
mengenai cara kerja program. Baris Komentar ini tidak
akan diproses dan hanya sebagai alat bantu bagi kita
sebagai programmer.
 Dalam bahasa JavaScript, terdapat 2 cara membuat baris
komentar:
a. Komentar singkat dengan karakter forward slash dua
kali: //.
b. Komentar panjang dengan tanda pembuka /* dan tanda
penutup */.
 Dalam bahasa JavaScript, terdapat 2 cara membuat baris
komentar:
Contoh Penulisan Komentar
Aturan Penulisan Identifier (Variabel dan Nama Fungsi)
 Di dalam pemrograman, identifier adalah sebutan

untuk sebuah nama. Nama ini mencakup nama
variabel, nama konstanta nama, nama class, nama
function, dll. Aturan penulisan identifier dalam
JavaScript adalah :
a) Karakter pertama harus diawali dengan huruf,
underscore (_) atau tanda dollar ($)
b) Karakter kedua dan seterusnya bisa ditambah dengan
huruf, angka, underscore (_) atau tanda dollar ($).
 Berdasarkan aturan ini, kita tidak bisa menggunakan
angka sebagai karakter pertama dari sebuah identifier.
 Contoh Penulisan Nama Variabel
 Namun Karakter Yang Tidak Bisa

Digunakan sebagai identifier
Aturan Penulisan Tanda Semicolon di Akhir Baris
 Berbeda dari bahasa turunan C lainnya,

di dalam JavaScript karakter titik-koma
atau semicolon sebagai penanda akhir
baris perintah boleh tidak ditulis
(opsional).
 JavaScript bisa mendeteksi perintah
baru dari karakter Enter yang kita pakai
untuk pindah baris.
Tampilan Tanda Semicolon di Akhir
Baris
Penjelasan Semicolon di Akhir Baris
 Di setiap perintah JavaScript pada baris
10-13, saya tidak menambah titik koma
untuk menutup baris perintah, dan ini
tidak masalah.
 Namun walaupun boleh tidak ditulis,
menambah tanda titik koma akan
membuat program menjadi lebih mudah
dibaca dan menghindari kode ambigu di
beberapa situasi tertentu..
Terima Kasih

JavaScript Dasar - Menampilkan Hasil Program

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

JavaScript Dasar - Menampilkan Hasil Program

Diunggah oleh

Hak Cipta:

Format Tersedia

Pertemuan 13-15

• Sebagai contoh praktek, saya akan pindahkan

Cara pertama untuk menampilkan hasil

Cara kedua untuk menampilkan hasil

Perintah alert() sudah beberapa kali kita

 Dari ketiga cara yang sudah kita bahas, terdapat

 Di dalam JavaScript, penulisan huruf besar dan huruf

 Whitespace adalah sebutan dari

 Akan diproses sama oleh JavaScript dengan

 Di dalam pemrograman, identifier adalah sebutan

 Namun Karakter Yang Tidak Bisa

 Berbeda dari bahasa turunan C lainnya,

Anda mungkin juga menyukai