Cara Menautkan JavaScript ke HTML dan CSS
Diterbitkan: 2022-02-25Membuat, Merancang, dan memulai Halaman Web atau Situs Web Anda sederhana. Jika Anda melihat melewati semua teks, kode, dan skrip yang biasanya memadati dan mengisi layar Anda. Bahasa HTML, CSS, dan JavaScript dikenal dan digunakan secara luas. Untuk lebih memahami ini, kita memerlukan beberapa definisi tentang 3 ini yang dibuat relatable dan lugas.
Sebelum kita melanjutkan saya ingin memiliki kesempatan untuk berterima kasih kepada NaturHandel.dk dan Virksomhedsoplysninger.dk untuk membuat artikel ini mungkin untuk dibuat.
Jadi, izinkan kami untuk memperkenalkan Halaman Web Anda sebagai karya seni. Karya seni ini memiliki 3 elemen untuk menjadikannya sebuah mahakarya. Ini dapat dicapai ketika seseorang memastikan bahwa semua instrumen yang Anda butuhkan untuk mulai mengukir, melukis, atau membuat karya Anda direncanakan dan ditentukan secara menyeluruh tentang apa yang akan mereka sumbangkan pada seni Anda. Ini terdiri dari (HTML) Kertas atau dasar karya seni Anda. (CSS) Warna dan desain digabungkan dalam basis Anda dan, akhirnya, (JavaScript) tujuan dan fungsi karya seni ini. Dengan ketiganya hadir, hubungan yang harmonis dibangun untuk semua orang untuk melihat, menggunakan dan menjadi bagian dari.
Mari kita uraikan lebih lanjut, sehingga kita dapat sepenuhnya mengaitkan hubungan yang dimiliki bahasa-bahasa ini, akankah kita:
HTML
- Bahasa Markup Hypertext Anda
- Kanvas kosong dengan semua set standar, karya Anda akan mengikuti.
- Tunjukkan di sini teks, judul, dan tindakan penting Anda untuk Halaman Web Anda
- Ini adalah bagian di mana semua bagian Anda yang lain akan dihosting, ditentukan, atau digabungkan
- Di mana UI hadir
CSS
- Lembar Gaya Cascading
- Di sinilah Anda sekarang dapat mengakses, mendesain, memutuskan ukuran dan menambahkan warna pada karya seni atau Halaman Web Anda berdasarkan ide atau draf pertama yang telah Anda buat di kanvas Anda. Semua elemen estetika dapat diarahkan ke sini dan masukan di sini untuk dilihat oleh audiens Anda.
JavaScript
- Bahasa yang Anda gunakan di Halaman Web atau karya seni Anda yang mendefinisikan grafik, animasi, dan suara
- Jika Anda ingin karya seni Anda memiliki bonus fitur dan fungsi lain, ini adalah bagian yang bertanggung jawab untuk itu.
- Anggap saja sebagai bonus dan tambahkan suar ke karya seni Anda.
- Ini bertugas memfasilitasi langkah selanjutnya untuk tombol, tautan, ikon, dan apa pun yang berkaitan dengan apa yang dapat diklik di halaman Anda
- Ini mendefinisikan tentang apa karya seni Anda dan untuk apa itu.
Untuk memastikan bahwa karya seni atau Halaman Web Anda memanfaatkan elemen JavaScript Anda dengan sebaik-baiknya, Anda harus memperkenalkan fungsi yang perlu dilakukan dengan jelas di tag Anda. Judul atau teks Anda sekarang dapat mengarahkan Anda ke halaman pop-up berdasarkan tautan/tautan terlampir saat diklik, memutar video, atau menampilkan gambar. Bahasa ini (JavaScript) bertanggung jawab atas fungsionalitas grafis Anda dan semua tindakan lainnya saat teks, tombol, atau ikon diklik pada Halaman Web Anda.
Tetapi untuk mencapai ini, Anda harus menyertakan elemen penghubung dalam perintah Anda yang akan memungkinkan bahasa Anda memahami fungsionalitas yang ingin Anda jalankan. Kunci untuk membuat interaksi apa pun berfungsi di antarmuka pengguna Anda ditentukan oleh keberadaan "tag" Anda. Tag ini adalah cara situs Anda menemukan lokasinya, memahami apa yang Anda inginkan, dan ritme atau kecepatan yang perlu diambil laman Anda saat dimuat di browser Anda. Tag Anda dapat dimasukkan atau disatukan di kepala, badan, atau file eksternal yang ingin Anda tambahkan ke situs Anda. Karena ini adalah metode yang paling umum (Tag Skrip), ada cara lain untuk menautkan JavaScript Anda tergantung pada preferensi dan antarmuka Anda.
Berikut adalah catatan rinci tentang bagaimana Anda dapat menautkan JavaScript Anda (dengan HTML dan CSS):
HTML dengan Tag Skrip
<title>JavaScript</title>
Dalam contoh ini, Anda dapat menautkan JavaScript Anda melalui HTML dengan cara ini. Saat dimuat, ini terlihat sebagai "JavaScript" sebagai judul di halaman web Anda.
HTML melalui Pemrograman Kode
Ini lebih banyak digunakan untuk tindakan dinamis di halaman seperti transisi warna, ukuran teks, animasi, dll. Ini dapat dimanipulasi dalam bahasa Anda melalui <script type=”text/JavaScript”> ('<body style=”background-color : (masukkan warna yang Anda inginkan)”>')
Ingat, Anda dapat menggunakan kode JavaScript internal di bagian ini kemudian mengonversinya juga jika ada kesalahan karena Anda masih dapat memanipulasi fungsi ini dengan cara berbeda yang ditunjukkan berikutnya.
HTML melalui File Terpisah
Anda juga dapat mencobanya sebagai file terpisah tanpa tag skrip melalui javascript.js. tetapi teknik ini agak rumit karena membingungkan di mana browser menempatkan kode dan dapat menyebabkan kesalahan.
Untuk menghindari kesalahan ini saat menggunakan metode ini, lampirkan jalur untuk mengaktifkan arah melalui <script src=(masukkan “PATH”)>
CSS melalui Tag Gaya
Di badan HTML Anda, tambahkan sesuatu yang dapat dikaitkan dengan gaya yang menyertakan penautan keduanya (atau bagaimana Anda ingin teks Anda ditampilkan) melalui <title>Menautkan ke CSS dan JavaScript</title>
Elemen tautan Anda dengan tag JavaScript harus ditempatkan di antara dokumen sumber dan
HTML. Dengan cara ini, hubungan setiap kode yang sesuai dikaitkan secara adil.
Meskipun disarankan bahwa ini tidak harus dilakukan dalam banyak kasus karena beberapa fungsi dalam CSS dan JavaScript dapat memberikan apa yang dikaitkan dengannya, itu masih mungkin.
Warna latar belakang halaman Anda, ukuran teks atau font Anda, dan dinamika teks dapat dimanipulasi di sini.
Eksekusi manipulasi gambar situs Anda atau perubahan konten dinamis dan validasi formulir dapat ditambahkan ke fungsi halaman Web Anda secara total menggunakan parameter ini. Jadikan karya seni atau Halaman Web Anda lebih komprehensif melalui ini. Perintah ini akan memungkinkan Anda untuk mengimpor file eksternal dan internal untuk melampirkannya dalam kode JavaScript Anda, seperti dalam kasus HTML tetapi tidak seperti yang diperlukan dalam CSS Anda. Jadi ingat, selalu masukkan skrip atau tag terlebih dahulu sebelum menyematkan JavaScript Anda sehingga bahasa Anda akan dipahami oleh situs atau HTML Anda dan akan tahu bagaimana mereka dapat langsung menerjemahkan fungsi yang Anda manipulasi untuk dijalankan. Halaman Anda sangat bergantung pada logika bahwa perintah Anda memiliki input antara tag skrip, kode, dan pemrograman untuk mengambil tindakan yang sesuai langkah demi langkah.