Pengantar
Metode larik filter[]
membuat larik baru bersama elemen yang termasuk dalam kriteria yang ditentukan dari larik yang ada:
var numbers = [1, 3, 6, 8, 11];
var lucky = numbers.filter[function[number] {
return number > 7;
}];
// [ 8, 11 ]
Contoh di atas mengambil larik numbers
dan mengembalikan larik terfilter yang baru bersama nilai-nilai yang lebih besar dari tujuh saja.
Sintaks filter
var newArray = array.filter[function[item] {
return condition;
}];
Argumen item adalah referensi ke elemen saat ini di larik karena filter[] memeriksanya terhadap condition. Ini berguna untuk mengakses properti, dalam hal objek.
Jika item saat ini menyalurkan syarat, ia akan dikirim ke larik baru.
Menyaring larik objek
Kasus penggunaan umum .filter[] adalah bersama larik objek melalui propertinya:
var heroes = [
{name: “Batman”, franchise: “DC”},
{name: “Ironman”, franchise: “Marvel”},
{name: “Thor”, franchise: “Marvel”},
{name: “Superman”, franchise: “DC”}
];
var marvelHeroes = heroes.filter[function[hero] {
return hero.franchise == “Marvel”;
}];
// [ {name: “Ironman”, franchise: “Marvel”}, {name: “Thor”, franchise: “Marvel”} ]
Sumber Daya Tambahan
Untuk detail selengkapnya tentang filter[]
lihat
Referensi MDN.
Filter hanya salah satu dari beberapa metode iterasi terhadap Larik di JavaScript, bacalah Cara Menggunakan Metode Iterasi Larik di JavaScript untuk mempelajari tentang metode lain seperti map[]
dan
reduce[]
.
Want to learn more? Join the DigitalOcean Community!
Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.
Sign up
Indonesian [Bahasa Indonesia] translation by Zadip [you can also view the original English article]
Sejauh ini kita telah membangun halaman HTML konkret dan menerapkan beberapa gaya. Tutorial ini akan fokus pada menambah interaktivitas ke situs melalui JavaScript. Kami akan membaginya menjadi dua bagian:
- Tambahkan plugin dan menyiapkan ruang kerja
- Inisialisasi plugin dan menyesuaikanya untuk kita gunakan
Plugin Overview
Ada banyak plugin jquery yang dapat kita gunakan untuk tutorial ini, tetapi kita akan tetap memakai dibawah ini:
Isotope
Filter & mengurutkan magical layout
Perpustakaan ini besar dan kuat, tetapi masih memerlukan beberapa keterampilan pemrograman yang baik untuk menggunakan. Memiliki dukungan untuk berbagai jenis layout, untuk filtering dan sorting.
Scrollreveal
Mudah memperlihatkan elemen saat mereka memasuki viewport.
Saya memilih Perpustakaan ini karena memiliki dukungan untuk scrolling ke bawah dan ke atas. Dengan menampakkan elemen setiap kali mereka terlihat di viewport Anda dan sangat mudah untuk diterapkan.
SinglePageNav
Sebuah plugin jQuery yang menyediakan scrolling yang halus dan navigasi canggih untuk satu halaman website.
FancyBox
fancyBox adalah alat yang menawarkan cara yang menyenangkan dan elegan untuk menambah zoomimg fungsionalitas untuk gambar, konten html dan multi media pada halaman web Anda. Hal ini dibangun di atas kerangka JavaScript populer jQuery dan keduanya mudah untuk menerapkan dan dengan snap untuk menyesuaikan.
JQuery
Menyiapkan ruang kerja
Setelah menemukan plugin yang diperlukan untuk website kita, sekarang saatnya untuk men-download dan referensinya dalam index.html
kami seperti ini:
Seperti yang Anda lihat, saya mendownloadnya ke folder baru disebu js
karena cara ini sangat mudah untuk menjaga dan mengatur filenya.
Scripts.js
file adalah sebuah file kosong
untuk saat ini. Kita akan menggunakannya untuk menulis extra JavaScript dan menginisialisasi plugin.
Sekarang segala sesuatu sudah disiapkan mari kita pindah ke bagian berikutnya, dimana kita akan bermain dengan masing-masing plugin.
Menulis skrip
Hal pertama yang perlu Anda pelajari ketika menulis jQuery
adalah $[document].ready[function[]{}];
. hal ini akan menjalankan segala sesuatu di dalam fungsi setelah DOM
dimuat. Anda dapat membaca lebih lanjut tentang hal itu ketika
belajar jquery.
Saya sangat suka menjaga kode saya bersih, jadi itu sebabnya Anda akan sering melihat saya menyimpan penyeleksi dalam variabel [seperti yang Anda lihat di bawah], memakai dua ruang untuk indentasi dan pedoman di 80 karakter.
Hero Section
Hero Section kami idealnya memiliki window.height
, penuh secara efektif-tinggi. Hal ini dapat
melalui CSS unit vh namun karena tidak semua browser mendukung unit ini, kita akan tetap untuk JavaScript.
Untuk mendapatkan ketinggian window, kita akan menggunakan window.innerHeight yang meng-output tinggi viewport
di px
.
// =Hero // Alway make hero-container height equal to window height var $heroContainer = $['.hero']; $heroContainer.height[window.innerHeight];
Di sini kita menerapkan
ketinggian viewport untuk heroContainer
, tetapi kita juga perlu untuk memastikan bahwa setiap kali pengguna mengubah ukuran browser, kita akan mengajukan permohonan kembali viewport ketinggian untuk heroContainer
. Kode berikut akan mendengarkan window mengubah ukuran dan akan mengubah ketinggian heroContainer
dengan cepat:
// When user resize browser window, hero container needs to have the same // height as browser window height. $[window].resize[function[] { $heroContainer.height[window.innerHeight]; }];
Menyimpan penyeleksi dalam variabel membuat mereka mudah untuk mempertahankan dan penggunaan kembali. Anda harus memiliki sesuatu seperti ini:
// =Hero // Alway make hero-container height equal to window height var $heroContainer = $['.hero']; $heroContainer.height[window.innerHeight]; // When user resize browser window, hero container needs to have the same // height as browser window height. $[window].resize[function[] { $heroContainer.height[window.innerHeight]; }];
Menu
Pertama
dari yang pertama, mari kita menyimpan penyeleksi yang akan kita gunakan dalam variabel. Untuk saat ini, kita perlu menuIcon
, navigasi
, mainNavigation
dan navigationLink
. Variabel yang akan terlihat seperti ini:
var $menuIcon = $['.menu-icon'], $navigation = $['.navigation'], $mainNavigation = $['.main-navigation'], $navigationLink = $['.main-navigation a'];
Ketika kita memiliki beberapa Deklarasi variabel, tidak perlu untuk mengulang var
, Anda dapat memisahkan koma variabel.
Mari kita lampirkan event klik pada menuIcon
yang harus menambah nama kelas aktif
menjadi mainNavigation
. Kelas aktif
di
mainNavigation
yang ditata dalam CSS kita dan membuatnya terlihat.
$menuIcon.click[function[e] { e.preventDefault[]; $navigation.toggleClass['active']; }];
Mari kita sekarang menggunakan SingleNavPage
plugin dan initiliaze dalam mainNavigation
pemilih seperti ini:
$mainNavigation.singlePageNav[{ filter: ':not[.external]', speed: 1000, currentClass: 'current', easing: 'swing', updateHash: false, beforeStart: function[] { }, onComplete: function[] { $navigation.removeClass['active']; } }];
Di sini saya juga menambahkan scroll listener yang akan menambahkan kelas yang berbeda ke menuItem
jika pengguna menggulir lebih dari ketinggian viewport. Saya memeriksa apakah window.scrollY
lebih besar dari window.innerHeight
[ketinggian viewport] Saya mengganti kelas active
untuk menuItem
$[window].scroll[function[] { if[window.scrollY > window.innerHeight] { $menuIcon.addClass['active']; } else { $menuIcon.removeClass['active']; } }];
Seluruh kode untuk menu sekarang terlihat seperti ini:
// Menu initialization var $menuIcon = $['.menu-icon'], $navigation = $['.navigation'], $mainNavigation = $['.main-navigation'], $navigationLink = $['.main-navigation a']; $[window].scroll[function[] { if[window.scrollY > window.outerHeight] { $menuIcon.addClass['active']; } else { $menuIcon.removeClass['active']; } }]; $menuIcon.click[function[e] { e.preventDefault[]; $navigation.toggleClass['active']; }]; $mainNavigation.singlePageNav[{ filter: ':not[.external]', speed: 1000, currentClass: 'current', easing: 'swing', updateHash: false, beforeStart: function[] { }, onComplete: function[] { $navigation.removeClass['active']; } }];
Scrollreveal
Inisialisasi untuk ScrollReveal
cukup sederhana tetapi saya menambahkan sedikit konfigurasinya. Jika Anda ingin mengetahui lebih tentang penggunaan ini dan lebih banyak opsi konfigurasi, Anda harus memeriksa pada proyek Github. Kode untuk inisialisasi scrollreveal sebagai berikut:
// Scrollreveal initialize var config = { easing: 'hustle', reset: false, delay: 'onload', opacity: .2, vFactor: 0.2, mobile: false } window.sr = new scrollReveal[config];
Pekerjaan
Dalam kasus ini, script apa yang akan kita kerjakan? Ada tiga hal besar:
- mengubah daftar kerja menjadi isotop layout
- menyaring item
- menambahkan kelas
aktif
untuk opsi filter aktif
Kita akan mulai dengan menyimpan variabel yang diperlukan untuk plugin ini. JavaScript var $workFilterLinks = $[' Osrec-filter Li'], $container = $[' Osrec-item];
Hal berikutnya adalah untuk melampirkan handler klik untuk setiap link filter. Hal ini akan menghapus kelas aktif
dari semua filter dan menambahkannya ke item yang diklik.
$workFilterLinks.find['a'].click[function[]{ $workFilterLinks.removeClass['active']; $[this].parent[].addClass['active']; return false; }];
Dalam fungsi
panggilan balik klik, kami akan menargetkan contrainer
dan membuat sebuah instance isotop dengan filter dan tata letak mode sebagai pilihan.
$container.isotope[{ // options filter: $[this].attr['data-filter'], itemSelector: '.isotope-item', animationEngine : "best-available", masonry: { columnWidth: '.isotope-item' } }];
Ini akan menyaring item isotop dengan atribut data-filter
filter itu dan akan menambah tata letak masonry
untuk bagian kerja.
Kode untuk bagian kerja kami sekarang harusnya terlihat seperti ini:
// =Work // Isotope filters var $workFilterLinks = $['.work-filters li'], $container = $['.work-items']; $workFilterLinks.find['a'].click[function[]{ $workFilterLinks.removeClass['active']; $container.isotope[{ // options filter: $[this].attr['data-filter'], itemSelector: '.isotope-item', animationEngine : "best-available", masonry: { columnWidth: '.isotope-item' } }]; $[this].parent[].addClass['active']; return false; }];
Fancybox
Plugin terakhir yang kita akan gunakan adalah Fancybox
. Plugin ini akan dilampirkan ke tombol play
dari bagian
video.
// Fancybox $['.video-play'].fancybox[{ width : '100%', closeClick : false }];
Setelah menulis bagian JavaScript, seharusnya code akan terlihat seperti ini:
$[document].ready[function[]{ // =Hero // Alway make hero-container height equal to window height var $heroContainer = $['.hero']; $heroContainer.height[window.innerHeight]; // When user resize browser window, hero container needs to have the same // height as browser window height. $[window].resize[function[] { $heroContainer.height[window.innerHeight]; }]; // =Work // Isotope filters var $workFilterLinks = $['.work-filters li'], $container = $['.work-items']; $workFilterLinks.find['a'].click[function[]{ $workFilterLinks.removeClass['active']; $container.isotope[{ // options filter: $[this].attr['data-filter'], itemSelector: '.isotope-item', animationEngine : "best-available", masonry: { columnWidth: '.isotope-item' } }]; $[this].parent[].addClass['active']; return false; }]; // Menu initialization var $menuIcon = $['.menu-icon'], $navigation = $['.navigation'], $mainNavigation = $['.main-navigation'], $navigationLink = $['.main-navigation a']; $[window].scroll[function[] { if[window.scrollY > window.outerHeight] { $menuIcon.addClass['active']; } else { $menuIcon.removeClass['active']; } }]; $menuIcon.click[function[e] { e.preventDefault[]; $navigation.toggleClass['active']; }]; $mainNavigation.singlePageNav[{ filter: ':not[.external]', speed: 1000, currentClass: 'current', easing: 'swing', updateHash: false, beforeStart: function[] { }, onComplete: function[] { $navigation.removeClass['active']; } }]; // Scrollreveal initialize var config = { easing: 'hustle', reset: false, delay: 'onload', opacity: .2, vFactor: 0.2, mobile: false } window.sr = new scrollReveal[ config ]; // Fancybox $[".video-play"].fancybox[{ closeClick : false, }]; }];
Pemikiran Akhir
Dan kita sudah selesai! Lihatlah apa yang telah kita buat!
Saya berharap bahwa Anda menikmati seri ini dan Anda belajar banyak hal-hal baru. Selama proses ini saya membagikan beberapa teknik yang saya gunakan setiap hari dan saya harap Anda akan menerapkannya dan membagikannya.
Saya ingin melihat apa yang telah Anda kodekan sejauh ini - bagikan kepada kami apa pun yang Anda buat menggunakan beberapa teknik ini!