tugas tik kel3
DESCRIPTION
Kelompok 3TRANSCRIPT
Pengertian JavaScript
o JavaScript adalah bahasa pemrograman berbasis java yang merupakan interface
pembantu dalam pemrograman web. JavaScript populer di internet dan dapat bekerja di
sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox,
Netscape dan Opera .Kode JavaScript dapat disisipkan dalam halaman web menggunakan
tag SCRIPT.
o JavaScript adalah bahasa pemrograman berbasis prototipe yang berjalan disisi
klien. Jika kita berbicara dalam konteks web, sederhananya, kita dapat memahami
JavaScript sebagai bahasa pemrograman yang berjalan khusus untuk dibrowser atau
halaman web agar halaman web menjadi lebih hidup. Kalau dilihat dari suku katanya
terdiri dari dua suku kata, yaitu Java dan Script. Java adalah Bahasa pemrograman
berorientasi objek, sedangkan Script adalah serangkaian instruksi program.
Javascript merupakan bahasa scripting yang digunakan untuk membuat aplikasi web ,
sifatnya client-side sehingga dapat diolah langsung di browser tanpa harus terhubung
keserver terlebih dahulu. Walaupun namanya menggunakan kata “ Java”, Javascript tidak
berhubungan dengan bahasa pemprograman java, meskipun keduanya memiliki
kemiripan dalam hal syntax yang meniru ba hasa C.
Nama Asli dari bahasa ini adalah
LiveScript yang kemudian diganti karena adanya perjanjian kerjasama antara
Netscape dan Sun dengan balasan Netscape memperbolehkan untuk membundel browse
mereka dengan menggunakan Java dan Sun. “ JavaScript” merupakan merk terdaftar
milik Sun Microsystem, Inc dan dilisensikan oleh Sun untuk Netscape Comunications
dan entitas lainnya seperti Mozilla Foundation.
Kegunaan utama JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam
HTML baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari
dokumen HTML.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek
yang dibenamkan (embedded). Contoh sederhana dari penggunaan JavaScript adalah
membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server,
merubah image kursor ketika melewati objek tertentu, dan lain lain.
o JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti
halnya PHP akan tetapi javascript berjalan di sisi Client.
Misalnya, jam ditampilkan pada halaman yang update sendiri untuk menunjukkan waktu saat
ini pada komputer pengguna. Desain JavaScript dipengaruhi oleh banyak bahasa
pemrograman, termasuk C, tetapi dimaksudkan untuk lebih digunakan oleh non-programmer.
JavaScript tidak didasarkan pada atau terkait ke Java, ini adalah kesalahpahaman umum.
JavaScript seringkali disertakan dalam file HTML atau link dari file HTML dan dijalankan
secara lokal oleh web browser. Ini berarti bahwa server bebas untuk mengerjakan sesuatu
yang lain daripada pemrosesan instruksi untuk setiap klien. Hal ini telah membuat JavaScript
pilihan yang lebih populer daripada bahasa yang memerlukan server untuk melakukan
pengolahan.
o JavaScript adalah sebuah bahasa pemrograman yang dirancang untuk penggunaan
pada browser (peramban) web. JavaScript bukan scripting language, juga sama sekali
tidak berhubungan dengan platform software Java milik Oracle, jadi memang
namanya agak menyesatkan.
Kita bisa menulis kode dalam JavaScript sebagai bahasa full fitur yang – dengan satu
pengecualian – mampu berjalan dalam sebuah browser web seperti Chrome, Firefox,
atau Internet Explorer. Secara umum ia dipergunakan untuk memanipulasi
“Document Object Model” (DOM), yang meliputi elemen-elemen pada sebuah laman
web.
JavaScript dieksekusi pada client side (komputer pengguna): Sebuah server website
mengirim javascript ke peramban milik pengguna, dan browser tersebut
menginterpretasikan dan menjalankan kodenya. Semua ini terjadi dalam sebuah
sandbox, yang menjaga agar javascript tidak menyentuh internal sistem, sehingga
mencegah malicious code (kode jahat) menginfeksi komputer pengguna.
Contoh program JavaScript paling simpel adalah alert("hello world!");, yang
kemungkinan diletakkan pada sebuah laman HTML di dalam tag <script> untuk
memerintahkan browser menginterpretasikannya sebagai JavaScript, misalnya:
<script> alert("hello world!"); </script> Kode ini menampilkan sebuah munculan (pop up)
kotak alert pada peramban web. Untuk melihat contoh eksekusinya, silakan klik
disini.
Jadi, kesimpulannya: JavaScript adalah sebuah bahasa pemrograman yang beroperasi
pada peramban web, di dalam sebuah security sandbox, yang memampukan
manipulasi elemen-elemen pada sebuah laman web.
o JavaScript adalah bahasa pemrograman yang bisa disisipkan ke HTML seperti halnya
PHP akan tetapi javascript berjalan di sisi Client.
o JavaScript adalah bahasa (pemograman) yang hebat, meskipun cenderung sulit untuk
dipahami, akan tetapi kemampuan inti yang dimiliki oleh JavaScript sangat menarik
untuk didalami. dengan Javascript anda dapat membuat aplikasi - aplikasi hebat seperti
Google Maps. JavaScript telah merubah pandangan dunia terhadap internet ( Web ).
Keunggulan javascript yang juga dikenal dengan nama ECMAScript yaitu dapat berjalan
di semua platform dengan browser yang mendukung JavaScript, dan hampir semua
platform dan browser saat ini mendukung JavaScript. Contoh dari aplikasi yang dibangun
dengan JavaScript adalah Google Maps yang dapat berjalan di atas Linux, Windows, dan
Mac OS. JavaScript juga semakin dan terus berkembang, seperti pertumbuhan pustaka
(library) yang memudahkan untuk menavigasi dokumen, memlilih elemen DOM,
membuat animasi, menangani event dan mengembangkan aplikasi Ajax. JavaScript
adalah bahasa pemograman client-side yang cross-platform (berjalan di banyak platform)
dan bersifat bebas (untuk dimodifikasi dan gratis tentunya) juga diadopsi secara unversal.
JavaScript adalah bahasa pemograman yang mudah untuk di-implementasikan dalam
pembuatan program atau app. Anda hanya membutuhkan text editor seperti
notepad,notepad++ dan web browser untuk memulainya.
Terdapat banyak sekali yang dapat diintegrasikan dan dikembangkan ke dalam
JavaScript, Namun pada tutorial ini anda akan mempelajari dasar terlebih dahulu,
pertama anda membuat app sederhana terlebih dahulu, bukan sekelas Google Maps, tidak
mungkin itu terjadi pada hari pertama belajar JavaScript!.
o Menurut wikipedia, JavaScript adalah bahasa skrip yang populer di internet dan dapat
bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla
Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web
menggunakan tag SCRIPT.
o Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada
website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis
bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website
bersifat opsional, artinya tidak harus selalu ada. Namun, website-website maupun blog
modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.
Sejarah
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama
Mocha , yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer
yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama
LiveScript untuk mengakomodasi hal tersebut. [6] Bahasa pemrograman inilah yang akhirnya
berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java
dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di
gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX . [6] JavaScript adalah
bahasa yang digunakan untuk AJAX.
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama
Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para
programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama
LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya
berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java
dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik
di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX.[6] JavaScript
adalah bahasa yang digunakan untuk AJAX
Kegunaan JavaScript
Kegunaan utama JavaScript adalah untuk menuliskan fungsi yang disisipkan kedalam HTML
baik secara langsung disisipkan maupun diletakan ke file teks dan di link dari dokumen HTML.
Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang
dibenamkan (embedded). Contoh sederhana dari penggunaan JavaScript adalah membuka
halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image
kursor ketika melewati objek tertentu, dan lain lain.
Penulisan JavaScript
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head>
yang dibuka dengan tag
<script type="text/javascript"> . [7]
<script type="text/javascript" >
alert("Halo Dunia!" );
</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari
JavaScript).[7] Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal
<head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti
berikut: [7]
<script type="text/javascript"
src= "alamat.js" >
</script>
Skrip di head
Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk
function ) atau dipanggil berdasarkan
trigger pada event tertentu. [7] Peletakkan skrip di head akan menjamin skrip dimuat terlebih
dahulu sebelum dipanggil. [7]
<html>
<head>
<script type="text/javascript" >
...
</script>
</head>
</html>
Skrip di body
Skrip ini dieksekusi ketika halaman dimuat sampai di bagian <body> . [7] Ketika menempatkan
skrip pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian. [7]
<html>
<head>
</head>
<body>
<script type="text/javascript" >
...
</script>
</body>
</html>
Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.
Skrip eksternal
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada
halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang
diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara
dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument
HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js
document.write("pesan ini tampil ketika halaman diload");
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut "src" pada tag <script> pada
halaman HTML-nya. [7]
<html>
<head>
</head>
<body>
<script src= "xxx.js" >
</script>
<p> Script di atas berada di berkas "xx.js" (eksternal) </p>
</body>
</html>
Adaptasi JavaScript di Wikipedia
Biasanya JavaScript digunakan sebagai peralatan (tool/gadget) pada halaman pengguna.
Fungsinya bermacam-macam, misalnya peralatan guna menambah kategori dengan lebih mudah,
contohnya dapat dilihat pada : HotCat. Lain dari pada itu dapat disimak lebih lanjut di:
(Inggris) Wikipedia : JavaScript
(Inggris) Wikipedia : Proyek Skrip
(Inggris) Beberapa skrip yang berguna
(Indonesia) Skrip selamat datang
Beberapa contoh menggunakan adalah:
berputar atau bergulir teks.
membuat bagian dari suatu bentuk terlihat atau tidak terlihat. Sebagai contoh, dalam sebuah formulir
pemesanan, jika pengguna kutu kotak centang “menyampaikan kepada alamat yang berbeda”, bagian
ekstra dengan kotak teks dengan streetname pengiriman, nomor, dan tempat dapat dibuat terlihat.
drop down menu.
mengambil informasi tambahan dari server (Ajax) untuk sebagian me-refresh halaman.
memvalidasi input pengguna pada formulir.
perhitungan tanpa perlu kembali ke server.
menentukan jenis browser.
jelas beberapa informasi dari jenis tertentu dari pengguna, seperti alamat email dari bot.
Bahasa server-side seperti PHP atau Perl adalah cara terbaik untuk memodifikasi halaman sebelum
loading, meskipun ada beberapa kasus Server-JavaScript (SJS). Tidak semua browser memiliki juru
JavaScript (seperti browser hanya teks Lynx), atau menjalankan versi terbaru. Selain itu, beberapa
pengguna mematikan kemampuan JavaScript dengan pilihan. Umumnya, halaman web harus
menggunakan JavaScript untuk meningkatkan pengalaman pengguna, bukan bergantung padanya. Hal ini
sering disebut sebagai degradasi anggun (yaitu jika pengguna telah dimatikan JavaScript, halaman harus
selalu masih beban, menyajikan informasi yang sama tetapi tanpa fungsi tambahan yang disediakan oleh
JavaScript.)
Hubungan ke Java
Meskipun nama yang mirip, Java dan JavaScript, hampir tidak ada hubungannya selain dari sintaks antara
dua bahasa. Bahkan mereka dikembangkan oleh dua perusahaan yang sama sekali berbeda, dengan tujuan
dan pemikiran yang berbeda: Netscape mengembangkan JavaScript dan Sun Microsystems
mengembangkan Java. Hanya saja kedua nama tersebut membingungkan bagi orang yang belum tau.
JavaScript dapat diinterpretasikan oleh browser yang paling langsung dan cepat, sementara Java
memerlukan terpisah “Java Virtual Machine” harus dimulai sebelum menjalankan. JavaScript dan Java
sama-sama menggunakan sintaks yang mirip (berdasarkan bahasa C) tetapi perintah yang digunakan
banyak yang sangat berbeda. Ada juga perbedaan teknis. Java adalah bahasa diketik statis yang
membutuhkan deklarasi semua variabel dan jenis mereka (misalnya integer, string atau boolean).
Sebaliknya, Javascript adalah “longgar” bahasa diketik, memungkinkan variabel yang akan digunakan
tanpa deklarasi sebelumnya.
Sebagai contoh, membandingkan dua metode penulisan ke tampilan (halaman).
Di Java, untuk menulis “Halo dunia!”, Kode akan membaca:
System.out.println (“Halo dunia!”);
Sedangkan dalam JavaScript (di browser), akan berkata:
document.write (“Halo dunia! “);
Untuk lebih jelasnya dibawah contoh penulisan javascript,
Penulisan JavaScript
Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan
tag
<script type=”teks/javascript”>.
<script type=”teks/javascript”>
alert(“Halo Dunia!”);
</script>
Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript).
Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan
dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:
<script type=”teks/javascript” src=”alamat.js”>
</script>
Script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan
trigger pada event tertentu. Peletakkan script di head akan menjamin skript di-load terlebih dahulu
sebelum digunakan (dipanggil).
<html>
<head>
<script type=”teks/javascript”>
…
</script>
</head>
</html>
Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada
bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.
<html>
<head>
</head>
<body>
<script type=”teks/javascript”>
…
</script>
</body>
</html>
Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.
External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman
yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap
halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan
JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript
tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js
document.write(“pesan ini tampil ketika halaman diload”);
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut “src” pada tag <script> pada halaman
HTML-nya.
<html>
<head>
</head>
<body>
<script src=”xxx.js”>
</script>
<p>Script di atas berada di berkas “xx.js” (eksternal) </p>
</body>
</html>
Pendahuluan
Untuk memulai belajar JavaScript benar - benar sangat mudah. Anda tidak perlu repot - repot menginstall
software bahasa pemograman, anda juga tidak harus tahu bagaimana menggunakan shell, pengetahuan
membuat program atau menggunakan compiler. JavaScript sudah terinterpretasi oleh web browser anda.
Hal yang perlu anda lakukan hanyalah menyimpan dokumen JavaScript sebagai file text biasa kemudian
jalankan di web browser. hanya itu!
JavaScript sangat cocok untuk mengenalkan anda pada bahasa pemograman komputer, Penulisan
JavaScript juga sama halnya dengan bahasa pemograman C, C++ dan java, bahasa pemograman yang
banyak kontribusinya dalam bidang development.
Masalah Kompatibilitas Browser
There are variations between what functionality is available in the different browsers. Mozilla, Microsoft
IE, Apple Safari and Opera fluctuate in the behavior. We intend on documenting these variations. You
can mitigate these issues by using the various cross platform JavaScript APIs that are available. These
APIs provide common functionality and hide these browser fluctuations from you.
Bagaimana cara mencoba contoh
The examples below have some sample code. There are many ways to try these examples out. If you
already have your own website, then you should be able to just save these examples as new web pages on
your website.
If you do not have your own website, you can save these examples as files on your computer and open
them up with the web browser you are using now. JavaScript is a very easy language to use for beginning
programmers for this reason. You don't need a compiler or a development environment; you and your
browser are all you need to get started!
Contoh: Menangkap event klik mouse
The specifics of event handling (event types, handler registration, propagation, etc) are too extensive to be
fully covered in this simple example. However this example cannot demonstrate catching a mouse click
without delving a little into the JavaScript event system. Just keep in mind that this example will only
graze the full details about JavaScript events and that if you wish to go beyond the basic capabilities
described here to read more about the JavaScript event system.
'Mouse' events are a subset of the total events issued by a web browser in response to user actions. The
following is a list of the the events emitted in response to a user's mouse action:
Click - issued when a user clicks the mouse
DblClick - issued when a user double-clicks the mouse
MouseDown - issued when a user depresses a mouse button (the first half of a click)
MouseUp - issued when a user releases a mouse button (the second half of a click)
MouseOut - issued when the mouse pointer leaves the graphical bounds of the object
MouseOver - issued when the mouse pointer enters the graphical bounds of the object
MouseMove - issued when the mouse pointer moves while within the graphical bounds of the object
ContextMenu - issued when the user clicks using the right mouse button
The simplest method for capturing these events, to register event handlers - using HTML - is to specify
the individual events as attributes for your element. Example:
The JavaScript code you wish to execute can be inlined as the attribute value or you can call a function
which has been defined in a <script> block within the HTML page:
Additionally, the event object which is issued can be captured and referenced; providing the developer
with access to specifics about the event such as which object received the event, the event's type, and
which mouse button was clicked. Using the inline example again:
In addition to registering to receive events in your HTML you can likewise set the same attributes of any
HTMLElement objects generated by your JavaScript. The example below instantiates a span object,
appends it to the page body, and registers the span object to recieve mouse-over, mouse-out, mouse-
down, and mouse-up events.
Draft
This page is not complete.
Contoh: Menangkap event dari keyboard
Similar to the "Catching a mouse event" example above, catching a keyboard event relies on exploring
the JavaScript event system. Keyboard events are fired whenever any key is used on the keyboard.
The list of available keyboard events emitted in response to a keyboard action is considerably smaller
than those available for mouse:
KeyPress - issued when a key is depressed and released
KeyDown - issued when a key is depressed but hasn't yet been released
KeyUp - issued when a key is released
TextInput (available in Webkit browsers only at time of writing) - issued when text is input either by
pasting, speaking or keyboard. This event will not be covered in this article.
In a keypress event, the Unicode value of the key pressed is stored in either the
keyCode or charCode property; never both. If the key pressed generates a character (e.g. 'a'), charCode is
set to the code of that character, respecting the letter case. (i.e. charCode takes into account whether the
shift key is held down). Otherwise, the code of the pressed key is stored in keyCode .
The simplest method for capturing keyboard events is again to register event handlers within the HTML,
specifying the individual events as attributes for your element. Example:
As with mouse events, the JavaScript code you wish to execute can be inlined as the attribute value or
you can call a function which has been defined in a <script> block within the HTML page:
Capturing the event and referencing the target (i.e. the actual key that was pressed) is achieved in a
similar way to mouse events:
Capturing any key event from the page can be done by registering the event at the document level and
handling it in a function:
Here is a complete example that shows key event handling:
Bug dari browser dan quirks
The two properties made available through the key events are keyCode and
charCode. In simple terms, keyCode refers to the actual keyboard key that was pressed by the user, while
charCode is intended to return that key's ASCII value. These two values may not necessarily be the same;
for instance, a lower case 'a' and an upper case 'A' have the same keyCode , because the user presses the
same key, but a different charCode because the resulting character is different.
The way in which browsers interpret the charCode is not a consistently-applied process. For example,
Internet Explorer and Opera do not support charCode. However, they give the character information in
keyCode , but only onkeypress. Onkeydown and –up keyCode contains key information. Firefox uses a
different word, "which", to distinguish the character.
Refer to the Mozilla Documentation on
Keyboard Events for a further treatment of keyboard events.
Manfaat, Fungsi & Peran JavaScript
Seperti yang disebutkan diatas, javascript berfungsi membuat sebuah halaman website lebih interaktif dan
dinamis. Penggunaan kode javascript sangat dibutuhkan untuk website-website yang berorientasi pada
kenyamanan pengakses (user-experience). Namun, penggunaan kode javascript ini tidak akan maksimal
jika tidak dibarengi dengan penggunaan css karena javascript juga tidak akan lepas dari html .
Ketiga bahasa pemrograman itu sangat erat kaitannya. Jika saya ibaratkan sebuah website adalah rumah,
maka kode html adalah segala yang membangun dan ada dirumah tersebut (tembok, tiang, atap, pondasi,
ruang keluarga, kamar, dapur, peralatan rumah tangga, dan sebagainya). Lalu, kode css adalah pengatur
dan penghias rumah tersebut(tata letak, warna dan sebagainya). Dan peran javascript bisa sebagai
'pembantu' kode css agar pengaturan dan hiasannya lebih bagus dengan tambahan pernak-pernik
misalnya. Bisa juga untuk memanipulasi kode html dengan nama/identitas tertentu. Manipulasi ini bisa
berupa menyembunyikan, menganti bahkan menambahkan elemen html yang baru.
Tanpa javascript, saat melakukan aksi tertentu, misalnya meng-klik pada sebuah halaman website, maka
hasil atau respon dari hasil klik tersebut harus dimuat pada halaman lain. Hal ini tentunya sangat
merepotkan karena tidak setiap aksi klik menghasilkan hasil/output yang besar/banyak. Terkadang hasil
sebuah aksi hanyalah sebuah kalimat "Anda berhasil memasukkan data", misalnya.
Contoh Penggunaan Javascript
Oke, berikut ini adalah contoh penggunaan kode javascript yaitu dengan membuat "alert".
<script type="text/javascript"> function simsalabim() { alert("Simsalabim, blah blah blah"); } </script>
<button onclick="simsalabim()">Klik Untuk Melihat Demo</button>
Karena penggunaan javascript diatas masih sederhana, anda juga bisa menuliskan fungsi diatas seperti
dibawah ini :
<button onclick="alert("Simsalabim, blah blah blah");">Klik Untuk Melihat Demo</button.
HTML Document Object Model (DOM)
HTML DOM merupakan standar yang resmi dari W3C dalam mengakses elemen-elemen HTML,
sehingga Javascript dapat dengan mudah memanipulasi DOM atau isi dari perubahan HTML
untu lebih jelas nya akan saya berikan contoh:
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Pertama Sobatt</h1>
<p>JavaScript dapat merubah sebuah conten pada element HTML:</p>
<button type="button" onclick="fungsiku()">Tekan Dsini!</button>
<p id="contoh">Ini hanya sebagai contoh.</p>
<script>
function fungsiku() {
document.getElementById("contoh").innerHTML = "Hai.. JavaCript :)";
}
</script>
</body>
</html>
Contoh kode JavaScript diatas adalah merubah konten (innerHTML) dari sebuah elemen HTML yang di
identifikasikan oleh id="contoh" seperti inilah cuplikan kode yang dimaksud
document.getElementById("contoh").innerHTML = "Hai.. JavaCript :)"; metode
document.getElementById() merupakan salah satu dari sekian banyak metode dari HTML DOM. Dan
hasil dari sederetan kode JavaScript dalam memanipulasi elemen HTML:
JavaScript dapat merubah sebuah conten pada element HTML:
Terdapat beberapa hal mengenai HTML DOM dalam tutorial ini, contoh lainnya adalah mengubah
sebuah atribut HTML dengan JavaScript:
Dalam contoh ini akan mengubah nilai atribut dari sumber (src) dari dari kode elemen HTML <img />:
<!DOCTYPE html>
<html>
<body>
<img height="100" id="myImage" myimage="" onclick="ubahimage()"
src="https://lh4.googleusercontent.com/-H1JOSbB6kbs/VGdntP_vF6I/AAAAAAAAALQ/B8R-
tCWFvwY/w200-h121-no/image1.gif" width="180" />
<script>
function ubahimage() {
var image = document.getElementById('myImage');
if (image.src.match("https://lh3.googleusercontent.com/-TEmAm9zzgOo/VGdntCAGNyI/
AAAAAAAAALU/d7fLk_FrY3I/w200-h121-no/image2.gif")) {
image.src = "https://lh4.googleusercontent.com/-H1JOSbB6kbs/VGdntP_vF6I/AAAAAAAAALQ/B8R-
tCWFvwY/w200-h121-no/image1.gif";
} else {
image.src = "https://lh3.googleusercontent.com/-TEmAm9zzgOo/VGdntCAGNyI/AAAAAAAAALU/
d7fLk_FrY3I/w200-h121-no/image2.gif";
}
}
</script>
</body>
</html>
Hasil dari deretan kode diatas:
Hasil dari deretan kode diatas:
Klik image diatas untuk agar berubah warnanya!
Dengan menggunakan JavaScript nyaris semua yang dapat dirubah pada atribut-atribut HTML, agar sobat
dapat lebih memahaminya praktekan sendiri oleh sobat.
Merubah Style HTML (CSS) dengan JavaScript:
Merubah style pada elemen HTML merupakan varian dari merubah suatu atribut HTML.
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Pertama Sobat</h1>
<p id="demo">Dengan JavaScript sobat dapat merubah style pada elemen HTML.</p>
<script>
function fungsiku() {
var x = document.getElementById("contoh");
x.style.fontSize = "25px";
x.style.color = "blue";
}
</script>
<button type="button" onclick="fungsiku()">Tekan disini!</button>
</body>
</html>
Dari deretan kode diatas akan menampilkan perubahan style pada elemen HTML dibawah ini:
Dengan JavaScript sobat dapat merubah style pada elemen HTML.
Dengan menggunakan JavaScript nyaris semua yang dapat dirubah pada nilai CSS, agar sobat dapat lebih
memahaminya praktekan sendiri oleh sobat.
Memvalidasi Data dengan JavaScript
JavaScript seringkali digunakan untuk memvalidasi data input, kita lihat contoh kode untuk memvalidasi
data input berikut:
<!DOCTYPE html>
<html>
<body>
<p>Silahkan masukkan nomor antara dari 1 sampai 10:</p>
<input id="numb" type="number" />
<button type="button" onclick="fungsiku()">Submit</button>
<p id="angka"></p>
<script>
function fungsiku() {
var x, text;
//mendapatkan nilai dari field input dengan id="nomor"
x = document.getElementById("numb").value;
//jika x merupakan bukan sebuah angka, field input kosong, angka yang di masukkan kurang dari 1 atau
lebih dari 10 maka akan ada keterangan "inputan tidak valid"
if (isNaN(x) || x < 1 || x > 10) {
text = "Inputan tidak valid";
} else {
text = "Input valid";
}
document.getElementById("angka").innerHTML = text;
}
</script>
</body>
</html>
Hubungan PHP dengan HTML dan Java
Script
Seperti yang kita tahu, halaman web biasanya disusun dari kode-kode html yang disimpan dalam
sebuah file berekstensi .html . File html inilah dikirimkan oleh server (atau file) ke browser,
kemudian browser akan menerjemahkan kode-kode tersebut sehingga menghasilkan suatu
tampilan yang indah.
Lain halnya dengan program php, program ini harus diterjemahkan oleh web-server sehingga
menghasilkan kode html yang dikirim ke browser agar dapat ditampilkan. Program ini dapat
berdiri sendiri ataupun disisipkan di antara kode-kode html sehingga dapat langsung ditampilkan
bersama dengan kode-kode html tersebut.
Program php dapat ditambahkan dengan mengapit program tersebut di antara tanda <? dan ?> .
Tanda- tanda tersebut biasanya disebut tanda untuk escaping dari kode html. File html yang telah
dibubuhi program php harus diganti ekstensi-nya menjadi .php3 atau .php .
PHP merupakan bahasa pemrograman web yang bersifat server-side scripting , di mana script-
nya menyatu dengan HTML dan berada di server. Artinya adalah sintaks dan perintah-perintah
yang kita berikan akan sepenuhnya dijalankan di server tetapi disertakan HTML biasa. PHP akan
dieksekusi di server dan digunakan untuk membuat halaman web yang dinamis seperti ASP
(Active Server Pages) dan JSP (Java Server Pages).
Prinsip Kerja Server Side Scripting
Itulah sedikit gambaran tentang Hubungan PHP dengan HTML. Kesimpulannya adalah PHP dan
HTML membutuhkan satu sama lain untuk membuatnya lebih baik dan lebih fungsional.
Fungsi pada Javascript
Fungsi adalah salah satu bagian yang paling indah dari Javascript. Sebagai bahasa fungsional
Javascript mengimplementasikan fungsi kelas pertama (first class function). Fungsi dapat
disimpan dalam variabel, dikembalikan oleh fungsi lain, dan dikirimkan sebagai argumen untuk
fungsi lainnya. Implementasi fungsi yang sangat fleksibel seperti ini membuka banyak
kesempatan kepada pengembang untuk menuliskan kode yang bukan hanya berjalan dengan
baik, tetapi juga sangat elegan dan indah.
Sebuah fungsi membungkus satu atau banyak perintah. Setiap kali kita memanggil fungsi, maka
perintah-perintah yang ada di dalam fungsi tersebut dijalankan. Secara umum fungsi digunakan
untuk penggunaan kembali kode (code reuse) dan penyimpanan informasi (information hiding).
Implementasi fungsi kelas pertama juga memungkinkan kita menggunakan fungsi sebagai unit-
unit yang dapat dikombinasikan, seperti layaknya sebuah lego. Dukungan terhadap pemrograman
berorientasi objek juga berarti fungsi dapat kita gunakan untuk memberikan perilaku tertentu dari
sebuah objek.
Dalam sudut pandang tertentu, kita bahkan dapat mengatakan bahwa intisari dari pemrograman
adalah mengubah atau menguraikan kebutuhan pengguna menjadi fungsi dan struktur data. Oke,
cukup untuk berbicara tentang cinta penulis terhadap fungsi. Sekarang mari kita lihat langsung
kenapa dan apakah fungsi benar-benar seperti yang diceritakan oleh penulis.
Pembuatan Fungsi pada Javascript
Sebuah fungsi pada Javascript dibuat dengan cara seperti berikut:
1
2
3
4
function tambah(a, b) {
hasil = a + b;
return hasil;
}
Cara penulisan fungsi seperti ini dikenal dengan nama function declaration, atau deklarasi
fungsi. Terdapat empat komponen yang membangun fungsi yang baru kita definisikan di atas,
yaitu:
1. Kata kunci function, yang memberitahu Javascript bahwa kita akan membuat fungsi.
2. Nama fungsi, dalam contoh di atas adalah tambah. Dengan memberikan sebuah fungsi nama maka
kita dapat merujuk ke fungsi tersebut dengan nama yang diberikan. Harus diingat bawa nama
fungsi bersifat opsional, yang berarti fungsi pada Javascript tidak harus diberi nama. Kita
akan membahas tentang hal ini lebih dalam nanti.
3. Daftar parameter fungsi, yaitu a, b pada contoh di atas. Daftar parameter ini selalu dikelilingi oleh
tanda kurung (()). Parameter boleh kosong, tetapi tanda kurung wajib tetap dituliskan. Parameter
fungsi akan secara otomatis didefinisikan menjadi variabel yang hanya bisa dipakai di dalam
fungsi. Variabel pada parameter ini diisi dengan nilai yang dikirimkan kepada fungsi secara
otomatis.
4. Sekumpulan perintah yang ada di dalam kurung kurawal ({}). Perintah-perintah ini dikenal
dengan nama badan fungsi. Badan fungsi dieksekusi secara berurut ketika fungsi dijalankan.
Penulisan deklarasi fungsi (function declaration) seperti di atas merupakan cara penulisan fungsi
yang umumnya kita gunakan pada bahasa pemrograman imperatif dan berorientasi objek. Tetapi
selain deklarasi fungsi Javascript juga mendukung cara penulisan fungsi lain, yaitu dengan
memanfaatkan ekspresi fungsi (function expression). Ekspresi fungsi merupakan cara pembuatan
fungsi yang memperbolehkan kita melewatkan nama fungsi. Fungsi yang dibuat tanpa nama
dikenal dengan sebutan fungsi anonim atau fungsi lambda. Berikut adalah cara membuat fungsi
dengan ekspresi fungsi:
1
2
3
4
var tambah = function (a, b) {
hasil = a + b;
return hasil;
};
Terdapat hanya sedikit perbedaan antara ekspresi fungsi dan deklarasi fungsi:
1. Penamaan fungsi. Pada deklarasi fungsi, kita langsung memberikan nama fungsi sesuai dengan
sintaks yang disediakan Javascript. Menggunakan ekspresi fungsi kita pada dasarnya menyimpan
sebuah fungsi anonim ke dalam variabel, dan nama fungsi adalah nama variabel yang kita buat.
Perlu diingat juga bahwa pada dasarnya ekspresi fungsi adalah fungsi anonim. Penyimpanan ke
dalam variabel hanya diperlukan karena kita akan memanggil fungsi nantinya.
2. Ekspresi fungsi dapat dipandang sebagai sebuah ekspresi atau perintah standar bagi Javascript,
sama seperti ketika kita menuliskan kode var i = 0;. Deklarasi fungsi merupakan konstruksi khusus
untuk membuat fungsi. Hal ini berarti pada akhir dari ekspresi fungsi kita harus menambahkan ;,
sementara pada deklarasi fungsi hal tersbut tidak penting.
Karena pada Javascript sebuah fungsi juga adalah sekaligus sebuah objek, maka pada buku ini
kita akan hampir selalu menggunakan ekspresi fungsi. Setiap kali kita menciptakan fungsi, pada
dasarnya kita membuat sebuah objek Function baru, dengan nama yang kita berikan. Karenanya,
secara eksplisit menuliskan bahwa kita membuat objek baru dan memperlakukan objek tersebut
sama seperti perintah-perintah lain dalam program akan menyederhanakan kode program kita,
yang pada akhirnya akan mempermudah kita mengerti kode kita nantinya.
Aturan pembuatan fungsi, baik ekspresi fungsi maupun deklarasi fungsi, sama dengan aturan
penulisan ekspresi. Di mana kita dapat menuliskan ekspresi, kita dapat mendefinisikan fungsi
juga. Karena aturan ini, maka kita juga dapat mendefinisikan fungsi di dalam fungsi lainnya.
Fungsi yang berada di dalam fungsi lainnya memiliki akses terhadap semua variabel yang ada
pada fungsi penampungnya. Keterhubungan fungsi di dalam fungsi ini dikenal dengan nama
closure. Kita akan membahas tentang closure dan melihat bagaimana closure memberikan
kemampuan ekspresi yang sangat besar kepada pengembang pada bagian berikutnya.
Note
Terdapat satu lagi cara membuat fungsi pada Javascript, yaitu dengan menggunakan objek
Function. Tetapi kita tidak akan membahas cara ini, karena cara yang ketiga akan sangat jarang
digunakan.
Fungsi sebagai Objek
Sebelum melihat bagaimana fungsi dapat dipanggil, kita akan melihat keterhubungan antara
fungsi dengan objek terlebih dahulu. Kita perlu mengerti hubungan antara fungsi dan objek
karena terdapat empat cara pemanggilan fungsi pada Javascript, dan dua dari empat cara tersebut
melibatkan konsep fungsi sebagai objek.
Fungsi pada javascript adalah sebuah objek. Sebagai sebuah objek, semua fungsi dalam
Javascript merupakan turunan dari Function.prototype. Function.prototype juga adalah merupakan
turunan dari Object.prototype, sama seperti semua objek-objek lain dalam Javascript. Perbedaan
utama fungsi dengan objek lain pada umumnya adalah fungsi dapat dipanggil, dan memiliki dua
buah properti khusus, yaitu konteks pemanggilan fungsi dan kode pada isi badan fungsi.
Kegunaan dari dua buah properti khusus ini akan kita lihat pada bagian selanjutnya.
Sebagai sebuah objek, fungsi juga dapat kita perlakukan sama dengan objek lainnya. Pada bagian
sebelumnya kita telah melihat bahwa fungsi dapat disimpan di dalam variabel. Fungsi juga dapat
kita simpan di dalam array atau objek lain, dikirimkan sebagai argumen dari fungsi lain, atau
dikembalikan dari sebuah fungsi. Sama seperti objek, kita juga dapat mengaitkan fungsi
(method) kepada fungsi.
Pemanggilan Fungsi
Sebuah fungsi dapat dipanggil untuk menjalankan seluruh kode yang ada di dalam fungsi
tersebut, sesuai dengan parameter yang kita berikan. Pemanggilan fungsi dilakukan dengan cara
menuliskan nama fungsi tersebut, kemudian mengisikan argumen yang ada di dalam tanda
kurung.
Misalkan fungsi tambah yang kita buat pada bagian sebelumnya:
1
2
3
4
var tambah = function (a, b) {
var hasil = a + b;
return hasil;
};
dapat dipanggil seperti berikut:
1 tambah(3, 5);
Yang terjadi pada kode di atas adalah kita menggantikan a dan b masing-masing dengan 3 dan 5.
Seperti yang dapat dilihat, hal ini berarti pengisian argumen pada saat pemanggilan fungsi harus
berurut, sesuai dengan deklarasi fungsi.
Sama seperti sebuah variabel, fungsi juga mengembalikan nilai ketika dipanggil. Dalam kasus di
atas, tambah(3, 5) akan mengembalikan nilai 8. Nilai ini tentunya dapat disimpan ke dalam
variabel baru, atau bahkan dikirimkan sebagai sebuah argumen ke fungsi lain lagi:
1
2
3
4
5
var simpan = tambah(3, 5); // simpan === 8
tambah(simpan, 2); // mengembalikan 10
tambah(tambah(3, 5), 2) // juga mengembalikan 10
tambah(tambah(2, 3), 4) // mengembalikan 9
Fungsi akan mengembalikan nilai ketika kata kunci return ditemukan. Kita dapat mengembalikan
fungsi kapanpun, dan fungsi akan segera berhenti ketika kata kunci return ditemukan. Berikut
adalah contoh kode yang memberikan gambaran tentang pengembalian nilai fungsi:
1
2
3
4
5
6
var naikkan = function (n) {
var hasil = n + 10;
return hasil;
// kode di bawah tidak dijalankan lagi
hasil = hasil * 100;
7
8
9
10
}
naikkan(10); // mengembalikan 20
naikkan(25); // mengembalikan 35
Kita juga dapat langsung memberikan ekspresi kepada return, dan ekspresi tersebut akan
dijalankan sebelum nilai dikembalikan. Hal ini berarti fungsi tambah maupun naikkan yang
sebelumnya bisa disederhanakan dengan tidak lagi menyimpan nilai di variabel hasil terlebih
dahulu:
1
2
3
4
5
6
7
8
9
10
11
var naikkan = function (n) {
return n + 10;
}
var tambah = function (a, b) {
return a + b;
}
tambah(4, 4); // mengembalikan 8
naikkan(10); // mengembalikan 20
tambah(naikkan(5), 7); // mengembalikan 22
Fungsi pada Javascript juga akan selalu mengembalikan fungsi. Ketika tidak menemukan
perintah return, Javascript akan mengembalikan undefined pada akhir fungsi.
Pola Pemanggilan Fungsi
Ketika sebuah fungsi dipanggil, secara otomatis Javascript akan memberikan dua nilai tambahan
kepada fungsi tersebut. Kedua nilai tambahan ini diberikan bersamaan dengan pemberian nilai
argumen fungsi. Adapun kedua nilai yang diberikan adalah this dan arguments.
Nilai arguments merupakan sebuah objek yang mirip dengan array, dan berisi seluruh argumen
yang diberikan kepada fungsi. Kita akan membahas penggunaan nilai ini pada bagian
selanjutnya.
Nilai this isinya bergantung kepada cara kita memanggil fungsi. Cara pemanggilan fungsi dikenal
dengan nama pola pemanggilan (invocation pattern) dari fungsi tersebut. Terdapat empat pola
pemanggilan fungsi yang ada pada Javascript, yaitu:
1. Method Invocation Pattern,
2. Function Invocation Pattern,
3. Constructor Invocation Pattern, dan
4. Indirect Invocation Pattern.
Mari kita lihat maksud dari masing-masing pola pemanggilan, dan perbedaan nilai this pada
setiap pola.
Method Invocation Pattern
Sebuah fungsi yang dijadikan sebagai properti dari objek dikenal dengan istilah method. Method
merupakan salah satu konsep dasar dalam pemrograman berorientasi objek, yang digunakan
untuk memberikan sebuah perintah standar bagi sebuah objek. Berikut adalah contoh dari sebuah
method:
1
2
3
4
5
6
7
8
9
var papanSkor = {
skor: 0,
tambahSkor: function (nilai) {
this.skor += (typeof nilai === "number")? nilai : 1;
},
ambilSkor: function () {
return this.skor;
}
};
Objek papanSkor yang barusan kita buat memiliki satu buah properti, yaitu skor dan dua buah
method, yaitu tambahSkor dan ambilSkor.
Method ambilSkor mengembalikan nilai dari properti skor yang sekarang, sementara tambahSkor
akan menambahkan nilai skor sesuai dengan parameter yang diberikan oleh pengguna method.
Method tambahSkor juga memberikan tambahan sesuai dengan tipe data yang dikirimkan: jika
parameter yang diberikan merupakan sebuah angka, maka penambahan dilakukan sesuai dengan
jumlah angka yang dikirimkan, jika tidak maka skor akan bertambah satu saja.
Sama seperti properti, pemanggilan method dapat dilakukan dengan dua cara, yaitu dengan
menggunakan tanda titik (.) dan kurung siku ([]):
1
2
papanSkor.ambilSkor() // mengembalikan 0
papanSkor.tambahSkor(1) // mengembalikan undefined
3
4
5
papanSkor["ambilSkor"]() // mengembalikan 1
papanSkor["tambahSkor"](2) // mengembalikan undefined
papanSkor.ambilSkor() // mengembalikan 3
Dari ekspreimen yang kita lakukan pada kode di atas, kita dapat melihat bahwa properti this
berisi objek yang menampung dirinya. Dalam hal ini nilai this pada Javascript tidak berbeda
dengan nilai this pada bahasa pemrograman berorientasi objek lain pada umumnya. Artinya kita
dapat mengakses seluruh properti maupun method dari objek itu sendiri ketika menggunakan this.
Function Invocation Pattern
Ketika sebuah fungsi bukan merupakan properti dari sebuah objek (method), nilai tambahan this
akan dihubungkan ke objek global Javascript, yaitu window. Mari kita lihat bagaimana this
dikaitkan ke objek global:
1
2
3
4
5
6
7
8
9
10
11
12
// Variabel nilai disimpan dalam objek global.
// Objek global Javascript secara standar adalah window
// sehingga nilai akan disimpan dalam window.nilai
var nilai = 100;
nilai; // mengembalikan 100
window.nilai; // mengembalikan 100
var kurang = function (n) {
// this.nilai merupakan window.nilai (!)
this.nilai = this.nilai - n;
};
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
kurang(10);
nilai; // mengembalikan 90 (!)
window.nilai; // mengembalikan 90 (!)
// Hal yang sama berlaku untuk fungsi di dalam fungsi juga
var tambah_sepuluh = function () {
var tambah = function (n) {
// this.nilai merupakan window.nilai (!!!)
this.nilai = this.nilai + n;
};
tambah(10);
};
nilai; // mengembalikan 90
tambah_sepuluh();
nilai; // mengembalikan 100 (!!!)
Pada kode di atas, kita dapat melihat bagaimana nilai this di dalam fungsi kurang maupun tambah
terikat dengan variabel global. Tidak peduli berapa tingkat fungsi di dalam fungsi yang kita buat,
variabel this tetap akan mengakses objek global. Hal ini tidak hanya berbeda dengan pada bahasa
pemrograman lain, tetapi merupakan salah satu kesalahan besar dalam rancangan Javascript.
Pada bahasa yang memiliki fitur fungsional dan objek lainnya, this akan mengikat pada fungsi
induk dari fungsi tersebut. Dalam contoh di atas, this pada fungsi tambah akan mencari variabel
nilai milih fungsi tambah_sepuluh.
Kesalahan perancangan Javascript ini sangat fatal, karena teknik memanfaatkan fungsi di dalam
fungsi (inner function) merupakan salah satu teknik mendasar dan sangat berguna dalam
pemrograman fungsional. Tetapi setidaknya untuk inner function dari sebuah method kita
memiliki solusi untuk memperbaiki hal ini, yaitu dengan menyimpan nilai this pada fungsi luar ke
dalam sebuah variabel. Fungsi yang berada di dalam fungsi luar kemudian dapat mengakses
instan objek dengan menggunakan variabel tersebut, seperti berikut:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// kita menggunakan objek papanSkor yang di atas kembali
papanSkor.hattrick = function () {
// variabel that dibuat agar fungsi tambah_tiga
// dapat mengakses objek papanSkor.
var that = this;
var tambah_tiga = function() {
// jika kita menggunakan this di sini,
// maka kita akan mengakses variabel global skor,
// yang tidak ada.
that.skor = that.skor + 3;
};
tambah_tiga();
};
Sebagai eksperimen, coba ganti variable that di atas dengan variabel this, dan lihat efeknya!
Note
Nama variabel that merupakan perjanjian tak tertulis (konvensi) untuk solusi ini. Meskipun tidak
ada aturan untuk wajib menggunakan that, menggunakan nama ini akan mempermudah
pengembang lain yang harus merawat kode anda (termasuk anda sendiri di masa depan!).
Constructor Invocation Pattern
Sebuah fungsi yang dipanggil dengan diawali dengan perintah new pada Javascript dikenal
dengan istilah constructor invocation. Setiap kali sebuah fungsi dipanggil dengan prefiks new,
maka fungsi tersebut akan otomatis mengembalikan objek baru pada akhir fungsi, meskipun kita
tidak memanggil perintah return. Objek yang dikembalikan ini akan dihubungkan kepada prototype
dari fungsi yang dipanggil, dan this diikatkan kepada objek baru ini.
Bingung? Mari kita lihat contoh kode:
1
2
3
4
5
6
7
8
9
10
11
// Ketika dipanggil dengan new, fungsi Manusia akan
// mengembalikan sebuah objek baru yang memiliki
// satu properti, yaitu "nama".
var Manusia = function (nama) {
this.nama = nama;
};
var andi = new Manusia("Andi");
andi.nama; // mengembalikan "Andi"
andi; // mengembalikan { nama: 'Andi' }
12
13
14
15
16
17
18
19
20
21
22
23
// Seperti layaknya sebuah objek, kita dapat menambahkan
// method baru kepada seluruh objek Manusia yang telah
// dibuat.
Manusia.prototype.usia = function (usia) {
this.usia = (typeof usia === "number")? usia: 0;
};
andi.usia = 27;
andi.usia; // mengembalikan 27
andi; // mengembalikan { nama: 'Andi', usia: 27 }
Perhatikan bagaimana pada fungsi Manusia di atas kita sama sekali tidak memanggil perintah
return, dan secara otomatis andi diisikan dengan sebuah objek baru ketika kita memanggil Manusia
dengan perintah new. Juga seperti objek pada Javascript, ketika kita menambahkan sebuah
method baru ke Manusia, andi yang hanyalah salah satu turunan Manusia juga menerima method
baru tersebut.
Fungsi yang dirancang untuk dipanggil bersamaan dengan new seperti Manusia dikenal dengan
nama constructor. Constructor juga secara konvensi ditulis dengan awalan huruf kapital, agar
tidak membingungkan pengembang. Hal ini sangat penting karena sebuah fungsi constructor
yang tidak dipanggil dengan perintah new akan memberikan efek samping yang membahayakan,
yaitu memenuhi atau mengubah nilai variabel global. Baca kembali bagian Function Invocation
Pattern untuk melihat kenapa hal ini bisa terjadi.
1 var mari = Manusia("Mari");
2
3
4
5
6
mari; // mengembalikan undefined
nama; // mengembalikan Mari (!)
mari.nama; // mengembalikan TypeError:
// Cannot read property 'nama' of undefined
Karena memiliki potensi berbahaya seperti ini, sangat tidak disarankan untuk menggunakan
fungsi constructor. Javascript bukanlah bahasa berorientasi objek class-based. Pergunakan
Javascript sebagaimana ia dirancang untuk digunakan, yaitu bahasa pemrograman prototype-
based. Pada bagian selanjutnya nanti kita akan melihat bagaimana kita dapat membuat objek
pada Javascript dengan lebih baik, yaitu menggunakan closure.
Indirect Invocation Pattern
Karena fungsi pada Javascript juga adalah merupakan sebuah objek, maka fungsi juga dapat
memiliki method. Terdapat beberapa method standar yang selalu ada pada fungsi Javascript,
tetapi di bagian ini kita akan melihat dua method khusus yang berhubungan dengan nilai this.
Kedua method khusus ini yaitu call dan apply.
Method apply digunakan jika kita ingin mengirimkan argumen ke sebuah fungsi dengan
menggunakan array. Terdapat dua parameter yang harus kita kirimkan ke apply, yaitu objek yang
ingin kita ikatkan kepada this, dan parameter keduanya adalah sebuah array yang akan digunakan
sebagai parameter yang dikirimkan ke fungsi. Dengan begitu, apply memberikan kita fasiliats
untuk menentukan nilai this.
1
2
3
4
5
6
7
8
9
10
11
12
13
var manusia = {
nama: "Adam",
panggil: function (sapaan) {
return sapaan + " " + this.nama + "!";
}
};
manusia.panggil("Halo"); // mengembalikan "Halo Adam!"
var hawa = {
nama: "Hawa"
};
14 manusia.panggil.apply(hawa, ["Bonjour"]); // mengembalikan "Bonjour Hawa!"
Kita juga dapat mengirimkan null sebagai parameter pertama dari apply untuk menggunakan objek
global sebagai this.
1
2
3
4
5
6
7
8
9
// mengembalikan "Guten Tag undefined!" karena tidak ada variabel "nama"
// pada konteks global
manusia.panggil.apply(null, ["Guten Tag"]);
// simpan variabel "nama" dengan isi "Nuh" pada konteks global
nama = "Nuh";
// mengembalikan "Guten Tag Nuh!"
manusia.panggil.apply(null, ["Guten Tag"]);
Hal ini memungkinkan kita untuk menggunakan fungsi global secara efektif. Misalnya jika kita
ingin mencari nilai maksimal dari sebuah array, kita dapat langsung menggunakan Math.max
daripada dengan perulangan:
1
2
3
4
5
6
7
8
9
var bil = [5, 6, 2, 3, 7];
// Sama dengan Math.apply(bil[0], bil[1], ...)
// berapapun ukuran bil fungsi ini akan tetap berjalan
var max = Math.max.apply(null, bil);
max; // mengembalikan 7
// Tanpa menggunakan apply
10
11
12
13
14
15
16
17
18
19
// Kita tidak dapat menggunakan Math.max di sini
// karena panjang array tidak akan selalu sama.
max = -Infinity;
for (var i = 0; i < bil.length; i++) {
if (bil[i] > max)
max = bil[i];
}
max; // mengembalikan 7
Satu hal yang perlu diingat ketika menggunakan apply adalah bahwa Javascript memiliki batas
jumlah argumen untuk fungsi, yang berbeda-beda pada setiap browser. Jika array yang
dikirimkan melebihi batas jumlah argumen maka apa yang terjadi tidak dapat diketahui
(tergantung kepada pembuat browser).
Method call sendiri berfungsi sama seperti apply, dengan hanya satu perbedaan: call menerima
*daftar argumen* seperti fungsi biasa, sementara apply menerima *array argumen*.
Mengambil contoh manusia sebelumnya, kita dapat memanggil call seperti berikut:
1
2
3
4
5
6
7
// kedua fungsi di bawah mengembalikan "Bonjour Hawa!"
manusia.panggil.apply(hawa, ["Bonjour"]);
manusia.panggil.call(hawa, "Bonjour");
// kedua fungsi di bawah hasilnya sama
Math.max.apply(null, bil);
Math.max.call(null, bil[0], bil[1], ...);
Argumen Fungsi
Selain this, fungsi pada Javascript juga memiliki satu buah nilai tambahan lagi, yaitu arguments.
arguments merupakan nilai yang menampung seluruh argumen yang dikirimkan kepada fungsi,
termasuk argumen-argumen yang berlebihan. Jika fungsi hanya meminta dua buah argumen dan
pemanggil fungsi mengirimkan empat buah argumen, kita dapat mengakses argumen ketiga dan
keempat menggunakan arguments. Hal ini berarti kita dapat membuat fungsi yang bisa menerima
jumlah argumen tak tentu, seperti fungsi Math.max yang kita gunakan sebelumnya.
Contoh lain, kita dapat membuat fungsi yang menghitung total dari seluruh argumen yang
dikirimkan kepada fungsi tersebut:
1
2
3
4
5
6
7
8
9
10
var total = function () {
var i, hasil = 0;
for (i = 0; i < arguments.length; i++) {
hasil = hasil + arguments[i];
}
return hasil;
};
total(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // mengembalikan 55
Meskipun pada kode di atas kita menggunakan arguments seperti layaknya array (akses dengan [],
properti length), sayangnya arguments bukan array. arguments merupakan sebuah objek yang mirip
array. Selalu ingat hal ini agar tidak menggunakan arguments sebagai array, karena menggunakan
arguments sebagai array dapat menyebabkan hal-hal yang tak terbayangkan seperti gangguan
pernafasan, serangan jantung, kanker, dan error program tiba-tiba.
Scope dan Function Scope
Dalam konteks bahasa pemrograman, scope atau cakupan merupakan sebuah aturan yang
mengendalikan waktu hidup (lifetime) dan akses dari sebuah nilai dalam program. Nilai yang
dikendalikan oleh scope umumnya adalah variabel. Scope sangat penting dalam pemrograman,
terutama untuk memudahkan kita dalam menamakan variabel dan manajemen memori. Dalam
Java misalnya, sebuah variabel yang dibuat dalam scope lokal akan segera dihapuskan dari
memori begitu program keluar dari scope tersebut untuk menghemat memori.
Kebanyakan bahasa pemrograman mengimplementasikan konsep scope seperti yang ada pada
Java. Konsep scope ini dikenal dengan nama block scope. Pada block scope, sebuah variabel
yang diciptakan di dalam blok (ditandai dengan {} pada Java dan keluarga C) tidak dapat diakses
dari luar blok tersebut. Variabel juga biasanya dihapus ketika program keluar dari blok jika
bahasa mendukung manajemen memori otomatis. Block scope sangat intuitif dan mudah
dipahami, serta hampir selalu digunakan oleh kebanyakan bahasa pemrograman.
Javascript, sayangnya, bukanlah bahasa pemrograman biasa. Meskipun Javascript menggunakan
sintaks yang sama dengan keluarga bahasa C, Javascript tidak memiliki block scope. Aturan
scoping yang digunakan oleh Javascript adalah function scope. Hal ini mengakibatkan banyak
kesalah pahaman tentang aturan scoping di Javascript. Sekarang kita akan menjernihkan kesalah
pahaman tersebut.
Pada Javascript, sebuah blok *tidak* membuat scope baru. Perhatikan kode berikut:
1
2
3
4
5
6
7
8
9
var bil = 1;
console.log(bil); // mencetak 1
if (bil > 0) {
var bil = 2;
console.log(bil); // mencetak 2
}
console.log(bil); // mencetak 2 (!)
Pada kode di atas, ketika kita menuliskan var bil = 2; kita tidak membuat sebuah variabel lokal
bernama bil di dalam blok if. Kita hanya mengisikan kembali bil dengan nilai baru, yaitu 2. Pada
bahasa keluarga C, jika kita mencetak bil pada akhir program kita akan mendapatkan nilai 1,
karena bil yang ada di dalam if berbeda dengan bil yang ada di luarnya. Hal ini sedikit tidak
intuitif, terutama untuk yang telah mempelajari bahasa pemrograman lain, dan jika tidak hati-hati
kita dapat secara tidak sadar membuat banyak variabel global.
Aturan scoping yang dimiliki Javascript hanyalah function scope. Function scope berarti semua
parameter dan variabel yang dibuat di dalam sebuah fungsi tidak dapat diakses di luar fungsi
tersebut. Perhatikan kode berikut:
1
2
3
4
5
6
var x = 10;
console.log(x); // mencetak 10
var tambah = function (n) {
var x = 3;
console.log(x); // mencetak 3
7
8
9
10
11
12
13
return n + x;
}
var y = tambah(15);
console.log(y); // mencetak 18 (15 + 3)
console.log(x); // mencetak 10
Dalam contoh kode kali ini, kita dapat melihat bagaimana Javascript membedakan x yang ada di
luar fungsi tambah dengan x yang ada di dalam fungsi. Begitu keluar dari fungsi tambah, nilai x
yang diberikan adalah x yang di luar fungsi. Aturan ini mirip dengan aturan yang ada dalam C.
Dengan memanfaatkan pengetahuan function scope ini, kita dapat membuat scope lokal seperti
block scope dalam Javascript dengan memanfaatkan fungsi anonim. Mari kita lihat bagaimana
hal ini dicapai:
1
2
3
4
5
6
7
8
9
10
11
12
var bil = 1;
console.log(bil); // mencetak 1
if (bil > 0) {
// Buat sebuah fungsi anonim dan langsung eksekusi fungsi
(function() {
var bil = 2;
console.log(bil); // mencetak 2
})();
}
console.log(bil); // mencetak 1 (!)
Pada contoh kode di atas, nilai bil yang ada di luar if berbeda dengan bil yang ada di dalam if. Kita
membuat sebuah fungsi anonim dalam if, dengan menggunakan semantik (function() { // isi fungsi }).
Tanda kurung (()) yang membungkus fungsi digunakan untuk memastikan fungsi dijalankan
sebagai ekspresi, bukan perintah. Sementara tanda kurung yang ada di akhir fungsi bertugas
untuk mengeksekusi fungsi anonim yang baru dibuat.
Dengan membuat sebuah fungsi anonim seperti contoh di atas, kita memastikan seluruh variabel
yang ada di dalam fungsi anonim tersebut memiliki scope yang berbeda dengan variabel lain di
luar fungsi anonim. Eksekusi fungsi akan memastikan seluruh kode di dalam fungsi berjalan,
karena ingat bahwa kode di dalam fungsi tidak akan dijalankan kalau fungsi tidak dipanggil.
Meskipun kita telah dapat membuat block scope dalam Javascript, terkadang kita tetap saja dapat
secara tidak sengaja membuat kesalahan program karena asumsi scope yang salah. Hal ini
terutama terjadi ketika kita berpindah dari bahasa yang digunakan di sisi server ke Javascript.
Untuk menghindari kesalahan ini, biasanya praktisi Javascript menuliskan semua deklarasi
variabel sedini mungkin, ketika program atau fungsi baru akan dimulai. Hal ini bertentangan
dengan bahasa pemrograman lain yang biasanya menyarankan untuk mendeklarasikan variabel
hanya ketika akan menggunakan variabel tersebut. Walaupun sedikit berbeda, deklarasi variabel
sedini mungkin akan membantu program Javascript kita: jika menemukan var di tengah-tengah
fungsi, seorang pengembang Javascript berpengalaman akan mengecek scope variabel tersebut,
dan memindahkan deklarasi ini ke awal fungsi / program.
Closure
Salah satu kelebihan utama function scope adalah fungsi yang ada di dalam fungsi lainnya juga
memiliki akses terhadap semua nilai-nilai yang dimiliki fungsi penampungnya. Ketika sebuah
fungsi menggunakan dan bergantung kepada nilai yang ada di luar dirinya, fungsi tersebut
dikenal dengan nama closure. Mari kita lihat contoh sebuah closure:
1
2
3
4
5
6
7
8
9
10
var jalan = function () {
var sapaan = "Halo ",
sapa = function () {
console.log(sapaan + "pembaca!");
};
sapa();
};
jalan(); // mencetak "Halo pembaca!"
Fungsi jalan memiliki dua buah nilai lokal, yaitu variabel sapaan dan fungsi sapa. Fungsi sapa
menggunakan variabel sapaan, dan akan mencetak teks yang berbeda-beda tergantung dengan isi
dari variabel sapaan. Variabel sapaan dikenal dengan nama variabel bebas karena tidak terikat
dengan apapun, dan fungsi sapa merupakan closure karena menggunakan variabel bebas yang
dibuat di luar dirinya.
Oke, closure keren dan kelihatannya sederhana. Pertanyaan selanjutnya tentunya adalah, apa
kegunaan utama dari closure? Pada contoh di atas, kita bisa saja langsung menerima parameter
sapaan pada fungsi jalan, dan langsung mencetak sapaan sesuai dengan fungsi sapa kan? Terus
kenapa kita harus memanggil fungsi sapa lagi di akhir jalan? Kalau bisa mudah, kenapa harus
dibuat sulit seperti sekarang?
Jawaban dari seluruh pertanyaan-pertanyaan di atas adalah potensi kemampuan penyusunan
(komposisi) fungsi serta penggunaan kembali kode yang ditawarkan oleh closure. Contoh di atas
memang tidak memperlihatkan penggunaan closure yang optimal. Mari kita tingkatkan fungsi
jalan sedikit demi sedikit. Misalkan, kita dapat membuat fungsi ini mengembalikan fungsi lain,
sehingga pengguna fungsi dapat membangun sapaannya sendiri:
1
2
3
4
5
6
7
8
9
10
11
var buatSapaan = function (sapaan) {
return function () {
console.log(sapaan + " pembaca!");
}
};
var sapaanJerman = buatSapaan("Guten");
var sapaanInggris = buatSapaan("Hello");
sapaanJerman(); // mencetak "Guten pembaca!"
sapaanInggris(); // mencetak "Hello pembaca!"
Pada contoh di atas, kita mengirimkan nilai berupa kata sapaan dalam bahasa yang diinginkan
kepada buatSapaan, dan buatSapaan akan membuat sebuah fungsi baru kepada kita. Fungsi baru ini
bersifat anonim, dan dapat mencetak kata sapaan yang kita berikan sebelumnya. Terdapat dua
hal yang menarik dari contoh kode di atas:
1. Variabel (parameter) sapaan adalah milik buatSapaan, tetapi variabel ini tetap dapat digunakan oleh
sapaanJerman dan sapaanInggris ketika buatSapaan telah selesai dijalankan. Biasanya variabel
sapaan akan dihapus begitu fungsi buatSapaan selesai dijalankan.
2. Meskipun menggunakan (dan bergantung kepada) sapaan, baik sapaanJerman maupun sapaanInggris
tidak dapat mengakses :code:`sapaan`. Hal ini berarti kedua fungsi ini tidak dapat mengganti
nilai sapaan lagi!
Fungsi sapaanInggris dan sapaanJerman juga adalah merupakan closure. Lengkapnya, sebuah closure
terdiri dari dua komponen: fungsi dan lingkungan eksekusi fungsi tersebut. Lingkungan dari
fungsi berisi variabel maupun fungsi lokal yang ada ketika fungsi tersebut dibuat. Closure
dapat mengakses dan menggunakan nilai dalam lingkungannya, tetapi pengguna closure tidak
mendapatkan akses tersebut.
Fungsi buatSapaan masih dapat kita kembangkan lebih lanjut lagi, misalkan dengan menambahkan
parameter pada closure yang dikembalikan:
1
2
3
4
5
6
7
8
9
10
11
var buatSapaan = function (sapaan) {
return function (target) {
console.log(sapaan + " " + target + "!");
}
};
var sapaanJerman = buatSapaan("Guten");
var sapaanInggris = buatSapaan("Hello");
sapaanJerman("Soryu"); // mencetak "Guten Soryu!"
sapaanInggris("Holmes"); // mencetak "Hello Holmes!"
Pada contoh kali ini, baik sapaanJerman maupun sapaanInggris dapat menerima sebuah parameter:
nama yang akan disapa. Kita dapat mengubah dan menambahkan banyak fungsionalitas lain lagi
pada buatSapaan, tetapi poin yang paling penting adalah kita dapat menuliskan fungsi yang
membuat fungsi lain secara dinamis. Para pengembang program berorientasi objek mengenal
hal ini dengan nama factory.
Salah satu hal penting yang juga ditawarkan oleh closure adalah akses nilai lingkungannya.
Karena kita dapat mengakses dan mengubah nilai pada lingkungan closure, maka kita juga dapat
memanfaatkan closure untuk membuat sebuah objek yang memiliki properti private. Bayangkan
kalau kita membuat closure yang mengembalikan objek:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var penghitung = function () {
// variabel hitungan di sini menjadi
// variabel private yang tidak dapat
// diakses dari luar objek.
var hitungan = 0;
return {
tambahHitungan: function () {
hitungan = hitungan + 1;
},
ambilNilai: function () {
return hitungan;
}
};
};
17
18
19
20
21
22
23
24
25
26
var jumlahHarimau = penghitung();
jumlahHarimau.hitungan; // undefined (seolah-olah tidak ada)
jumlahHarimau.tambahHitungan();
jumlahHarimau.ambilNilai(); // mengembalikan 1
jumlahHarimau.tambahHitungan();
jumlahHarimau.tambahHitungan();
jumlahHarimau.ambilNilai(); // mengembalikan 3
Dalam contoh di atas, fungsi penghitung pada dasarnya adalah sebuah constructor karena fungsi
ini membuat objek untuk kita. Keuntungan tambahan dari membuat objek dengan cara ini yaitu
kita bisa membuat properti privat. Method tambahHitungan dan ambilNilai sebagai closure tetap
dapat mengakses hitungan, karena hitungan masih merupakan variabel dalam lingkungan closure.
Karena objek yang dikembalikan tidak diikatkan dengan hitungan, maka kita tidak dapat
mengakses hitungan melalui objek yang dihasilkan ini. Perhatikan bagaimana pada kode di atas
ketika kita mencoba mengakses hitungan kita diberikan nilai undefined, seolah-oleh variabel
tersebut tidak ada.
Properti privat memiliki sangat banyak kegunaan, terutama kalau kita merancang pustaka atau
framework untuk digunakan orang lain. Ketika kita menambahkan fungsionalitas yang masih
bersifat eksperimental misalnya, biasanya kita tidak ingin seluruh variabel yang digunakan oleh
fungsi tersebut ke pengguna pustaka. Masih ada banyak kegunaan lain dari properti privat, tetapi
kita tidak akan membahasnya sekarang.
Terakhir, kita juga dapat membuat sebuah objek secara langsung dengan mengeksekusi closure
begitu selesai dibuat. Berikut adalah contoh pembuatannya:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var penghitung = (function () {
var hitungan = 0;
return {
tambahHitungan: function () {
hitungan = hitungan + 1;
},
ambilNilai: function () {
return hitungan;
}
};
})();
penghitung.tambahHitungan();
penghitung.ambilNilai(); // mencetak 1
penghitung.tambahHitungan();
penghitung.tambahHitungan();
penghitung.tambahHitungan();
penghitung.ambilNilai(); // mencetak 4
Sampai bagian ini, kita telah melihat bagaimana menggunakan fungsi untuk tidak hanya
membuat objek, tetapi juga membuat fungsi lain secara dinamis. Kita akan melihat lebih banyak
lagi contoh-contoh pemanfaatan fungsi sebagai alat komposisi, abstraksi, maupun penggunaan
kembali kode pada bab selanjutnya.
Kesalahan umum Pembuatan Closure
Sebelum menutup pembahasan mengenai fungsi, kita akan melihat satu kesalahan umum yang
sering ditemui ketika membuat closure. Kesalahan yang umum dilakukan ini sangat “halus”,
sehingga seringkali menjebak bahkan seorang penegmbang yang berpengalaman sekalipun.
Kesalahan seperti apa yang akan kita lihat?
1
2
3
4
5
6
7
8
9
10
11
12
var daftarFungsi = [];
var i;
for (var i = 0; i < 3; i++) {
daftarFungsi.push(function () {
return i;
});
}
daftarFungsi[0](); // mengembalikan 3 (!)
daftarFungsi[1](); // mengembalikan 3 (!)
daftarFungsi[2](); // mengembalikan 3 (!)
Pada kode di atas, closure yang dibuat untuk mengisikan daftarFungsi akan selalu mengembalikan
3. Secara intuitif, kita akan berasumsi bahwa karena nilai i yang diikatkan ke masing-masing
closure berbeda isinya (0, 1, dan 2) maka ketika fungsi yang dipanggil kita juga akan
mendapatkan 0, 1, dan 2. Hal ini terjadi karena closure yang dibuat diikatkan kepada variabel i,
bukan nilai variabel i ketika closure dibuat.
Solusi umum dari kesalahan ini adalah dengan membuat closure tambahan:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var daftarFungsi = [],
i,
pembuatFungsi = function (n) {
return function () {
return n;
}
};
for (var i = 0; i < 3; i++) {
daftarFungsi.push(pembuatFungsi(i));
}
daftarFungsi[0](); // mengembalikan 0
daftarFungsi[1](); // mengembalikan 1
daftarFungsi[2](); // mengembalikan 2
Sederhananya, hindari pembuatan fungsi di dalam perulangan. Selain menghabiskan banyak
memori, pembuatan fungsi di dalam perulangan juga rawan akan kesalahan seperti yang
dijelaskan di atas. Jika terpaksa harus mengikatkan fungsi ke dalam banyak nilai (misalnya
membuat semua elemen <a> melakukan sesuatu yang sama ketika di klik), gunakan teknik fungsi
pembantu yang mengembalikan closure seperti kode di atas.
PENGERTIAN PHP
PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini. PHP banyak dipakai untuk
memrogram situs web dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian
lain.Contoh terkenal dari aplikasi PHP adalah forum (phpBB) dan MediaWiki (software di belakang
Wikipedia). PHP juga dapat dilihat sebagai pilihan lain dari ASP.NET/C#/VB.NET Microsoft,
ColdFusion Macromedia, JSP/Java Sun Microsystems, dan CGI/Perl.
PHP : Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam
HTML. PHP banyak dipakai untuk membangun sebuah CMS.
Contoh aplikasi lain yang lebih kompleks berupa CMS yang dibangun menggunakan PHP adalah:
Mambo,
Joomla!,
Postnuke,
Xaraya,
dan lain-lain.
SEJARAH PHP
Pada awalnya PHP merupakan kependekan dari Personal Home Page (Situs Personal). PHP pertama kali
dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama FI (Form Interpreted),
yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari
web.Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI. Dengan
perilisan kode sumber ini menjadi open source, maka banyak programmer yang tertarik untuk ikut
mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini interpreter PHP sudah diimplementasikan dalam
program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan
PHP/FI secara signifikan.Pada tahun 1997, sebuah perusahaan bernama Zend menulisulang interpreter
PHP menjadi lebih bersih, lebih baik, dan lebih cepat.
Kemudian pada Juni 1998, perusahaan tersebut merilis interpreter baru untuk PHP dan meresmikan rilis
tersebut sebagai PHP 3.0 dan singkatan PHP dirubah menjadi akronim berulang PHP: Hypertext
Preprocessing.
Pada pertengahan tahun 1999, Zend merilis interpreter PHP baru dan rilis tersebut dikenal dengan PHP
4.0. PHP 4.0 adalah versi PHP yang paling banyak dipakai pada awal abad ke-21. Versi ini banyak
dipakai disebabkan kemampuannya untuk membangun aplikasi web kompleks tetapi tetap memiliki
kecepatan dan stabilitas yang tinggi.
Pada Juni 2004, Zend merilis PHP 5.0. Dalam versi ini, inti dari interpreter PHP mengalami perubahan
besar. Versi ini juga memasukkan model pemrograman berorientasi objek kedalam PHP untuk menjawab
perkembangan bahasa pemrograman ke arah paradigma berorientasi ob
o Sintaksis Dasar
PEMBATAS
PHP hanya mengeksekusi kode yang ditulis dalam pembatas sebagaimana ditentukan oleh dasar sintaks
PHP. Apapun di luar pembatas tidak diproses oleh PHP (meskipun teks PHP ini masih mengendalikan
struktur yang dijelaskan dalam kodePHP. Pembatas yang paling umum adalah "<?php" untuk membuka
dan "?>" Untuk menutup kode PHP.Tujuan dari pembatas ini adalah untuk memisahkan kode PHP dari
kode diluar PHP, sepertiHTML,Javascript
VARIABEL
Variabel diawali dengansimboldolar$. Pada versi php PHP 5 diperkenalkan jenis isyarat yang
memungkinkanfungsiuntuk memaksa mereka menjadi parameterobjekdari class tertentu, array, atau
fungsi. Namun, jenis petunjuk tidak dapat digunakan dengan jenis skalar sepertiangkaataustring.
Contohvariabeldapat ditulis sebagai $nama_varabel.Penulisan fungsi, penamaan kelas, nama variabel
adalah pekaakan huruf besar (Kapital) dan huruf kecil . Kedua kutip ganda""dari string memberikan
kemampuan untuk interpolasi nilai variabel ke dalam string PHP. PHP menerjemahkanbarissebagaispasi,
dan pernyataan harus diakhiri dengan titik koma;
KOMENTAR
PHP memiliki 3 jenis sintaks sebagai komentar pada kode yaitu tanda blok/ * * /, komentar 2 baris//Serta
tanda pagar#digunakan untuk komentar satu baris. Komentar bertujuan untuk meninggalkan catatan pada
kode PHP dan tidak akan diterjemahkan ke program,
FUNGSI
Ratusan fungsi yang disediakan oleh PHP serta ribuan lainnya yang tersedia melalui berbagai ekstensi
tambahan. fungsi-fungsi ini didokumentasikan dalam dokumentasi PHP. Namun, dalam berbagai tingkat
pengembangan, kini memiliki berbagai konvensi penamaan. Sintaks fungsi adalah seperti dibawah
ini:functiontampilkan($data="")// Mendefenisikan fungsi, "tampilkan" adalah nama sebuah
fungsi{//Diapit oleh tanda kurung kurawalif($data)return$data;elsereturn'Tidak ada data';// Melakukan
proses pengolahan data, contohnya melalui kondisi}echotampilkan("isi halaman")// Menjalankan fungsi.
CONTOH PEMEROGAMAN
Membuat Sebuah Halaman Web PHP
Sebuah Halaman web yang ditulis menggunakanBahasa PemogramanPHP adalah sebagai berikut:<?
phpecho"Halo dunia";?>Program bilangan Fibonacci[sunting|sunting sumber]Berikut ini adalah contoh
program yang relatif lebih kompleks yang ditulis dengan menggunakan PHP. Contoh program ini adalah
program untuk menampilkan 20 bilangan pertama darideretbilangan Fibonacci.terdapat beberapa variable
atau sintax. seperti function. itu merupakan bagian dari javascript.<?phpfunctionfibonacci_seq($panjang)
{for($l=array(0,1),$i=2,$x=0;$i<$panjang;$i++)$l[]=$l[$x++]+$l[$x];return$l;}fibonacci_seq(20);//
Angka "20" dapat diganti sesuai keinginan?>
KELEBIHAN PHP
Kelebihan PHP Dari Bahasa Pemrograman Lain
Beberapa kelebihan PHP dari bahasa pemrograman web, antara lain:
1.'Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam
penggunaannya.'
2.'Web Server yang mendukung PHP dapat ditemukan dimana- mana dari mulai apache, IIS, Lighttpd,
hingga Xitami dengan konfigurasi yang relatif mudah.'
3.'Dalam sisi pengembangan lebih mudah, karena banyaknya milis - milis dan developer yang siap
membantu dalam pengembangan.'
4.'Dalam sisi pemahamanan, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi
yang banyak.'
5.'PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh,
Windows) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-
perintah system.'
KEGUNAAN PHP
Kegunaan dari PHP adalah untuk membuat tampilan web menjadi lebih dinamis, dengan php kita bisa
menampilkan atau menjalankan beberapa file dalam 1 file dengan cara di include atau require, dan php itu
sendiri sudah bisa beriteraksi dengan beberapa database walaupun dengan kelengkapan yang berbeda,
yaitu seperti :
*.DBM,
*.FilePro (Personic, Inc),
*.Informix,
*.Ingres,
*.InterBase,
*.Microsoft Access,
*.MSSQL,
*.MySQL,
*.Oracle
*.PostgrSQL,
*.Sybase
TIPE DATA
PHP memiliki 8 tipe data, yaitu:
1.Boolean
2.Integer
3.Float/Double
4.String
5.Array
6.Object
7.Resource
8.NULL
Boolean
Tipe data Boolean adalah tipe data yang merepresentasika suatu kondisi ‘benar’ (true) atau ‘salah’ (false).
Selain itu juga dapat menggunakan nilai 1 untuk menyatakan true dan 0 untuk false. Penulisan bilangan
ini mengikuti aturan case-insensitive sehingga TRUE dan true dianggap sama oleh PHP. Perhatikan
contoh dibawah ini
<?php
$kondisi = TRUE ;
If ( $kondisi == true ) {
Echo “ kondisinya benar }
?>
Pada contoh di atas, pertama mendefinisikan variable $kondisi yang memiliki tipe data Boolean dan
bernilai true. Lalu pada baris selanjutnya memeriksa nilai TRUE maka tuliskan kata “kondisinya benar”
Integer
Tipe data integer merupakan tipe data bilangan bulat baik yang positif atau negative {… , -3, -2, -1, 0,
1, 2, 3, …,} tipe data integer mendukung bilangan octal, decimal, maupun hexadecimal.
Penulisa integer didalam PHP adalah sebagai berikut
<?php
$nilai 1 = 4 :
$nilai 2 = 3 :
$hasil = $ nilai1 = $nilai 2 : //cc
Echo $hasil ;
?>
Float
Float atau nama lainya adalah floating point atau real number adalah type data pada php yang memliki
bagia decimal di akhir angka contohnya adalah 3,21 atau4,5 dalam penulisan type data float didalam php
buka menggunakan koma (,) tetapi menggunakan titik
Penulisan float
<?php
$nilai1 = 4.5 ;
$nilai 2 = 3.5 ;
$hasil = $nilai + $nilai2 ; //cc
Echo $hasil;
?>
String
String adalah type data pada php yang berisi text karakter dimana bentuknya bisa kata atau kalimat. Dan
dalam PHP untuk penulisan jenis type data ini ada 4 cara yaitu;
Single quoted
Double quoted
Heredoc
Nowdoc
Single Quoted
Penuliasan string dengan cara ini bisa dibilang adalah cara yang sederhana, caranya adalah dengan
memberi tanda single quoted di awal dan akhir kalimat yang kita buat. Dan untuk kalimat yang
mengandung tanda petik satu harus di dahului dengan backslash (/) dan jika kita ingin memunculkan
tanda backslash mka kita harus menulisnya dua kali agar tida bingung lihat seperti contoh dibawah ini :
<?
$srting 1 = ‘contoh string’ ;
$string 2 = ‘contoh tanda petik’
$string 3 = ‘document root C: //
Echo $string1 ; echo “<br>” ;
Echo $string2 ; echo “<br>” ;
Echo $string3 ; echo “<br>” ;
Double Qouted
Sekilas jika dilihat pada penulisan string dengan single quoted dan double quoted sepertinya tidak ada
perbedaan. Ada beberapa point yang ternyata ada bedanya antara lain adalah jika penulisan string
menggunakan double quoted dan didalamnya terdapat variable maka php akan memprosesnya tapi jika
menggunakan tapi jika menggunakan single quoted tidak. Apabila di dalam double quoted ada kalimat
yang menggunakan tanda (“”) harus menggunakan backlash di awal dan di akhir kalimat contoh adalah
sebagai berikut ;
<?php
$contoh = “ini adalah” ;
$string 1 = “$contoh contoh st
$string 2 = “contoh tanda petik
$string 3 = “document root C : //
Echo $string1 ; echo “<br>” ;
Echo $string 2 : echo “<br>” :
Echo $string 3 : echo “<br>” ;
Heredoc
Fitur ini berfungsi untuk menuliskan string yang isinya dapat berisi beberapa baris sekaligus. Penulisan
dengan heredoc memang sangat jarang digunakan contoh penulisan dengan fitur ini adalah sebagai
berikut :
<?php
$IPK = “memuaskan” ;
$string1 = <<q
Saya sedang belajar PHP <br /
Kali ini pembahsanya adalah
Bisa dapat IPK $IPK
Q ;
Echo $string1 ;
Untuk memulai penulisan di awali dengan tanda “<<<” di ikuti dengan penanda akhir. Di contoh saya
menggunakan pengakhir kita bisa merubah dengan kata atau karakter lain .
Setelah penanda string baru kita menuliskan string untuk menutupnya kita akhiri dengan tanda pengakhir
string yang sudah di definiikan di awal (q), yang perlu di perhatikan adalah penutup heredoc tidak boleh
diantara pengakhir dan titik koma (;) .
Nowdoc
Dalam penulisan nowdoc tidak banyak berbeda dengan heredoc perbedaanya adalah pada pengakhir
string terdapat tanda single quoted. Hasil proses dari nowdoc sama halnya denga single quoted dimana
variable dan karakter khusu tidak akan terproses
Array
Array berbeda dengan type data pada php seperti integer atau Boolean, karena array adalah sebuah tipe
data yang didalamnya terdiri dari kumpulan tipe data
Penulisan Array dalam PHP
PHP mendukung beberapa cara penulisan array< salah satunya adalah menggunkan konstruktor Array.
$nama_variabel = array (
Key => value ,
Key2 => value2 ,
Key3 => value3 ,
…
)
Penulisan array terdiri dari kunci (key) dan nilai ( value ) key berfungsi sebagai petunjuk posisi dimana
value tersimpan tanda => berfungsi untuk memberikan nilai kepada key. Untuk mengakses nilai dari array
kita menggunkan kombinasi nama variable dan nilai key agar mempermudah mari kita lihat contoh
dibawah ini :
<?php
$nama = array (
1 => “Andri” ,
2 => “Joko” ,
3 => “Sukma” ,
4 => “Rina” ,
5 => “Sari” ,
// cara akses array
echo $ nama [1] ; // Andri
echo ‘br />” ;
echo $nama[2] ; // Joko
echo ‘br />” ;
echo $nama[3] //Sukma
Pada contoh diatas kami menggunakan integer sebagai key dan string sebagai value, selain menggunakan
cara seperti diatas PHP juga memperbolehkan penulisan array tanpa menggunkan key secara otomatis key
akan diurutkan dari0,1,2 dst, seperti contoh dibawah ini
<?php
$nama = array (“Andri”, “Joko”, “Sukma”, “Rina” ,
// cara akses array
Echo $nama [1] ; //Andri
Echo ‘<br /” ;
Echo 4nama [2] ; // Joko
Echo “br />” ;
Echo $nama[3] ; //Sukma
Didalam key atapun value pada array kita bisa menggunakan tipe data string atau integer akan tetapi
apabila di isi dengan Boolean maka secara otomatis akan di proses menjadi 0 / 1.
Pada PHP vesi 5.4 penulisan array di persingkat cara penulisan nya bisa seperti contoh dibawah ini
<?php
$nama = [“Andri”, “Joko”, “Sukma”, “Rina”, “sar
// car akses array
Echo $nama[1] ; // Andri
Echo “<br />” ;
Echo $nama [2] : // Joko
Echo “<br />” ;
Echo $nama[3] ; // Sukma
Objek
PHP Framework
PHPFrameworkadalah sebagai sebuahkerangkakerja yang disusun oleh berbagaikomunitaspengembang
webdiseluruhdunia. Kerangka ini bertujuan untuk mempermudah dalam membuat sebuahaplikasiweb kita
sering menulis script PHP secara keseluruhan (konvensional) dan itu pun kita ulang pada halaman yang
lain.
*.CakePHP
*.CodeIgniter
*.PHP Bootstrap
*.PRADO
*.Symfony
*.Zend Framework
*.Yii
*.PHPDevShell
*.Akelos
*.QPHP
*.ZooP
CakePHP
merupakan sebuah rapid development frameworkyang gratis dansumber terbukauntukPHP.
CakePHP adalah sebuah framework atau kerangka kerjauntuk membuataplikasiCRUD (Create, Read,
Update, Delete) berbasisbahasa pemrogramanPHP.
CakePHP juga menjadi salah satu framework pilihan yang memungkinkan seorang
dpengembangwebuntuk membuat sebuah aplikasi dengan karakter pengembangan RAD (Rapid
Application Development), yang memungkinkan untuk digunakan dan dikembangkan menjadi aplikasi
lain yang lebih kompleks.
CakePHP membuang proses monoton dalam pengembanganaplikasi web. CakePHP menyediakan semua
alat bantu yang diperlukan untuk memulai tugascodingyang perlu diselesaikan: yaitu logika aplikasi.
Daripada membuat sesuatu yang baru setiap memulai proyek baru, pengguna dapat meninjau unduhan
CakePHP dan mulai fokus kepada logik aplikasi yang hendak dibangun.
CakePHP memiliki tim pengembang (developer) dankomunitasyang aktif (membawa nilai tambah ke
proyek). Selain menjaga seseorang dari melakukan hal yang membuang waktu, penggunaan CakePHP
juga berarti inti (core) aplikasi yang sudah teruji dengan baik dan secara periodik terdapat
peningkatan/perbaikan,
FITUR FITUR
Berikut ini adalah beberapa daftar fitur yang dapat dinikmati apabila menggunakan CakePHP:
*.Komunitas yang aktif dan bersahabat.
*.Lisensi yang fleksibel.
*.Kompatibel dengan PHP versi 4 dan 5.
*.Operasi CRUD yang terintegrasi untuk interaksi denganbasis data.
*.Scaffoldingaplikasi.
*.Otomatisasi pembuatan code (code generation).
*.ArsitekturMVC.
*.Request dispatcherdenganURLyang kustom, rapih dan adanya rute.
*.Validasidatayang terintegrasi.
*.Sistemtemplating yang cepat dan fleksibel (sintaks PHP, tersediahelpers).
*.View HelpersuntukAJAX,JavaScript,HTMLForms dan banyak lagi.
*.Email,Cookie, Keamanan,Session, dan komponenRequest Handling.
*.ACLyang fleksibel.
*.Sanitasi Data.
*.Caching yang fleksibel.
PHP BOOTSTRAP
adalah Aplikasi sumber terbuka yang berupa framework atau kerangka kerja untuk membangun website
dinamis dengan menggunakan bahasa scriptPHP.
PHP BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi
cepat dan mudah dibandingkan dengan membuatnya dari awal. Keunggulannya adalah karena dukungan
akan perpaduan framework css yang dapat meringkas pekerjaan membuat sebuah template untuk berbagai
perangkat berbeda layar.
Kerangka Kerja Aplikasi PHP
Kerangka Kerja (Framework) secara sederhana diartikan sebagai kumpulan dari fungsi-fungsi/prosedur-
prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih
mempermudah dan mempercepat pekerjaan seorang programer, tanpa harus membuat fungsi atau class
dari awal.Fitur Umum Framework:
*.Mempercepat dan mempermudah pembangunan sebuah aplikasi web.
*.Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah
framework (dengan syarat programmer mengikuti pola standar yang ada)
*.Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu
membangun dari awal.
*.Lebih bebas dalam pengembangan jika dibandingkan CMS
Cara keja PHP
Dalam cara kerja PHP, yaitu pertama client web browser atau pengguna memakai komputer kemudian
pengguna tersebut menjalankan file PHP itu di web browser atau yang biasa di sebut Browser saja dan
kemudian File PHP itu di kirim ke web server, Web server mengirimkannya lagike Engine PHP atau
mesin PHP dan di dalam mesin PHP itu diproses dan setelah diproses oleh mesin PHP maka akan
berbentuk file HTML, dan file HTML ini akan di kirimkan ke web server dan web serverakan
memberikan ke penggunaSoftware-software Yang DigunakanSoftware -software yang digunakan dalam
menjalakan PHP ini yaitu TexEditor, Web Browser, Web Server, Software PHP dan DatabaseUntuk
TextEditor kita bisa memakai notepad bawaannya Windows atau engga kita bisa juga
menggunakannotepad++, TSPad,Dreamweaveratau yang lainnya…Untuk Web Browser kita bisa
menggunaka IE (Internet Explorer) atauMozila Firefoxatau yang lainnya.
Program Bilangan Fibonacci
Berikut ini adalah contoh program yang relative lebih kompleks yang ditulis dengan
menggunakan PHP. Contoh program ini adalah program untuk menampilkan 20 bilangan Fibonacci.
Terdapat beberapa variable atau sintax. Seperti Function. Itu merupakan bagian dari javascript.
<?php
Function Fibonacci_seq ($panjang) {for ($I = array (0.1), $i =2, $X = 0 ; $I < $panjang ; $i ++ ) $I [] = $i
[$x++] + $i [$x]
Return $I}
Fibonacci_seq (20) ;
/ / angka “20” dapat diganti sesuai keinginan ?>
Kelebihan PHP Dari Bahasa Pemrograman Lain Sunting
Beberapa kelebihan PHP dari bahasa pemrograman Web, antara lain :
Bahasa pemrograman PHP adalah sebuah bahasa script yang tidak melakukan sebuah kompilasi dalam
penggunaanya.’
Web server yang mendukung PHP dapat ditemukan dimana-mana dari mulai apache, IIS, Lighttp, hingga
Xitami dengankonfigurasi yang relative mudah.’
Dalam sisi pemahaman, PHP adalah bahasa scripting yang paling mudah karena memiliki referensi yang
banyak
PHP adalah bahasa open source yang dapat digunakan di berbagai mesin (Linux, Unix, Macintosh,
Windows ) dan dapat dijalankan secara runtime melalui console serta juga dapat menjalankan perintah-
perintah system.
Cascading Style Sheet (CSS)
o Sejarah CSS
Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara
berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri
merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau
W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser
terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS.
CSS 1
Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa
pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag
baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing
mengembangkan tag sendiri untuk mengatur tampilan web.
CSS 1 mendukung pengaturan tampilan dalam hal :
1. Font (Jenis ketebalan).
2. Warna, teks, background dan elemen lainnya.
3. Text attributes, misalnya spasi antar baris, kata dan huruf.
4. Posisi teks, gambar, table dan elemen lainnya.
5. Margin, border dan padiing.
CSS 2
Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang
menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan
diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific
CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan
di printer.
CSS 3
CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3
dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan
CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan
fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background,
border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.
Fitur terbaru CSS 3 :
1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft
Silverlight.
2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".
3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi
dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.
o Pengertian CSS
CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari
berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS
yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih
terstruktur dan lebih seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word
yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya
untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat
tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks,
ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph,
spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama
dengan format yang berbeda.
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan
beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur
beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat
digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat
tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.
CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border,
warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri,
kanan, atas, bawah, dan parameter lainnya.[1] CSS adalah bahasa style sheet yang digunakan untuk
mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang
sama dengan format yang berbeda.
o Penulisan
Saat masuk pada bagian CSS, sering dijumpai kode sebagai berikut:
H1 {
COLOR: #0789DE;
}
Bagian pertama sebelum tanda ‘{}’ dinamakan selector, sedangkan yang diapit oleh ‘{}’ disebut
declaration yang terdiri dari dua unsur, yaitu property dan value. Selector dalam pernyataan di atas adalah
h1, sedangkan color adalah property, dan #0789de adalah value.
Selain itu ada tiga metode penulisan CSS atribut, yaitu :
Inline Style Sheet
Embedded Style Sheet
Linked Style Sheet
– Inline Style Sheet
CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan
menambahkan atribut style=”…” dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang
bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain.
Contoh penulisan CSS dengan metode Inline Style Sheet :
<html>
<head>
<title>Contoh Bentuk Inline</title>
</head>
<body bgcolor=”#FFFFFF”>
<p id=”cth1?>
Ini adalah contoh tag P tanpadiformat menggunakan CSS </p>
<p id=”cth2? style=”font-size:20pt”>
Tag P ini diformat dengan besar font 20 point </p>
<p id=”cth3? style=”font-size:14pt; color:red”>
Tag P ini diformat dengan besar font 14 point, dan menggunakan warna merah </p>
</body>
</html>
– Embedded Style Sheet
CSS didefinisikan terlebih dahulu dalam tag <style> … </style> di atas tag <body>. Pada pendefinisian
ini disebutkan atribut-atribut CSS yang akan digunakan untuk tag-tag HTML, yang selanjutnya dapat
digunakan oleh tag HTML yang bersangkutan.
Contoh penggunaan CSS dengan metode Embedded Style Sheet :
<html>
<head>
<title>Contoh Bentuk Embedded/title>
</head>
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style>
<body>
<h1 id=”cth1?>Judul ini berukuran 18 dengan warna merah!</h1>
<p id=”cth2?>Tag p ini di format dengan besar font 12 point dengan tipe font Arial dan mempunyai
identasi 0.5 inch </p>
<p id=”cth3?>Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch
dan warna background biru</p>
</body>
</html>
– Linked Style Sheet
Metode ini hampir sama dengan metode Embedded Style Sheet, hanya saja pendefinisian tag <style> …
</style> dibuat pada berkas terpisah dari berkas HTML yang membutuhkan CSS. Kemudian berkas lain
tersebut disimpan dalam format .css.
Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di
antara tag <head> … </head>.
Contoh (simpan dengan nama contoh.css) :
<style>
body {background:#0000FF; color:#FFFF00; margin-left:0.5in}
h1 {font-size:18pt; color:#FF0000}
p {font-size:12pt; font-family:arial; text-indent:0.5in}
</style
Sifat CSS
Ada dua sifat CSS yaitu internal dan eksternal. Jika internal yang dipilih, maka skrip itu dimasukkan
secara langsung ke halaman website yang akan didesain. Kalau halaman web yang lain akan didesain
dengan model yang sama, maka skrip CSS itu harus dimasukkan lagi ke dalam halaman web yang lain
itu.
Sifat yang kedua adalah eksternal di mana skrip CSS dipisahkan dan diletakkan dalam berkas khusus.
Nanti, cukup gunakan semacam tautan menuju berkas CSS itu jika halaman web yang didesain akan
dibuat seperti model yang ada di skrip tersebut.
Fakta Menggunakan CSS diantaranya :
Telah didukung oleh kebanyakan browser versi terbaru, tetapi tidak didukung oleh browser-browser lama.
Lebih fleksibel dalam penempatan posisi layout. Dalam layouting CSS, kita mengenal Z-Index untuk
menempatkan objek dalam posisi yang sama.
Menjaga HTML dalam penggunaan tag yang minimal, hal ini berpengaruh terhadap ukuran berkas dan
kecepatan pengunduhan.
Dapat menampilkan konten utama terlebih dahulu, sementara gambar dapat ditampilkan sesudahnya.
Penerjemahan CSS setiap browser berbeda, tata letak akan berubah jika dilihat di berbagai browser
CSS adalah layouting "Masa Depan" dengan penggabungan bersama XHTML.
Cascading Style Sheet atau CSS adalah sebuah pemrogamaran atau boleh dibilang script yang
mengendalikan beberapa komponen (tag html) dalam sebuah website sehingga tampilan akan menjadi
lebih terstruktur dan seragam. Ada tiga jenis cara dalam penggunaan CSS ini, yaitu:
1. External Style Sheet
2. Internal Style Sheet
3. Inline Style Sheet
External Style Sheet
Adalah CSS yang dibuat dalam file terpisah dengan ekstensi file .css. Untuk memanggilnya menggunakan
script html yang disisipkan antara tag head sebagai berikut:
<link rel="stylesheet" type="text/css" href="ditektori/filecss.css" />
Pada bagian href tersebut tinggal diisi mengarah ke direktori dimana Anda menempatkan file cssnya.
Penggunaan sistem embeding css ini sangat disarankan karena memang banyak kelebihan yaitu mudah
untuk melakukan pengeditan, mengatur semantik dan praktis terkumpul dari satu file.
Internal Style Sheet
Adalah cara embeding css dengan menulis langsung di dalam file html yang ingin kita atus tampilannya.
Penulisan ini disisipkan diantara tag head juga dengan diapit oleh tag style. Berikut ini contohnya:
<style type="text/css">
body{
background:#cccccc;
font-family:Arial;
}
</style>
Inline Style Sheet
Adalah penulisan script css langsung pada tag html dengan menambahkan style di dalamnya. Contoh:
<p style="font-size:20px;">Tulisan yang di atur </p>
Dua cara terakhir ini tidak disarankan digunakan karena ribet dan memperbesar file setiap html anda
sekaligus harus menulis di beberapa tempat sekaligus, kecuali memang sangat darurat. Darurat disini
berarti memang tampilan segera dibutuhkan oleh pengguna saat itu sedangkan anda sedang membuka fie
itu dan tidak sempat membuka file css karena keterbatasan koneksi misalnya.
Namun penggunaan external css akan memudahkan Anda di waktu kedepan dalam hal update dan editing.
Selector
Dalam CSS, penyeleksi digunakan untuk menyatakan bagian dari markup yang gaya berlaku untuk,
semacam ekspresi pertandingan. Penyeleksi mungkin berlaku untuk:
- semua elemen dari jenis tertentu, misalnya tingkat kedua header h2
- unsur-unsur yang ditentukan oleh atribut , khususnya id(sebuah identifier unik untuk dokumen) dan
kelas
- elemen tergantung pada bagaimana mereka ditempatkan relatif terhadap, atau bersarang dalam, yang
lain di pohon dokumen .
Pseudo-kelas yang digunakan dalam CSS untuk mengizinkan format berdasarkan informasi yang berada
di luar pohon dokumen. Contoh yang sering digunakan dari kelas semu adalah :hover , yang
mengidentifikasi konten hanya ketika pengguna menunjuk ke 'elemen terlihat, biasanya dengan menekan
kursor mouse di atasnya. Hal ini ditambahkan ke pemilih seperti dalam a:hover atau #elementid:hover . A
pseudo-class mengklasifikasikan elemen dokumen, seperti :link atau :visited , sedangkan pseudo-element
membuat pilihan yang mungkin terdiri dari unsur parsial, seperti :first-line atau :first-letter .
Penyeleksi dapat dikombinasikan dengan berbagai cara, terutama di CSS 2.1, untuk mencapai spesifisitas
besar dan fleksibilitas.
Kesulitan pada pnggunaan
CSS 1 spesifikasi selesai pada tahun 1996. Microsoft Internet Explorer 3 dirilis pada tahun itu, yang
menampilkan beberapa dukungan terbatas untuk CSS. Tapi itu lebih dari tiga tahun sebelum web browser
dicapai hampir penuh pelaksanaan spesifikasi. Internet Explorer 5.0 untuk Macintosh , dikirim pada
Maret 2000, adalah browser pertama yang memiliki penuh (lebih dari 99 persen) CSS 1 dukungan,
melebihi Opera , yang telah menjadi pemimpin sejak diperkenalkan dukungan CSS 15 bulan sebelumnya.
Browser lain diikuti segera setelah itu, dan banyak dari mereka tambahan dilaksanakan bagian dari CSS
2. Pada Agustus 2010 , ada (selesai) Browser telah sepenuhnya dilaksanakan CSS 2, dengan tingkat
implementasi yang bervariasi (lihat Perbandingan mesin tata letak (CSS) ).
Meskipun browser awal seperti Internet Explorer 3 dan 4 , dan Netscape 4.x memiliki dukungan untuk
CSS, itu biasanya tidak lengkap dan memiliki banyak bug yang mencegah mereka dari implementasi yang
berguna diadopsi.
Ketika kemudian 'versi 5' browser mulai menawarkan implementasi cukup penuh dari CSS, mereka masih
salah di daerah tertentu dan penuh dengan inkonsistensi, bug dan lainnya kebiasaan . Perkembangan
inkonsistensi-CSS terkait seperti dan bahkan variasi dalam mendukung fitur telah membuatnya menjadi
sulit bagi desainer untuk mencapai penampilan yang konsisten di seluruh browser dan platform .
Beberapa penulis terpaksa workarounds seperti hacks CSS dan CSS filter .
Masalah dengan adopsi tambal sulam browser 'CSS, bersama dengan ralat dalam spesifikasi asli,
memimpin W3C untuk merevisi CSS 2 standar ke CSS 2.1, yang bergerak lebih dekat ke snapshot
bekerja dukungan CSS saat ini di browser HTML. Beberapa CSS 2 sifat yang ada browser berhasil
dilaksanakan dijatuhkan, dan dalam beberapa kasus, perilaku didefinisikan diubah untuk membawa
standar agar sejalan dengan implementasi yang ada dominan. CSS 2.1 menjadi Rekomendasi Calon pada
tanggal 25 Februari 2004, tetapi CSS 2.1 ditarik kembali ke Working Status Draft pada 13 Juni 2005, dan
hanya kembali ke status Rekomendasi Calon pada tanggal 19 Juli 2007.
Di masa lalu, beberapa server web yang dikonfigurasi untuk melayani semua dokumen dengan ekstensi
nama file .css sebagai tipe mime application/x-pointplus daripada text/css . Pada saat itu, ada sebuah
produk perangkat lunak di pasar untuk mengkonversi PowerPoint file ke dalam Compact Slide Show file
menggunakan .css ekstensi.
jQuery
JQuery adalah library Javascript yang dibuat untuk memudahkan pembuatan website dengan
HTML yang berjalan di sisi Client. JQuery diluncurkan pada tanggal 26 Januari 2006 di Barcamp NYC
oleh John Resig dan berlisensi ganda di bawah MIT dan GPL. Sekarang JQuery dikembangkan oleh team
developer yang dipimpin oleh Dave Metvin. Dipakai oleh lebih dari 55% dari 10.000 website yang paling
sering dikunjungi. JQuery menjadi Library Javascript yang paling popular Sekarang. Script JQuery dibuat
untuk memudahkan pengaturan document seperti menyeleksi object dengan element DOM dan membuat
aplikasi dengan AJAX. Jquery juga menyediakan layanan atau support para developers untuk membuat
plug- ins di dalam bahasa Javascript tentunya. Sehingga memungkinkan para developer website membuat
website lebih interaktif dengan animasi, efek – efek, tema dan widget.
Dengan menggunakan JQuery kita bisa meluapkan kreatifitas untuk membuat website dinamis atau
website aplikasi menjadi lebih bagus.
Microsoft dan Nokia telah mengumumkan akan mengemas JQuery di platform mereka. Microsoft
awalnya mengadopsinya dalam Visual Studio untuk digunakan dalam ASP.NET AJAX dan ASP.NET
MVC Framework, sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka.
Beberapa Fitur yang ada di JQuery :
1. Dalam Pemakaian menggunakan seleksi element DOM, sehingga website lebih dinamis dan interaktif.
2. JQuery bisa memanipulasi Class pada CSS dan Support CSS 3
3. Event
4. AJAX
5. Efek-efek dan animasi
6. Ekstensi dan Plug-ins
7. Kompatibilitas dengan hampir semua Browser modern
8. Keperluan lain seperti : User Agent, Feature detection dan lainnya
JQuery hanyalah 1 file yang berisi kode dalam Javascript tetapi bisa berisi banyak fitur seperti di atas.
Sehingga cara menggunakaanya sangat mudah..
Kita panggil file JQuerynya terlebih
dahulu.
<script type=”text/javascript”
src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
// Kode Jquery anda tuliskan dis
});
</script>
jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-
side script pada file HTML. Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di
dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan sebuah perangkat
lunak bebas sumber terbuka yang berada di bawah lisensi MIT. Sintaks jQuery dirancang sedemikian
rupa untuk memudahkan pengembang website dalam menavigasi dokumen, menyeleksi elemen-elemen
DOM, menerapkan animasi, mengaplikasikan events, serta membangun aplikasi AJAX.
jQuery juga memampukan developer menciptakan berbagai plugin berbasis library JavaScript. Dengan
plugin-plugin tersebut, pengembang situs web mampu menyusun sejumlah abstraksi untuk interaksi dan
animasi sederhana, juga beberapa efek yang cukup kompleks dan berbagai widget yang dapat
dikonfigurasikan.
Karakter library JavaScript yang modular mendukung pengembangan laman web dinamis dengan
berbagai fitur dan aplikasi berbasis web ( web app).
Fitur-fitur inti jQuery – meliputi penyeleksian, traversal, dan manipulasi elemen-elemen DOM –
dimampukan oleh sebuah selector engine (dinamai Sizzle mulai versi 1.3), telah mewujudkan suatu gaya
pemrograman baru yang memadukan antara algoritma dan struktur data DOM. Gaya ini telah
mempengaruhi arsitektur dari framework JavaScript lainnya seperti YUI v3 dan Dojo , dan di kemudian
menstimulasi pengembangan Selectors API standar.
sedangkan Nokia mengintegrasikannya dalam platform
pengembangan widget Web Run-Time . jQuery
juga mulai dipakai pada MediaWiki sejak versi 1.16.
Situs resmi jQuery beralamat di jquery.com .
Pengembangannya dikelola oleh jQuery Foundation yang berada di jquery.org . Library ini bisa diunduh
di laman jquery.com/download , atau diterapkan melalui sejumlah CDN termasuk Google jQuery CDN.
Membedah jQuery
jQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM. DOM merupakan
representasi struktural dari seluruh elemen pada sebuah laman web.
Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan manipulasi elemen-elemen DOM
menjadi simpel dan mudah. Sebagai contoh, jQuery bisa dipergunakan untuk menemukan sebuah elemen
dalam dokumen yang memiliki properti tertentu (misalnya: elemen dengan tag ` h1 `), kemudian
mengubah satu atau beberapa atributnya (misalnya: warna, visibilitas), atau menjadikan elemen tersebut
responsif terhadap suatu event (misalnya: klik mouse). Selain penyeleksian dan manipulasi DOM dasar,
jQuery menyajikan sebuah paradigma baru pada penanganan event oleh JavaScript. Penugasan event dan
pendefinisian fungsi event callback dapat dilakukan dengan satu langkah dalam satu lokasi di dalam kode.
jQuery juga dikembangkan untuk mendayagunakan berbagai fungsionalitas JavaScript yang paling sering
dipakai (misalnya: fade in atau fade out ketika menentukan visibilitas elemen, juga bermacam animasi
yang dimunculkan dengan memanipulasi properti-properti
CSS).
Keuntungan dari pemanfaatan jQuery antara lain:
Memisahkan JavaScript dan HTML → Tanpa menggunakan atribut- atribut HTML untuk memanggil
fungsi Javascript dalam penanganan event, jQuery bisa dipergunakan untuk menangani event
dengan script JS saja.
Singkat dan Jelas → jQuery mengutamakan penulisan kode yang singkat dan jelas melalui berbagi fitur
seperti fungsi- fungsi yang dapat dirangkaikan ( chain- able ) dan nama-nama fungsi yang pendek.
Mengatasi masalah
kompatibilitas antar-browser → JavaScript engine pada berbagai browser memiliki perbedaan satu sama
lain, sehingga script yang berjalan pada suatu browser bisa gagal pada browser lainnya. jQuery mengatasi
segala inkonsistensi antar-browser tersebut dan menyajikan antarmuka yang konsisten bekerja pada
semua browser.
Ekstensibel → jQuery menjadikan pengembangan framework sangat simpel.
Berbagai event, elemen, dan metode baru dapat dengan mudah ditambahkan dan digunakan ulang sebagai
plugin.
Fitur-fitur jQuery
jQuery memiliki fitur-fitur sebagai berikut:
Penyeleksian elemen-elemen DOM menggunakan selector engine Sizzle.
Sizzle merupakan perangkat lunak multiplatform sumber terbuka yang berawal sebagai proyek sampingan
jQuery.
Manipulasi DOM berdasarkan selektor CSS yang memanfaatkan nama-nama dan atribut elemen,
misalnya id dan class, sebagai kriteria seleksi simpul-simpul DOM. Events
Efek dan animasi AJAX
Obyek-obyek deferred and promose untuk mengontrol pemrosesan asinkron
Penguraian JSON
Ekstensibilitas melalui plugin sejumlah utilitas, misalnya: informasi agen pengguna (user agent ), deteksi
fitur perangkat
Metode-metode kompatibilitas yang tersedia secara bawaan pada browser-browser modern, namun
membutuhkan pencadangan pada browser yang lebih tua, misalnya ` inArray() ` dan `each `
Dukungan multi-browser
Browser yang Didukung jQuery Baik versi 1.x maupun 2.x dari jQuery, keduanya mendukung “current-1
versions” (artinya versi stable terkini dari sebuah browser dan satu versi yang mendahuluinya) untuk
Firefox, Google Chrome , Safari , dan Opera . Versi 1.x juga mendukung IE 6 atau diatasnya.
Sedangkan versi 2.x tidak lagi mendukung Internet Explorer 6 sampai 8 (yang mewakili kurang dari 28%
dari seluruh browser yang digunakan) dan hanya mendukung IE 9 dan selanjutnya.
Penggunaan jQuery
o Menautkan library
Library jQuery adalah sebuah file JavaScript yang memuat seluruh fungsi-fungsi umum DOM, event,
efek, dan Ajax. File ini bisa ditautkan dalam sebuah laman web ke salinan pada server lokal atau pada
salinan yang disajikan melalui server publik (CDN) antara lain:
MaxCDN
Microsoft ASP.NET
cdnJs
jsDelivr
Untuk menautkan file jQuery pada server lokal,gunakan kode berikut:
<script src="jquery.js"></
script>
Untuk menggunakan CDN, sisipkan kode berikut:
<script src="//
code.jquery.com/
jquery-2.1.1.min.js"></
script>
Gaya Penggunaan jQuery memiliki dua gaya penggunaan:
Via fungsi $ → adalah factory method untuk obyek jQuery. Fungsi-fungsi semacam ini, kerap disebut
sebagai commands (perintah), dapat dirangkaikan ( chainable) sebab masing- masing menyajikan obyek.
Via fungsi $.-prefiks → fungsi-fungsi utilitas yang tidak dijalankan secara langsung pada obyek. Pada
penggunaan tipikal, akses dan manipulasi atas
simpul-simpul DOM diawali dengan pemanggilan fungsi $ menggunakan string selektor CSS. Metode ini
menghasilkan sebuah obyek jQuery yang merujuk pada elemen-elemen HTML yang sesuai.
Sebagai contoh, $(“div.namaclass”) akan menghasilkan obyek dengan tipe “div” dan class “namaclass”.
Simpul ini dapat dimanipulasi dengan menyambungkan satu atau beberapa fungsi jQuery di belakangnya.
Mode No-Conflict
jQuery juga memuat mode .noConflict() yang melepaskan kontrol dari $ . Fitur ini sangat berguna jika
jQuery digunakan bersama dengan library lainnya yang juga memakai penanda $ .
Pada mode no-conflict , kita bisa menggunakan jQuery sebagai pengganti dari $ tanpa kehilangan
fungsionalitasnya.
Sejarah jquery
Petama kali dibuat oleh John Resig pada tahun 2005, JQuery sendiri pertama kali dirilis tanggal 14
Januari 2006. Dan versi terbaru dari JQuery udah sampe versi 1.3.2. Dia terinspirasi dari Behavior code.
Saat itu, Dia ngerasa hasil dari Behavior Code tidak elegan dan masih jelek, maka dikembangkannya
JQuery. Dimana dengan penulisan code JQuery jadi lebih simple, gampang dan tentunya dengan hasil
yang memuaskan. jQuery adalah library JavaScript OpenSource yang menekankan pada interaksi antara
JavaScript dan HTML. Apa bedanya dengan situs-situs yang tidak menggunakan JQuery? banyak
bedanya, misalnya browser seakan tidak merefresh sebuah page ketika kita men-submit sebuah data
kedalam server mereka. Dan lebih hebatnya lagi JQuery mempunyai animasi tanpa menggunakan
flash(.swf), jadi lebih cepeat diload didalam browser dan tanpa harus install plugins.
Jquery adalah kumpulan beberapa kode yang siap dipakai untuk mempermudah dan mempercepat
dalam pembuatan kode Javascript. Yang awalnya menggunakan kode yang sangat panjang namun
dengan mengggunakan jquery kita bisa langsung memanggil fungsi yang terdapat dalam Library
tersebut. Jadi intinya jquery itu menyederhanakan kode Javascript sesuai dengan slogannya yaitu
”Write less, do more”.
Pengertian lain dari jquery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada
interaksi antara JavaScript dan HTML. jQuery ukuran nya cukup kecil, sehingga tidak memperlambat
proses loading halaman web yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah
penting adalah jQuery bisa berjalan di semua browser – cross browser.
jQuery diluncurkan pada Januari 2006 oleh John Resig. jQuery adalah library Javascript yang paling
populer saat ini. Karena kecanggihan nya, jQuery dipakai oleh perusahaan besar seperti Google. Dell,
CBS, digg, Netflix, Bank of America, Mozilla, Drupal, dsb.
jQuery adalah library Javascript yang gratis dan open source. Oleh karena nya kita bisa menggunakan
jQuery dengan bebas untuk keperluan pengembangan website kita. Tanpa library seperti jQuery,
menerapkan Javascript mungkin akan lebih sulit, terutama untuk pemula yang baru belajar Javascript.
Plugin tambahan seperti JQuery UI (user interface) semakin memudahkan kita mengembangkan website
yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang makin memperkaya kemampuan
jQuery. Dengan semakin berkembangnya JQuery, semakin memudahkan pula untuk para web
programmer membuat website yang cantik dan dinamis. Nah, kenapa JQuery banyak digunakan, salah
satunya adalah JQuery mampu menampilkan animasi-animasi semisal slideshow, datepicker,
autocomplete, dan masih banyak lagi tapi tanpa membuat suatu website itu terlihat berat atau memakan
waktu lama untuk diload.
File jQuery adalah library Javascript dasarnya. Ini perubahan cara pengembang menulis Javascript karena
menangani banyak fitur utama yang digunakan oleh pengembang Javascript. Coding untuk hal-hal seperti
event handler dan animasi menjadi jauh lebih mudah melalui penggunaan jQuery karena memerlukan
sedikit coding.
Perpustakaan Jquery dapat dimuat dengan cepat dan diimplementasikan langsung untuk script website
yang dapat digunakan waktu dan waktu lagi. Ini adalah batu loncatan yang besar di bidang efisiensi
pemrograman yang agak mudah dipelajari. Sebagian besar proses belajar didasarkan pada tutorial yang
menunjukkan bagaimana memanipulasi pengembang HMTL, CSS, dan kode Ajax.
Ketika jQuery adalah menggunakan referensi skrip file jquery.js. Perpustakaan ini adalah open source,
yang berarti bahwa hal itu dapat dimodifikasi oleh pengembang untuk memenuhi kebutuhan spesifik
untuk situs Web tertentu. File ini berisi semua model objek dokumen (DOM), dan ini menyederhanakan
fungsi untuk cross-browser dan lintas- bahasa kompatibilitas.
Waktu pengembangan yang lebih cepat juga merupakan salah satu hal yang dikaitkan dengan
pengembangan halaman web jQuery. Ini adalah sisi klien Ajax kerangka yang mendukung semua
teknologi sisi server pengembangan aplikasi web. Hal ini memungkinkan pengembang untuk menulis
kode kurang untuk melakukan fungsi yang sama lebih cepat. Hal ini bahkan dapat lebih baik ketika
digunakan untuk mengedit kode yang sudah ada.
Plugin untuk jQuery telah menjadi cukup menjadi di antara para pengembang karena banyak dari mereka
menawarkan kesempatan untuk menambahkan dimensi yang berbeda untuk halaman web. Setelah sumber
file jQuery telah dimuat, salah satu perintah yang paling berguna adalah fungsi dokumen yang register
acara siap. Hal ini pada titik ini bahwa pengguna dapat mulai menambahkan acara.
Bahasa adalah salah satu sederhana karena banyak peristiwa yang digunakan diberi nama dengan cara
deskriptif yang bertepatan dengan perintah. Pengembang yang ingin menggunakan fungsi keluar
memudar, misalnya, dapat menggunakan fadeOut jQuery () perintah untuk memulai dengan ini. Sama
bekerja untuk menyembunyikan dan perintah menghidupkan yang digunakan oleh pengembang jQuery.
Ada banyak fungsi lainnya banyak digunakan untuk Cascading style sheet juga. Sintaks untuk CSS adalah
sebagai berikut: css (). Ini memberi Anda berbagai pilihan karena memiliki tiga opsi sintaks yang berbeda
yang dapat digunakan untuk melakukan fungsi yang berbeda. Ada css (nama) fungsi yang
mengembalikan nilai properti CSS, ada juga css (nama, nilai) fungsi yang menetapkan properti dan nilai.
Terakhir, ada CSS ({properti}) yang menetapkan beberapa properti dan nilai- nilai. Fungsi-fungsi ini
ideal karena mereka mengijinkan pengguna untuk menambahkan tingkat tertentu dari kode untuk proyek-
proyek mereka.
Ini adalah salah satu alat scripting terpanas untuk pengembangan web yang mengikuti pola dari
komunitas kode open source. JQuery dipecah dalam istilah yang sangat sederhana dengan fungsi kata
kunci sebagai identifier objek yang namanya $. Pengembang yang mampu mengikuti dan mengedit array
tutorial seharusnya tidak memiliki masalah menggunakan kode berorientasi obyek. Ini jelas membuat
pengembangan lebih mudah bagi mereka yang mengetahui JavaScript
Keunggulan jquery
Mempunyai daya akses yang sangat cepat Karena hanya terdiri dari satu file saja dan ukurannya pun
sangat kecil berkisar 20Kb
Bersifat kompatibel/ cocok dengan banyak browser popular di dunia
Mempunyai banyak komunitas yang besar dan selalu aktif serta dokumentasi yang lengkap
Banyaknya plugin yang disediakan secara cuma-Cuma (gratis ). Plugin adalah kemampuan tambahan
yang bisa disertakan pada Jquery
Terdapat Jquery yang berlisensi GNU atau yang dikenal dengan free. Maka kita menggunakannya dengan
tanpa dikenakan biaya apapun
Terdapat API( Application Programming Interface) di dalamnya
Mendukung Ajax ( Asynchronous Javasctip and XML)
Telah banyak digunakan oleh website-website dunia sebut saja Google, twitter, facebook dan lain-lain.
Bersifat kompatibel dengan semua versi CSS dari yang versi 1 sampai versi 3
Mempunyai tutorial, dokumentasi dan contoh-contoh yang lengkap yang bisa kita ketahui dengan
membuka halaman website nya jquery.
Lebih banyak digunakan oleh para developer web dibandingkan dengan Javascript lainnya “ write less, do
more” sedikit menulis tapi banyak bekerja
Menyederhanakan penggunaan javascript, karena kita cukup menggunakan fungsi dari library javascropt
yang ada. Juga mempercepat coding javascript dalam sebuah website. Dibandingkan bila kita harus mulai
sebuah script javascript satu per satu dari nol. Support terhadap CSS1-3 selector, untuk fleksibilitas
desain antar muka halaman website dan interaksinya Halaman website/blog yang dibangun dengan
jQuery akan lebih interaktif dan menarik, membuat para pengunjung lebih terkesan.
Kekurangan jQuery
1. Meskipun diklaim jquery memiliki beban kerja yang ringan (load CPU dan RAM) untuk browser, tetap
saja lebih ringan (cepat di-load) website yang tidak menggunakan jquery, alias HTML murni.
2. Dari sisi server hosting pun, CPU dan RAM harus mengalokasikan resource yang mereka miliki untuk
menangani request terhadap jquery. Pada level tertentu request yang sangat banyak (sangat-sangat
banyak) akan membebani server. Solusi: host jquery pada situs lain, seperti Google yang menyediakan
request jquery dari servernya.
Kemampuan yang dimiliki jQuery
1. Mempermudah akses dan manipulasi elemen tertentu pada dokumen.
Biasanya diperlukan baris program yang cukup panjang untuk mengakses suatu elemen dokumen .
Namun , jQuery dapat melakukannya hanya dalam beberapa baris program saja. Karena jQuery
menpunyai Selector yang sangat efisien untuk mengakses suatu elemen tertentu pada dokumen yang
selanjutnya bisa dimanipulasi sesuai dengan keinginan kita.
2. Mempermudah modifikasi/perubahan tampilan halaman web. Biasanya untuk memodifikasi tampilan
halaman web digunakan CSS. Permasalahannya, CSS sangat dipengaruhi oleh web browser yang
digunakan sehingga Sering terjadi halaman web yang dibuat sudah rapi dan bagus tampilannyadi browser
Mozilla, namun ketika ditampilkan di Opera menjadi berantakan. Namun, jQuery dapat menyesuaikan
style CSS pada semua browser, sehingga permasalahann tersebut dapat dihindari.
3. Mempersingkat Ajax ( Asynchronous Javascript and XML) Kemampuan favorit dari Ajex adalah
mampu mengambil informasi dari server tanpa melakukan refresh pada halaman web, artinya halaman
web terlihat berganti secara otomatis.
Apabila kita menuliskan kode Ajax secara manual, biasanya diperlukan baris yang cukup panjang, namun
jQuery dapat mempersingkatnya menggunakan Ajax cell, perbandingan 25 baris kode Ajax dapat
disingkat menjadi 5 baris kode aja kita menggunakan jQuery.
4. Memiliki API ( Application Programming Interface )
Dengan API, jQuery dapat memanipulasi content pada suatu halaman web, seperti pengubahan teks,
manipulasi gambar ( resize,rotate,crop ), penyusunan daftar (list), pengurutan list, paging, dan lain-lain.
5. Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.
6. Menyediakan fasilitas untuk membuat animasi sekelas Flash dengan mudah.
Ragam Kreasi jQuery
1. Use jquery to “turn off the lights” while watching videos
2. 3D sphere using jquery
3. Animate curtains opening with jquery
4. Quick tip – resizing images on browser window size
5. Sliding boxes and captains with jquery Creating a fading header Jcaption jquery image captains with
customizable mark up, style, and animation.
Kegunaan dari jQuery
1. Dokumentasi yang baik
Dokumentasi yang disediakan pada web jQueryMobile sangatlah mudah dipahami. Di bagian awal akan
dijelaskan bagaimana langkah-langkah untuk memulai menggunakan jQueryMobile. Dengan pengetahuan
dasar HTML saja, seseorang akan cepat memahami tutorial yang ada didalamnya. Selain itu, dokumentasi
juga dikemas dalam bentuk yang menyenangkan, yaitu dengan melampirkan contoh tampilan yang
dihasilkan.
Pada halaman resources web jQueryMobile, banyak sekali informasi yang didapatkan seputar tutorial,
plugins, extension, tools pengambangan, ebook, dsb. yang bisa digunakan sebagai panduan.
2. Mendesain Template dengan ThemeRoller
Pengguna jQueryMobile akan dimanjakan dengan fasilitas Themeroller. Themeroller merupakan fasilitas
yang disediakan oleh jQueryMobile untuk mengganti warna dasar desain tampilan sesuai kebutuhan
dengan cara drag & drop. Script hasil modifikasi yang dihasilkan pun dapat diunduh untuk dapat
dikembangkan lebih lanjut. Uniknya, themes untuk tampilan jQueryMobile dapat terdiri dari beberapa
kombinasi, sehingga untuk menggunakan jenis themes yang dipilih cukup dipanggil nama class dalam
HTML yang bersesuaian.
3. Fitur-fitur terbaik
jQueryMobile dikembangkan dengan core jQuery yang terkenal dengan desain UI nya yang ringan dan
lembut, sehingga bisa menggantikan teknologi flash. Kemampuan yang baik untuk layar sentuh seperti
pada perangkat-perangkat dengan browser iOS, Android, Blackberry, Palm WebOS, Nokia/ Symbian,
Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, dan lainnya menambah
daya tarik jQueryMobile. JQueryMobile juga telah menggunakan markup dasar HTML5 dan CSS3.
Desain tampilan yang responsive sangat membantu ketika ditampilkan pada smartphone yang mendukung
fitur accelorometer (tampilan otomatis vertikal/ horizontal)
4. jQueryMobile Maps
Penggunaan peta (maps) dalam perangkat bergerak sangatlah penting. Para pengembang jQueryMobile
juga telah menyiasati hal tersebut dengan mulai membuat dokumentasi cara menampilkan maps untuk
tujuan tertentu. Tutorial dan contoh aplikasi jQueryMobile Maps dapat dipelajari pada halaman ini:
http://jquery-ui-map.googlecode.com/svn/trunk/demos/ jquery-google-maps-mobile.html . Sebagai
tambahan, jenis maps yang digunakan pada tutorial tersebut telah menggunakan Google Maps v3, yang
merupakan versi Google Maps terbaru.
7. Cara menggunakan jQuery
1. Ok pertama - tama adalah kita harus mendownload terlebih dahulu jQuery Library (inti dari jQuery).
Dimana download jQuery Library? Downloadnya di www.jquery.com , silahkan klik Download jQuery.
Saat penulisan tutorial ini library jQuery telah sampai versi 1.9.1 gambar : screenshot website jquery.com
2. Pada halaman selanjutnya pilih versi jquery, ada versi Production dan versi Developer. Untuk saat ini
pilih versi Production jQuery karena versi Developer ditujukan kepada para master pemrograman dan
pengembang
jquery.
gambar :
Catatan :
jQuery selalu merilis dua versi Library yaitu versi Production dan Development. Perbedaannya adalah
versi Production ukuran filenya lebih kecil karena telah 'dimampatkan' atau istilahnya di Compress.
Diperuntukkan bagi pengguna awam yang ingin langsung menggunakan jQuery. Sedangkan versi
Development isi filenya mudah dibaca karena belum di Compress dan ditujukan unruk para Developer
yang tertarik mempelajari – memanipulasi - bahkan mengembangkan fungsi - fungsi yang dimiliki oleh
jQuery.
3. Akan muncul code dari library JQuery gambar : jquery code library Klik CTRL + S di keyboard untuk
menyimpan kode tersebut ke direktori website anda
gambar : save jquery lib pada direktori website
4. Ok sekarang adalah kode untuk memanggil jQuery library supaya dapat terLOAD di website yang anda
buat.
Buka dreamweaver dan masukkan kodenya.
Scriptnya yang saya cetak tebal merah :
gambar : script pemanggil jQuery
5. Ok sekarang cara Penggunaannya, inti dari
jQuery adalah :
A) Panggil / Load library jQuery (stabile merah)
B) buat script jquery di bagian head untuk mengontrol object berdasarkan elementnya (stabilo biru)
C) Buat Object beserta elemennya berupa id dan class di bagian body (stabilo abu - abu)
gambar : inti dari jQuery
Cara membuat website sederhana dengan jquery
` Langkah-langkahnya sebagai berikut :
Download terlebih dahulu jquery.js yang ada di http://
jquery.com/ di link ini http://code.jquery.com/
jquery-1.4.2.min.js atau http://code.jquery.com/jquery-1.4.2.js .
Perbedaan antara link pertama dan kedua adalah link pertama “yang jquery-1.4.2.min.js” merupakan versi
compress dari yang versi development “jquery-1.4.2.js”. Jadi pada dasarnya Anda hanya membutuhkan
satu jenis saja untuk digunakan. Saran saya, gunakanlah yang versi development (yang kedua) supaya
lebih mudah untuk dibaca Setelah itu persiapkan editor yang sering anda gunakan, seperti notepad,
notepad++, scite, netbeans, ataupun eclipse. Kali ini saya akan menggunakan notepad++ saja.
Buatlah file baru berekstensi .html dan jangan lupa file jquery-1.4.2.js ada pada kali ini, saya memberi
nama filenya jquery-latihan.html. kemudian buka jquery-latihan.html tersebut dengan editor anda dan
buat template code html biasa (tag html, head, body) Selanjutnya kita harus meload javascript yang akan
kita gunakan. Dalam hal ini yaitu jquery-1.4.2.js. Tambahkan di dalam tag headnya
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
</head>
Tahap persiapan telah selesai, sekarang saatnya kita masuk tahap main2 dengan jquery
Selanjutnya tambahkan script di bagian head seperti dibawah ini
:
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>
//code ini akan dieksekusi ketika halaman ini di load pertama kali
$(document).ready(function(){
//kode-kode lainnya
});
</script>
</head>
Source code “$(document).ready(function(){});” pada jquery sama halnya seperti code window.onload
pada javascript biasa. Fungsi ini akan dipanggil ketika halaman html ini di load oleh browser.
Nah, nantinya kode-kode jquery kita akan diletakan di dalam situ deh.
$(document).ready(function(){ //disini});. “disini” –> tempat dimana anda dapat menambahkan script-
script lainnya. Sekarang saya akan coba mengambil text dari body. Sebelumnya, tambahkan di dalam tag
<body> sebuah kalimat
apa saja. Contoh :
<body>
Hello World!
</body>
Kemudian tambahkan di tag scriptnya sehingga menjadi seperti ini :
<script type="text/javascript">
//code ini akan dieksekusi ketika halaman ini di load pertama kali
$(document).ready(function(){
//kode-kode lainnya
var text = $("body").text(); //deklarasi dan inisialisasi
variable text
alert(text); //menampilkan windows alert
});
</script>
Cukup mudah bukan :). Sekarang coba anda save dan jalankan jquery-latihan di browser anda. Ketika di
load pertama kali, maka akan muncul windows alert”.
Yang menampilkan “Hello World!
Perhatikan baris $(“body”).text(), $(“body”) merupakan salah satu contoh “Selector” terhadap suatu tag
html (body).
Keterangan lebih lengkap mengenai selectors di jquery ada disini
: http://docs.jquery.com/Selectors . Kemudian .text() bermakna mengambil semua text dalam suatu
“selectors” tertentu, dalam hal ini adalah body. Kemudian hasilnya (bertipe string) disimpan dalam
variable bernama text dan ditampilkan kelayar dengan fungsi alert bawaan javascript. “alert” bukan
fungsi jquery tapi fungsi “native” javascript. Cobalah anda load halaman html anda, maka akan muncul
alert yang isinya text dalam tag body anda.
Sekarang kita akan mencoba mengubah css dari body dengan jquery. Referensi, silakan baca
http://api.jquery.com/css/ . Ubah
code menjadi seperti berikut.
<script type="text/javascript">
//code ini akan dieksekusi ketika halaman ini di load pertama kali
$(document).ready(function(){
//kode-kode lainnya
var text = $("body").text();
alert(text);
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Tambahkan yang di bold ya. Sebetulnya sama konsepnya seperti yang awal. Hanya saja kali ini kita
mengubah cssnya. Dalam contoh kali ini saya mengubah warna background belakang dari body dan
warna tulisan yang ada di body. Maka sourcenya akan seperti yang ditunjukkan seperti yang diatas.
Source code lengkapnya sebagai berikut.
Maka akan muncul perubahan ketika anda meload htmlnya.
Silakan dicoba Maksud dari $(“body”).css(“background- color”,”black”); adalah mengubah background-
color dari tag
body dengan warna “black”. Pengertian yang sama dengan $(“body”).css(“color”,”white”);
Sekarang kita akan latihan event handler di jquery. Kalau di javascript itu contohnya seperti .onclick,
onload, onblur, dll.
Referensi : http://docs.jquery.com/Events Source codenya.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//code ini akan dieksekusi ketika halaman ini di load pertama kali
$(document).ready(function(){
//kode-kode lainnya
var text = $("body").text();
alert(text);
$("body").css("background-color","black");
$("body").css("color","white");
$("#idButton").click(
function()
{
alert("button dengan id di click");
}
);
$(".clsButton").click(
function()
{
alert("button dengan calss di click");
}
);
});
</script>
</head>
<body>
hello world
<button id="idButton"> coba klik saya</button>
<button class="clsButton"> coba klik saya</button>
</body>
</html>
Screen shotnya
Hasilnya.
Hal yang perlu diperhatikan : selectors untuk class dan id.
Untuk class –> $(“.[classname])….., ada ‘titik’ di depan nama kelasnya, untuk id –> $(“#……”)…. Ada
‘pagar’ didepan nama idnya. Sebetulnya konsepnya sama seperti css bukan –>.
Untuk event di jquery anda dapat melihatnya di http://docs.jquery.com/Events
Salah satu yang menarik dari jquery adalah fungsi animasi yang disediakan. Anda dapat melihatnya di
http://docs.jquery.com/
Effects untuk panduan dokumentasinya. Berikut contoh source codenya.
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
//code ini akan dieksekusi ketika halaman ini di load pertama kali
$(document).ready(function(){
//kode-kode lainnya
var text = $("body").text();
alert(text);
//mengubah css
$("body").css("background-color","black");
$("body").css("color","white");
//event handler
$("#idButton").click(
function()
{
//event jika button di klik
alert("button dengan id di click");
}
);
//event handler
$(".clsButton").click(
function()
{
//event jika button di klik
alert("button dengan calss di click");
}
);
//event handler
$("#hide").click(
function()
{
//hilangkan div id animated secara perlahan2
$("#animated").fadeOut('slow', function() {
alert("udh selesai animasinya");
});
//atau (tanpa ada pesan selesainya <img src
" alt=":)" class="wp-smiley"> )
//$("#animated").fadeOut('slow');
}
);
});
</script>
</head>
<body>
hello world
<button id="idButton"> coba klik saya</button>
<button class="clsButton"> coba klik saya</button>
<div id="animated">
lorem ipsum lorem ipsum
lorem ipsum lorem ipsum
lorem ipsum lorem ipsum
lorem ipsum lorem ipsum
</div>
<button id="hide"> sembunyikan saya</button>
</body>
</html>
Perhatikan source code yang saya tambahkan (di bold). Saya menambahkan suatu div dan suatu button
yang jika di klik maka div akan perlahan-lahan hilang (fadeout). Untuk itu saya menambahkan event
handler pada button dengan id “hide” yaitu $(“#hide”).click(function () { …. dan menghilangkannya
dengan fungsi fadeOut(‘slow’, function() { ….. atau fadeout (‘slow’) saja. Keterangan lebih rinci
mengenai fadeout, dan animasi-animasi lainnya anda dapat liat di dokumentasi.
Perbedaan jquery dengan javascript
Perbedaan dari definisi javascript dan jquery Javascript adalah bahasa pemrograman yang dirancang
untuk berjalan di lingkungan klien yang dikombinasikan dengan dokumen HTML. Javascript dijalankan
dengan bantuan browser sehingga dapat melakukan interaksi dengan user, melakukan kontrol browser
dan memanipulasi dokumen web saat ditampilkan.
Sedangkan jquery adalah komponen/librari/ framework yang dibuat dari javascript dengan tujuan
memudahkan seorang programmer dalam menggunakan fungsi- fungsi yang lebih rumit. Dengan jquery,
seorang programmer bisa lebih leluasa dan mudah melakukan kontrol/manipulasi halaman web. Oleh
karena kemudahan tersebut jquery memiliki semboyan "write less, do more" yang bisa kita artikan
dengan sedikit menulis kode tapi dapat melakukan banyak hal.
Jquery dibangun dengan berorientasi objek sehingga akan lebih optimal dan memiliki kemampuan yang
lebih luas untuk menciptakan serta memanipulasi halaman web yang dikirimkan ke browser pengguna.
Mari kita lihat bagaimana penulisan javascript dan javascript untuk melakukan sebuah manipulasi
background dokumen html berikut :
<script language="javascript">
function changeBackground(color)
{
document.body.style.background = color;
}
onload="changeBackground('red');"
</script>
<script>
$('body').css('background', '#ccc');
</script>
Dari script diatas bisa anda lihat, bahwa jquery lebih bepusat pada objek sehingga cara melakukan
perubahannya akan lebih sederhana.
- See more at: http://www.zainalhakim.web.id/posting/
perbedaan-javascript-dan-jquery.html#sthash.JL5MyJG0.dpuf
Jquery adalah kumpulan beberapa kode yang siap dipakai untuk mempermudah dan mempercepat dalam
pembuatan kode Javascript
Jadi intinya jquery itu menyederhanakan kode Javascript sesuai dengan slogannya yaitu ”Write less, do
more”.
Pengertian lain dari jquery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada
interaksi antara
JavaScript dan HTML. Jquery terdapat banyak eklebihan dan kekurangan di dalamnya. Jquery juga
mempunyai beragam jenis kreasi yaitu terdapat 7 ragam. Jika dilihat cara kerja dari jquery pun
kelihatannya tidak terlalu sulit.
HTML
Hyper Text Markup Language (HTML) adalah sebuah
bahasa markah yang digunakan untuk membuat sebuah
halaman web, menampilkan berbagai informasi di dalam
sebuah penjelajah web Internet dan pemformatan
hiperteks sederhana yang ditulis dalam berkas format
ASCII agar dapat menghasilkan tampilan wujud yang
terintegerasi. Dengan kata lain, berkas yang dibuat
dalam perangkat lunak pengolah kata dan disimpan
dalam format ASCII normal sehingga menjadi halaman
web dengan perintah-perintah HTML. Bermula dari sebuah
bahasa yang sebelumnya banyak digunakan di dunia
penerbitan dan percetakan yang disebut dengan SGML
( Standard Generalized Markup Language )
HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web. HTML saat ini merupakan
standar Internet yang didefinisikan dan dikendalikan
penggunaannya oleh World Wide Web Consortium (W3C).
H2TML dibuat oleh kolaborasi Caillau TIM dengan Berners-
lee Robert ketika mereka bekerja di CERN pada tahun
1989 (CERN adalah lembaga penelitian fisika energi tinggi
di Jenewa). [1]
a. Sejaran HTML dan Perkembangannya
Pada waktu itu, tahun 1969, ketika Department US, DAPRA,
mengadakan riset tentang bagaimana cara menggabung kankomputer sehingga terbentuk menjadi
jaringan yang
organik. Lalu, riset ini sering disebut dengan ARPANET.
Pada tahun 1972, keberhasilan seorang bernama Roy
Tomlinson dalam melengkapi Program e-mail yang dia
ciptakan sendiri. Tidak dipungkiri e-mail menjadi sangat
terkenal bahkan sangat popular sampai sekarang. Sehingga
pada akhirnya, jaringan ARPANE terus dikembangkan sampai ke Amerika
Menurut sejarahnya internet juga merupakan pemikiran-
pemikiran para ahli yang sangat inovatif dan dampaknya
sangat besar bagi pekembangan dunia. Melihat begitu
banyaknya kapasitas serta layanan yang luas, sungguh
dapat menjangkau seluruh daerah pelosok yang ada di
dunia ini.
Nah, untuk mengetahui lebih lanjut mengenai layanan
komputer ini, kita akan membahas beberapa pengertian
para ahli tentang internet, diantaranya adalah sebagai
berikut.
Salah satu ahli, seperti Lani Sidharta, menyatakan bahwa
internet adalah suatu interkoneksi sebuah jaringan
komputer yang dapat memberikan layanan informasi secara
lengkap. Dan, terbukti bahwa internet dilihat sebagai media
maya yang dapat menjadi rekan bisnis, politik, sampai
hiburan. Semuanya tersaji lengkap di dalam media ini.
Ada juga para ahli, seperti Khoe yao tung, yang
menyatakan bahwa intenet adalah jaringan yang satelit
komunikasi yang fungsinya sangat beragam dan tentu
merupakan pendukung internet di seluruh dunia.
Sedangkan pengertian internet menurut para ahli wikipedia
yang tidak diketahui namanya adalah merupakan, bentuk
rangkaian komputer yang saling berhubungan ke beberapa
rangkaian yang menggunakan TCP dan rangkaian tersebut
merupakan packet switching communication protocol. Nah,
dengan demikian, maka rangkaian tersebut disebut
dengan jaringan terbesar yang dinamakan internet atau yang dinamakan dengan internet working.
Sejarah html berawal pada tahun 1980, ketika IBM berniat
membuat bahasa kode untuk menggabungkan teks dengan
perintah pemformatan agar mengenali elemen dokumen.
Bahasa yang menggunakan tanda-tanda ini dinamakan
markup language , sedangkan IBM memberinya nama
Generalized Markup Language (GML).
Namun, pada tahun 1986, ISO mengeluarkan standarisasi
bahasa markup berdasarkan GML dengan nama Standard
Generalized Markup Language (SGML). Bahasa SGML ini
kemudian banyak digunakan di dunia penerbitan dan
percetakan.
Pada tahun 1989, Caillau Tim bekerja sama dengan Barners
Lee Robert, ketika mereka bekerja di CERN, sebuah lembaga
penelitian fisika energi tinggi di Jenewa, mencoba
mengembangkan SGML.
Dari merekalah lahir HTML atau hyper text markup
language, yang digunakan untuk membuat halaman website.
HTML dipopulerkan pertama kali oleh browser mosaik.
Mosaic merupakan hasil dari sebuah penelitian yang lebih
baik, karena memudahkan pengguna dalam
pengoperasiannya juga sudah berbasis grafik. Kemudian,
kepopuleran Mosaic digantikan oleh Netscape Navigator
ciptaan Silicon Graphics. Microsoft juga ikut meramaikan
hadirnya web browser bernama Internet Explorer.
Sejak tahun 1990, bahasa pemformatan ini mengalami
perkembangan yang sangat pesat. Apalagi sejak tahun 1996,
World Wide Web Consortium (W3C) turut mengembangkan
html dan mengeluarkan versi html 3.2. Sejak saat itu, html
digunakan sebagai bahasa standar internet yang
dikendalikan penggunaannya oleh W3C.
Pada 1994, Netscape Navigator merupakan web browser yang
banyak digunakan selain Internet Exploer.
Struktur HTML
Dengan web browser seperti Netscape, Internet Explorer,
Mozilla Firefox atau Opera, kita akan mendapatkan
tampilan situs yang penuh warna, bisa melihat cuplikan
video dan suara asalkan komputer kita mempunyai fasilitas
tambahan berupa VGA card dan sound card.
Tujuan utama dari web browser adalah untuk membawa
sumber informasi kepada pengguna. Proses ini dimulai
ketika pengguna memasukkan sebuah Uniform Resource
Identifier (URL), misalnya, http://anneahira.com ke dalam
browser.
Sumber yang telah diambil web browser akan ditampilkan.
HTML ditampilkan ke mesin tata letak browser dan akan
diubah dari markup ke dokumen interaktif. Selain dari
HTML, web browser umumnya bisa menampilkan setiap jenis
konten yang menjadi bagian dari suatu halaman web.
Html sendiri sebenarnya bukan merupakan bahasa
pemprograman, melainkan kode pemformatan sederhana
yang ditulis dan disimpan dalam format Ascii . Melalui kode
yang dinamakan tag, sebuah dokumen Ascii dapat
ditampilkan sebagai home page melalui penjelajah web
internet, seperti Internet Explorer, Mozilla , ataupun
Chrome . Tag ditulis dengan memberikan tanda lebih kecil ().
Memahami pengertian web browser harus juga memahami
tentang rinciannya. Kita semua tahu apa itu web browser
seperti yang terlihat, tapi ada baiknya untuk mengetahui
rincian lengkap dari berbagai bagian browser web. Bagian-
bagian dari browser termasuk sebagai berikut.
ㆍ Status Bar. Ini adalah kotak di bagian bawah jendela
browser Anda. Status bar menampilkan beban dan url dari alamat yang sedang ditunjuk oleh
mouse.
ddress Bar. Ini adalah kotak di bagian atas jendela
browser Anda yang menampilkan seluruh URL atau alamat
situs web.
ㆍ Title Bar. Bar judul ada di bagian paling atas jendela
browser Anda. Anda akan melihat judul halaman web di
sana, misalnya Anda akan melihat "Anne Ahira untuk
Indonesia" ketika Anda membuka situs anneahira.com.
ㆍ Toolbar Ikon. Toolbar dan ikon perusahaan browser yang
ada di bagian atas kanan jendela browser Anda, di bawah
Title Bar. Di sinilah Anda akan melihat tombol Back, tombol
Home, tombol Refresh, dll.
ㆍDisplay Window. Jendela Display hanyalah istilah mewah
untuk ruang kerja browser Anda. Ini berupa frame di mana
Anda melihat halaman website.
Scroll Bar. Jika ketika Anda membuka situs web dan Anda
harus "scroll ke bawah" untuk membaca sesuatu, maka
Anda telah menggunakan scroll bar
Website itu sendiri terbagi menjadi dua jenis, yaitu website
statis dan website dinamis.
Website statis adalah website
yang informasi didalamnya tidak dimaksudkan untuk
diperbarui. Website ini biasanya memiliki seorang atau
sebuah tim administrator yang menangani penggunaan
software editor.
Sedangkan website dinamis adalah website yang informasi di
dalamnya diperbarui secara berkala. Penggunaan website ini
biasanya berhubungan dengan pengguna publik yang
membutuhkan interaksi dua arah (antara administrator
website dengan pengguna).
Misalkan, kita mengisi sebuah form, setelah kita klik
submit, halaman website akan terhubung ke halaman baru
yang menerangkan informasi yang telah kita input ke form
yang kita isi sebelumnya. Beberapa web browser yang
tersedia bagi Anda yang bisa didownload secara gratis.
◆Microsoft Internet Explorer. Sebagian besar pengguna
internet menggunakan Internet Explorer karena mudah
digunakan dan sebagian besar situs web yang ditulis dengan
Internet Explorer, yang berarti bahwa mereka lebih
kompatibel.
◆Opera. Opera merupakan browser populer yang mudah
digunakan, namun memiliki beberapa masalah
kompatibilitas dengan berbagai situs.
Mozilla Firefox. Firefox adalah web browser yang cukup
cepat dalam memperoleh pengguna. Ia berada di belakang
Internet Explorer karena memiliki tabbed browsing, fitur
keamanan superior, dan akses yang cepat.
◆ Google Chrome. Google Chrome adalah web browser yang
dirancang untuk sistem Windows. Ia menawarkan desain
minimal dan 'teknologi canggih', untuk membuat akses lebih
cepat, aman, dan mudah.
◆ Mac Safari. Khusus untuk pengguna Mac, Safari adalah
pilihan yang sangat baik untuk sebuah web browser. Safari
berkemampuan akses cepat dan kompatibilitas yang baik.
Ada beberapa elemen dalam bahasa html, seperti struktur,
presentasional, hypertext, dan elemen widget.
Struktur bahasa html memperlihatkan adanya tingkatan yang
ditandai dengan tag h1, h2, h3, dan seterusnya.
Struktur inilah yang akan menginformasikan kepada
browser dalam melakukan identifikasi. Struktur ini juga
dibedakan setidaknya dalam tiga bagian yaitu bagian
kepala ( header ), tubuh ( body), dan bagian kaki ( footer).
Kegunaan html
Mengintegerasikan gambar dengan tulisan.
Membuat Pranala .
Mengintegerasikan berkas suara dan rekaman gambar
hidup.
Membuat form interaktif. [2]
HTML dokumen tersebut mirip dengan dokumen tulisan
biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat
instruksi yang ditandai dengan kode atau lebih dikenal
dengan TAG tertentu. Sebagai contoh jika ingin membuat
tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL,
maka penulisannya dilakukan dengan cara: <b>TAMPIL
TEBAL</b> . Tanda <b> digunakan untuk mengaktifkan
instruksi cetak tebal, diikuti oleh tulisan yang ingin
ditebalkan, dan diakhiri dengan tanda </b> untuk
menonaktifkan cetak tebal tersebut. HTML lebih
menekankan pada penggambaran komponen-komponen
struktur dan formating di dalam halaman web daripada
menentukan penampilannya.Sedangkan penjelajah web
digunakan untuk menginterpretasikan susunan halaman ke
gaya built-in penjelajah web dengan menggunakan jenis
tulisan, tab, warna, garis, dan perataan text yang
dikehendaki ke komputer yang menampilkan halaman web.
Salah satu hal Penting tentang eksistensi HTML adalah
tersedianya Lingua franca (bahasa Komunikasi) antar
komputer dengan kemampuan berbeda.
Pengguna Macintosh tidak dapat melihat tampilan yang
sama sebagaimana tampilan yang terlihat dalam pc berbasis
Windows. Pengguna Microsoft Windows pun tidak akan
dapat melihat tampilan yang sama sebagaimana tampilan
yang terlihat pada pengguna yang menggunakan Produk -
produk Sun Microsystems . namun demikian pengguna-
pengguna tersebut dapat melihat semua halaman web yang
telah diformat dan berisi Grafika dan Pranala .
Menyunting Format Tulisan html
HTML memungkinkan kita untuk menyunting tampilan atau
format berkas yang akan kita kirimkan melalui media
daring. Beberapa hal yang dapat dilakukan dalam
menentukan format berkas adalah :
Kita dapat menampilkan suatu kelompok kata dalam
beberapa ukuran yang dapat digunakan untuk judul,
heading dan sebagainya.
Kita dapat menampilkan tulisan dalam bentuk cetakan
tebal
Kita dapat menampilkan sekelompok kata dalam bentuk
miring
Kita dapat menampilkan naskah dalam bentuk huruf
yang mirip dengan hasil ketikan mesin ketik
Kita dapat mengubah-ubah ukuran tulisan untuk suatu
karakter tertentu.
Markah/Tanda
Secara garis besar, terdapat 4 jenis elemen dari HTML:
Struktural. Tanda yang menentukan level atau
tingkatan dari sebuah tulisan (contoh, <h1>Golf</
h1> akan memerintahkan peramban untuk
menampilkan "Golf" sebagai tulisan tebal besar yang
menunjukkan sebagai Heading 1
Presentasional. Tanda yang menentukan tampilan dari
sebuah tulisan tidak peduli dengan level dari tulisan
tersebut (contoh, <b>boldface</b> akan
menampilkan bold . Tanda presentasional saat ini sudah
mulai digantikan oleh CSS dan tidak direkomendasikan
untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian
dari dokumen tersebut atau pranala ke dokumen lain
(contoh, <a href="http://
www.wikipedia.org/"> Wikipedia</a> akan
menampilkan Wikipedia sebagai sebuah hyperlink ke
URL tertentu),
Elemen widget yang membuat objek-objek lain seperti
tombol ( <button> ), daftar ( <li> ), dan garis
horizontal ( <hr> ). Konsep hiperteks pada HTML
memungkinkan pembuatan tautan pada suatu kelompok
kata atau frasa untuk menuju ke bagian manapun dalam
World Wide Web,
Ada tiga macam pranala (link ) yang dapat digunakan:
Pranala menuju bagian lain dari page.
Pranala menuju page lain dalam satu web site.
Pranala menuju resource atau web site yang berbeda.
[4]
Selain markup presentasional , markup yang lain tidak
menentukan bagaimana tampilan dari sebuah tulisan.
Namun untuk saat ini, penggunaan tag HTML untuk
menentukan tampilan telah dianjurkan untuk mulai
ditinggalkan, dan sebagai gantinya digunakan Cascading
Style Sheets
Internet Explorer karena memiliki tabbed browsing
Contoh dokumen HTML sederhana
Untuk HT2ML 4 Strict [5]
Head
Dokumen HTML diapit oleh tag <HEAD></HEAD> . Di
dalam bagian ini biasanya dimuat tag TITLE yang
menampilkan judul halaman pada titlenya browser. Selain
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN""http://www.w3.org/TR/html4/
strict.dtd"><html>
<head bgcolor= black text=white ><title> Selamat Datang
HTML</title></head><body>
<p> Halo dunia! </p></body>
itu Bookmark juga menggunakan tag TITLE untuk memberi
mark suatu web site. Browser menyimpan “title” sebagai
bookmark dan juga untuk keperluan pencarian
(searching) biasanya title digunakan sebagai keyword.
Header juga memuat tag META yang biasanya dapat
digunakan untuk menentukan informasi tertentu
mengenai dokumen HTML. Anda bisa menentukan author
name, keywords, dan lainnya pada tag META.
Contoh:
<meta name= "author" content= "ubuntu-
online" >
Body
Bagian BODY, yang dinyatakan dengan tag <BODY>…</
BODY> , merupakan tubuh atau isi dari dokumen HTML
dimana anda meletakan informasi yang akan
ditampilkan pada browser.
Tag
HTML tidak membedakan penggunaan huruf besar
ataupun huruf kecil dari suatu elemen. Suatu elemen
HTML terdiri dari tag-tag beserta teks yang ada dalam
tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih
kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut
dengan:
Tag awal, dinyatakan dalam bentuk <nama tag>
Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama
tag>.
Contoh: untuk menampilkan teks dalam format teks
miring Teks ini terlihat miring di browser anda dengan
perintah HTML <i>Teks ini terlihat miring di
browser Anda</i>
Atribut
Tag awal bisa memiliki beberapa buah atribut yang
menyatakan karakteristik dari tag tersebut
Format Font HTML
Tag HTML untuk font adalah <font>…</font>, dengan tag
ini kita bisa menentukan jenis font (face), warna (color),
dan ukuran (size), untuk lebih jelasnya mari kita
perhatikan contoh berikut ini:
<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1><font face="Verdana">Judul dengan font
Verdana</font></h1>
<p><font face="Times">Konten dengan font Times
</font></p>
Untuk membuat ukuran (size):
<h1><font size="5">Judul dengan size 5</font><
/h1>
<p><font size="3">Konten dengan size 3</font><
/p>
Untuk membuat warna font (color):
<h1><font color="blue">Judul dengan warna biru
</font></h1>
<p><font color="red">Konten dengan warna merah
</font></p>
Contoh komplit untuk membuat jenis font (face)
,size dan color:
<h1><font face="Verdana" size="4" color="green
">Judulnya Tentang Font</font></h1>
<p><font face="Arial" size="3" color="#660000
">Ini adalah contoh tulisan dengan <i>
pengaturan font</i> yang menggunakan<br>
tag HTML elemen <b>font</b> dengan atribut
face, size dan color...</font></p>
</body>
</html>
Format text HTML
Untuk menulis biasanya ada paragraf dan baris baru,
lantas bagaiman cara menuliskannya di dokumen HTML?.
Dari contoh yang sudah kita buat sebelumnya, coba
tambahkan dengan tag-tag berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
Ini adalah halaman HTML pertamaku.
<p>Aku sedang membuat paragraf dan ini
contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf mm...tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>
Hyperlink pada HTML
Hyperlink digunakan untuk menghubungkan antar dokumen
di dalam web. Tag HTML Hyperlink biasa disebut dengan
anchor (a) kemudian diikuti dengan href sebagai alamat
tujuan dari link tersebut. Berikut kita akan membuat suatu
Hyperlink ke suatu alamat url:
<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik
disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a>
akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka
pada jendela browser yang baru:<p>
<a href="http://www.mp3.com/" target="_blank
">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href="http://www.mp3.com/"target="_blank"
style="text-decoration: none">Website Musik</a
>
<p>Hyperlink ke suatu halaman tertentu dalam
web:<p>
<!--dengan catatan anda harus tau nama halaman
tujuan tersebut-->
<a href="http://htmlcssguides.com/belajar-css
/">Link ini</a> akan membawa anda ke halaman
belajar css.
</body>
</html>
Background HTML
Dengan menggunakan latar belakang (background) maka
website kita akan nampak semakin menarik. Untuk
memasukkan latar belakang kita bisa menggunakan pilihan
warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:
<html>
<head></head>
<body bgcolor="#FF99FF">
<p>Hai.. Saat ini saya sedang belajar membuat
latar belakang dengan warna</p>
<p>Kalau anda kurang suka dengan warnanya...
ganti aja deh... kode warnanya... </p>
</body>
</html>
Preview