Cara Membuat Input Output Sederhana dengan Javascript
Hai saya Hero, ini adalah postingan pertama saya di
blog. Saya akan menjelaskan tentang beberapa materi di blog ini. Materi pertama
adalah tentang cara membuat input output sederhana di aplikasi “Notepad++”
dengan Javascript.
Pertama-tama kita buka dulu aplikasi Notepad++ nya dan
buat coding seperti ini.
<html>
<head>
</head>
<body>
</body>
</html>
Setelah itu kita save, simpan di folder yang kalian inginkan. Beri nama “inout.html”, setelah itu klik save.
Selanjutnya, isi body dengan code seperti di bawah
ini.
<html>
<head>
<title>Input dan
Output</title>
</head>
<body>
<div
class="tengah">
<div
class="text"><h3>BELAJAR JAVASCRIPT INPUT
OUTPUT</h3><p></div>
<p>
<label>Input</label>
<input
type="text" id="txtInput"/><p>
<label>Output</label>
<input
type="text" id="txtOutput" disabled/><p>
<input
type="button" value="Submit" id="Proses"
onclick="InputOutput()">
<div>
</body>
</html>
Kedua kita isikan javascript nya di dalam head,
seperti ini.
<html>
<head>
<title>Input dan
Output</title>
<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>BELAJAR JAVASCRIPT INPUT
OUTPUT</h3><p></div>
<p>
<label>Input</label>
<input
type="text" id="txtInput"/><p>
<label>Output</label>
<input
type="text" id="txtOutput" disabled/><p>
<input
type="button" value="Submit" id="Proses"
onclick="InputOutput()">
<div>
</body>
</html>
Terakhir, kita save dan jalankan. Klik “Jalankan”,
lalu pilih browser yang kita punya. Kebetulan saya menggunakan google chrome,
jadi saya pilih “Launch In Chrome”.
Untuk mencobanya silahkan masukkan angka berapapun di
bagian Input, lalu klik tombol Submit. Hasilnya nanti akan keluar di bagian
Output. Jika berhasil, maka tampilannya akan seperti ini
Agar tampilannya lebih keliatan menarik dan rapi, kita
tambahkan style di dalam head, seperti ini.
<html>
<head>
<title>Input dan
Output</title>
<style>
.text{
text-decoration:
underline;
color:
#0d23ae;
font-family:
"Arial";
font-size:
145%;
}
.tengah{
margin:
auto;
width:
50%;
border:
3px solid black;
padding:
10px;
text-align:
center;
background-color:
cyan;
}
label{
font-family:Helvetica;
width:
75px;
display:
inline-block;
}
</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>BELAJAR JAVASCRIPT INPUT
OUTPUT</h3><p></div>
<p>
<label>Input</label>
<input
type="text" id="txtInput"/><p>
<label>Output</label>
<input
type="text" id="txtOutput" disabled/><p>
<input
type="button" value="Submit" id="Proses"
onclick="InputOutput()">
<div>
</body>
</html>
Hasilnya akan berubah seperti ini.
Sekian materi dari saya kali ini, jika ada salah-salah
kata saya mohon maaf. Tolong kasih komentar supaya saya bisa mengembangkan
terus postingan saya yang selanjutnya. Terima kasih
Komentar
Posting Komentar