rumah > Instruksi > Apa yang bisa dilakukan dengan JavaScript? Untuk apa Javascript dan apa fungsinya. Contoh Apa yang bisa dilakukan dengan contoh javascript


Apa yang bisa dilakukan dengan JavaScript? Untuk apa Javascript dan apa fungsinya. Contoh Apa yang bisa dilakukan dengan contoh javascript




Pengguna yang mengunjungi berbagai sumber web sering menemukan solusi non-standar yang menarik dan ingin melakukan hal yang sama di situs mereka. Paling sering, solusi semacam itu diikat menggunakan JavaScript.

Pada artikel ini, saya akan memberi tahu Anda tentang JavaScript, bahasa skrip yang dirancang untuk membuat halaman web interaktif, dan apa yang dapat Anda lakukan dengan JS. Kami akan melihat contoh penggunaan JavaScript dan mencari tahu bagaimana hal itu dapat bermanfaat bagi kami.

Apa yang dapat Anda lakukan dengan JavaScript?

Ubah halaman, tulis teks di atasnya, tambahkan dan hapus tag, ubah gaya elemen.

Menanggapi peristiwa: skrip dapat menunggu sesuatu terjadi (klik/arahkan kursor, pemuatan halaman selesai) dan bereaksi terhadapnya dengan menjalankan suatu fungsi.
Misalnya, saat Anda mengarahkan mouse ke tautan atau gambar, Anda dapat menampilkan keterangan alat. Dengan mengklik mouse, Anda dapat mengganti konten blok. Di akhir pemuatan halaman - tampilkan jendela pop-up iklan. Anda dapat mengubah tampilan halaman tergantung pada waktu.

JavaScript. Mulai cepat

Buat permintaan ke server dan muat data tanpa memuat ulang halaman.
Misalnya, jika pengguna meninggalkan komentar di situs atau di buku tamu, maka komentar itu akan langsung ditampilkan tanpa memuat ulang halaman. Anda juga dapat mengupload file ke server, menampilkan progres pengunduhan sebagai persentase.

Setel dan baca cookie, validasi data, tampilkan pesan, dan banyak lagi.
Misalnya, saat mengunjungi situs untuk pertama kali, jendela pop-up ditampilkan kepada pengguna dan cookie disetel. Dan pada kunjungan berikutnya ke sumber daya ini, jendela pop-up tidak ditampilkan, karena cookie sudah disetel.
Anda juga dapat memeriksa kebenaran email yang dimasukkan, memeriksa kesesuaian nomor telepon yang dimasukkan dengan format yang diperlukan dan segera menampilkan pesan tentang kebenaran atau kesalahan data yang dimasukkan.

Contoh JavaScript

Penggunaan JavaScript sangat luas dan beragam sehingga ada ribuan contoh penggunaannya, dan tetap saja daftarnya tidak akan lengkap, karena skrip baru ditulis setiap hari. Saya yakin Anda telah melihat banyak contoh di bawah ini di berbagai situs. Dan itu semua diimplementasikan menggunakan JavaScript.

Tentunya galeri yang disajikan pada contoh tersebut bukanlah satu-satunya. Galeri serupa, seperti yang lainnya, bisa dibayangkan ratusan. Dan saya, agar daftarnya tidak membengkak hingga tak terbatas, memberikan satu contoh dari kelompok skrip paling populer.

Apa yang ini berikan kepada kita?

1. Navigasi multi-level yang nyaman

Menggunakan JavaScript memungkinkan Anda membuat menu multi-level yang ringkas, navigasi multi-level di bilah samping. Sub-item menu dibuka dengan mengklik atau dengan mengarahkan mouse.

Banyak toko online memiliki navigasi dropdown sidebar. Mari kita ambil shop.by sebagai contoh. Bayangkan berapa banyak itu akan meregang jika sub-item tidak jatuh saat melayang atau di klik, tetapi terlihat sekaligus!

2. Penggunaan galeri dan slider memberi kita kesempatan untuk menampilkan foto, gambar jenis produk tambahan, mengatur portofolio fotografer dengan nyaman dan kompak.

JavaScript. Mulai cepat

Pelajari dasar-dasar JavaScript dengan contoh praktis membangun aplikasi web

Galeri sangat relevan untuk tampilan detail barang di toko online, saat Anda perlu menampilkan berbagai jenis barang. Dengan bantuan mereka, kami dapat menunjukkan kepada pengguna dalam blok kecil semua gambar sekaligus, menyediakan gambar kecil dan gambar yang diperbesar untuk dilihat.

Berapa banyak ruang yang diperlukan untuk galeri yang ditunjukkan pada gambar di bawah ini?

3. Baru-baru ini, banyak widget ditampilkan di kolom samping situs. Ini adalah widget untuk jejaring sosial populer, kategori, arsip posting, kalender, komentar blog terbaru, posting populer, dan banyak lagi.

Perlu dicatat bahwa di banyak situs, beberapa widget dapat dihapus begitu saja, karena tidak masuk akal, tetapi menghabiskan ruang.

Tetapi bagaimana jika Anda masih perlu memasukkan banyak widget secara kompak?

Di sinilah solusi "tab" JavaScript datang untuk menyelamatkan.

Dengan bantuan mereka, Anda dapat memasukkan semua widget dengan baik di kolom samping situs. Untuk persepsi yang lebih baik, Anda dapat mengelompokkan widget ke dalam "tab".

Misalnya, Anda dapat meletakkan widget jejaring sosial di satu tab, kategori dan arsip di tab kedua, dll. Ini akan menghemat ruang dan membuat situs lebih ramah pengguna.

4. Dengan menggunakan JavaScript, Anda juga dapat meningkatkan halaman kontak untuk situs web Anda atau situs web klien Anda secara signifikan.

sematkan tooltips di bidang formulir;

memvalidasi data yang dimasukkan dalam bidang formulir dan menampilkan pesan kesalahan;

kirimkan data formulir tanpa memuat ulang halaman;

tempatkan peta dengan rute.

5. Bagi mereka yang menempatkan data tabular di situs, akan sangat berguna untuk menggunakan penyortiran data dalam tabel.

6. Mereka yang memposting statistik apa pun di situs dalam bentuk grafik dan bagan akan merasa sangat berguna untuk dapat membuat bagan dan grafik interaktif dalam JavaScript.

Selain itu, dengan menggunakan JavaScript, Anda dapat melakukan semua jenis efek di situs - seperti penggeseran elemen yang mulus, pergerakannya, kemunculan dan penghilangan bertahap, dan semua yang cukup untuk imajinasi Anda.

Semua ini dapat membuat situs lebih nyaman bagi pengunjung, lebih interaktif, lebih berteknologi.

Kesimpulan

Seperti yang Anda lihat, cakupan JavaScript sangat luas. Ini adalah galeri, dan penggeser, dan tab, dan semua jenis elemen interaktif, dan peta, dan grafik, dan bekerja dengan formulir, dan masih banyak lagi.

Saya pikir setiap orang dapat menemukan aplikasi JavaScript yang berguna untuk diri mereka sendiri dan menggunakannya di situs mereka sendiri atau di situs klien mereka.

Saya harap Anda menyukai artikel ini dan belajar darinya tentang fitur-fitur baru yang dapat diimplementasikan berkat JS.

Apakah Anda menggunakan JavaScript di situs web Anda? Apa kesulitan utama Anda saat menggunakan JavaScript?

Beri tahu kami tentang hal itu di komentar artikel.

JavaScript. Mulai cepat

Pelajari dasar-dasar JavaScript dengan contoh praktis membangun aplikasi web

TL;DR Ini adalah artikel ulasan. Seperti "ringkasan dari seri sebelumnya". Ini akan berguna untuk pemula, atau mereka yang belum mengikuti industri belakangan ini. Untuk pemula, ini akan menjadi langkah pertama menuju "JavaScript Universe", yang berpengalaman akan dapat menyegarkan kembali pengetahuannya.
JavaScript memiliki nasib yang sangat mengejutkan. Dia beralih dari bahasa yang paling disalahpahami menjadi bahasa yang paling menakjubkan. Dia memiliki masa kecil yang sulit:
Awalnya, Penulis ingin menulis bahasa fungsional. Tetapi para manajer ingin mendapatkan, berorientasi objek "biasa". Dan untuk memudahkan menemukan pengembang untuk bahasa yang baru dibuat, mereka memutuskan untuk membuat sintaksnya mirip dengan Java dan bahkan membuat namanya mirip.
Tapi ceritanya tidak berakhir di situ. Java, JavaScript adalah merek dagang dari Sun (dan sekarang Oracle). Microsoft tidak dapat menggunakan nama JavaScript (Netcape dan Sun berteman melawan Microsoft). Akibatnya, Microsoft memutuskan untuk merekayasa balik JavaScript dan menyebutnya JScript. Mereka melakukan rekayasa balik, dan melakukannya dengan sangat baik sehingga mereka bahkan menghilangkan semua bug dalam implementasinya. Kemudian mereka memutuskan untuk membuat standar dan menyebutnya ECMAScript.

Bagian yang buruk

Karena fakta bahwa bahasa tersebut ditulis dalam waktu hampir dua minggu (ini sangat sedikit), sejumlah bug diterima di dalamnya. Dan kemudian, ketika bahasa itu keluar dan dirobek oleh Microsoft, sudah terlambat untuk mengubah sesuatu. Beberapa ide adalah warisan berat Jawa, dari mana sintaks bahasa diambil.

Bahasa pemrograman dengan pengetikan yang lemah, dengan kesalahan implementasi, dengan warisan yang berat, dengan fitur bahasa fungsional, hanya membangkitkan satu perasaan - “BAGAIMANA? BAGAIMANA?" . Daftar "mutiara" yang terus diperbarui.

Agar tidak menjadi gila saat bekerja dengan JavaScript, Anda perlu memahami cara kerja pengetikan yang lemah, cara kerja lingkup variabel (variabel global jahat), cara kerja ini, prototipe, dan konstruktor. Jshint juga akan membantu menghindari "bagian buruk" dari bahasa tersebut.

Kisah ini diceritakan lebih detail di kuliah kedua Douglas Crockford. Lebih baik untuk melihat semua 8 episode. Ada subtitle ;).

Hal-hal dasar yang harus dipahami (karena sifat bahasa yang fungsional/asinkron) adalah: apa itu aliran kontrol dan bagaimana cara membantu saat bekerja dengan bahasa asinkron dan bagaimana cara kerja penanganan kesalahan (coba/tangkap tidak selalu membantu ).

Semua orang sudah dapat menarik kesimpulan ini sendiri, tetapi saya akan mengatakannya dengan lantang dan menulis: sekarang Anda dapat mengembangkan aplikasi web dari awal hingga akhir, mengetahui hanya JavaScript (html dan css tidak dihitung).

Satu sendok tar

  • NodeJS belum mencapai versi 1, masih ada beberapa masalah terbuka. Artinya, jelas bagaimana menulis obrolan di NodeJS, tetapi bagaimana dengan proyek besar dan kompleks? ..
  • Tidak ada tutorial normal, karena teknologinya berkembang secara aktif, dan dengan cepat menjadi usang.
  • Pengembangan modul terjadi secara spontan. Banyak modul yang ditinggalkan. Anda pergi ke Github dan melihat bahwa komit terakhir sekitar setahun yang lalu.
  • Tidak ada kerangka kerja "dewasa". Ada proyek "muda" yang menjanjikan. Tetapi tidak ada kerangka kerja tingkat rel.

    Penyimpangan liris

Kemungkinan besar ini adalah "jerawat remaja", yang pada akhirnya akan berlalu. Tapi untuk saat ini masih relevan.

Lebih-lebih lagi

Pengembangan frontend

Akhirnya, pengembangan ujung depan keluar dari Zaman Batu, ketika semuanya dilakukan dengan tangan. Alat otomasi muncul (alat yang ditulis dalam js khusus untuk tujuan ini) dan manajer paket (saya tahu ini bukan manajer pertama, tetapi semoga semua orang akan menggunakannya). Semuanya dibundel bersama dalam proyek yeoman. Jika kita berbicara tentang yeoman, kita tidak bisa tidak menyebutkan: html5-boilerplate dan

MV*

Bersama dengan Ajax, perpustakaan/kerangka kerja "kelas berat" pertama muncul: ExtJS, YUI, dll. Tapi mereka rumit dan tidak nyaman. jQuery di sisi lain lebih ringan dan familier, tetapi karena ini adalah pustaka dan bukan kerangka kerja, jQuery tidak menawarkan cara untuk menyusun kode. Tulang punggung datang untuk menyelamatkan. Banyak kerangka kerja MV* telah mengikuti Backbone. Mereka sudah dibicarakan :, lanjutan dan. Anda juga dapat membandingkan kerangka kerja "dalam praktiknya" dengan membaca kode sumber di todomvc .

Tapi apa yang bisa dilakukan Meteor, tidak ada teknologi lain yang bisa menawarkan: penggunaan kembali kode secara lengkap dari server ke klien (atau sebaliknya), dan gerobak sihir kecil (pengikatan data, pemuatan ulang panas klien...).
Satu-satunya keuntungannya juga kerugiannya. Kode klien dan server tidak terputus. Meteor sangat tidak cocok untuk kasus-kasus di mana klien dibuat menggunakan teknologi yang berbeda. Misalnya, klien seluler atau desktop asli.
Ngomong-ngomong, di Meteor derby pesaing terdekat kami menyelesaikan masalah ini. Karena mereka menggunakan Express dan lebih sedikit sihir, Anda dapat melampirkan REST API ke dalamnya.
Kalau dipikir-pikir, ini bukan upaya pertama untuk menjauh dari pendekatan klien-utara klasik. Sebelumnya ada misalnya GWT. Tapi semua upaya sebelumnya kurang spektakuler dan itu bukan JavaScript.

Seluler

JS tidak hanya berhasil masuk ke browser seluler dan bertahan dari Flash, tetapi juga mengklaim sebagai tempat aplikasi asli. Ini menjadi mungkin berkat

Internet modern tidak terpikirkan tanpa skrip. Belajar menulis dalam JavaScript.

Jika Alkitab ditulis untuk Internet, itu akan dimulai seperti ini:

Pertama ada surat. Dan para insinyur melihat bahwa itu bagus. Dan mereka menciptakan WWW dengan hyperlink. Dan para insinyur melihat bahwa ini juga bagus. Dan kemudian mereka membuat bahasa JavaScript untuk merevitalisasi halaman.

Inilah yang sebenarnya terjadi. JavaScript diciptakan untuk "menghidupkan kembali" HTML. Skrip JavaScript ditulis langsung ke teks HTML atau disimpan dalam file terpisah, seperti styles css. Mereka dieksekusi segera setelah halaman dimuat ke browser.

Bahkan bahasanya sendiri pada awalnya disebut Skrip langsung. Kemudian diubah namanya menjadi JavaScript, karena mereka berencana untuk menautkannya dengan bahasa tujuan umum Java. Tapi sekarang mereka praktis tidak memiliki kesamaan, dan JavaScript adalah bahasa pemrograman yang sepenuhnya independen dengan spesifikasi ECMAScript yang jelas.

Secara teknis, JavaScript adalah merek dagang dari Oracle, dan bahasanya adalah "ekstensi" dari ECMAScript, bersama dengan JScript dan ActionScript Microsoft, tetapi itu lebih merupakan kekhasan pemilik merek dagang. Hal utama adalah ECMAScript gratis bukan milik siapa pun.

Seiring waktu, lingkup pengaruh JavaScript diperluas secara signifikan. Itu mulai digunakan tidak hanya untuk skrip di halaman HTML, tetapi juga untuk aplikasi web besar yang serius dan seluruh program yang berjalan di browser. Ada alat untuk "mengemas" program ini dengan cara khusus dan menjalankannya secara terpisah dari browser. Ini adalah kompiler dan juru bahasa, yang dibahas lebih rinci dalam kursus pelatihan "" dan "".

Aplikasi JavaScript berjalan di lingkungan apa pun yang memiliki juru bahasa yang sesuai.

Sejauh ini, kami hanya tertarik pada browser dan halaman HTML.

Bagaimana melakukan JavaScript? Menulis naskah dasar tidak lebih sulit daripada menulis naskah sederhana. HTML-halaman, karena skrip JavaScript ditulis dalam teks biasa, artinya, dapat dibuat secara harfiah di Notepad yang sama, kemudian disimpan dalam file terpisah atau dimasukkan ke dalam badan HTML-dokumen. Hal-hal paling sederhana JavaScript dibuat sangat mudah.

Cara menulis JavaScript

Sebagai contoh, mari buat skrip sederhana untuk dieksekusi oleh Windows Script Server. Skrip ini dapat ditulis langsung di Notepad dan dijalankan tanpa browser.

wscript. gema(" Hei SkillBox!")

Kami menulis teks ini di "Notepad", lalu simpan file dengan nama skillbox.js dan lari masuk "Penjelajah" Windows.

Skrip serupa dapat ditulis langsung di kode halaman HTML antara tag . Di sana Anda sudah bisa menggunakan metode JavaScript biasa, bukan metodenya gema objek tertentu WScript. Mari kita lihat beberapa metode standar untuk input dan output di browser.

peringatan()

metode peringatan() menampilkan jendela dengan tombol OK. Sebuah pesan ditampilkan di jendela, yang ditunjukkan dalam tanda kurung. Misalnya, "Hei Kotak Keterampilan!". Artinya, dalam hal ini, browser melakukan hal yang persis sama seperti yang dilakukan server skrip sebelumnya Windows.

Contoh-contoh ini juga dapat ditulis di Notepad, hanya disimpan dalam file dengan ekstensi HTML. Misalnya, skillbox.htm.

<html>
<naskah>
peringatan(" Hei Skillbox.")
naskah>
html>

Hasil:

Sebagai argumen peringatan() Anda tidak hanya dapat menentukan teks tertentu, tetapi juga hasil perhitungan atau pemrosesan data lainnya. Misalnya, waspada(x), di mana x dihitung secara terpisah.

mengonfirmasi()

metode mengonfirmasi() menampilkan jendela yang sama dengan pesan, tetapi dengan dua tombol - "OK" dan "Cancel". Bergantung pada tombol mana yang diklik pengguna, metode ini juga akan kembali BENAR, atau PALSU. Server menerima nilai pengembalian ini dari pengguna dan melakukan beberapa tindakan berdasarkan respons.

Sintaksnya sama, hanya pilihan yang diasumsikan secara logis di sini, sehingga pengguna diberi pertanyaan.

<html>
<naskah>
mengonfirmasi(" Hei Skillbox.")
naskah>
html>

Hasil:

mengingatkan()

metode mengingatkan() menampilkan kotak dialog dengan pesan dan bidang teks tempat pengguna memasukkan data. Ada juga dua tombol "OK" dan "Cancel". Saat menekan tombol pertama, metode mengembalikan teks yang dimasukkan ke server, dan saat menekan tombol kedua, mengembalikan nilai boolean PALSU.

Sintaksnya di sini adalah:

mengingatkan( pesan, input_field_value)

Nilai kolom input bersifat opsional. Di sana Anda dapat memasukkan teks yang awalnya dimasukkan ke dalam bidang untuk kenyamanan pengguna.

<html>
<naskah>
mengingatkan(" Katakan halo pada Skillbox", "Halo")
naskah>
html>

Hasil:

Kemungkinan modern JavaScript jauh melampaui input / output data primitif melalui formulir. Kami telah memberikan metode ini hanya sebagai contoh paling sederhana. Di samping itu, JavaScript memungkinkan Anda menanggapi tindakan pengguna. Misalnya pada gerakan mouse atau menekan tombol tertentu. JavaScript sering digunakan untuk menyediakan operasi asinkron ( Teknologi AJAX) saat informasi di halaman diperbarui tanpa memuat ulang. Dalam mode ini, data dikirim ke server dan diunduh dari sana secara interaktif. Di samping itu, JavaScript mampu memanipulasi HTML-elemen pada halaman (buat dan sembunyikan tag, dll.) dan lakukan lebih banyak lagi.

Alat yang Berguna

Konsol Pengembang

Semua browser populer memiliki konsol pengembang khusus. Ini menunjukkan kode skrip pada halaman dan juga menampilkan informasi berguna lainnya. DI DALAM Chrome, Firefox Dan YAITU konsol pengembang terbuka saat hotkey ditekan F12, V Safari - Ctrl+Shift+I atau Ctrl+Alt+C. Di tangkapan layar, skrip ditampilkan di kanan atas, bersama dengan elemen lain dari halaman web.

Konsol Pengembang di Chrome.

Editor kode

Di masa mendatang, untuk pemrograman yang nyaman, Anda perlu menginstal editor kode atau IDE (Lingkungan Pengembangan Terpadu), lingkungan pengembangan yang terintegrasi. IDE adalah editor dengan fungsionalitas tambahan, yang terintegrasi dengan alat berguna lainnya, mendukung koneksi modul tambahan, dan sebagainya.

Ada jutaan halaman web di Internet yang dihosting di situs yang memiliki tujuan berbeda. Beberapa dari mereka menarik dan yang lainnya tidak.

Yang terlihat bagus, mudah digunakan, dan cukup interaktif untuk membuat Anda terlibat dalam waktu lama adalah yang menggunakan JavaScript. Untuk apa ini? Ayo cari tahu.

Ini adalah bahasa multi-paradigma, yang berarti mendukung pemrograman berorientasi objek, fungsional, dan imperatif. Meskipun namanya menunjukkan Java, sintaksnya berasal dari bahasa C.

Sebagian besar halaman web dibangun dalam format kode HTML. Ini adalah bahasa yang sangat sederhana yang memungkinkan Anda menambahkan berbagai elemen ke halaman web, yang membuatnya menarik dan mudah dibaca. Kode HTML memungkinkan Anda untuk menggunakan gambar sebaris, warna, dan animasi dasar untuk halaman web, sehingga menyempurnakan tampilannya. Menggunakan CSS (Cascading Style Sheets) memberikan lebih banyak fleksibilitas dan mengurangi jumlah keseluruhan kode dan kompleksitas halaman web. Dengan cara ini, menyajikan konten halaman di berbagai perangkat seperti ponsel, tablet, dan komputer desktop menjadi lebih mudah. JavaScript terutama digunakan untuk menambahkan elemen interaktif ke halaman web, menjadikannya lebih ramah pengguna dan menarik. Mari kita lihat apa yang dapat dilakukannya dan bagaimana penggunaannya.

Apa itu JavaScript?

Ini adalah bahasa pemrograman, biasanya dijalankan di sisi klien. Ini digunakan untuk interaksi pengguna. Ini juga digunakan dalam pengembangan game, aplikasi desktop dan seluler, dalam pembuatan dokumen pdf dan widget desktop. Browser web memiliki dukungan asli untuk bahasa ini.

Contoh 1

Contoh pertama cukup sederhana dan biasanya digunakan dalam item menu. Jika Anda menggerakkan mouse ke tautan atau tombol menu tertentu, itu berubah warna. Perubahan warna pada tindakan pengguna ini dapat digunakan untuk berbagai efek visual serta meningkatkan tampilan dan nuansa halaman web. Pada contoh di bawah ini, arahkan kursor ke tombol pilihan Anda dan lihat warnanya berubah.

Merah
Hijau
Biru