Month: October 2017
Photo by Juanjo Jaramillo on Unsplash
Artikel ini adalah artikel lanjutan mengenai dasar-dasar javascript yang merupakan bagian dari series Pembelajaran Javascript Fundamental. Series ini dibuat dan disesuaikan untuk rekan-rekan yg baru belajar atau berniat untuk mempelajari javaScript. JavaScript juga bisa kita digunakan sebagai dasar memahami bahasa pemrograman yang lain.
Month: October 2017
Mengenal Variabel
Dalam kamus besar bahasa Indonesia (KBBI), Variabel adalah suatu data yang berubah – ubah, bermacam – macam. Jadi, jika kita hubungkan kedalam suatu bahasa pemrograman maka variabel adalah suatu simbol yg digunakan untuk menyimpan sebuah data, data tersebut tidaklah tetap suatu waktu bisa berubah. Dalam javascript, penulisan variabel di mulai dengan simbol var. Perhatikan contoh dibawah ini :
var a = 5; var b = 7; var hasil = a+b; console.log(hasil);
Month: October 2017
Masih seputar pembuatan vector dengan software Corel Draw. kali ini, kita akan mengambil model artis korea yang cantik nan imut. jadi, selagi kita membuat dan mengikuti tutorial ini, diharapkan kita bisa punya istri kayak model yang kita buat. #eh
Serius, kali aja kita nemu dan berjodoh dengan orang yang wajahnya mirip artis korea ^_^. yah namanya rezeki siapa yang tau. hehehe
Video ini masih dibuat oleh rekan saya, Kang Alritetsu. Beliau adalah seorang Design Grafis terkemuka di Kota Bandung. Yuk langsung aja kita tonton video tutorialnya. tapi sebelum itu? ada yang tau nama artisnya siapa? saya sendiri kurang begitu kenal ^_^
Oh iyah, jangan lupa jika anda senang dengan video pembelajaran satu ini, silakan subscribe channelnya Kang Alri
Jika ada saran dan masukan atau request pembuatan vector graphic, silakan kirim di kolom komentar. Insya Allah, akan saya sampaikan ke mas Alritetsu
Month: October 2017
Photo by Wahid Khene on Unsplash
Video ini dibuat oleh rekan saya, Kang Alritetsu. Beliau adalah seorang Design Grafis terkemuka di Kota Bandung. Pada video kali ini, Kang Alri akan memperlihatkan keahliannya dalam membuat vector Agnes Mo dengan menggunakan software Corel Draw. Siapa yang tidak kenal Agnes Mo? kenal gak kenal g jadi masalah sih sebetulnya. Yuk langsung aja tonton videonya.
Oh iyah, jangan lupa jika anda senang dengan video pembelajaran satu ini, silakan subscribe channelnya Kang Alri
Jika ada saran dan masukan atau request pembuatan vector graphic, silakan kirim di kolom komentar. Insya Allah, akan saya sampaikan ke mas Alritetsu
Happy Learning
Month: October 2017
Photo by Tianshu Liu on Unsplash
“Budi adalah seorang yang cerdas dan rajin namun pelupa. pada suatu hari, Budi berencana untuk melamar Wati. Singkat cerita, orangtua Wati bersedia menikahkan Wati dengan Budi dengan syarat :
- Budi harus sudah bekerja
- Budi membawa mas kawin sekurang-kurangnya emas 5 Gram
- Menunggu Wati lulus S2 sekitar 2 tahun lagi
Menurut orangtua Wati, syarat diatas adalah syarat mutlak dan harus dipenuhi. oleh karena itu, Budi wajib menyanggupi semua syarat tersebut. 1 Tahun berlalu, Budi kini sudah bekerja dan dia sudah mengantongi mas kawin emas sebanyak 100 Gram. Dengan sangat berani dan percaya diri, akhirnya budi datang kembali ke orangtua Wati. Tahukah anda bagaimana kelanjutannya? Apakah orangtua Wati menerima Budi?”
Month: October 2017
Photo by Fili Santillán on Unsplash
Artikel ini merupakan salah satu artikel dari series Pembelajaran Javascript Fundamental. Pada kali ini, kita akan belajar bagaimana cara menampilkan output dan menerima input pada javaScript. Pada umumnya, javascript bisa menerima semua inputan dari berbagai elemen form HTML namun untuk saat ini, materi kita belum sampai kesana. jadi saat ini kita akan menggunakan script prompt() sebagai inputan dari javascript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Say Greeting</title>
</head>
<body>
<h3 id="name" style="display: none">Selamat datang para pelajar</h3>
<script>
function inputName() {
var Name = prompt("Masukkan Nama Anda");
var greeting = "Selamat datang " + Name;
document.getElementById("name").style.display = "block";
document.getElementById("name").innerHTML = greeting;
}
inputName();
</script>
</body>
</html>
Perhatikan kembali script diatas, pada script diatas secara default tulisan selamat datang kita hide menggunakan css (style=”display:none”). kemudian pada bagian bawah body kita menyisipkan sebuah srcipt untuk memanggil function inputName(). Function ini berisi inputan dengan menggunakan function prompot, dimana nanti akan muncul popup dialog seperti dibawah ini. cobalah kita isi dengan nama kita sendiri, lalu perhatikan apa yang terjadi. Jika tulisan selamat datang muncul, maka kita sudah berhasil mempelajari salah satu inputan javscript.
Javascript Output
Pada materi diatas, dan materi sebelumnya kita secara tidak langsung sudah mencoba mengeluarkan inputan melalui javascript ke dalam elemen html dengan menggunakan method innerHTML. Kali ini, kita akan menjelaskan fungsi-fungsi lain yang sering di gunakan untuk mengeluarkan output dari sebuah inputan javascript. Adapun fungsi-fungsi tersebut adalah sebagai berikut:
- innerHTML : menulis output kedalam tag/elemen HTML
- document.write() : menulis output kedalam halaman HTML
- window.alert() : menulis output kedalam suatu popup alert
- console.log() : menulis output kedalam console browser. method ini sering kali digunakan ketika kita melakukan suatu debuging ke dalam suatu proses.
untuk memahami semua contoh diatas perhatikan syntaks dibawah ini.
Perhatikan script diatas, kemudian coba anda click pada tab HTML. Dalam kasus diatas, kita tidak menulis apapun pada halaman HTML, semua text kita tulis dalam javascript dengan menggunakan method document.write(). Pada contoh diatas, script secara otomatis akan menghitung usia kita dengan rumus tahun sekarang new Date().getFullYear() dikurangi tahun lahir. Mari kita amati contoh selanjutnya.
Pada script diatas, ketika kita mengklik button ‘click me’ akan muncul tulisan popup. popup tersebut di panggil melalui function sayGreeting() yang disisipkan pada event onlick.
Fungsi output terakhir pada javaScript yang akan kita bahas saat ini adalah console.log. output ini berfungsi sebagai log dan hanya terlihat pada console browser. Untuk mengetahui apa itu console browser, mari kita download browser chrome atau firefox terlebih dahulu, lalu buatlah script seperti contoh dibawah ini kemudian simpan dengan nama console.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>greet</title>
</head>
<body>
<input type="text" id="yourName" />
<button type="button" onclick="sayGreeting()">Click Me</button>
<script>
function sayGreeting() {
var yourName = document.getElementById("yourName").value;
if (yourName == "" || !yourName) {
console.log("Silakan isi Nama anda terlebih dahulu");
} else {
console.log("Selamat Datang " + yourName);
}
}
</script>
</body>
</html>
jalankan/open file diatas dengan menggunakan browser yang sudah kita download tadi. klik kanan pada browser anda, lalu pilih inspect element. Pada bagian bawah halaman akan muncul tab seperti gambar dibawah ini. pilih tab console, lalu coba anda isi form isian diatas dan klik button yang sudah disediakan. pastikan hasilnya seperti dibawah ini.
Congratssss!!! kita sudah belajar sejauh ini. Demikian penjelasan singkat dari Mangcoding mengenai input/output pada javascript. jika ada beberapa materi yang tidak dipahami atau ada beberapa pertanyaan yang ingin ditanyakan silakan kirimkan komentar teman-teman dibawah ini. Selamat belajar dan tetap semangat. ^_^