Terjemahan yang diadaptasi dari artikel "JavaScript Tumpukan Penuh dalam Enam Minggu: Panduan Kurikulum"

Pengembangan web adalah salah satu area paling sederhana dan paling populer di kalangan programmer pemula. Siapapun cukup untuk bekerja editor teks dan browser, Anda tidak perlu mempelajari algoritme di tingkat mahir, hasil dari setiap tahap penulisan program jelas - secara umum, ada banyak keuntungan. Pengetahuan tentang JavaScript dianggap sebagai keterampilan utama dalam konteks pengembangan web.

JavaScript berkembang sangat cepat sekarang, yang membuatnya mudah bingung saat belajar bahasa. Kami memberikan perhatian Anda kurikulum yang terstruktur dengan baik yang mencakup semua aspek yang diperlukan dari JavaScript dan teknologi terkait.

Mengapa JavaScript?

Keterbukaan bahasa patut diperhatikan - perusahaan, biasanya bersaing satu sama lain, berkolaborasi untuk mengembangkan JavaScript. Bahasanya sangat fleksibel dan akan sesuai dengan para pendukung pendekatan berorientasi objek dan fungsional. Sejumlah besar perpustakaan dan kerangka kerja memungkinkan Anda untuk dengan mudah memecahkan semua jenis masalah, dan platform server Node.js memungkinkan untuk menggunakan bahasa tidak hanya di browser, tetapi juga di konsol. Anda bahkan dapat menulis desktop dan aplikasi seluler: yang pertama menggunakan kerangka Electron, dan yang kedua menggunakan NativeScript atau React Native.

Dasar

Pertama, Anda perlu mempelajari konsep dasar JavaScript, pengembangan web, dan pemrograman secara umum:

• JS berorientasi objek - konstruktor dan pabrik, warisan;
• JS fungsional - fungsi tingkat tinggi, penutupan, rekursi;
• Spesifikasi tes melati;
• dasar-dasar HTML, CSS dan jQuery.

Git

Git adalah alat yang dibutuhkan pengembang, jadi Anda harus menggunakannya sedini mungkin. Berikut adalah keterampilan dasar yang harus Anda miliki:

• membuat dan memindahkan file dalam direktori;
• inisialisasi dan komit di Git;
• mengatur repositori di GitHub.

Algoritma dan struktur data

Maka ada baiknya menjelajahi algoritme (khususnya, konsep kompleksitas algoritme), serta struktur data dasar: daftar tertaut, antrian, tumpukan, pohon pencarian biner, dan tabel hash. Ini akan membantu Anda.

Backend

Node.js

10 tahun yang lalu JavaScript hanya dapat digunakan untuk pengembangan front-end. Sekarang, berkat Node.js, ini bukan hanya satu front end. Node hanyalah lingkungan untuk mengeksekusi kode JS di sisi server, jadi Anda tidak perlu mempelajari sintaks baru, tetapi Anda perlu mengimpor dan mengekspor file, membagi kode menjadi modul dan menggunakan manajer paket npm.

Server, HTTP, Express.js

Setelah mempelajari Node, ada baiknya untuk terus mengeksplorasi pengembangan backend dan memahami server dan perutean. Anda bisa mulai dengan port dan protokol dengan fokus pada HTTP, lalu beralih ke Express, pustaka Node untuk menangani permintaan.

JavaScript asinkron

Basis data, skema, model, dan ORM

Database adalah salah satu elemen terpenting dalam pengembangan web. Jika aplikasi Anda perlu memuat atau menyimpan data apa pun yang tidak hilang saat halaman di-refresh, itu harus menggunakan database. Anda perlu belajar membedakan antara database relasional dan non-relasional dan memahami jenis hubungan. Kemudian dan mengenal yang berbeda. Kemampuan untuk bekerja dengan ORM juga tidak akan berlebihan.

Paling depan

HTML dan CSS

HTML dan CSS adalah tulang punggung fondasi untuk setiap pengembang web. Anda tidak perlu mengetahuinya dengan sempurna, tetapi Anda harus memahaminya. Anda juga dapat menjelajahi perpustakaan populer (seperti Bootstrap) dan praprosesor CSS seperti Sass untuk membantu membuat CSS Anda terlihat seperti kode biasa. Untuk menyederhanakan bekerja dengan HTML, Anda dapat memilih salah satu mesin templating populer, misalnya, pug.

manipulasi jQuery dan DOM

Setelah membuat tampilan halaman ketika Bantuan HTML dan CSS, Anda juga akan menggunakan perpustakaan jQuery untuk memanipulasi DOM. Banyak orang berpikir bahwa jQuery tidak berguna dan akan segera digantikan oleh Angular dan React, tetapi ia sangat populer dan oleh karena itu patut untuk diketahui. Selain itu, suatu hari Anda akan menemukan diri Anda dalam situasi di mana tidak nyaman bagi Anda untuk memalu paku dengan mikroskop React, dan kemudian jQuery ringan akan membantu Anda.

Alat pengembang Chrome

Tidak dapat dimaafkan jika mengabaikan alat Chrome yang menyediakan daya dalam jumlah besar. Dengan mereka, Anda dapat menjelajahi elemen DOM, men-debug melalui konsol, melacak rute, dan banyak lagi. Artikel ini menjelaskan beberapa fitur praktis dari konsol Chrome yang akan mempermudah menyelesaikan tugas rutin.

AJAX

Jika Anda ingin mencegah aplikasi Anda memuat ulang halaman setelah setiap operasi basis data, Anda pasti membutuhkan AJAX - ia mengirimkan permintaan HTTP asinkron latar belakang, respons yang memperbarui hanya sebagian dari tampilan. Anda dapat bekerja dengan AJAX melalui jQuery menggunakan metode .ajax.

Pemrograman bukan hanya cara untuk menghasilkan uang besar dan bahkan tidak sepenuhnya pekerjaan mental. Ini adalah kesempatan untuk memahami apa yang terdiri dari dunia sekitarnya, untuk memecahnya menjadi partikel-partikel kecil, dan kemudian merakitnya kembali, dipandu oleh logika dan pengetahuan Anda sendiri.

Bahasa pemrograman hanyalah alat yang digunakan seseorang untuk membangun aturan dalam sistem yang dibuat.

Internet menghadirkan sejumlah peluang yang dimanfaatkan oleh pikiran yang cerdas dan giat. Tentu saja, pengembangan web juga memiliki alatnya sendiri untuk mewujudkan ide. Salah satunya adalah bahasa Pemrograman JavaScript, yang akan dibahas dalam artikel ini:

informasi Umum

Banyak orang, bahkan mereka yang tidak ada hubungannya dengan dunia IT, pernah mendengar kata Java. Bahasa revolusioner platform-independen yang digunakan untuk menulis aplikasi secara aktif untuk sistem seluler... Ini dikembangkan oleh perusahaan Sun yang menjanjikan, yang kemudian berada di bawah sayap Oracle. Tetapi tidak ada perusahaan yang ada hubungannya dengan JavaScript:

Semua yang diperlukan dari Sun adalah izin untuk menggunakan sebagian dari nama itu. Anehnya, JavaScript sama sekali tidak dimiliki oleh perusahaan mana pun.

Saat menulis aplikasi web, pemrograman JavaScript paling banyak digunakan. daftar secara singkat fitur utama dari bahasa yang diberikan, berikut ini harus disorot:

• Berorientasi pada objek. Eksekusi program adalah interaksi objek;
• Tipe data dilemparkan secara otomatis;
• Fungsi adalah objek dari kelas dasar. Fitur ini membuat JavaScript mirip dengan banyak bahasa pemrograman fungsional seperti Lisp dan Haskell;
• Pembersihan memori otomatis. Pengumpulan sampah membuat JavaScript terlihat seperti C # atau Java.

Jika kita berbicara tentang esensi penggunaan JavaScript, maka bahasa ini memungkinkan Anda untuk "menghidupkan" halaman stasioner situs menggunakan kode yang dapat dijalankan untuk dieksekusi ( yang disebut skrip). Artinya, Anda dapat menggambar analogi dengan kartun, di mana html dan css digambar karakter, dan JavaScript adalah apa yang membuat mereka bergerak.

Jika kita berbicara tentang sintaks JavaScript, maka ia memiliki fitur berikut:

• Kasus itu penting. Func () dan Func () adalah fungsi yang sama sekali berbeda;
• Setelah operator, Anda harus meletakkan titik koma;
• Objek dan operasi bawaan;
• Spasi tidak dihitung. Anda dapat menggunakan indentasi sebanyak yang Anda inginkan, serta jeda baris, untuk menata kode Anda.

Kode JavaScript paling sederhana terlihat seperti ini:

Lingkup aplikasi

Untuk memahami mengapa JavaScript diperlukan dan seberapa perlu mempelajarinya, perlu untuk menyoroti beberapa area di mana itu diterapkan. bahasa yang diberikan pemrograman.

• Pengembangan aplikasi web. Apakah Anda ingin menyiapkan penghitung sederhana, mengatur transfer data antar formulir, atau memasang game di situs Anda? Maka JavaScript akan menjadi asisten yang setia dalam hal ini;
• "Partisipasi aktif" di AJAX. Teknologi ini memungkinkan untuk secara signifikan mempercepat pekerjaan aplikasi dengan bertukar data dengan server di latar belakang:

• Sistem operasi. Mungkin seseorang tidak tahu, tetapi Windows, Linux dan Mac memiliki pesaing browser mereka sendiri, bagian terbesar dari kode yang ditulis dalam JavaScript;
• Aplikasi seluler;
• Lingkup studi. Setiap spesialisasi pemrograman di universitas mencakup studi JavaScript sampai tingkat tertentu. Hal ini disebabkan oleh fakta bahwa bahasa tersebut awalnya dikembangkan untuk programmer yang tidak terlalu kuat. Pelajaran JavaScript digabungkan secara logis ke dalam kursus HTML dasar, jadi penguasaannya cukup mudah.

Keuntungan dan kerugian

Jangan berpikir bahwa JavaScript adalah semacam obat mujarab untuk semua masalah, dan setiap programmer menggunakan bahasa ini dengan senyum di wajahnya. Segala sesuatu di dunia ini memiliki sisi positif dan sisi negatif... Untuk mulai dengan, mari kita perhatikan kekurangannya.

• Kebutuhan untuk memastikan kompatibilitas lintas-browser. Karena JavaScript bertindak sebagai teknologi Internet, maka Anda harus mematuhi aturan yang ditetapkan oleh world wide web. Kode harus dijalankan dengan benar di semua, atau setidaknya yang paling populer, browser;
• Sistem pewarisan dalam bahasa menyebabkan kesulitan dalam memahami apa yang terjadi. JavaScript mengimplementasikan pewarisan berbasis prototipe. Orang yang telah mempelajari bahasa pemrograman berorientasi objek lainnya terbiasa dengan “ kelas turunan mewarisi kelas induk". Namun dalam JavaScript, hal-hal ini ditangani langsung oleh objek, dan ini di luar kepala Anda;
• Hilang perpustakaan standar... JavaScript tidak menyediakan kemampuan apa pun untuk bekerja dengan file, aliran I/O, dan hal berguna lainnya;
• Sintaksnya umumnya sulit dipahami. Keindahan kode jelas bukan keunggulan JavaScript, tetapi aturan utama programmer diperhatikan: “ Bekerja? Jangan sentuh!».

Sekarang perlu diperhatikan beberapa manfaatnya

• JavaScript menyediakan sejumlah besar kesempatan untuk memecahkan berbagai macam tugas. Fleksibilitas bahasa memungkinkan Anda untuk menggunakan berbagai pola pemrograman yang sesuai dengan kondisi tertentu. Pikiran inventif akan mendapatkan kesenangan sejati;
• Popularitas JavaScript membuka sejumlah besar perpustakaan siap pakai untuk programmer, yang secara signifikan dapat menyederhanakan penulisan kode dan meratakan ketidaksempurnaan sintaks;
• Aplikasi di banyak daerah. Kemungkinan yang luas dari JavaScript memberi para programmer kesempatan untuk mencoba diri mereka sendiri sebagai pengembang berbagai macam aplikasi, dan ini, tentu saja, mendorong minat pada aktivitas profesional.

Jangan memperhatikan fakta bahwa ada lebih banyak minus daripada plus. JavaScript tertanam kuat di ceruknya, dan tidak ada kritik dari sana untuk saat ini tidak akan pingsan.

Bagi yang ingin belajar

Jalan yang sulit dan panjang terbentang di depan bagi mereka yang memutuskan untuk mempelajari JavaScript secara menyeluruh. Untuk pemula, ada panduan dasar, berikut ini, Anda dapat sangat menyederhanakan pembelajaran Anda.

• Pertama-tama, HTML. Anda tidak dapat mulai melakukan apa pun untuk internet tanpa dasar. Cascading Style Sheets (CSS) juga sangat berguna;
• Gunakan literatur baru. Pemrograman bukanlah fisika, yang hukumnya tidak dapat diganggu gugat, tetapi hukum baru tutorial- ini adalah yang lama dilucuti. Teknologi TI terus berkembang, dan pembaruan yang bermanfaat tidak boleh diabaikan;
• Cobalah untuk menulis semua bagian dari program sendiri. Jika sesuatu tidak berhasil sama sekali, Anda dapat meminjam kode orang lain, tetapi hanya memahami setiap baris sebelumnya untuk diri Anda sendiri;
• Debugging adalah teman sejati Anda. Menemukan kesalahan dengan cepat adalah salah satu poin terpenting dalam pemrograman;
• Jangan abaikan norma pemformatan. Tentu saja, kode tidak akan menjadi lebih baik atau lebih buruk dari jumlah lekukan dan spasi yang berbeda, tetapi kemudahan membaca dan pemahaman oleh programmer juga merupakan poin penting. Kode di bawah ini? sangat sulit untuk dipahami, terutama jika Anda bukan miliknya

• Nama variabel harus memiliki makna leksikal. Dalam proses menulis program sederhana tampaknya tidak penting sama sekali, tetapi ketika jumlah baris kode melebihi seribu, semua iblis mematahkan kaki mereka;

Javascript adalah bahasa yang terus berkembang, terutama sekarang karena ada jadwal tahunan untuk rilis pembaruan spesifikasi ECMAScript. Karena itu, pengetahuan Javascript di luar jQuery menjadi semakin penting.

Tentu saja, dalam artikel ini kami tidak akan dapat mencakup semua jumlah pengetahuan yang diperlukan. Pasti akan ada saat-saat yang saya lewatkan, mungkin saya salah, atau pendapat kita tentang kumpulan pengetahuan yang diperlukan akan berbeda.

Dengan mempertimbangkan aspek-aspek ini, mari kita mulai ...

Apa itu tes FizzBizz?

FizzBizz biasanya merupakan tes kecil yang ditujukan untuk menyingkirkan pengembang yang tidak berpengalaman. Saya pikir Anda akan terkejut betapa banyak pengembang javascript tidak tahu cara menulis tes seperti ini.

Sebagai aturan, tes semacam itu tidak membawa banyak arti. Hal ini semata-mata bertujuan untuk menguji kemampuan calon potensial.

Ingat, kemungkinan Anda akan diminta melakukan tes seperti ini dalam wawancara sangat tinggi.

Contoh tes FizzBizz klasik:

Pilihan untuk tes ini tidak terbatas. Suatu kali, selama wawancara, saya menghadapi ujian seperti itu, setelah itu saya harus memutuskan dua opsi lagi.

Untuk (var i = 1; i<= 100; i++) { if (i % 15 == 0) { console.log("FizzBuzz"); } if (i % 3 == 0) { console.log("Fizz"); } if (i % 5 == 0) { console.log("Buzz"); } }

Perbedaan antara == dan ===

Anda mungkin akrab dengan kedua operator perbandingan. Namun, tahukah Anda bagaimana sebenarnya perbedaan operator-operator ini? Linter Javascript Anda mengharuskan Anda menggunakan operator ===, bertanya-tanya mengapa?

Tidak membandingkan jenis operan, melainkan memaksa mereka ke jenis yang sama. Operasi ini memiliki reputasi negatif.

Console.log (24 == "24"); // benar

Seperti yang Anda lihat, nilai string 24 (dalam tanda kutip tunggal) telah dilemparkan ke tipe integer. Tentu saja, ada situasi ketika ini yang Anda inginkan, tetapi lebih sering daripada tidak, apakah Anda ingin operator perbandingan memanipulasi tipe data. Tidak disarankan untuk membandingkan data menggunakan operator ==, kebanyakan sistem untuk memeriksa gaya kode javascript akan mengarahkan Anda ke kesalahan ini.

=== (perbandingan ketat) membandingkan tipe data tanpa mengubahnya menjadi tipe yang sama, yaitu, data akan dibandingkan apa adanya. Juga, karena operasi ini tidak melibatkan pengecoran tipe, ia bekerja lebih cepat. Jadi, agar operator ini bekerja dengan benar, operator dengan tipe yang sama diperlukan.

Contoh yang sama, tetapi dengan operator ===

Console.log (24 === "24"); // Salah

Sebagai tanggapan, kami mendapatkan false, karena operan memiliki tipe yang berbeda, salah satunya adalah tipe integer, dan yang lainnya adalah tipe string.

Cara memilih elemen DOM tanpa pustaka tambahan

Tentunya Anda sudah familiar dengan cara memilih elemen menggunakan jQuery, tetapi dapatkah Anda melakukan hal yang sama, tetapi tanpa bantuan library ini?

Maksud saya tidak hanya memilih elemen dengan ID tertentu atau satu set kelas, saya berbicara tentang ekspresi untuk menemukan elemen menggunakan jQuery.

Ada beberapa metode asli untuk menemukan elemen di DOM yang sebagus jQuery. Kami juga dapat menggunakan penyeleksi seperti anak pertama, anak terakhir, dll.

Mari kita mengenal beberapa metode ini

• document.getElementById adalah metode klasik untuk menemukan elemen berdasarkan ID-nya.
• document.getElementsByClassName - pemilihan elemen berdasarkan nilai bidang className
• document.querySelector adalah metode hebat yang hampir sepenuhnya menggantikan selektor $() dari jQuery, tetapi sudah termasuk dalam Javascript. Satu-satunya perbedaan adalah bahwa ia hanya mengembalikan item pertama yang ditemukannya.
• document.querySelectorAll mirip dengan metode sebelumnya, tetapi mengembalikan array elemen yang ditemukan.
• document.getElementsByTagName - Metode ini akan membantu Anda memilih elemen berdasarkan nama tag. Jika Anda perlu menemukan semua elemen div, maka ini adalah metode yang Anda butuhkan.

Saya juga ingin mencatat bahwa metode querySelector dan querySelectorAll dapat digunakan tidak hanya pada seluruh dokumen, tetapi juga pada elemen individual, yaitu, Anda dapat membuat pilihan dalam satu elemen induk.

Lihat dokumentasi mozilla untuk deskripsi lengkap tentang metode ini.

Meningkatkan deklarasi variabel dan fungsi

Javascript menarik dalam cara menangani variabel dan fungsi yang dideklarasikan, yang semuanya secara otomatis diangkat ke atas cakupan. Dengan cara ini, Anda dapat merujuknya sebelum mendeklarasikannya dalam ruang lingkup (misalnya, fungsi dalam javascript memiliki ruang lingkupnya sendiri).

Oleh karena itu, untuk keterbacaan kode, buat aturan untuk SELALU mendeklarasikan variabel di awal ruang lingkup. Jika Anda menyertakan 'gunakan ketat' di bagian atas skrip atau fungsi, Anda akan mendapatkan kesalahan saat mengakses variabel yang tidak dideklarasikan.

Sebagian besar alat pemeriksaan gaya kode seperti Jshint akan menunjukkan kepada Anda jika Anda tidak menggunakan 'gunakan ketat', jadi jika Anda mencoba menulis kode yang baik, Anda tidak akan dapat menggunakan variabel sebelum mendeklarasikannya. Seperti biasa, jika Anda memiliki pertanyaan, lihat dokumentasi mozilla untuk deskripsi lengkap dan komprehensif tentang masalah Anda.

Menggunakan alat pengembang di browser

Paling sering, alat tersebut digunakan untuk men-debug skrip javascript, tetapi fungsinya tidak terbatas pada ini. Misalnya, Anda dapat menggunakan breakpoint, menelusuri skrip Anda, masuk ke setiap fungsi secara bersamaan.

Alat-alat ini sangat berharga karena Anda dapat sepenuhnya melacak aplikasi Anda dan menemukan area masalah.

Dengan mempelajari cara menggunakan alat pengembang di peramban seperti Chrome, Firefox, dan Internet Explorer versi terbaru, Anda dapat men-debug skrip, mengukur kinerjanya, dan menemukan tempat untuk meningkatkan algoritme.

Jangan pernah mencoba men-debug kode secara membabi buta, selalu analisis terlebih dahulu dengan alat pengembang. Memecahkan masalah yang tidak ada adalah buang-buang waktu.

Perintah Konsol

Mari beralih ke poin berikutnya dalam menjelajahi alat pengembang. Sebagai aturan, mereka semua menawarkan konsol di mana Anda dapat mengeksekusi kode Javascript secara interaktif.

Tentunya, Anda sudah familiar dengan perintah seperti console.log dan console.error, tetapi fungsi dari konsol tidak terbatas pada ini.

Saya ingin segera mencatat bahwa tidak semua perintah yang terdaftar akan berfungsi di semua browser. Saya akan mencoba menyebutkan hanya yang berfungsi di browser modern. Namun demikian, sebagai tip, saya akan mengatakan bahwa sebelum menggunakannya, cobalah untuk memeriksa kinerjanya sendiri, agar tidak membanjiri kode dengan sia-sia.

• console.log - Digunakan untuk pencatatan peristiwa. Mendukung pemformatan.
• console.error - untuk mencatat kesalahan dalam kode Anda. Saya menggunakan perintah ini ketika saya mendapatkan kesalahan dalam permintaan AJAX dan di bagian kode yang berpotensi berbahaya lainnya. Metode ini mirip dengan yang sebelumnya, tetapi mencantumkan panggilan tumpukan.
• console.dir (objek) - Menampilkan konten objek yang diformat. Sebagai bonus tambahan, metode ini sangat berguna saat men-debug kode.
• console.group (title) - memungkinkan Anda membuat grup pesan di log yang disebut title. Dengan demikian, Anda dapat mengelompokkan pesan, misalnya, menurut bagian kode tempat pesan tersebut dibuat.
• console.groupCollpased mirip dengan perintah sebelumnya dengan satu pengecualian. Yaitu, ini menampilkan pesan yang diminimalkan.
• console.groupEnd - mengakhiri grup yang dibuat sebelumnya.
• console.time (label) - memungkinkan Anda melacak kecepatan bagian dalam milidetik. Metode ini berguna untuk menjebak fragmen kode yang berpotensi sulit.
• console.timeEnd (label) analog dengan metode groupEnd, tetapi bekerja dalam kaitannya dengan console.time ().
• copy (string) - Ada metode di konsol Chrome dan Firefox yang memungkinkan Anda menyalin konten string ke clipboard. Metode yang sangat berguna, cobalah.

Apa sebenarnya yang terkandung dalam ini

Pertama-tama, ini adalah sumber masalah besar bagi mereka yang tidak sepenuhnya memahami apa sebenarnya yang terkandung dalam kata kunci ini. Dan sangat mudah untuk membuat kesalahan dalam hal ini, karena isinya sepenuhnya bergantung pada struktur kode.

Dalam bahasa pemrograman tradisional, ini berisi referensi ke objek kelas saat ini. Tetapi karena javascript jauh dari tradisi, di dalamnya variabel ini mengacu pada objek induk dari metode tersebut.

Cara termudah untuk memahami ini adalah dengan menganggapnya sebagai pemilik atau induk dari metode tersebut. ini selalu merujuk ke induk, kecuali saat Anda menggunakan metode panggilan, penerapan, atau pengikatan.

Dalam contoh berikut, ini merujuk ke objek jendela:

Fungsi myFunction () (console.log (jendela === ini); // true) myFunction ();

Tentunya Anda memiliki pertanyaan, bagaimana ini bisa sama dengan jendela jika kita merujuknya ke dalam suatu metode? Jika Anda tahu jawaban untuk pertanyaan ini, maka bagus, jika tidak, baca terus dan saya akan mencoba menjelaskannya.

Saat Anda mendeklarasikan suatu fungsi dengan cara ini, fungsi itu mengikat ke objek jendela global. Ingat ketika kami mengatakan bahwa ini mengacu pada induk metode?

Mengubah nilai this menjadi objek yang sama sekali baru (bukan jendela):

Fungsi myFunction () (console.log (jendela === ini); // false) myFunction baru ();

Pendukung kebersihan kode mungkin terkejut dengan contoh ini. Kami hanya berjalan di sepanjang puncak gunung es dengan contoh seperti ini. Seperti yang Anda lihat sendiri, nilai this tidak lagi sama dengan window.

Kenapa ini terjadi?

Penjelasan paling sederhana adalah bahwa pada contoh kedua kami menggunakan kata kunci baru, sehingga menciptakan ruang lingkup baru dan objek baru.

Pada contoh berikut, kita akan membuat dummy API untuk mendownload data dari library dari server. Kami akan membuat objek API dengan beberapa metode.

Saat menggunakan kata baru, konteks skrip melompat dari konteks jendela ke API.

Var API = (getData: function() (console.log (window === ini); // false console.log (this === API); // true)); API.getData();

Seperti yang Anda lihat, nilai this sepenuhnya ditentukan oleh cara metode ini dipanggil. Karena fungsi dipanggil di dalam objek API, induknya, nilai this merujuk ke objek API.

Ingat, nilai ini berubah. Itu berubah tergantung pada bagaimana Anda menyebutnya, tetapi jika Anda menggunakan metode bind, nilainya tetap sama.

Anda dapat mempelajari lebih lanjut tentang kata kunci this dalam javascript di artikel Quirksmode dan dokumentasi Mozilla.

'Gunakan ketat';

Seperti yang kami nyatakan sebelumnya, ketat pengguna digunakan untuk menerapkan versi bahasa javascript yang lebih ketat. Arahan ini harus diterapkan di semua skrip.

Secara default, javascript cukup gratis dalam sintaksnya. Dia hanya akan melewati bagian kode yang salah dan mencoba mengeksekusi baris berikutnya tanpa memberi tahu Anda apa pun.

Ada seluruh artikel tentang topik ini di dokumen mozilla, saya sangat menyarankan Anda memeriksanya.

Berbagai jenis siklus

Anda akan terkejut, tetapi saya telah bertemu dengan sejumlah besar pengembang yang tidak tahu cara menggunakan for loop dengan benar dan sama sekali tidak pernah mendengar jenis loop lainnya. Dan kemampuan untuk mengulang array atau objek adalah keterampilan yang sangat penting bagi seorang pengembang. Tidak ada instruksi yang jelas tentang kapan dan jenis siklus apa yang digunakan, tetapi Anda harus dipandu dalam hal ini. Anda mungkin akrab dengan for and while, tetapi bagaimana dengan orang lain?

Daftar loop dalam javascript:

• untuk..di
• for..of (ditambahkan dalam ES6)
• untuk setiap
• ketika
• lakukan..sementara

Untuk lingkaran

Siklus yang mutlak wajib yang perlu Anda ketahui dan pahami. OH memenuhi tubuhnya ketika kondisi 2 terpenuhi.

Untuk (kondisi 1; kondisi 2; kondisi 3) (// Kode Anda)

Kondisi 1 - dieksekusi sekali sebelum dimulainya serangkaian siklus. Dalam kebanyakan kasus, Anda akan menginisialisasi penghitung loop di sini. Item ini dapat dilewati jika Anda telah menginisialisasi sebelumnya.

Kondisi 2 - Kondisi ini diterapkan untuk menentukan apakah akan melanjutkan siklus atau tidak. Anda mungkin akan membandingkan penghitung Anda dengan ukuran array di sini. Jika perbandingannya benar, maka loop berlanjut. Jika Anda menginterupsi loop secara internal dengan break, maka kondisi ini dapat dilewati.

Kondisi 3 - bagian ini dijalankan setelah setiap iterasi, sebagai aturan, di sinilah Anda meningkatkan penghitung Anda.

Untuk ... dalam lingkaran

Jenis loop terpenting berikutnya. Dengan itu, Anda akan dapat berjalan melalui semua bidang kelas.

Mari kita beri contoh.

Var person = (Namadepan: "Dwayne", Nama Belakang: "Charrington", umur: 27, starSign: "Aquarius"); // Perulangan di bawah ini akan menampilkan: // "Dwayne" // "Charrington" // 27 // "Aquarius" for (var p in person) (if (person.hasOwnProperty (p)) (console.log (person [ P]);))

Untuk ... dari lingkaran

Jenis loop yang cukup baru telah ditambahkan di ES6. Karena kebaruannya, itu tidak didukung oleh semua browser. Namun dengan penggunaan teknologi tertentu, sangat memungkinkan untuk diterapkan saat ini.

Loop ini adalah kebalikan dari for ... in, iterasi pada nilai bidang dan hanya bekerja pada tipe data yang mendukung iterasi, sedangkan Object tidak.

Var buah = ["jeruk", "apel", "labu", "pir"]; for (var buah buah) (console.log (buah);)

Kelebihan besar dari jenis loop ini adalah kita tidak perlu lagi membuat pointer dan melacak panjang array untuk menelusuri elemen-elemennya sepenuhnya.

Untuk Setiap loop

Jenis siklus lain, yang kedalamannya tidak berbeda dengan jenis siklus yang disebutkan sebelumnya.

Ini hanya berfungsi dengan array, bukan objek. Keuntungannya adalah Anda tidak perlu membuat variabel tambahan, yang pada akhirnya hanya mencemari kode Anda. \

Ini mungkin jenis loop yang paling terbatas, tetapi memiliki area aplikasinya sendiri yang harus Anda ketahui:

Var buah = ["apel", "pisang", "jeruk", "anggur", "pir", "markisa"]; // Tiga nilai pada fungsi callback adalah: // elemen - Elemen yang dilintasi // indeks - Indeks saat ini dari item dalam larik mulai dari 0 // larik - Larik yang dilintasi (mungkin sebagian besar tidak relevan) buah-buahan.forEach (fungsi (elemen, indeks, array) (console.log (indeks, elemen);));

Terkadang Anda hanya perlu menelusuri semua elemen array dan mungkin membuat beberapa perubahan pada mereka. Perilakunya mirip dengan jQuery.each.

Salah satu kelemahan dari loop jenis ini adalah tidak dapat diinterupsi. Jika Anda perlu membuat loop ES5, gunakan metode Array.every, yang dapat Anda pelajari di dokumentasi mozilla.

loop sementara

Perulangan while mirip dengan for, tetapi hanya membutuhkan satu parameter - kondisi itu sendiri, di mana perulangan menentukan apakah akan melanjutkan iterasi atau menghentikannya.

Meskipun jenis siklus ini dianggap yang tercepat, saya menemukan poin ini cukup kontroversial. Saya pikir Anda tidak akan membantah bahwa jenis loop ini tidak terlihat lebih rapi daripada yang lain, dan kecepatannya hanya dapat dijelaskan oleh kesederhanaan logika internal.

Dari pengalaman saya akan mengatakan bahwa varian tercepat dari while loop adalah loop dengan pengurangan penghitung, Anda menguranginya satu hingga Anda mencapai nol (yang juga bisa diperdebatkan).

Vari = 20; while (i--) (console.log (i);)

Do ... while loop while

Siklus seperti itu cukup langka, tetapi masih layak untuk diketahui untuk memahami pekerjaannya.

Perulangan while mungkin tidak menyelesaikan iterasi apa pun. Artinya, jika Anda memberikan nilai salah sebagai kondisi ke loop, maka tidak ada iterasi yang akan dilakukan. Do ... while loop dijamin untuk melakukan setidaknya satu operasi.

Perbedaan tidak berakhir di situ. Perulangan while memproses kondisi sebelum iterasi, dan perulangan do ... while setelahnya.

Seperti biasa, lihat dokumentasi mozilla untuk penjelasan rinci tentang perulangan semacam ini.

Metode dan tugas dasar

Ada metode dasar dalam javascript yang harus diperhatikan. Berkenaan dengan bekerja dengan array dan string, javascript menawarkan satu set besar metode built-in. Kami hanya akan menyentuh array dan string, meninggalkan objek untuk nanti.

Jika Anda tertarik dengan metode bekerja dengan tipe data lain, silakan merujuk ke dokumentasi mozilla. Tentu saja, Anda tidak boleh hafal semua metode ini, saya hanya akan menjelaskan yang saya anggap perlu.

Bekerja dengan string

Dalam javascript, Anda akan paling sering bekerja dengan data string, dengan kemungkinan pengecualian array dan objek. Bahkan jika Anda tidak bekerja dengan string, atau berpikir bahwa Anda tidak bekerja, masih ada baiknya untuk mengetahui metode ini.

• String.replace (regexp | apa yang harus diganti, apa yang harus diganti, panggilan balik) - memungkinkan Anda untuk mengganti bagian dari string, ekspresi reguler diperbolehkan.
• String.concat (baris 1, baris 2 ...) - penggabungan beberapa baris menjadi satu.
• String.indexOf (nilai) - metode ini memungkinkan Anda menemukan nomor urut karakter dari bagian string yang diinginkan, -1 - jika string tidak ditemukan
• String.slice (startIndex, endIndex) - mengembalikan segmen string dari startIndex ke endIndex
• String.split (delimiter, limit) - membagi string menjadi array dengan karakter pembatas, batas panjang maksimum.
• String.subsctr (startIndex, length) - mengembalikan bagian dari string yang dimulai dari startIndex dengan panjang panjang.
• String.toLowerCase - Mengonversi semua karakter dalam string menjadi huruf kecil
• String.toUpperCase - mengonversi semua karakter dalam string menjadi huruf besar
• String.trim - menghapus spasi dari awal dan akhir string

Bekerja dengan array

Anda akan sering menemukan array. Mereka telah terbukti menjadi cara yang bagus untuk menyimpan data. Metode ini pasti patut diketahui untuk pengembang javascript mana pun, Anda tidak boleh mencarinya di google.

• Array.pop - Mengembalikan elemen terakhir dan menghapusnya dari array.
• Array.shift - Mengembalikan elemen pertama dan menghapusnya dari array.
• Array.push (val1, val2) - menambahkan satu atau lebih nilai ke akhir array. Mengembalikan panjang array yang baru.
• Array.reverse - membalik urutan elemen array.
• Array.sort ([CompareFunction]) - memungkinkan Anda untuk mengurutkan array menggunakan fungsi Anda sendiri.
• Array.join (separator) - Mengembalikan string elemen array yang dipisahkan oleh pemisah (koma secara default).
• Array.indexOf (nilai) - Mengembalikan indeks elemen dalam array, -1 jika elemen tidak ditemukan.

Ini bukan daftar lengkap metode untuk bekerja dengan array. Untuk yang lain, lihat dokumentasi mozilla. Metode yang sangat menarik telah ditambahkan sejak ES6.

Perbedaan antara menelepon dan melamar

Kedua metode ini sering dibingungkan oleh pengembang. Anda sering dapat melakukannya tanpa mereka, tetapi mereka membantu Anda memanggil metode dan mengubah nilai ini saat runtime.

Perbedaan di antara mereka sangat kecil, tetapi itu ada. Saat menggunakan metode panggilan, Anda dapat memberikan argumen dalam jumlah tak terbatas, dipisahkan dengan koma.

Dengan metode apply, Anda dapat meneruskan argumen sebagai array dan mengubah nilainya.

Jika Anda hanya perlu meneruskan array sebagai argumen ke suatu metode, operator spread telah ditambahkan sejak ES6. Itu tidak memungkinkan mengubah nilai ini. Anda dapat membiasakan diri dengannya, seperti biasa dalam dokumentasi resmi dari mozilla.

Contoh panggilan:

Fungsi myFunc () (console.log (argumen);) myFunc.call (ini, 1, 2, 3, 4, 5);

Contoh berlaku:

Fungsi myFunc () (console.log (argumen);) myFunc.call (null,);

Keakraban dengan perpustakaan dan kerangka kerja

Kerangka kerja javascript yang paling menonjol saat ini adalah AngularJS, React.js, dan Ember. Tentu saja, ada sejumlah lainnya.

Saat aplikasi web menjadi lebih besar dan lebih besar, perpustakaan ini membuatnya lebih mudah untuk bekerja dengannya. Perlu dipahami bahwa mengetahui jQuery saja jelas tidak cukup sekarang. Di sebagian besar lowongan, pengetahuan tentang pustaka javascript tambahan dipamerkan sebagai persyaratan dasar.

Node.js

Node.js berada dalam posisi yang solid tanpa keraguan. Hampir semua alat front-end dibangun di atas node.js dan menggunakan npm (pengelola paket node), jika Anda tidak terbiasa dengannya, saya sangat menyarankan Anda untuk memperbaiki kelalaian ini. Karena node.js menggunakan javascript, mempelajarinya tidak terlalu sulit bagi mereka yang sudah terbiasa dengan bahasa ini. Anda akan membutuhkan lebih banyak waktu untuk mengonfigurasi paket node daripada menulis kode yang sebenarnya.

Secara pribadi, saya pikir setiap pengembang di tahun 2015 harus akrab dengan Node.js. Saya tidak berbicara tentang pengetahuan yang mendalam, cukup untuk dapat menerapkannya untuk pengembangan server, pembuatan prototipe, pengujian, dll.

Ada garpu node.js yang disebut IO.js, hari ini mereka praktis analog, dan pada akhirnya Anda hanya menulis dalam Javascript dengan pengecualian perbedaan kecil.

Pengujian

Sekali waktu, kami tidak menguji kode javascript sama sekali, karena kami tidak menganggapnya perlu. Tetapi skrip menjadi semakin besar berkat AngularJS dan Node.js.

Javascript berkembang, dan volume skrip meningkat, dan pengujian menjadi penting. Jika Anda tidak menguji kode Anda, maka Anda melakukan hal yang salah. Penguji favorit saya adalah Karma. Ada yang lain, tetapi yang ini telah membuktikan dirinya yang terbaik saat bekerja dengan AngularJS. Dan jika itu berfungsi untuk AngularJS, maka itu juga berfungsi untuk saya.

Peralatan

Menjadi pengembang javascript pada tahun 2015 berarti tidak hanya pengetahuan bahasa yang sangat baik, tetapi juga sejumlah besar alat untuk bekerja dengannya.

Terkadang alat tersebut menyertakan browser itu sendiri yang kita gunakan. Dan terkadang Anda harus beralih ke alat pihak ketiga untuk mendapatkan analisis situasi yang lebih dalam.

Berikut adalah sekumpulan alat yang perlu diingat: Gulp, Webpack, dan BabelJS. Ada lebih banyak alat di luar sana, tetapi alat seperti Gulp dan Grunt banyak membantu Anda dalam mengembangkan dan mengelola aplikasi javascript.

Lewatlah sudah hari-hari ketika Anda baru saja mengunduh file javascript dan menambahkannya ke halaman Anda. Kami sekarang menggunakan manajer paket NPM atau Bower.

Kami menggabungkan dan memperkecil skrip, mengujinya, yang membantu mengatur struktur proyek.

Alat Javascript berjalan seiring ketika mengembangkan Javascript isomorfik (kode yang digunakan pada sisi klien dan server). ECMAScript 6, alias ES6, alias ESNext

Browser belum menerapkan sebagian besar fungsi ECMAScript 6. Namun hari ini Anda dapat menggunakan inovasi ES6 dengan kompiler javascript. Kenali API dan metode baru: string, array, dan metode lain seperti WeakMaps, Simbol, dan Kelas. Anda harus selalu waspada terhadap perubahan yang akan datang.

Kesimpulan

Saya dapat memberi tahu Anda lebih banyak. Dilihat dari ukuran artikel ini, Anda dapat membayangkan berapa banyak yang perlu diketahui oleh pengembang javascript. Kami baru saja menyentuh puncak gunung es. Jangan merasa ingin membaca artikel ini sebagai panduan pengembang. Ini hanya pandangan pribadi saya tentang masalah ini.