"Assalamualaikum teman-teman"
Di postingan kali ini saya akan memberikan bagaimana caranya untuk membuat Input Output di Notepad++ dengan text HTML dan Javascript.
Langsung saja langkah pertama yang harus kalian lakukan adalah buka Notepad++ kalian kemudian pilih File -> Save As atau bisa langsung dengan tekan secara bersamaan Ctrl+Alt+S lalu pilih Folder atau buat Forder baru untuk menyimpan text html yang akan kalian buat jangan lupa simpan file dengan type html seperti gambar berikut
lanjut yang kedua ketik perintah untuk membuat Input Output seperti berikut :
<html>
<head>
<title>Belajar javascript</title>
<style>
.tengah{
margin: auto;
width: 50%;
border: 3px solid brown;
padding: 10px;
text-align: center;
background-color: pink;
}
</style>
<script language="javascript">
function InputOutput()
{
var x;
x = document.getElementById("txtInput").value;
document.getElementById("txtOutput").value = x;
}
</script>
</head>
<body>
<div class="tengah">
<div class="text"><h3>INPUT OUTPUT</h3><p></div>
<label>Input</label>
<input type="text" id="txtInput"/><p>
<label>Output</label>
<input type="text" id="txtOutput" /><p>
<input type="button" value="Submit" id="Proses" onclick="InputOutput()"/>
</div>
</body>
</html>
Atau Terlihat seperti ini
 |
Keterangan :
- fungsi dari
.tengah{
s/d
} adalah untuk memberikan margin , lebar, garis berbentuk kotak dan warnanya danjuga ketebalannya, menaruh text di tengah dan memberikan warna background pada garis kotak.
- Disitu juga saya tambahkan javacript untuk memanggil text yang ada di bawah ini
|
 |
- pastikan kalian tidak lupa untuk memberi penutup di setiap perintah contoh pada <html> harus di akhiri dengan penutupnya yaitu </html>
- text "txtInput" dan "txtOutput" di atas harus di samakan ketika penulisan di javascript jika kalian salah dari penulisan seperti hurufnya tidak sama (salah satu menggunakan huruf kapital atau huruf kecil dan salah meberi titik koma (;) dll) maka saat di jalankan tidak akan berjalan seperti ke inginan.
- pada <input type="button" value="Submit" id="Proses" onclick="InputOutput()"/> harus di tambah onclick="InputOutput" agar saat di klik akan muncul outputnya
Selanjutnya Run dengan browser yang berfungsi maka tampilannya akan tampak seperti ini
 |
 |
Nah bagaimana?... bisa tidak?.. jika tidak bisa berarti ada kesalahan pada penulisan penulisan di notepadnya tuh...
atau jika kalian ingin tau dimana kesalahan kalia cek aja di browser kalian dengan cara :
- Tekan secara bersamaan Ctrl + Shift + I lalu pilih console dan kalian cek apa kesalahannya kemudian perbaiki di notepad.
- Jika telah diperbaiki coba Run lagi.
Oke teman-teman apakah mudah atau susah? bagaimanapun hasilnya jangan menyerah ya... selamat mencoba semoga berhasil.
sempatkan waktu untuk komentar ya...
Wassalamualaikum....
|
"Go Sukses"
 |
Dari segi informasi sangat membatu sekali gan,
BalasHapusDitunggu postingan selanjutnya gan..
BalasHapussiap gan...
Hapus