Cara membuat Navigasi Hamburger Responsive

Membuat navigasi menu responsive menggunakan style CSS

Pada tutorial kali ini saya akan mencoba memberikan cara membuat menu responsive tanpa javascript melainkan menggunakan css saja.
Langkah-langkah membuat menu responsive dengan css :

1. Buat File HTML

<div id="navcontainer"><label class="show-menu" for="show-menu"><i class="fa fa-bars fa-2"></i></label><input autocomplete="off" id="show-menu" role="button" type="checkbox"><ul id="menus"><li><a href="http://www.tukarpengetahuan.com/" title="home">Home</a></li><li><a href="http://www.tukarpengetahuan.com/p/pemrograman-web.html" title="pemrograman-web">Pemrograman web</a></li><li><a href="http://www.tukarpengetahuan.com/p/framework.html" title="framework">Framework</a></li><li><a href="http://www.tukarpengetahuan.com/p/teknologi-informasi.html" title="teknologi-informasi">Teknologi Informasi</a></li><li><a href="http://www.tukarpengetahuan.com/p/belajar-seo.html" title="belajar-seo">Belajar seo</a></li><li><a href="http://www.tukarpengetahuan.com/p/tips.html" title="tips">Tips</a></li></ul><div style="clear:both;"></div></div>

2. Buat File CSS

body{font-family:"Roboto",sans-serif!important;font-size: 100%;margin:0px;padding:0px;}/*Navmenu*/#navcontainer ul {list-style-type:none;margin:0;padding:0;position: relative;}#navcontainer li {display:inline-block;float: left;text-transform:uppercase;}#navcontainer li a {padding:15px 10px;min-width:100px;height: 49px;text-align: center;line-height: 49px;color: #fff;background: #2f3036;text-decoration: none;}#navcontainer li:hover a {background: #FE9800;}#navcontainer li:hover ul a {background: #f3f3f3;color: #2f3036;height: 40px;line-height: 40px;}#navcontainer li:hover ul a:hover {background: #FE9800;color: #fff;}#navcontainer li ul {display: none;}#navcontainer li ul li {display: block;float: none;}#navcontainer li ul li a {width: auto;min-width: 100px;padding: 0 20px;text-align:left;}#navcontainer ul li a:hover + .hidden, .hidden:hover {display: block;}.show-menu {text-decoration: none;color: #fff;background: #FE9800;text-align: left;padding: 10px 5px;display: none; }#navcontainer input[type=checkbox]{display: none;}#navcontainer input[type=checkbox]:checked ~ #menus {display: block;}#navcontainer .fa-2 {font-size: 2em;}#navcontainer .fa-2 { margin-right: 0.07142857em; margin-left:0.6em;}/*end-navmenu*//*css-styles-responsive*/@media screen and (max-width:1180px){ body,#navcontainer,div.span-14,div.span-24{width:100%!important;min-width:100%!important;}}@media screen and (max-width:980px){ #navcontainer li a {min-width:80px;}}@media screen and (max-width:768px){ #navcontainer ul {position: static;display: none;} #navcontainer li {border-bottom: 1px solid #4d4d4d;} #navcontainer ul li, #navcontainer li a {width: 100%;} #navcontainer li a{display:block;height:auto;line-height:normal;} #navcontainer li a {text-align:left;} .show-menu {display:block!important;line-height:30px;} .show-menu:hover {cursor:pointer;} label {margin:0!important;}}/*end-responsive*/

Jika sudah selesai menambahkan file CSS, saya harap tampilan menu ketika di desktop sudah seperti gambar dibawah ini :

3. Untuk membuat menu agar responsive maka kita perlu menggunakan media query
Berikut tampilan ketika mobile responsive

Bagaimana sudah berhasil belum?

Jika belum berhasil juga akan saya berikan full html dan css, anda tinggal download saja.
Download menu responsive Full HTML
Download menu responsive Full CSS

Read More

Jalan alternatif inti bahasa komputer

Nah teman teman kali ini saya akan membagikan artikel .. sebenarnya jalan alternatif apa yang seharusnya untuk langsung mengerti inti dari dan dasar dari bahasa pemograman ! ...

Nah kadang kadang bahasa pemograman yang dipelajari tidak begitu berguna alias bukan inti dari pemograman iti sendiri

Sebenarnya susah untuk menuliskannya tetapi alias belajar yang tidak tidak dan tidak bisa mendapatkan uang dari yang anda pelajari .

Nah untuk mengetahuinya kami akan mengulas beberapa bahasa pemograman yang harus menjadi dasar telebih dahulu dan harus dikuasai terlebih dahulu sebelum belajar bahasa pemograman yang lainnya .

1 . HTML



Bahasa pemograman HTML adalah bahasa tag paling penting dalam pembuatan website dan webdesign dan juga sangat penting dalam pengembangan aplikasi.

2. JAVASCRIPT



Javascript adalah teori dan peraturan pasti dan mencakup seluruh bahasa pemograman . Jika anda sudah menguasai teori javascript anda pasti mudah dalam mempelajari bahasa komputer yang lain contoh bahasa c++ adalah bahasa pemograman dalam membuat aplikasi seperti apps video player , calculator, dengan ekstensi .exe




Nah itulah ulasan dari kami . Dan terus kunjungi situs kami untuk mendapatkan informasi yang menarik dan berguna .

Read More

SOLUSI UNTUK HUKUM UNI EROPA DAN CARA MEMBUAT COOKIE HUKUM UNI EROPA PADA BLOG

Dua hari yang lalu, kembali saya dikejutkan dengan munculnya sebuah notifikasi dari google di halaman dashboard blogger saya ketika saya baru saja login. Pesan ini memang pernah saya dapatkan sebelumnya sekitar beberapa tahun yang lalu, namun saat itu saya masih belum mengerti tentang apa dan bagaimana cara saya untuk menanggapinya. Sehingga saya pun tidak menggubrisnya sama sekali.


Bunyi pemberitahuan kebijakan baru Google tentang cookie hukum Uni Eropa adalah sebagai berikut:

“Hukum Uni Eropa mengharuskan Anda untuk memberikan informasi kepada pengunjung Uni Eropa tentang cookie yang digunakan di blog. Dalam banyak kasus, undang-undang ini juga mengharuskan Anda untuk mendapatkan persetujuan pengunjung. Sebagai bagian dari layanan, kami telah menambahkan pemberitahuan di blog Anda untuk menjelaskan penggunaan Google akan cookie Blogger dan Google tertentu, termasuk penggunaan cookie Google Analytics dan AdSense. Anda bertanggung jawab untuk mengonfirmasi bahwa pemberitahuan ini benar-benar berfungsi di blog dan dapat ditampilkan. Jika Anda menggunakan cookie lainnya, misalnya dengan menambahkan fitur pihak ketiga, pemberitahuan ini mungkin tidak berfungsi. Pelajari lebih lanjut tentang pemberitahuan ini dan tanggung jawab Anda.”


 PENJELASAN KEBIJAKAN BARU GOOGLE TENTANG NOTIFIKASI COOKIE HUKUM UNI 

EROPA Berdasarkan penjelasan Google, cookie adalah sekelumit teks yang dikirim ke browser pengguna oleh situs web yang dikunjunginya. Cookie membantu situs web mengingat informasi mengenai pengunjungnya, seperti pilihan bahasa atau setelan lainnya. Cookie berguna bagi pengunjung karena dapat memudahkan kunjungan berikutnya. Sehingga situs web menjadi lebih berguna serta tidak menyulitkan pengunjung. Penjelasan Google tentang notifikasi cookie di negara-negara Uni Eropa adalah sebagai berikut: 

“Uni Eropa (UE) undang-undang mengharuskan Anda untuk memberikan pengunjung Uni Eropa informasi tentang cookie yang digunakan di blog Anda. Dalam banyak kasus, undang-undang ini juga mengharuskan Anda untuk mendapatkan persetujuan. Sebagai rasa hormat, kami telah menambahkan pemberitahuan pada blog Anda untuk membantu memenuhi peraturan tersebut. Pemberitahuan memungkinkan pengunjung tahu tentang penggunaan Google tertentu Blogger dan Google cookie pada blog Anda, termasuk Google Analytics dan cookie AdSense. Pelajari tentang praktik privasi Google dan bagaimana Google menggunakan data di situs mitra.” 

Menurut penjelasan Google di atas dijelaskan bahwa notifikasi kebijakan baru Google tentang cookie hukum Uni Eropa bukan suatu masalah atau pelanggaran, melainkan pemberitahuan kepada pemilik situs web (blog) agar memberikan informasi kepada pengguna tentang cookie yang kita gunakan dan harus menampilkannya di blog. Undang-Undang Uni Eropa (UE) mengharuskan kita memberikan informasi yang jelas kepada pengunjung dari Uni Eropa mengenai cookie yang digunakan di blog kita. Kebijakan tentang cookie Uni Eropa hanya berlaku di negara-negara Uni Eropa, yaitu organisasi antar pemerintah Eropa, yang meliputi negara Belanda, Belgia, Italia, Jerman, Luksemburg, Perancis, Britania Raya, Denmark, Irlandia, Yunani, Portugal, Spanyol, Austria, Finlandia, Swedia, Republik Ceko, Estonia, Hongaria, Latvia, Lituania, Malta, Polandia, Siprus, Slovenia, Slowakia, Bulgaria, Rumania, Kroasia. (Sumber: Wikipedia). Undang-undang Uni Eropa mengharuskan pemilik situs mendapat persetujuan dari pengguna untuk menampilkan cookie yang ada pada blog Anda termasuk cookie Google Analitic dan AdSense. “Jika Anda menggunakan layanan iklan pihak ketiga, seperti Google AdSense, Anda harus melakukan langkah-langkah untuk mengintegrasikan solusi pilihan Anda dengan tag iklan di laman untuk memastikan preferensi pengguna dihormati. Setiap vendor memberikan petunjuk atau layanan dukungan untuk melakukannya. Jika Anda tidak mengikuti langkah-langkah tersebut untuk semua tag di laman, Anda berisiko menyesatkan pengguna: mereka akan berpikir telah menonaktifkan cookie iklan, padahal cookie iklan tetap akan digunakan. Oleh karena itu, uji dengan hati-hati setiap penerapan alat tersebut di situs Anda sendiri.” Cara yang dapat Anda lakukan adalah memberi pilihan cookie kepada pengguna situs web (blog). Misalnya pengunjung dapat disediakan sebuah opsi untuk memblokir cookie iklan. Anda dapat melihat daftar jenis cookie yang digunakan oleh Google dan juga menemukan cara Google dan mitranya menggunakan cookie dalam iklan. 

APA YANG HARUS DILAKUKAN TERKAIT ADANYA NOTIFIKASI COOKIE HUKUM UNI EROPA? 

Merujuk kepada penjelasan Google untuk menindak lanjuti pemberitahuan kebijakan tentang notifikasi cookie Uni Eropa, Anda harus melakukan 2 hal berikut: Harus mengungkapkan upaya komersial dengan jelas dan memperoleh persetujuan untuk setiap pengumpulan data, berbagi dan penggunaan yang terjadi pada setiap situs produk Google. Harus menampilkan informasi yang jelas dan komprehensif kepada pengguna tentang persetujuan untuk penyimpanan dan mengakses cookie atau informasi lain pada perangkat pengguna akhir, di mana aktivitas tersebut terjadi sehubungan berlakunya kebijakan baru Google. 

CARA MEMBUAT COOKIES CONSENT UNTUK ATASI NOTIFIKASI HUKUM UNI EROPA 2015 

Sebelum memasang cookies consent pada blog, Anda harus sudah ada Privacy Policy. Jika belum, Anda bisa membuatnya menggunakan generator gratis www.privacypolicyonline.com/. 

LANGKAH DAN CARA MEMBUAT NOTICE COOKIE HUKUM UNI EROPA DI BLOGGER

 #1. Buka situs sitebeam.net/cookieconsent/  yang melayani pembuatan Cookie Consent gratis

 #2. Klik Download Now 

#3. Klik salah satu dari 6 tema yang tersedia pada Choose Theme 

#4. Centang Customize. Silakan masukkan apa yang akan Anda informasikan pada headline text, accept button text, dan read more button text. Pada form Your Cookie Policy, silakan masukkan link yang mengarah ke laman privacy policy di blog Anda. 

#5. Klik Continue 

#6. Selanjutnya copy kode pada form Copy the Code  

#7. Buka tab baru di browser, login ke dashbor blogger 

#8. Template, kemudian Edit HTML

 #9. Cari kode (agar lebih mudah gunakan CTRL+F). 

#10. Paste Code Cookie Consent tepat sebelum 

#11. Klik simpan Silakan coba buka blog Anda dengan subdomain blogspot.fr atau blogspot.co.uk, di situ akan melihat pemberitahuan tentang penggunaan cookie pada pengunjung. 

Namun jika dibuka dengan subdomain blogspot.com atau custom domain (misalnya domain .COM) maka cookie hukum Uni Eropa tidak akan berpengaruh. Demikian penjelasan dan cara membuat cookie hukum Uni Eropa pada blog,

 semoga informasi ini bermanfaat. Terima kasih. 

Catatan: Jika blog anda berbahasa indonesia, tentu saja target pembaca anda adalah orang Indonesia. Maka anda tidak perlu menerapkan kode ini. Kode ini dibutuhkan jika konten blog anda berbahasa inggris dan mempunyai visitor dari eropa. 

Read More

cara mengatasi samsung galaxy S5 yang mati mendadak

Samsung telah berhasil membuat banyak ponsel yang bagus, namun sayangnya tidak semua bisa bertahan dengan baik dan memiliki kualitas. Baterai adalah piranti paling utama yang banyak mengalami penurunan dari waktu ke waktu, menyebabkan ponsel jauh lebih cepat mati dibanding pertama membelinya. Dan jika hal ini juga dialami Anda, terutama pada Samsung Galaxy S5 yang cepat mengalami mati, berikut ada tips mengatasi hal tersebut.

Seperti dilansir dari laman Wonder How To, Ada kemungkinan beberapa penyebab yang bisa mengakibatkan Samsung Galaxy S5 mati begitu cepat. Namun, mengetahui penyebab hal tersebut sepertinya akan menjadi jalan perbaikan yang bisa Anda lakukan.

Berikut tips mengatasi baterai Samsung Galaxy S5 yang cepat mati!

Baterai  yang Buruk

Seperti yang kami ungkapkan diatas, baterai smartphone adalah piranti yang akan mengalami penurunan kualitas. Baterai tidak dirancang untuk bertahan selama-lamanya, piranti ini akan mulai mengalami degradasi atau penurunan yang akan memunculkan masalah serius dan rata-rata ketahanannya hanya 1 tahun.

Samsung Galaxy S5 yang telah dirilis hampir 2 tahun lalu, tentunya sudah pasti akan mengalami degradasi kualitas yang bisa menjadi inti masalah ponsel sering cepat mati. Dan beruntungnya, smartphone premium lawas ini memiliki baterai yang mudah untuk dilepas sendiri dan tidak terintegrasi dengan bodi (unibody). Selain itu, hampir baterai Samsung di pasaran dijual dengan harga yang terjangkau, dan Anda bisa menggantinya bila memang masalah ini ada pada baterai.

Bagaimana mengidentifikasi kerusakan baterai? Sejatinya baterai yang rusak akan memiliki tanda atau ciri tersendiri secara fisik. Tanda baterai yang buruk adalah fisiknya yang menggelembung. Cara memeriksanya adalah, Anda bisa letakkan baterai pada area datar seperti lantai. Kemudian putar baterai tersebut, periksa apakah piranti ini memutar dengan mudah dan lancar. Jika demikian, maka itu menandakan baterai sudah dalam kondisi harus diganti.

Wakelocks

Jika baterai Galaxy S5 masih dalam kondisi baik, bahkan bisa dibilang baru maka kemungkinan masalah bukan berasal darinya. Cepat matinya perangkat Android kembangan Samsung tersebut, bisa teridentifikasi karena adanya ‘wakelocks’ sehingga akan membuat baterai jauh lebih boros dari penggunaan sebenarnya.

Apa yang dimaksud dengan wakelock, sebenarnya ini adalah sistem yang dipakai dalam aplikasi basis Android untuk membuat ponsel tetap terjaga. Sehingga aplikasi akan tetap bekerja untuk mengirim pemberitahuan dan melakukan sinkronisasi dari latar belakang. Tentu, dengan kerjanya yang komplek dan sistem kerjanya yang akan memaksa perangkat tetap melek akan banyak mencuri daya baterai dan membuatnya semakin cepat habis meski Galaxy S5 tidak digunakan sekalipun.

Untuk mengatasinya, tentu Anda harus membuat aplikasi yang mengandung wakelocks tersebut. Ada banyak alat yang bisa dimanfaatkan untuk mengidentifikasinya, selain tentunya bisa uga langsung menghentikan dan mengenyahkannya.

Touchwiz

Identifikasi lain yang bisa Anda lakukan setelah memeriksa baterai yang ternyata masih baik, serta memasang alat deteksi Wakelocks pun tidak ada. Maka alternatif lain adalah mematikan atau membuang Touchwiz ini. Tentu semua pengguna Samsung tau, bahwa Touchwiz adalahuser interface kembangan Samsung yang dapat dimanfaatkan untuk mempercantik tampilan OS. Namun, tak bisa dipungkiri juga bahwa menggunakannya akan menghabisi kekuatan baterai Galaxy S5, dan tentunya sangat menguras daya.

Short link: http://arenalte.com/TwGiER

Read More

Cara memasukkan javascript ke dalam kode html

Cara Memasukkan kode JavaScript ke dalam HTML

JavaScript termasuk jenis bahasa script, yang digunakan di dalam file HTML. Untuk menginput, atau memasukkan kode JavaScript ke dalam HTML, JavaScript menyediakan 4 alternatif, yaitu:

• Menggunakan tag <script> (internal JavaScript)
• Menggunakan tag <script scr=””> (external JavaScript)
• Menggunakan Event Handler (Inline JavaScript)
• Menggunakan URL (href:=”javascript:”)

Dalam tutorial javascript kali ini kita akan membahas ke-4 metode ini.

---

Cara Memasukkan JavaScript menggunakan tag <script> (internal JavaScript)

Cara pertama untuk menginput kode JavaScript ke dalam halaman HTML adalah dengan menggunakan tag <script> secara internal. Internal disini berarti bahwa kode JavaScript ditulis pada halaman yang sama dengan HTML, atau di dalam satu file HTML.

Cara ini merupakan cara yang paling sering digunakan, jika kode JavaScript tidak begitu panjang, dan hanya digunakan di 1 halaman saja. Kode JavaScript yang akan diinput diletakkan diantaratag pembuka <script> dan tag penutup </script> seperti berikut ini:

<script> //kode javascript diletakkan disini </script>

Tag <script> akan memberitahu web browser bahwa kode diantara tag tersebut bukanlah HTML, tetapi JavaScript.

Dalam beberapa buku atau tutorial JavaScript, mungkin anda akan menemukan penggunaan tag <script> seperti berikut ini:

<script type="text/javascript"> //kode javascript diletakkan disini </script>

Penggunaan atribut type=”text/javascript” digunakan untuk membedakan javascriptdengan bahasa script lain seperti VBScript yang ditulis sebagai type=”text/vbscript”.Namun karena VBScript sudah jarang digunakan, hampir semua web browser modern menjadikan JavaScript sebagai bahasa default, sehingga anda tidak perlu menulis type=”text/javascript”. Tetapi juga tidak salah jika anda ingin menegaskan penggunaan JavaScript dengan menuliskannya secara langsung.

Pada halaman web yang lama, kadang anda juga akan menemukan penggunaan atribut language sebagai pengganti atribut type seperti berikut ini:

<script language=”text/javascript”> //kode javascript diletakkan disini </script>

Atribut language sudah dianggap usang (deprecated), dan disarankan untuk tidak digunakan lagi.

Sebagai contoh cara penginputan JavaScript dengan tag <script>, berikut adalah kode HTMLnya:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <title>Belajar JavaScript di gotupai</title>   <script> alert("Hello World!!"); </script>   </head>   <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di gotupai</p> <p>Belajar Web Programming di gotupai.</p> </body> </html>

Dalam contoh diatas, saya meletakkan tag <script> di dalam tag <head> dari HTML (pada baris ke 7). Tag <script> tersebut berisi kode JavaScript: alert(“Hello World!!”);. alert() adalah fungsi dalam JavaScript yang akan menampilkan pesan ke dalam web browser. Fungsi ini sering digunakan dalam proses pembuatan program JavaScript untuk menampilkan output sederhana. Fungsi alert membutuhkan 1 inputan (argumen) bertipe String. Kita akan membahas cara penulisan fungsi dan tipe-tipe data JavaScript pada tutorial-tutorial selanjutnya.

Jika anda menjalankan program diatas, maka di dalam web browser akan tampil hasil seperti berikut ini:

Cara Memasukkan JavaScript Menggunakan tag <script src=” “> (external JavaScript)

Cara atau metode kedua untuk menginput kode JavaScript ke dalam halaman HTML adalah dengan memindahkan kode JavaScript ke dalam sebuah file terpisah, lalu ‘memanggilnya’ dariHTML. Cara ini sangat disarankan karena akan memberikan banyak keuntungan dan fleksibilitas dalam membuat program JavaScript.

Sebuah file JavaScript disimpan dalam ekstensi .js, seperti: kode.js, register.js, atau kodeku.js.Dari halaman HTML, kita memanggilnya menggunakan tag <script> dengan atribut src. Atribut srcberisi alamat dari file javascript tersebut, seperti berikut ini:

<script src="kode_javascript.js"></script>

Perhatikan bahwa tag <script> tetap ditutup dengan tag penutup </script>, atau anda bisa membuatnya menjadi self closing tag seperti berikut ini:

<script src="kode_javascript.js" />

Penamaan file JavaScript dengan akhiran .js hanyalah sebuah kesepakatan di kalangan programmer. Anda bisa membuat akhiran atau extension apapun, seperti:kode_javascript.aku, atau kode_javascript.duniailkom, asal pada saat pemanggilan dalamtag <script> harus sesuai dengan nama file tersebut, seperti <script src=”kode_javascript.duniailkom”></script>

Namun agar lebih nyaman dan tidak membuat bingung, sebaiknya tetap mengikuti kesepakatan dengan menggunakan akhiran .js.

Sebagai contoh program, saya akan menampilkan alert “Hello World!!” seperti kode program sebelumnya, namun kali ini saya akan memisahkannya menjadi sebuah file tersendiri. Kode JavaScript tersebut akan dipindahkan kedalam file kode_javascript.js dengan isi file sebagai berikut:

alert("Hello World!!")

Ya, hanya 1 baris itu saja, dan savelah pada folder yang sama dengan tempat kode HTML akan dijalankan dengan nama file kode_javascript.js. Lalu pada kode program HTML, kita akan menjalankan file javascript tersebut sebagai berikut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <title>Belajar JavaScript di Duniailkom</title>   <script src="kode_javascript.js"></script>   </head>   <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p> </body> </html>

Perhatikan bahwa di dalam file kode_javascript.js saya langsung menuliskan perintah alert, dan dipanggil oleh tag <script> pada baris ke 7 contoh file HTML diatas.

Cara Memasukkan JavaScript Menggunakan Event Handler (Inline JavaScript)

Cara ketiga untuk menjalankan JavaScript adalah dengan memanggilnya menggunakan Event Handler dari dalam tag HTML.

Konsep Event Handler akan kita pelajari secara khusus pada tutorial terpisah, namun secara sederhananya, event handler adalah pemanggilan kode javascript ketika ‘sesuatu’ terjadi dalamtag HTML.

Sesuatu disini maksudnya ketika sebuah element dalam HTML di klik, di klik kanan, di arahkanmouse, dan lain-lain. Event handler di dalam JavaScript ditulis dengan penambahan kata on. Sehingga jika sebuah tombol di-klik, maka disebut sebagai onclick, jika mouse berada diatas element disebut sebagai onmouseover, dan lain-lain.

Sebagai contoh, ketika sebuah tombol di-klik, maka kita bisa menampilkan alert(“Hello World!!”).Berikut adalah contoh kode programnya:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <title>Belajar JavaScript di Duniailkom</title> </head>   <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p>   <button onclick="alert('Hello World!!')">Klik Saya   </body> </html>

Perhatikan pada baris ke-13 dari contoh kode diatas, yaitu pada penulisan tag <button>. Di dalam tag tersebut, saya menambahkan onclick=”alert(‘Hello World!!’)”, ini adalah kode JavaScriptyang diinput melalui metode event handler.

Cara penginputan kode JavaScript dengan menggunakan Event Handler seperti ini, walaupun praktis namun tidak disarankan, karena kita mencampurkan JavaScriptdengan HTML. Dan jika kode JavaScript agak panjang, akan menyulitkan untuk memisahkan kode HTML dengan JavaScript.

Hasil yang didapat menggunakan event handler diatas, sebaiknya dipindahkan ke dalam tag <script>.

Di dalam pemograman Javascript, ada istilah yang disebut Unobtrusive JavaScript.Unobtrusive JavaScript adalah filosofi atau paradigma dalam pemograman yang berpendapat bahwa content (HTML) sedapat mungkin harus terpisah dari behavior(JavaScript) agar mudah dalam pemeliharaan dan lebih fleksibel. Konsep ini dapat dibaca pada http://en.wikipedia.org/wiki/Unobtrusive_JavaScript.

---

Cara Memasukkan JavaScript Menggunakan URL (href:=”javascript:”)

Cara terakhir (dan juga paling jarang digunakan saat ini) adalah dengan menyisipkan JavaScript ke dalam alamat href dari tag HTML. Cara ini disebut juga dengan protocol javascript. Disebut demikian, karena kita mengganti alamat link dari yang biasa menggunakan protocol http//:menjadi javascript:

Sebagai contoh penggunaannya, perhatikan kode berikut ini:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head> <title>Belajar JavaScript di Duniailkom</title> </head>   <body> <h1>Belajar JavaScript</h1> <p>Saya sedang belajar JavaScript di duniailkom.com</p> <p>Belajar Web Programming di Duniailkom.</p>   <a href="javascript:alert('Hello World!!')">Hallo Dunia...</a>   </body> </html>

Jika anda menjalankan kode diatas, dan men-klik link Hallo Dunia… akan tampil alert Hello World!!, yang berasal dari JavaScript. Disini kita telah menjalankan JavaScript menggunakanprotocol javascript.

Cara menjalankan JavaScript seperti ini berasal dari awal kemunculan javascript, dan sudah banyak ditinggalkan.

Anda juga bisa menggunakan konsep protocol javascript ini untuk menjalankan perintah JavaScript tanpa membuat halaman HTML. Caranya adalah dengan menuliskan perintah JavaScript langsung di bagian address bar dari web browser, seperti contoh berikut:

Konsep ini bisa digunakan untuk membuat sebuah aplikasi javascript yang bisa disimpan dalam web browser, dan dieksekusi pada saat diperlukan, atau dikenal dengan istilah bookmarklet. Pembahasan tentang bookmarklet akan kita bahas pada tutorial JavaScript lanjutan.

---

Best Practice JavaScript: gunakan tag <script src=””>

Dari ke-4 cara menginput kode JavaScript, memisahkan kode JavaScript kedalam sebuah file tersendiri (menggunakan metode <script src=””>) adalah yang paling disarankan. Beberapa keuntungan menggunakan metoda <script src> bila dibandingkan dengan moteda cara memasukkan JavaScript lainnya adalah:

• Menyederhanakan halaman HTML dengan memindahkan seluruh kode JavaScript, sehingga halaman HTML hanya berisi konten saja.
• Sebuah file JavaScript external bisa digunakan untuk beberapa halaman HTML, sehingga jika diperlukan perubahan, kita hanya perlu mengedit sebuah file daripada mengubah secara satu persatu halaman HTML tempat JavaScript ditulis secara internal.
• Jika file JavaScript external digunakan oleh beberapa halaman, file tersebut hanya perlu didownload oleh web browser pada saat pertama kali saja. Pada saat loading halaman lainnya, web browser cukup mengambilnya dari browser cache, sehingga mempercepat loading halaman.

Walaupun saya menyarankan untuk menggunakan javascript secara terpisah menggunakan metoda <script src>, namun untuk contoh-contoh pada tutorial javascript di sini, saya akan menuliskan JavaScript pada halaman yang sama dengan HTML semata-mata untuk menyederhanakan penulisan contoh program.

---

Dalam tutorial javascript kali ini kita telah mempelajari 4 cara menginput atau memasukkan javascript ke dalam HTML. Jika anda perhatikan, dari contoh-contoh yang ada, saya ‘meletakkan’ kode javascript pada bagian atas HTML (tepatnya pada bagian tag <head>). Akan tetapi,JavaScript tidak harus diletakkan di bagian ini.

Read More