contoh makalah php(java script)

BAB I

PENDAHULUAN

Java Script adalah bahasa script yang berdasar pada objek yang memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumen HTML. Dimana objek tersebut dapat berupa suatu window, frame, URL, dokumen, form, button atau item yang lain. Yang semuanya itu mempunyai property yang saling berhubungan dengannya dan masing-masing memiliki nama, lokasi, warna nilai dan atribut lain.

Sesuai dengan perkembangan Worl Wide Web yang sangat pesat menyebabkan munculnya banyak home page dengan halaman-halaman yang sangat menarik. Halaman web yang dulunya hanya berupa teks dan gambar saja, saat ini menjadi sesuatu yang interaktif dan cerdas. Berbicara tentang Web tidak akan lepas dari HTML, bahasa yang digunakan untuk membuat halaman web. HTML merupakan bahasa yang sangat mudah dipelajari, Anda tidak perlu mempunyai latar belakang pemrograman untuk menggunakannya. Namun untuk membuat halaman web yang interaktif, HTML saja tidak cukup. Dua hal yang membuat web menjadi media interaktif adalah form dan CGI (Common Gateway Interface) Script. Dengan form dan CGI pembaca tidak hanya menerima informasi saja, tetapi sebaliknya juga bisa mengirimkan informasi kepada Anda, Ini akan menimbulkan komunikasi dua arah dan membuat web menjadi Interaktif. Form merupakan sarana yang dipakai pembaca untuk memasukan informasinya, sedangkan CGI Script bertugas untuk memproses informasi tersebut. Karena eratnya hubungan antara form dan CGI script, maka keduanya menjadi sangat perlu untuk anda pelajari

BAB II

PEMBAHASAN

1. Sejarah JavaScript

JavaScript pertama kali diperkenalkan oleh Netscape pada tahun 1995. Pada awalnya bahasa yang sekarang disebut JavaScript ini dulunya dinamai “LiveScript”” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2 yang sangat populer pada saat itu. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java”) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995.

Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser milik mereka yaitu Internet Explorer 3. JavaScript sendiri merupakan modifikasi dari bahasa pemrograman C++ dengan pola penulisan yang lebih sederhana dari bahasa pemrograman C++.

2. Pengertian JavaScript

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

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

Yang harus diperhatikan dalam pengelolaan pemrograman JavaScript, diantaranya JavaScript adalah “case sensitive”, yang artinya JavaScript membedakan huruf besar dan huruf kecil. Jika Anda pernah belajar bahasa pemrograman seperti Turbo C atau C++, maka sama seperti bahasa pemrograman tersebut, dimana huruf T tidak sama dengan huruf t.

Dalam bahasa pemrograman JavaScript juga, sebagai contoh fungsi perintah var tidak boleh ditulis Var dan juga tidak boleh ditulis VAR (huruf besar semua), yang benar adalah var (huruf kecil semua). Perintah lain adalah new Date tidak boleh ditulis new date (huruf kecil semua), dsb.

2.1. Kelebihan JavaScript

JavaScript bekerja pada sisi browser. maksudnya begini : untuk menampilkan halaman web, user menuliskan alamat web di address bar url. setelah itu, browser “mengambil” file html ( dengan file jJvaScript yang melekat padanya jika memang ada ) ke server yang beralamat di URL yang diketikan oleh user. Selesai file diambil, file ditampilkan pada browser. Nah, setelah file JavaScript berada pada browser, barulah script JavaScript tersebut bekerja.

Efek dari Javascript yang bekerja pada sisi browser ini, Javascript dapat merespon perintah user dengan cepat, dan membuat halaman web menjadi lebih responsif. JavaScript melakukan apa yang tidak bisa dilakukan oleh HTML, PHP, dan CSS : menangani hal – hal yang membutuhkan respons cepat terhadap aksi dari user.

Contoh : fungsi validasi pada form. ketika anda mengisi sebuah form yang divalidasi menggunakan JavaScript, anda mengetikkan data lalu mengetik submit, sebelum data dikirimkan ke server, data akan “dicek” terlebih dahulu pada browser menggunakan fungsi JavaScript yang ada pada halaman web. sehingga, jika memang data yang anda isikan tidak valid, daripada membuang – buang waktu dengan mengirimkan data ke server baru di validasi di server dan lalu server mengirimkan respons balik mengenai ketidak validan input data anda, lebih baik cek validasi data form dilakukan secara lokal di browser menggunakan fungsi JavaScript.

Lebih Cepat dan Lebih Hemat Implementasi terpopuler saat ini dari pemrograman JavaScript adalah teknik AJAX. (Asynchronous JavaScript and XMLHTTP ). teknik ini sering digunakan oleh aplikasi berbasis web seperti Gmail, Google Reader, dan lain lain. Teknik yang membuat pertukaran data antara server dan browser terjadi di belakang layar sehingga interaksi antara user dan aplikasi web semakin responsif. Post tersendiri untuk membahas hal ini akan kita siapkan.

Java Script bisa juga disebut bahasa script yang berdasar pada objek yang memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumen HTML. Dimana objek tersebut dapat berupa suatu window, frame, URL, dokumen, form, button atau item yang lain. Yang semuanya itu mempunyai property yang saling berhubungan dengannya dan masing-masing memiliki nama, lokasi, warna nilai dan atribut lain. Sesuai dengan perkembangan Worl Wide Web yang sangat pesat menyebabkan munculnya banyak home page dengan halaman-halaman yang sangat menarik. Halaman web yang dulunya hanya berupa teks dan gambar saja, saat ini menjadi sesuatu yang interaktif dan cerdas. Berbicara tentang Web tidak akan lepas dari HTML, bahasa yang digunakan untuk membuat halaman web. HTML merupakan bahasa yang sangat mudah dipelajari, Anda tidak perlu mempunyai latar belakang pemrograman untuk menggunakannya. Namun untuk membuat halaman web yang interaktif, HTML saja tidak cukup. Dua hal yang membuat web menjadi media interaktif adalah form dan CGI (Common Gateway Interface) Script. Dengan form dan CGI pembaca tidak hanya menerima informasi saja, tetapi sebaliknya juga bisa mengirimkan informasi kepada Anda, Ini akan menimbulkan komunikasi dua arah dan membuat web menjadi Interaktif. Form merupakan sarana yang dipakai pembaca untuk memasukan informasinya, sedangkan CGI Script bertugas untuk memproses informasi tersebut. Karena eratnya hubungan antara form dan CGI script, maka keduanya menjadi sangat perlu untuk anda pelajari

Untuk mempelajari pemrograman Java Script, ada dua piranti yang diperlukan yaitu browser dan teks editor. Teks editor adalah sebuah pengolah kata (word processor) yang menghasilkan file dalam format ASCII murni. Bila Anda adalah pengguna Windows 95/98 atau Windows NT, Anda bisa menggunakan Notepad atau Wordpad. Browser web yang akan Anda gunakan harus mendukung Java Script, Anda dapat menggunakan Netscape Navigator atau Internet Explorer. Dalam computer Anda, Anda bisa memasang kedua perangkat Browser ini.

Mengenal JavaScript Gambar 1.1. Time & Date dengan JavaScript Program JavaScript dituliskan pada file HTML dengan menggunakan tag kontainer <SCRIPT>. Dengan kata lain, Anda tidak perlu menuliskan program JavaScript pada file terpisah. Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawali dengan <NAMA_TAG> dan diakhiri dengan </NAMA_TAG>.

Contoh. <HTML></HTML> <BODY></BODY> <HEAD></HEAD> Tag kontainer <SCRIPT> mempunyai dua atribut tetapi yang harus Anda isikan hanya satu atribut yaitu Language. Isilah atribut language dengan “JavaScript”. Hal ini digunakan untuk memberitahukan pada browser bahwa yang akan Anda tulis adalah JavaScript. Contoh <SCRIPT LANGUAGE=”JavaScript”>//program Anda masukan disini </SCRIPT>

Menulis JavaScript Kode JavaScript biasanya tertanam dalam HTML, harus ditafsirkan dan dijalankan oleh browser klien. Berikut adalah beberapa tips untuk diingat ketika menulis

JavaScript perintah.

• Kode JavaScript case sensitif

• White ruang antara kata dan tab diabaikan

• Line istirahat diabaikan kecuali dalam sebuah pernyataan

• JavaScript pernyataan diakhiri dengan titik koma;

Tag SCRIPT

Tag <script> alert browser yang kode JavaScript berikut. Hal ini biasanya tertanam dalam HTML. <script Bahasa = "JavaScript">

Laporan </ SCRIPT> SCRIPT Contoh

• Buka "script_tag.html" pada browser.

• Lihat Sumber

• Tempatkan kursor setelah <! - Masukkan kode di bawah ?? dan masukkan berikut ini:

• Simpan perubahan dengan memilih Save dari menu File.

• Kemudian Refresh browser dengan mengklik tombol Refresh atau Reload.

Pelaksana JavaScript

Ada tiga cara untuk menambahkan perintah JavaScript untuk Halaman Web.

• Menyertakan kode

• Inline kode

• Eksternal file

Eksternal File dapat menggunakan atribut SRC dari tag <script> untuk memanggil kode JavaScript dari file teks eksternal. Ini berguna jika Anda memiliki banyak kode atau Anda ingin menjalankannya dari beberapa halaman, karena setiap jumlah halaman bisa menelepon sama eksternal file JavaScript. File teks itu sendiri tidak berisi tag HTML. Ini adalah panggilan dengan tag berikut: <script SRC="filename.js"> </ SCRIPT> Contoh Eksternal

• Buka "external.html" pada browser

• Lihat Sumber

• Tempatkan kursor setelah <! - Masukkan kode di sini ?? dan masukkan:

• Simpan perubahan dan browser Refresh.

3. Dasar-Dasar Pemrograman

Programmer menggunakan variabel untuk menyimpan nilai. Sebuah variabel dapat menampung beberapa jenis data. Dalam JavaScript anda tidak perlu mendeklarasikan tipe data suatu variabel sebelum menggunakannya. Setiap variabel dapat menampung semua tipe data JavaScript, termasuk:

• String data

• Jumlah

• Boolean nilai (T / F)

Nama Variabel Ada aturan dan konvensi dalam penamaan variabel dalam pemrograman apapun bahasa. Ini adalah praktik yang baik untuk menggunakan nama deskriptif untuk variabel.

berikut adalah aturan JavaScript:

• Nama variabel harus dimulai dengan huruf atau garis bawah.

firstName atau _myName

• Anda dapat menggunakan nomor dalam nama variabel, tetapi bukan

sebagai yang pertama karakter. name01 atau iuran $

• Anda tidak dapat menggunakan ruang untuk karakter terpisah.

username tidak Nama pengguna

• Mendayagunakan huruf pertama setiap kata kecuali yang pertama

salesTax atau userFirstName Variabel

• Untuk mendeklarasikan variabel, gunakan kata kunci var dan nama variabel: var username

• Untuk memberikan nilai pada variabel, tambahkan tanda yang sama dan memiliki nilai: var username = "Smith"var harga = 100

Fungsi

Dengan fungsi, Anda dapat memberikan nama untuk seluruh blok kode, yang memungkinkan Anda untuk referensi dari mana saja dalam program anda. JavaScript memiliki built-in fungsi untuk operasi beberapa standar. Berikut adalah tiga beberapa fungsi.

• alert ("pesan")

• konfirmasi ("pesan")

• prompt ("pesan")

Contoh Fungsi

• Buka "fungsi html." Dan Lihat Sumber

• Tempatkan kursor setelah "/ / tambahkan kode di sini" dan masukkan:

• var username var willDoSurvey username = prompt ("Masukkan nama Anda", "") alert ("Terima kasih," username)

• Simpan perubahan dan halaman Refresh User-Defined Fungsi

Dengan fungsi-fungsi yang ditetapkan, Anda dapat nama sebuah blok kode dan menyebutnya saat Anda membutuhkannya. Anda mendefinisikan suatu fungsi dalam bagian HEAD dari suatu halaman web. Hal ini didefinisikan dengan kata kunci fungsi, diikuti oleh nama fungsi dan setiap argumen. fungsi functionName (argumen) {laporan} User-Defined Contoh

FUNGSI RUN THE

• Buka "userdefined.html" dan Lihat Sumber

• Tempatkan kursor setelah "<- masukkan ?? fungsi!" Dan masukkan:

• Pada BODY, letakkan kursor setelah "<- masukkan def tombol di sini ->" dan masukkan: <INPUT type-"tombol" value = "Jalankan Fungsi" onClick = "showAlert ()">

• Simpan perubahan dan browser Refresh.

Objek

JavaScript mendukung pemrograman dengan objek. Obyek adalah cara mengatur variabel. Unsur-unsur layar yang berbeda seperti halaman web, bentuk, kotak teks, gambar, dan tombol diperlakukan sebagai objek. Properties dan Metode Setiap benda memiliki sifat dan metode sendiri.

• Properties mendefinisikan karakteristik objek.

Contoh: warna, panjang, nama, tinggi, lebar

• Metode adalah tindakan yang objek dapat melakukan atau yang dapat

dilakukan pada obyek.

Contoh: waspada, konfirmasi, menulis, membuka, menutup

Penamaan Objek

• Obyek diorganisasikan secara hirarki. Untuk lihat penggunaan objek:

objectName

• Untuk lihat properti dari penggunaan objek:

objectName.propertyName

• Untuk merujuk ke metode penggunaan objek:

objectName.methodName ()

Built-In Objek

Beberapa built-in objek bahasa JavaScript menawarkan lebih maju

operasi seperti:

• Math - menyediakan untuk perhitungan matematika

• Tanggal - menyediakan informasi tanggal dan waktu

• String - menyediakan untuk manipulasi string

Objek Math

Objek Math menyediakan metode untuk perhitungan matematis banyak, termasuk: abs (), log (), pow (), acak (), bulat (), sqrt () Format: Math.method (#) Math Contoh

• Jauhkan "userdefined.html" buka file

• Tempatkan kursor di bagian BODY dan masukkan:

• <script language = "JavaScript"> var theNumber = 3.14 myNum = Math.round (theNumber) </ SCRIPT>

• Simpan perubahan dan halaman Refresh

Tanggal Objek

Obyek Tanggal menyediakan hari, tanggal, dan informasi waktu.Format: dateObject.method () Tanggal Contoh

• Jauhkan "userdefined.html" buka file

• Tempatkan kursor di bagian BODY dan masukkan:

• <script language = "JavaScript"> rightNow = Tanggal var baru () theYear = rightNow.getFullYear () </ SCRIPT>

• Simpan perubahan dan halaman Refresh Objek String

Objek String memberikan metode dan properti untuk manipulasi string

dan format. Format: stringName.method ()

Contoh String

• Jauhkan "userdefined.html" buka file

• Tempatkan kursor setelah contoh Tanggal dan masukkan: theString var = "nama saya" printString var = theString.bold () var numChars = theString.length </ SCRIPT>

• Simpan perubahan dan halaman Refresh theString = Jane Smith printString = Jane Smith numChars = 10

Dokumen Obyek

Objek Document merupakan halaman Web yang di load di browser jendela, dan konten yang ditampilkan pada halaman, termasuk teks dan bentuk elemen. Metode Dokumen Anda dapat menggunakan metode dari objek dokumen untuk bekerja pada halaman Web.

Berikut adalah metode dokumen yang paling umum:

• write () - menulis string ke halaman Web open

• () - membuka dokumen barudekat

• () - menutup dokumen

Contoh Dokumen

• Jauhkan "userdefined.html" buka file

• Tempatkan kursor setelah contoh String dan masukkan: document.write (myNum) document.write (theYear) document.write (printString) document.write (numChars) </ SCRIPT>

• Simpan perubahan dan halaman Refresh

Formatting Apakah Ditulis

Anda akan melihat bahwa hasil dari semua variabel keempat dicetak pada satu baris dan tanpa spasi antara hasil. Anda bisa menghindari ini dengan memasukkan beberapa format dalam pernyataan Anda "document.write".

Contoh Format Dokumen

• Buka "write.html" dan Lihat Sumber

• Tempatkan kursor setelah "<- masukkan ?? fungsi!" Dan masukkan:

• Tempatkan kursor setelah "<- masukkan link disini ??!" Dan masukkan: HREF="JavaScript:newPage()"> <A Buat-a-Page! </ A>

• Simpan perubahan dan halaman Refresh Document Properties

Gunakan sifat dari objek dokumen untuk mengatur warna halaman, judul dan menampilkan tanggal dokumen terakhir diubah. JavaScript memiliki sekitar 150 kata warna didefinisikan Anda dapat menggunakan atau Anda dapat menyediakan kode heksadesimal RGB. Berikut adalah properti dokumen yang paling umum:

• bgcolor

• fgColor

• linkColor

• vlinkColor

• judul

• lastModified

Contoh Dokumen

• Jauhkan "write.html" buka file

• Tempatkan kursor setelah "document.write" terakhir dan masukkan:

document.bgColor = "merah"

• Simpan perubahan dan halaman Refresh

Objek Window

Objek window merupakan jendela browser. Anda dapat menggunakannya untuk membuka halaman Web dalam jendela baru dan untuk menetapkan atribut untuk jendela. Ada hanya dua sifat jendela utama. Mereka adalah:

• Status - mengatur pesan status bar

• diri - menyimpan mof nama jendela aktif

Metode Window

Metode jendela adalah terutama untuk membuka dan menutup jendela baru. Berikut ini adalah metode jendela utama. Mereka adalah:alert

• () - untuk menampilkan kotak pesan

• pastikan () - untuk menampilkan kotak konfirmasi

• prompt () - untuk menampilkan kotak prompt open

• () - untuk membuka jendela barudekat

• () - untuk menutup jendela

Contoh Window

• Buka "window.html" file dan Lihat Sumber

• Tempatkan kursor setelah "<- Masukkan fungsi di sini ??!" Dan masukkan:

• Tempatkan kursor setelah dan masukkan "<-Tambahkan link sini ??!":

<A HREF="JavaScript:openWin()"> Window Baru </ A>

• Simpan perubahan dan halaman Refresh

Atribut Window

Jika jendela default baru tidak sesuai dengan kebutuhan Anda, Anda dapat menentukan fitur yang berbeda dari jendela saat Anda membukanya. Sintaks lengkap yang "window.open" adalah sebagai berikut: window.open (URL, windowName, featurelist) Secara default, jika Anda tidak menentukan semua fitur, maka jendela akan memiliki semua mereka. Jika menetapkan fitur satu, maka jendela akan hanya memiliki Anda menetapkan sama dengan 1. Berikut ini adalah jendela atribut:

• toolbar

• menubar

• scrollbar

• resizeable

• Status

• lokasi

• direktori

Window Atribut Contoh

• Dengan file "window.html" terbuka, Lihat Sumber

• Tempatkan kursor pada "window.open" baris dan edit untuk: window.open ("windowtoo.html", "newWindow", "Width height = 200, = 200,")

• Simpan perubahan dan halaman Refresh

Obyek dan Peristiwa

Hirarki JavaScript ObjectJendela Sejarah Dokumen Lokasi Frame Link Anchor Gambar Formulir Teks Textarea Password Tombol Kirim Reset Radio Checkbox Pilih Tersembunyi

Acara

Benda-benda di sebuah halaman Web diatur dalam suatu hirarki. Semua benda properti dan metode. Selain itu, beberapa objek juga memiliki "peristiwa". Peristiwa adalah hal-hal yang terjadi, biasanya tindakan pengguna, yang berkaitan dengan obyek. The "event handler" adalah perintah yang digunakan untuk menentukan tindakan dalam respons terhadap suatu peristiwa. Berikut adalah beberapa peristiwa yang paling umum: onLoad

• - terjadi ketika halaman load di browser onUnload

• - terjadi tepat sebelum keluar halaman pengguna onMouseOver

• - terjadi ketika Anda menunjuk ke objek onMouseOut

• - terjadi ketika anda menunjuk jauh dari objek onSubmit

• - terjadi ketika Anda menyerahkan formulir onClick

• - terjadi ketika sebuah objek diklik

Acara dan Objek

Peristiwa adalah hal-hal yang terjadi, tindakan, yang berhubungan dengan objek. Berikut adalah beberapa peristiwa umum dan objek mereka associaated dengan: Objek Event onLoad Tubuh onUnload Tubuh onMouseOver Link, Button onMouseOut Link, Button onSubmit Formulir onClick Button, Checkbox, Kirim, Reset, Link Contoh: <form onSubmit="functionName()"> Gambar Rollover

Mengganti satu gambar dengan gambar kedua saat pengguna bergerak mouse dari itu adalah disebut "rollover". Peristiwa menyerukan adalah "onMouseOver" dan "onMouseOut". Objek yang digunakan dengan peristiwa ini bisa link atau tombol.

Contoh Rollover image

• Dengan file "window.html" terbuka, Lihat Sumber

• Tempatkan kursor setelah baris "<A HREF =" dan masukkan: <P> <A HREF = "URL" onMouseOver = "document.hot.src = 'hot1.gif'" onMouseOut = "document.hot.src 'hot2.gif' ="> <IMG Name="hot" src="hot2.gir"> </ A>

• Simpan perubahan dan halaman Refresh.

BAB III

PENUTUP

A. Simpulan

B. Saran

Bagi kalian semua yang mau mempelajari tentang Javascript jangan lupa untuk mempunya piranti yang telah di sebutkan di atas yaitu browser dan teks editor.

YOUTUBE CHANNEL

Slide # 1

Slide # 2

Slide # 3

Slide # 4

Slide # 5

Laman

Sunday, May 8, 2011