Belajar HTML dan Javascript
Hai, disini saya akan menjawab pertanyaan-pertanyaan berikut. Semoga membantu.
1. Kapan sebuah elemen memerlukan atribut id?
Jawab :
Setiap elemen form dalam suatu halaman web harus memiliki atribut name, yang digunakan sebagai pengenal dari nama elemen tersebut. Setiap data yang dimasukkan ke dalam elemen form, akan dikirimkan kepada server.
Browser web akan mengirimkan data dari form ke server dengan mengacu kepada name dari elemen. Browser akan mengambil semua data dari elemen input yang memiliki atribut name. Jika suatu input tidak memiliki name, maka data yang ada dalam elemen input tersebut tidak dikirimkan kepada server.
Atribut id dapat diterapkan pada elemen input dari form. Dengan adanya atribut id ini, maka jika pengembang menggunakan JavaScript, pengembang dapat dengan mudah untuk mengakses dan memanipulasi setiap individu elemen input.
Atribut id tidak menggantikan atribut name, walaupun secara harfiah menunjukkan hal yang sama, yaitu pengenal (atau nama) dari elemen.
Suatu elemen input dalam form yang memiliki atribut id, tetapi tidak memiliki atribut name, akan tetap dianggap sebagai elemen input yang tidak memiliki name. Akibatnya adalah, jika ada elemen input tanpa name, walaupun memiliki id, datanya tidak akan dikirim ke server.
Kemudian apa kegunaan atribut id itu sendiri, berkaitan dengan keberadaannya dalam elemen input dalam form?
Selain kegunaan untuk memudahkan manipulasi elemen input di sisi browser, dengan menggunakan JavaScript. Atribut id akan terasa menjadi sangat dibutuhkan, apabila kita menggunakan elemen label, untuk mendefinisikan prompt dari suatu elemen input.
Dengan adanya id kita bisa mendefinisikan hubungan antara label dan input. Misal elemen input nama di atas memiliki prompt Nama. Jika kita tidak menggunakan label dan tidak menggunakan id pada elemen form, maka kita tidak dapat menghubungkan antara label dan input.
Contoh nyata dari hubungan antara label dan input adalah pada aplikasi berbasis windows, apabila kita mengklik suatu prompt (label) dari suatu input, maka kursor akan otomatis berada pada elemen input. Dengan adanya label ini juga, kita dapat memberikan sebuah ‘shortcut key’ untuk suatu elemen input, kita bisa mengisikan penekanan kombinasi tombol keyboard untuk bisa langsung menuju elemen input yang diinginkan.
2. Cara penulisan event (html)!
Jawab :
HTML event attributes adalah attribute di dalam HTML yang berisi perintah untuk menjalankan script (JavaScript). Jelas, ini berkaitan dengan JavaScript yang sebelumnya harus dipelajari terlebih dahulu. Event sendiri berarti peristiwa yang mana peristiwa tersebut melekat pada HTML element sebagai attribute, baik itu tanpa atau setelah ada interaksi dari user seperti menjalankan script ketika loading halaman, menjalankan script ketika user mengklik tombol button pada HTML element <button> dan lain sebagainya.
contoh :
Onclick = Instruksi untuk menjalankan script ketika sebuah element diklik atau disentuh.
Cara penulisannya di HTML seperti ini : <input type=”…” id=”..” onclick=”…()”/>
3. Cara penulisan function!
Jawab :
function namafungsi(parameter)
{
Beberapa code untuk dijalankan
}
Fungsi adalah suatu blok kode yang dijalankan ketika ada script yang memanggil fungsi tersebut. Fungsi merupakan bagian subprogram yang melaksanakan suatu tugas tertentu ketika diperlukan. Fungsi ini dapat dipanggil dengan cara menuliskan nama fungsinya saja, dan disertai dengan parameter apabila ada. Jadi parameter dalam suatu fungsi bersifat opsional. Suatu fungsi ditulis sebagai blok kode dengan syntax sebagai berikut :
Contoh :
<html>
<head>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function diskon(hargaAwal)
{
var diskon;
diskon = 0.5* hargaAwal;
hargaDiskon = hargaAwal -diskon;
return hargaDiskon;
}
var harga = prompt("Masukkan harga mula-mula (Rp) : ");
document.write("Harga stlh diskon 50%: Rp. " + diskon(harga));
</script>
</body>
</html>
Proses pada script di atas adalah sebagai berikut:
Mula-mula user diminta memasukkan harga mula-mula, harga ini diassign ke dalam variabel harga, misalnya 1000. Selanjutnya script mencetak harga setelah didiskon. Dalam hal ini, script akan memanggil function diskon(harga) atau diskon(1000). Karena function diskon memiliki parameter hargaAwal, maka nilai dari hargaAwal ini sama dengan nilai dari variabel harga, pada contoh ini adalah bernilai 1000. Selanjutnya akan dihitung nilai diskon yaitu 0.5 * 1000 = 500, dan hargaDiskon yaitu 1000 –500 = 500.
Perintah return hargaDiskon, artinya akan mengembalikan nilai hargaDiskon (500) ke function yang memanggilnya, yaitu diskon(harga), lihat tanda panah pada script di atas. Sehingga akan tercetak ‘Harga stlh diskon 50% : Rp. 500’.
4. Input dan output!
Jawab :
Input <input> element digunakan untuk menunjukkan sebuah inputan (masukkan) dalam bentuk kotak dan sejenisnya yang dapat diedit/diketik untuk diisi data tertentu (seperti memasukkan data diri nama, email, tanggal, dan lain sebagainya).
<input> merupakan element interaktif yang biasanya ditulis bersamaan dengan form control.
Arti semantic dan fungsi dari <input> element dapat beraneka ragam tergantung dari atribut type yang digunakan.
<input> adalah element yang tidak memiliki tag penutup (closing tag) dan merupakan element kosong yang tidak memiliki konten, hanya terdapat atribut saja.
Output merupakan keluaran yang dihasilkan dari inputan yang telah diproses dan output yang bertugas sebagai yang menampilkan value yang telah di proses.
Contoh HTML input output :
<html>
<head>
<title>Belajar javascript</title>
<style>
.tengah{
margin: auto;
width: 50%;
border: 3px solid black;
padding: 10px;
text-align: center;
background-color: #3efdc9;
}
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>
Terima kasih atas perhatiannya, mohon maaf bila ada salah-salah kata. Karna saya juga masih dalam proses belajar.
1. Kapan sebuah elemen memerlukan atribut id?
Jawab :
Setiap elemen form dalam suatu halaman web harus memiliki atribut name, yang digunakan sebagai pengenal dari nama elemen tersebut. Setiap data yang dimasukkan ke dalam elemen form, akan dikirimkan kepada server.
Browser web akan mengirimkan data dari form ke server dengan mengacu kepada name dari elemen. Browser akan mengambil semua data dari elemen input yang memiliki atribut name. Jika suatu input tidak memiliki name, maka data yang ada dalam elemen input tersebut tidak dikirimkan kepada server.
Atribut id dapat diterapkan pada elemen input dari form. Dengan adanya atribut id ini, maka jika pengembang menggunakan JavaScript, pengembang dapat dengan mudah untuk mengakses dan memanipulasi setiap individu elemen input.
Atribut id tidak menggantikan atribut name, walaupun secara harfiah menunjukkan hal yang sama, yaitu pengenal (atau nama) dari elemen.
Suatu elemen input dalam form yang memiliki atribut id, tetapi tidak memiliki atribut name, akan tetap dianggap sebagai elemen input yang tidak memiliki name. Akibatnya adalah, jika ada elemen input tanpa name, walaupun memiliki id, datanya tidak akan dikirim ke server.
Kemudian apa kegunaan atribut id itu sendiri, berkaitan dengan keberadaannya dalam elemen input dalam form?
Selain kegunaan untuk memudahkan manipulasi elemen input di sisi browser, dengan menggunakan JavaScript. Atribut id akan terasa menjadi sangat dibutuhkan, apabila kita menggunakan elemen label, untuk mendefinisikan prompt dari suatu elemen input.
Dengan adanya id kita bisa mendefinisikan hubungan antara label dan input. Misal elemen input nama di atas memiliki prompt Nama. Jika kita tidak menggunakan label dan tidak menggunakan id pada elemen form, maka kita tidak dapat menghubungkan antara label dan input.
Contoh nyata dari hubungan antara label dan input adalah pada aplikasi berbasis windows, apabila kita mengklik suatu prompt (label) dari suatu input, maka kursor akan otomatis berada pada elemen input. Dengan adanya label ini juga, kita dapat memberikan sebuah ‘shortcut key’ untuk suatu elemen input, kita bisa mengisikan penekanan kombinasi tombol keyboard untuk bisa langsung menuju elemen input yang diinginkan.
2. Cara penulisan event (html)!
Jawab :
HTML event attributes adalah attribute di dalam HTML yang berisi perintah untuk menjalankan script (JavaScript). Jelas, ini berkaitan dengan JavaScript yang sebelumnya harus dipelajari terlebih dahulu. Event sendiri berarti peristiwa yang mana peristiwa tersebut melekat pada HTML element sebagai attribute, baik itu tanpa atau setelah ada interaksi dari user seperti menjalankan script ketika loading halaman, menjalankan script ketika user mengklik tombol button pada HTML element <button> dan lain sebagainya.
contoh :
Onclick = Instruksi untuk menjalankan script ketika sebuah element diklik atau disentuh.
Cara penulisannya di HTML seperti ini : <input type=”…” id=”..” onclick=”…()”/>
3. Cara penulisan function!
Jawab :
function namafungsi(parameter)
{
Beberapa code untuk dijalankan
}
Fungsi adalah suatu blok kode yang dijalankan ketika ada script yang memanggil fungsi tersebut. Fungsi merupakan bagian subprogram yang melaksanakan suatu tugas tertentu ketika diperlukan. Fungsi ini dapat dipanggil dengan cara menuliskan nama fungsinya saja, dan disertai dengan parameter apabila ada. Jadi parameter dalam suatu fungsi bersifat opsional. Suatu fungsi ditulis sebagai blok kode dengan syntax sebagai berikut :
Contoh :
<html>
<head>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function diskon(hargaAwal)
{
var diskon;
diskon = 0.5* hargaAwal;
hargaDiskon = hargaAwal -diskon;
return hargaDiskon;
}
var harga = prompt("Masukkan harga mula-mula (Rp) : ");
document.write("Harga stlh diskon 50%: Rp. " + diskon(harga));
</script>
</body>
</html>
Proses pada script di atas adalah sebagai berikut:
Mula-mula user diminta memasukkan harga mula-mula, harga ini diassign ke dalam variabel harga, misalnya 1000. Selanjutnya script mencetak harga setelah didiskon. Dalam hal ini, script akan memanggil function diskon(harga) atau diskon(1000). Karena function diskon memiliki parameter hargaAwal, maka nilai dari hargaAwal ini sama dengan nilai dari variabel harga, pada contoh ini adalah bernilai 1000. Selanjutnya akan dihitung nilai diskon yaitu 0.5 * 1000 = 500, dan hargaDiskon yaitu 1000 –500 = 500.
Perintah return hargaDiskon, artinya akan mengembalikan nilai hargaDiskon (500) ke function yang memanggilnya, yaitu diskon(harga), lihat tanda panah pada script di atas. Sehingga akan tercetak ‘Harga stlh diskon 50% : Rp. 500’.
4. Input dan output!
Jawab :
Input <input> element digunakan untuk menunjukkan sebuah inputan (masukkan) dalam bentuk kotak dan sejenisnya yang dapat diedit/diketik untuk diisi data tertentu (seperti memasukkan data diri nama, email, tanggal, dan lain sebagainya).
<input> merupakan element interaktif yang biasanya ditulis bersamaan dengan form control.
Arti semantic dan fungsi dari <input> element dapat beraneka ragam tergantung dari atribut type yang digunakan.
<input> adalah element yang tidak memiliki tag penutup (closing tag) dan merupakan element kosong yang tidak memiliki konten, hanya terdapat atribut saja.
Output merupakan keluaran yang dihasilkan dari inputan yang telah diproses dan output yang bertugas sebagai yang menampilkan value yang telah di proses.
Contoh HTML input output :
<html>
<head>
<title>Belajar javascript</title>
<style>
.tengah{
margin: auto;
width: 50%;
border: 3px solid black;
padding: 10px;
text-align: center;
background-color: #3efdc9;
}
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>
Terima kasih atas perhatiannya, mohon maaf bila ada salah-salah kata. Karna saya juga masih dalam proses belajar.
Komentar
Posting Komentar