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
[Link]
Top React Ecosystem 2017
[Link]
Top JS Static Site Generator 2017
[Link]
Top Node JS Back-End Frameworks 2017
[Link]
Top JS Mobile Frameworks 2017
[Link]
Top Code Editor 2017
[Link]
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.
[Link]® is a JavaScript runtime built on
Chrome's V8 JavaScript engine. [Link] uses
an event-driven, non-blocking I/O model that
makes it lightweight and efficient. [Link]'
package ecosystem, npm, is the largest
ecosystem of open source libraries in the
world.
SetUp
Visual Studio Code
Download & install here:
[Link]
[Link]
Download & install here:
[Link]
$ 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 [Link]() untuk keluar
[Link]('Halo');
Make your first JS file #2
<Running on command prompt #2>
[Link]('Halo');
* Simpan sebagai [Link]
* Buka terminal <run cmd>
* Masuk ke direktori [Link]
* Eksekusi node [Link]
Make your first JS file #3
<Insert JS on HTML>
<script>
[Link]('Halo Dunia');
</script>
* Simpan sebagai [Link]
* Buka [Link] di browser
* Inspect & lihat hasil di tab console
Make your first JS file #4
<Insert JS on HTML, running on web page>
<script>
[Link]('Halo Dunia');
</script>
* Simpan sebagai [Link]
* Buka [Link] di browser
* Hasil langsung terlihat di page
Make your first JS file #5
<inner HTML>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 5 + 6;
</script>
* Simpan sebagai [Link]
* Buka [Link] di browser
* Hasil langsung terlihat di page
Make your first JS file #6
<Running on browser, calling from HTML>
[Link]('Halo');
* Simpan sebagai [Link]
* Buat file HTML berikut ([Link])
<script src="[Link]"></script>
* Buka [Link] di browser
* Inspect & lihat hasil di tab console
Comment
// komentar 1 line
/*
komentar multiline
komentar multiline
komentar multiline
*/
dirname & filename
[Link](__dirname);
// menampilkan directory path
[Link](__filename);
// menampilkan file path
var nama = 'Andi';
Variabel
[Link](nama);
var usia;
usia = 22;
usia = 32;
[Link](usia);
let jomblo = true;
[Link](jomblo);
var x = 21 var vs let
var x = 22
[Link](x);
// output = 22
===========================
let y = 'hai'
let y = 'halo'
[Link](y);
// SyntaxError
Prompt & Alert
<write on HTML>
<script>
var kabar = prompt('Apa kabar?');
//muncul kotak dialog input
[Link](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:');
[Link]('Nama: ' + nama);
var tglahir = prompt('Ketik tanggal lahir Anda:');
[Link]('Tgl Lahir: ' + tglahir);
var alamat = prompt('Ketik alamat lengkap Anda:');
[Link]('Alamat: ' + alamat);
var pendidikan = prompt('Ketik pendidikan terakhir:');
[Link]('Pendidikan: ' + pendidikan);
var profesi = prompt('Silakan ketik pekerjaan Anda:');
[Link]('Profesi: ' + profesi);
alert('Data berhasil disimpan. \n Terima kasih atas
partisipasi Anda.');
</script>
Programming Fundamental
Introduction to
JavaScript