27 KiB

Raw Blame History

30 Days Of JavaScript

# Day	Topics
01	Pengantar
02	Data Types
03	Booleans, Operators, Date
04	Conditionals
05	Arrays
06	Loops
07	Functions
08	Objects
09	Higher Order Functions
10	Sets and Maps
11	Destructuring and Spreading
12	Regular Expressions
13	Console Object Methods
14	Error Handling
15	Classes
16	JSON
17	Web Storages
18	Promises
19	Closure
20	Writing Clean Code
21	DOM
22	Manipulating DOM Object
23	Event Listeners
24	Mini Project: Solar System
25	Mini Project: World Countries Data Visulalization 1
26	Mini Project: World Countries Data Visulalization 2
27	Mini Project: Portfolio
28	Mini Project: Leaderboard
29	Mini Project:Animating characters
30	Final Projects

🧡🧡🧡 HAPPY CODING 🧡🧡🧡

30 Days Of JavaScript: Introduction

_{Author:
Asabeneh Yetayeh

January, 2020}

🇬🇧 English 🇪🇸 Spanish 🇷🇺 Russian

Support Asabeneh to create more educational materials

Day 2 >>

30 Days Of JavaScript
📔 Hari 1
💻 Day 1: Exercises

📔 Hari 1

Pengantar

Selamat karena telah memutuskan untuk berpartisipasi dalam 30 hari tantangan pemrograman JavaScript. Dalam tantangan ini Anda akan mempelajari semua yang Anda butuhkan untuk menjadi pemrogram JavaScript, dan secara umum, seluruh konsep pemrograman. Di akhir tantangan, Anda akan mendapatkan sertifikat penyelesaian tantangan pemrograman 30DaysOfJavaScript. Jika Anda membutuhkan bantuan atau jika Anda ingin membantu orang lain,Anda dapat bergabung dengan group telegram.

Tantangan 30DaysOfJavaScript adalah panduan untuk pemula dan pengembang JavaScript tingkat lanjut. Selamat datang di JavaScript. JavaScript adalah bahasa web. Saya menikmati menggunakan dan mengajar JavaScript dan saya harap Anda juga akan melakukannya.

Dalam tantangan JavaScript langkah demi langkah ini, Anda akan mempelajari JavaScript, bahasa pemrograman paling populer dalam sejarah umat manusia. JavaScript digunakan untuk menambahkan interaktivitas ke situs web, untuk mengembangkan aplikasi seluler, aplikasi desktop, game dan saat ini JavaScript dapat digunakan untuk pembelajaran mesin dan AI. JavaScript (JS) semakin populer dalam beberapa tahun terakhir dan menjadi yang terdepan bahasa pemrograman selama enam tahun berturut-turut dan merupakan bahasa pemrograman yang paling banyak digunakan di Github.

Persyaratan

Tidak diperlukan pengetahuan pemrograman sebelumnya untuk mengikuti tantangan ini. Anda hanya membutuhkan:

Motivasi
Komputer
Internet
Browser
code editor

Setup

Saya yakin Anda memiliki motivasi dan keinginan kuat untuk menjadi pengembang, komputer, dan Internet. Jika Anda memilikinya, maka Anda memiliki segalanya untuk memulai.

Install Node.js

Anda mungkin tidak membutuhkan node.js sekarang tetapi Anda mungkin membutuhkannya nanti. Install node.js.

Setelah mengunduh, klik dua kali dan instal

Kami dapat memeriksa apakah node diinstal pada mesin lokal Anda dengan membuka terminal perangkat atau command prompt kami.

asabeneh $ node -v
v12.14.0

Saat membuat tutorial ini saya menggunakan node versi 12.14.0, namun sekarang versi node.js yang direkomendasikan untuk diunduh adalah 12.17.0.

Browser

Ada banyak browser di luar sana. Namun, saya sangat merekomendasikan Google Chrome.

Installing Google Chrome

Install google chrome jika Anda belum memilikinya. Kami dapat menulis kode JavaScript kecil di konsol browser, tetapi kami tidak menggunakan konsol browser untuk mengembangkan aplikasi.

Opening Google Chrome Console

Anda dapat membuka konsol Google Chrome dengan mengklik tiga titik di pojok kanan atas browser, memilih More tools -> Developer tools atau menggunakan pintasan keyboard. Saya lebih suka menggunakan jalan pintas.

Untuk membuka konsol Chrome menggunakan pintasan keyboard.

Mac
Command+Option+J

Windows/Linux:
Ctl+Shift+J

Setelah Anda membuka konsol Google Chrome, coba jelajahi tombol yang ditandai. Kami akan menghabiskan sebagian besar waktu di Konsol. Konsol adalah tempat kode JavaScript Anda berada. Mesin Google Console V8 mengubah kode JavaScript Anda menjadi kode mesin. Mari kita tulis kode JavaScript di konsol Google Chrome:

Menulis Kode di Konsol Browser

Kami dapat menulis kode JavaScript apa pun di konsol Google atau konsol browser apa pun. Namun untuk tantangan ini, kami hanya fokus pada konsol Google Chrome. Buka konsol menggunakan:

Mac
Command+Option+I

Windows:
Ctl+Shift+I

Console.log

Untuk menulis kode JavaScript pertama Anda, kami menggunakan fungsi bawaan console.log(). Kami memberikan argumen sebagai data masukan, dan fungsi menampilkan keluaran. Kami lulus 'Hello, World' sebagai data masukan atau argumen dalam fungsi console.log ().

console.log('Hello, World!')

Console.log with Multiple Arguments

Di conole.log () dapat mengambil beberapa parameter yang dipisahkan oleh koma. Sintaksnya terlihat seperti berikut: console.log (param1, param2, param3)

console.log('Hello', 'World', '!')
console.log('HAPPY', 'NEW', 'YEAR', 2020)
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')

Seperti yang Anda lihat dari kode cuplikan di atas, console.log() dapat menerima banyak argumen.

Selamat! Anda menulis kode JavaScript pertama Anda menggunakan console.log().

Comments

Kami menambahkan komentar ke kode kami. Komentar sangat penting untuk membuat kode lebih mudah dibaca dan meninggalkan komentar di kode kita. JavaScript tidak mengeksekusi bagian komentar dari kode kita. Dalam JavaScript, baris teks apa pun yang dimulai dengan // dalam JavaScript adalah komentar, dan apa pun yang dilampirkan seperti ini / ** / juga merupakan komentar.

Contoh: Komentar Baris Tunggal

// Ini adalah komentar pertama // Ini adalah komentar kedua // Saya adalah komentar satu baris

Contoh: Komentar Multiline

/ _ Ini adalah komentar multiline Komentar multiline dapat mengambil beberapa baris JavaScript adalah bahasa web _ /

Syntax

Bahasa pemrograman mirip dengan bahasa manusia. Bahasa Inggris atau banyak bahasa lainnya menggunakan kata, frasa, kalimat, kalimat majemuk, dan lainnya untuk menyampaikan pesan yang bermakna. Arti bahasa Inggris dari syntax adalah pengaturan kata dan frase untuk membuat kalimat yang tersusun dengan baik dalam suatu bahasa. Definisi teknis dari sintaks adalah struktur pernyataan dalam bahasa komputer. Bahasa pemrograman memiliki sintaks. JavaScript adalah bahasa pemrograman dan seperti bahasa pemrograman lainnya, JavaScript memiliki sintaksnya sendiri. Jika kita tidak menulis sintaks yang dimengerti JavaScript, itu akan menimbulkan berbagai jenis kesalahan. Kami akan menjelajahi berbagai jenis kesalahan JavaScript nanti. Untuk saat ini, mari kita lihat kesalahan sintaks.

Saya membuat kesalahan yang disengaja. Akibatnya, konsol memunculkan kesalahan sintaksis. Sebenarnya, sintaksnya sangat informatif. Ini menginformasikan jenis kesalahan apa yang dibuat. Dengan membaca pedoman umpan balik kesalahan, kita dapat memperbaiki sintaks dan memperbaiki masalah. Proses mengidentifikasi dan menghapus kesalahan dari program disebut debugging. Biarkan kami memperbaiki kesalahan:

console.log('Hello, World!')
console.log('Hello, World!')

Sejauh ini, kami melihat bagaimana menampilkan teks menggunakan console.log(). Jika kita mencetak teks atau string menggunakan console.log(), teks harus di dalam tanda kutip tunggal, tanda kutip ganda, atau tanda kutip backtick. Contoh:

console.log('Hello, World!')
console.log('Hello, World!')
console.log(`Hello, World!`)

Arithmetics/Aritmatika

Now, let us practice more writing JSekarang, mari kita lebih banyak berlatih menulis kode JavaScript menggunakanavaScript codes using console.log() di konsol google chrome untuk tipe data nomor. Selain teks, kita juga bisa melakukan perhitungan matematis menggunakan JavaScript. Mari kita lakukan perhitungan sederhana berikut ini. Konsol dapat langsung menerima argumen tanpa ekstensi console.log() fungsi. Namun, itu termasuk dalam pendahuluan ini karena sebagian besar tantangan ini akan terjadi di editor teks di mana penggunaan fungsi tersebut wajib. Anda dapat bermain-main langsung dengan instruksi di konsol.

console.log(2 + 3) // Addition
console.log(3 - 2) // Subtraction
console.log(2 * 3) // Multiplication
console.log(3 / 2) // Division
console.log(3 % 2) // Modulus - finding remainder
console.log(3 ** 2) // Exponentiation 3 ** 2 == 3 * 3

Code Editor

Kami dapat menulis kode kami di konsol browser, tetapi itu tidak akan berhasil untuk proyek yang lebih besar. Di lingkungan kerja nyata, pengembang menggunakan editor kode yang berbeda untuk menulis kode mereka. Dalam tantangan JavaScript 30 hari ini, kami akan menggunakan Visual Studio Code.

Installing Visual Studio Code

Visual studio code adalah editor teks sumber terbuka yang sangat populer. Saya akan merekomendasikan kepada download Visual Studio Code, tetapi jika Anda mendukung editor lain, silakan ikuti apa yang Anda miliki.

Jika Anda menginstal Visual Studio Code, mari kita mulai menggunakannya.

How to Use Visual Studio Code

Buka Visual Studio Kode dengan mengklik dua kali ikonnya. Saat Anda membukanya, Anda akan mendapatkan antarmuka semacam ini. Cobalah untuk berinteraksi dengan ikon berlabel.

Adding JavaScript to a Web Page

JavaScript dapat ditambahkan ke halaman web dengan tiga cara berbeda:

Inline script
Internal script
External script
Multiple External scripts

Bagian berikut menunjukkan berbagai cara menambahkan kode JavaScript ke halaman web Anda.

Inline Script

Buat folder proyek di desktop Anda atau di lokasi mana pun, beri nama 30DaysOfJS dan buat file index.html file di folder proyek. Kemudian paste kode berikut dan buka di browser, misalnya Chrome.

<!DOCTYPE html>
<html>
  <head>
    <title>30DaysOfScript:Inline Script</title>
  </head>
  <body>
    <button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
  </body>
</html>

Sekarang, Anda tinggal menulis skrip sebaris pertama Anda. Kita dapat membuat pesan peringatan pop up menggunakan alert() fungsi bawaan.

Internal Script

Skrip internal dapat ditulis di head or the body, tetapi lebih disukai untuk meletakkannya di body dokumen HTML. Pertama, mari kita tulis di bagian kepala halaman.

<!DOCTYPE html>
<html>
  <head>
    <title>30DaysOfScript:Internal Script</title>
    <script>
      console.log('Welcome to 30DaysOfJavaScript')
    </script>
  </head>
  <body></body>
</html>

Ini adalah cara kami menulis skrip internal sebagian besar waktu. Menulis kode JavaScript di bagian body adalah opsi yang paling disukai. Buka konsol browser untuk melihat output dari console.log ()

<!DOCTYPE html>
<html>
  <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 konsol browser untuk melihat output dari console.log ()

External Script

Mirip dengan skrip internal, tautan skrip eksternal dapat berada di header atau body, tetapi lebih disukai untuk meletakkannya di body. Pertama, kita harus membuat file JavaScript eksternal dengan ekstensi .js. Semua file yang diakhiri dengan ekstensi .js. Semua file yang diakhiri dengan ekstensi .js adalah file JavaScript. Buat file bernama introduksi.js di dalam direktori proyek Anda dan tulis kode berikut dan tautkan file .js ini di bagian bawah badan.

console.log('Welcome to 30DaysOfJavaScript')

Skrip eksternal di head:

<!DOCTYPE html>
<html>
  <head>
    <title>30DaysOfJavaScript:External script</title>
    <script src="introduction.js"></script>
  </head>
  <body></body>
</html>

Skrip eksternal di body:

<!DOCTYPE html>
<html>
  <head>
    <title>30DaysOfJavaScript:External script</title>
  </head>
  <body>
    //it could be in the header or in the body // Here is the recommended place
    to put the external script
    <script src="introduction.js"></script>
  </body>
</html>

Buka konsol browser untuk melihat output dari console.log ()

Multiple External Scripts

Kami juga dapat menautkan beberapa file JavaScript eksternal ke halaman web. Buat file helloworld.js di dalam folder 30DaysOfJS dan tulis kode berikut.

console.log('Hello, World!')

<!DOCTYPE html>
<html>
  <head>
    <title>Multiple External Scripts</title>
  </head>
  <body>
    <script src="./helloworld.js"></script>
    <script src="./introduction.js"></script>
  </body>
</html>

File main.js Anda harus berada di bawah semua skrip lainnya. Sangat penting untuk mengingat ini.

Introduction to Data types

Dalam JavaScript dan juga bahasa pemrograman lainnya, terdapat berbagai jenis tipe data. Berikut ini adalah tipe data primitive JavaScript:String, Number, Boolean, undefined, Null, and Symbol.

Numbers

Integers: Bilangan integer (negatif, nol dan positif) Contoh: ... -3, -2, -1, 0, 1, 2, 3 ...
Angka floating-point: Angka desimal Contoh ... -3.5, -2.25, -1.0, 0.0, 1.1, 2.2, 3.5 ...

Strings

Kumpulan satu atau lebih karakter antara dua tanda kutip tunggal, tanda kutip ganda, atau tanda kutip belakang. Contoh:

'Asabeneh'
'Finland'
'JavaScript is a beautiful programming language'
'I love teaching'
'I hope you are enjoying the first day'`We can also create a string using a backtick`
;('A string could be just as small as one character as big as many pages')

Booleans

Nilai boolean adalah True atau False. Setiap perbandingan mengembalikan nilai boolean, bisa true atau false.

Tipe data boolean bisa berupa nilai true atau false.

Contoh:

true // if the light on ,the value is true
false // if the light off, the value is false

Undefined

Di JavaScript, jika kita tidak menetapkan nilai ke variabel, nilainya tidak ditentukan. Selain itu, jika suatu fungsi tidak mengembalikan apa pun, ia mengembalikan tidak undefined.

let firstName
console.log(firstName) //not defined, because it is not assigned to a value yet

Null

Null dalam JavaScript berarti nilai kosong.

let emptyValue = null

Checking Data Types

Untuk memeriksa tipe data dari variabel tertentu, kami menggunakan typeof operator. Lihat contoh berikut.

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

Comments Again

Ingatlah bahwa berkomentar dalam JavaScript mirip dengan bahasa pemrograman lainnya. Komentar penting untuk membuat kode Anda lebih mudah dibaca. Ada dua cara untuk berkomentar:

Single line commenting
Multiline commenting

// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line comment

Komentar multiline:

/*
    let location = 'Helsinki';
    let age = 100;
    let isMarried = true;
    This is a Multiple line comment
    */

Variables

Variabel adalah containers data. Variabel digunakan untuk store data di lokasi memori. Saat variabel dideklarasikan, lokasi memori dicadangkan. Ketika sebuah variabel ditetapkan ke suatu nilai (data), ruang memori akan diisi dengan data tersebut. Untuk mendeklarasikan variabel, kami menggunakan var, let, or const kata kunci.

Untuk variabel yang berubah pada waktu yang berbeda, kami menggunakan let. Jika data tidak berubah sama sekali, kami gunakan const. Misalnya, PI, nama negara, gravitasi tidak berubah, dan kita dapat menggunakan const. Kami tidak akan menggunakan var dalam tantangan ini dan saya tidak menyarankan Anda untuk menggunakannya. Ini adalah cara yang rawan kesalahan untuk mendeklarasikan variabel yang memiliki banyak kebocoran. Kami akan berbicara lebih banyak tentang var, let, dan const secara rinci di bagian lain (scope). Untuk saat ini penjelasan di atas sudah cukup.

Nama variabel JavaScript yang valid harus mengikuti aturan berikut:

Nama variabel JavaScript tidak boleh dimulai dengan angka.
Nama variabel JavaScript tidak mengizinkan karakter khusus kecuali tanda dolar dan garis bawah.
Nama variabel JavaScript mengikuti konvensi camelCase.
Nama variabel JavaScript tidak boleh memiliki spasi di antara kata.

Berikut adalah contoh variabel JavaScript yang valid.

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 pada daftar mengikuti konvensi camelCase untuk mendeklarasikan dalam JavaScript. Dalam materi ini, kami akan menggunakan variabel camelCase.

Contoh variabel yang tidak valid:

  first-name
  1_num
  num_#_1

Mari kita deklarasikan variabel dengan tipe data yang berbeda. Untuk mendeklarasikan variabel, kita perlu menggunakan kata kunci let atau const sebelum nama variabel. Mengikuti nama variabel, kami menulis tanda sama dengan (assignment operator / operator penugasan), dan nilai (assigned data / data yang ditetapkan).

// Syntax
let nameOfVariable = value

Contoh variabel yang dideklarasikan

// 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)

Asabeneh Yetayeh Finland Helsinki 100 True

// 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 oC
const PI = 3.14 // geometrical constant

console.log(gravity, boilingPoint, PI)

9.81 100 3.14

// Variables can also be declaring in one line separated by comma
let name = 'Asabeneh', // name of a person
  job = 'teacher',
  live = 'Finland'
console.log(name, job, live)

Asabeneh teacher Finland

Saat Anda menjalankan file index.html di folder 01-Day, Anda akan mendapatkan ini:

🌕 Kamu luar biasa! Anda baru saja menyelesaikan tantangan hari pertama dan Anda sedang dalam perjalanan menuju kehebatan. Sekarang lakukan beberapa latihan untuk otak dan otot Anda.

💻 Day 1: Exercises

Tulis satu baris komentar yang berbunyi, komentar dapat membuat kode dapat dibaca
Tulis satu lagi komentar yang mengatakan, Selamat datang di 30DaysOfJavaScript
Tulis komentar multiline yang menyatakan, comments dapat membuat kode dapat dibaca, mudah digunakan kembali dan informatif
Buat file variable.js dan deklarasikan variabel dan tetapkan tipe data string, boolean, undefined dan null
Buat file datatypes.js dan gunakan operator JavaScript typeof untuk memeriksa tipe data yang berbeda. Periksa tipe data setiap variabel
Deklarasikan empat variabel tanpa menetapkan nilai
Deklarasikan empat variabel dengan nilai yang ditetapkan
Deklarasikan variabel untuk menyimpan nama depan, nama belakang, status perkawinan, negara dan usia dalam beberapa baris
Deklarasikan variabel untuk menyimpan nama depan, nama belakang, status pernikahan, negara, dan usia Anda dalam satu baris
Deklarasikan dua variabel myAge dan yourAge dan tetapkan nilai awal dan log ke konsol browser.

I am 25 years old.
You are 30 years old.

🎉 CONGRATULATIONS ! 🎉