Quantcast
Channel: Kursus Website Terbaik
Viewing all articles
Browse latest Browse all 2170

Cara Membuat Sebuah Box dengan Javascript

$
0
0

Pada pembahasan sebelumnya saya sudah pernah membahas tentang cara membuat kotak dalam sebuah HTML. Pada pembahasan kali ini saya akan sedikit mengulas kembali tentang cara membuat sebuah box dengan bantuan dari javascript jquery. Kalau menggunakan HTML dan CSS biasa, sudah hal biasalah mungkin, bagi 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 juga akan bakalan mengerti tentang Cara Membuat Sebuah Box dengan Javascript. Berbicara Javascript soal  fungsi javascript, fungsi javascript sangatlah luas javascript merupakan bahasa pemrograman yang sangatlah luas fungsinya.

Oke langsung saja kita masuk pada pembahasan kita, Cara Membuat Sebuah Box dengan Javascript. Pertama teman – teman siapkan terlebih dulu text editornya, disini penulis menggunakan text-editor sublime-text yang ringan dan mudah dipakai untuk teman – teman bebas.

  1. pertama – tama kita buat dulu file htmlnya,

<!doctype html>

<html>
<head>
<title></title>
</head>
<body>

</body>
</html>

  1. Setelah itu save file htmlnya, dengan nama bebas,
  2. Setalah itu kita akan membuat kelas box didalam HTML-nya,

<div class=”kotak”>

 

</div>

  1. Langkah selanjutnya kita akan membuat script javascript-nya, dan letakkan dibagian elemen 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>

  1. Kalau sudah silahkan save dan jalankan pada 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(“Hai, ! saya Feri Mispandi dari Dumet School”);

</script>

</body>

</html>

Oke cukup mudah bukan Cara Membuat Sebuah Box dengan Javascript. Semoga bermanfaat.

The post Cara Membuat Sebuah Box dengan Javascript appeared first on Kursus Website Terbaik.


Viewing all articles
Browse latest Browse all 2170