Cara Membuat Sebuah Box dengan Javascript
Di pembahasan sebelumnya saya telah pernah membahas mengenai cara membangun kotak pada sebuah HTML. Di pembahasan kali ini saya akan sedikit membahas kembali mengenai cara membangun sebuah box dengan bantuan dari javascript jquery. Kalau menggunakan HTML dan CSS lazim, telah hal biasalah mungkin, untuk teman – teman tetapi, kalau menggunakan bantuan yang namanya javascript jquery mungkin kesannya terlalu wow, bagaimana ya caranya.
Tenang saja ikuti terus step by step pembahasan saya ini, nantinya teman – teman pun akan bakalan paham mengenai Cara Membangun Sebuah Box dengan Javascript. Berbicara Javascript soal kegunaan javascript, kegunaan javascript sangatlah luas javascript adalah bahasa pemrograman yang sangatlah luas fungsinya.
Oke seketika saja kita masuk di pembahasan kita, Cara Membangun Sebuah Box dengan Javascript. Pertama-tama teman – teman siapkan terlebih dulu text editornya, disini penulis menggunakan text-editor sublime-text yang ringan dan gampang dimanfaatkan bagi teman – teman bebas.
- pertama-tama – tama kita bikin dulu file htmlnya,
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
- Setelah itu save file htmlnya, dengan nama bebas,
- Setalah itu kita akan membangun kelas box didalam HTML-nya,
<div class=”kotak”>
</div>
- Langkah berikutnya kita akan membangun script javascript-nya, dan letakkan dibagian unsur head
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.kotak”).css({“width”: “350px”,
“border”:”1px dotted #f00″, “height” : “350px”,
“border-radius”: “5px”} );
});
</script>
- Kalau telah silahkan save dan jalankan di browsernya, kurang lebih script di atas kalau saya gabungkan hasilnya akan seperti di bawah ini;
<html>
<head>
<title> artikel </title>
<script type=”text/javascript” src=”jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“.kotak”).css({“width”: “350px”,
“border”:”1px dotted #f00″, “height” : “350px”,
“border-radius”: “5px”} );
});
</script>
</head>
<body>
<div class=”kotak”>
<p> Saya Sedang belajar javascript. </p>
</div>
<script type=”text/javascript”>
alert(“Haloo, ! saya Feri Mispandi dari Source Code Aplikasi”);
</script>
</body>
</html>
Oke lumayan gampang bukan Cara Membangun Sebuah Box dengan Javascript. Semoga bermanfaat.
Sumber https://kursuswebsite.org
