I KOMPETENSI INTI

KOMPETENSI INTI : PENGETAHUAN

VIII-3 Memahami pengetahuan (faktual, konseptual, dan prosedural) berdasarkan rasa ingin tahunya tentang ilmu
pengetahuan, teknologi, seni, budaya terkait fenomena dan kejadian tampak mata.

KOMPETENSI INTI : KETERAMPILAN

VIII-4. Mencoba, mengolah, dan menyaji dalam ranah konkret (menggunakan, mengurai, merangkai, memodifikasi, dan
membuat) dan ranah abstrak (menulis, membaca, menghitung, menggambar, dan mengarang) sesuai dengan
yang dipelajari di sekolah dan sumber lain yang sama dalam sudut pandang/teori.

1
 II KOMPETENSI DASAR DAN INDIKATOR PENCAPAIAN KOMPETENSI

KOMPETENSI DASAR : PENGETAHUAN

VIII-3.4. Memahami bahwa bagaimana manusia berinteraksi dengan komputer melalui algoritma, dan bahwa algoritma
dirancang untuk mengeneralisasi solusi berbagai situasi.
KOMPETENSI DASAR : KETERAMPILAN
VIII-4.4.a. Membuat robot yang mampu menggambar atau menulis dengan program sederhana.
VIII-4.4.b. Mendefinisikan variabel, menyimpan data dan mengubahnya.
VIII-4.4.c. Memakai instruksi kondisional

INDIKATOR PENCAPAIAN KOMPETENSI : PENGETAHUAN

VIII-3.4. Siswa mengenal lingkungan eksekusi : pelaku, primitf gerakan, menuliskan instruksi. JIka tidak ada robot, dapat
menggunakan benda-benda yang ada
INDIKATOR PENCAPAIAN KOMPETENSI : KETERAMPILAN
VIII-4.4.a. Siswa mampu menjelaskan konsep otomasi dan apa yang dilakukan oleh robot
VIII-4.4.b. Siswa mampu mendefinisikan variabel, memori dan memanipulasi nilai/value
VIII-4.4.c. Siswa mampu memrogram robot yang mengenal kondisi

2
 III TUJUAN PEMBELAJARAN

Pertemuan Ke - 1 :

Setelah mengikuti serangkaian kegiatan pembelajaran, peserta didik dapat :

1. Mengidentifikasi suatu masalah dan membuat algoritmanya untuk penyelesaian masalah.
2. Membuat program sederhana dengan menggunakan bahasa pemrograman JavaScript.

Pertemuan Ke - 2 :

Setelah mengikuti serangkaian kegiatan pembelajaran, peserta didik dapat :

3. Membuat program sederhana menggunakan instruksi kondisional.

.

3
 IV MATERI POKOK

MATERI POKOK : PENGETAHUAN

VIII-3.4. Robot : apa itu robot, robot HW dan SW, cara bekerja robot/konsep otomasi, program untuk robot

MATERI POKOK : KETERAMPILAN

VIII-4.4.a. prinsip otomasi dan robot (software,hardware)

VIII-4.4.b. Konsep memori, variabel, nilai yang disimpan/dicatat
VIII-4.4.c. Arti instruksi kondisional dan eksekusinya

4
 A Mengenal Algoritma
1. Algoritma Pada Komputer 
Algoritma pada komputer artinya langkah-langkah instruksi dengan mengggunakan
komputer. Coba kita perhatikan kembali contoh mengendarai sepeda seperti diatas, untuk
mengendarai dengan baik dan sampai ke tempat yang ingin di dituju maka kita harus
mengendarai sepeda sesuai dengan prosedur secara berurutan barulah kita akan sampai
ke tempat yang ingin di tuju dengan selamat.

2. Penyajian Algoritma
Dalam penyajian algoritma terdiri dari dua macam bentuk yang terdiri dari tulisan atau
bahasa dan gambar. Penyajian algoritma dalam bentuk tulisan atau bahasa harus memakai
sebuah bahasa yang dimengerti manusia dalam membuat langkah-langkah dari algortima
itu sendiri. Sementara itu selain dari dua bentuk penyajian algoritma tersebut diatas,
algoritma juga dapat disajikan dalam 2 macam cara, yaitu menggunakan pseudocode dan
flowchart.

5
A. Pseudocode

Menurut wikipedia, pengertian pseudocode adalah deskripsi tingkat tinggi informal dan ringkas atas algoritma
pemrograman komputer yang menggunakan konvensi struktural atas suatu bahasa pemrograman, dan ditujukan untuk
dibaca oleh manusia dan bukan oleh mesin.
 
Pseudocode merupakan kode yang mirip dengan pemograman sebenarnya. Pseudocode berasal dari kata “Pseudo” yang
berarti imitasi, mirip, atau menyerupai dengan kode bahasa pemograman dan “code” yang berarti kode program. Jadi
pseudo-code bisa dikatakan juga sebagai algortima yang sudah sedikit digabungkan dengan bahasa pemrograman yang
akan digunakan. Bagian-bagian Pseudocode biasanya terdiri dari 3 hal yaitu : Deklarasi Program, Kamus, dan Deskripsi
Algoritma.

B. Flowchart

Flowchart ini biasa disebut dengan diagram alur yaitu sebuah urutan proses tertentu pada algoritma yang disajikan
dengan simbol-simbol tertentu dalam bentuk diagram. Sebagai contoh kita ingin menjumlahkan 2 bilangan jika disajikan
dengan menggunakan flowchart. Maka flowchart dapat dibuat dalam bentuk seperti berikut.
 

6
Symbol-simbol yang biasa digunakan untuk menulis flowchart adalah sebagai berikut :

7
C. Bentuk Dasar Algoritma

Dalam susunan algoritma dimulai dari kondisi awal atau input data awal, sehingga computer mendeskripsikan yang
apabila di eksekusi serta di proses dengan melalui urutan-urutan kondisi yang terbatas dan terdefinisi, sehingga
computer akan berhenti pada kondisi akhir dengan menghasilkan sebuah keluaran atau output.
 
Dalam bentuk algoritma ini dikenal dengan 3 bentuk dasar yaitu sebagai berikut :
 
a) Algoritma Sekuensi (Sequence Algorithm)
 
Algoritma sekuensi adalah sebuah algoritma yang langkah-langkahnya berurutan dari awal sampai dengan akhir.

b) Algoritma Perulangan (Looping Algorithm)

 
Algoritma perulangan (Looping Algorithm) merupakan suatu algoritma yang menjalankan beberapa langkah tertentu
secara berulang-ulang atau looping. Pada masalah yang kita hadapi, ada pula sebuah langkah yang harus kita lakukan
secara berulang-ulang.

c) Algoritma Percabangan atau Bersyarat (Conditional Algorithm)

 
Conditional algorithm atau algoritma bersyarat merupakan algoritma yang menjalankan langkah berikutnya apabila
terdapat syarat yang sudah dipenuhi.

8
d) Mendesain Algoritma
 
Menurut Donald E. Knuth, dari pengertian algoritma yang sudah dijelaskan sebelumnya, dapat diketahui bahwa sebuah
algoritma yang baik yaitu algoritma yang mempunyai kriteria sebagai berikut :
 Masukan (input)
Algoritma mempunyai input 0 (nol) atau lebih
 Keluaran (output)
Algoritma harus menghasilkan atau mengeluarkan minimal 1 output
 Terbatas (finite)
Algoritma harus berhenti setelah melakukan hal-hal yang diperlukan
 Pasti (definite)
Algoritma harus jelas kapan dimulai dan berakhir. Tujuan dari algoritma harus jelas, setiap langkah-langkah harus
dijelaskan dengan jelas.
 Efisien
Membuat algoritma haruslah efisien. Adanya langkah seperti mencari hasil 1+0 tidak efisien. Hal ini dikarenakan
bilangan apapun jika ditambah dengan 0 (nol) maka hasilnya adalah bilangan itu sendiri. Sehingga adanya langkah
seperti itu tidak perlu dimasukan ke dalam sebuah algoritma.
e) Syntax, Statement, dan Expressions
 
 Syntax
Syntax adalah kumpulan aturan-aturan pada penggunaan bahasa pemrograman. Contohnya pada java, alert ditulis
dengan huruf kecil untuk huruf awal “p”. Jika digunakan huruf capital maka program akan error.
  9
 Statements
 
Statement pada program computer adalah instruksi yang diberikan kepada computer untuk melakukan sesuatu.
Contohnya, Statement print(“Hallo Dunia”) untuk memerintahkan computer menuliskan Hallo Dunia di layar computer.
 
 Expressions
 
Jika pada statement terdapat nilai yang dioperasikan maka itu disebut dengan expressions. Contohnya, 5+3=8

 Algoritma yang Efisien

 
Dalam membuat program diusahakan tidak berbelit-belit sehingga menghemat RAM. Selain itu, diusahakan sebuah
program dapat dieksekusi dalam waktu yang singkat. Untuk itu, diperlukan sebuah algoritma yang efisien.

 Klasifikasi Algoritma
 
Salahsatu cara untuk mengklasifikasikan algoritma yaitu dengan menggunakan cara implementasi, Berikut ini adalah
beberapa cara klasifikasi algoritma :

 Rekursi atau iterasi

Algoritma rekursi adalah suatu algoritma yang memanggil dirinya sendiri secara berulang-ulang (looping) hingga pada
kondisi tertentu dapat tercapai. Rekursi merupakan suatu metode umum dalam pemrograman fungsional.

10
 Logical
 
Algoritma dapat dilihat sebagai sebuah logika dedukasi terkontrol. Pernyataan ini dapat diekspresikan sebagai:
Algoritma = control + logika. Komponen logika yang mengekspresikan aksioma dapat digunakan dalam komputasi
serta komponen control dalam menentukan cara-cara deduksi yang digunakan pada aksioma. Hal tersebut adalah
merupakan dasar daripada paradigm pemrograman logika. Dalam pemrograman, logika murni komponen control
ialah tetap serta algoritma yang ditentukan dengan memberikan hanya ada komponen logikanya. Daya tarik dari
pendekatan logical adalah semantic elegan, sebuah perubahan yang ada dalam aksioma mempunyai perubahan
dalam algoritma.
 
 Serial, parallel atau terdistribusi
 
Pada umumnya suatu algoritma menjalankan satu instruksi algoritma setiap waktu. Computer tersebut dapat disebut
dengan computer serial. Rancangan algoritma yang digunakan bagi lingkungan tersebut ialah algoritma serial, terbalik
dengan algoritma terdistribusi atau algoritma paralel. Algoritma parallel menggunakan arsitektur computer yang
mana terdapat prosesor-prosesor dapat mengerjakan masalah pada waktu yang sama. Sedangkan algortima
terdistribusi menggunakan banyak mesin yang terhubung ke jaringan. Algoritma terdistribusi dan parallel membagi
permasalahan ke banyak sub masalah simetris maupun asimetris dan mengumpulkan hasil yang didapat kembali.
Konsumsi dari sumber pada algoritma tersebut tidak hanya perputaran prosesor tetapi juga terdapat daya
komunikasi antar prosesor.

11
 Deterministik atau non-deterministik
 
Algoritma deterministic dapat menyelesaikan masalah-masalah dengan keputusan yang tepat disetiap langkah-
langkah dari sebuah algoritma. Sedangkan algoritma non-deterministik dapat menyelesaikan masala-masalah lewat
adanya penerkaan walaupun penerkaan tersebut pada umumnya lebih akurat dengan memakai heuristik.

 Tepat atau perkiraan

 
Jika terdapat algoritma dapat sampai ke solusi yang tepat, ada juga algoritma perkiraan yang mencari perkiraan
terdekat dengan solusi sebenarnya. Perkiraan tersebut dapat memakai strategi deterministic ataupun acak.
 
 Algoritma Quantum
 
Berjalan pada model realistik dari komputasi kuantum. Istilah tersebut pada umumnya dipakai bagi algoritma yang
pada dasarnya quantum, ataupun memakai fitur-fitur penting dari komputasi quantum seperti belitan quantum atau
superposisi quantum.

12
 B Mengenal Pemrograman Java Script
1. Javascript
Javascript adalah bahasa script yang biasa jalan di browser, orang-orang biasa bilang client side programming. Client di
sini adalah browser, seperti: Internet Explorer, Firefox, Safari, Chrome dan sebagainya. Kode javascript biasanya disisipkan
diantara kode-kode HTML.
Kita bisa menuliskan kode javascript di teks editor seperti notepad, notepad++, sublime text dll. Kita tidak memerlukan
aplikasi lagi untuk menjalankan javascript, cukup menjalankan javascript menggunakan browser karena semua browser
punya engine yang mengerti kode javascript.
2. Memulai Javascript

a. Kita coba dengan menggunakan teks editor notepad :

13
 Kode javascript ditulis diantara tag <script> dan </script>, bisa kita sisipkan di kode-kode html kita. Setelah mengetik
kode di notepad kita simpan file tersebut dengan nama file : tes.html, dan ganti save as type dengan all files seperti
dibawah ini :

Untuk mengetesnya, kita klik dua kali pada file yang sudah di simpan atau bisa klik kanan open with pilih browser
yang diinginkan hasilnya akan seperti dibawah ini :

Javascript bisa juga ditulis terpisah, filenya diberi ekstension .js Contoh: namafile.js, nanti cara menyisipkannya di file
html adalah seperti berikut :
<script type="text/javascript" src="namafile.js"></script>
14
3. Sintaks Javascript
Sintaks javascript bersifat case sensitive, artinya huruf kecil dan huruf besar adalah berbeda. Setiap baris kode javascript
dipisahkan baris baru atau bisa juga titik koma (;) serta komentar dalam javascript di awali dengan // atau ditulis diantara
/* dan */
 
4. Variabel Javascript

a. Karakter Javascript
 Karakter pertama harus diawali dengan huruf, underscore (_) atau tanda dollar ($)
 Karakter kedua dan seterusnya bisa ditambahkan dengan huruf, angka, underscore (_) atau tanda dollar ($).
Contoh : jumlah_hits , _nama

b. Deklarasi Variabel
 
Cara membuat variabel di dalam JavaScript di bedakan menjadi 2, yakni dengan menggunakan keyword var, dan tanpa
var.Jika menggunakan kata kunci var, berikut adalah contoh penulisannya :
<script>
var a;
var b, c, d;
var e; var f;
var g=10;
var h="Saya Sedang Belajar JavaScript";
</script>
15
Pada 2 baris terakhir kita membuat variabel, sekaligus memberikan nilai ke dalam variabel tersebut.
Cara kedua untuk membuat variabel adalah tanpa menggunakan keyword var, seperti berikut ini :
 
<script>
a;
b=12;
c=" Saya Sedang Belajar JavaScript ";
</script>
 
Pembuatan variabel tanpa menggunakan keyword var memang lebih cepat, akan tetapi tidak disarankan. Walaupun
variabel yang dideklarasikan tanpa keyword var akan tetap berfungsi sebagaimana mestinya seperti variabel dengan var,
namun JavaScript ‘menyimpan’ variabel tersebut dengan cara yang berbeda. Salah satu perbedaannya adalah tentang
variabel scope.

5. Operator
a. Operator Aritmatika
Operator aritmatika adalah operator untuk operasi matematika

16
Contoh:
<script>
var x = 1;
var y = 5;
z = x + y;
alert(z);
</script>

b. Operator Assignment
 Memberikan nilai kepada suatu variable menggunakan tanda sama dengan =
Berikut adalah penyingkatan penulisan operator :

Contoh:
<script>
var x = 5;
var y = 2;
x -= y
alert(x);
</script>
17
c. Operator Pembanding
Untuk membandingkan nilai suatu variabel :

Contoh:
<html>
<head>
<script>
var x = 5;
var y = 3;
if(x > y){
alert("x lebih besar dari y");
}
</script>
</head>
<body>
</body>
</html>

18
d. Operator Logika

Contoh:
<script>
var x = 90;
if(x >= 80){
alert("Nilai = A");
}else if(x >= 70 && x < 80){
alert("Nilai = B");
}else if(x >= 60 && x < 70){
alert("Nilai = C");
}else{
alert("Nilai = D");
}
</script>

19
6. Statement
a. Kondisional
Kondisional berguna untuk mengecek suatu kondisi dan melakukan suatu kode jika kondisi tersebut benar atau salah.
 if
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}
 Contoh :
<script>
var x = 5;
if(x == 5){
alert("Hai Apa kabar");
}
</script>
 if - else
Sintaks :
if(kondisi){
kode yang dijalankan jika benar
}else{
kode yang dijalankan jika salah
} 20
 Contoh :
<script>
var x = 4;
if(x == 5){
alert("Hai Apa kabar");
}else{
alert("X tidak sama dengan 5");
}
</script>
 if - else if - else
Jika anda membutuhkan kondisi yang banyak
Sintaks :
if(kondisi 1){
kode yang dijalankan jika kondisi 1 benar
}else if(kondisi 2){
kode yang dijalankan jika kondisi 2 benar
}else if(kondisi 3){
kode yang dijalankan jika kondisi 3 benar
}else{
kode jika salah satu kondisi di atas tidak ada yang benar
}
21
 Contoh :
<script>
var nilai = 90;
if(nilai >= 85){
alert("A");
}else if(nilai >= 70 && nilai < 85){
alert("B");
}else if(nilai >= 60 && nilai < 70){
alert("C");
}else{
alert("D");
}
</script>
 switch
Sama seperti if - else if - else, berguna jika membutuhkan kondisi yang banyak
Sintaks :
switch(ekspresi){
case kondisi1 :
kode yang dijalankan jika kondisi1 benar;
break;
case kondisi2 :
kode yang dijalankan jika kondisi2 benar;
break;
case kondisi3 :
kode yang dijalankan jika kondisi3 benar;
break;
}
22
 Contoh :
<script>
var buah = "jeruk";
switch (buah) {
case "apel":
alert("buahnya adalah apel");
break;
case "jeruk":
alert("buahnya adalah jeruk");
break;
case "anggur":
alert("buahnya adalah anggur");
break;
}
</script>
b. Pengulangan
 for
Berguna untuk pengulangan yang sudah ditentukan terlebih dahulu awalnya berapa, dijalankan
sampai kondisi bagaimana.
Sintaks :
for(awal; kondisi; penambahan){
kode untuk dijalankan
}
 Contoh :
<script>
for (i = 1; i <= 10; i++) {
document.write(i);
}
</script>
 
23
 while
Berguna untuk menjalankan suatu kode terus menerus selama kondisi bernilai TRUE
Sintaks :
while(kondisi){
kode untuk dijalankan;
}
 Contoh :
<script>
var i=1;
while(i<=5)
{
document.write(“Nomor : "+i +"<br />");
i++;
}
</script>
7. Fungsi
Fungsi adalah kumpulan blok kode yang membentuk fungsi tersendiri. Kita bisa membuat sendiri fungsi tersebut
Sintaks:
function nama_fungsi(parameter){
kode-kode javascript
}

24
7. Fungsi
Fungsi adalah kumpulan blok kode yang membentuk fungsi tersendiri. Kita bisa membuat sendiri fungsi tersebut
Sintaks:
function nama_fungsi(parameter){
kode-kode javascript
}
Contoh 1:
<script>
function tes(){
document.write("Hello World!");
}
//untuk menjalankan fungsi, cukup tulis namafungsi
tes();
</script>
Contoh 2:
<script>
function kalikan(x,y){
z = x * y;
alert("Hasil kali "+x+" * "+y+" = "+z);
}
kalikan(5,3);
</script>

25
8. Penanganan Event
a. Pengertian Penanganan Event
Penanganan Event atau Event Handler adalah kemampuan javascript untuk mendeteksi event atau kejadian-kejadian
yang terjadi di halaman web, kemudian menangani atau melakukan suatu proses jika terdeteksi suatu event. Event di
web bisa macam-macam, seperti klik, double klik, menggerakkan mouse, bila pointer mouse berada di atas suatu objek
HTML, dan sebagainya.
Sintaknya:
nama_event=”kode javascript”
  Contoh:
<html>
<body>
<a href=”http://www.google.com” onclick=”alert(‘hello’)”>google</a>
</body>
</html>
Pada contoh di atas ada sebuah link google, yang jika diklik (onclick) maka akan dieksekusi kode
javascript alert(‘hello’)
Ada macam-macam event yang bisa terjadi pada halaman web atau objek HTML, yaitu sebagai berikut :
• onblur
• onchange
• onclick
• ondblclick
• onfocus
• oneror
26
• onkeydown
• onkeypress
• onkeyup
• onload
• onmousedown
• onmousemove
• onmouseout
• onmouseover
• onmouseup
• onreset
• onresize
• onselect
• onsubmit
• onunload

9. Objek String

Untuk membantu melakukan formatting terhadap teks secara programming, javascript menyediakan beberapa metode
formatting menggunakan javascript.

27
Contoh 1:
<script>
var teks = "berempat"
panjang = teks.length;
alert(panjang);
</script>
 Hasilnya :

28
10. Objek Window
A. Membuka Windows Di Java Script
Untuk membuka window di javascript adalah dengan metode open ()
Sintaks :
window.open(url, nama_window, konfigurasi)
Contoh :
window.open(“http://www.google.com”,”windowku”,”width=300,height=200”);
Untuk konfigurasi yang bisa diset sebagai berikut:

29
B. Mereload, Menutup, Meloading Halaman Baru, Print
Untuk mereload window adalah dengan cara :
window.location.reload()
 
Untuk menutup window adalah dengan cara :
window.close()
 
Untuk meloading halaman baru adalah :
window.location="urlkamu.com"
kode di atas akan sama jika anda mengklik suatu link:
<a href=”urlkamu.com”>urlkamu</a>
 
Untuk mengeprint halaman web
window.print()
 
C. Komunikasi Antar Window

Induk.html
<html>
<head>
<title>Test</title>
<script language="javascript">
function buka(){
var x = window.open('anak.html', 'newWindow', 'height=300,width=300');
}
</script>
30
</head>
<body>
<form name=formulir>
<INPUT type=button value="buka window" name=submit1 onClick="buka();">
<input type=text name=kotak id=kotak>
</form>
</body>
</html>
anak.html
<html>
<head>
<title>testing</title>
<script language=javascript>
function setInduk(){
window.opener.document.getElementById("kotak").value =
document.getElementById("inputan").value;
}
</script>
</head>
<body>
<form name=myForm>
<input type=text name="inputan" id="inputan">
<input type=button value="Click Me" onClick="setInduk();">
</form>
</body>
</html>
31