Tutorial ini ditujukan untuk pemula yang ingin belajar bagaimana membuat aplikasi web sederhana menggunakan JavaScript. Ini akan membantu anda memahami interaksi antara JavaScript dan dokumen HTML, dan bagaimana ia berfungsi bersama untuk memaparkan perkara di penyemak imbas web untuk dilihat oleh orang.

Sekiranya anda tidak mempunyai pengalaman dalam HTML dan JavaScript, jangan risau Saya akan membimbing anda melalui setiap baris kod, dan menerangkan semuanya secara terperinci. Pada saat anda mencapai akhir pelajaran ini, anda harus mempunyai pemahaman yang lebih baik tentang bagaimana JavaScript berfungsi dengan HTML untuk menjadikan halaman web menjadi interaktif.

Dalam projek ini, kami akan membina penjana kutipan rawak yang memaparkan petikan rawak kepada pengguna setiap kali mereka menekan butang. Untuk memulakan, anda memerlukan tiga perkara penting yang hampir selalu digunakan untuk setiap projek web:

• penyemak imbas web
• penyunting teks
• keinginan untuk membina sesuatu

Untuk tutorial ini saya akan menggunakan penyemak imbas web Google Chrome, Penyunting Teks Sublime 3, dan tentu saja, keinginan saya sendiri untuk membina dan mengajar. Anda boleh menggunakan alat apa sahaja yang anda rasa selesa.

Mari kita mulakan!

Perkara pertama yang akan kita lakukan ialah membuat folder yang akan mengandungi semua fail kita yang membentuk projek. Buat folder kosong di desktop anda dan beri nama "generator kutipan". Buka Teks Sublime dan seret fail ke dalam luhur . Sekarang kita harus mempunyai folder yang boleh diakses melalui bar sisi.

Sebilangan besar projek web terdiri daripada sekurang-kurangnya satu HTML, JavaScript, dan fail CSS. Mari buat fail ini dalam folder "penjana kutipan".

Dalam Teks Luhur,klik kanan folder “generator generator” di bar sisi dan klik buat fail baru . Bar input akan muncul di bahagian bawah untuk menamakan fail. Ketik "index.html" dan tekan enter. Sekarang anda telah membuat fail index.html. Ulangi langkah ini dua kali lagi , tetapi buat fail bernama "javascript.js" dan "style.css" (tanpa tanda petik) . Penting untuk memastikan bahawa apabila anda menamakan fail bahawa hurufnya selalu kecil untuk mengelakkan komplikasi.

Sekarang setelah kita semua menyiapkan fail, mari buat fail HTML kita yang akan berfungsi sebagai asas untuk projek web kita. Kami akan memulakan dengan kod HTML tanpa tulang dalam fail index.html kami sebelum dapat menambahkan apa-apa.

Berikut adalah fail HTML kami yang tidak ada di dalamnya. Anda boleh menganggapnya sebagai kerangka HTML kami yang akan menyimpan semua daging (kandungan), yang akan kami tambahkan kemudian.

Sekarang, kita harus menghubungkan fail JavaScript ke dokumen HTML kita sehingga kod JavaScript kita dapat berinteraksi dengan dokumen HTML. Kami juga akan menambahkan teks dalam tag, tambah a

unsur, buat a elemen dengan nama id "quoteDisplay", dan juga aelemen dengan atribut onclick dengan "newQuote ()" diteruskan ke dalamnya.

Memecahnya

Sekiranya anda bingung bagaimana setiap bahagian kod HTML memenuhi tujuannya, maka saya akan menerangkannya kepada anda di sini. Sekiranya anda tahu dengan tepat apa yang dilakukan oleh setiap elemen dan mengapa ia ada, maka anda boleh melangkau ke bahagian seterusnya untuk meneruskan.

Pertama, kami menambahkan "Quote Gen" antara tanda nama. Tag tajuk mengambil teks di antara itu dan memaparkannya di tab penyemak imbas web anda ketika dibuka.

Semasa langkah pertama, kami juga perlu memastikan untuk memautkan fail javascript.js di bahagian bawah dokumen HTML tepat sebelum penutupan teg.

Kedua, kami mencipta

elemen dengan "Simple Quote Generator" di dalamnya. Ini akan berfungsi untuk menampilkan tajuk di laman web kami.

Kemudian, kami mencipta a elemen dengan atribut id ditetapkan ke "quoteDisplay". A elemen berfungsi sebagai pembahagi untuk dokumen HTML. elemen membantu mengatur kandungan dalam laman web. The id atribut bekerja sebagai pengecam supaya JavaScript boleh merebut dan memanipulasi ia. Dalam hal ini, kita akan menggunakan JavaScript untuk mengambil elemen dengan id "quoteDisplay" untuk meletakkan tanda kutip di dalam unsur.

Selepas itu, kami membuat a elemen dengan atribut onclick dengan "newQuote ()" diteruskan sebagai parameter. Theelemen seperti yang anda duga, adalah butang yang akan melakukan sesuatu apabila anda mengkliknya. The onclick atribut digunakan untuk menetapkan fungsi pada butang, supaya setiap kali anda klik pada butang, ia akan menjalankan fungsi yang telah berlalu ke dalam's onclick atribut.

Dalam kes ini, setiap kali anda mengklik butang, ia akan menjalankan fungsi newQuote (), tentu saja, kita belum menentukan fungsi newQuote (). Sekiranya anda membuka projek dalam penyemak imbas dan menekan butang, ia akan menyebabkan kesalahan dalam konsol kerana fungsi ini tidak ada pada masa ini.

Akhirnya, berikut adalah penyegaran untuk menunjukkan bagaimana fail index.html penuh kami pada masa ini dan bagaimana ia dihasilkan dalam penyemak imbas web. Untuk membuka projek, gunakan penyemak imbas web untuk membuka fail index.html.

Berfikir secara logik menggunakan kod

Akhirnya tiba masanya untuk mula mengerjakan JavaScript di fail javascript.js kami sehingga kami dapat mengembangkan fungsi pembuatan kutipan kami sendiri.

Sekarang, sebelum kita memulakan pengekodan, mari berfikir secara logik tentang bagaimana kita dapat membuat mesin penjana petikan dengan kod. Kita tidak boleh memulakan pengekodan tanpa berfikir terlebih dahulu.

Kita perlu memikirkan apa yang kita mahukan, dan kapan kita menginginkannya. Untuk projek ini, kami mahukan sebut harga! Bilakah kita mahukannya? Kami mahukannya sekarang! Oh, erm ... Maksud saya, kami menginginkannya setiap kali pengguna menekan butang.

Sekarang kita menyelesaikan soalan pertama, kita perlu mengajukan soalan kedua. Apakah petikan? Maksud saya, apa itu?

Terima kasih Jaden! Ya! Petikan terdiri dari huruf, yang terdiri dari kata-kata. Dalam dunia pengaturcaraan, kata-kata diklasifikasikan sebagai rentetan, oleh itu, petikan kami harus berupa string !

Oleh kerana kita tahu bahawa kita akan mempunyai banyak tanda kutip, dan masing-masing akan dipilih secara rawak, pilihan terbaik adalah menyimpan beberapa rentetan dalam array .

Sekiranya anda belum tahu, elemen dalam array diambil dengan memanggil nombor indeks arraynya . Perincian teknikal berada di luar ruang lingkup tutorial ini, tetapi secara sederhana, setiap elemen dalam array ditunjukkan oleh bilangan bulat mengikut urutan kronologi. Elemen pertama array mempunyai nombor indeks 0, setiap elemen selepas itu naik satu.

Untuk mendapatkan petikan rawak dari array, kita sekarang tahu bahawa kita perlu menghasilkan nombor rawak setiap kali pengguna mengklik butang. Kemudian, kami akan menggunakan nombor rawak itu untuk mengambil sebut harga dari tatasusunan dan meletakkan petikan itu ke dokumen HTML, yang pada gilirannya, akan memaparkan petikan pada penyemak imbas kepada pengguna.

Itu sahaja! Kami menyelesaikan bagaimana membuat Random Quote Generator dengan berfikir secara logik dalam kod! Inilah ringkasan logik yang kami buat untuk projek kami:

1. Petikan adalah pelbagai rentetan yang perlu disimpan dalam pelbagai.
2. Setiap kali butang ditekan, nombor bulat secara rawak perlu dihasilkan.
3. Nombor tersebut akan digunakan sebagai perwakilan nombor indeks tatasusunan bagi sebut harga.
4. Sebaik sahaja kami mengambil petikan yang dipilih secara rawak dari array menggunakan nombor bulat yang dihasilkan secara rawak, kami akan meletakkannya ke dokumen HTML.

Masa pengekodan!

Wah! Kami telah mencapai tahap ini dan belum memulakan pengaturcaraan! Selamat datang ke dunia pengaturcaraan!

Hanya bergurau.

Tidak juga.

Anda akan menghabiskan banyak masa pengekodan dalam kerjaya ini (atau hobi). Tetapi maksud saya adalah bahawa anda akan menghabiskan lebih banyak masa untuk memikirkan logik pengaturcaraan dan bagaimana menyelesaikan masalah. Pengaturcaraan bukan mengenai meretas 100 perkataan seminit selama 20 minit pada papan kekunci. Itu tidak akan berlaku.

Sekarang kita mempunyai semua logik. Mari mulakan pengekodan. Kami sekarang akan bekerja dalam fail javascript.js .

Kita perlu membuat petikan sendiri atau menyalinnya dari sumber dalam talian.

Saya Googled "Best Quotes" dan menyalin 10 yang pertama dari laman web , kemudian meletakkannya dalam array yang dipisahkan dengan koma. Pastikan anda meletakkan petikan anda dalam tanda petik tunggal atau berganda. Sekiranya petikan anda terdiri daripada tanda petik, tanda kutip tunggal atau ganda, anda mungkin perlu menggunakan garis miring terbalik untuk melarikan diri daripada watak-watak ini sehingga JavaScript akan mengetahui bahawa simbol-simbol itu adalah sebahagian daripada rentetan, dan bukan sintaks pengekodan.

Seperti yang anda lihat pada gambar di bawah ini, saya telah menentukan pemboleh ubah yang disebut "tanda kutip" dan menetapkannya sama dengan array yang penuh dengan petikan yang telah saya pilih di internet.

Sekarang kita perlu membuat fungsi newQuote () yang saya nyatakan sebelumnya di bahagian HTML tutorial ini. Untuk fungsi newQuote () kita, kita perlu menghasilkan nombor bulat rawak yang berkisar antara 0 hingga panjang array petikan kita . Saya akan menerangkan lebih lanjut di bawah.

Pertama, kita memanggil fungsi Math.floor (). Fungsi Math.floor () mengambil parameter dan membundarkan nombor ke bawah ke bilangan bulat terdekat. Contohnya, jika kita memanggil Math.floor (5.7) ia akan mengembalikan 5.

Kedua, kita akan memasukkan Math.random () sebagai parameter ke Math.floor (). Fungsi Math.random () akan menghasilkan nombor perpuluhan rawak antara 0 dan 1.

Oleh itu, katakan kita mempunyai ini:

Sekiranya kita konsol log Nombor rawak kita pada keadaan ini, ia akan selalu mengembalikan 0. Ini kerana Math.random () akan selalu menjadi perpuluhan antara 0 dan 1 seperti 0.4, 0.721, 0.98, dan seterusnya. Kerana kita memasukkan Math.random () ke Math.floor () sebagai parameter, Math.floor () selalu membundarkan ke perpuluhan terdekat, oleh itu, setiap perpuluhan antara 0 dan 1 akan selalu kembali ke 0.

Jadi apa gunanya melakukan ini? Baiklah, untuk membuat nombor indeks tatasusunan kita, kita memerlukan nombor bulat, tetapi kita memerlukan nombor bulat rawak. Untuk menghasilkan nombor bulat rawak dan melepaskan dari hanya mengembalikan 0, kita perlu mengambil perpuluhan rawak dan mengalikannya dengan nombor bulat.

Sekarang mari kita mencuba sesuatu seperti ini:

Sekiranya kita konsol log randomNumber, hasilnya akan berada di antara 1 hingga 19. Sekarang saya dapat menggunakan keadaan randomNumber semasa ini untuk mengeluarkan petikan dari tatasebutan, tetapi ia hanya akan berfungsi jika nombor indeks tatasusunan ada dalam larik, jika tidak, kesalahan akan dilemparkan.

Sebagai contoh:

Pada masa ini saya hanya mempunyai 10 rentetan dalam susunan tanda petik saya, jadi sebarang nombor di atas 9 akan kembali tidak ditentukan kerana tidak ada dalam larik.

Untuk menyelesaikan masalah ini, kita hanya perlu mengalikan Math.random () dengan panjang array petikan kita. Dengan melakukan ini, kita dapat menambah atau membuang sebilangan rentetan dari array yang kita suka dan pemboleh ubah randomNumber kita akan selalu mengembalikan nombor yang sah kerana kita menggunakan kaedah quotes.length untuk selalu mendapatkan panjang array kita sekarang.

Sekarang kita memerlukan cara untuk menggunakan nilai randomNumber untuk mendapatkan kutipan secara rawak dari array petikan dan meletakkan petikan ke dalam dokumen HTML kami dan memaparkannya kepada pengguna kami.

Ingat bagaimana saya menyebut bahawa kita menggunakan HTMLID untuk membolehkan JavaScript merebut dan memanipulasi elemen HTML dengan mudah? Baiklah, itulah yang kami lakukan sekarang ke HTML Paparan ID Paparan yang kami buat sebelumnya.

Dengan menggunakan document.getElementById () kita dapat memasukkan rentetan apa pun dan JavaScript akan melihat dokumen HTML kita dan mengambilnya untuk digunakan untuk melakukan apa sahaja yang kita inginkan dengannya. Kami akan memasukkan 'quoteDisplay' sebagai parameter untuk mengambil elemen HTML dengan id "quoteDisplay".

Sekarang kita akan menggunakan kaedah .innerHTML untuk menyampaikan petikan yang diambil secara rawak dari array kita sebagai nilai yang akan ditambahkan ke dalam elemen paparan sebut harga HTML kami.

Kami menetapkan innerHTML sama dengan susunan petikan kami dengan pemboleh ubah randomNumber kami dilulus sebagai nombor indeks tatasusunan. Kini fungsi newQuote () kami selesai!

Misi tercapai!

Sekiranya anda berjaya mencapai bahagian tutorial ini, anda telah menyelesaikan projek ini! Tahniah! Anda secara praktikal selesai membina Random Quote Generator.

Sekarang yang perlu anda lakukan ialah membuka projek di penyemak imbas anda dan melihat apakah ia berfungsi! Lakukan ini dengan menyeret fail index.html anda ke tetingkap penyemak imbas anda.

Tekan butang, dan ia akan memaparkan petikan rawak ke layar anda. Tekan butang seberapa banyak yang anda mahu. Setiap kali, petikan baru harus menggantikan yang baru di skrin.

Anda boleh menambahkan sebut harga seberapa banyak yang anda mahu ke dalam susunan petikan.

Lihat gambaran keseluruhan fail projek kami secara bersebelahan yang membentuk Generator Petikan Rawak ini.

Apa sekarang?

Anda telah mencipta Generator Petikan Rawak yang berfungsi sepenuhnya dan anda mungkin tertanya-tanya dari mana anda pergi dari sini.

Anda mungkin berfikir bahawa Random Quote Generator ini kelihatan sangat membosankan, dan tidak ada yang mungkin menggunakannya. Dan anda betul-betul betul. Projek ini kelihatan cukup jelas, dan terpulang kepada anda untuk mengubahnya.

Anda boleh memperbaik projek ini dengan menambahkan fungsi dan gaya anda sendiri.

Pada awal tutorial ini, kami membuat file style.css yang tidak kami gunakan. CSS digunakan untuk menjadikan laman web cantik dan berwarna. Terserah anda untuk menambahkan ke file CSS untuk digayakan jika anda mahu.

Anda boleh mencari beberapa tutorial CSS untuk mendapatkan panduan tambahan. Biarkan imaginasi anda menjadi liar, dan jadikan projek ini milik anda! Melakukan apa sahaja yang anda mahu! Pengekodan adalah sihir dan anda seorang penyihir, Harry!

Sekiranya anda ingin tahu berapa banyak projek yang boleh berubah dengan CSS dan beberapa baris lagi kod JavaScript, periksa versi saya sendiri dari Random Quote Generator ini yang saya berjudul "Epiphany Clock"di sini .

Sekiranya anda menikmati tutorial ini, sila klik butang jantung dan kongsikan! Jangan ragu untuk memberikan komen, pertanyaan, atau maklum balas. Terima kasih dan selamat membuat pengekodan!