Lengkap Macam Macam Kode HTML Java Script Keren

Kali ini kami menuliskan tutorial yang memuat tentang cara membuat JavaScript di HTML. Terlebih dulu kami akan membahas pengertian JavaScript, dan setelahnya berfokus pada berbagai cara memasukkan JavaScript ke HTML.

Di HTML, Anda bisa menampilkan konten yang bersifat statis, misalnya gambar. Namun, belakangan ini, konten statis sudah tidak begitu lagi digemari. Kebanyakan konten saat ini sangat interaktif dan memuat slideshow, formulir, dan menu dengan tampilan yang menarik.

Konten-konten tersebut memberi kesempatan pada pengguna untuk lebih berekspresi dalam mengelola dan mengembangkan websitenya. Jika Anda menginginkan tampilan konten yang demikian, maka salah satu cara yang bisa dilakukan adalah script bahasa pemrograman dan JavaScript adalah yang paling populer di antaranya.

Adanya JavaScript memampukan para developer untuk membuat website dapat berinteraksi dengan user dan sebaliknya. Meskipun ada banyak sekali bahasa pemrograman yang bisa dipilih, tak ada yang sepopuler JavaScript. Agar potensi dan keunggulannya dapat dimaksimalkan, JavaScript sebaiknya digunakan secara bersama-sama dengan HTML.

Kelebihan JavaScript

Pada awalnya, JavaScript dikenal dengan sebutan LiveScript. Seiring dengan berkembangnya bahasa, maka oleh Netscape, LiveScript diubah ke JavaScript. Kemunculan JavaScript pertama kali pada tahun 1995 dalam Netscape 2.0. Berikut beberapa keunggulan menggunakan JavaScript:

Meminimalkan interaksi server

Salah satu cara terbaik untuk mengoptimalkan performa dan kecepatan website adalah dengan mengurangi komunikasi ke server. Dalam hal ini, JavaScript memvalidasi user input di client-side. Script ini hanya akan mengirimkan permintaan ke server setelah melakukan validasi awal. Alhasil, penggunaan resource dan jumlah permintaan ke server akan menurun secara signifikan.

Antarmuka yang lengkap dan mudah digunakan

Dengan menggunakan JavaScript, Anda dapat membuat antarmuka client-side yang interaktif, misalnya menabahkan slider, slideshow, efek mouse roll-over, fitur drag-and-drop, dan lain sebagainya.

Feedback yang cepat untuk user

Dengan menggunakan JavaScript, user akan dengan cepat memperoleh feedback. Misalkan ada seorang pengguna yang telah mengisi formulir dan tersisa satu kolom yang belum diisi atau kosong. Tanpa adanya validasi JavaScript, pengguna tersebut tidak akan sadar jika ada kolom yang belum diisi sampai halaman akhirnya reload. Adanya JavaScript, pengguna tidak harus menunggu karena akan langsung diberi warning.

Debugging mudah

JavaScript merupakan bahasa yang ditafsirkan, berarti kode yang tertulis diuraikan baris demi baris. Apabila muncul error, Anda akan langsung melihat angka baris tempat terjadinya kesalahan tersebut.

Cara Membuat JavaScript di HTML

Setelah membahas kelebihan yang ditawarkan JavaScript, kini saatnya mengetahui lebih dalam tentang cara memasukkan JavaScript ke HTML. Berikut dua cara yang bisa Anda lakukan:

Cara membuat JavaScript di HTML secara langsung

Anda bisa langsung menambahkan JavaScript di HTML dengan menggunakan tag <script></script> yang mencakup semua kode JS yang Anda tulis. Kode JS yang bisa ditambahkan:

di antara tag <head>
di antara <body>

Loading akan berbeda tergantung pada letak atau lokasi di mana Anda menambahkan kode JavaScript ke file HTML. Anda bisa mencobanya dengan menambahkan kode tersebut ke section <head> sehingga kode yang dimaksudkan terpisah dari konten file HTML Anda. Hanya saja, kecepatan loading akan meningkat, dalam hal ini konten webiste juga akan terload lebih cepat, jika Anda memasukkan kode ke <body> dan setelah itu JavaScript akan di-parse. Sebagai contoh, file HTML berikut ini akan menampilkan waktu saat ini:

Untuk MEMPERCANTIK DAN LEBIH KEREN BLOG ANDA ,silahkan copy-paste script di bawah ini!!

Caranya:

1. Login ke blogger
2. Pilih Rancangan,Elemen Laman kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan salah satu kode HTML sesuai warna yang kita inginkan berikut ini:

MEMBUAT KURSOR "BERUBAH"

~ini scrip mouse bertaburan bintang~

<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-biru.js" type="text/javascript"></script>

a. Kita warnain biru dengan, hijau, merah, ungu, silver, kuning, hitam
b. Simpan jika sudah selesai.

NIH MACAM" BENTUK MOUSE ATAU KURSOR

~ini scrip mouse berbentuk kunai~:

MEMBUAT EFEK DAUN BERGUGURAN

<script src='https://sites.google.com/site/vikrymadzblogspotcom/vikrymadz/daungugur.js' type='text/javascript'/>

MEMBUAT EFEK SALJU BERJATUHAN

~Masuk blog>>>Tata letak>>Edit HTML>>>carilah kode ]]></b:skin>

Copylah script ini dibawah kode ]]></b:skin>

msg = " http://blablabla.com ";

msg = "=cuma-cuma isenk=" + msg;pos = 0

;
function scrollMSG() { document.title = msg.substring(pos, msg.length) +
msg.substring(0, pos); pos++; if (pos > msg.length) pos = 0

window.setTimeout("scrollMSG()",200);

}

scrollMSG();

//]]>

</script>

Buat yang ingin Blog nya ada Music nya,Klik : http://divine-music.info/
atau klik : http://www.flashwidgetz.com/

~ini contoh scrip lagu~

<center>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmmusicbar.gif" border="0" alt="Get Free Music at www.divine-music.info"></a><br>
<a href="http://divine-music.info" target="_blank"><img src="http://divine-music.info/images/dmlogo.gif" border="0" alt="Get Free Music at www.divine-music.info"></a>
<br><br><b>
<a target="_blank" title="Get Free Music at www.divine-music.info" href="http://www.divine-music.info">Free Music</a> at divine-music.info</b><br>
<EMBED SRC="http://divine-music.info/musicfiles/Ying Yang Twins ft. Wyclef Jean - Dangerous.swf" AUTOSTART="TRUE" LOOP="TRUE" WIDTH="1" HEIGHT="1" ALIGN="CENTER"></EMBED>

~Untuk Menampilkan Burung Merpati (seperti di atas) Bergerak Di Pojok Kiri Atas Ini Script nya~ :

Caranya:
1. Login ke blog anda
2. Ke tata letak
3. Ke edit html
4. Copy pastekan kode dibawah dan letakkan di atas kode </head>

NIH MACAM" BENTUK JAM BUAT BLOGGER:

Pertama buka ini:

http://www.clocklink.com/

Lalu : masuk ke Blgoger>>Elemen Halaman>>>Tambah Gadjet,HTML/Java Script>lalu copy paste script code dari link tadi,jangan lupa save/simpan....selesai^^

INI SCRIPT VISITOR ( mengetahui berapa jumlah Member yang Online di blog )

http://blogtemplate4u.com/
http://btemplates.com/
http://javatemplates.com/
http://www.bloggerbuster.com/

Nah kalo udah bisa gunta ganti template,edit" blog pasti ingin mengubah warna tulisan di Blog kan? haha.. don't worry! Klik ini!

Note: cara nya tinggal copy paste kode warna dari link itu,dan ganti ama kode warna di template anda.

Cara Membuat Gambar Berjalan di Blog
Ikuti langkah-langkah berikut untuk membuat gambar berjalan di blog

Copy Paste kode berikut ke blog anda :

<table border="10" cellpadding="3" height="135" width="195"/>
<tr>
<td>
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="192" height="132" align="center">

<img src="http://farm5.static.flickr.com/4017/4274096032_8bf5bd349a_o.jpg" height="130" width="190" />
<br/>
<img src="http://farm5.static.flickr.com/4046/4273351371_7c1ceb936b_o.jpg" height="130" width="190" />
</marquee>
</td>
</tr>
</table>

Hasilnya Adalah sebagai berikut :

Keterangan ganti link yang berwarna biru dengan link tempat anda menaruh gambar, contohnya saja gambar yang anda taro di flickr.com .

Membuat Gambar berjalan Dari kiri ke kanan

Copy paste kode berikut ke blog anda :
<marquee align="center" direction="left" height="200" scrollamount="3" width="100%" >

<img src="http://farm5.static.flickr.com/4017/4274096032_8bf5bd349a_o.jpg" width="190" height="130" />

</marquee>

Hasilnya Adalah sebagai berikut :

Selamat mencoba.......

Membuat tulisan text berkedip ? atau berjalan? nih!

CONTOH:
<blink>membuat tulisan berkedip</blink>
<marquee>membuat tulisan berjalan</marquee>

Cara: masuk ke Edit Html bkn menu Compose.. (pada saat menulis)

Ini Script goggle translate

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'id'
}, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Semoga bermanfaat 🙏🏼🙏🏼🙏🏼

Lengkap Macam Macam Kode HTML Java Script Keren