Dapatkah Anda menggunakan javascript untuk mengembangkan situs web

JavaScript adalah bahasa pemrograman yang kuat yang dapat menambahkan interaktivitas ke situs web. Itu ditemukan oleh Brendan Eich

JavaScript serbaguna dan ramah bagi pemula. Dengan lebih banyak pengalaman, Anda akan dapat membuat game, grafik animasi 2D dan 3D, aplikasi berbasis database yang komprehensif, dan banyak lagi.

JavaScript sendiri relatif kompak, namun sangat fleksibel. Pengembang telah menulis berbagai alat di atas bahasa JavaScript inti, membuka sejumlah besar fungsi dengan sedikit usaha. Ini termasuk

• Antarmuka Pemrograman Aplikasi Peramban (API) dibangun ke dalam peramban web, menyediakan fungsionalitas seperti membuat HTML secara dinamis dan menyetel gaya CSS;
• API pihak ketiga yang memungkinkan pengembang menggabungkan fungsionalitas di situs dari penyedia konten lain, seperti Twitter atau Facebook
• Framework dan library pihak ketiga yang dapat Anda terapkan ke HTML untuk mempercepat pekerjaan pembuatan situs dan aplikasi

Ini di luar cakupan artikel ini—sebagai pengantar ringan untuk JavaScript—untuk menyajikan detail perbedaan bahasa JavaScript inti dari alat yang tercantum di atas. Anda dapat mempelajari lebih lanjut di area pembelajaran JavaScript MDN, serta di bagian lain MDN

Bagian di bawah memperkenalkan beberapa aspek bahasa inti dan menawarkan kesempatan untuk bermain dengan beberapa fitur API browser juga. Selamat bersenang-senang

JavaScript adalah salah satu teknologi web modern paling populer. Saat keterampilan JavaScript Anda berkembang, situs web Anda akan memasuki dimensi baru kekuatan dan kreativitas

Namun, membiasakan diri dengan JavaScript lebih menantang daripada membiasakan diri dengan HTML dan CSS. Anda mungkin harus memulai dari yang kecil, dan berkembang secara bertahap. Untuk memulai, mari kita periksa cara menambahkan JavaScript ke halaman Anda untuk membuat Halo dunia. contoh. (Halo Dunia. adalah standar untuk contoh pemrograman pengantar. )

Peringatan. Jika Anda belum mengikuti seluruh kursus kami, unduh kode contoh ini dan gunakan sebagai titik awal

1. Buka situs pengujian Anda dan buat folder baru bernama

   let myVariable;
   

   3. Di dalam folder skrip, buat dokumen teks baru bernama

   let myVariable;
   

   4, dan simpan
2. Di file

   let myVariable;
   

   5 Anda, masukkan kode ini pada baris baru, tepat sebelum tag

   let myVariable;
   

   6 penutup

   <script src="scripts/main.js"></script>
   

   _

3. Ini melakukan pekerjaan yang sama dengan elemen

   let myVariable;
   

   7 untuk CSS. Itu menerapkan JavaScript ke halaman, sehingga dapat berpengaruh pada HTML (bersama dengan CSS, dan hal lain di halaman)
4. Tambahkan kode ini ke file

   let myVariable;
   

   4

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

5. Pastikan file HTML dan JavaScript disimpan. Kemudian muat

   let myVariable;
   

   _5 di browser Anda. Anda harus melihat sesuatu seperti ini

Catatan. Alasan instruksi (di atas) menempatkan elemen

myVariable = "Bob";

Jika JavaScript dimuat lebih dulu dan seharusnya memengaruhi HTML yang belum dimuat, mungkin ada masalah. Menempatkan JavaScript di dekat bagian bawah halaman HTML adalah salah satu cara untuk mengakomodasi ketergantungan ini. Untuk mempelajari lebih lanjut tentang pendekatan alternatif, lihat

Teks judul berubah menjadi Halo dunia. menggunakan JavaScript. Anda melakukan ini dengan menggunakan fungsi yang disebut

myVariable = "Bob";

myVariable = "Bob";

Setelah itu, kode menetapkan nilai properti

myVariable = "Bob";

myVariable = "Bob";

Catatan. Kedua fitur yang Anda gunakan dalam latihan ini merupakan bagian dari Document Object Model (DOM) API, yang memiliki kemampuan untuk memanipulasi dokumen

Untuk memberi Anda pemahaman yang lebih baik tentang cara kerja JavaScript, mari kita jelaskan beberapa fitur inti dari bahasa ini. Perlu dicatat bahwa fitur-fitur ini umum untuk semua bahasa pemrograman. Jika Anda menguasai dasar-dasar ini, Anda juga memiliki awal yang baik dalam pengkodean dalam bahasa lain

Peringatan. Pada artikel ini, coba masukkan baris kode contoh ke dalam konsol JavaScript Anda untuk melihat apa yang terjadi. Untuk detail selengkapnya tentang konsol JavaScript, lihat Temukan alat pengembang browser

Variabel adalah wadah yang menyimpan nilai. Anda mulai dengan mendeklarasikan variabel dengan kata kunci

myVariable = "Bob";

let myVariable;

Titik koma di akhir baris menunjukkan di mana pernyataan berakhir. Ini hanya diperlukan saat Anda perlu memisahkan pernyataan dalam satu baris. Namun, beberapa orang percaya itu adalah praktik yang baik untuk memiliki titik koma di akhir setiap pernyataan. Ada aturan lain tentang kapan Anda harus dan tidak boleh menggunakan titik koma. Untuk detail lebih lanjut, lihat Panduan Anda untuk Titik Koma di JavaScript

Anda dapat memberi nama variabel hampir apa saja, tetapi ada beberapa batasan. (Lihat. ) Jika Anda tidak yakin, Anda dapat memeriksa nama variabel Anda untuk melihat apakah itu valid

JavaScript peka huruf besar-kecil. Ini berarti

myVariable = "Bob";

myVariable = "Bob";

Setelah mendeklarasikan variabel, Anda bisa memberinya nilai

myVariable = "Bob";

Juga, Anda dapat melakukan kedua operasi ini pada baris yang sama

let myVariable = "Bob";

Anda mengambil nilai dengan memanggil nama variabel

myVariable;

Setelah menetapkan nilai ke variabel, Anda dapat mengubahnya nanti dalam kode

let myVariable = "Bob";
myVariable = "Steve";

Perhatikan bahwa variabel mungkin menyimpan nilai yang memiliki tipe data berbeda

myVariable = "Bob";

myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

Jadi mengapa kita membutuhkan variabel? . Jika nilai tidak dapat diubah, maka Anda tidak dapat melakukan sesuatu yang dinamis, seperti mempersonalisasi pesan salam atau mengubah gambar yang ditampilkan di galeri gambar

Komentar adalah potongan teks yang dapat ditambahkan bersama dengan kode. Browser mengabaikan teks yang ditandai sebagai komentar. Anda dapat menulis komentar di JavaScript seperti yang Anda bisa di CSS

/*
Everything in between is a comment.
*/

Jika komentar Anda tidak berisi jeda baris, ada opsi untuk meletakkannya di belakang dua garis miring seperti ini

// This is a comment

let myVariable = "Bob";

let myVariable = "Bob";

myVariable;

myVariable;

myVariable;

myVariable;

myVariable;

myVariable;

myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";
myVariable = "Steve";

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";
myVariable = "Steve";

let myVariable = "Bob";
myVariable = "Steve";

Untuk "Bukan", ekspresi dasarnya adalah

let myVariable = "Bob";

let myVariable = "Bob";

let myVariable = "Bob";
myVariable = "Steve";

"Tidak-sama" pada dasarnya memberikan hasil yang sama dengan sintaks yang berbeda. Di sini kita menguji "adalah

myVariable = "Bob";

let myVariable = "Bob";

myVariable = "Bob";

/*
Everything in between is a comment.
*/

Ada lebih banyak operator untuk dijelajahi, tetapi ini sudah cukup untuk saat ini. Lihat Ekspresi dan operator untuk daftar lengkap

Catatan. Mencampur tipe data dapat menyebabkan beberapa hasil aneh saat melakukan perhitungan. Berhati-hatilah agar Anda mengacu pada variabel Anda dengan benar, dan dapatkan hasil yang Anda harapkan. Misalnya, masukkan

/*
Everything in between is a comment.
*/

/*
Everything in between is a comment.
*/

Kondisional adalah struktur kode yang digunakan untuk menguji apakah suatu ekspresi mengembalikan nilai benar atau tidak. Bentuk kondisional yang sangat umum adalah pernyataan ________32______4. Sebagai contoh

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

Ekspresi di dalam

/*
Everything in between is a comment.
*/

/*
Everything in between is a comment.
*/

/*
Everything in between is a comment.
*/

let myVariable = "Bob";

/*
Everything in between is a comment.
*/

Fungsi adalah cara mengemas fungsionalitas yang ingin Anda gunakan kembali. Dimungkinkan untuk mendefinisikan isi kode sebagai fungsi yang dijalankan saat Anda memanggil nama fungsi dalam kode Anda. Ini adalah alternatif yang bagus untuk berulang kali menulis kode yang sama. Anda telah melihat beberapa penggunaan fungsi. Sebagai contoh

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

Fungsi-fungsi ini,

// This is a comment

// This is a comment

Jika Anda melihat sesuatu yang terlihat seperti nama variabel, tetapi diikuti oleh tanda kurung—

// This is a comment

Misalnya, fungsi

// This is a comment

Anda juga dapat menentukan fungsi Anda sendiri. Pada contoh berikutnya, kita membuat fungsi sederhana yang mengambil dua angka sebagai argumen dan mengalikannya

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

Coba jalankan ini di konsol; . Sebagai contoh

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

Catatan. Pernyataan

// This is a comment

// This is a comment

Interaktivitas nyata di situs web membutuhkan event handler. Ini adalah struktur kode yang mendengarkan aktivitas di browser, dan menjalankan kode sebagai respons. Contoh yang paling jelas adalah menangani kejadian klik, yang diaktifkan oleh browser saat Anda mengeklik sesuatu dengan mouse. Untuk mendemonstrasikan ini, masukkan yang berikut ke konsol Anda, lalu klik halaman web saat ini

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

Ada beberapa cara untuk melampirkan event handler ke elemen. Di sini kita memilih elemen

// This is a comment

// This is a comment

// This is a comment

Fungsi yang baru saja kita berikan ke

// This is a comment

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

Dengan selesainya tinjauan dasar-dasar JavaScript ini (di atas), mari tambahkan beberapa fitur baru ke situs contoh kita

Sebelum melangkah lebih jauh, hapus konten file

let myVariable;

Di bagian ini, Anda akan mempelajari cara menggunakan fitur JavaScript dan DOM API untuk mengganti tampilan salah satu dari dua gambar. Perubahan ini akan terjadi saat pengguna mengklik gambar yang ditampilkan

1. Pilih gambar yang ingin Anda tampilkan di situs contoh Anda. Idealnya, ukuran gambar akan sama dengan gambar yang Anda tambahkan sebelumnya, atau sedekat mungkin
2. Simpan gambar ini di folder

   let iceCream = "chocolate";
   if (iceCream === "chocolate") {
     alert("Yay, I love chocolate ice cream!");
   } else {
     alert("Awwww, but chocolate is my favorite…");
   }
   

   _3 Anda
3. Ganti nama gambar firefox2. png
4. Tambahkan kode JavaScript berikut ke file

   let myVariable;
   

   4 Anda

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   6

5. Simpan semua file dan muat

   let myVariable;
   

   5 di browser. Sekarang ketika Anda mengklik gambar, itu harus berubah menjadi yang lain

Inilah yang terjadi. Anda menyimpan referensi ke elemen

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

let iceCream = "chocolate";
if (iceCream === "chocolate") {
  alert("Yay, I love chocolate ice cream!");
} else {
  alert("Awwww, but chocolate is my favorite…");
}

1. Kode mengambil nilai atribut

   let iceCream = "chocolate";
   if (iceCream === "chocolate") {
     alert("Yay, I love chocolate ice cream!");
   } else {
     alert("Awwww, but chocolate is my favorite…");
   }
   

   9 gambar
2. Kode menggunakan kondisional untuk memeriksa apakah nilai

   let iceCream = "chocolate";
   if (iceCream === "chocolate") {
     alert("Yay, I love chocolate ice cream!");
   } else {
     alert("Awwww, but chocolate is my favorite…");
   }
   

   9 sama dengan jalur gambar asli
   1. Jika ya, kode mengubah nilai

      let iceCream = "chocolate";
      if (iceCream === "chocolate") {
        alert("Yay, I love chocolate ice cream!");
      } else {
        alert("Awwww, but chocolate is my favorite…");
      }
      

      _9 ke jalur gambar kedua, memaksa gambar lain untuk dimuat di dalam elemen

      let iceCream = "chocolate";
      if (iceCream === "chocolate") {
        alert("Yay, I love chocolate ice cream!");
      } else {
        alert("Awwww, but chocolate is my favorite…");
      }
      

      6
   2. Jika tidak (artinya pasti sudah berubah), nilai

      let iceCream = "chocolate";
      if (iceCream === "chocolate") {
        alert("Yay, I love chocolate ice cream!");
      } else {
        alert("Awwww, but chocolate is my favorite…");
      }
      

      9 bertukar kembali ke jalur gambar asli, ke keadaan semula

Selanjutnya, mari ubah judul halaman menjadi pesan selamat datang yang dipersonalisasi saat pengguna pertama kali mengunjungi situs. Pesan selamat datang ini akan tetap ada. Jika pengguna meninggalkan situs dan kembali lagi nanti, kami akan menyimpan pesan menggunakan Web Storage API. Kami juga akan menyertakan opsi untuk mengubah pengguna, dan karenanya, pesan selamat datang

1. Di

   let myVariable;
   

   5, tambahkan baris berikut tepat sebelum elemen

   myVariable = "Bob";
   

   0

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   7

2. Di

   let myVariable;
   

   4, letakkan kode berikut di bagian bawah file, persis seperti yang tertulis. Ini mengambil referensi ke tombol baru dan tajuk, menyimpan setiap variabel di dalam

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   _8

3. Tambahkan fungsi berikut untuk mengatur salam yang dipersonalisasi. Ini belum akan melakukan apa-apa, tetapi ini akan segera berubah

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   _9
   Fungsi

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   _07 berisi fungsi

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   08, yang menampilkan kotak dialog, mirip dengan

   // This is a comment
   

   3. Fungsi

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   _08 ini melakukan lebih dari

   // This is a comment
   

   3, meminta pengguna untuk memasukkan data, dan menyimpannya dalam variabel setelah pengguna mengklik OK. Dalam hal ini, kami meminta pengguna untuk memasukkan nama. Selanjutnya, kode memanggil API

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   12, yang memungkinkan kita menyimpan data di browser dan mengambilnya nanti. Kami menggunakan fungsi

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   13 localStorage untuk membuat dan menyimpan item data yang disebut

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   14, menetapkan nilainya ke variabel

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   15 yang berisi entri pengguna untuk nama. Terakhir, kita menyetel

   myVariable = "Bob";
   

   _4 judul menjadi sebuah string, ditambah nama pengguna yang baru disimpan
4. Tambahkan blok kondisi berikut. Kita dapat memanggil kode inisialisasi ini, karena ini menyusun aplikasi saat pertama kali dimuat

   let myVariable;
   

   0
   Baris pertama dari blok ini menggunakan operator negasi (LOGIC NOT, diwakili oleh

   let myVariable = "Bob";
   myVariable = "Steve";
   

   3) untuk memeriksa apakah ada data

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   18. Jika tidak, fungsi

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   _07 dijalankan untuk membuatnya. Jika ada (yaitu, pengguna menetapkan nama pengguna selama kunjungan sebelumnya), kami mengambil nama yang disimpan menggunakan

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   20 dan menetapkan

   myVariable = "Bob";
   

   4 judul ke string, ditambah nama pengguna, seperti yang kami lakukan di dalam

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   07
5. Letakkan event handler

   let iceCream = "chocolate";
   if (iceCream === "chocolate") {
     alert("Yay, I love chocolate ice cream!");
   } else {
     alert("Awwww, but chocolate is my favorite…");
   }
   

   8 ini (di bawah) pada tombol. Saat diklik,

   const myHeading = document.querySelector("h1");
   myHeading.textContent = "Hello world!";
   

   07 berjalan. Hal ini memungkinkan pengguna untuk memasukkan nama yang berbeda dengan menekan tombol

   let myVariable;
   

   _1

Saat Anda menjalankan contoh dan mendapatkan kotak dialog yang meminta Anda memasukkan nama pengguna, coba tekan tombol Batal. Anda harus berakhir dengan judul yang bertuliskan Mozilla is cool, null. Ini terjadi karena—ketika Anda membatalkan prompt—nilainya ditetapkan sebagai

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

Juga, coba klik OK tanpa memasukkan nama. Anda harus berakhir dengan judul yang bertuliskan Mozilla itu keren, karena alasan yang cukup jelas

Untuk menghindari masalah ini, Anda dapat memeriksa apakah pengguna tidak memasukkan nama kosong. Perbarui fungsi

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

let myVariable;

Dalam bahasa manusia, ini berarti. Jika

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

const myHeading = document.querySelector("h1");
myHeading.textContent = "Hello world!";

Jika Anda telah mengikuti semua petunjuk dalam artikel ini, Anda akan berakhir dengan halaman yang terlihat seperti gambar di bawah ini. Anda juga dapat melihat versi kami

Jika Anda mengalami kebuntuan, Anda dapat membandingkan pekerjaan Anda dengan kode contoh kami yang telah selesai di GitHub

Kami baru saja menggores permukaan JavaScript. Jika Anda menikmati bermain, dan ingin melangkah lebih jauh, manfaatkan sumber daya yang tercantum di bawah ini

Skrip sisi klien dinamis dengan JavaScript

Selami JavaScript dengan lebih detail

Ini adalah sumber yang bagus untuk calon pengembang web. Pelajari JavaScript dalam lingkungan interaktif, dengan pelajaran singkat dan tes interaktif, dipandu oleh penilaian otomatis. 40 pelajaran pertama gratis. Kursus lengkap tersedia dengan pembayaran satu kali yang kecil

Bisakah saya membuat situs web menggunakan JavaScript?

Apakah JavaScript bagus untuk pengembangan situs web?

Bisakah saya membangun situs web menggunakan HTML CSS dan JavaScript?