BELAJAR PEMOGRAMAN JAVA SCRIPT

Tutorial Belajar JavaScript Dasar Untuk Pemula

   Dalam sesi tutorial kali ini, kita akan mempelajari tentang JavaScript. Tutorial belajar JavaScript dasar untuk pemula dibuat untuk anda yang ingin mempelajari JavaScript. JavaScript merupakan salah satu bahasa pemograman web yang sangat pesat perkembangannya saat ini. 

    JavaScript adalah bahasa pemograman yang digunakan untuk membuat interaksi atau menambah fitur web dinamis kedalam sebuah web. Untuk membuat halaman web, anda tidak harus menggunakan JavaScript. Namun, saat ini JavaScript hadir dalam hampir setiap halaman web modern. Sehingga JavaScript adalah salah satu bahasa pemograman web yang wajib di kuasai.

   Javascript merupakan bagian dari 3 teknologi penting yang harus dikuasai programmer web, yakni HTML untuk konten (isi dari website), CSS untuk tampilan (presentation), dan JavaScript untuk interaksi (behavior).

   Hampir seluruh website modern saat ini menggunakan JavaScript untuk membuat berbagai aplikasi yang dapat berinteraksi dengan user, seperti validasi form HTML, games, kalkulator, fitur chatting, dll.

    Contoh sederhana penggunaan JavaScript dapat anda lihat pada situs duniailkom ini. Cobalah scroll halaman web sampai bawah, dan pada pojok kanan bawah browser akan muncul tanda panah yang jika di-klik akan membuat jendela web browser kembali ke posisi awal halaman. Ini adalah fitur sederhana yang dapat di buat menggunakan JavaScript.

    Dalam mempelajari JavaScript, anda sebaiknya telah menguasai dasar-dasar HTML, dan bisa membuat halaman web sederhana menggunakan HTML. Pengetahuan tentang CSS dan PHP juga akan membantu, walaupun tidak diharuskan.

    Dalam halaman ini saya akan mengindex seluruh artikel Tutorial Belajar JavaScript di duniailkom. Semoga Tutorial JavaScript ini bisa bermanfaat untuk anda yang baru belajar JavaScript, atau sekedar refreshing dan menjadi bahan referensi untuk yang sudah mahir dengan JavaScript.

Lingkungan Pemograman JavaScript:

01.Pengertian dan Fungsi JavaScript dalam Pemograman Web

 

A.Pengertian JavaScript

 

 JavaScript adalah bahasa pemograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.

Jenis bahasa pemograman Client Side berbeda dengan bahasa pemograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi server.

Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor, dan web browser. JavaScript memiliki fitur: high-level programming language, client-side, loosely tiped, dan berorientasi objek.

B.Fungsi JavaScript Dalam Pemograman Web

 

JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server.

Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web, lalu men-klik tombol submit, menunggu sekitar 20 detik untuk website memproses isian form tersebut, dan mendapati halaman yang menyatakan bahwa terdapat kolom form yang masih belum di isi.

Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk mengecek apakah seluruh form telah terisi atau tidak, bisa dipindahkan dari web server ke dalam web browser.

Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form, namun untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan JavaScript.

Akan tetapi karena sifatnya yang dijalankan di sisi client yakni di dalam web browser yang digunakan oleh pengunjung situs, user sepenuhnya dapat mengontrol eksekusi JavaScript. Hampir semua web browser menyediakan fasilitas untuk mematikan JavaScript, atau bahkan mengubah kode JavaScript yang ada. Sehingga kita tidak bisa bergantung sepenuhnya kepada JavaScript.

C.Perkembangan JavaScript Saat Ini

 

Dalam perkembangannya, JavaScript mengalami permasalahan yang sama seperti kode pemograman web yang bersifat client side seperti CSS, yakni bergantung kepada implementasi web browser.

 Kode JavaScript yang kita buat, bisa saja tidak bekerja di Internet Explorer, karena web browser tersebut tidak mendukungnya. Sehingga programmer harus bekerja extra untuk membuat kode program agar bisa “mengakali” dukungan dari web browser.

Karena hal tersebut, JavaScript pada awalnya termasuk bahasa pemograman yang rumit, karena harus membuat beberapa kode program untuk berbagai web browser.

Namun, beberapa tahun belakangan ini, JavaScript kembali bersinar berkat kemudahan yang ditawari oleh komunitas programmer yang membuat library JavaScript seperti jQuery. Library ini memudahkan kita membuat program JavaScript untuk semua web browser, dan membuat fitur-fitur canggih yang sebelumnya membutuhkan ribuan baris kode program menjadi sederhana.

Kedepannya, JavaScript akan tetap menjadi kebutuhan programmer, apalagi untuk situs saat ini yang mengharuskan punya banyak fitur modern sebagai standar.

02.Sejarah dan Perkembangan Versi JavaScript

 Nama JavaScript sebenarnya sedikit membingungkan. Selain kemiripan cara penulisan dengan bahasa pemograman Java, JavaScript sepenuhnya berbeda dengan bahasa pemograman desktop: Java. Dalam Tutorial JavaScript kali ini kita akan mengetahui sejarah awal JavaScript dan perkembangan versi Javascript hingga saat ini.

 

A.Sejarah Penamaan JavaScript

 

Sejarah JavaScript dimulai sekitar tahun 1994, ketika internet dan website sedang mengalami perkembangan yang pesat. Website pada saat itu umumnya dibuat menggunakan bahasa pemograman PERL yang pemrosesannya hanya bisa dilakukan di sisi web server.

Kelemahan pemrosesan di sisi web server adalah, setiap instruksi dari user harus dikirim terlebih dahulu kepada web server, baru kemudian ditampilkan lagi di dalam web browser. Karena kecepatan rata-rata  koneksi internet yang terbatas, hal ini dipandang tidak efisien. Programmer web membutuhkan bahasa pemograman client-side yang bisa berjalan di web browser tanpa harus dikirim ke server.

Pada tahun 1995, Brendan Eich seorang programmer dari Netscape mulai mengembangkan sebuah bahasa pemograman script yang dinamakan Mocha. Netscape pada saat itu merupakan perusahaan software ternama yang memiliki web broser Netscape Navigator.

Bahasa script Mocha ini ditujukan untuk client-side dan juga server-side. Dalam perkembangan selanjutnya, nama Mocha diubah menjadi LiveScript untuk versi client-side, dan LiveWire untuk versi server-side.

Pada saat bahasa pemograman tersebut akan dirilis, Netscape mengadakan kerjasama dengan Sun Microsystems untuk mengembangkan LiveScript, dan tepat ketika Netscape Navigator 2 dirilis, Netscape merubah nama LiveScript menjadi JavaScript dengan tujuan bahasa baru ini akan populer seperti bahasa Java yang saat itu sedang booming di kalangan programmer. Versi JavaScript ini dinamakan dengan JavaScript 1.0.

B.Pesaing JavaScript: Kemunculan JScript dari Microsoft

 

 

   Karena kesuksesan JavaScript 1.0, Netscape selanjutnya mengembangkan JavaScript versi 1.1
pada Netscape Navigator 3, dan mengantarkan Netscape Navigator menjadi pemimpin pasar web browser saat itu.

Selang beberapa bulan kemudian, Microsoft yang melihat kepopuleran JavaScript, memperkenalkan web browser Internet Explorer 3 dengan JScript. JScript adalah penamaan lain dari JavaScript. Hal ini dilakukan Microsoft karena JavaScript merupakan merk dagang yang dimiliki oleh Sun dan Netscape. Sehingga Microsoft terpaksa mencari nama lain untuk versi JavaScript mereka.

Selain memiliki fitur yang mirip, JScript juga menambahkan beberapa fitur tersendiri, sehingga JavaScript dan JScript tidak sepenuhnya kompitable.

Web Browser Internet Explorer 3 yang dirilis microsoft pada tahun 1996 ini adalah awal dari kemunduran Netscape Navigator, karena microsoft merilis Internet Explorer 3 secara gratis dan sebagai software bawaan dari Sistem Operasi Windows. Akan tetapi, keputusan Microsoft menambahkan fitur JScript merupakan langkah besar dalam perkembangan JavaScript.

Perkembangan Penggunaan Web Browser Netscape Navigator (source: wikipedia)

C.Perubahan Menjadi Nama Standar: ECMAScript

 

Implementasi JScript di dalam Internet Explorer membuat kalangan programmer bingung, karena terdapat 2 versi JavaScript: JavaScript di Netscape Navigator and JScript pada Internet Explorer. Versi JavaScript juga memiliki 2 versi, yakni versi 1.0 dan 1.1. Hal ini semakin menambah kerumitan dalam pembuatan program. Permasalahan terjadi karena ketiga versi JavaScript tersebut memiliki perbedaan fitur.

Kejadian ini sama seperti yang dialami oleh HTML dan CSS, dan kalangan programmer sepakat bahwa diperlukan sebuah  standarisasi untuk JavaScript.

Pada pertengahan tahun 1997, JavaScript 1.1 diajukan ke badan standarisasi Eropa: European Computer Manufacturers Association (ECMA) untuk membuat sebuah standar bahasa pemograman script web browser. Atas dasar ini, dibentuklah sebuah komite dengan anggota yang terdiri dari programmer dari berbagai perusahaan internet pada saat itu, seperti Netscape, Sun, Microsoft, Borland, NOMBAS serta beberapa perusahaan lain yang tertarik dengan perkembangan JavaScript.

Komite standarisasi ini menghasilkan bahasa pemograman yang disebut ECMAScript, atau secara formal disebut ECMAScript -262. 1 tahun berikutnya, badan standarisasi ISO (International Organization for Standardization) juga mengadopsi ECMAScript sebagai standar. Sejak saat itu, semua web browser menjadikan ECMAScript sebagai standar acuan untuk JavaScript.

ECMAScript terus dikembangkan hingga mencapai versi 3 pada tahun 1999. Berita baiknya, hampir semua web browser saat itu, terutama Microsoft Internet Explorer 5.5 dan Netscape 6 telah mendukung ECMAScript-262 versi 3. Namun berita buruknya, masing-masing web browser menerapkan standar dengan sedikit berbeda, sehingga masih terdapat kemungkinan tidak kompitable.

D.Versi Saat ini: ECMAScript versi 5

 

Versi terakhir dari ECMAScript adalah ECMA-262 versi 5 yang dirilis pada 2009. ECMAScript versi 4 sengaja dilompati karena beberapa alasan ketidakcocokan proposal yang diajukan. ECMA-262 versi 5 inilah yang saat ini menjadi standar untuk web browser modern seperti Internet Explorer, Google Chrome, Firefox, Opera, dan Safari
.
Akan tetapi, perbedaan implementasi ECMAScript tetap ada di dalam web browser. Biasanya perbedaan ini terkait dengan fitur-fitur tambahan. Salah satu cara programmer untuk mengatasi masalah ini yaitu dengan mendeteksi web browser yang digunakan user, lalu menjalankan fungsi yang dirancang secara spesifik untuk web browser tersebut. Proses ini dikenal sebagai browser sniffing, dan bukan sesuatu yang menyenangkan.

Kabar baiknya, sekarang banyak terdapat library JavaScript  yang dirancang untuk melapisi perbedaan ECMAScript ini, salah satunya adalah jQuery. jQuery menyediakan fungsi otomatis dalam mengatasi perbedaan implementasi ECMAScript di dalam web browser.

E.ECMAScript atau JavaScript?

 

ECMAScript adalah versi standar dari JavaScript, versi ECMAScript yang ada saat ini adalah versi 3 dan  versi 5. Namun karena kepopuleran JavaScript, Hampir semua kalangan dan programmer menyebut ECMAScript dengan sebutan umum: JavaScript.

Merk dagang JavaScript saat ini dimiliki oleh perusahaan Oracle (yang mengakuisisi Sun Microsystem beberapa tahun lalu), Namun anda juga akan mendengar versi JavaScript 1.5 atau JavaScript 1.8. Versi JavaScript ini adalah versi yang diadopsi oleh Mozilla Firefox (yang merupakan ‘reingkarnasi’ dari Netscape). JavaScript 1.5 sebenarnya adalah ECMAScript 3. Dan JavaScript 1.8 merupakan versi ECMAScript dengan beberapa penambahan internal oleh Mozilla.

F.Apa yang dimaksud dengan ECMAScript Engine (JavaScript Engine)?

 

Jika anda membaca perkembangan tentang JavaScript, maka selain versi ECMAScript yang digunakan, terdapat istilah JavaScript Engine atau dalam bahasa standarnya: ECMAScript Engine.

JavaScript Engine adalah mekanisme internal yang dimiliki oleh web browser. JavaScript Engine dapat diumpamakan dengan compiler dalam bahasa pemograman lain, yakni algoritma yang digunakan untuk menjalankan JavaScript. Semakin cepat sebuah web browser menjalankan JavaScript akan semakin baik.
Biasanya disetiap rilis baru web browser seperti Google Chrome, Internet Explorer, maupun Mozilla Firefox, juga diikuti rilis terbaru JavaScript Engine yang menawarkan kecepatan lebih baik.

V8 adalah nama JavaScript Engine untuk Google Chrome, SpiderMonkey untuk Mozilla Firefox, dan Chakra untuk Internet Explorer. Daftar lengkap tentang JavaScript engine ini dapat dilihat di http://en.wikipedia.org/wiki/List_of_ECMAScript_engines

03.Cara Menjalankan Kode Program JavaScript

 

A.Aplikasi Untuk Menjalankan JavaScript

 

JavaScript merupakan bahasa script yang berjalan pada web browser, sehingga program yang dibutuhkan untuk menjalankan JavaScript hanyalah sebuah aplikasi text editor dan sebuah web browser seperti Google Chrome atau Mozilla Firefox.

Untuk aplikasi text editor, anda bisa menggunakan aplikasi notepad bawaan Windows, atau menggunakan aplikasi khusus text editor. Salah satu aplikasi text editor sederhana yang saya gunakan adalah Notepad++ yang ringan dan bersifat gratis. Untuk menginstall aplikasi Notepad++ ini pernah saya bahas pada tutorial Memilih Aplikasi Editor HTML.

Pilihan web browser bukan sesuatu yang mutlak. Anda bebas menggunakan aplikasi web browser kesukaan. Terdapat beberapa jenis aplikasi web browser populer yang bisa diinstall dengan gratis. Anda bahkan bisa menginstall seluruhnya, seperti yang pernah saya bahas pada tutorial Mengenal Fungsi Web Browser.

B.Cara Menjalankan kode JavaScript

 

Jika aplikasi Notepad++ dan web browser telah tersedia, saatnya mencoba menjalankan aplikasi JavaScript pertama anda.

Cara penulisan JavaScript mirip dengan penulisan bahasa pemograman web lainnya seperti PHP dan CSS, yakni dengan menyisipkan kode JavaScript di dalam HTML.

Silahkan buka aplikasi text editor, lalu ketikkan kode berikut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<!DOCTYPE html> <html> <head> <title>Belajar JavaScript di Duniailkom</title> <script type="text/javascript"> function tambah_semangat() {    var a=document.getElementById("div_semangat");    a.innerHTML+="<p>Sedang Belajar JavaScript, Semangat...!!!</p>"; } </script> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom.com </p> Klik tombol ini untuk menambahkan kalimat baru: <button id="tambah" onclick="tambah_semangat()">Semangaat..!!</button> <div id="div_semangat"></div> </body> </html>

Savelah kode HTML diatas dengan nama: belajar_js.html. Folder tempat anda menyimpan file HTML ini tidak menjadi masalah, karena kita tidak perlu meletakkannya dalam folder web server seperti file PHP. Saya membuat sebuah folder baru di D:\BelajarHTML\Javascript. Savelah di folder tersebut.

Perhatikan bahwa nama file dari contoh JavaScript kita berakhiran .html, karena pada dasarnya kode tersebut adalah kode HTML yang ‘disiipkan’ dengan JavaScript.

Untuk menjalankan file tersebut, sama seperti HTML biasa, kita tinggal double klik belajar_js.html dan hasilnya akan tampil di dalam web browser.



Untuk menguji kode JavaScript yang telah dibuat, silahkan klik tombol “Semangaat..!!” beberapa kali, dan kalimat baru akan ditambahkan di akhir halaman web kita.

 

Selamat!!, anda telah berhasil menjalankan kode JavaScript.

Terlepas dari kode JavaScript yang saya tulis diatas (kita akan mempelajarinya dalam tutorial-tutorial selanjutnya), kode tersebut pada dasarnya berfungsi untuk menambahkan sebuah kalimat kedalam halaman web setelah halaman web tampil di web browser.

Fitur inilah yang membuat JavaScript menawarkan kelebihannya, dimana kita bisa merubah apapun yang terdapat dalam halaman web saat web telah dikirim ke web browser. Bahkan dengan men-klik sebuah tombol, kita bisa mengganti seluruh isi halaman web tanpa harus berpindah halaman.
Berikut tampilan akhirnya (silahkan di coba):

Sebelum memulai membuat kode JavaScript, dalam tutorial berikutnya saya akan membahas tentang cara menampilkan error dan proses debugging (pencarian kesalahan) untuk JavaScript. Selanjutnya dalam tutorial javascript: Cara Menampilkan Error JavaScript (Debugging) dengan Web Browser.

04.Cara Menampilkan Pesan Kesalahan (Error) JavaScript

 

A.Cara Menampilkan Error JavaScript

 

Kemudahan untuk menjalankan JavaScript hanya dengan web browser, memberikan permasalah tersendiri untuk programmer. Biasanya dalam membuat program adakalanya kita melakukan kesalahan penulisan program, seperti salah penulisan fungsi, atau lupa menambahkan tanda “;” sebagai penutup baris. Biasanya pesan kesalahan akan langsung ditampilkan, dan kita tinggal melakukan koreksi.

Akan tetapi, pesan kesalahan (error) untuk JavaScript tidak langsung ditampilkan web browser. Web browser pada dasarnya adalah aplikasi untuk menampilkan halaman web, dan secara default web browser “menyembunyikan” permasalahan coding halaman web yang ditampilkan. Hal ini berguna untuk pengguna awam yang pasti akan bingung melihat pesan-pesan error dari sebuah halaman web.

Khusus untuk programmer, kita butuh hal sebaliknya, yaitu agar web browser dapat menampilkan pesan kesalahan dari program yang kita buat.

Beberapa tahun yang lalu, untuk keperluan debugging ini kita harus menggunakan plugin tambahan yang diinstall ke dalam web browser. Namun saat ini, web browser telah menyediakan fitur bawaan untuk menampilkan kesalahan dan proses debugging untuk programmer web, terutama JavaScript.

B.Menu Developer Tools dalam Google Chrome

 

Jika anda menggunakan Google Chrome, pada web browser ini terdapat fitur yang dinamakan Developer Tools dan JavaScript Console. Sesuai dengan namanya, Developer Tools adalah fasilitas yang dirancang untuk pengembangan web. Dengan fitur ini, kita bisa menampilkan pesan kesalahan JavaScript, HTML, CSS dan melihat efeknya secara real time.

Untuk mengakses fitur ini, silahkan klik tombol setting Google Chrome yang terletak di kanan atas, cari menu Tools, lalu pilih salah satu Developer Tools atau JavaScript Console. Developer Tools bisa juga dibuka dengan shortcut tombol keyboard: ctrl+shift+i. Untuk kenyamanan, anda dapat menghapalkan tombol shortcut tersebut karena kita akan sering menggunakan fitur Developer Tools ini.

Berikut adalah tampilan menu pada Google Chrome:



Saat menu Developer Tools ditampilkan, anda akan melihat banyak tab-tab yang disediakan untuk keperluan debugging, namun untuk saat ini kita hanya fokus pada tab console. Pada tab console inilah pesan error JavaScript akan ditampilkan.



Untuk mengujinya, silahkan edit contoh halaman belajar_js.html kita sebelumnya. Hapus beberapa huruf dari kode JavaScript yang ada, lalu jalankan dengan jendela Developer Tools dalam keadaan terbuka, maka anda bisa melihat error program ditampilkan di tab console, beserta baris dimana kode tersebut error.

 

Untuk memunculkan jendela Web Developer, klik menu Firefox di kiri atas web browser, lalu pilih menu Web Developer.
Anda juga bisa menggunakan shortcut yang sama dengan Google Chrome, yakni kombinasi tombol keyboard: ctrl+shift+i. Berikut adalah tampilan pilihan menu dalam Firefox:


Menu pada Web Developer lumayan lengkap, namun kita hanya akan fokus pada pilihan console, karena pada menu inilah error JavaScript akan ditampilkan.

Sama seperti pada menu Developer Tools bawaan Google Chrome, cobalah menghapus beberapa baris kode program dari contoh pada tutorial Cara Menjalankan Kode Program JavaScript, dan jalankan dengan Firefox untuk melihat tampilan kode error.

Setiap aplikasi web developer menyediakan fitur untuk menampilkan error JavaScript. Namun masing-masing memiliki settingan “error” yang ditampilkan. Misalnya untuk Firefox Web Developer, akan menampilkan error jika character set tidak didefenisikan pada header HTML, namun pesan error ini tidak tampil di Google Chrome.

 Untuk menghilangkan pesan error character set dari Firefox Web Developer, kita tinggal menambahkan baris meta tag dalam bagian header HTML seperti berikut ini:

1 2 3

<html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <head>

Beberapa error juga tidak berdampak “serius” dalam menjalankan JavaScript. Jika anda memeriksa kode error yang ada dalam situs duniailkom, anda akan menemukan banyak error, namun kode JavaScript yang ada tetap bisa berjalan.

Akan tetapi, khusus dalam tahap pembelajaran, sedapat mungkin kita menghindari error kode program ini

C.Web Developer “must-have” Plugin: Firebug

 

Sebelum web browser menyediakan menu web developer, Plugin Firebug merupakan aplikasi plugin yang harus diinstall oleh web programmer. Plugin ini menawarkan fasilitas lengkap untuk menulis program, debugging, dan mengedit JavaScript pada saat yang bersamaan.

Plugin Firebug tersedia untuk Mozilla Firefox dan Google Chrome. Anda boleh menginstall plugin ini untuk mengetahui fitur-fitur apa saja yang disediakan oleh firebug. Plugin Firebug merupakan alternatif pilihan untuk menggantikan menu web developer bawaan web browser.



Di dalam tutorial kali ini, kita telah berkenalan dengan aplikasi web developer untuk memeriksa dan menampilkan error kode JavaScript. Walaupun saya hanya membahas aplikasi web developer untuk Google Chrome dan Mozilla Firefox saja, secara umum setiap web browser modern saat ini telah menyediakan menu yang serupa.

Selain untuk menampilkan error, bagian console pada semua fitur web developer ini juga berfungsi untuk menampilkan hasil dari kode JavaScript. Saya akan membahas caranya dalam beberapa tutorial javascript lainnya.

05.Cara Memasukkan (input) kode JavaScript ke dalam HTML

A.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.

B.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 diantara tag 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 javascript dengan 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 Duniailkom</title> <script> alert("Hello World!!"); </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>

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:

 

C.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’ dari HTML. 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 src berisi 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 dalam tag <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.

Alamat dari file javascript bisa berupa alamat relatif seperti contoh diatas, atau bisa juga alamat absolut seperti www.duniailkom.com/kode_javascript.js. Aturan penulisan alamat ini sama seperti atribut scr HTML lainnya. Perbedaan antara alamat relatif dan absolut telah dibahas pada Tutorial HTML cara membuat link HTML.

D.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 dalam tag HTML.

Sesuatu disini maksudnya ketika sebuah element dalam HTML di klik, di klik kanan, di arahkan mouse, 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 JavaScript yang diinput melalui metode event handler.

Cara penginputan kode JavaScript dengan menggunakan Event Handler seperti ini, walaupun praktis namun tidak disarankan, karena kita mencampurkan JavaScript dengan 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.

E.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 menggunakan protocol 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.

F.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 di download 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 duniailkom, 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.

06.Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML

 

A. Posisi JavaScript pada di awal HTML (di dalam tag <head>)

 

Pada dasarnya, anda bebas meletakkan kode program JavaScript dibagian manapun dalam HTML, selama berada di dalam tag <script> (atau melalui event handler, walaupun tidak disarankan).

Tag <script> bisa diletakan pada awal HTML (di dalam tag <head>), di tengah HTML (di dalam tag <body>), maupun diakhir HTML (sebelum tag penutup </html>). Posisi peletakan ini akan mempengaruhi bagaimana urutan kode JavaScript dijalankan.

Halaman HTML diproses oleh web browser dari atas ke bawah secara berurutan. Hal ini berlaku juga untuk HTML, CSS, dan JavaScript. Kode JavaScript yang diletakkan pada awal dokumen (didalam tag <head>), akan diproses terlebih dahulu sebelum web browser memproses isi dokumen HTML yang terdapat di dalam tag <body>.

Untuk melihat efeknya,mari kita coba contoh kode HTML dan JavaScript berikut ini:

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

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

Contoh kode diatas sama persis dengan contoh yang saya jalankan ketika membahas tentang cara men-input kode javascript pada tutorial sebelumnya. Namun kali ini saya akan fokus bagaimana web browser mengeksekusi halaman tersebut.

Dalam contoh diatas, tag <script> berisi kode JavaScript yang diletakkan pada awal halaman (di dalam tag <head>).

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



Sebelum anda men-klik tombol OK dari kotak dialog alert, perhatikan tampilan text HTML dari halaman tersebut. Pada halaman web tidak terlihat tulisan apapun, padahal di dalam kode HTML, saya telah menambahkan 2 kalimat di dalam tag <p>. Dan hanya jika anda men-klik tombol OK, baru setelahnya akan tampil 2 kalimat tersebut.

Hal ini berarti bahwa jika kode JavaScript diletakkan pada posisi tag <head>, maka kode tersebut akan dijalankan (diproses) sebelum ‘isi’ website (tag <body>) ditampilkan. Sehingga disimpulkan bahwa pemrosesan program dimulai dari atas ke bawah halaman web.

Posisi peletakan JavaScript diawal HTML ini , bisa menjadi permasalahan tersendiri dalam membuat kode JavaScript.

Pada saat kita menulis program JavaScript, sebagian besar kode tersebut digunakan untuk memanipulasi halaman web. Permasalahan muncul jika saat kode JavaScript dieksekusi, halaman atau tag HTML yang akan diproses belum tersedia.

Sebagai contoh lain, silahkan jalankan kode program HTML berikut ini:

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Belajar JavaScript</title> <script>    var a=document.getElementById("div_semangat");    a.innerHTML="<p>Sedang Belajar JavaScript, Semangat...!!!</p>"; </script> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom.com </p> <div id="div_semangat"></div> </body> </html>

Dalam file HTML diatas, saya membuat beberapa baris kode JavaScript, anda tidak perlu memahami kode tersebut, karena kita akan mempelajarinya nanti. Namun inti dari kode tersebut adalah menambahkan 1 kalimat ke dalam tag HTML yang memiliki id=”div semangat”.

Tag HTML dengan id=”div_semangat” berada di dalam sebuah tag div pada baris ke. Pada tag inilah saya akan mengisi kalimat yang dibuat dengan JavaScript.

Jika anda menjalankan halaman tersebut, hasil tampilan pada web browser tidak akan menampilkan kalimat yang saya buat dari JavaScript. Apa yang terjadi?

Untuk melihat kenapa kalimat tersebut tidak tampil, anda bisa melihatnya dari error JavaScript. Silahkan aktifkan menu Web Developer dari web browser (seperti yang pernah saya bahas pada Cara Menampilkan Pesan Kesalahan (Error) JavaScript). Dari tab console, anda bisa melihat 1 buah error, yakni :

Uncaught TypeError: Cannot set property 'innerHTML' of null (pada Google Chrome)

atau

TypeError: a is null (pada Mozilla Firefox)

Kedua web browser tersebut menampilkan error yang menyatakan bahwa variabel a yang digunakan di dalam JavaScript tidak bisa menemukan tag dengan id=”div semangat”.

Hal ini terjadi karena pada saat JavaScript di eksekusi, tag div tersebut belum tersedia (belum sempat diproses), karena JavaScript di jalankan sebelum tag <body>. Tag div baru tersedia ketika web browser telah selesai menjalankan JavaScript.

Salah satu solusi untuk permasalahan ini adalah dengan memindahkan kode JavaScript ke akhir halaman HTML.

B. Posisi JavaScript pada di akhir HTML (sebelum tag </html>)

 

Dari contoh sebelumnya, kita dapat melihat permasalahan yang terjadi jika kode JavaScript diposisikan pada awal halaman.

Untuk mengatasi permasalahan tersebut, beberapa programmer menyarankan untuk meletakkan kode JavaScript di akhir halaman (yakni sebelum tag penutup </html>). Peletakan tag <script> diakhir halaman akan memastikan bahwa seluruh tag HTML telah tampil pada web browser sebelum kode JavaScript.

Untuk membuktikannya, mari kita ubah kode program sebelumnya, dan memindahkan kode JavaScript ke posisi akhir halaman:

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Belajar JavaScript</title> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom.com </p> <div id="div_semangat"></div> </body> <script>    var a=document.getElementById("div_semangat");    a.innerHTML="<p>Sedang Belajar JavaScript, Semangat...!!!</p>"; </script> </html>

Dan, seperti yang terlihat, kalimat “Sedang Belajar JavaScript, Semangat…!!!” sukses ditampilkan ke dalam web browser hanya dengan memindahkan kode JavaScript ke akhir halaman.

Namun sebagian programmer tidak menyukai peletakan JavaScript di akhir halaman seperti ini, karena terkesan kurang ‘elegan’. Untungnya JavaScript menyediakan solusi untuk hal ini.

C. Solusi Elegan JavaScript : Fungsi Event onload

 

JavaScript menyediakan solusi untuk programmer yang tetap ‘keras kepala’ -termasuk saya :) untuk tetap meletakkan JavaScript di awal halaman, yakni menggunakan Event Onload.

Walaupun saya belum membahas tentang konsep event, Event di dalam JavaScript dapat dibayangkan dengan sebuah ‘kejadian’ yang terjadi pada suatu elemen. Pada pembahasan tentang cara menginput kode JavaScript, sekilas saya telah membahas tentang ‘kejadian’ ini, yaitu ketika sebuah tombol di-klik, atau di-klik kanan. Klik dan klik kanan adalah kejadian (atau event) yang terjadi pada sebuah tombol.

Sebuah event di dalam javascript tidak harus ‘berwujud’ seperti klik atau klik kanan,namun bisa juga yang ’tidak berwujud’. Salah satu event yang ‘tidak berwujud’ ini adalah event pada saat halaman di tampilkan, atau di dalam bahasa inggris, pada saat halaman loading.

Event pada saat halaman ditampilkan (load) inilah yang bisa dimanfaatkan untuk mengeksekusi kode JavaScript. Kita ingin kode javascript di jalankan ketika seluruh dokumen telah tampil, tanpa memperhatikan pada posisi mana kode JavaScript di letakkan. Untuk hal ini, JavaScript menyediakan event onload.

Menjalankan JavaScript pada event onload, akan membuat javascript ‘menunggu’ seluruh tag HTML tampil sebelum memprosesnya, walaupun tag <script> berada di awal halaman (bahkan di posisi manapun).

Berikut adalah kode JavaScript yang diletakkan di awal halaman HTML, dan menggunakan event onload:

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Belajar JavaScript</title> <script> window.onload = function() {    var a=document.getElementById("div_semangat");    a.innerHTML="<p>Sedang Belajar JavaScript, Semangat...!!!</p>"; } </script> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom.com </p> <div id="div_semangat"></div> </body>    </html>

Perhatikan cara penulisan event onload pada baris ke 7. Event onload adalah salah satu method (atau fungsi) dari objek window dalam JavaScript (anda tidak perlu memahaminya maksudnya, saya akan membahasnya secara lebih dalam pada tutorial khusus JavaScript mengenai event).

Dengan menggunakan event onload, seluruh kode JavaScript dapat diletakkan di awal halaman, tanpa perlu khawatir dengan urutan pengeksekusian oleh web browser.

Dalam beberapa tutorial JavaScript berikutnya, saya akan menggunakan cara penulisan JavaScript menggunakan event onload seperti ini. Anda cukup mengetahui cara penulisan event onload saja, saya akan membahas konsep event pada tutorial JavaScript tersendiri.

07.Cara Menampilkan Hasil Program JavaScript

 

 

A. Cara Menampilkan Hasil Program JavaScript

 

Tidak seperti bahasa pemograman PHP yang memiliki perintah echo atau print untuk menampilkan hasil program ke dalam web browser, JavaScript tidak menyediakan perintah sederhana untuk menampilkan hasil program ke dalam web browser. Dalam JavaScript, kita membutuhkan beberapa langkah yang agak panjang jika ingin menampilkan hasil ke dalam web browser.

Pertama, kita harus membuat sebuah tag ‘container’, atau tag penampung untuk hasil program JavaScript. Tag container ini bisa berupa tag HTML apapun, seperti tag paragraf <p> atau tag <div>.

Kedua, kita harus mencari elemen ‘container’ ini dari JavaScript. JavaScript menyediakan beberapa cara untuk mengakses elemen dalam HTML. Salah satu caranya adalah dengan menggunakan fungsi (atau lebih tepatnya: method): document.getElementById(“id_continer”). Fungsi getElementById akan mencari elemen HTML yang memiliki atribut id yang diinputkan di dalam tanda kurung.

Langkah ketiga, adalah menginputkan hasil program kedalam tag ‘container’ dengan menggunakan properti innerHTML.

Untuk mempermudah pemahaman cara menampilkan hasil program JavaScript ke dalam web browser, berikut adalah contoh program untuk menampilkan hasil penjumlahan:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Belajar JavaScript</title> <script> window.onload = function() {    var hasil;    hasil = 1+3+5+7+9;    document.getElementById("tempat_hasil").innerHTML=hasil; } </script> </head>    <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom.com </p> <div id="tempat_hasil"> </div> </body> </html>

Pada baris ke-7, saya masuk kedalam JavaScript menggunakan tag <script>. Pada baris pertama, saya menggunakan metoda event onload untuk memastikan bahwa kode JavaScript dijalankan setelah seluruh HTML telah selesai di proses (seperti yang telah kita pelajari pada tutorial Posisi Terbaik Meletakkan kode JavaScipt di dalam HTML)

Pada baris berikutnya, saya membuat variabel hasil yang akan menampung hasil penjumlahan. Pada baris ke-9 saya melakukan beberapa penjumlahan sederhana, dan menyimpannya ke dalam variabel hasil. Pada baris ke-10 inilah saya menampilkan nilai akhir penjumlahan ke dalam tag HTML yang memiliki id tempat_hasil.

Penjelasan tentang fungsi document.getElementById akan kita bahas pada tutorial khusus tentang DOM JavaScript.

Proses untuk menampilkan hasil program yang agak panjang ini akan kurang praktis dalam pembuatan program JavaScript dimana kita akan sering untuk menguji hasil program sebelum masuk ke bagian program berikutnya.

Untuk keperluan ini, kita akan melihat alternatif cara untuk menampilkan hasil program dari JavaScript, yakni dengan fungsi alert dan fungsi console.log.

B. Fungsi Alert untuk Menampilkan Hasil Program JavaScript

 

Fungsi alert yang telah beberapa kali saya gunakan dalam beberapa tutorial sebelum ini, dan merupakan cara paling sederhana untuk menampilkan hasil program JavaScript.

Fungsi alert akan menampilkan ‘apapun’ yang diberikan sebagai argumen ke dalam fungsi ini. Setiap output yang ditampilkan akan dikonversi menjadi bentuk text (tipe data String). Fungsi alert akan menampilkan hasil JavaScript dengan cepat.

Berikut adalah contoh kode JavaScript sebelumnya jika menggunakan fungsi alert:

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Belajar JavaScript</title> <script> window.onload = function() {    var hasil;    hasil = 1+3+5+7+9;    alert(hasil); } </script> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom.com </p> </div> </body> </html>

 

C. Fungsi Console.Log untuk Menampilkan Hasil Program JavaScript

 

Web browser saat ini telah menyediakan menu khusus untuk programming web, yakni melalui menu Web Developer (seperti yang di bahas pada Cara Menampilkan Pesan Kesalahan (Error) JavaScript).

Menu web developer ini menyediakan cara lain (yang lebih ‘modern‘) untuk menampilkan hasil program JavaScript dibandingkan menggunakan fungsi alert, yakni dengan fungsi console.log.

Fungsi console.log akan menampilkan hasil program ke dalam tab console pada menu Web Developer. Cara penggunaan fungsi ini sama seperti fungsi alert, dimana kita hanya butuh menginput hasil yang ingin ditampilkan kedalam argumen fungsi ini. Jika fungsi itu bukan bertipe String, maka akan dikonversi menjadi String.

Berikut adalah contoh penggunaan fungsi console.log dalam menampilkan hasil program JavaScript:

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Belajar JavaScript</title> <script> window.onload = function() {    var hasil;    hasil = 1+3+5+7+9;    console.log(hasil); } </script> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom.com </p> </div> </body> </html>

Pilihan apakah menggunakan fungsi alert dan fungsi console.log tergantung kepada kenyamanan kita sebagai programmer. Dalam tutorial JavaScript di dunia ilkom ini, saya akan lebih banyak menggunakan fungsi console.log, karena dibandingkan fungsi alert, fungsi console.log bisa digunakan untuk menampilkan banyak hasil program sekaligus dan tampilan hasil program akan lebih rapi.

Kedua fungsi ini digunakan hanya dalam proses pembuatan program, atau proses pencarian kesalahan (debugging). Akan sangat jarang kita menggunakan fungsi ini dalam situs live. Untuk menampilkan output kepada user di dalam halaman HTML, biasanya menggunakan fungsi lain seperti document.getElementById dan InnerHTML seperti cara pertama pada awal artikel ini

Cara lain untuk menampilkan hasil dari JavaScript adalah menggunakan fungsi document.write(). Berikut adalah cara penggunaannya:

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

<!DOCTYPE html> <html> <head> <title>Belajar JavaScript</title> <script> window.onload = function() {    document.write("Hello duniailkom"); } </script> </head> <body> <h1>Belajar JavaScript</h1> <p> Saya sedang belajar JavaScript di duniailkom.com </p> </div> </body> </html>

Fungsi document.write akan menampilkan hasil JavaScript ke dalam web browser, tetapi dengan satu ketentuan: fungsi ini akan menghapus seluruh tag HTML yang telah ditulis, dan menggantinya dengan isi dari fungsi ini. Fungsi document.write hanya akan berguna jika anda ingin menuliskan seluruh kode HTML hanya melalui JavaScript, termasuk tag pembuka HTML seperti document.write(“<!DOCTYPE html>”), dan seterusnya.

08.Pengertian Core JavaScript dan DOM (Document Object Model)

 

A. Pengertian Core JavaScript

 

Core JavaScript atau JavaScript inti adalah istilah yang merujuk kepada ‘Bahasa Pemograman JavaScript‘. Pada bagian Core JavaScript inilah kita akan belajar tentang aturan pemograman yang umumnya dipelajari, seperti cara pendefenisian variabel, perbedaan tipe-tipe data, cara pembuatan array, cara penulisan struktur IF, serta cara pembuatan Objek.

Bagian Core JavaScript membahas tentang “bahasa” (atau syntax) dari JavaScript. Jika anda pernah menggunakan bahasa pemograman seperti C++ atau PHP, tidak akan terlalu sulit untuk mempelajari aturan penulisan dalam JavaScript.

Perbedaan mendasar antara JavaScript dengan dengan bahasa pemograman lain, adalah sifat JavaScript yang lebih berorientasi ke Objek. Namun JavaScript ‘tidak mengharuskan’ menggunakan objek.

Saya menyebutnya ‘tidak harus’ karena kita bisa membuat beberapa kode program yang seolah-olah tanpa menggunakan objek. Contohnya adalah fungsi alert.

Pada tutorial sebelumnya, saya menggunakan fungsi alert untuk menampilkan hasil JavaScript. Fungsi ini dipanggil dengan perintah fungsi biasa:

1 2 3

<script> alert(‘Hello World’); </script>

Fungsi alert sebenarnya adalah method dari objek window dalam JavaScript, yang seharusnya dipanggil dengan struktur objeknya:

1 2 3

<script> window.alert(‘Hello World’); </script>

Penjelasan tentang objek windows ini, dan juga kenapa kita tidak harus menuliskannya, akan kita bahas pada tutorial tersendiri.

Core JavaScript juga merupakan istilah untuk JavaScript yang tidak terikat dengan ‘lingkungannya’ yaitu web browser. Selama ini JavaScript hanya dikenal sebagai bahasa tipe client-side JavaScript yang dijalankan di dalam web browser.

Akan tetapi, perkembangan JavaScript saat ini juga mendukung penggunaanya di sisi server (salah satunya dengan menggunakan node.js).

B. Pengertian DOM (Document Object Model)

 

Bagian kedua yang akan kita pelajari dalam menguasai Client-Side JavaScript adalah DOM (singkatan dari Document Object Model). DOM adalah API (Application Programming Interface) yang disediakan web browser kepada programmer.

Secara sederhananya, DOM adalah kumpulan aturan atau cara bagi programmer untuk ‘memanipulasi’ apapun yang tampil dalam halaman web. DOM tidak terikat dengan JavaScript, dan sepenuhnya bukan bagian dari JavaScript. DOM yang sama bisa juga diakses dengan bahasa client-side lain seperti JScript.
Tag atau element yang ada di dalam HTML diatur di dalam DOM. Dengan menggunakan JavaScript, kita bisa memanipulasi seluruh tag HTML ini. Salah satu contoh DOM yang telah kita gunakan adalah fungsi document.getElementById.

Fungsi document.get ElementById berfungsi untuk mencari sebuah tag HTML berdasarkan id. Selain document.getElementById, dalam DOM juga disediakan fungsi lain seperti

 document.getElementByName, document.getElementByClass, dan lain-lain. Fitur-fitur seperti inilah yang akan kita pelajari pada bagian DOM.

Karena sifatnya yang berbeda, tutorial JavaScript di duniailkom akan memisahkan Core JavaScript dengan DOM.

09.Pengertian Core JavaScript dan DOM (Document Object Model)

 

A. Pengertian Core JavaScript

 

Core JavaScript atau JavaScript inti adalah istilah yang merujuk kepada ‘Bahasa Pemograman JavaScript‘. Pada bagian Core JavaScript inilah kita akan belajar tentang aturan pemograman yang umumnya dipelajari, seperti cara pendefenisian variabel, perbedaan tipe-tipe data, cara pembuatan array, cara penulisan struktur IF, serta cara pembuatan Objek.

Bagian Core JavaScript membahas tentang “bahasa” (atau syntax) dari JavaScript. Jika anda pernah menggunakan bahasa pemograman seperti C++ atau PHP, tidak akan terlalu sulit untuk mempelajari aturan penulisan dalam JavaScript.


Perbedaan mendasar antara JavaScript dengan dengan bahasa pemograman lain, adalah sifat JavaScript yang lebih berorientasi ke Objek. Namun JavaScript ‘tidak mengharuskan’ menggunakan objek. Saya menyebutnya ‘tidak harus’ karena kita bisa membuat beberapa kode program yang seolah-olah tanpa menggunakan objek. Contohnya adalah fungsi alert.

Pada tutorial sebelumnya, saya menggunakan fungsi alert untuk menampilkan hasil JavaScript. Fungsi ini dipanggil dengan perintah fungsi biasa:

1 2 3

<script> alert(‘Hello World’); </script>

Fungsi alert sebenarnya adalah method dari objek window dalam JavaScript, yang seharusnya dipanggil dengan struktur objeknya:

1 2 3

<script> window.alert(‘Hello World’); </script>

Penjelasan tentang objek windows ini, dan juga kenapa kita tidak harus menuliskannya, akan kita bahas pada tutorial tersendiri.

Core JavaScript juga merupakan istilah untuk JavaScript yang tidak terikat dengan ‘lingkungannya’ yaitu web browser. Selama ini JavaScript hanya dikenal sebagai bahasa tipe client-side JavaScript yang dijalankan di dalam web browser.

Akan tetapi, perkembangan JavaScript saat ini juga mendukung penggunaanya di sisi server (salah satunya dengan menggunakan node.js).

B. Pengertian DOM (Document Object Model)

 

Bagian kedua yang akan kita pelajari dalam menguasai Client-Side JavaScript adalah DOM (singkatan dari Document Object Model). DOM adalah API (Application Programming Interface) yang disediakan web browser kepada programmer.

Secara sederhananya, DOM adalah kumpulan aturan atau cara bagi programmer untuk ‘memanipulasi’ apapun yang tampil dalam halaman web. DOM tidak terikat dengan JavaScript, dan sepenuhnya bukan bagian dari JavaScript. DOM yang sama bisa juga diakses dengan bahasa client-side lain seperti JScript.
Tag atau element yang ada di dalam HTML diatur di dalam DOM. Dengan menggunakan JavaScript, kita bisa memanipulasi seluruh tag HTML ini. Salah satu contoh DOM yang telah kita gunakan adalah fungsi document.getElementById.

Fungsi document.get ElementById berfungsi untuk mencari sebuah tag HTML berdasarkan id. Selain document.getElementById, dalam DOM juga disediakan fungsi lain seperti document.getElementByName, document.getElementByClass, dan lain-lain. Fitur-fitur seperti inilah yang akan kita pelajari pada bagian DOM.

Karena sifatnya yang berbeda, tutorial JavaScript di duniailkom akan memisahkan Core JavaScript dengan DOM.
 

  http://www.duniailkom.com/tutorial-belajar-javascript-dasar-untuk-pemula/