Cara menggunakan javascript hero

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!