Rumah hujung hadapan web tutorial js Peranan tag skrip dalam JS

Peranan tag skrip dalam JS

Feb 22, 2024 pm 07:48 PM
Pemuatan tak segerak Malas memuatkan pembangunan JavaScript

Peranan tag skrip dalam JS

Peranan tag skrip dalam JS

Dalam pembangunan web, JavaScript (pendek kata JS) ialah bahasa skrip yang agak biasa. Teg skrip ialah cara untuk membenamkan kod JavaScript dalam dokumen HTML. Artikel ini akan memperkenalkan secara terperinci peranan teg skrip dan contoh kod khususnya.

1. Peranan tag skrip

  1. Skrip terbenam: Teg skrip ialah cara untuk membenamkan kod JavaScript ke dalam dokumen HTML. Dengan menulis kod JavaScript dalam teg skrip, anda boleh melaksanakan fungsi kaya, seperti pengesahan borang, interaksi halaman, pemprosesan acara, dsb.
  2. Memperkenalkan skrip luaran: Teg skrip boleh digunakan untuk memperkenalkan fail skrip JavaScript luaran. Dengan menentukan laluan ke fail skrip luaran melalui atribut src, halaman web boleh mencapai penggunaan semula kod dan mengurangkan saiz dokumen HTML.
  3. Pemuatan malas: Atribut async dan defer dalam teg skrip boleh mengawal cara skrip dimuatkan. Atribut async menunjukkan bahawa skrip dimuatkan secara tidak segerak, dilaksanakan serta-merta selepas dimuatkan, dan tidak menghalang penghuraian dokumen HTML. Atribut tangguh menunjukkan bahawa skrip ditangguhkan dan akan dilaksanakan serta-merta selepas dokumen HTML dihuraikan.

2. Contoh kod khusus

  1. Skrip terbenam

    fungsi sayHello() {
    alert('Hello, World!');
    }
    sayHello();
    Kod mentakrifkan fungsi bernama sayHello dalam teg skrip, dan dengan memanggil fungsi tersebut, kotak gesaan muncul untuk memaparkan "Hello, World!". Kod ini boleh dimasukkan terus di mana-mana dalam dokumen HTML untuk mencapai kesan interaktif yang sepadan.
  2. Memperkenalkan skrip luaran

  3. Kod di atas akan memperkenalkan fail skrip luaran bernama example.js, yang perlu berada dalam direktori yang sama dengan dokumen HTML . Sebarang kod JavaScript yang sah boleh ditulis dalam fail example.js.
  4. Malas memuat


  5. Kod di atas menggunakan atribut async dan defer masing-masing Untuk melakukan pemuatan tak segerak dan pemuatan malas skrip. Atribut async menunjukkan bahawa skrip dimuatkan dan dilaksanakan secara tidak segerak, manakala atribut tangguh menunjukkan bahawa skrip ditangguhkan dimuatkan dan dilaksanakan selepas dokumen HTML dihuraikan.
Perlu diambil perhatian bahawa atribut async hanya boleh digunakan apabila skrip tidak bergantung pada skrip atau kandungan dokumen lain sesuai untuk situasi yang perlu untuk memastikan skrip dimuatkan dan dilaksanakan mengikut urutan .

Ringkasan:

teg skrip memainkan peranan penting dalam pembangunan JavaScript. Melalui teg skrip, kami boleh membenamkan skrip dalam dokumen HTML untuk mencapai fungsi yang kaya. Pada masa yang sama, teg skrip juga boleh memperkenalkan fail skrip JavaScript luaran untuk menjadikan kod halaman web lebih ringkas dan jelas. Di samping itu, anda juga boleh menggunakan atribut async dan defer untuk mengawal kaedah pemuatan skrip untuk mencapai pemuatan tak segerak dan pemuatan skrip tertangguh.

Penggunaan tag skrip yang berkesan akan membantu meningkatkan interaktiviti dan pengalaman pengguna halaman web, meningkatkan kecekapan pembangunan dan mengurangkan pertindihan kod. Saya harap artikel ini membantu anda memahami peranan tag skrip.

Atas ialah kandungan terperinci Peranan tag skrip dalam JS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apakah seni bina dan prinsip kerja Spring Data JPA? Apakah seni bina dan prinsip kerja Spring Data JPA? Apr 17, 2024 pm 02:48 PM

SpringDataJPA adalah berdasarkan seni bina JPA dan berinteraksi dengan pangkalan data melalui pemetaan, ORM dan pengurusan transaksi. Repositorinya menyediakan operasi CRUD, dan pertanyaan terbitan memudahkan akses pangkalan data. Selain itu, ia menggunakan pemuatan malas untuk hanya mendapatkan semula data apabila perlu, sekali gus meningkatkan prestasi.

Perbandingan mendalam: perbezaan fungsi antara VSCode dan Visual Studio Perbandingan mendalam: perbezaan fungsi antara VSCode dan Visual Studio Mar 25, 2024 pm 05:33 PM

Tajuk: Perbandingan Mendalam: Perbezaan Fungsian antara VSCode dan Visual Studio, Contoh Kod Khusus Diperlukan Sama ada menulis kod hadapan atau kod belakang, pembangun selalunya perlu memilih persekitaran pembangunan bersepadu (IDE) yang sesuai dengan mereka untuk meningkatkan kecekapan kerja . Di antara banyak IDE, VSCode dan Visual Studio ialah dua produk popular. Artikel ini akan membandingkan secara mendalam perbezaan fungsi antara kedua-dua IDE dan menunjukkannya melalui contoh kod tertentu. VSCode telah dilancarkan oleh Microsoft

Apa yang perlu dilakukan jika imej html terlalu besar Apa yang perlu dilakukan jika imej html terlalu besar Apr 05, 2024 pm 12:24 PM

Berikut ialah beberapa cara untuk mengoptimumkan imej HTML yang terlalu besar: Optimumkan saiz fail imej: Gunakan alat pemampatan atau perisian penyuntingan imej. Gunakan pertanyaan media: Ubah saiz imej secara dinamik berdasarkan peranti. Laksanakan pemuatan malas: hanya muatkan imej apabila ia memasuki kawasan yang boleh dilihat. Gunakan CDN: Edarkan imej kepada berbilang pelayan. Gunakan pemegang tempat imej: Paparkan imej pemegang tempat semasa imej sedang dimuatkan. Gunakan lakaran kenit: Memaparkan versi imej yang lebih kecil dan memuatkan imej bersaiz penuh pada klik.

Adakah layui merupakan rangka kerja hadapan? Adakah layui merupakan rangka kerja hadapan? Apr 01, 2024 pm 11:36 PM

jawapannya ialah. Layui ialah rangka kerja bahagian hadapan yang menyediakan satu set komponen dan alatan yang dipratentukan untuk membina aplikasi web moden, termasuk ciri seperti komponen antara muka, manipulasi data, carta, animasi dan reka bentuk responsif.

Bagaimanakah Hibernate mengoptimumkan prestasi pertanyaan pangkalan data? Bagaimanakah Hibernate mengoptimumkan prestasi pertanyaan pangkalan data? Apr 17, 2024 pm 03:00 PM

Petua untuk mengoptimumkan prestasi pertanyaan Hibernate termasuk: menggunakan pemuatan malas untuk menangguhkan pemuatan koleksi dan objek yang berkaitan untuk menggabungkan operasi kemas kini, memadam atau memasukkan menggunakan cache peringkat kedua untuk menyimpan objek yang sering ditanya dalam ingatan; , dapatkan semula entiti dan entiti yang berkaitan dengannya untuk mengelakkan mod pertanyaan SELECTN+1 untuk mendapatkan data besar dalam blok untuk meningkatkan prestasi pertanyaan tertentu;

Penyahkodan kesesakan prestasi Laravel: Teknik pengoptimuman didedahkan sepenuhnya! Penyahkodan kesesakan prestasi Laravel: Teknik pengoptimuman didedahkan sepenuhnya! Mar 06, 2024 pm 02:33 PM

Penyahkodan kesesakan prestasi Laravel: Teknik pengoptimuman didedahkan sepenuhnya! Laravel, sebagai rangka kerja PHP yang popular, menyediakan pembangun dengan fungsi yang kaya dan pengalaman pembangunan yang mudah. Walau bagaimanapun, apabila saiz projek meningkat dan bilangan lawatan meningkat, kami mungkin menghadapi cabaran kesesakan prestasi. Artikel ini akan menyelidiki teknik pengoptimuman prestasi Laravel untuk membantu pembangun menemui dan menyelesaikan masalah prestasi yang berpotensi. 1. Pengoptimuman pertanyaan pangkalan data menggunakan pemuatan tertunda Eloquent Apabila menggunakan Eloquent untuk menanya pangkalan data, elakkan

Apakah kelemahan rangka kerja ORM Hibernate? Apakah kelemahan rangka kerja ORM Hibernate? Apr 18, 2024 am 08:30 AM

Rangka kerja HibernateORM mempunyai kekurangan berikut: 1. Penggunaan memori yang besar kerana ia menyimpan hasil pertanyaan dan objek entiti 2. Kerumitan tinggi, memerlukan pemahaman mendalam tentang seni bina dan konfigurasi 3. Kelewatan pemuatan tertunda, yang membawa kepada kelewatan yang tidak dijangka; . Kesesakan prestasi, pada bulan Mei berlaku apabila sejumlah besar entiti dimuatkan atau dikemas kini pada masa yang sama 5. Pelaksanaan khusus vendor, mengakibatkan perbezaan antara pangkalan data.

c# Apakah itu delegasi dan apakah masalah yang diselesaikannya? c# Apakah itu delegasi dan apakah masalah yang diselesaikannya? Apr 04, 2024 pm 12:42 PM

Perwakilan ialah jenis rujukan selamat jenis yang digunakan untuk menghantar penunjuk kaedah antara objek untuk menyelesaikan masalah pengaturcaraan tak segerak dan pengendalian acara: Pengaturcaraan tak segerak: Perwakilan membenarkan kaedah dilaksanakan dalam urutan atau proses yang berbeza, meningkatkan responsif aplikasi. Pengendalian acara: Perwakilan memudahkan pengendalian acara, membenarkan acara seperti klik atau pergerakan tetikus dibuat dan dikendalikan.

See all articles