Tik Tugas Upload
-
Upload
bayu-budiman -
Category
Documents
-
view
56 -
download
3
description
Transcript of Tik Tugas Upload
Tugas Kelompok TIK
ANGGOTA :
Bayu budiman
Imam badru zaman
Isty yuliana
Silmi sakinah
Sipa hayatul fauziah
Wiwin winarti
XI-MIA 3
SMA NEGERI 16 GARUT
Penjelasan mengenai 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 pemformatanhiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujudyang terintegerasi. Dengan kata lain,berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).HTML 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). Kegunaan HTML Mengintegrasi gambar dan tulisan Membuat Pranala Mengintegerasikan berkas suara dan rekaman gambar hidup. Membuat form interaktif HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya
dilakukan dengan cara:
< b> TAMPIL
TEBAL</b>. Tanda < b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin
ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format 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 memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melaluimedia daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah: Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya. Menampilkan tulisan dalam bentuk cetakan tebal Menampilkan sekelompok kata dalam bentuk miring
Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan
mesin ketik Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.
Markah / Tanda Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1 Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan, Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, < a href="http://
www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu), Elemen widget yang membuat objek- objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web, Ada 3 Macam Link ( Pranala ) 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 Ok mungkin cukup sekian artikel saya kali ini yang membahasPenjelasan Lengkap Tentang Html - Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga
menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasiu Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Kegunaan HTML Mengintegrasi gambar dan tulisan Membuat Pranala Mengintegerasikan berkas suara dan
rekaman gambar hidup. Membuat form interaktif HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai= dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara:
< b> TAMPIL TEBAL</b>. Tanda < b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format 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 memungkinkan seseorang untuk menyunting
tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah: Menampilkan suatu kelompok kata
dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya. Menampilkan tulisan dalam bentuk cetakan tebal Menampilkan sekelompok kata dalam bentuk miring Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik Mengubah-ubah ukuran tulisan untuk
suatu karakter tertentu. Markah / Tanda Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1 Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut
(contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen
lain (contoh, < a href="http://
www.wikipedia.org/"> Wikipedia</a>
akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu), Elemen widget yang membuat objek- objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,
Ada 3 Macam Link ( Pranala ) 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 HTML 5 HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan bahasa dengan
dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll).
HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009
untuk menyempurnakan bahasa
penanda sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah mengurangi
penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya. Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya: section serupa seperti h1-h6. article bisa berupa entri blog atau tulisan konten. aside menyajikan konten pelengkap. header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi. footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya. Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan. yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya. Dikenalkan pula beberapa atribut baru, seperti: atribut media, ping pada elemen pranala, autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan
form reversed pada elemen ol untuk urutan besar ke kecil. Beberapa kelebihan yang dijanjikan pada HTML5: Dapat ditulis dalam sintaks HTML (dengan tipe media text/ HTML) danXML. Integrasi yang lebih
baik dengan aplikasi situs dan pemrosesannya. Integrasi (‘inline’) dengan doctype yang lebih sederhana.
Penulisan kode yang lebih efisien. Konten yang ada di situs lebih mudah terindeks oleh search
engine. Browser yang Mendukung HTML Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru
saat ini yaitu opera 10) Safari (mulai dari versi 3.1) FireFox (Mulai dari FireFox 3 ) Google Chrome (Mulai
dari versi 3) Internet Explorer (Mulai dari versi 8) HTML5 Semantic HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>. Elemen-elemen baru yang ditambahkan pada HTML5 adalah:
Tag Keterangan <article> Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan sejenisnya. <aside> Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>. <bdi> Untuk teks yang tidak boleh terikat pada arah teks-elemen
induknya <command> Sebuah button, atau radiobutton, atau checkbox. <details> Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen. <summary> Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag <details> <figure> Untuk mengelompokkan sekumpulan section, biasanya berupa video. <figcaption> Berisi caption/keterangan yang ditempatkan di dalam tag <figure>
<footer> Digunakan sebagai footer dari sebuah halaman <header> Digunakan sebagai header dari sebuah halaman <hgroup> Digunakan untuk sekumpulan heading <mark> Digunakan pada teks yang akan di
Highlight <meter> Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan <nav> Digunakan untuk sekumpulan navigasi <progress> Membuat Progress bar <ruby> Digunakan untuk anotasi ruby <rt> Untuk menjelaskan anotasi ruby <rp> Menunjukkan elemen jika browser tidak mendukung ruby <section> Untuk sebuah section di dalam halaman.
Seperti Bab, Footer, dan sebagainya <time> Untuk mendefinisikan waktu dan tanggal <wbr> Word Break.
Untuk memisah suatu kata bila diperlukan. HTML5 Audio Salah satu fitur baru HTML5 yang paling mencengangkan adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita. Untuk menambahkan audio ke dalam web kita, cukup
ketikkan kode berikut <!DOCTYPE html> <html> <body> <audio controls="controls"> <source src="music/ FromHere.ogg" type="audio/ogg"> Your browser does not support the audio element. </audio> </body> </html>HTML 5 HTML5 adalah suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Tujuan utamanya telah meningkatkan bahasa dengan dukungan untuk multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll). HTML5 dimaksudkan untuk menggolongkan tidak hanya HTML 4, tapi XHTML 1 dan DOM Level 2 HTML juga. HTML5 ini merupakan hasil proyek dari lembaga persatuan website dunia, World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Proyek tersebut dimulai di tahun 2009 untuk menyempurnakan bahasa penanda sebelumnya yang dianggap sudah lawas. Tujuan utama dengan adanya HTML5 adalah mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Plugin-plugin tersebut seperti Adobe Flash, Microsft Silverlight, Java dan lain-lainnya. Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya: section serupa seperti h1-h6.
article bisa berupa entri blog atau tulisan konten. aside menyajikan konten pelengkap. header bisa
menyajikan judul, deskripsi, bahkan nav untuk navigasi. footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.
Dialog y ang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya. Dikenalkan pula beberapa atribut baru, seperti:
atribut media, ping pada elemen pranala, autofocus, placeholder, required, autocomplete dan
sebagainya, terkait elemen input dan form reversed pada elemen ol untuk urutan besar ke kecil.
Beberapa kelebihan yang dijanjikan pada HTML5: Dapat ditulis dalam sintaks HTML (dengan tipe media text/ html) danXML. Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.
Integrasi (‘inline’) dengan doctype yang lebih sederhana. Penulisan kode yang lebih efisien.
Konten yang ada di situs lebih mudah terindeks oleh search engine. Browser yang Mendukung HTML Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10)
Safari (mulai dari versi 3.1)
FireFox (Mulai dari
FireFox 3 )
Google Chrome (Mulai
dari versi 3)
Internet Explorer
(Mulai dari versi 8)
HTML5 Semantic
HTML5 Semantic adalah beberapa tag baru yang diperkenalkan dalam HTML5 untuk mendukung struktur halaman yang lebih rapi. Beberapa elemen baru digunakan untuk mengurangi pemakaian tag <div>. Elemen-elemen baru yang ditambahkan pada HTML5 adalah: Tag Keterangan <article> Menspesifikasikan konten yang bersifat independen, seperti artikel, blog post, forum post, dan
sejenisnya. <aside> Digunakan untuk sebuah subkonten. Biasanya digunakan di dalam tag <article>.
<bdi> Untuk teks yang tidak boleh terikat pada arah teks-elemen induknya <command> Sebuah button, atau radiobutton, atau checkbox. <details> Untuk menjelaskan detail tentang sebuah dokumen atau sebagian dari dokumen. <summary> Digunakan pada sebuah ringkasan dan sejenisnya di dalam tag
<details> <figure> Untuk mengelompokkan sekumpulan
section, biasanya berupa video. <figcaption> Berisi caption/ keterangan yang ditempatkan di dalam tag
<figure> <footer> Digunakan sebagai footer dari sebuah halaman <header> Digunakan sebagai
header dari sebuah halaman <hgroup> Digunakan untuk sekumpulan heading <mark> Digunakan pada teks yang akan di highlight <meter> Digunakan untuk pengukuran, dimana nilai maksimal dan minimal telah ditentukan <nav> Digunakan untuk sekumpulan navigasi <progress> Membuat Progress bar <ruby> Digunakan untuk anotasi ruby <rt> Untuk menjelaskan anotasi ruby <rp> Menunjukkan elemen jika browser tidak mendukung ruby <section> Untuk sebuah section di dalam halaman. Seperti Bab, Footer, dan sebagainya <time> Untuk mendefinisikan waktu dan tanggal <wbr> Word Break. Untuk memisah suatu kata bila diperlukan. HTML5 Audio Salah satu fitur baru HTML5 yang paling mencengangkan adalah
disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan
tanpa menggunakan plugin tambahan seperti flash player. Dengann menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita. Untuk menambahkan audio ke dalam
web kita, cukup ketikkan kode berikut
<!DOCTYPE html>
<html>
<body>
<audio controls="controls">
<source src="music/
FromHere.ogg" type="audio/ogg">
Your browser does not support the
audio element.
</audio>
</body>
</html>
Penjelasan mengenai CSS
Defenisi CSS 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.
Fungsi CSS
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. 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. Kelebihan dan Kelemahan CSS
Kelebihan CSS:
1. Dengan CSS, anda akan dapat mempersingkat waktu kerja anda untuk membuat halaman Web.
2. Ukuran File HTML akan menjadi lebih kecil, karena file CSS berada diluar HTML (kalau menggunakan External Stylesheet). Kelemahan CSS Tidak semua browser mengartikan kode CSS dengan cara yang sama. Jadi kadang-kadang, tampilan web dengan CSS terlihat baik di browser yang satu, tapi berantakan di browser yang lain. Jadi anda harus memeriksa tampilan supaya terlihat baik di semua browser dan menambahkan kode-kode khusus browser tertentu jika memang dibutuhkan agar tampilan web anda terlihat baik di semua software browser.
Cara kerja css itu sangatlah mudah, kita hanya perlu menulis stylenya(selector id dan class tersesuaikan) maka secara otomatis akan bekerja pada document html. Aturan penulisan
css itu sangatlah simple contohnya seperti ini Selector_id{ property:value; } Selector_class {property:value;} Tag_html { property:value; property_lagi:valuenya; /*sobatbisa menambah beberapa property lagi, yah kira-kira sesuai kebutuhan*/}
Keterangan
· Ketiga aturan diatas hanya kita gunakan sesuai kebutuhan saja
· Sebenarnya masih ada yang lain, berhubung ini hanya pemahaman dasar jadi yang dibahas yang penting-penting
saja
· Contohnya, diakhir tulisan ini Keterangan syntax
· Diawali dengan selector atau tag_html
· Kemudian tambahkan { (buka kurung karawal)
· Abis itu barulah kita tulis propertynya
· Setelah menulis propertynya lanjutkan dengan : (titik dua) anggap seperti sama dengan pada atribut html
· Setelah : (titik dua), masukan valuenya
· Sehabis menulis value tambahkan ; (titik koma), fungsinya untuk mengakhiri property dan value
· Next, jika kita tidak menambahkan property:value lagi
· Akhiri dengan } (tutup kurung karawal) fungsinya munutup selector Ini adalah bagian terpenting dalam css, tanpa selector dan value sama saja dengan mandi tanpa air(kalau tanpa sabun masih mending ). Misal kita ingin merubah warna text, property yang kita gunakan adalah color: sedangkan valuenya bisa rgb, hex color atau color.Misal lagi kita ingin merubaukuran font, property yang kitgunakan adalah font-size:, sedangkan valuenya bisa length (px). misalnya lagi kita ingin merubah warna latar belakang, maka property yang kita gunakan adalah background-color:sedangkan color.Contoh H1{ color ; red; background-color : green; font-size : 60px ; Keterangan · Yang berwarnah merah adalah property · Sedangkan yang berwarna biru adalah valuenya· Setiap peroperty sudah memiliki value masing-masing, property margin lalu valuenya #fff(white) itu sama dengan salah besar · Contohnya, diakhir tulisan ini · Property css itu sangat banyak, dari sekian banyak property
itu kita ngga mesti kira-kira sesuai kebutuhan) Untuk belajar css, sahabat harus bisa html dulu(minimal tau penulisan serta cara karjanya).Contoh dibawah adalah penulisan css dalam binternal style <html> <style type="text/css"> disini tempat menulis code css, ada beberapa cara untuk menulis css, yang ini adalah internal style </style> <body> <!-- tag tag html disini --> </body> </html> Keterangan · Rekomendasi dari w3.org ialah penulisan style css terletak antara <head> dan </ head> · Namun, dimanapun sobat menulis kode cssnya, browser tetap akan menjalankan css tadi jika syntaxnya benar, misal letaknya di <body> disini </body> · Sekarang itu browser sudah pada canggih-canggih beda ketika netscape masih berdiri Komentar css sama seperti html, kita juga bisa menulis komentar pada css, tahukan fungsi komentar itu Penulisan komentar css itu seperti ini /* disini komentar css */ Keterangan · Diawali dengan /(garis miring) · Kemudian *(bintang) atau shift + 8 · Abis itu komentar anda · Setelah memasukkan komentar · Sebagai penutupnya tambahkan *(bintang) atau shift + 8 · Disusul dengan /(garis miring) · Lihat contoh <style type="text/css"> body{ color:blue;/*komentar css*/ background:lime;/*komentar css*/ /*
bisa juga disini komentar css, color adalah property css, sedangkan blue adalah value. Fungsi dari komentar adalah untuk menudahkan kita dalam mengingat code yang kita tulis, dimana browser tidak akan mmenampilkan/ menjalankan komentar yang kita tulis */ } </style> <body> <!-- tag tag html disini --> </body> </html> Contoh ini <style type="text/css"> body{ color: blue; background:lime; }</style> Dan contoh yang ini <style type="text/css">body {color:blue;background:lime;}</ style> Sama saja Keterangan · Contoh yang diatas itu bernilai sama · Atau css itu ngga ngaruh terhadap enter(line break) ataupun spasi · Yang perlu diperhatikan hanyalah karakter ini { : ; } · Kita hanya akan menggunakan spasi jika property dan valuenya ditulis dengan shorthand Contoh dan cara kerja css Di bawah ada beberapa dua contoh penggunaan css <html> <style type="text/css"> body{/*value default dari tag <body> adalah warna latar putih, dengan css kita bisa merubahnya*/ background:lime;/* warna latar belakang */ padding-left:60px;/* jarak kiri*/ } h1{/*dengan ini kita merubah nilai default tag <h1> sesuai dengan property yang kita tambahkan */ color:red;/* warna */ font-family:Times, serif;/* font family*/ font-style: italic;/* font style*/ font-weight: bold;/* font weigt */ font-size: 30px;/* ukuran font*/ } p{ color:blue;/* warna*/ font-family:arial;/* font family*/ font-style: normal;/* font style*/ font-weight: bold;/* font wight*/ font-size: 50px;/* ukuran font*/} </style> <body> <h1>ini adalah judul </h1> <p>ini adalah paragraf</p> </body> </html> Untuk menjalankan codenya · Copy kode diatas · Buka program notepad · Paste · Lalu save as(pilih all files) dengan nama belajarcss1.html (pastikan ekstensi filenya adalah [dot]html) · Setelah itu jalankan menggunakan browser pavorit anda(ff, ie, opera). · Setelah hasilnya
dilihat, coba edit masing-masing property valuenya yang terletak antara : dan ; · Simpan · Kemudian lihat hasil editan sobat Perhatikan markup style berikut <html> <head> <title>contoh2 css</title> <meta content="indam url:http:// www.indaam.com" name="author"/> <style type="text/css"> /*misal tag body*/body{/*style ini untuk body*/ background-color:pink;/* warna latar belakang body pink*/ margin:0 auto 10px auto;/* jarak- luar atas 0, kiri dan kana auto, sedangkan bawah 10px */ padding:5px;/* jarak/batas dalam masing-masing 5px*/ width:800px;/* lebar 800px*/ } /* ini adalah komentar css */ #pembentuk-headernya{/*style ini untuk pembentuk header*/ height:200px;/* tingginya 200px*/ clear:both;/*fungsi ini agar agar ruas kanan-dankiri tidak bisa diisi dengan bidang lain */ margin:0 auto;/*jarak luar atas bawah 0, kiri-kanan auto */ background-color:white;/*warna latar belakang putih */ -moz-border-radius- topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/ -moz-border-radius-topleft:10px;/ * style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/ /*ukuran text*/font-size:40px; color:blue;/*warna text*/ } /*bagian header selesai*/ /* ini adalah komentar css */ #sidebar-kiri{/*style ini untuk sidebar kiri */ min-height:1000px;/* tinggi minimal*/ float:left;/*menekan kekiri */ width:200px;/*lebar 200px */ margin:10px 0;/*jarak luar atas- bawah 10px, kiri-kanan 0 */ background-color:white;/* warna latar belakang putih*/ -moz-border-radius-topleft:10px;/ * style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/ /*ukuran text*/font-size:60px; color:red;/*warna text*/ } /*bagian sidebar-kiri selesai*/ /* ini adalah komentar css */ /*mulai badan utama*/ #badan-utamanya{/*style ini untuk badan utama, atau yang terletak di tengah*/ min-height:1000px;/* tinggi minimal*/ float:left;/* menekan kekiri*/ width:400px;/* lebar 400px*/ margin:10px;/*jarak luar masing- masing 10px */ background-color:white;/*warna latar belakang putih */ } #badan-utamanya .isinya{/*style ini untuk isi badan*/ /*style ini untuk isi badan*/ margin:10px;/* jarak luar masing- masing 10px*/ /*ukuran text*/font-size:55px; color:green;/*warna text*/ } /* ini adalah komentar css */ /*mulai sidebar kanan*/ #sidebar-kanan{/*style ini untuk sidebar kanan*/ min-height:1000px;/* tinggi minimal*/ float:right;/* menekan ke kanan*/ width:180px;/* lebar 180px*/ margin:10 0 0 0;/*jarak luar atas 10, kiri-kanan-bawah 0 */ background-color:white;/*warna latar belakang putih */ -moz-border-radius- topright:10px;/* style ini khusus untuk firefox, fungsinya untuk membuat lengkungan*/ /*ukuran text*/font-size:40px; color:silver;/*warna text*/ } /* ini adalah komentar css */ #pembentuk-footer{/*style ini untuk pembentuk footer atas, saya membuat tiga footer widget*/ clear:both;/*fungsi style ini agar
ruang kiri-kanan tidak bisa diisi*/
background-color:white;/*warna
latar belakang*/
/*ukuran text*/font-size:20px;
color:orange;/*warna text*/
}
#pembentuk-footer
.misalwidgetnya{/*style ini untuk
widget dalama footer*/
float:left;/*menekan ke kiri-
atas*/
width:32%;/*lebarnya 32%, jika
lebar tag sebelumnya 1000px, maka
lebar ini menjadi 320px*/
min-height:300px;/*tinggi
minimal*/
background-color:pink;/*warna
latar belakang*/
margin:5px;/*jarak luar masing-
masing 5px */
}
/* ini adalah komentar css */
#by-indam{/*style ini untuk yang
paaaaaaaaaaaaaaaaaaaaaaaaling
bawah, ituloh yang titititittititik*/
clear:both;/*fungsi style ini agar
ruang kiri-kanan tidak bisa diisi*/
min-height:40px;/*minimal tinggi
40px */
margin:10px auto;/* jatak luar
atas dan bawah 40px, kiri-kanan
auto*/
background-color:white;/* warna
latar belakang putih*/
-moz-border-radius-
bottomright:10px;/*style ini hanya
untuk firefox */
-moz-border-radius-
bottomleft:10px;/*style ini hanya
untuk firefox */
}
#by-indam p{/*style ini untuk tag
p dalam tititititiititittitiitik*/
text-align:right;/*text rata kanan
*/
margin:0;/*jarak luar masing-
masing 0 */
padding:5px 10px;/* jarak dalam
atas-bawah 5px, kiri-kanan 10px*/
}
/* ini adalah komentar css */
</style>
</head>
<body>
<div id="pembentuk-headernya">
header
</div>
<!--------->
<!-- dari sini sidebar kiri
------------->
<div id="sidebar-kiri">
sidebar kiri
</div>
<!-- //sampai disini sidebar kiri
------------->
<!--------->
<!-- dari sini badan utama -->
<div id="badan-utamanya">
<div class="isinya">
badan post
</div>
<!-- //sampai disini isi badan
------------->
</div>
<!--------->
<!-- ////sampai pembentuk badan
utama -------------->
<!--------->
<!-- dari sini sidebar kanan -->
<div id="sidebar-kanan">
sidebar kanan
</div>
<!--// //sampai disini sidebar
kanan ------------->
<div style="clear:both;/* */"></
div>
<!--------->
<!-- dari sini footer pertama/
atas------------->
<div id="pembentuk-footer">
<!-- dari sini widget dalam footer
atas ---->
<!--------->
<div class="misalwidgetnya">
footer kiri
</div>
<!--------->
<div class="misalwidgetnya">
footer kanan
</div>
<!--------->
<div class="misalwidgetnya">
footer tengah
</div>
<!--------->
<div style="clear:both;/* */"></
div>
</div>
<!--------->
<div id="by-indam">
<p>yah, seperti inilah tampilanya,
simple kan? silakan edit untuk
belajar. salam <a href="http://
www.indaam.com" title="indam site"
target="_blank">indaam site</a></
p>
<!---------></div>
</body>
</html>
Untuk menjalankan codenya
· Copy kode diatas
· Buka program notepad
· Paste
· Lalu save as(pilih all files)
dengan nama belajarcss2.html
(pastikan ekstensi filenya
adalah [dot]html)
· Setelah itu jalankan
menggunakan browser pavorit
anda(ff, ie, opera).
· Setelah hasilnya dilihat,
coba edit masing-masing
property dan valuenya yang
terletak antara : dan ;
· Dari /* sampai */ adalah
komentar css
· Simpan
· Kemudian lihat hasil editan
sobat
Bandingkan jika ngga menggunakan
css, coba hapus semua code antara
<style type="text/css"> sampai </
style>
· Simpan
· Lalu lihat hasilnya
· Nah, gimana sudah tahukan
fungsi css itu?
· Saya harap kita semua tahu
(minimal apa itu css)
Cara Kerja
Cara kerja CSS sangatlah mudah,
karena CSS hanya membutuhkan
style sebagai penentu dari font ,
warna, dan format-format lain
untuk memformat atribut sebuah
halaman web yang kita buat. Tiap
style memiliki dua buah elemen
dasar yaitu “selector” dan
“declaration”.
Sebuah selector biasanya adalah tag
HTML, sementara declaration adalah
satu atau beberapa perintah / nilai
dari CSS yang menunjukkan type
bentuk yang diaplikasikan pada
selector. Declaration ini biasanya di
tandai dengan tanda kurung kurawal
“{ }” , dan perintah atau nilai CSS
yang berbeda dipisahkan satu
dengan yang lain dengan
menggunakan titik-koma “;” seperti
terlihat pada contoh berikut :
< style type="text/
css">
.teks {font-
family:verdana;
color:blue;}
< /style>
Disini terlihat bahwa .teks adalah
selector, dan {font-family:verdana;
color: blue;} adalah declaration.
Selector-selector dan style dalam
CSS akan dimasukkan dalam sebuah
tempat yang sama dalam isi dokumen
HTML atau dibuat diluar dokumen
HTML yang nantinya akan dipanggil
untuk menentukan isi tampilan
dokumen HTML. Anda hanya
menunjuk pada selector-selector
dimana akan mengaktifkan sebuah
style yang anda inginkan.
Hal yang paling umum dalam
memasukkan kode Style CSS dengan
menggunakan tag < style
type=”text/css”>. Tag < style
type=”text/css”> ini selalu tampil
dalam bagian < head> dan sebelum
< /head> dari dokumen anda seperti
terlihat pada contoh berikut :
< html>
< head>
< style type="text/
css">
... aturan-aturan
css ...
< /style>
< /head>
< body>
... Dokumen html
yang akan diberikan
aturan CSS ...
< /body>
< /html>
Untuk menentukan font dan warna-
warna tiap kali anda memulai sebuah
cell table, anda dapat menentukan
sebuah style dan kemudian anda
tinggal menunjuk ke style dalam
cell table anda. Bandingkan contoh
dari sebuah table berikut yang
dibuat menggunakan HTML
sederhana :
< html>
< head>belajar css
< /head>
< body>
< table>
< tr>< td
bgcolor="red"
align="center">
< font
face="verdana"
color="blue">belajar
css1
< /font>< /td>< /tr>
< /table>
< /body>
< /html>
Bandingkan jika dokumen tersebut
dibuat dengan menggunakan CSS
(dengan menganggap bahwa sebuah
selector yang dipanggil “teks” telah
ditetapkan yang akan mengatur
format teks dokumen html
tersebut).
< html>
< head><
title>belajar css< /
title>
< style type="text/
css">
.teks { background-
color:red;
color:blue; font-
family:verdana;}
< /style>
< /head>
< body>
< table>
< tr>< td
class="teks">belajar
css1< /td>< /tr>
< /table>
< /body>
< /html>
Penempatan CSS
Menempatkan style CSS dalam
dokumen web yang kita buat dalam
bahasa html dapat dilakukan dengan
beberapa cara dan tingkatan yang
berbeda sesuai dengan keinginan
kita. Cara penempatan dalam HTML
adalah dengan menggunakan
beberapa cara, diantaranya adalah
menggunakan Inline Style, Internal
Style, External style, dan juga
teknik Importing dengan Internal
Style.
Inline Style
Adalah CSS yang dibuat dalam
sebuah tag HTML yang hanya
berlaku untuk dokumen yang
diapitnya saja. Biasanya teknik ini
digunakan pada pemformatan khusus
pada sebuah elemen HTML dan tidak
digunakan untuk memformat seluruh
elemen dalam dokumen web.
Contohnya adalah sebagai berikut :
< html>
< head>
< title>belajar
css< /title>
< /head>
< body>
< font style="arial;
font-family:Arial;
font-size: 20px;
background-
color:yellow">Penerapan
Inline Style < /
font>
< /body>
< /html>
Dalam script di atas dapat diketahui
bahwa style tersebut memiliki nama
style arial yang memiliki nilai atau
value untuk style tersebut. Adapun
nilai style adalah jenis font arial
dengan ukuran 20 pixel dan memiliki
warna latar kuning.
Internal Style
Pada teknik ini, style CSS
diletakkan pada tengah tag antara
tagdan. Aturan-aturan dalam style
ini diatur sedemikian rupa untuk
digunakan pada suatu tempat
maupun untuk keseluruhan situs.
Contoh dari teknik ini terlihat pada
contoh berikut :
< html>
< head>
< title>Belajar
CSS< /title>
< style type="text/
css">
< !-- .teks {font-
family: Verdana,
Arial, Helvetica,
sans-serif; font-
size: 24px; color:
white; background-
color: blue;} -->
< /style>
< /head>
< body>
< div
class=teks>Penerapan
Internal Style
< /body>
< /html>
Maksud dari < !– aturan css –>
diatas adalah berguna agar browser
yang tidak mendukung CSS tidak
menampilkan perintah-perintah
CSS, jadi perintah CSS didalam < !–
–> akan dianggap sebagai komentar
HTML biasa dan tidak akan
ditampilkan dalam browser walaupun
browser tersebut mendukung CSS.
Import Style
Dengan teknik ini sebuah Style
tidak disimpan pada halaman
tersebut, namun untuk
menghubungkannya dengan halaman
web yang kita buat digunakan
perintah import yang terdapat pada
style CSS. Seperti terlihat pada
contoh berikut :
< html>
< head>
< title>Belajar
CSS< /title>
< style type="text/
css">
< !-- @import url
(http://
www.nama_situs.com/
style.css); -->
< /style>
< /head>
< body>
< div
class=teks>Penerapan
Import Style< /div>
< /body>
< /html>
Pada teknik diatas, dokumen HTML
akan mengambil atau import style
CSS untuk dipergunakan dalam
dokumen tersebut. Dimana pada
contoh diatas dokumen akan
mengimport file style dengan nama
style yang berekstensi CSS pada
alamat url http://
www.nama_situs.com dengan
menggunakan perintah :
@import url (http://
www.nama_situs.com/style.css);
External Style
Dengan menggunakan teknik ini kita
dapat memanggil style CSS pada file
CSS yang kita inginkan dengan
menggunakan perintah “Link rel”
yang berfungsi untuk
menghubungkan kedalam sebuah
style CSS eksternal dengan nama
yang telah kita tentukan seperti
terlihat pada contoh :
< link
rel="stylesheet"
type="text/css"
href="style.css
Dalam contoh diatas kita
menghubungkan sebuah dokumen
html dengan sebuah style eksternal
dengan nama style.css yang telah
kita buat sedemikian rupa sehingga
style tersebut dihubungkan untuk
memformat tampilan dalam dokumen
html tersebut.
Dalam mengimport file CSS, kita
dapat langsung mengimport
beberapa file CSS sekaligus dalam
sebuah dokumen agar memperkaya
tampilan dokumen kita seperti
terlihat pada contoh berikut :
< link
rel="stylesheet"
type="text/css"
href="style1.css">
< link
rel="stylesheet"
type="text/css"
href="style2.css">
< link
rel="stylesheet"
type="text/css"
href="style3.css">
Atau kita dapat menggunakan
perintah :
< style>
< !-- @import url
(style1.css);
@import url
(style2.css);
@import url
(style3.css); -->
< /style>
Perbedaan dalam teknik terakhir
adalah perintah import tersebut
akan mengambil style CSS dengan
cara import style dari alamat url
yang kita tentukan. Cara ini lebih
efisien dikarenakan dokumen yang
kita beri perintah import tersebut
hanya akan mengimport file css
yang pada akhirnya, style CSS
tersebut hanya perlu di download
sekali saja dalam dokumen style
sheet eksternal yang terpisah
dengan dokumen HTML asli. Ketika
surfing ke dalam situs anda maka
CSS akan disembunyikan dalam
komputer user sehingga akan
memperkecil ukuran file sebuah
situs yang kita buat. Jadi jika anda
menggunakan cara terakhir ini,
maka sebelumnya anda harus
membuat sebuah dokumen style CSS
eksternal tersebut dengan ekstensi
.css dimana dokumen style tersebut
berisi aturan yang akan mengatur
tampilan dokumen web yang dibuat
STRUKTUR CSS
Dalam pembuatan dokumen web
menggunakan style CSS di kenal
adanya aturan atau struktur
penulisan baku agar style CSS yang
kita buat tersebut dapat
ditampilkan dengan baik dalam
dokumen web yang dibuat. Contoh :
< html>
< head>
< title>HTML Selector< /title>
< style type=”text/CSS”>
< !– p {font-family: verdana;} –>
< /style>
< /head>
< body>
< p> penggunaan HTML Selector
dalam CSS < /p>
< /body>
< /html>
Pada contoh diatas dipergunakan
tag HTML < p> sebagai selector dan
setiap huruf yang berada diantara
tag < p>
dan < /p> akan memiliki jenis font
verdana sesuai dengan value atau
nilai yang diberikan dalam property
style tersebut.
Cascading Style Sheet (CSS)
merupakan bahasa pemrograman
untuk mengatur tampilan suatu
website atau blog. Cascading Style
Sheet merupakan bahasa
pemrograman yang berguna untuk
pembuatan dynamic HTML. Dengan
menggunakan Cascading Style Sheet ,
Anda dapat mengatur atau
mempercantik tampilan website atau
blog, antara lain mengatur jenis ,
ukuran, warna front; jarak antara
baris dan panjangnya, marjin dan
Indentasi, background dan warna,
serta masih banyak lagi. Penggunaan
Cascading Style sheet (CSS) bukanlah
hal yang wajib, tanpa CSS Anda dapat
membuat sebuah web tetapi
penggunaan CSS (Cascading Style
Sheet) dalam pembuatan web
merupakan kelebihan tersendiri.
Menggunakan CSS tidak merupakan
perangkat lunak tertentu, karena
merupakan script yang telah
embedded dengan HTML. Anda cukup
menggunakan aplikasi notepad untuk
menciptakan script CSS sendiri.
Manfaat dari CSS:
1. Kode HTML, menjadi lebih
sederhana dan lebih mudah
diatur.
2. Ukuran file menjadi lebih kecil,
sehingga load file lebih cepat.
3. Mudah untuk merubah tampilan,
hanya dengan merubah dile CSS
saja.
4. Dapat berkolaborasi dengan
JavaScript dan merupakan
pasangan setia HTML.
5. Digunakan dalam hampir semua
web browser.
Penjelasan mengenai JQUVERY
jQuery adalah library JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML. Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan sebuah perangkat lunak bebas sumber terbuka yang berada di bawah lisensi MIT. Sintaks jQuery dirancang sedemikian rupa untuk memudahkan pengembang website dalam menavigasi dokumen, menyeleksi elemen-elemen DOM, menerapkan animasi, mengaplikasikan events, serta membangun aplikasi AJAX. jQuery juga memampukan developer menciptakan berbagai plugin berbasis library JavaScript. Dengan plugin-plugin tersebut, pengembang situs web mampu menyusun sejumlah abstraksi untuk interaksi dan animasi sederhana, juga beberapa efek yang cukup kompleks dan berbagai widget yang dapat dikonfigurasikan. Karakter library JavaScript yang modular mendukung pengembangan laman web dinamis dengan berbagai fitur dan aplikasi berbasis web ( web app ). Fitur-fitur inti jQuery – meliputi penyeleksian, traversal, dan manipulasi elemen-elemen DOM – dimampukan oleh sebuah selector engine (dinamai Sizzle mulai versi 1.3), telah mewujudkan suatu gaya pemrograman baru yang memadukan antara algoritma dan struktur data DOM. Gaya ini telah mempengaruhi arsitektur dari framework JavaScript lainnya seperti YUI v3 dan Dojo , dan di kemudian menstimulasi pengembangan Selectors API standar.
Microsoft dan Nokia membundel jQuery pada platform mereka. Microsoft memasukkannya dalam Visual Studio untuk digunakan dalam framework ASP.NET AJAX dan ASP.NET MVC, sedangkan Nokia mengintegrasikannya dalam platform pengembangan widget Web Run-Time . jQuery juga mulai dipakai pada MediaWiki sejak versi 1.16. Situs resmi jQuery beralamat dijquery.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 jQueryjQuery, pada intinya, adalah sebuah library yang berfungsi untuk memanipulasi DOM. DOM merupakan representasi struktural dari seluruh elemen pada
sebuah laman web. Keberadaan jQuery menjadikan kerja pencarian, penyeleksian, dan manipulasi elemen-elemen DOM menjadi simpel dan mudah.
Sebagai contoh, jQuery bisa dipergunakan untuk menemukan sebuah elemen dalam dokumen yang memiliki properti tertentu (misalnya: elemen dengan tag ` h1 `), kemudian mengubah satu atau beberapa atributnya (misalnya: warna, visibilitas), atau menjadikan elemen tersebut responsif terhadap suatu event (misalnya: klik mouse). Selain penyeleksian dan manipulasi DOM dasar, jQuery menyajikan sebuah paradigm 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 antarmukayang konsisten bekerja pada semua browser.
Ekstensibel → jQuery menjadikan pengembangan framework sangat simpel. Berbagai event, elemen, dan metode baru dapat dengan mudah ditambahkan dan digunakan ulang sebagai plugin. Fitur-fitur jQuery jQuery memiliki fitur-fitur sebagai berikut: Penyeleksian elemen- elemen DOM menggunakan selector engine Sizzle. Sizzle merupakan perangkat lunak multiplatform sumber terbuka yang berawal sebagai proyek sampingan jQuery. Manipulasi DOM berdasarkan selector CSS yang memanfaatkan nama-nama dan atribut elemen, misalnya id dan
class, sebagai kriteria seleksi simpul-simpul DOM. Events Efek dan animasi AJAX Obyek-obyek deferred and promose untuk mengontrol pemrosesan asinkron Penguraian JSON Ekstensibilitas melalui plugin Sejumlah utilitas, misalnya: informasi agen pengguna ( user agent), deteksi fitur perangkat Metode-metode kompatibilitas yang tersedia secara bawaan pada browser-browser modern, namun membutuhkan pencadangan pada browser yang lebih tua, misalnya `inArray() ` dan `each ` Dukungan multi-browser Browser yang Didukung jQuery Baik versi 1.x maupun 2.x dari jQuery, keduanya mendukung “current-1 versions” (artinya versi stable terkini dari sebuah browser dan satu versi yang mendahuluinya) untuk Firefox, Google Chrome, Safari , dan Opera.
Versi 1.x juga mendukung IE 6 atau diatasnya. Sedangkan versi 2.x tidak lagi mendukung Internet Explorer 6 sampai 8 (yang mewakili kurang dari 28% dari seluruh browser yang digunakan) dan hanya mendukung
IE 9 dan selanjutnya.
Penggunaan jQuery 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 public (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="//
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 selector 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 fungsionalitasnyajQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML . Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John Resig dan berlisensi ganda di bawah MIT dan
GPL.
Microsoft dan Nokia telah mengumumkan akan mengemas jQuery di platform mereka
[1] . Microsoft awalnya mengadopsinya dalam Visual Studio
[2] untuk digunakan dalam ASP.NET AJAX dan ASP.NET MVC Framework , sedangkan Nokia akan mengintegrasikannya dalam kerangka Web Run-Time mereka. Bacaan lanjutan Chaffer, Jonathon; Karl Swedberg (2007). Learning JQuery: Better Interaction Design and Web Development with Simple JavaScript Techniques . Packt Publishing.
ISBN 978-18471925
Bibeault, Bear; Yehuda Katz
(2008). JQuery in Action. Manning
Publications Co.
ISBN 978-1933988351 .
Heilmann, Christian (2006).
Beginning JavaScript with DOM
scripting and Ajax . Apress.
ISBN 978-1590596807 . Diakses
tanggal 2009-05-04.
Darie, Cristian; Filip Chereches-
Tosa, Mihai Bucicia (2005). Ajax
And Php: Building Responsive Web
Applications. Packt Publishing.
ISBN 978-1904811824 .
Heilmann, Christian; Mark
Norman Francis (2007). Web
development solutions . Apress.
ISBN 978-1590598061 . Diakses
tanggal 2009-05-04..
jQuery adalah pustaka JavaScript kecil bersumber terbuka yang menekankan pada interaksi antara JavaScript dan HTML. Pustaka ini dirilis pada Januari 2006 di BarCamp NYC oleh John
Resig dan berlisensi ganda di bawah MIT dan GPL. jQuery merupakan sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery dirancang sedemikian rupa supaya membuat program menggunakan Javascript menjadi relatif sangat mudah. Sesuai slogan nya, write less, do more. Menulis kode lebih sedikit, tetapi melakukan pekerjaan lebih banyak.
jQuery ukurannya cukup kecil, sehingga tidak memperlambat proses loading blog yang kita buat. jQuery juga kompatibel dengan CSS3 dan yang tak kalah penting adalah jQuery bisa berjalan di semua browser – cross browser. 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 blog yang cantik dan interaktif. Selain itu tersedia plugin-plugin lain yang semakin memperkaya kemampuan jQuery.
Penjelasan mengenai PHP
PHP: Hypertext Preprocessor[1] adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML . [2][3] PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
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 Form Interpreted (FI), yang wujudnya berupa sekumpulan skrip yang digunakan untuk mengolah data formulir dari web. Selanjutnya Rasmus merilis kode sumber tersebut untuk umum dan menamakannya PHP/FI . Dengan perilisan kode sumber ini menjadi sumber terbuka, maka banyak pemrogram yang tertarik untuk ikut mengembangkan PHP.
Pada November 1997, dirilis PHP/FI 2.0. Pada rilis ini, interpreter PHP sudah diimplementasikan dalam program C. Dalam rilis ini disertakan juga modul-modul ekstensi yang meningkatkan kemampuan PHP/FI secara signifikan.
Pada tahun 1997, sebuah perusahaan bernama Zend menulis ulang 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 diubah
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 ke dalam PHP untuk menjawab perkembangan bahasa pemrograman ke arah paradigma berorientasi objek. Versi terbaru dari bahasa pemograman PHP adalah versi 5.6.4 yang resmi dirilis pada tanggal 18 Desember 2014.
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 kode PHP. 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, seperti HTML ,Javascript .
Variabel
Variabel diawali dengan symbol dolar $ . Pada versi php PHP 5 diperkenalkan jenis isyarat yang memungkinkan fungsi untuk memaksa mereka menjadi parameter objek dari class tertentu, array, atau fungsi. Namun, jenis petunjuk tidak dapat digunakan dengan jenis scalar seperti angka atau string. Contoh variabel dapat ditulis sebagai $nama_varabel. Penulisan fungsi, penamaan kelas, nama variabel adalah peka akan huruf besar (Kapital) dan huruf kecil . Kedua kutip ganda "" dari string memberikan kemampuan untuk interpolasi nilai variabel ke dalam string PHP. PHP menerjemahkan baris sebagai spasi, 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:
function tampilkan
( $data ="" )
// Mendefenisikan
fungsi, "tampilkan"
adalah nama sebuah
fungsi
{ //Diapit oleh
tanda kurung kurawal
if ($data ) return
$data ; else return
'Tidak ada
data' ; //
Melakukan proses pengolahan data, contohnya melalui
kondisi}
echo tampilkan( "isi halaman" ) //
Menjalankan fungsi
Contoh program Membuat Sebuah Halaman Web PHP
Sebuah Halaman web yang ditulis menggunakan Bahasa Pemograman PHP adalah sebagai berikut:
<?php
echo "Halo dunia" ;
?>
Program bilangan Fibonacci Berikut ini adalah contoh program yang relatif lebih kompleks yang ditulis dengan menggunakan PHP. Contoh program ini adalah program untuk menampilkan 20 bilangan pertama dari deret bilangan Fibonacci .terdapat beberapa variable atau sintax. Seperti function. itu merupakan bagian dari javascript.
<?php
function fibonacci_seq
( $panjang ) {
for( $l = array
( 0 ,1 ), $i = 2, $x =
0 ; $i < $panjang ; $i
++ )
$l [] = $l [ $x
++ ] + $l [ $x ];
return $l ;
}
fibonacci_seq( 20 );
// Angka "20" dapat
diganti sesuai
keinginan
?>
Kelebihan PHP 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.'
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
Jika Anda baru saja mulai PHP, pastikan memulai dengan rilis stabil terbaru yaitu PHP 5.5 . Selama beberapa tahun terakhir ini, PHP telah membuat langkah besar dengan menambahkan fitur baru. Jangan tertipu oleh perbedaan versi minor antara 5.2 dan 5.5, karena sebenarnya itu adalah perubahan yang sangat besar. Jika Anda mencari fungsi atau penggunaannya, silakan kunjungi php.net . Web server bawaan Anda dapat mulai belajar PHP dengan menggunakan web server bawaan (minimal PHP 5.4). Untuk memulai server, jalankan perintah berikut dari terminal Anda dalam sebuah
directory:
> php -S
localhost:8000
Pelajari command line
pada web server
bawaan
Setup di Mac
OSX sudah dikemas dengan PHP, tetapi biasanya sedikit tertinggal dari versi terbaru. Lion datang dengan PHP 5.3.6, Mountain Lion membawa PHP 5.3.10, dan Mavericks membawa PHP 5.4.17. Untuk memperbarui PHP di OSX, Anda bisa menginstalnya melalui mac-package- managers, dan dianjurkan dengan [php-OSX oleh Liip] [php-osx-download]. Pilihan lainnya adalah dengan mengkompilasi sendiri , dalam kasus ini pastikan Xcode telah diinstal. Atau pengganti
[“Tools Command Line untuk Xcode”] Apple apple-developer dapat didownload dari Apple Mac Developer Center. Untuk paket “all-in-one” termasuk PHP, web server Apache, dan database MySQL, dengan kontrol yang baik dilengkapi GUI, cobalah [MAMP] [mamp-download] atau XAMPP .
Setup di Windows Ada beberapa cara untuk setup PHP di Windows. Anda dapat [men-download binari] [php-download]. Untuk proses belajar dan development di lokal, Anda dapat menggunakan built in webserver dengan PHP 5.4+ sehingga Anda tidak perlu mengkhawatirkan konfigurasi yang rumit.
Jika Anda ingin paket “all-in- one” yang mencakup webserver dan MySQL, paket seperti Web Platform Installer , Zend Server CE, XAMPP dan WAMP akan membantu memberikan environment di Windows.
Namun, harap berhati-hati karena paket ini akan sedikit berbeda dari environment produksi jadi berhati-hatilah dengan perbedaan lingkungan jika Anda bekerja pada Windows dan menggunakan untuk Linux.
Vagrant Seringkali developer menemukan masalah ketika menjalankan aplikasi pada saat development dan production . Masalah itu ditimbulkan karena perbedaan environment.
Misalkan developer membuat aplikasi di Windows, sedangkan server produksi menggunakan Linux. Masalah tersebut semakin terasa ketika anda bekerja dalam sebuah tim di mana setiap anggota menggunakan OS yang berbeda-beda. Salah seorang menggunakan Windows, satu orang menyukai MacOS, dan lainnya memilih Linux. Jika itulah yang Anda alami, mungkin ada baiknya Anda mempertimbangkan menggunakan mesin virtual dalam development . Kedengarannya rumit, tapi dengan menggunakan Vagrant , Anda dapat dengan mudah mengatur mesin virtual hanya
dalam beberapa langkah. Mesin virtual ini kemudian dapat diatur secara manual, atau Anda dapat menggunakan “provisioning” software seperti Puppet atau Chef untuk melakukannya. Provisioning mesin virtual adalah cara yang bagus untuk memastikan bahwa beberapa mesin ditetapkan dalam cara yang identik. Dan menghilangkan kebutuhan bagi Anda untuk men-setup nya secara manual. Anda bahkan dapat dengan mudah menghapus mesin virtual tersebut dan membuatnya lagi dari awal. Vagrant menciptakan shared folder yang digunakan untuk berbagi kode antara host dan mesin virtual Anda, yang berarti Anda dapat membuat dan mengedit file Anda pada mesin host Anda dan kemudian menjalankan kode di dalam mesin virtual Anda. Bantuan Singkat Jika Anda perlu sedikit bantuan untuk mulai menggunakan Vagrant ada tiga layanan yang mungkin berguna:
Rove: layanan yangt memungkinkan Anda untuk membangun mesin virtual Vagrant dengan bantuan Chef.
Puphpet: GUI sederhana untuk mengatur mesin virtual untuk pengembangan PHP. Selain VMs lokal, dapat digunakan untuk menyebarkan layanan cloud juga. Provisi ini dibuat dengan Puppet.
Protobox: adalah layer di atas vagrant dan GUI web untuk setup mesin virtual untuk pengembangan web. Sebuah dokumen YAML tunggal mengendalikan semuanya yang diinstal pada mesin virtual.
Ada beberapa cara untuk
setup PHP di Windows. Anda
dapat [men-download binari]
[php-download].
Untuk proses belajar dan
development di lokal, Anda
dapat menggunakan built in
webserver dengan PHP 5.4+
sehingga Anda tidak perlu
mengkhawatirkan konfigurasi
yang rumit.
Jika Anda ingin paket “all-in-
one” yang mencakup
webserver dan MySQL, paket
seperti Web Platform Installer ,
Zend Server CE, XAMPP dan
WAMP akan membantu
memberikan environment di
Windows.
Namun, harap berhati-hati
karena paket ini akan sedikit
berbeda dari environment
produksi jadi berhati-hatilah
dengan perbedaan lingkungan
jika Anda bekerja pada
Windows dan menggunakan
untuk Linux.
Vagrant
Seringkali developer
menemukan masalah ketika
menjalankan aplikasi pada
saat development dan
production . Masalah itu
ditimbulkan karena perbedaan
environment. Misalkan
developer membuat aplikasi di
Windows, sedangkan server
produksi menggunakan Linux.
Masalah tersebut semakin
terasa ketika anda bekerja
dalam sebuah tim di mana
setiap anggota menggunakan
OS yang berbeda-beda. Salah
seorang menggunakan
Windows, satu orang menyukai
MacOS, dan lainnya memilih
Linux.
Jika itulah yang Anda alami,
mungkin ada baiknya Anda
mempertimbangkan
menggunakan mesin virtual
dalam development .
Kedengarannya rumit, tapi
dengan menggunakan Vagrant ,
Anda dapat dengan mudah
mengatur mesin virtual hanya
dalam beberapa langkah.
Mesin virtual ini kemudian
dapat diatur secara manual,
atau Anda dapat menggunakan
“provisioning” software
seperti Puppet atau Chef
untuk melakukannya.
Provisioning mesin virtual
adalah cara yang bagus untuk
memastikan bahwa beberapa
mesin ditetapkan dalam cara
yang identik. Dan
menghilangkan kebutuhan
bagi Anda untuk men-setup
nya secara manual. Anda
bahkan dapat dengan mudah
menghapus mesin virtual
tersebut dan membuatnya lagi
dari awal.
Vagrant menciptakan shared
folder yang digunakan untuk
berbagi kode antara host dan
mesin virtual Anda, yang
berarti Anda dapat membuat
dan mengedit file Anda pada
mesin host Anda dan
kemudian menjalankan kode
di dalam mesin virtual Anda.
Bantuan Singkat
Jika Anda perlu sedikit
bantuan untuk mulai
menggunakan Vagrant ada tiga
layanan yang mungkin
berguna:
Rove: layanan yang
memungkinkan Anda
untuk membangun
mesin virtual Vagrant
dengan bantuan Chef.
Puphpet: GUI
sederhana untuk
mengatur mesin virtual
untuk pengembangan
PHP. Selain VMs lokal,
dapat digunakan untuk
menyebarkan layanan
cloud juga. Provisi ini
dibuat dengan Puppet.
Protobox: adalah layer
di atas vagrant dan GUI
web untuk setup mesin
virtual untuk
pengembangan web.
Sebuah dokumen YAML
tunggal mengendalikan
semuanya yang diinstal
pada mesin virtual.
Kembali ke atas
Panduan Code
Style
Komunitas PHP sangatlah
besar dan beragam. Ada
banyak library , framework, dan
component yang sudah
tersedia. Dalam memilih
library- library dan framework
ini dan menggunakannya
dalam sebuah proyek,
developer perlu mematuhi
aturan code style yang
digunakan pada framework
tersebut.
The PHP Framework Interop
Group telah mengusulkan dan
menyetujui serangkaian
rekomendasi gaya
pengkodean. Meskipun tidak
semuanya terkait dengan code
style, tapi mereka yang
merumuskan PSR-0 , PSR-1 ,
PSR-2 dan PSR-4 .
Rekomendasi ini hanyalah
seperangkat aturan dan sudah
diadopsi oleh beberapa proyek
seperti Drupal, Zend, Symfony,
CakePHP, phpBB, AWS SDK,
FuelPHP, Lithium, dll. Anda
dapat memilih antara
mengikuti PSR untuk proyek-
proyek Anda sendiri, atau
terus menggunakan gaya
pribadi Anda sendiri.
Idealnya Anda harus menulis
kode PHP yang mematuhi
standar yang dikenal. Ini bisa
berupa kombinasi dari PSR,
atau satu standar coding yang
dibuat oleh PEAR atau Zend.
Ini berarti developer lain dapat
dengan mudah membaca dan
bekerja dengan kode Anda,
dan aplikasi yang menerapkan
komponen dapat memiliki
konsistensi bahkan ketika
bekerja dengan banyak kode
pihak ketiga.
Baca tentang PSR-0
Baca tentang PSR-1
Baca tentang PSR-2
Baca tentang PSR-4
Baca tentang PEAR
Coding Standards
Baca tentang Zend
Coding Standards
Baca tentang Symfony
Coding Standards
Anda dapat menggunakan
PHP_CodeSniffer untuk
memeriksa kode terhadap
salah satu dari rekomendasi
tersebut, dan plugin untuk
editor teks seperti Text
Sublime 2 dapat memberikan
feedback secara real time.
Gunakan tools dari Fabien
Potencier ini PHP Coding
Standards Fixer untuk secara
otomatis mengubah sintaks
kode Anda sehingga sesuai
dengan standar-standar ini,
menghemat waktu untuk
memperbaiki setiap masalah
secara manual.
Bahasa Inggris lebih disukai
untuk semua nama simbol dan
infrastruktur kode. Komentar
dapat ditulis dalam bahasa
yang mudah dibaca oleh
semua pihak saat ini dan masa
depan yang akan mengerjakan
source code tersebut.
Kembali ke atas
Gambaran
Bahasa PHP
Paradigma
Pemrograman
PHP adalah bahasa
pemrograman fleksibel,
dinamis, dan mendukung
berbagai teknik pemrograman.
Perkembangan yang sangat
pesat telah terjadi di PHP
selama bertahun-tahun,
terutama dukungan terhadap
pemrograman berorientasi
objek (OOP) di PHP 5.0 (2004),
anonymous function dan
namespace di PHP 5.3 (2009),
dan trait di PHP 5.4 (2012).
Pemrograman Berorientasi
Object
PHP sangat mendukung
pemrograman berorientasi
obyek termasuk dukungan
untuk class , abstract class,
interface, inheritance,
constructor, cloning, exception,
dan banyak lagi.
Baca tentang
Pemrograman
Berorientasi Object
pada PHP
Baca tentang Traits
Pemrograman Fungsional
PHP mendukung first class
function, yang berarti bahwa
fungsi dapat dimasukkan ke
dalam sebuah variabel. Kedua
user-defined dan built-in
fungsi dapat direferensikan
oleh variabel dan dipanggil
secara dinamis. Fungsi dapat
disahkan sebagai argumen
untuk lainnya fungsi (fitur
yang disebut fungsi-order yang
lebih tinggi) dan fungsi dapat
kembali fungsi lainnya.
Rekursi, sebuah fitur yang
memungkinkan fungsi untuk
menyebut dirinya didukung
oleh bahasa, tetapi sebagian
besar fokus kode PHP pada
iterasi.
Fungsi anonim baru (dengan
dukungan untuk penutupan)
yang hadir sejak PHP 5.3
(2009).
PHP 5.4 menambahkan
kemampuan untuk mengikat
penutupan untuk lingkup
obyek dan juga meningkatkan
dukungan untuk callables
sehingga mereka dapat
digunakan secara bergantian
dengan fungsi anonim di
hampir semua kasus.
Lanjutkan membaca
Pemrograman
Fungsional pada PHP
Baca tentang
Anonymous Functions
Baca tentang the
Closure class
Baca lebih lanjut di the
Closures RFC
Baca tentang Callables
Baca tentang
dynamically invoking
functions dengan
call_user_func_
array
Pemrograman Meta
PHP mendukung berbagai
bentuk meta-pemrograman
melalui mekanisme seperti API
Refleksi dan Metode Sihir. ada
Metode Sihir banyak tersedia
seperti __get () , __set
() , __clone () ,
__toString () , __invoke
() , dll yang memungkinkan
pengembang untuk
menghubungkan ke perilaku
kelas. Pengembang Ruby
sering mengatakan bahwa PHP
kurang method_missing ,
tetapi tersedia sebagai
__call () dan
__callStatic () .
Baca tentang Magic
Methods
Baca tentang Reflection
Namespaces
Sebagaimana disebutkan di
atas, komunitas PHP memiliki
banyak pengembang
menciptakan banyak kode. Ini
berarti bahwa kode PHP
sebuah library dapat
menggunakan nama kelas
yang sama dengan
perpustakaan lain. Ketika
kedua perpustakaan
digunakan dalam namespace
yang sama, mereka
bertabrakan dan menyebabkan
masalah.
Namespaces memecahkan
masalah ini. Seperti dijelaskan
dalam manual referensi PHP,
ruang nama dapat
dibandingkan ke direktori
sistem operasi yang namespace
file; dua file dengan nama
yang sama dapat hidup
berdampingan dalam direktori
terpisah. Demikian juga, dua
kelas PHP dengan nama yang
sama dapat hidup
berdampingan dalam PHP
terpisah namespaces. Ini
sesederhana itu.
Hal ini penting bagi Anda
untuk memberikan namespace
pada kode Anda sehingga
dapat digunakan oleh
pengembang lain tanpa rasa
takut bertabrakan dengan
library lain.
Salah satu cara yang
direkomendasikan untuk
menggunakan namespaces
diuraikan dalam PSR-0 , yang
bertujuan untuk memberikan
file standar, kelas dan
namespace konvensi untuk
memungkinkan kode plug-and-
play.
Pada bulan Desember 2013
PHP-FIG menciptakan standar
baru autoloading: PSR-4 , yang
suatu saat akan mungkin
menggantikan PSR-0. Saat ini
keduanya masih digunakan,
PSR-4 membutuhkan PHP 5.3
dan banyak proyek yang masih
menggunakan PHP 5.2 yang
saat ini menerapkan PSR-0.
Jika Anda akan menggunakan
standar autoloader untuk
aplikasi atau library baru
maka Anda hampir pasti ingin
lebih tau tentang PSR-4.
Baca tentang
Namespaces
Baca tentang PSR-0
Baca tentang PSR-4
Standard PHP
Library
Standard PHP Library (SPL)
dikemas bersamaan dengan
PHP dan menyediakan
sekumpulan class dan
interface. SPL terdiri dari class
dan interface struktur data
yang umumnya diperlukan
seperti stack , queue, heap , dan
sebagainya. Juga iterator yang
dapat traverse struktur data
tersebut yang dapat Anda
implementasikan sendiri
menggunakan interface SPL.
Baca tentang SPL
Command Line
Interface
Pada dasarnya, PHP diciptakan
untuk menulis aplikasi web.
Akan tetapi PHP juga berguna
untuk scripting program
command line interface (CLI).
CLI dengan PHP dapat
membantu Anda
mengotomatisasi tugas-tugas
umum seperti pengujian,
distribusi, dan aplikasi
administratif.
Program CLI PHP sangat
bermanfaat karena Anda
dapat menggunakan kode
aplikasi Anda secara langsung
tanpa harus membuat dan
mengamankan web GUI untuk
itu. Hanya pastikan untuk
tidak menempatkan script CLI
PHP di root web publik Anda!
Coba jalankan PHP dari baris
perintah Anda:
> php -i
Opsi -i akan menampilkan
konfigurasi PHP Anda seperti
fungsi phpinfo .
Mari kita menulis “Hello, $
name” Program CLI
sederhana. Untuk mencobanya,
membuat file bernama
hello.php , seperti di bawah
ini.
<?php
if ( $argc != 2)
{
echo "Usage
: php hello.php
[name].\n" ;
exit (1 );
}
$name = $argv [1
];
echo "Hello, $
name\n" ;
PHP set up dua variabel
khusus berdasarkan argumen
apa script Anda dijalankan. $
argc adalah variabel integer
yang berisi argumen * count *
dan $ argv adalah variabel
array yang berisi nilai * setiap
argumen *. Argumen pertama
selalu nama file script PHP
Anda, dalam hal ini
hello.php .
Expresi exit () digunakan
dengan nomor selain nol untuk
memberitahu shell bahwa
perintah gagal. Kode keluar
yang umum digunakan dapat
ditemukan [di sini] [exit-
kode].
Untuk menjalankan script kita
di atas, jalankan baris
perintah:
> php hello.php
Usage: php
hello.php [ name
]
> php hello.php
world
Hello, world
Pelajari tentang
menjalankan PHP dari
command line
Pelajari tentang setting
Windows untuk
menjalankan PHP dari
command line
XDebug
Salah satu alat yang paling
berguna dalam pengembangan
perangkat lunak adalah
debugger yang tepat. Hal ini
memungkinkan Anda untuk
melacak pelaksanaan kode
Anda dan memantau isi stack.
XDebug, debugger PHP, dapat
dimanfaatkan oleh berbagai
IDE untuk memberikan
Breakpoints dan tumpukan
inspeksi. Hal ini juga dapat
memungkinkan alat seperti
PHPUnit dan KCacheGrind
untuk melakukan analisis code
scope dan code profile .
Jika Anda telah menggunakan
var_dump / print_r, dan Anda
masih tidak dapat menemukan
solusi - mungkin Anda perlu
menggunakan debugger.
Instalasi XDebug bisa jadi
cukup rumit, tetapi salah satu
fitur yang paling penting
adalah “Remote Debugging” -
jika Anda mengembangkan
kode lokal dan kemudian
mengujinya di dalam VM atau
server lain, Remote Debugging
adalah fitur yang Anda akan
ingin mengaktifkannya segera.
Secara tradisional, Anda akan
memodifikasi file htaccess
Apache VHost atau dengan
nilai-nilai ini.:
php_value
xdebug.remote_
host=192.168.?.
?
php_value
xdebug.remote_
port=9000
“remote host” dan “remote
port” akan sesuai dengan
komputer lokal Anda dan port
yang Anda mengkonfigurasi
IDE untuk mendengarkan
pada. Maka itu hanya masalah
menempatkan IDE Anda ke
dalam “mendengarkan
koneksi” mode, dan memuat
URL:
http://your-
website.example
.com/index.php?
XDEBUG_SESSION_
START=1
IDE Anda sekarang akan
mencegat keadaan saat ini
sebagai script yang dieksekusi,
yang memungkinkan Anda
untuk mengatur breakpoints
dan probe nilai-nilai dalam
memori.
Debugger grafis membuatnya
sangat mudah untuk langkah
melalui kode, memeriksa
variabel, dan kode eval
terhadap runtime hidup.
Banyak IDE ini telah built-in
atau dukungan berbasis-plugin
untuk debugging grafis dengan
Xdebug. MacGDBp adalah tool
gratis, open-source, berdiri
sendiri Xdebug GUI untuk
Mac.
Pelajari lebih lanjut
tentang XDebug
Pelajari lebih lanjutent ang MacGDBp
Penjelasan mengenai js/java scrivpt
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. [3]
Sejarah
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha , yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript. [4] [5] Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. [6] 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. [6]
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. [6] Penulisan JavaScript Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh
di tag <head> yang dibuka dengan
tag <script type="text/
javascript"> . [7]
<script type= "text/
javascript" >
alert( "Halo
Dunia!" );
</script> Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). [7] Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut: [7]
<script type= "text/
javascript"
src= "alamat.js" >
</script>
Skrip di head Skrip ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. [7] Peletakkan skrip di head akan menjamin skrip dimuat terlebih dahulu sebelum dipanggil.
[7]
<html>
<head>
<script type= "text/
javascript" >
...
</script>
</head>
</html>
Skrip di body Skrip ini dieksekusi ketika halaman dimuat sampai di bagian <body> . [7] Ketika menempatkan skrip pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian. [7]
<html>
<head>
</head>
<body>
<script type= "text/
javascript" >
...
</script>
</body>
</html>
Jumlah JavaScript di <head> dan
<body> yang ditempatkan pada
dokumen tidak terbatas. [7]
Skrip eksternal Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. [7] Maka JavaScript dapat ditulis di file secara eksternal. [7] Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. [7] Berkas JavaScript tersebut disimpan dengan ekstensi .js. [7]
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 .
Apabila anda ingin menyertakan tautan halaman ini, untuk menjelaskan setiap pengguna untuk mengaktifkan javascript dalam lima peramban web yang paling banyak digunakan. Anda bebas menggunakan kode dibawah ini dan memodifikasinya sesuai kebutuhan anda.
<noscript>
Agar fungsi di situs ini lebih baik, anda perlu mengaktifkan JavaScript.
Berikut ini adalah
<a href="http://
www.enable-
javascript.com/id/"
target="_blank">
petunjuk cara mengaktifkan
JavaScript</a> di
peramban web Anda.
</noscript>
Pada enable-javascript.com kita mengoptimalkan pengguna yang belum mengaktifkan script sebanyak mungkin:
The instructions for your browser are put at the top of the page All the images are inlined, full- size, for easy perusing This developer-centric message is out of the way.
Kami ingin pengunjungmu untuk mengaktifkan JavaScript seperti kamu!
Opera
1. a) Klik "Menu", arahkan penunjuk pada "Settings" kemudian dekatkan kursor penunjuk pada "Quick preferences" dan centang kotak "Enable Javascript".
1. b) Jika "Menu bar" muncul, klik "Tools", dekatkan kursor penunjuk pada "Quick preferences" dan centang kotak "Enable Javascript".
1. a)
1. b)
Internet
Explorer
1. Pada menu peramban web klik ikon "Tools" dan pilih "Internet Options".
2. Pada jendela "Internet Options" pilih bagian "Security".
3. Pada bagian "Security" klik tombol "Custom level...".
4. Ketika jendela dialog "Security Settings - Internet Zone" terbuka, temukan bagian "Scripting" section.
5. Pada bagian "Active Scripting" pilih "Enable".
6. Ketika jendela "Peringatan!" tambil dan menanyakan "Are you sure you want to change the settings for this zone?" pilih
"Yes".
7. Pada jendela "Internet Options" klik tombol "OK" dan tutup jendela peramban web.
8. Klik tombol "Refresh" pada web browser untuk membuka ulang halaman.
Internet Explorer < 9
1. Pada menu peramban web klik "Tools" dan pilih "Internet Options".
2. Pada jendela "Internet Options" pilih bagian "Security".
3. Pada bagian "Security" klik tombol "Custom level...".
4. Ketika jendela dialog "Security Settings - Internet Zone" terbuka, temukan bagian "Scripting" section.
5. Pada bagian "Active Scripting" pilih "Enable".
6. Ketika jendela "Peringatan!" tambil dan menanyakan "Are you sure you want to change the
settings for this zone?" pilih "Yes".
7. Pada jendela "Internet Options" klik tombol "OK" dan tutup jendela peramban web.
8. Klik tombol "Refresh" pada web browser untuk membuka ulang
halaman.
Mozilla
Firefox
1. Pada baris alamat, ketik about:config dan tekan Enter.
2. Klik "I'll be careful, I promise" jika muncul pesan peringatan.
3. Pada kotak pencarian, temukan javascript.enabled.
4. Mengaktifkan pengaturan "javascript.enabled" (klik kanan dan pilih "Toggle" atau klik dua kali preference) untuk mengubah nilai dari "false" menjadi "true".
5. Klik tombol "Reload current page" dari peramban web untuk
membuka ulang halaman.
Google Chrome
1. Pada menu di peramban web klik "Customize and control Google Chrome" dan pilih "Settings".
2. Pada bagian "Settings" kli "Show advanced settings..."
3. Di bawah "privacy" klik pada "Content settings...".
4. Ketika jendela dialog terbuka, temukan bagian "JavaScript"dan pilih "Allow all sites to run JavaScript (disarankan)".
5. Klik tombol "OK" dan tutup jendela bowser
6. Tutup tab "Settings".
7. Klik pada tombol "Reload this page" dari browser web untuk
membuka ulang halaman.
Apple Safari
1. Pada menu peramban web, klik "Edit" dan pilih "Preferences".
2. Pada jendela "Preferences" pilih bagian "Security".
3. Di bagian "Security" cari "Web content" , centang kotak "Enable JavaScript".
4. Klik tombol the "Reload the current page" pada web browser
untuk me-refresh halaman.
Berikut ini adalah 7 hal sederhana dari Javascript, yang jika Anda telah menggunakan Javascript, berharap bahwa Anda mengetahuinya lebih awal.
1. Shortcut untuk notasi Ada beberapa cara cepat untuk proses notasi dalam Javascript. Salah satunya,
biasanya dalam mendeklarasikan suatu object, kita menulis: Namun hal yang sama ternyata bisa dibuat
seperti ini:
Dengan demikian, penulisan menjadi lebih singkat karena tidak perlu menuliskan nama object berulang kali. Jika hanya object dengan variable sedikit seperti ini, tidak masalah jika menggunakan cara pertama. Tapi bagaimana jika object tersebut memiliki puluhan variable yang harus dideklarasikan di awal?
Shortcut lainnya yang menarik adalah dalam mendeklarasikan sebuah Array. Cara lama mendeklarasikan array tersebut adalah seperti ini:
Hasil yang sama bisa didapatkan dengan cara:
Lebih sederhana karena tidak perlu menuliskan kata “new Array” di awal. Dan cara cepat notasi yang paling menarik adalah pada notasi kondisi (if). Sehingga, penggunaan
kondisi seperti ini:
dapat dipersingkat dalam satu baris menjadi: Bagian yang ada dalam tanda kurung adalah kondisi yang disyaratkan. Tanda kurung tersebut hanya memudahkan pembacaan, sehingga Anda bisa menghilangkannya jika tidak memerlukannya. Isi setelah tanda tanya (?) dan sebelum tanda titik dua (:) adalah nilai yang dipilih jika kondisi bernilai true. Sedangkan isi setelah tanda titik dua di bagian akhir adalah nilai yang dipilih jika kondisi bernilai false. Anda bisa mengaplikasikan trik ini pada banyak bagian kode program.
2. Format data JSON Sebelum mengetahui car penggunaan JSON untuk menyimpan data, biasanya programmer menyimpannya dalam bentuk array multi dimensi, string dengan tanda pemisah, dan cara lainnya yang cukup menyulitkan. Tapi dengan adanya JSON, Anda bisa menyimpan data kompleks dalam format native javascript dan tanpa perlu segala macam proses konversi. JSON adalah singkatan dari JavaScript Object Notation, yang sebenarnya memanfaatkan notasi- notasi yang telah dijelaskan pada poin pertama di atas.
Jadi, jika Anda ingin mendeklarasikan sebuah band, maka dapat ditulis sebagai berikut.
Setelah itu, Anda bisa mengaksesnya seperti biasa. Bahkan JSON ini bisa menjadi penghubung format data antara PHP dengan Javascript. Dalam PHP, tersedia fungsi
json_encode() dan json_decode() untuk memudahkannya.
3. Fungsi-fungsi native
Javascript Beberapa fungsi umum sebenarnya sudah tersedia dalam javascript, terutama untuk fungsi matematika dan manipulasi string. Dengan demikian Anda tidak perlu membuat banyak perulangan lagi beserta kondisi dan fungsi-fungsinya. Sebagai contoh, ketika mencari angka terbesar dalam sebuah array, biasanya menggunakan perulangan
seperti ini:
Padahal sebenarnya dapat dipermudah tanpa menggunakan perulangan, yaitu dengan mengurutkan nilai-nilai tersebut. Fungsi sort() sudah terdapat dalam semua array. Setelah diurutkan, maka nilai yang diambil adalah nilai yang terbesar. Proses pengurutannya sesuai dengan fungsi yang dimasukkan sebagai parameter.
Cara lainnya adalah dengan menggunakan method Math.max(). Fungsi ini mengembalikan nilai terbesar dari sekumpulan parameter yang dimasukkan. Fungsi lain yang powerful untuk memanipulasi string adalah split() dan
join(). Salah satu contoh pemanfaatannya adalah pada saat ingin menambahkan class css pada suatu elemen html. Ketika akan menambahkan class dalam sebuah elemen DOM, semisal div, maka yang harus diperhatikan adalah menambahkan spasi di akhir class tersebut jika peletakannya di paling awal class yang sudah ada, atau menambahkan spasi sebelum class tersebut jika peletakannya di paling akhir class yang sudah ada. Ketika
menghapus class tersebut, harus diperhatikan juga untuk menghilangkan spasi yang ada, karena bisa berdampak pada browser-browser lama yang tidak support hal tersebut.
Cara konvensional adalah dengan langkah sebagai berikut.
Hal tersebut cukup merepotkan, karena ada banyak kondisi yang harus dipenuhi. Namun bisa dipermudah dengan sedikit manipulasi string sederhana menggunakan fungsi split dan join tersebut, menjadi sebagai berikut.
Jadi intinya adalah mengubah string dari nama-nama class yang sudah ada menjadi bentuk array, kemudian menambahkan class yang baru. Setelah itu menggabungkan array tersebut menjadi satu string utuh kembali dengan pemisah berupa spasi.
4. Delegasi event
Penggunaan delegasi event membuat aplikasi berbasis web menjadi semakin hidup. Sebagai contoh, suatu elemen DOM jika diklik akan menjalankan suatu proses tertentu yang berbasis javascript. Biasanya, untuk memberikan handler pada banyak elemen dalam satu parent dilakukan dalam proses perulangan. Tapi ada cara yang lebih mudah, yaitu mendefinisikannya pada parent-nya saja. Sebagai contoh untuk kode html sebagai berikut.
Cara klasik yang digunakan untuk memberikan event adalah sebagai berikut. Namun cara ini dapat dipersingkat menjadi. Karena event klik terjadi pada semua elemen, maka cukup membandingkan apakah elemen tersebut adalah elemen “a” atau bukan. Dengan demikian akan mempersingkat penulisan kode program menjadi lebih sederhana.
5. Anonymous functions dan pattern singleton Salah hal yang cukup merepotkan dalam Javascript adalah tidak adanya scope dari variable. Semua variable, fungsi, object, dan array yang tidak terdapat dalam suatu fungsi lainnya dianggap sebagai variable global, yang artinya jika ada script lain yang mendeklarasikan nama yang sama, akan tertumpuk menjadi nilai yang paling akhir.
Cara untuk mengatasinya adalah dengan membuat anonymous function (fungsi tanpa nama), kemudian langsung memanggilnya. Contohnya, jika menggunakan cara biasa, maka kode di bawah ini akan menghasilkan 3 variable global dan 2 fungsi global. Dengan kode ini, semua script pada halaman yang menggunakan variable name akan terganggu. Untuk menanggulanginya, adalah dengan memasukkannya dalam sebuah fungsi.
Anda bisa membuatnya menjadi fungsi tanpa nama. Sayangnya kedua hal tersebut tidak memungkinkan variable dan fungsi di dalamnya untuk bisa diakses dari luar fungsi. Caranya
adalah dengan mengembalikan property berupa fungsi createMember() dan getMemberDetails() tersebut, sehingga kode program akan menjadi sebagai berikut. Bentuk pemrograman seperti ini dinamakan dengan design pattern singleton, dan banyak digunakan pada library javascript Yahoo User Interface (YUI). Selain penggunaan seperti contoh di atas, anonymous function juga bsia diterapkan pada banyak kasus lainnya.
6. Berikan kemudahan
Konfigurasi Setiap mengambil potongan kode javascript dari internet, mau tidak mau ada bagian yang harus diubah untuk menyesuaikan dengan kode yang telah kita miliki. Terkadang hal tersebut cukup mudah, namun bisa saja menjadi sangat sulit jika kode program tersebut sangatlah kompleks. Salah satu cara untuk mengatasi ini adalah membuat kode tersebut dapat dikonfigurasi menjadi lebih fleksibel. Langkah pembuatannya cukup mudah, seperti berikut. Buat sebuah object khusus menyimpan nilai konfigurasi kode program. Di dalamnya, deklarasikan variable- variable yang biasanya sering diubah olehorang yang menggunakan, antara lain adalah id dan nama class dalam CSS, label untuk button, nilai yang ditampilkan, dan sebagainya. Object tersebut harus memiliki akses public agar bisa diakses bagian lain.
Dengan demikian,
potongan kode program Anda dapat dijalankan pada berbagai kondisi tanpa perlu membuka ulang dan mengubah fungsi-fungsi yang sudah ada.
7. Harus support semua browser? Buang-buang waktu. Gunakan Library. Seperti yang diketahui, anatomi setiap browser bisa berbeda-beda dalam menerjemahkan bahasa javascript. Mempelajarinya akan membutuhkan waktu dan usaha yang tidak sedikit. Sebut saja ada beberapa browser umum seperti firefox, chrome, safari, opera, dan internet explorer. Tidak hanya mempelajari saat ini saja, tapi juga harus mempelajari versi-versi sebelumnya dan harus siap jika ada versi baru muncul. Karena itu, penggunaan library sangat disarankan.
Library adalah sekumpulan kode yang berisi fungsi-fungsi siap pakai untuk program Anda. Beberapa library sudah dapat mengatasi perbedaan anatomi web browser umum. Anda tinggal menggunakan fungsi-fungsi yang tersedia. Beberapa library javascript yang banyak digunakan antara lain adalah jQuery, MooTools, Prototype, Dojo Toolkit, ExtJS, dan YUI.
Anda bisa mengunjungi masing- masing websitenya dan mempelajari library mana yang paling cocok untuk Anda gunakan.
1. Ukuran file kecil
Script dari javascript memiliki ukuran
yang kecil sehingga ketika web yang
memiliki javascript ditampilkan di
browser maka akses tampilannya akan
lebih cepat dibandingkan ketika
browser membuka suatu web yang
memiliki script java. Hal ini juga
sangat berkepentingan dengan daya
kerja server. Semakin kecil space
suatu web yang disimpan dalam suatu
server maka daya kerja server ketika
di browsing oleh user di internet
akan tidak terlalu berat, selain itu
sifat javascript client side yang tidak
perlu lagi di olah oleh server ketika
browser memanggil web dari sebuah
server.
2. Mudah untuk dipelajari
Javascript merupakan bahasa semi
pemograman yang merupakan
gabungan antara bahasa pemograman
java dengan bahasa kode HTML
sehingga disebut bahasa hybrid.
Walaupun javascript merupakan
turunan dari java namun javascript
tidak memiliki aturan yang serumit
java.
3. Terbuka
Javascript tidak terikat oleh
hardware maupun software tertentu
bahkan system operasi seperti
windows maupun unix. Karena ia
bersifat terbuka, maka ia dapat
dibuat maupun di baca di semua jenis
komputer.
Kekurangan Javascript
1. Script tidak terenkripsi
Karena javascript bersifat client
side, maka script yang kita buat di
text editor dan telah dijadikan web
di server, ketika user me-request
web dari server tersebut maka sintak
javascript akan langsung ditampilkan
di browser. User bisa melihat dan
menirunya dari sourcenya.
2. Kemampuan terbatas
Walaupun javascript mampu membuat
bentuk web menjadi interaktif dan
dinamis, namun javascript tidak
mampu membuat program aplikasi
sendiri seperti java.
3. Keterbatasan Objek
Javascript tidak mampu membuat
kelas-kelas yang bisa menampung
objek-objek tambahan seperti java
karena javascript teleh memiliki
objek yang built-in pada sturktur
bahasanya.