1

Ada yang tahu apa itu coding?

Apa yang bisa dibuat dengan coding?

Kenapa kamu tertarik mau belajar coding?

Bahasa coding apa yg kamu tahu?

Aturan penulisan JavaScript;

Command Perintah maju baru akan
dilaksanakan jika ada () dan ;

Jika ada dua kata, kata yang kedua

huruf capital (camelCase)

Yuk coba juga game ini level 1-6!

https://www.tynker.com/hour-of-code/counter-hack
(atau search Google Tynker Counter Hack) >>> klik di Play Now

2
 Sudah sampai soal perulangan dengan For ya?
Agar code kalian lebih efektif, kita akan melakukan perulangan (loop) memakai for.

Ayo perhatikan penjelasan ini!

Baca: perintah addFish akan diulangi dengan kondisi dari nilai awal 0(i=0), dilaksanakan
tambah 1 (i++) terus sampai tidak lagi memenuhi kondisi stop yaitu <3 (i<3).

Jadi perintah addFish akan diulangi sebanyak 3 kali (sesuai dengan berapa kali i++ dilakukan)

Yuk lanjutkan game Counter Hack kamu level 7-10 dengan For Loop!

Loop Perintah maju ini akan diulangi

(Repeat) sebanyak 6 kali.

3
 Gimana terlalu gampang ya JavaScript di Tynker?
Ayo sekarang kita terapkan JavaScript di Web!

Saat mengakses situs web, pernahkah kamu menemukan prompt seperti ini?

Yuk kita buat!

Sekarang kita akan membuat program web page yang simpel dengan JavaScript.
Dalam program ini akan ada tombol yang jika ditekan, maka kita akan
memperoleh simbol love yang dapat kita atur jumlahnya! Kita juga akan membuat
prompt yang akan meminta untuk mengisi jumlah hati yang kita inginkan!
Kali ini kita akan memakai tiga bahasa:

Step 1. Preparation - Berkenalan dengan interface playcode

Buka link : https://playcode.io/

Keterangan :
A: Text Editor, tempat mengetik code. Terdapat 3 tab (HTML, CSS, dan JavaScript)
B: Web Page display, menampilkan hasil dari code.

4
 Matikan Live Play dengan cara klik pada Live hingga berwarna putih.

Step 2. HTML Coding (membuat menuliskan pesan dan tombol get hearts)

1) Hapus semua code pada tab index.html

2) Ketik code ini pada tab index.html

Code

1 <div>

2 <h3 >Click me to get some hearts</h3>

3 <button onclick="getHeart()">Click to get some</button>

4 </div>

Step 3. JavaScript Coding (membuat function getHeart untuk prompter

menanyakan jumlah hati yang di inginkan)

1) Hapus semua code pada tab script.js

5
 2) Ketik code ini pada tab script.js
Code

1 function getHeart(){

2 var n = prompt("How many hearts do you need?");

3 document.write("<h3 style='color:white'> There are "+n+" hearts for

you</h3>");
4 for(var i = 0; i < n; i++){

5 document.write("<p style='color:red' > &hearts; heart- " + (i+1));

6 }

7 }

Step 4. Play

Sekarang coba tekan tombol Play.

Apakah program-mu sudah berjalan dengan baik?

1. Coba ganti warna symbol heart dan tulisannya menjadi biru!

2. Coba ganti symbol heart menjadi simbol lain!
3. Selain itu, coba ganti prompt pertanyaannya ya!

Simbol-Simbol yang dapat ditampilkan di Webpages

Simbol Coding Simbol Coding

&#11008; &hearts;

&#128513; &#127759;

&#128514; &#127799;

&#128515; &127817;

&#128520; &#128039;

6
Pernahkah kalian mendengar istilah Virtual Reality (VR)?

Siapa yang pernah mencoba VR?

Apa itu Virtual Reality?

Vocabulary

Virtual Reality adalah teknologi yang mampu membangkitkan suasana 3D secara

nyata, sehingga membuat penggunanya merasa seperti berada di dalam dunia nyata
meskipun pada kenyataannya sedang berada di dunia maya.

Step 1. Login dan membuka canvas VR

Kita akan mulai membuat VR di aplikasi CoSpaces.

1.1 Go to : https://edu.cospaces.io/ → Login dengan akun timedoor

7
1.2 Pilih Free play → Create CoSpace 1.3 Pilih 3D Environment → empty scene

Icon camera ini adalah sudut pandang kalian saat VR dimulai

8
Step 2. Desain VR
2.1 Ganti Background
Klik pada environment → edit environment

Pilih environment-mu, Savanna misalnya

9
2.2. Masukan sprite/charactermu

Klik Library → Pilih sprite/charactermu

Click and Drag Lion ke dalam layout

10
Perhatikan icon-icon yang ada pada sprite!

Resize - Berfungsi mengatur ukuran sprite (klik iconnya

dan drag ya)

Lift - Berfungsi mengatur jarak posisi sprite dari

pijakan/tanah (klik iconnya dan drag ya)

Translation Mode - mengatur posisi sprite ke kiri-kanan

dan depan-belakang (klik di tanda panah lalu drag ya)

Rotation Mode - mengatur rotasi atau kemiringan sprite

(klik di lingkaran yang mengelilingi itu lalu drag ya)

11
Step 3. Coding VR

3.1 Untuk melakukan coding, klik kanan pada sprite → Code → Use in CoBlocks

3.2 Klik icon code pada sisi kanan atas → CoBlocks

12
Contoh Code:

Kamu bisa mulai berkreasi dan coding sesuai keinginanmu ya!

13
14