| # Hari | Topik |
|---|---|
| 01 | Perkenalan |
| 02 | Tipe data |
| 03 | Booleans, operator, tanggal |
| 04 | Persyaratan |
| 05 | Array |
| 06 | Loop |
| 07 | Fungsi |
| 08 | Objek |
| 09 | Fungsi pesanan lebih tinggi |
| 10 | Set dan peta |
| 11 | Menghancurkan dan menyebar |
| 12 | Ekspresi reguler |
| 13 | Metode Objek Konsol |
| 14 | Penanganan kesalahan |
| 15 | Kelas |
| 16 | Json |
| 17 | Penyimpanan web |
| 18 | Janji |
| 19 | Penutup |
| 20 | Menulis kode bersih |
| 21 | Dom |
| 22 | Memanipulasi objek DOM |
| 23 | Pendengar acara |
| 24 | Proyek Mini: Tata Surya |
| 25 | Proyek Mini: Visualisasi Data Negara Dunia 1 |
| 26 | Proyek Mini: Visualisasi Data Negara Dunia 2 |
| 27 | Proyek Mini: Portofolio |
| 28 | Proyek mini: Papan peringkat |
| 29 | Proyek Mini: Karakter Animasi |
| 30 | Proyek akhir |
??? Happy Coding ???
Penulis: Asabeneh Yetayeh
Januari, 2020
?? Bahasa inggris ?? Spanyol ?? Italia ?? Rusia ?? Turki ?? Azerbaijan ?? Korea ?? Vietnam ?? Polandia ?? Portugis
Hari 2 >>
Selamat atas memutuskan untuk berpartisipasi dalam 30 hari tantangan pemrograman JavaScript. Dalam tantangan ini, Anda akan mempelajari semua yang Anda butuhkan untuk menjadi programmer JavaScript, dan secara umum, seluruh konsep pemrograman. Di akhir tantangan, Anda akan mendapatkan sertifikat penyelesaian tantangan pemrograman 30 hari. Jika Anda membutuhkan bantuan atau jika Anda ingin membantu orang lain, Anda dapat bergabung dengan grup telegram khusus.
Tantangan 30daysofjavascript adalah panduan untuk pengembang JavaScript yang pemula dan lanjutan. Selamat datang di JavaScript. JavaScript adalah bahasa web. Saya menikmati menggunakan dan mengajar JavaScript dan saya harap Anda juga akan melakukannya.
Dalam langkah demi langkah ini, JavaScript Challenge, Anda akan belajar 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 pemrograman sisi server , pembelajaran mesin , dan AI .
JavaScript (JS) telah meningkat dalam popularitas dalam beberapa tahun terakhir dan telah menjadi bahasa pemrograman terkemuka selama sepuluh tahun terakhir dan merupakan bahasa pemrograman yang paling banyak digunakan di GitHub.
Tantangan ini mudah dibaca, ditulis dalam bahasa Inggris percakapan, menarik, memotivasi dan pada saat yang sama, sangat menuntut. Anda perlu mengalokasikan banyak waktu untuk menyelesaikan tantangan ini. Jika Anda seorang pelajar visual, Anda mungkin mendapatkan pelajaran video di saluran YouTube Washera. Berlangganan saluran, komentar dan ajukan pertanyaan di youtube vides dan jadilah proaktif, penulis pada akhirnya akan memperhatikan Anda.
Penulis suka mendengar pendapat Anda tentang tantangan, berbagi penulis dengan mengungkapkan pemikiran Anda tentang tantangan 30 hari. Anda dapat meninggalkan kesaksian Anda di tautan ini
Tidak ada pengetahuan pemrograman sebelumnya yang diperlukan untuk mengikuti tantangan ini. Anda hanya perlu:
Saya yakin Anda memiliki motivasi dan keinginan yang kuat untuk menjadi pengembang, komputer dan internet. Jika Anda memilikinya, maka Anda memiliki segalanya untuk memulai.
Anda mungkin tidak memerlukan node.js sekarang tetapi Anda mungkin membutuhkannya untuk nanti. Instal Node.js.
Setelah mengunduh klik dua kali dan instal
Kami dapat memeriksa apakah node diinstal pada mesin lokal kami dengan membuka terminal perangkat atau prompt perintah kami.
asabeneh $ node -v
v12.14.0Saat membuat tutorial ini, saya menggunakan Node versi 12.14.0, tetapi sekarang versi yang disarankan dari Node.js untuk diunduh adalah v14.17.6, pada saat Anda menggunakan materi ini, Anda mungkin memiliki versi Node.js yang lebih tinggi.
Ada banyak browser di luar sana. Namun, saya sangat merekomendasikan Google Chrome.
Instal Google Chrome jika Anda belum memilikinya. Kami dapat menulis kode javascript kecil di konsol browser, tetapi kami tidak menggunakan konsol browser untuk mengembangkan aplikasi.
Anda dapat membuka konsol Google Chrome baik dengan mengklik tiga titik di sudut kanan atas browser, memilih lebih banyak alat -> alat pengembang atau menggunakan pintasan keyboard. Saya lebih suka menggunakan pintasan.
Untuk membuka konsol chrome menggunakan pintasan keyboard.
Mac
Command+Option+J
Windows/Linux:
Ctl+Shift+J
Setelah Anda membuka konsol Google Chrome, cobalah untuk menjelajahi tombol yang ditandai. Kami akan menghabiskan sebagian besar waktu di konsol. Konsol adalah tempat di mana kode JavaScript Anda pergi. Mesin Google Console V8 mengubah kode JavaScript Anda menjadi kode mesin. Mari kita tulis kode JavaScript di google chrome console:
Kami dapat menulis kode JavaScript apa pun di Google Console 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 Untuk menulis kode JavaScript pertama kami, kami menggunakan function console.log () bawaan. Kami meneruskan argumen sebagai data input, dan fungsi menampilkan output. Kami melewati 'Hello, World' sebagai data input atau argumen dalam fungsi Console.log ().
console . log ( 'Hello, World!' ) Fungsi console.log() dapat mengambil beberapa parameter yang dipisahkan oleh koma. Sintaks terlihat seperti sebagai 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 dapat Anda lihat dari kode cuplikan di atas, console.log() dapat mengambil banyak argumen.
Selamat! Anda menulis kode JavaScript pertama Anda menggunakan console.log() .
Kami dapat menambahkan komentar ke kode kami. Komentar sangat penting untuk membuat kode lebih mudah dibaca dan meninggalkan komentar dalam kode kami. JavaScript tidak menjalankan bagian komentar dari kode kami. Dalam JavaScript, setiap baris teks yang dimulai dengan // di JavaScript adalah komentar, dan apa pun yang tertutup seperti ini // juga merupakan komentar.
Contoh: Komentar baris tunggal
// This is the first comment
// This is the second comment
// I am a single line commentContoh: Komentar multiline
/*
This is a multiline comment
Multiline comments can take multiple lines
JavaScript is the language of the web
*/ Bahasa pemrograman mirip dengan bahasa manusia. Bahasa Inggris atau banyak bahasa lain menggunakan kata -kata, frasa, kalimat, kalimat majemuk, dan lainnya lainnya untuk menyampaikan pesan yang bermakna. Makna sintaksis bahasa Inggris adalah pengaturan kata dan frasa untuk membuat kalimat yang terbentuk dengan baik dalam suatu bahasa . Definisi teknis sintaks adalah struktur pernyataan dalam bahasa komputer. Bahasa pemrograman memiliki sintaks. JavaScript adalah bahasa pemrograman dan seperti bahasa pemrograman lainnya, ia memiliki sintaksnya sendiri. Jika kita tidak menulis sintaks yang dipahami JavaScript, itu akan meningkatkan berbagai jenis kesalahan. Kami akan mengeksplorasi berbagai jenis kesalahan javascript nanti. Untuk saat ini, mari kita lihat kesalahan sintaksis.
Saya membuat kesalahan yang disengaja. Akibatnya, konsol meningkatkan kesalahan sintaksis. Sebenarnya, sintaksnya sangat informatif. Ini menginformasikan jenis kesalahan apa yang dibuat. Dengan membaca pedoman umpan balik kesalahan, kami dapat memperbaiki sintaks dan memperbaiki masalah. Proses mengidentifikasi dan menghilangkan kesalahan dari suatu program disebut debugging. Mari kita perbaiki kesalahan:
console . log ( 'Hello, World!' )
console . log ( 'Hello, World!' ) Sejauh ini, kami melihat cara menampilkan teks menggunakan console.log() . Jika kita mencetak teks atau string menggunakan console.log() , teks harus berada di dalam kutipan tunggal, kutipan ganda, atau backtick. Contoh:
console . log ( 'Hello, World!' )
console . log ( "Hello, World!" )
console . log ( `Hello, World!` ) Sekarang, mari kita berlatih lebih banyak menulis kode javascript menggunakan console.log() di google chrome konsol untuk tipe data angka. Selain teks, kami juga dapat melakukan perhitungan matematika menggunakan JavaScript. Mari kita lakukan perhitungan sederhana berikut. Dimungkinkan untuk menulis kode JavaScript di google chrome console dapat secara langsung tanpa fungsi console.log() . Namun, itu termasuk dalam pengantar ini karena sebagian besar tantangan ini akan terjadi dalam editor teks di mana penggunaan fungsi akan wajib. Anda dapat bermain -main secara 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 * 3Kami dapat menulis kode kami di konsol browser, tetapi itu tidak akan untuk proyek yang lebih besar. Dalam lingkungan kerja yang nyata, pengembang menggunakan editor kode yang berbeda untuk menulis kode mereka. Dalam 30 hari tantangan JavaScript ini, kami akan menggunakan kode Visual Studio.
Visual Studio Code adalah editor teks open-source yang sangat populer. Saya akan merekomendasikan untuk mengunduh kode Visual Studio, tetapi jika Anda mendukung editor lain, jangan ragu untuk mengikuti apa yang Anda miliki.
Jika Anda menginstal kode Visual Studio, mari kita mulai menggunakannya.
Buka kode Visual Studio dengan mengklik dua kali ikonnya. Saat Anda membukanya, Anda akan mendapatkan antarmuka semacam ini. Cobalah untuk berinteraksi dengan ikon berlabel.
JavaScript dapat ditambahkan ke halaman web dengan tiga cara berbeda:
Bagian berikut menunjukkan berbagai cara menambahkan kode JavaScript ke halaman web Anda.
Buat folder proyek di desktop Anda atau di lokasi mana pun, beri nama 30daysofjs dan buat file index.html di folder proyek. Kemudian tempel kode berikut dan buka di browser, misalnya Chrome.
<!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, Anda baru saja menulis skrip inline pertama Anda. Kami dapat membuat pesan peringatan pop up menggunakan fungsi alert() .
Skrip internal dapat ditulis di head atau body , tetapi lebih disukai untuk meletakkannya di tubuh dokumen HTML. Pertama, mari kita tulis di bagian kepala halaman.
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfScript:Internal Script </ title >
< script >
console . log ( 'Welcome to 30DaysOfJavaScript' )
</ script >
</ head >
< body > </ body >
</ html > Beginilah cara kami menulis skrip internal hampir sepanjang waktu. Menulis kode JavaScript di bagian tubuh adalah opsi yang paling disukai. Buka konsol browser untuk melihat output dari console.log() .
<!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 konsol browser untuk melihat output dari console.log() .
Mirip dengan skrip internal, tautan skrip eksternal dapat berada di header atau tubuh, tetapi lebih disukai untuk memasukkannya ke dalam tubuh. Pertama, kita harus membuat file JavaScript eksternal dengan ekstensi .js. Semua file yang diakhiri dengan ekstensi .js adalah file javascript. Buat file bernama pengantar.js di dalam direktori proyek Anda dan tulis kode berikut dan tautkan file .js ini di bagian bawah tubuh.
console . log ( 'Welcome to 30DaysOfJavaScript' )Skrip eksternal di kepala :
<!DOCTYPE html >
< html lang =" en " >
< head >
< title > 30DaysOfJavaScript:External script </ title >
< script src =" introduction.js " > </ script >
</ head >
< body > </ body >
</ html >Skrip eksternal dalam tubuh :
<!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 konsol browser untuk melihat output dari console.log() .
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 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 Anda harus di bawah semua skrip lainnya . Sangat penting untuk mengingat ini.
Dalam JavaScript dan juga bahasa pemrograman lainnya, ada berbagai jenis tipe data. Berikut ini adalah tipe data primitif JavaScript: string, angka, boolean, tidak terdefinisi, nol , dan simbol .
Koleksi satu atau lebih karakter antara dua kutipan tunggal, kutipan ganda, atau backticks.
Contoh:
'a'
'Asabeneh'
"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 or as big as many pages'
'Any data type under a single quote, double quote or backtick is a string'Nilai boolean benar atau salah. Setiap perbandingan mengembalikan nilai boolean, yang benar atau salah.
Jenis data Boolean adalah nilai yang benar atau salah.
Contoh:
true // if the light is on, the value is true
false // if the light is off, the value is falseDalam JavaScript, jika kami tidak menetapkan nilai ke variabel, nilainya tidak terdefinisi. Selain itu, jika suatu fungsi tidak mengembalikan apa pun, ia kembali tidak ditentukan.
let firstName
console . log ( firstName ) // undefined, because it is not assigned to a value yetNull di JavaScript berarti nilai kosong.
let emptyValue = null Untuk memeriksa tipe data dari variabel tertentu, kami menggunakan operator tipe . 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 Ingatlah bahwa berkomentar di JavaScript mirip dengan bahasa pemrograman lainnya. Komentar penting dalam membuat kode Anda lebih mudah dibaca. Ada dua cara berkomentar:
// commenting the code itself with a single comment
// let firstName = 'Asabeneh'; single line comment
// let lastName = 'Yetayeh'; single line commentKomentar multiline:
/*
let location = 'Helsinki';
let age = 100;
let isMarried = true;
This is a Multiple line comment
*/ Variabel adalah wadah data. Variabel digunakan untuk menyimpan data di lokasi memori. Ketika variabel dinyatakan, lokasi memori dicadangkan. Ketika suatu variabel ditetapkan ke nilai (data), ruang memori akan diisi dengan data itu. Untuk mendeklarasikan variabel, kami menggunakan kata kunci var , let , atau const .
Untuk variabel yang berubah pada waktu yang berbeda, kami menggunakan Let . Jika data tidak berubah sama sekali, kami menggunakan Const . Misalnya, pi, nama negara, gravitasi tidak berubah, dan kita dapat menggunakan const . Kami tidak akan menggunakan VAR dalam tantangan ini dan saya tidak merekomendasikan Anda untuk menggunakannya. Ini adalah cara rentan kesalahan untuk mendeklarasikan variabel itu memiliki banyak kebocoran. Kami akan berbicara lebih banyak tentang VAR, Let, dan Const secara rinci di bagian lain (Lingkup). Untuk saat ini, penjelasan di atas sudah cukup.
Nama variabel JavaScript yang valid harus mengikuti aturan berikut:
Berikut ini 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_2020Variabel pertama dan kedua dalam daftar mengikuti konvensi Camelcase untuk mendeklarasikan dalam JavaScript. Dalam materi ini, kami akan menggunakan variabel Camelcase (CamelwithOneHump). Kami menggunakan CamelCase (CamelWithTwohump) untuk mendeklarasikan kelas, kami akan membahas tentang kelas dan objek di bagian lain.
Contoh variabel yang tidak valid:
first - name
1 _num
num_ # _1Mari kita nyatakan 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 yang sama (operator penugasan), dan nilai (data yang ditetapkan).
// Syntax
let nameOfVariable = valueNameOfVriable adalah nama yang menyimpan data nilai yang berbeda. Lihat di bawah untuk contoh detail.
Contoh variabel yang dinyatakan
// 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 °C
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, 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 ) Asabeneh teacher FinlandSaat Anda menjalankan file index.html di folder 01 hari Anda harus mendapatkan ini:
? Kamu luar biasa! Anda baru saja menyelesaikan Tantangan Hari 1 dan Anda sedang menuju keagungan. Sekarang lakukan beberapa latihan untuk otak dan otot Anda.
Tulis komentar tunggal yang mengatakan, komentar dapat membuat kode dapat dibaca
Tulis komentar tunggal lain yang bertuliskan, selamat datang di 30daysofjavascript
Tulis komentar multiline yang mengatakan, komentar dapat membuat kode dapat dibaca, mudah digunakan kembali dan informatif
Buat file variable.js dan nyatakan variabel dan tetapkan string, boolean, tidak terdefinisi dan tipe data nol
Buat file DataTypes.js dan gunakan tipe operator JavaScript untuk memeriksa berbagai tipe data. Periksa tipe data setiap variabel
Mendeklarasikan empat variabel tanpa memberikan nilai
Mendeklarasikan empat variabel dengan nilai yang ditetapkan
Deklarasikan variabel untuk menyimpan nama depan, nama belakang, status perkawinan, negara dan usia di berbagai baris
Deklarasikan variabel untuk menyimpan nama depan, nama belakang, status perkawinan, negara dan usia dalam satu baris
Deklarasikan dua variabel Myage dan YoTage dan tetapkan nilai awal dan masuk ke konsol browser.
I am 25 years old.
You are 30 years old.? SELAMAT ! ?
Hari 2 >>
