tugas tik kel3

185
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

Upload: nurul-nurlatifah

Post on 11-Jan-2016

50 views

Category:

Documents


0 download

DESCRIPTION

Kelompok 3

TRANSCRIPT

Page 1: Tugas Tik Kel3

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.

Page 2: Tugas Tik Kel3

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.

Page 3: Tugas Tik Kel3

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.

Page 4: Tugas Tik Kel3

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.

Page 5: Tugas Tik Kel3

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.

Page 6: Tugas Tik Kel3

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

Page 7: Tugas Tik Kel3

<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" >

...

Page 8: Tugas Tik Kel3

</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

Page 9: Tugas Tik Kel3

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:

Page 10: Tugas Tik Kel3

(Inggris) Wikipedia : JavaScript

(Inggris) Wikipedia : Proyek Skrip

(Inggris) Beberapa skrip yang berguna

(Indonesia) Skrip selamat datang

Page 11: Tugas Tik Kel3

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

Page 12: Tugas Tik Kel3

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

Page 13: Tugas Tik Kel3

<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

Page 14: Tugas Tik Kel3

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”);

Page 15: Tugas Tik Kel3

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.

Page 16: Tugas Tik Kel3

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

Page 17: Tugas Tik Kel3

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.

Page 18: Tugas Tik Kel3

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:

Page 19: Tugas Tik Kel3

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.

Page 20: Tugas Tik Kel3

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 :

Page 21: Tugas Tik Kel3

<button onclick="alert("Simsalabim, blah blah blah");">Klik Untuk Melihat Demo</button.

Page 22: Tugas Tik Kel3

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>

Page 23: Tugas Tik Kel3

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")) {

Page 24: Tugas Tik Kel3

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>

Page 25: Tugas Tik Kel3

<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

Page 26: Tugas Tik Kel3

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 {

Page 27: Tugas Tik Kel3

text = "Input valid";

}

document.getElementById("angka").innerHTML = text;

}

</script>

</body>

</html>

Page 28: Tugas Tik Kel3

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

Page 29: Tugas Tik Kel3

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.

Page 30: Tugas Tik Kel3

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.

Page 31: Tugas Tik Kel3

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.

Page 32: Tugas Tik Kel3

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

Page 33: Tugas Tik Kel3

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.

Page 34: Tugas Tik Kel3

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;

};

Page 35: Tugas Tik Kel3

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;

Page 36: Tugas Tik Kel3

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.

Page 37: Tugas Tik Kel3

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

Page 38: Tugas Tik Kel3

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

Page 39: Tugas Tik Kel3

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;

};

Page 40: Tugas Tik Kel3

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

Page 41: Tugas Tik Kel3

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!

Page 42: Tugas Tik Kel3

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' }

Page 43: Tugas Tik Kel3

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");

Page 44: Tugas Tik Kel3

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.

Page 45: Tugas Tik Kel3

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"

};

Page 46: Tugas Tik Kel3

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

Page 47: Tugas Tik Kel3

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], ...);

Page 48: Tugas Tik Kel3

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

Page 49: Tugas Tik Kel3

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:

Page 50: Tugas Tik Kel3

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

Page 51: Tugas Tik Kel3

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 (!)

Page 52: Tugas Tik Kel3

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.

Page 53: Tugas Tik Kel3

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

Page 54: Tugas Tik Kel3

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:

Page 55: Tugas Tik Kel3

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!"

Page 56: Tugas Tik Kel3

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;

}

};

};

Page 57: Tugas Tik Kel3

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.

Page 58: Tugas Tik Kel3

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.

Page 59: Tugas Tik Kel3

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:

Page 60: Tugas Tik Kel3

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.

Page 61: Tugas Tik Kel3

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.

Page 62: Tugas Tik Kel3

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

Page 63: Tugas Tik Kel3

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)

Page 64: Tugas Tik Kel3

{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

Page 65: Tugas Tik Kel3

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

Page 66: Tugas Tik Kel3

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 ;

?>

Page 67: Tugas Tik Kel3

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 :

Page 68: Tugas Tik Kel3

<?

$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>” ;

Page 69: Tugas Tik Kel3

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

Page 70: Tugas Tik Kel3

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” ,

Page 71: Tugas Tik Kel3

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.

Page 72: Tugas Tik Kel3

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

Page 73: Tugas Tik Kel3

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

Page 74: Tugas Tik Kel3

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

Page 75: Tugas Tik Kel3

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

Page 76: Tugas Tik Kel3

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.

Page 77: Tugas Tik Kel3

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.

Page 78: Tugas Tik Kel3

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.

Page 79: Tugas Tik Kel3

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.

Page 80: Tugas Tik Kel3

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:

Page 81: Tugas Tik Kel3

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>

Page 82: Tugas Tik Kel3

</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>

Page 83: Tugas Tik Kel3

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

Page 84: Tugas Tik Kel3

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.

Page 85: Tugas Tik Kel3

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.

Page 86: Tugas Tik Kel3

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

Page 87: Tugas Tik Kel3

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

Page 88: Tugas Tik Kel3

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.

Page 89: Tugas Tik Kel3

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

Page 90: Tugas Tik Kel3

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

Page 91: Tugas Tik Kel3

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.

Page 92: Tugas Tik Kel3

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.

Page 93: Tugas Tik Kel3

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

Page 94: Tugas Tik Kel3

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

Google

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="//

Page 95: Tugas Tik Kel3

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.

Page 96: Tugas Tik Kel3

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.

Page 97: Tugas Tik Kel3

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

Page 98: Tugas Tik Kel3

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

Page 99: Tugas Tik Kel3

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

Page 100: Tugas Tik Kel3

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.

Page 101: Tugas Tik Kel3

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.

Page 102: Tugas Tik Kel3

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

Page 103: Tugas Tik Kel3

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.

Page 104: Tugas Tik Kel3

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 :

Page 105: Tugas Tik Kel3

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>

Page 106: Tugas Tik Kel3

<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">

Page 107: Tugas Tik Kel3

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

Page 108: Tugas Tik Kel3

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

Page 109: Tugas Tik Kel3

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");

Page 110: Tugas Tik Kel3

}

);

$(".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

Page 111: Tugas Tik Kel3

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");

Page 112: Tugas Tik Kel3

$("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

Page 113: Tugas Tik Kel3

$("#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>

Page 114: Tugas Tik Kel3

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

Page 115: Tugas Tik Kel3

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>

Page 116: Tugas Tik Kel3

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.

Page 117: Tugas Tik Kel3

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

Page 118: Tugas Tik Kel3

( 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

Page 119: Tugas Tik Kel3

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.

Page 120: Tugas Tik Kel3

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

Page 121: Tugas Tik Kel3

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

Page 122: Tugas Tik Kel3

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

Page 123: Tugas Tik Kel3

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

Page 124: Tugas Tik Kel3

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

Page 125: Tugas Tik Kel3

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

Page 126: Tugas Tik Kel3

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

Page 127: Tugas Tik Kel3

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

Page 128: Tugas Tik Kel3

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

Page 129: Tugas Tik Kel3

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>

Page 130: Tugas Tik Kel3

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

Page 131: Tugas Tik Kel3

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>

Page 132: Tugas Tik Kel3

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

Page 133: Tugas Tik Kel3

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

Page 134: Tugas Tik Kel3

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

Page 135: Tugas Tik Kel3

<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