Apakah javascript rendah atau tinggi

JavaScript adalah bahasa scripting atau pemrograman yang memungkinkan Anda menerapkan fitur kompleks pada halaman web — setiap kali halaman web melakukan lebih dari sekadar duduk di sana dan menampilkan informasi statis untuk Anda lihat — menampilkan pembaruan konten tepat waktu, peta interaktif, animasi 2D/ . — Anda bisa bertaruh bahwa JavaScript mungkin terlibat. Ini adalah lapisan ketiga dari kue lapis teknologi web standar, dua di antaranya (HTML dan CSS) telah kami bahas lebih detail di bagian lain Area Pembelajaran

• HTML adalah bahasa markup yang kami gunakan untuk menyusun dan memberi makna pada konten web kami, misalnya mendefinisikan paragraf, judul, dan tabel data, atau menyematkan gambar dan video di halaman
• CSS adalah bahasa aturan gaya yang kami gunakan untuk menerapkan gaya pada konten HTML kami, misalnya mengatur warna dan font latar belakang, dan menata konten kami dalam beberapa kolom
• JavaScript adalah bahasa skrip yang memungkinkan Anda membuat konten yang diperbarui secara dinamis, mengontrol multimedia, menganimasikan gambar, dan hampir semua hal lainnya. (Oke, tidak semuanya, tapi menakjubkan apa yang bisa Anda capai dengan beberapa baris kode JavaScript. )

Tiga lapisan dibangun di atas satu sama lain dengan baik. Mari kita ambil label teks sederhana sebagai contoh. Kita dapat menandainya menggunakan HTML untuk memberikan struktur dan tujuan

<p>Player 1: Chrisp>

Kemudian kita dapat menambahkan beberapa CSS ke dalam campuran agar terlihat bagus

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

Dan terakhir, kita dapat menambahkan beberapa JavaScript untuk mengimplementasikan perilaku dinamis

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

Coba klik label teks versi terakhir ini untuk melihat apa yang terjadi (perhatikan juga bahwa Anda dapat menemukan demo ini di GitHub — lihat kode sumbernya, atau jalankan langsung)

JavaScript dapat melakukan lebih dari itu — mari kita jelajahi lebih detail

Bahasa JavaScript sisi-klien inti terdiri dari beberapa fitur pemrograman umum yang memungkinkan Anda melakukan hal-hal seperti

• Menyimpan nilai yang berguna di dalam variabel. Dalam contoh di atas misalnya, kami meminta nama baru untuk dimasukkan kemudian menyimpan nama itu dalam variabel bernama

  p {
    font-family: "helvetica neue", helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0, 0, 200, 0.6);
    background: rgba(0, 0, 200, 0.3);
    color: rgba(0, 0, 200, 0.6);
    box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
  }
  

  8
• Operasi pada potongan teks (dikenal sebagai "string" dalam pemrograman). Dalam contoh di atas kita mengambil string "Player 1. " dan gabungkan ke variabel

  p {
    font-family: "helvetica neue", helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0, 0, 200, 0.6);
    background: rgba(0, 0, 200, 0.3);
    color: rgba(0, 0, 200, 0.6);
    box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
  }
  

  _8 untuk membuat label teks lengkap, mis. g. "Pemain 1. Chris"
• Menjalankan kode sebagai respons terhadap peristiwa tertentu yang terjadi di halaman web. Kami menggunakan peristiwa

  const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  _0 dalam contoh kami di atas untuk mendeteksi kapan label diklik dan kemudian menjalankan kode yang memperbarui label teks
• Dan banyak lagi

Namun yang lebih menarik adalah fungsionalitas yang dibangun di atas bahasa JavaScript sisi klien. Apa yang disebut Antarmuka Pemrograman Aplikasi (API) memberi Anda kekuatan super ekstra untuk digunakan dalam kode JavaScript Anda

API adalah kumpulan blok bangunan kode siap pakai yang memungkinkan pengembang untuk mengimplementasikan program yang sulit atau tidak mungkin untuk diimplementasikan. Mereka melakukan hal yang sama untuk pemrograman yang dilakukan kit furnitur siap pakai untuk pembangunan rumah - jauh lebih mudah untuk mengambil panel yang sudah jadi dan mengencangkannya untuk membuat rak buku daripada mengerjakan desainnya sendiri, pergi dan temukan

Mereka umumnya terbagi dalam dua kategori

API Peramban dibangun ke dalam peramban web Anda, dan dapat memaparkan data dari lingkungan komputer di sekitarnya, atau melakukan hal-hal rumit yang bermanfaat. Sebagai contoh

• const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  _1 memungkinkan Anda memanipulasi HTML dan CSS, membuat, menghapus, dan mengubah HTML, menerapkan gaya baru secara dinamis ke halaman Anda, dll. Setiap kali Anda melihat jendela munculan muncul di halaman, atau beberapa konten baru ditampilkan (seperti yang kita lihat di atas dalam demo sederhana kami), misalnya, itulah DOM yang sedang beraksi

• const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  _2 mengambil informasi geografis. Beginilah cara Google Maps dapat menemukan lokasi Anda dan memplotnya di peta

• const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  _3 dan

  const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  4 API memungkinkan Anda membuat grafik animasi 2D dan 3D. Orang-orang melakukan beberapa hal luar biasa menggunakan teknologi web ini — lihat Eksperimen Chrome dan contoh webgl
• API Audio dan Video seperti

  const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  _5 dan

  const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  6 memungkinkan Anda melakukan hal yang sangat menarik dengan multimedia, seperti memutar audio dan video langsung di halaman web, atau mengambil video dari kamera web Anda dan menampilkannya di komputer orang lain (coba demo Snapshot sederhana kami

Catatan. Banyak dari demo di atas tidak akan berfungsi di browser lama — saat bereksperimen, sebaiknya gunakan browser modern seperti Firefox, Chrome, Edge, atau Opera untuk menjalankan kode Anda. Anda perlu mempertimbangkan pengujian lintas browser secara lebih mendetail saat Anda semakin dekat untuk mengirimkan kode produksi (mis. e. kode nyata yang akan digunakan pelanggan nyata)

API pihak ketiga tidak dibangun ke dalam browser secara default, dan biasanya Anda harus mengambil kode dan informasinya dari suatu tempat di Web. Sebagai contoh

• API Twitter memungkinkan Anda melakukan hal-hal seperti menampilkan tweet terbaru di situs web Anda
• Google Maps API dan OpenStreetMap API memungkinkan Anda untuk menyematkan peta khusus ke dalam situs web Anda, dan fungsi serupa lainnya

Catatan. API ini canggih, dan kami tidak akan membahasnya dalam modul ini. Anda dapat mengetahui lebih banyak tentang ini di modul API web sisi klien kami

Masih banyak lagi yang tersedia. Namun, jangan terlalu bersemangat dulu. Anda tidak akan dapat membuat Facebook, Google Maps, atau Instagram berikutnya setelah mempelajari JavaScript selama 24 jam — ada banyak dasar yang harus dibahas terlebih dahulu. Dan itulah mengapa Anda ada di sini - mari kita lanjutkan

Di sini kita akan benar-benar mulai melihat beberapa kode, dan saat melakukannya, jelajahi apa yang sebenarnya terjadi saat Anda menjalankan beberapa JavaScript di halaman Anda

Mari rekap secara singkat cerita tentang apa yang terjadi saat Anda memuat halaman web di browser (pertama kali dibicarakan di artikel kami). Saat Anda memuat halaman web di browser, Anda menjalankan kode Anda (HTML, CSS, dan JavaScript) di dalam lingkungan eksekusi (tab browser). Ini seperti pabrik yang mengambil bahan mentah (kode) dan mengeluarkan produk (halaman web)

Penggunaan JavaScript yang sangat umum adalah untuk memodifikasi HTML dan CSS secara dinamis untuk memperbarui antarmuka pengguna, melalui Document Object Model API (seperti yang disebutkan di atas). Perhatikan bahwa kode di dokumen web Anda biasanya dimuat dan dieksekusi sesuai urutan kemunculannya di halaman. Kesalahan dapat terjadi jika JavaScript dimuat dan dijalankan sebelum HTML dan CSS yang ingin diubah. Anda akan mempelajari cara menyiasatinya nanti di artikel, di bagian ini

Setiap tab browser memiliki bucket terpisah untuk menjalankan kode (bucket ini disebut "lingkungan eksekusi" dalam istilah teknis) — ini berarti bahwa dalam banyak kasus, kode di setiap tab dijalankan sepenuhnya secara terpisah, dan kode di satu tab tidak dapat secara langsung . Ini adalah ukuran keamanan yang baik — jika tidak demikian, maka pembajak dapat mulai menulis kode untuk mencuri informasi dari situs web lain, dan hal-hal buruk lainnya.

Catatan. Ada cara untuk mengirim kode dan data antar situs web/tab yang berbeda dengan cara yang aman, tetapi ini adalah teknik tingkat lanjut yang tidak akan kami bahas dalam kursus ini

Saat browser menemukan blok JavaScript, browser biasanya menjalankannya secara berurutan, dari atas ke bawah. Ini berarti bahwa Anda harus berhati-hati dalam urutan apa yang Anda masukkan. Sebagai contoh, mari kembali ke blok JavaScript yang kita lihat di contoh pertama kita

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

Di sini kita memilih paragraf teks (baris 1), lalu melampirkan pendengar acara ke dalamnya (baris 3) sehingga ketika paragraf diklik, blok kode

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

Jika Anda menukar urutan dari dua baris kode pertama, itu tidak akan berfungsi lagi — sebagai gantinya, Anda akan mendapatkan kesalahan yang dikembalikan di konsol pengembang browser —

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

Catatan. Ini adalah kesalahan yang sangat umum — Anda harus berhati-hati karena objek yang direferensikan dalam kode Anda ada sebelum Anda mencoba melakukan sesuatu padanya

Anda mungkin mendengar istilah yang ditafsirkan dan disusun dalam konteks pemrograman. Dalam bahasa yang ditafsirkan, kode dijalankan dari atas ke bawah dan hasil menjalankan kode segera dikembalikan. Anda tidak perlu mengubah kode menjadi bentuk lain sebelum browser menjalankannya. Kode diterima dalam bentuk teks yang ramah pemrogram dan diproses langsung dari situ

Sebaliknya, bahasa yang dikompilasi diubah (dikompilasi) menjadi bentuk lain sebelum dijalankan oleh komputer. Misalnya, C/C++ dikompilasi menjadi kode mesin yang kemudian dijalankan oleh komputer. Program dijalankan dari format biner, yang dihasilkan dari kode sumber program asli

JavaScript adalah bahasa pemrograman yang ditafsirkan ringan. Peramban web menerima kode JavaScript dalam bentuk teks aslinya dan menjalankan skrip dari sana. Dari sudut pandang teknis, sebagian besar penerjemah JavaScript modern benar-benar menggunakan teknik yang disebut kompilasi just-in-time untuk meningkatkan kinerja; . Namun, JavaScript masih dianggap sebagai bahasa yang ditafsirkan, karena kompilasi ditangani pada waktu proses, bukan sebelumnya

Ada keuntungan dari kedua jenis bahasa tersebut, tetapi kami tidak akan membahasnya sekarang

Anda mungkin juga mendengar istilah kode sisi server dan sisi klien, terutama dalam konteks pengembangan web. Kode sisi klien adalah kode yang dijalankan di komputer pengguna — saat halaman web dilihat, kode sisi klien halaman diunduh, lalu dijalankan dan ditampilkan oleh browser. Dalam modul ini kita secara eksplisit berbicara tentang JavaScript sisi klien

Sebaliknya, kode sisi server dijalankan di server, kemudian hasilnya diunduh dan ditampilkan di browser. Contoh bahasa web sisi server yang populer termasuk PHP, Python, Ruby, ASP. NET, dan bahkan JavaScript. JavaScript juga dapat digunakan sebagai bahasa sisi server, misalnya di Node.js yang populer. js — Anda dapat mengetahui lebih lanjut tentang JavaScript sisi server di Situs Web Dinamis kami – Topik pemrograman sisi server

Kata dinamis digunakan untuk mendeskripsikan JavaScript sisi klien, dan bahasa sisi server — mengacu pada kemampuan untuk memperbarui tampilan halaman web/aplikasi untuk menampilkan hal yang berbeda dalam situasi yang berbeda, menghasilkan konten baru sesuai kebutuhan. Kode sisi server secara dinamis menghasilkan konten baru di server, mis. g. menarik data dari database, sedangkan JavaScript sisi klien secara dinamis menghasilkan konten baru di dalam browser pada klien, mis. g. membuat tabel HTML baru, mengisinya dengan data yang diminta dari server, lalu menampilkan tabel tersebut di halaman web yang diperlihatkan kepada pengguna. Artinya sedikit berbeda dalam dua konteks, tetapi terkait, dan kedua pendekatan (sisi server dan sisi klien) biasanya bekerja sama

Halaman web tanpa konten yang diperbarui secara dinamis disebut sebagai statis — hanya menampilkan konten yang sama sepanjang waktu

JavaScript diterapkan ke halaman HTML Anda dengan cara yang mirip dengan CSS. Sedangkan CSS menggunakan

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

1. Pertama-tama, buat salinan lokal dari file contoh kita apply-javascript. html. Simpan di direktori di tempat yang masuk akal
2. Buka file di browser web Anda dan di editor teks Anda. Anda akan melihat bahwa HTML membuat halaman web sederhana yang berisi tombol yang dapat diklik
3. Selanjutnya, buka editor teks Anda dan tambahkan yang berikut di kepala Anda — tepat sebelum tag

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   4 penutup Anda

   <script>
     // JavaScript goes here
   script>
   

4. Sekarang kita akan menambahkan beberapa JavaScript di dalam elemen

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   3 kita untuk membuat halaman melakukan sesuatu yang lebih menarik — tambahkan kode berikut tepat di bawah baris "// JavaScript goes here"

   document.addEventListener('DOMContentLoaded', () => {
     function createParagraph() {
       const para = document.createElement('p');
       para.textContent = 'You clicked the button!';
       document.body.appendChild(para);
     }
   
     const buttons = document.querySelectorAll('button');
   
     for (const button of buttons) {
       button.addEventListener('click', createParagraph);
     }
   });
   

5. Simpan file Anda dan segarkan browser — sekarang Anda akan melihat bahwa ketika Anda mengklik tombol, paragraf baru dibuat dan ditempatkan di bawah

Catatan. Jika contoh Anda tampaknya tidak berhasil, ulangi langkah-langkahnya lagi dan periksa apakah Anda melakukan semuanya dengan benar. Apakah Anda menyimpan salinan kode awal lokal sebagai file

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

Catatan. Anda dapat melihat versi ini di GitHub sebagai apply-javascript-internal. html (lihat langsung juga)

Ini berfungsi dengan baik, tetapi bagaimana jika kita ingin meletakkan JavaScript kita di file eksternal?

1. Pertama, buat file baru di direktori yang sama dengan file HTML sampel Anda. Sebut saja

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   _9 — pastikan ada itu. ekstensi nama file js, karena itulah yang dikenali sebagai JavaScript
2. Ganti elemen

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   _3 Anda saat ini dengan yang berikut ini

   <script src="script.js" defer>script>
   

3. Di dalam

   const para = document.querySelector('p');
   
   para.addEventListener('click', updateName);
   
   function updateName() {
     const name = prompt('Enter a new name');
     para.textContent = `Player 1: ${name}`;
   }
   

   _9, tambahkan skrip berikut

   function createParagraph() {
     const para = document.createElement('p');
     para.textContent = 'You clicked the button!';
     document.body.appendChild(para);
   }
   
   const buttons = document.querySelectorAll('button');
   
   for (const button of buttons) {
     button.addEventListener('click', createParagraph);
   }
   

4. Simpan dan segarkan browser Anda, dan Anda akan melihat hal yang sama. Ini berfungsi sama, tetapi sekarang kami memiliki JavaScript di file eksternal. Ini umumnya merupakan hal yang baik dalam mengatur kode Anda dan membuatnya dapat digunakan kembali di beberapa file HTML. Plus, HTML lebih mudah dibaca tanpa potongan besar skrip yang dibuang di dalamnya

Catatan. Anda dapat melihat versi ini di GitHub sebagai apply-javascript-external. html dan skrip. js (lihat langsung juga)

Perhatikan bahwa terkadang Anda akan menemukan potongan kode JavaScript aktual yang ada di dalam HTML. Mungkin terlihat seperti ini

function createParagraph() {
  const para = document.createElement('p');
  para.textContent = 'You clicked the button!';
  document.body.appendChild(para);
}

<button onclick="createParagraph()">Click me!button>

Anda dapat mencoba versi demo kami di bawah ini

Demo ini memiliki fungsi yang persis sama seperti di dua bagian sebelumnya, kecuali bahwa elemen

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

Namun, tolong jangan lakukan ini. Merupakan praktik yang buruk untuk mengotori HTML Anda dengan JavaScript, dan itu tidak efisien — Anda harus menyertakan atribut

<script>
  // JavaScript goes here
script>

Alih-alih menyertakan JavaScript dalam HTML Anda, gunakan konstruksi JavaScript murni. Fungsi

<script>
  // JavaScript goes here
script>

<script>
  // JavaScript goes here
script>

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

Ini mungkin sedikit lebih panjang daripada atribut

<script>
  // JavaScript goes here
script>

Catatan. Coba edit versi

<script>
  // JavaScript goes here
script>

Ada sejumlah masalah yang terkait dengan membuat skrip dimuat pada waktu yang tepat. Tidak ada yang sesederhana kelihatannya. Masalah umum adalah bahwa semua HTML pada halaman dimuat sesuai urutan kemunculannya. Jika Anda menggunakan JavaScript untuk memanipulasi elemen pada laman (atau lebih tepatnya, ), kode Anda tidak akan berfungsi jika JavaScript dimuat dan diuraikan sebelum HTML yang Anda coba lakukan untuk

Pada contoh kode di atas, pada contoh internal dan eksternal JavaScript dimuat dan dijalankan di bagian atas dokumen, sebelum badan HTML diuraikan. Ini dapat menyebabkan kesalahan, jadi kami telah menggunakan beberapa konstruksi untuk menyiasatinya

Dalam contoh internal, Anda dapat melihat struktur ini di sekitar kode

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

Ini adalah pendengar acara, yang mendengarkan acara

<script>
  // JavaScript goes here
script>

Dalam contoh eksternal, kami menggunakan fitur JavaScript yang lebih modern untuk menyelesaikan masalah, atribut

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

const para = document.querySelector('p');

para.addEventListener('click', updateName);

function updateName() {
  const name = prompt('Enter a new name');
  para.textContent = `Player 1: ${name}`;
}

<script src="script.js" defer>script>

Dalam hal ini skrip dan HTML akan dimuat secara bersamaan dan kode akan berfungsi

Catatan. Dalam kasus eksternal, kami tidak perlu menggunakan acara

<script>
  // JavaScript goes here
script>

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

Solusi kuno untuk masalah ini adalah meletakkan elemen skrip Anda tepat di bagian bawah badan (mis. g. tepat sebelum

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

asinkron dan tunda

Sebenarnya ada dua fitur modern yang dapat kita gunakan untuk mem-bypass masalah skrip pemblokiran —

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

Skrip yang dimuat menggunakan atribut

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

Skrip yang dimuat dengan atribut

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

Berikut adalah representasi visual dari berbagai metode pemuatan skrip dan apa artinya bagi halaman Anda

Gambar ini berasal dari spesifikasi HTML, disalin dan dipotong ke versi yang diperkecil, di bawah CC BY 4. 0 persyaratan lisensi

Misalnya, jika Anda memiliki elemen skrip berikut

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

Anda tidak dapat mengandalkan urutan skrip yang akan dimuat.

<script src="script.js" defer>script>

<script src="script.js" defer>script>

<script src="script.js" defer>script>

<script src="script.js" defer>script>

<script src="script.js" defer>script>

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

Skrip dimuat menggunakan atribut

document.addEventListener('DOMContentLoaded', () => {
  function createParagraph() {
    const para = document.createElement('p');
    para.textContent = 'You clicked the button!';
    document.body.appendChild(para);
  }

  const buttons = document.querySelectorAll('button');

  for (const button of buttons) {
    button.addEventListener('click', createParagraph);
  }
});

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

Dalam contoh kedua, kita dapat yakin bahwa

<script src="script.js" defer>script>

<script src="script.js" defer>script>

<script src="script.js" defer>script>

<script src="script.js" defer>script>

<script src="script.js" defer>script>

Untuk meringkas

• document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  7 dan

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  0 keduanya menginstruksikan browser untuk mengunduh skrip di utas terpisah, sedangkan halaman lainnya (DOM, dll. ) sedang diunduh, sehingga pemuatan laman tidak diblokir selama proses pengambilan
• skrip dengan atribut

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  _7 akan dijalankan segera setelah pengunduhan selesai. Ini memblokir halaman dan tidak menjamin perintah eksekusi tertentu
• skrip dengan atribut

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  _0 akan dimuat sesuai urutannya dan hanya akan dijalankan setelah semuanya selesai dimuat
• Jika skrip Anda harus segera dijalankan dan tidak memiliki ketergantungan apa pun, gunakan

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  7
• Jika skrip Anda harus menunggu penguraian dan bergantung pada skrip lain dan/atau DOM yang ada, muat skrip tersebut menggunakan

  document.addEventListener('DOMContentLoaded', () => {
    function createParagraph() {
      const para = document.createElement('p');
      para.textContent = 'You clicked the button!';
      document.body.appendChild(para);
    }
  
    const buttons = document.querySelectorAll('button');
  
    for (const button of buttons) {
      button.addEventListener('click', createParagraph);
    }
  });
  

  0 dan letakkan elemen

  const para = document.querySelector('p');
  
  para.addEventListener('click', updateName);
  
  function updateName() {
    const name = prompt('Enter a new name');
    para.textContent = `Player 1: ${name}`;
  }
  

  3 yang sesuai dalam urutan yang Anda inginkan agar browser mengeksekusinya

Seperti halnya HTML dan CSS, Anda dapat menulis komentar ke dalam kode JavaScript Anda yang akan diabaikan oleh browser, dan ada untuk memberikan instruksi kepada sesama pengembang tentang cara kerja kode (dan Anda, jika Anda kembali ke kode Anda setelah . Komentar sangat berguna, dan Anda harus sering menggunakannya, terutama untuk aplikasi yang lebih besar. Ada dua jenis

• Komentar satu baris ditulis setelah garis miring ganda (//), e. g

  p {
    font-family: "helvetica neue", helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0, 0, 200, 0.6);
    background: rgba(0, 0, 200, 0.3);
    color: rgba(0, 0, 200, 0.6);
    box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
  }
  

  _5

• Komentar multi-baris ditulis di antara string /* dan */, mis. g

  p {
    font-family: "helvetica neue", helvetica, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    border: 2px solid rgba(0, 0, 200, 0.6);
    background: rgba(0, 0, 200, 0.3);
    color: rgba(0, 0, 200, 0.6);
    box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
    border-radius: 10px;
    padding: 3px 10px;
    display: inline-block;
    cursor: pointer;
  }
  

  _6

Jadi misalnya, kita bisa membuat anotasi JavaScript demo terakhir kita dengan komentar seperti itu

p {
  font-family: "helvetica neue", helvetica, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  border: 2px solid rgba(0, 0, 200, 0.6);
  background: rgba(0, 0, 200, 0.3);
  color: rgba(0, 0, 200, 0.6);
  box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
  border-radius: 10px;
  padding: 3px 10px;
  display: inline-block;
  cursor: pointer;
}

Catatan. Secara umum lebih banyak komentar biasanya lebih baik daripada lebih sedikit, tetapi Anda harus berhati-hati jika Anda menambahkan banyak komentar untuk menjelaskan variabel apa (nama variabel Anda mungkin harus lebih intuitif), atau untuk menjelaskan operasi yang sangat sederhana (mungkin kode Anda adalah

Jadi begitulah, langkah pertama Anda ke dunia JavaScript. Kami telah mulai dengan hanya teori, untuk mulai membuat Anda terbiasa dengan mengapa Anda menggunakan JavaScript dan hal-hal apa yang dapat Anda lakukan dengannya. Sepanjang jalan, Anda melihat beberapa contoh kode dan mempelajari bagaimana JavaScript cocok dengan kode lainnya di situs web Anda, antara lain

JavaScript mungkin tampak sedikit menakutkan saat ini, tetapi jangan khawatir — dalam kursus ini, kami akan memandu Anda melalui langkah-langkah sederhana yang akan masuk akal di masa mendatang. Di artikel berikutnya, kita akan terjun langsung ke praktiknya, membuat Anda terjun langsung dan membuat contoh JavaScript Anda sendiri

Apakah Java atau JavaScript lebih tinggi levelnya?

Apakah JavaScript adalah bahasa yang paling kuat?

Apakah JavaScript bahasa tercepat?

Apakah JavaScript lebih lambat dari Java?