Memprogram kalkulator dalam HTML

Video: Membuat Kalkulator Sederhana - Dasar HTML & Javascript

Isi

Melangkah
Bagian 1 dari 4: Memahami kode
Bagian 2 dari 4: Kode standar untuk kalkulator HTML
Bagian 3 dari 4: Membuat kalkulator Anda sendiri
Bagian 4 dari 4: Gunakan kalkulator Anda
Tips

Ada banyak cara berbeda untuk menghitung dengan komputer menggunakan kalkulator bawaan, tetapi cara lain adalah membuat sendiri menggunakan kode HTML sederhana. Untuk membuat kalkulator menggunakan HTML, Anda memerlukan pengetahuan HTML dasar, lalu masukkan kode yang diperlukan di editor teks dan simpan sebagai file HTML. Anda kemudian dapat menggunakan kalkulator dengan membuka file HTML di browser favorit Anda. Anda tidak hanya dapat melakukan operasi aritmatika di browser Anda, tetapi Anda juga akan dapat mempelajari beberapa keterampilan dasar tentang seni pemrograman!

Melangkah

Bagian 1 dari 4: Memahami kode

Pelajari apa yang dilakukan setiap fungsi HTML. Kode yang akan Anda gunakan untuk membuat kalkulator terdiri dari banyak jenis sintaks berbeda yang bersama-sama menentukan berbagai elemen dokumen. Klik di sini untuk penjelasan tentang proses ini, atau baca terus untuk mempelajari lebih lanjut tentang apa yang akan dilakukan setiap baris kode untuk membuat kalkulator.
- html: Sedikit sintaks ini memberi tahu seluruh dokumen bahasa mana yang akan digunakan dalam kode. Ada beberapa bahasa untuk dikodekan dan dalam hal ini html> menjelaskan ke seluruh dokumen yang ada di dalamnya - Anda dapat menebaknya - html.
- kepala: Memberi tahu dokumen bahwa segala sesuatu setelahnya adalah data tentang data, disebut juga "metadata". Perintah head> biasanya digunakan untuk mendefinisikan elemen gaya dokumen, seperti judul, tajuk, dll. Anggap saja sebagai payung di mana sisa kode didefinisikan.
- judul: Judul dokumen Anda ditunjukkan di sini. Atribut ini digunakan untuk menunjukkan judul dokumen ketika dibuka di browser HTML.
- body bgcolor = "#": Atribut ini menyetel warna latar belakang halaman HTML dan badan. Angka dalam string tanda kutip dan setelah # sesuai dengan warna tertentu.
- text = "": Sintaks ini mengatur warna teks dokumen.
- nama formulir = "": Atribut ini menentukan nama formulir, dan digunakan untuk membangun struktur dari apa yang muncul berikutnya, berdasarkan apa yang diketahui Javascript tentang arti nama formulir. Misalnya, nama formulir yang akan kita gunakan adalah "kalkulator", yang akan kita gunakan untuk membuat struktur khusus untuk dokumen tersebut.
- tipe masukan = "": Di sinilah sesuatu terjadi. Atribut "input type" memberi tahu pengurai dokumen jenis teks apa yang terkandung dalam nilai di antara tanda kutip. Misalnya, ini bisa berupa teks, kata sandi, tombol (seperti halnya dengan kalkulator), dll.
- nilai = "": Perintah ini memberi tahu pengurai dokumen apa yang termasuk dalam tipe input di atas. Untuk kalkulator, ini adalah angka (1-9) dan operasi (+, -, *, /, =).
- onClick = "": Sintaks ini mendeskripsikan suatu peristiwa, yang menunjukkan bahwa ada sesuatu yang harus dilakukan saat tombol diklik. Untuk kalkulator, kami ingin teks pada setiap tombol dikenali juga. Jadi sebelum tombol "6", kita meletakkan document.calculator.ans.value + = "6" di antara tanda kutip.
- br: tag ini membuat baris baru di dokumen, sehingga teks (atau sesuatu yang lain) ditempatkan setelahnya di baris lain.
- / form, / body dan / html: perintah ini adalah penutup untuk perintah terkait yang sebelumnya dibuka di dokumen.

Bagian 2 dari 4: Kode standar untuk kalkulator HTML

Salin kode di bawah ini. Pilih teks pada kotak di bawah dengan menahan tombol kiri mouse dan menyeret kursor dari kiri bawah kotak ke kanan atas, sehingga semua teks berubah menjadi biru. Kemudian tekan "Command + C" di Mac atau "Ctrl + C" di PC untuk menyalin kode ke clipboard.

html> head> title> HTML Calculator / title> / head> body bgcolor = "# 000000" text = "gold"> form name = "calculator"> input type = "button" value = "1" onClick = "document. calculator.ans.value + = '1' "> input type =" button "value =" 2 "onClick =" document.calculator.ans.value + = '2' "> input type =" button "value =" 3 "onClick =" document.calculator.ans.value + = '3' "> input type =" button "value =" + "onClick =" document.calculator.ans.value + = '+' "> input type =" tombol "value =" 4 "onClick =" document.calculator.ans.value + = '4' "> input type =" button "value =" 5 "onClick =" document.calculator.ans.value + = '5' "> input type =" button "value =" 6 "onClick =" document.calculator.ans.value + = '6' "> input type =" button "value =" - "onClick =" document.calculator.ans. value + = '-' "> input type =" button "value =" 7 "onClick =" document.calculator.ans.value + = '7' "> input type =" button "value =" 8 "onClick =" document.calculator.ans.value + = '8' "> input type =" button "value =" 9 "onClick =" document.calculator.ans.value + = '9' "> input type =" button "value = " *" onClick = "document.calcul ator.ans.value + = ' *' "> input type =" button "value =" / "onClick =" document.calculator.ans.value + = '/' "> input type =" button "value =" 0 "onClick =" document.calculator.ans.value + = '0' "> input type =" reset "value =" Reset "> input type =" button "value =" = "onClick =" document.calculator.ans .value = eval (document.calculator.ans.value) "> br> Respons isinput type =" textfield "name =" ans "value =" "> / form> / body> / html>

Bagian 3 dari 4: Membuat kalkulator Anda sendiri

Buka editor teks di komputer Anda. Ada beberapa program untuk digunakan, tetapi untuk kesederhanaan kami akan tetap menggunakan TextEdit atau Notepad.
- Di Mac, klik kaca pembesar di sudut kanan atas layar untuk membuka Spotlight. Ketika Anda sampai di sana, ketik TextEdit dan klik pada program TextEdit, yang sekarang harus dipilih dengan warna biru.
- Di PC, buka menu Start di kiri bawah layar. Di bilah pencarian, ketik Notepad dan klik aplikasi Notepad, yang akan muncul di bilah pencarian di sebelah kanan.
Tempel kode HTML untuk kalkulator ke dalam dokumen.
- Di Mac, klik badan dokumen dan tekan Command + V. Kemudian klik Format di bagian atas layar lalu Buat Teks Biasa setelah menempelkan kode.
- Di PC, klik badan dokumen lalu aktifkan Ctrl + V.
Simpan file. Anda melakukan ini melalui "File" di menu utama jendela, dan kemudian dengan Simpan sebagai ... di PC atau Menyimpan... di Mac dari menu drop-down.
Tambahkan ekstensi HTML ke nama file. Di menu "Save As ...", ketik nama file, diikuti dengan ".html", lalu klik "Save". Misalnya, jika Anda ingin menamai file ini "Kalkulator pertama saya", simpan file tersebut sebagai "Kalkulator pertama saya.html".

Bagian 4 dari 4: Gunakan kalkulator Anda

Temukan file yang baru saja Anda buat. Untuk melakukan ini, ketik nama file di Spotlight atau di bilah pencarian dari menu Start seperti yang dijelaskan di langkah sebelumnya. Tidak perlu juga mengetik ekstensi "html".
Klik pada file Anda untuk membukanya. Browser default Anda akan membuka kalkulator Anda di halaman web baru.
Klik tombol pada kalkulator untuk menggunakannya. Solusi persamaan Anda sekarang akan muncul di bilah jawaban.