Fikri
2 years ago
parent
8080a931e3
commit
948a9c40fe
@ -0,0 +1,681 @@
|
||||
# 30 Hari Javascript
|
||||
|
||||
| # Hari | Topik |
|
||||
| ----- | :-------------------------------------------------------------------------------------------------------------------------------------------------: |
|
||||
| 01 | [Pengantar](./readMe.md) |
|
||||
| 02 | [Tipe Data](./02_Day_Data_types/02_day_data_types.md) |
|
||||
| 03 | [Booleans, Operators, Date](./03_Day_Booleans_operators_date/03_booleans_operators_date.md) |
|
||||
| 04 | [Conditionals](./04_Day_Conditionals/04_day_conditionals.md) |
|
||||
| 05 | [Arrays](./05_Day_Arrays/05_day_arrays.md) |
|
||||
| 06 | [Loops](./06_Day_Loops/06_day_loops.md) |
|
||||
| 07 | [Functions](./07_Day_Functions/07_day_functions.md) |
|
||||
| 08 | [Objects](./08_Day_Objects/08_day_objects.md) |
|
||||
| 09 | [Higher Order Functions](./09_Day_Higher_order_functions/09_day_higher_order_functions.md) |
|
||||
| 10 | [Sets dan Maps](./10_Day_Sets_and_Maps/10_day_Sets_and_Maps.md) |
|
||||
| 11 | [Destructuring dan Spreading](./11_Day_Destructuring_and_spreading/11_day_destructuring_and_spreading.md) |
|
||||
| 12 | [Regular Expressions](./12_Day_Regular_expressions/12_day_regular_expressions.md) |
|
||||
| 13 | [Console Object Methods](./13_Day_Console_object_methods/13_day_console_object_methods.md) |
|
||||
| 14 | [Error Handling](./14_Day_Error_handling/14_day_error_handling.md) |
|
||||
| 15 | [Class](./15_Day_Classes/15_day_classes.md) |
|
||||
| 16 | [JSON](./16_Day_JSON/16_day_json.md) |
|
||||
| 17 | [Web Storages](./17_Day_Web_storages/17_day_web_storages.md) |
|
||||
| 18 | [Promises](./18_Day_Promises/18_day_promises.md) |
|
||||
| 19 | [Closure](./19_Day_Closures/19_day_closures.md) |
|
||||
| 20 | [Menulis Clean Code](./20_Day_Writing_clean_codes/20_day_writing_clean_codes.md) |
|
||||
| 21 | [DOM](./21_Day_DOM/21_day_dom.md) |
|
||||
| 22 | [Manipulasi DOM Object](./22_Day_Manipulating_DOM_object/22_day_manipulating_DOM_object.md) |
|
||||
| 23 | [Event Listeners](./23_Day_Event_listeners/23_day_event_listeners.md) |
|
||||
| 24 | [Mini Project: Solar System](./24_Day_Project_solar_system/24_day_project_solar_system.md) |
|
||||
| 25 | [Mini Project: World Countries Data Visualization 1](./25_Day_World_countries_data_visualization_1/25_day_world_countries_data_visualization_1.md) |
|
||||
| 26 | [Mini Project: World Countries Data Visualization 2](./26_Day_World_countries_data_visualization_2/26_day_world_countries_data_visualization_2.md) |
|
||||
| 27 | [Mini Project: Portfolio](./27_Day_Mini_project_portfolio/27_day_mini_project_portfolio.md) |
|
||||
| 28 | [Mini Project: Leaderboard](./28_Day_Mini_project_leaderboard/28_day_mini_project_leaderboard.md) |
|
||||
| 29 | [Mini Project: Animating characters](./29_Day_Mini_project_animating_characters/29_day_mini_project_animating_characters.md) |
|
||||
| 30 | [Final Projects](./30_Day_Mini_project_final/30_day_mini_project_final.md) |
|
||||
|
||||
🧡🧡🧡 HAPPY CODING 🧡🧡🧡
|
||||
|
||||
<div>
|
||||
<small>Dukung <strong>author</strong> untuk membuat lebih banyak materi pembelajaran</small> <br />
|
||||
<a href = "https://www.paypal.me/asabeneh"><img src='/images/paypal_lg.png' alt='Paypal Logo' style="width:10%"/></a>
|
||||
</div>
|
||||
|
||||
<div align="center">
|
||||
<h1> 30 Hari JavaScript: Pengantar</h1>
|
||||
<a class="header-badge" target="_blank" href="https://www.linkedin.com/in/asabeneh/">
|
||||
<img src="https://img.shields.io/badge/style--5eba00.svg?label=LinkedIn&logo=linkedin&style=social">
|
||||
</a>
|
||||
<a class="header-badge" target="_blank" href="https://twitter.com/Asabeneh">
|
||||
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/asabeneh?style=social">
|
||||
</a>
|
||||
|
||||
<sub>Author:
|
||||
<a href="https://www.linkedin.com/in/asabeneh/" target="_blank">Asabeneh Yetayeh</a><br>
|
||||
<small> January, 2020</small>
|
||||
</sub>
|
||||
|
||||
<div>
|
||||
|
||||
🇬🇧 [English](./readMe.md)
|
||||
🇪🇸 [Spanish](./Spanish/readme.md)
|
||||
🇮🇹 [Italian](./Italian/readMe.md)
|
||||
🇷🇺 [Russian](./RU/README.md)
|
||||
🇹🇷 [Turkish](./Turkish/readMe.md)
|
||||
🇦🇿 [Azerbaijan](./Azerbaijani/readMe.md)
|
||||
🇰🇷 [Korean](./Korea/README.md)
|
||||
🇻🇳 [Vietnamese](./Vietnamese/README.md)
|
||||
🇵🇱 [Polish](./Polish/readMe.md)
|
||||
🇧🇷 [Portuguese](./Portuguese/readMe.md)
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
[Day 2 >>](./02_Day_Data_types/02_day_data_types.md)
|
||||
|
||||
|
||||
|
||||
- [30 Hari Javascript](#30-days-of-javascript)
|
||||
- [📔 Day 1](#-day-1)
|
||||
- [Pengantar](#introduction)
|
||||
- [Persyaratan](#requirements)
|
||||
- [Setup](#setup)
|
||||
- [Install Node.js](#install-nodejs)
|
||||
- [Browser](#browser)
|
||||
- [Menginstall Google Chrome](#installing-google-chrome)
|
||||
- [Membuka Google Chrome Console](#opening-google-chrome-console)
|
||||
- [Menulis kode pada Console Browser](#writing-code-on-browser-console)
|
||||
- [Console.log](#consolelog)
|
||||
- [Console.log dengan beberapa Argument](#consolelog-with-multiple-arguments)
|
||||
- [Komentar](#comments)
|
||||
- [Syntax](#syntax)
|
||||
- [Arithmetics](#arithmetics)
|
||||
- [Code Editor](#code-editor)
|
||||
- [Menginstall Visual Studio Code](#installing-visual-studio-code)
|
||||
- [Cara pakai Visual Studio Code](#how-to-use-visual-studio-code)
|
||||
- [Menambahkan Javascript kedalam halaman web](#adding-javascript-to-a-web-page)
|
||||
- [Inline Script](#inline-script)
|
||||
- [Internal Script](#internal-script)
|
||||
- [External Script](#external-script)
|
||||
- [Multiple External Scripts](#multiple-external-scripts)
|
||||
- [Mengenal Tipe Data](#introduction-to-data-types)
|
||||
- [Numbers](#numbers)
|
||||
- [Strings](#strings)
|
||||
- [Booleans](#booleans)
|
||||
- [Undefined](#undefined)
|
||||
- [Null](#null)
|
||||
- [Mengecek Tipe Data](#checking-data-types)
|
||||
- [Komentar Lagi](#comments-again)
|
||||
- [Variabel](#variables)
|
||||
- [💻 Hari 1: Latihan](#-day-1-exercises)
|
||||
|
||||
# 📔 Hari 1
|
||||
|
||||
## Pengantar
|
||||
|
||||
**Selamat** menjalankan tantangan 30 hari Javascript. Pada tantangan ini, kamu akan belajar segala hal yang dibutuhkan untuk menjadi programmer Javascript, dan konsep umum pada banyak bahasa pemrograman. Di akhir tantangan, kamu akan mendapatkan sertifikat penyelesaian 30DaysOfJavaScript programming challenge. Jika kamu membutuhkan bantuan atau ingin membantu peserta yang lainnya kamu bisa bergabung ke grup Telegram [telegram group](https://t.me/ThirtyDaysOfJavaScript).
|
||||
|
||||
**30DaysOfJavaScript** challenge adalah panduan baik untuk pemula atau developer Javascript yang sudah mahir. Selamat datang di Javascript. JavaScript adalah bahasa pemrograman pada web. Saya suka menggunakan dan mengajarkan tentang Javascript, dan saya harap kamu juga.
|
||||
|
||||
Setiap langkahnya, kamu akan belajar bahasa Javascript, salah satu bahasa pemrograman paling populer yang pernah ada.
|
||||
JavaScript digunakan untuk **_menambhakan interaktif pada website, mengembangkan aplikasi mobile, aplikasi desktop, game_** dan hari ini JavaScript digunakan untuk **server-side programming**, **_machine learning_** dan **_AI_**.
|
||||
|
||||
**_JavaScript (JS)_** telah meningkat popularitasnya pada beberapa tahun terakhir dan telah memimpin
|
||||
bahasa pemrograman dalam 10 tahun terakhir dan menjadi bahasa pemrograman yang paling banyak digunakan di Github.
|
||||
|
||||
Tantangan ini mudah diikuti, kamu perlu meluangkan waktu untuk mengikuti. Jika kamu lebih tertarik belajar dengan format Video, kamu dapat menonton pada channel Youtube <a href="https://www.youtube.com/channel/UC7PNRuno1rzYPb1xLa4yktw"> Washera</a>. Subscribe, komen pada kolom komentar dan Author akan membalasnya segera.
|
||||
|
||||
Author akan senang mendengar pendapat kamu, ekspresikan pemikiran kamu tentang 30DaysOfJavaScript challenge. Kamu bisa meninggalkan Testimoni pada [link](https://testimonial-vdzd.onrender.com//)
|
||||
|
||||
## Persyaratan
|
||||
|
||||
Tidak diperlukan pengetahuan pemrograman sebelumnya untuk mengikuti tantangan ini. Kamu hanya perlu:
|
||||
|
||||
1. Motivasi
|
||||
2. Komputer
|
||||
3. Internet
|
||||
4. Browser
|
||||
5. Code editor
|
||||
|
||||
## Setup
|
||||
|
||||
Saya percaya kamu memiliki motivasi yang kuat untuk menjadi Developer, sebuah komputer dan internet. Jika kamu punya keduanya, kamu punya semua yang dibutuhkan untuk segera memulainya.
|
||||
|
||||
### Install Node.js
|
||||
|
||||
Kamu mungkin tidak butuh saat ini tapi akan terpakai nanti. Install [node.js](https://nodejs.org/en/).
|
||||
|
||||
|
||||
|
||||
Setelah mendownload dan Install
|
||||
|
||||
|
||||
|
||||
Kita bisa mengecek apakan node berhasil terinstall di perangkat kita dengan membuka terminal atau command prompt
|
||||
|
||||
```sh
|
||||
asabeneh $ node -v
|
||||
v12.14.0
|
||||
```
|
||||
|
||||
Ketika membuat Tutorial ini saya menggunakan versi Node 12.14.0, tapi saya merekomendasikan versi Nodejs v14.17.6, pada saat kamu membaca materi ini mungkin versinya sudah lebih tinggi.
|
||||
|
||||
### Browser
|
||||
|
||||
Ada banyak browser di luar sana, tapi saya merekomendasikan Google Chrome.
|
||||
|
||||
#### Menginstall Google Chrome
|
||||
|
||||
Install [Google Chrome](https://www.google.com/chrome/) jika kamu belum punya. Kita bisa menulis kode sederhana pada console browser, tapi kita tidak menggunakan console untuk mengembangkan aplikasi.
|
||||
|
||||
|
||||
|
||||
#### Membuka Google Chrome Console
|
||||
|
||||
Kamu bisa membuka console pada Chrome salah satunya dengan mengklik titik tiga pada atas kanan pojok browser, pilih _More tools -> Developer tools_ atau gunakan shortcut keyboard.
|
||||
|
||||
|
||||
|
||||
Untuk membuka console Chrome dengan shortcut keyboard.
|
||||
|
||||
```sh
|
||||
Mac
|
||||
Command+Option+J
|
||||
|
||||
Windows/Linux:
|
||||
Ctl+Shift+J
|
||||
```
|
||||
|
||||
|
||||
|
||||
Setelah kamu membuka console pada Google Chrome, coba pada tombol yang ditandai. Kita akan lebih sering menggunakan Console. Console merupakan tempat di mana kode Javascript kamu ditulis. V8 engine pada Console merubah kode Javascript menjadi kode mesin.
|
||||
Mari kita tulis kode Javascript pada Console:
|
||||
|
||||
|
||||
|
||||
#### Menulis kode pada console Browser
|
||||
|
||||
Kita dapat menulis kode JavaScript di console Google atau console browser mana pun. Namun, untuk tantangan ini, kita hanya akan fokus pada console Google Chrome. Buka console dengan menggunakan perintah berikut:
|
||||
|
||||
```sh
|
||||
Mac
|
||||
Command+Option+I
|
||||
|
||||
Windows:
|
||||
Ctl+Shift+I
|
||||
```
|
||||
|
||||
##### Console.log
|
||||
|
||||
Untuk menulis kode JavaScript pertama kita, kita menggunakan fungsi bawaan **console.log()**. Kita memasukkan argumen sebagai data masukan, dan fungsi tersebut menampilkan outputnya. Kita memasukkan `'Hello, World'` sebagai data masukan atau argumen dalam fungsi console.log().
|
||||
|
||||
```js
|
||||
console.log('Hello, World!')
|
||||
```
|
||||
|
||||
##### Console.log dengan Multiple Arguments
|
||||
|
||||
Fungsi **`console.log()`** dapat menerima beberapa parameter yang dipisahkan oleh koma. Syntaxnya terlihat seperti berikut: **`console.log(param1, param2, param3)`**
|
||||
|
||||
|
||||
|
||||
```js
|
||||
console.log('Hello', 'World', '!')
|
||||
console.log('HAPPY', 'NEW', 'YEAR', 2020)
|
||||
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')
|
||||
```
|
||||
|
||||
Seperti yang terlihat dari potongan kode di atas, _`console.log()`_ dapat menerima beberapa argumen.
|
||||
|
||||
Selamat! kamu telah menulis kode JavaScript pertama kamu menggunakan _`console.log()`_.
|
||||
|
||||
##### Comments
|
||||
|
||||
Kita dapat menambahkan komentar ke dalam kode kita. Komentar sangat penting untuk membuat kode lebih mudah dibaca dan untuk memberikan catatan dalam kode kita. JavaScript tidak menjalankan bagian komentar dalam kode kita. Dalam JavaScript, setiap baris teks yang dimulai dengan // adalah komentar, dan apapun yang dibungkus seperti ini `//` juga merupakan komentar.
|
||||
|
||||
**Contoh: Single Line Comment**
|
||||
|
||||
```js
|
||||
// This is the first comment
|
||||
// This is the second comment
|
||||
// I am a single line comment
|
||||
```
|
||||
|
||||
**Contoh: Multiline Comment**
|
||||
|
||||
```js
|
||||
/*
|
||||
This is a multiline comment
|
||||
Multiline comments can take multiple lines
|
||||
JavaScript is the language of the web
|
||||
*/
|
||||
```
|
||||
|
||||
##### Syntax
|
||||
|
||||
Bahasa pemrograman mirip dengan bahasa manusia. Bahasa Inggris atau banyak bahasa lain menggunakan kata-kata, frasa, kalimat, kalimat majemuk, dan lainnya untuk menyampaikan pesan yang bermakna. Arti bahasa Inggris dari sintaksis adalah "pengaturan kata-kata dan frasa untuk menciptakan kalimat yang terbentuk dengan baik dalam suatu bahasa." Definisi teknis sintaksis adalah struktur pernyataan dalam bahasa komputer. Bahasa pemrograman memiliki sintaksis. JavaScript adalah bahasa pemrograman, dan seperti bahasa pemrograman lainnya, ia memiliki sintaksisnya sendiri. Jika kita tidak menulis sintaksis yang dimengerti oleh JavaScript, itu akan menampilkan berbagai jenis error. Kita akan mempelajari berbagai jenis error JavaScript nanti. Untuk saat ini, mari kita lihat syntax yang error.
|
||||
|
||||
|
||||
|
||||
Saya membuat error dengan sengaja. Akibatnya, console menampilkan error. Sebenarnya, sintaksis sangat informatif. itu akan memberi tahu jenis error yang dibuat. Dengan membaca panduan pada error, kita dapat memperbaiki sintaksis dan memperbaiki masalahnya. Proses mengidentifikasi dan menghapus error dari program disebut debugging. Mari kita perbaiki error tersebut:
|
||||
|
||||
```js
|
||||
console.log('Hello, World!')
|
||||
console.log('Hello, World!')
|
||||
```
|
||||
|
||||
Sejauh ini, kita telah melihat cara menampilkan teks menggunakan _`console.log()`_. Jika kita mencetak teks atau string menggunakan _`console.log()`_, teks tersebut harus berada di dalam tanda kutip tunggal, tanda kutip ganda, atau tanda kutip belakang (backtick).
|
||||
**Contoh:**
|
||||
|
||||
```js
|
||||
console.log('Hello, World!')
|
||||
console.log("Hello, World!")
|
||||
console.log(`Hello, World!`)
|
||||
```
|
||||
|
||||
#### Aritmatika
|
||||
|
||||
Sekarang, mari kita latihan lebih banyak menulis kode JavaScript menggunakan _`console.log()`_ pada console Google Chrome untuk tipe data angka.
|
||||
|
||||
Selain teks, kita juga dapat melakukan perhitungan matematika menggunakan JavaScript. Mari kita lakukan beberapa perhitungan sederhana berikut.
|
||||
|
||||
Kita bisa menulis kode JavaScript di console Google Chrome tanpa perlu fungsi **_`console.log()`**. Namun, ini tetap dimasukkan pada tantangan ini karena kita akan lebih banya melakukan di dalam text editor di mana penggunaan fungsi tersebut wajib. Kamu dapat mencobanya langsung dengan menulis di console.
|
||||
|
||||
|
||||
|
||||
```js
|
||||
console.log(2 + 3) // Penambahan
|
||||
console.log(3 - 2) // Pengurangan
|
||||
console.log(2 * 3) // Perkalian
|
||||
console.log(3 / 2) // Pembagian
|
||||
console.log(3 % 2) // Modulus - mencari nilai sisa
|
||||
console.log(3 ** 2) // Pangkat 3 ** 2 == 3 * 3
|
||||
```
|
||||
|
||||
### Code Editor
|
||||
|
||||
Kita dapat menulis kode kita di console browser, tetapi ini tidak diperuntukan untuk project yang lebih besar. Pada tempat kerja, para pengembang menggunakan editor kode yang berbeda untuk menulis kode mereka. Dalam tantangan 30 hari JavaScript ini, kita akan menggunakan Visual Studio Code.
|
||||
|
||||
#### Menginstall Visual Studio Code
|
||||
|
||||
Visual Studio Code adalah text editor open-source yang sangat populer. Saya merekomendasikan [Download Visual Studio Code](https://code.visualstudio.com/), tetapi jika kamu lebih suka menggunakan editor lain, silakan gunakan apa yang kamu miliki.
|
||||
|
||||
|
||||
|
||||
Jika kamu sudah menginstallnya, mari kita mulai.
|
||||
|
||||
#### Cara menggunakan Visual Studio Code
|
||||
|
||||
Untuk membuka Visual Studio Code, cukup klik dua kali ikonnya. Ketika kamu membukanya, kamu akan mendapatkan antarmuka seperti ini. Cobalah berinteraksi dengan ikon-ikon yang diberi tanda.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## Menambahkan JavaScript ke dalam halaman web
|
||||
|
||||
JavaScript dapat ditambahkan kedalam halaman Web dengan 3 cara:
|
||||
|
||||
- **_Inline script_**
|
||||
- **_Internal script_**
|
||||
- **_External script_**
|
||||
- **_Multiple External scripts_**
|
||||
|
||||
Berikut ini berbagai cara untuk menambahkan kode JavaScript ke halaman web kamu.
|
||||
|
||||
### Inline Script
|
||||
|
||||
Buat folder project di desktop kamu atau di lokasi manapun, beri nama "30DaysOfJS," dan buat file **_`index.html`_** di dalam folder project tersebut. Kemudian paste kode berikut dan buka di browser, misalnya [Chrome](https://www.google.com/chrome/).
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30DaysOfScript:Inline Script</title>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Sekarang, kamu baru saja menulis skrip inline pertama kamu. Kita bisa membuat pesan peringatan pop-up menggunakan fungsi bawaan _`alert()`_.
|
||||
|
||||
### Internal Script
|
||||
|
||||
Internal script dapat ditulis di bagian _`head`_ atau di _`body`_, tetapi lebih disarankan untuk meletakkannya di dalam _`body`_ dari dokumen HTML. Pertama, mari kita tulis di bagian _`head`_ dari halaman.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30DaysOfScript:Internal Script</title>
|
||||
<script>
|
||||
console.log('Welcome to 30DaysOfJavaScript')
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Inilah cara kita menulis internal script. Menulis kode JavaScript di dalam bagian _`body`_ adalah opsi yang paling disarankan. Buka console browser untuk melihat hasil keluaran dari `console.log()`.
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30DaysOfScript:Internal Script</title>
|
||||
</head>
|
||||
<body>
|
||||
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
|
||||
<script>
|
||||
console.log('Welcome to 30DaysOfJavaScript')
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Buka console browser untuk melihat hasil dengan `console.log()`.
|
||||
|
||||
|
||||
|
||||
### External Script
|
||||
|
||||
Sama seperti Internal script, tautan External script dapat ditempatkan di _`head`_ atau _`body`_, tetapi lebih disarankan untuk meletakkannya di dalam _`body`_.
|
||||
|
||||
Pertama, kita harus membuat file JavaScript eksternal dengan ekstensi .js. Semua file yang berakhir dengan ekstensi .js adalah file JavaScript. Buat file bernama introduction.js di dalam direktori proyek kamu dan tulis kode berikut, lalu tautkan file .js ini di bagian bawah _`body`_.
|
||||
|
||||
```js
|
||||
console.log('Welcome to 30DaysOfJavaScript')
|
||||
```
|
||||
|
||||
External scripts di _head_:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:External script</title>
|
||||
<script src="introduction.js"></script>
|
||||
</head>
|
||||
<body></body>
|
||||
</html>
|
||||
```
|
||||
|
||||
External scripts di _body_:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>30DaysOfJavaScript:External script</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- JavaScript external link could be in the header or in the body -->
|
||||
<!-- Before the closing tag of the body is the recommended place to put the external JavaScript script -->
|
||||
<script src="introduction.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Buka console browser untuk melihat hasil dengan `console.log()`.
|
||||
|
||||
### Multiple External Scripts
|
||||
|
||||
Kita juga bisa menghubungkan beberapa file JavaScript eksternal ke sebuah halaman web. Buat file `helloworld.js` di dalam folder 30DaysOfJS dan tulis kode berikut.
|
||||
|
||||
```js
|
||||
console.log('Hello, World!')
|
||||
```
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Multiple External Scripts</title>
|
||||
</head>
|
||||
<body>
|
||||
<script src="./helloworld.js"></script>
|
||||
<script src="./introduction.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
_File main.js kamu harus berada di bawah semua skrip lainnya_. Sangat penting untuk mengingat ini.
|
||||
|
||||
|
||||
|
||||
## Mengenal Tipe Data
|
||||
|
||||
Dalam JavaScript, serta dalam bahasa pemrograman lainnya, terdapat berbagai jenis tipe data. Berikut adalah tipe data primitif JavaScript: _String, Number, Boolean, undefined, Null_, dan _Symbol_.
|
||||
|
||||
### Numbers
|
||||
|
||||
- Integers: Integer angka (negative, zero dan positive)
|
||||
Contoh:
|
||||
... -3, -2, -1, 0, 1, 2, 3 ...
|
||||
- Float-point numbers: Decimal number
|
||||
Contoh
|
||||
... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...
|
||||
|
||||
### Strings
|
||||
|
||||
Kumpulan satu atau lebih karakter di antara dua tanda kutip tunggal, tanda kutip ganda, atau backtick disebut _String_.
|
||||
|
||||
**Contoh:**
|
||||
|
||||
```js
|
||||
'a'
|
||||
'Asabeneh'
|
||||
"Asabeneh"
|
||||
'Finland'
|
||||
'JavaScript is a beautiful programming language'
|
||||
'I love teaching'
|
||||
`Kita juga bisa membuat string menggunakan backtick`
|
||||
'Sebuah string bisa sekecil satu karakter atau sebesar banyak halaman'
|
||||
'Jenis data apa pun di bawah tanda kutip tunggal, tanda kutip ganda, atau backtick adalah sebuah string'
|
||||
```
|
||||
|
||||
### Booleans
|
||||
|
||||
Nilai boolean adalah antara True atau False. Setiap perbandingan mengembalikan nilai boolean, yang bisa jadi benar atau salah.
|
||||
|
||||
Tipe data boolean adalah nilai benar atau salah.
|
||||
|
||||
**Contoh:**
|
||||
|
||||
```js
|
||||
true // if the light is on, the value is true
|
||||
false // if the light is off, the value is false
|
||||
```
|
||||
|
||||
### Undefined
|
||||
|
||||
Dalam JavaScript, jika kita tidak memberikan nilai ke sebuah variabel, maka nilainya adalah _undefined_. Selain itu, jika sebuah fungsi tidak mengembalikan apapun, maka ia akan mengembalikan _undefined_.
|
||||
|
||||
```js
|
||||
let firstName
|
||||
console.log(firstName) // undefined, because it is not assigned to a value yet
|
||||
```
|
||||
|
||||
### Null
|
||||
|
||||
_Null_ dalam JavaScript berarti sebuah nilai kosong atau tidak ada nilai.
|
||||
|
||||
```js
|
||||
let emptyValue = null
|
||||
```
|
||||
|
||||
## Mengecek Tipe Data
|
||||
|
||||
Untuk memeriksa tipe data dari suatu variabel, kita menggunakan operator **typeof**. Berikut contohnya.
|
||||
|
||||
```js
|
||||
console.log(typeof 'Asabeneh') // string
|
||||
console.log(typeof 5) // number
|
||||
console.log(typeof true) // boolean
|
||||
console.log(typeof null) // object type
|
||||
console.log(typeof undefined) // undefined
|
||||
```
|
||||
|
||||
## Komentar lagi
|
||||
|
||||
Ingatlah bahwa komentar dalam JavaScript mirip dengan bahasa pemrograman lainnya. Komentar penting untuk membuat kode kamu lebih mudah dibaca. Ada dua cara untuk memberi komentar:
|
||||
|
||||
- _Single line comment_
|
||||
- _Multiline comment_
|
||||
|
||||
```js
|
||||
// Mengomentari kode itu sendiri dengan satu komentar.
|
||||
// let firstName = 'Asabeneh'; single line comment
|
||||
// let lastName = 'Yetayeh'; single line comment
|
||||
```
|
||||
|
||||
Multiline:
|
||||
|
||||
```js
|
||||
/*
|
||||
let location = 'Helsinki';
|
||||
let age = 100;
|
||||
let isMarried = true;
|
||||
This is a Multiple line comment
|
||||
*/
|
||||
```
|
||||
|
||||
## Variabel
|
||||
|
||||
Variabel adalah _wadah_ untuk data. Variabel digunakan untuk _menyimpan_ data di lokasi memori. Ketika sebuah variabel dideklarasikan, lokasi memori akan disediakan. Ketika sebuah variabel diberi nilai (data), ruang memori akan diisi dengan data tersebut. Untuk mendeklarasikan variabel, kita menggunakan **keyword** _var_, _let_, atau _const_.
|
||||
|
||||
Untuk variabel yang nilainya berubah dari waktu ke waktu, kita menggunakan _let_. Jika data tidak berubah sama sekali, kita menggunakan _const_. Contohnya, PI, nama negara, gravitasi tidak berubah, dan kita bisa menggunakan _const_. Kita tidak akan menggunakan _var_ dalam tantangan ini, dan saya tidak merekomendasikan kamu menggunakannya. Itu adalah cara mendeklarasikan variabel yang rentan terhadap error dan memiliki banyak masalah. Kita akan bahas lebih lanjut tentang _var_, _let_, dan _const_ secara detail di bagian lain (scope). Untuk saat ini, penjelasan di atas sudah cukup.
|
||||
|
||||
Sebuah nama variabel JavaScript yang valid harus mengikuti aturan berikut:
|
||||
|
||||
- Nama variabel JavaScript tidak boleh diawali dengan angka.
|
||||
- Nama variabel JavaScript tidak mengizinkan karakter khusus kecuali tanda dollar ($) dan garis bawah (_).
|
||||
- Nama variabel JavaScript mengikuti konvensi camelCase.
|
||||
- Nama variabel JavaScript tidak boleh memiliki spasi antara kata-kata.
|
||||
|
||||
Berikut adalah contoh-contoh variabel JavaScript yang valid.
|
||||
|
||||
```js
|
||||
firstName
|
||||
lastName
|
||||
country
|
||||
city
|
||||
capitalCity
|
||||
age
|
||||
isMarried
|
||||
|
||||
first_name
|
||||
last_name
|
||||
is_married
|
||||
capital_city
|
||||
|
||||
num1
|
||||
num_1
|
||||
_num_1
|
||||
$num1
|
||||
year2020
|
||||
year_2020
|
||||
```
|
||||
|
||||
Variabel pertama dan kedua dari daftar mengikuti konvensi camelCase dalam mendeklarasikan variabel di JavaScript. Di materi ini, kita akan menggunakan variabel camelCase (camelWithOneHump). Kita menggunakan CamelCase (CamelDenganDuaPunggung) untuk mendeklarasikan class. Kita akan membahas tentang class dan objek di bagian lain.
|
||||
|
||||
Contoh variabel yang tidak valid:
|
||||
|
||||
```js
|
||||
first-name
|
||||
1_num
|
||||
num_#_1
|
||||
```
|
||||
|
||||
Mari kita mendeklarasikan variabel dengan berbagai jenis tipe data. Untuk mendeklarasikan variabel, kita perlu menggunakan kata kunci _let_ atau _const_ sebelum nama variabel. Setelah nama variabel, kita menulis tanda sama (operator assignment) dan sebuah nilai (data yang diberikan).
|
||||
|
||||
```js
|
||||
// Syntax
|
||||
let nameOfVariable = value
|
||||
```
|
||||
|
||||
`nameOfVariable` adalah nama yang menyimpan berbagai jenis data atau nilai.
|
||||
|
||||
**Berikut adalah contoh-contoh variabel:**
|
||||
|
||||
```js
|
||||
// Declaring different variables of different data types
|
||||
let firstName = 'Asabeneh' // first name of a person
|
||||
let lastName = 'Yetayeh' // last name of a person
|
||||
let country = 'Finland' // country
|
||||
let city = 'Helsinki' // capital city
|
||||
let age = 100 // age in years
|
||||
let isMarried = true
|
||||
|
||||
console.log(firstName, lastName, country, city, age, isMarried)
|
||||
```
|
||||
|
||||
```sh
|
||||
Asabeneh Yetayeh Finland Helsinki 100 true
|
||||
```
|
||||
|
||||
```js
|
||||
// Declaring variables with number values
|
||||
let age = 100 // age in years
|
||||
const gravity = 9.81 // earth gravity in m/s2
|
||||
const boilingPoint = 100 // water boiling point, temperature in °C
|
||||
const PI = 3.14 // geometrical constant
|
||||
console.log(gravity, boilingPoint, PI)
|
||||
```
|
||||
|
||||
```sh
|
||||
9.81 100 3.14
|
||||
```
|
||||
|
||||
```js
|
||||
// Variables can also be declaring in one line separated by comma, however I recommend to use a seperate line to make code more readble
|
||||
let name = 'Asabeneh', job = 'teacher', live = 'Finland'
|
||||
console.log(name, job, live)
|
||||
```
|
||||
|
||||
```sh
|
||||
Asabeneh teacher Finland
|
||||
```
|
||||
|
||||
Ketika kamu menjalankan file _index.html_ di folder 01-Day, kamu akan mendapatkan tampilan seperti ini:
|
||||
|
||||
|
||||
|
||||
🌕 luar biasa! kamu baru saja menyelesaikan tantangan hari 1 dan kamu sedang dalam perjalanan menuju kesuksesan. Sekarang, lakukan beberapa latihan untuk otak dan otot tanganmu.
|
||||
|
||||
# 💻 Hari 1: Latihan
|
||||
|
||||
1. Tulis komentar satu baris yang mengatakan, _komentar dapat membuat kode lebih mudah dibaca_
|
||||
2. Tulis komentar satu baris lain yang mengatakan, _Selamat datang di 30DaysOfJavaScript_
|
||||
3. Tulis komentar multibaris yang mengatakan, _komentar dapat membuat kode lebih mudah dibaca, mudah digunakan_
|
||||
_dan informatif_
|
||||
|
||||
4. Buat file variable.js dan deklarasikan variabel serta beri nilai tipe data string, boolean, undefined, dan null
|
||||
5. Buat file datatypes.js dan gunakan operator JavaScript **_typeof_** untuk memeriksa berbagai tipe data. Periksa tipe data dari setiap variabel
|
||||
6. Deklarasikan empat variabel tanpa memberikan nilai
|
||||
7. Deklarasikan empat variabel dengan memberikan nilai
|
||||
8. Deklarasikan variabel untuk menyimpan nama depan, nama belakang, status pernikahan, negara, dan usia kamu dalam beberapa baris
|
||||
9. Deklarasikan variabel untuk menyimpan nama depan, nama belakang, status pernikahan, negara, dan usia kamu dalam satu baris
|
||||
10. Deklarasikan dua variabel _myAge_ dan _yourAge_ dan berikan nilai awal pada keduanya, lalu tampilkan di console browser.
|
||||
|
||||
```sh
|
||||
I am 25 years old.
|
||||
You are 30 years old.
|
||||
```
|
||||
|
||||
🎉 SELAMAT ! 🎉
|
||||
|
||||
[Hari 2 >>](./02_Day_Data_types/02_day_data_types.md)
|
||||
Loading…
Reference in new issue