Jika anda baru menggunakan JavaScript, anda mungkin telah belajar banyak tentang cara jenis data, logik, fungsi, dsb. Ini bagus; untuk menggunakan JS dalam projek yang lebih rumit suatu hari nanti, anda perlu bermula dengan asasnya. Walau bagaimanapun, bergantung pada rentang perhatian anda, anda mungkin akan mula merasakan keinginan yang kuat untuk meletakkan kemahiran JS anda untuk berfungsi pada tapak web sebenar. Melakukannya boleh menjadi agak rumit (tetapi tidak serumit Ungkapan Biasa, amirite), tetapi salah satu yang lebih mudah yang anda boleh mulakan ialah, anda rasa, penjana warna rawak. Dalam artikel ini, saya akan membawa anda melalui langkah yang saya gunakan untuk membinanya sendiri.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA=Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Random-Color Generator</title> <!--Link stylesheets--> <link rel="stylesheet" href="./styling.css"> <link rel="stylesheet" href="./responsive.css"> </head>
Jika anda menggunakan Kod VS, anda boleh menaip '!' ke dalam dokumen HTML kosong, kemudian tekan 'Enter' untuk menambah bahagian ini (tidak pasti tentang editor teks lain) jika anda belum mengetahuinya. Di bawah boilerplate, saya menambah pautan ke dokumen CSS yang saya gunakan untuk projek ini. Saya syorkan simpan CSS anda dalam fail berasingan, supaya fail HTML anda tidak menjadi terlalu besar & rumit. Memandangkan JavaScript yang akan kami tulis tidak terlalu panjang, saya akan menambahkannya terus pada fail HTML di dalam
<script type="text/javascript" src="main.js"></script>
<body onload="getNewColor()">
<div>
<p>Now that we’ve added the boilerplate HTML & linked our CSS documents in the <head>, let’s add the body & build out our HTML. As you can see, the getNewColor() function will run whenever the page loads. More on this function in the following steps.</p>
<p>In the picture above, I add a <div>, which contains a couple of headers, letting the user know where they are & what to do. I then add another <div>, which contains a <span> tag, which will eventually be populated with a HEX code and will display as text on the page. Next, I insert a button that the user clicks to generate a new HEX code. This is done by the getNewColor() function, which I will explain soon.</p>
<h2>
3. Add JavaScript!
</h2>
<p>Now we are at the point where the real magic starts to happen. Are you excited? I can tell. Here’s how you do that:<br>
</p>
<pre class="brush:php;toolbar:false"><script>
function getNewColor() {
let symbols = "0123456789ABCDEF";
let color = "#";
Untuk program yang agak mudah seperti ini, kita boleh mencapai apa yang kita perlukan dengan hanya satu fungsi, fungsi getNewColor() yang disebutkan di atas. Untuk penjana ini, mari gunakan kod HEX untuk menentukan warna, tetapi menggunakan nilai RGB juga boleh dilakukan.
Mari kita letakkan semua aksara HEX yang mungkin (integer 0–9 & huruf A-F) dalam bentuk rentetan, ke dalam pembolehubah yang dipanggil simbol.
Kemudian, mari kita mulakan pembolehubah warna dengan tanda cincang dalam bentuk rentetan. Pembolehubah ini akan diubah dalam gelung yang diterangkan di bawah.
Sekarang mari kita buat gelung yang berjalan 6 kali, kerana terdapat 6 nilai dalam kod HEX. Untuk setiap lelaran gelung, satu nilai rawak daripada rentetan simbol ditambahkan pada warna pembolehubah, yang, jika anda ingat, bermula dengan # dalam bentuk rentetan. Pada ketika ini, apabila kita memanggil getNewColor(), kita mendapat kod HEX baharu. Sekarang, mari gunakan kod itu pada halaman HTML kami.
Menurut pengalaman saya, ia adalah cara terbaik untuk meletakkan
Sejuk, kami kini mempunyai fungsi yang memberi kami kod HEX rawak. Walau bagaimanapun, ini tidak berguna melainkan kami menerapkannya pada HTML kami. Dalam kes ini, adalah baik untuk menukar latar belakang keseluruhan halaman, supaya pengguna boleh melihat pratonton warna rawak dan meletakkan kod HEX dalam format teks, supaya mereka boleh menyalinnya. Mula-mula kita perlu mentakrifkan gelagat ini dalam fungsi kita:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA=Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Random-Color Generator</title> <!--Link stylesheets--> <link rel="stylesheet" href="./styling.css"> <link rel="stylesheet" href="./responsive.css"> </head>
Masih beroperasi dalam fungsi getNewColor(), kami boleh mengakses sifat penggayaan latar belakang dengan baris pertama kod yang anda lihat dalam foto di atas. Kami juga boleh menggunakan backgroundColor, yang, dengan cara itu, diterjemahkan kepada warna latar belakang dalam CSS. Dalam langkah ini, kami menetapkan warna pembolehubah, yang kami takrifkan secara rawak dalam gelung, sebagai warna latar belakang halaman.
Dalam baris kedua kod, kami mengakses yang ditakrifkan sebelum ini; tag dengan idnya, 'hex'. Untuk menambah warna pembolehubah dalam bentuk teks, kita boleh menggunakan kaedah .textContent, yang saya gunakan di sini atau kaedah .innerHTML, untuk menambahkan warna pada tag. Lihat pautan di penghujung artikel ini untuk membaca lebih lanjut tentang perbezaan antara ini. Dalam cara kami meletakkan HTML kami di atas, teks ini akan muncul terus di atas butang supaya pengguna dapat melihat warna yang tepat dipaparkan & menyalinnya jika mereka mahu.
Secara keseluruhan, JS kami kelihatan seperti ini:
<script type="text/javascript" src="main.js"></script>
Tiada gunanya membuat fungsi jika kita tidak pernah menjalankannya, jadi mari kita beritahu program kita apabila fungsi getNewColor() kita harus dipanggil. Dalam contoh ini, mari jalankan getNewColor() apabila halaman dimuatkan & apabila butang ‘Dapatkan Warna Baharu!’ diklik. Begini cara kami melakukannya:
<body onload="getNewColor()">
<div>
<p>Now that we’ve added the boilerplate HTML & linked our CSS documents in the <head>, let’s add the body & build out our HTML. As you can see, the getNewColor() function will run whenever the page loads. More on this function in the following steps.</p>
<p>In the picture above, I add a <div>, which contains a couple of headers, letting the user know where they are & what to do. I then add another <div>, which contains a <span> tag, which will eventually be populated with a HEX code and will display as text on the page. Next, I insert a button that the user clicks to generate a new HEX code. This is done by the getNewColor() function, which I will explain soon.</p>
<h2>
3. Add JavaScript!
</h2>
<p>Now we are at the point where the real magic starts to happen. Are you excited? I can tell. Here’s how you do that:<br>
</p>
<pre class="brush:php;toolbar:false"><script>
function getNewColor() {
let symbols = "0123456789ABCDEF";
let color = "#";
Anda boleh melakukan bahagian ini mengikut kehendak anda atau tidak sama sekali, tetapi berikut ialah penggayaan yang saya gunakan pada projek ini:
// continuing getRandomColor()...
document.body.style.background = color;
document.getElementByID("hex").textContent = color;
</script>
</body>
</html>
Jika anda mengikut langkah di atas dengan betul, warna rawak akan dijana apabila halaman dimuatkan, dan juga apabila anda mengklik butang. Latar belakang halaman akan ditetapkan kepada warna rawak & pengguna boleh menyalin kod HEX.
Terima kasih kerana membaca sejauh ini! Saya harap anda mendapati ia membantu. Ingat, anda boleh membaca artikel & mengikuti tutorial kadangkala, tetapi anda hanya perlu melakukan ini untuk mempelajari konsep. Sebaik sahaja anda fikir anda telah memahami konsepnya, cuba buat program sendiri. Tidak, anda mungkin tidak akan menyelesaikan semuanya pada kali pertama, tetapi menghadapi masalah & memikirkan cara menyelesaikannya sendiri, menggunakan konsep yang telah anda pelajari, adalah cara untuk menjadi seorang pengekod yang lebih baik.
Jika anda mendapati artikel ini membantu, saya menghargai komen yang bagus atau beberapa tepukan, supaya saya dapat mengetahui kandungan yang orang dapati berguna, dan supaya saya dapat menumpukan pada menulis kandungan itu pada masa hadapan.
Seperti biasa, selamat mengekod!
Lihat projek ini sedang beraksi
Pautan ke repo GitHub projek ini
Pautan ke artikel tentang perbezaan antara .innerHTML & .textContent
Asalnya diterbitkan di Medium for JavaScript dalam Bahasa Inggeris Biasa pada 15 Ogos 2022
Atas ialah kandungan terperinci Mari Cipta Penjana Warna Rawak!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
