Scribd
Unggah
7 tayangan54 halaman

Materi 6 - Javascript (Part 1)

Dokumen ini menjelaskan tentang dasar-dasar pemrograman JavaScript, termasuk pengertian, cara menampilkan output, penggunaan variabel, operator, tipe data, array, dan fungsi. JavaScript digunakan untuk mengatur perilaku halaman web dan dapat berinteraksi dengan HTML dan CSS. Selain itu, dokumen juga membahas perbedaan antara var, let, dan const dalam mendeklarasikan variabel serta cara mengakses dan memanipulasi array.

Diunggah oleh

register purpose
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 PDF, TXT atau baca online di Scribd
7 tayangan54 halaman

Materi 6 - Javascript (Part 1)

Dokumen ini menjelaskan tentang dasar-dasar pemrograman JavaScript, termasuk pengertian, cara menampilkan output, penggunaan variabel, operator, tipe data, array, dan fungsi. JavaScript digunakan untuk mengatur perilaku halaman web dan dapat berinteraksi dengan HTML dan CSS. Selain itu, dokumen juga membahas perbedaan antara var, let, dan const dalam mendeklarasikan variabel serta cara mengakses dan memanipulasi array.

Diunggah oleh

register purpose
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 PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 54

Javascript

[Part 1]
Apa yang akan dipelajari hari ini?
• Pengertian Javascript
• Menampilkan output pada JS
• InnerHTML
• Document.write()
• Window.alert()
• Console.log()
• Window.print()
• Variable
• Operator
• Tipe data
• Array
• Function
Bahasa Pemrograman Dasar Web
Programming
Frontend :
1. HTML  untuk mengatur content dalam halaman web Sudah kita
pelajari
2. CSS  untuk mengatur layout tampilan halaman web
3. Javascript  untuk mengatur behavior dari halaman web

Backend:
1. PHP  server-side, agar halaman web lebih dinamis dan interaktif
karena dapat terhubung dengan database
Apa saja yang bisa kita lakukan menggunakan
JS ?
• Banyak hal yang bisa kita lakukan dengan menggunakan JS, beberapa
diantaranya adalah :
• JS dapat merubah isi konten HTML
• JS dapat mengubah value dari sebuah elemen HTML
• JS dapat mengubah style dari CSS
• JS dapat menyembunyikan elemen HTML
• JS dapat menampilkan elemen HTML (yang asalnya tersembunyi)
• dll
Apa yang menarik
dari kemampuan-
kemampuan ini?
Mari kita lihat
Dimana JS diletakkan ?
• Mirip dengan CSS, javascript dapat dituliskan di :
1. Internal JS di dalam Tag <Head> menggunakan tag <Script>
2. Di dalam elemen <Body> menggunakan tag <Script>
3. Inline JS  di dalam atribut pada elemen HTML
4. External JS  disimpan di dalam file eksternal (extentionnya .*js) dan
dipanggil oleh file HTML
Menampilkan Output pada Javascript
• Terdapat beberapa cara menampilkan output pada JS sesuai dengan
kebutuhannya :
• innerHTML
• Document.write()
• Window.alert()
• Console.log()
InnerHTML
• Untuk mengakses sebuah elemen pada halaman web, biasanya JS
akan menggunakan perintah : document.getElemenById(id)
• Property innerHTML digunakan untuk mendefinisikan konten dari
elemen HTML tersebut
• Id yang dimaksud di sini adalah nama id dari sebuah elemen
document.write()
• Menuliskan teks di dalam halaman web
• document.write sebaiknya jangan dilakukan setelah halaman web selesai diload.
• Hal ini akan menyebabkan dihapusnya seluruh elemen HTML pada halaman web tersebut
dan digantikan dengan isi dari document.write
• Contoh document.write yang diload bersamaan dengan seluruh elemen HTML
• Contoh document.write yang dijalankan setelah halaman web selesai
diload
Source code :

Tampilan Tampilan ketika


ketika halaman document.write
web di load : pada button
dijalankan : Seluruh isi halaman
web digantikan
dengan isi dari
document.write
window.alert()
• Akan menampilkan konten pada sebuah window box
console.log()
• Digunakan untuk menampilkan output melalui elemen debugger
pada browser
• Biasanya digunakan oleh programmer untuk melakukan debugging
window.print()
• Digunakan untuk melakukan print halaman web
Javascript Variable
Variable
• Variable merupakan wadah yang digunakan untuk menyimpan
sebuah nilai (value)
• Pada javascript, keyword yang bisa kita gunakan untuk membuat
variable antara lain :
• Var
• Let
• Const
Penamaan Variable
1. Variable harus dimulai dengan huruf
2. Variabel juga bisa dimulai dengan $ dan _
3. Nama variable bersifat case sensitive (huruf besar dan kecil
dianggap beda)
Var, Let dan Const
• Fungsi dari var dan let hampir sama, yakni digunakan untuk
menampung data yang sifatnya dinamis dan bisa diubah
• Sedangkan const merupakan identifier yang digunakan untuk
menampung value yang sifatnya tetap (misalkan : phi 3.14 nilainya
tetap, maka kita bisa menggunaka const)
Contoh Var
Contoh Let
Apa perbedaan mendasar Var dan Let ?
• Var sifatnya function scope, artinya :
• Dia terikat pada area di dalam fungsi
• Selama variable tersebut dipanggil di dalam fungsi tersebut, isi variable masih
bisa ditampilkan
• Let sifatnya block scope, artinya :
• Dia terikat pada sebuah blok program (ditandai dengan bracket {} ) secara
langsung
• Selama variable tersebut dipanggil di dalam blok tersebut, isi variable masih
bisa ditampilkan
• Namun jika diluar blok, isi dari variable tidak dapat diakses dan akan muncul
pesan error pada log
• Blok statement. areanya dibatasi oleh { }
• Variable yang dideklarasikan dengan Let akan dapat diakses isinya
karena pemanggilannya masih di dalam blok statement

• Variable baz di deklarasikan di blok statement, namun dipanggil di luar


blok statement
• Hal ini menyebabkan muncul pesan error pada log.
• Dan nilainya tidak dapat diakses

Namun variable moo masih bisa diakses isinya di luar blok statement

Pesan error dari variable baz yang diakses di luar blok statementnya
Kapan menggunakan Var atau Let ?
• Pakai var jika anda ingin isi dari variable dapat diakses di luar blok
statement
• Pakai let jika anda ingin isi dari variable tidak dapat diakses di luar
blok statement
• Sesuai kebutuhan saja
• Namun secara umum penggunaan var dan let sama
Contoh Const
• Jika kita ingin membuat sebuah variable yang nilainya tetap (tidak
berubah) maka kita bisa mendeklarasikan variable tersebut
menggunakan const
Operator
Operator pada JS

Operator Arti
+ penambahan
- pengurangan
* perkalian
/ Pembagian
% Modulus / sisa hasil bagi
++ Increment (tambah 1)
-- Decrement (kurang 1)
Operator + (penambahan)
Operator – (pengurangan)
Perkalian
Javascript Assignment Opoerators
String Operators
• Operator + dapat digunakan juga untuk operator pada variable
bertipe string yang tujuannya untuk menggabungkan (concatenate)
string
• Contoh :

• Assignment operator += juga dapat digunakan untuk menggabungkan


variable bertipe string
Operator perbandingan
Operator logika
Tipe Data
Tipe Data pada JS
Tipe Data Deskripsi Contoh :
String Tipe data berupa teks let x=“halo semuanya”;
Number Tipe data yang berupa angka baik let x=5;
bilangan bulat, desimal, besar/kecil
Boolean Tipe data logika biner yakni menyimpan
nilai benar/sala (true/false)

Array Tipe data array digunakan untuk


menyimpan banyak data dengan tipe
data yang sama di dalam sebuah
variable
Object Berbanding terbalik dengan array, objek
adalah tipe data yang dapa digunakan
untuk menyimpan data dengan tipe
data yang berbeda-beda
Typeof
• Merupakan operator yang digunakan untuk mengecek tipe data dari
sebuah variable
• Contoh:
Array
Array
• Array merupakan tipe data variable yang dapat menyimpan banyak
data sekaligus
• Data yang disimpan harus memiliki tipe data yang sama
• Syntax :
• Contoh :
Mengapa kita membutuhkan Array ?
• Jika kita memiliki list data yang tersimpan pada beberapa variable
seperti di bawah ini tentu akan tidak praktis :

• Bagaimana jika list data jenis mobil yang kita punya sebanyak 300
data? Haruskah kita membuat 300 variable? dan bagaimana jika kita
ingin melakukan pencarian data?
• Array menjadi solusi dari permasalahan ini
• Dengan array, bentuk di atas dapat dibuat sebagai berikut :
Cara mengakses elemen Array
• Karena array berisi banyak elemen data di dalamnya, maka tak jarang
kita ingin mengakses isi dari array tersebut
• Caranya adalah dengan memanggil elemen tersebut dengan urutan
indexnya
• Index urutannya adalah 0,1,2,3...dst (dimulai dengan angka 0)
• Pada contoh berikut, kita ingin mengakses elemen pertama dalam
array, karena index dimulai dari angka 0, maka elemen pertama
indexnya adalah 0 :
Cara menambahkan elemen Array
• Cara menambahkan elemen array adalah dengan mendefisikan value
dari elemen array yang baru sesuai dengan urutan indexnya
• Misalkan kita sudah punya 3 buah elemen pada array cars, dan kita
ingin menambahkan elemen baru ke dalam array tersebut :

Sekarang isi dari array menjadi:

Elemen baru
Push untuk menambahkan elemen Array
• Cara lain untuk menambahkan elemen array adalah menggunakan
push()
• Contoh :
Mengubah elemen pada Array
• Dilakukan jika kita ingin mengubah value (nilai) dari elemen yang ada
di array
• Untuk melakukannya kita harus tau pada urutan index ke berapakah
data yang akan diubah
• Contoh pengubahan elemen array jika kita ingin mengubah elemen
pertama pada array (indexnya 0)

Digunakan untuk mengubah elemen “Saab”


Dengan elemen “Opel”
Functions
Function
• Seperti Bahasa pemrograman lainnya, javascript juga memiliki fitur
untuk membuat function
• Function merupakan blok kode yang didesain untuk melaksanakan
pekerjaan tertentu
• Function tidak akan pernah dijalankan hingga ada yang memanggil
function tersebut
• Syntax :
Mengapa kita butuh function?
• Keunggulan menggunakan function adalah :
• Kita menuliskan kode program sekali, namun bisa dipanggil dan digunakan
berkali-kali
• Penulisan lebih modular dan rapi
• Mudah dalam proses maintenancenya
Return pada Function
• Return merupakan nilai balik yang diberikan oleh sebuah function
• Contoh :

• Pada function tersebut, return akan mengembalikan nilai berupa hasil


perkalian antara nilai yang ada di dalam parameter a dan parameter b
• Sehingg, jika function tersebut dipanggil dengan nilai parameter a=4
dan b=3, maka return akan mengembalikan nilai perkalian 3x4 yang
menghasilkan nilai 12
Hasilnya, x akan diisi dengan hasil return dari
function myFunction yakni 12
Local Variable pada Function
• Variable yang dideklrasikan di dalam function, maka sifatnya adalah
local variable (tidak dapat dipanggil dan diakses isinya di luar function
tersebut)
Rekomendasi Buku

Dan lain-lain..

Anda mungkin juga menyukai