Programming Fundamental
Introduction to
JavaScript
Programming Fundamental
Lintang Wisesa
Why Should You Learn to Code?
Why Should You Learn Javascript?
Top JS Front–End Frameworks 2017
https://risingstars.js.org/2017/en/
Top React Ecosystem 2017
https://risingstars.js.org/2017/en/
Top JS Static Site Generator 2017
https://risingstars.js.org/2017/en/
Top Node JS Back-End Frameworks 2017
https://risingstars.js.org/2017/en/
Top JS Mobile Frameworks 2017
https://risingstars.js.org/2017/en/
Top Code Editor 2017
https://risingstars.js.org/2017/en/
JavaScript often abbreviated as JS, is a high-
level, dynamic, weakly typed, object-based,
multi-paradigm, and interpreted programming
language.
Alongside HTML and CSS, JavaScript is one of
the three core technologies of World Wide Web
content production.
Node.js® is a JavaScript runtime built on
Chrome's V8 JavaScript engine. Node.js uses
an event-driven, non-blocking I/O model that
makes it lightweight and efficient. Node.js'
package ecosystem, npm, is the largest
ecosystem of open source libraries in the
world.
SetUp
Visual Studio Code
Download & install here:
code.visualstudio.com
Node.Js
Download & install here:
nodejs.org
$ node --version
$ node -v
Make your first JS file #1
<Running Node Shell on prompt #1>
* Buka terminal <run cmd>
* Ketik node lalu enter
* Ketik program & enter untuk eksekusi
* Ketik process.exit() untuk keluar
console.log('Halo');
Make your first JS file #2
<Running on command prompt #2>
console.log('Halo');
* Simpan sebagai file.js
* Buka terminal <run cmd>
* Masuk ke direktori file.js
* Eksekusi node file.js
Make your first JS file #3
<Insert JS on HTML>
<script>
console.log('Halo Dunia');
</script>
* Simpan sebagai file.htm
* Buka file.htm di browser
* Inspect & lihat hasil di tab console
Make your first JS file #4
<Insert JS on HTML, running on web page>
<script>
document.write('Halo Dunia');
</script>
* Simpan sebagai file.htm
* Buka file.htm di browser
* Hasil langsung terlihat di page
Make your first JS file #5
<inner HTML>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
* Simpan sebagai file.htm
* Buka file.htm di browser
* Hasil langsung terlihat di page
Make your first JS file #6
<Running on browser, calling from HTML>
console.log('Halo');
* Simpan sebagai file.js
* Buat file HTML berikut (file.htm)
<script src="file.js"></script>
* Buka file.htm di browser
* Inspect & lihat hasil di tab console
Comment
// komentar 1 line
/*
komentar multiline
komentar multiline
komentar multiline
*/
dirname & filename
console.log(__dirname);
// menampilkan directory path
console.log(__filename);
// menampilkan file path
var nama = 'Andi';
Variabel
console.log(nama);
var usia;
usia = 22;
usia = 32;
console.log(usia);
let jomblo = true;
console.log(jomblo);
var x = 21 var vs let
var x = 22
console.log(x);
// output = 22
===========================
let y = 'hai'
let y = 'halo'
console.log(y);
// SyntaxError
Prompt & Alert
<write on HTML>
<script>
var kabar = prompt('Apa kabar?');
//muncul kotak dialog input
console.log(kabar);
//tampilkan input di console
alert(kabar);
//tampilkan input di alert window
</script>
Solve It!
Programming Fundamental
Buatlah sebuah aplikasi
interaktif (user input)
dengan prompt & alert,
kemudian input dari user
ditampilkan di console.
Programming Fundamental
Solve It!
<script> Solved!
var nama = prompt('Silakan ketik nama Anda:');
console.log('Nama: ' + nama);
var tglahir = prompt('Ketik tanggal lahir Anda:');
console.log('Tgl Lahir: ' + tglahir);
var alamat = prompt('Ketik alamat lengkap Anda:');
console.log('Alamat: ' + alamat);
var pendidikan = prompt('Ketik pendidikan terakhir:');
console.log('Pendidikan: ' + pendidikan);
var profesi = prompt('Silakan ketik pekerjaan Anda:');
console.log('Profesi: ' + profesi);
alert('Data berhasil disimpan. \n Terima kasih atas
partisipasi Anda.');
</script>
Programming Fundamental
Introduction to
JavaScript
