Download Makalah Komputer Java Script
Download Makalah Komputer Java Script

Pengantar JavaScript

JavaScript digunakan pada Web pages untuk meningkatkan design, validate forms, detect browsers, create cookies, GUI dsb

JavaScript adalah bahasa scripting yang paling populer di internet dan bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox, Netscape, Opera.

Menggunakan sintaks seperti C++/Java. Lihat di http://www.w3schools.com/js/

Apa itu JavaScript?

JavaScript dirancang untuk menambah interaktif HTML pages. JavaScript adalah bahasa scripting (bahasa scripting adalah sebuah lightweight programming language) JavaScript terdiri dari baris-baris code executable computer.

JavaScript biasanya embedded secara langsung pada HTML pages. JavaScript adalah interpreted language (artinya bahwa scripts dijalankan tanpa di kompile terlebih dahulu). Setiap orang dpt menggunakan JavaScript tanpa harus membeli license

Apakah Java dan JavaScript sama ?

Java dan JavaScript adalah dua bahasa yang berbeda baik dari sisi konsep maupun dari sisi desain Java (dikembangkan oleh Sun Microsystems) adalah sebuah bahasa pemrograman yang powerful & sangat kompleks – sama dengan C & C++.

Apa yang dapat dilakukan JavaScript ?

JavaScript dapat bereaksi terhadap events -JavaScript dapat di-set untuk menjalankan saat terjadi sesuatu, seperti sebuah page telah selesai dipanggil atau saat seorang user meng-klik pada HTML element

JavaScript dapat membaca dan menulis HTML elements -JavaScript dapat membaca dan mengubah isi dari HTML element

JavaScript dapat digunakan untuk mem-validasi data -JavaScript dapat digunakan untuk mem-validasi form data sebelum di-submitted ke server, hal ini akan mengamankan server dari pemrosesan extra

JavaScript dapat digunakan untuk mendeteksi browser pengunjung -JavaScript dapat digunakan untuk mendeteksi browser pengunjung dan – memanggil page lain yang secara specifik didesain untuk browser tersebut

JavaScript dapat digunakan untuk membuat cookies -JavaScript dapat digunakan untuk menyimpan dan memanggil informasi di komputer pengunjung

Pemrograman Client-Side

HTML cocok untuk mengembangkan staticpages

  • Dapat digunakan membuat text/image layout, presentation, links, …
  • Web page tampak sama setiap kali diakses
  • Untuk mengembangkan interactive/reactive pages, harus diintegrasikan dengan programming

Pemrograman client-side

Programs ditulis dalam bahasa pemrograman yang terpisah contoh : JavaScript, JScript, VBScript

Programs diembedded pada HTML Web page, untuk mengidentifikasi komponen program Contoh :

Untuk menjalankan program guna menampilkan page digunakan browser, yang mengintegrasikan dynamic output dengan static content dari HTML

Scripts vs. Programs

Bahasa scripting adalah simple, termasuk bahasa pemrograman interpreted scripts di-embedded sebagai plain text, interpreted by application

  • simpler execution model :tidak membutuhkan compiler / development environment
  • saves bandwidth : source code di-download, tidak mengcompile executable
  • platform-independence : kode di terjemahkan oleh banyak script-enabled browser
  • Tetapi : lebih lambat daripada compiled code, tidak powerful/full-featured

JavaScript: adalah Web scripting language pertama, yang dikembangkan oleh Netscape pada tahun 1995. Mirip dengan Java/C++, tetapi lebih sederhana dan lebih fleksibel (loose typing, dynamic variables, simple objects)

JScript:adalah JavaScript versi Microsoft, diperkenalkan tahun 1996 core language yang sama, tetapi beberapa browser-specific seperti, IE & Netscape umumnya dapat menangani JavaScript & JScript

VBScript: adalah client-side scripting versi Microsoft Visual Basic

Common Scripting Tasks

Menambahkan dynamic features pada Web pages

  • validation of form data
  • image rollovers
  • time-sensitive or random page elements
  • handling cookies

Mendefinisikan programs dengan Web interfaces

  • Menggunakan buttons, text boxes, clickable images, prompts, frames

Keterbatasan dari client-side scripting

  • Karena script code di-embedded dalam page, maka script dapat dilihat
  • Untuk alasan keamanan, apa yang dapat dilakukan oleh script dibatasi Contoh : tidak dapat mengakses hard drive client
  • Karena dirancang untuk berbagai platform, maka script tidak berisi perintah khusus untuk setiap platform
  • Script languages tidak full-featured Contoh : Objek JavaScript tidak cocok untuk pengembangan proyek yg besar

Sintaks JavaScript

Program JavaScript dituliskan pada file HTML (.html atau .htm) menggunakan tag < SCRIPT >

Output dari program JavaScript ditampilkan secara langsung seolah-oleh dimasukkan dalam HTML

Contoh Program JavaScript

document.write menampilkan teks dalam page. Teks yang ditampilkan dapat termasuk HTML tags. tags diterjemahkan oleh browser saat teks ditampilkan

Seperti pada C++/Java, statement diakhiri dengan ;

Komentar pada JavaScript sama dengan C++/Java

// awal satu baris komentar

/**/akhir dari beberapa baris komentar

Tipe Data dan Variabel JavaScript

JavaScript hanya mempunyai 3 tipe data primitive

String : “foo” ‘howdy do’ “I said ‘hi’.” “”

Number : 12 3.14159 1.5E6

Boolean : true false

Inisialisasi seperti pada C++/Java message = “howdy”; pi = 3.14159;

Nama variable terdiri dari letters, digits, dan underscores: diawali dengan letter
Nama variables adalah case-sensitive
you don’t have to declare variables, will be created the first time used, but better if you use var statements var message, pi=3.14159;

Operator & Statement Kontrol

Operator standard dan statement kontrol pada C++/Java sama seperti pada JavaScript

  • +, -, *, /, %, ++, –, …
  • ==, !=, <, >, <=, >=
  • &&, ||, !,===,!==
  • if-then, if-then-else, switch
  • while, for, do-while, …

Script di bawah ini adalah contoh penggunaan if -else.

Penggunaan if dapat digantikan dengan “switch”.

Loop For dan While

Adalah perintah untuk melakukan iterasi (loop) atau melakukan pengulangan.

Script di atas hanya akan memberikan hasil seperti di bawah ini. Kita cuman menghitung dari 1 sampai 7:

Ini angka 1

Ini angka 2

Ini angka 3

Ini angka 4

Ini angka 5

Ini angka 6

Ini angka 7

Sedangkan contoh penggunaan while untuk output yang sama adalah sebagai berikut :

Hasilnya seperti di bawah ini.

Ini angka 1

Ini angka 2

Ini angka 3

Ini angka 4

Ini angka 5

Ini angka 6

Ini angka 7

Memonitor User Events

Bermacam-macam onXxx Attributes

-onClick

-onBlur

-onLoad

-onSubmit

-onMouseOver

-onSelect

-onMouseOut

-onFocus

Event Handler onClick

Biasanya digunakan untuk menampilkan pesan singkat jika seseorang melakukan tindakan tertentu. Dengan pesan tersebut, maka user akan tahu akibat dari tindakannya.

Misal peringatan dengan Tombol. Penekanan dengan tombol sering digunakan untuk memberikan efek interaktif dengan user

Event Handler onMouseOver

Event handler onMouseOver ini gunanya untuk mengatur apa yang akan terjadi saat mouse kita gerakkan ke atasnya.

< A HREF=”http://xxx.com” onMouseOver=”window.status=’Ke Menu Utama’; return true”> Klik di sini< /A >

Dengan menggunakan onMouseOver juga dapat mengubah property lain. Misalnya akan mengubah warna latar dokumen, yaitu dengan menggunakan document.bgColor .

< A HREF=”http://xxx.com” onMouseOver=”document.bgColor= ‘#ffcc99’; return true”> Klik di sini< /A >

Untuk menggabung dua efek di atas, perubahan window.status dan document.bgColor -hmm tidak terlalu sulit, cukup memisahkan kedua efek tersebut dengan koma (,) seperti script berikut. Perintah onMouseOver yang kedua berada di antara tanda petik (“) untuk membuat efeknya terjadi secara simultan.

< A HREF=”http://xxx.com” onMouseOver=”document.bgColor=’#ffcc99′, onMouseOver=window.status=’Ke Menu Utama’; return true”>Klik di sini< /A >

Event Handler onMouseOver & onMouseOut

Untuk membuat gambar yang bisa berubah saat didekati mouse, cukup menggunakan script sederhana seperti di bawah ini.

< A HREF=”http://xxx.com/” onMouseOver=”document. gambarku.src=’gambar1.gif'” onMouseOut=”document.gambarku.src=’gambar2.gif'” > < IMG SRC=”gambar2.gif” BORDER=0 NAME=”gambarku” >< /a >

Saat mouse mendekati gambar, onMouseOver aktif, sehingga gambar yang muncul adalah gambar2.gif. Sedang saat mouse menjauh, onMouseOut aktif, dan gambar yang muncul adalah gambar1.gif.

Event Handler onFocus dan onBlur

Event handler onFocus ini bekerja saat user terfokus pada sebuah item.

< FORM > < INPUT TYPE=”text” SIZE=”30″ onFocus=”window.status=’Anda sekarang siap mengisi kotak’;” > < /FORM >

Event handler onBlur adalah kebalikan dari onFocus.

< FORM > < INPUT TYPE=”text” SIZE=”40″ VALUE=”Tulis nama anda, kemudian pindahkan kursor dari kotak ini” onBlur=”alert(‘Anda telah mengedit isi kotak, bener nih nggak nyesel ?’);” > < /FORM >

Event handler ini bekerja saat user memilih (memblok) isi kotak.
< FORM > < INPUT TYPE=”text” SIZE=”40″ VALUE=”Tulis nama anda, kemudian pindahkan kursor dari kotak ini” onSelect=”alert(‘Hehehe, gagal deh ngeblok’);” > < /FORM >

Event Handler onSubmit, bekerja saat user mengklik tombol submit.
< FORM onSubmit=”alert(‘Anda yakin mau mengirim data ?’)”; > < INPUT TYPE=”submit Query” > < /FORM >

User-Defined Classes

Dapat mendefinisikan class baru, tetapi dengan notasi yang awkward

  • Pendefinisian sederhana sebuah fungsi yang bertindak sebagai constructor
  • Menentukan data fields & methods menggunakan this
  • Tidak ada data yang disembunyikan : tidak dapat melindungi data atau methods

define Die function (i.e., constructor)
inisialisasi data fields pada fungsi, diawali dengan this
similarly, assign method to separately defined function (which uses this to access data)

Object dan Class

Dapat menggunakan Notasi Literal

Objek dat dibuat menggunakan notasi “literal” pada form

{ field1:val1, field2:val2, …, fieldN:valN }

Sebagai contoh, berikut ini memberikan nilai equivalent pada object1 dan object2

var object1 = new Object();

object1.x =3;

object1.x =4;

object1.x =5;

object2.x = { x:3, y:4, z:5};

Object dan Class

Methods adalah Function-Valued Properties

Tidak ada sintaks khusus untuk mendefinisikan method dari object

Berikutnya adalah property yang dimiliki oleh document yaitu seperti pada script berikut:

Script di atas akan memberikan hasil berikut:
Warna latar (background color) halaman ini #ffffff

Warna teksnya (mmm foreground color) #000000

Warna link adalah #0000ff. Kalau warna link yang aktif #0000ff

Dan warna link yang telah dikunjungi #800080.

Alamat URL halaman ini file:///F:/14.Ngajar/Web%20Programming/javascript4.htm.

Halaman yang anda lihat sebelum melihat halaman ini .

Judul halaman ini (title lah kalau nggak ngerti judul) Tutorial -Java Script.

Dokumen ini terakhir diedit: 08/29/2006 10:29:36.

Script di atas menjelaskan tentang kegunaan tiap property dari document.

Interactive Pages menggunakan Prompt

1st argument: prompt message tampak pada dialog box

2nd argument: default value akan muncul pada kotak

3rd Fungsi mengembalikan nilai yang dimasukkan oleh user ke dalam dialog box

Jika value adalah sebuah number, harus menggunakan parseFloat untuk mengubahnya

Deklarasi Fungsi

Function dideklarasikan menggunakan reserved word

Nilai yang dikembalikan tidak dideklarasikan, begitu juga tipe dari argumentasi

Contoh :

function square(x) { return(x * x); }
function factorial(n) { if (n <=0) {
return(1);
} else {
return(n * factorial(n-1));
}
}

User-Defined Functions

Pendefinisian fungsinya sama seperti pada C++/Java, kecuali :

Tidak ada return type untuk fungsi (karena variabelnya adalah loosely typed)

Tidak ada types untuk parameters (karena variabelnya adalah loosely typed)

by-value parameter passing only (parameter gets copy of argument)

can limit variable scope

Jika penggunaan pertama dari variable diawali dengan var, maka variabel tersebut adalah local pada fungsi

Untuk modularity, sebaiknya dibuat semua variabel ada pada sebuah fungsi local

Contoh Fungsi

Definisi fungsi dimulai pada HEAD

HEAD dipanggil pertama, jadi fungsi didefinisikan sebelum code dalam BODY dijalankan

Date Class

String & Array adalah class yg paling sering digunakan pada JavaScript

special purpose classes & objects juga ada

Date class dapat digunakan untuk mengakses date dan time

Utk membuat Date object, gunakan new & supply year/month/day/… yg diinginkan

today = new Date(); // sets to current date & time

newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM

methods yang termasuk adalah :
newYear.getYear()

newYear.getMonth()

newYear.getDay() dapat mengakses komponen

newYear.getHours() individual dari sebuah date

newYear.getMinutes()

newYear.getSeconds()

newYear.getMilliseconds()

Contoh Date

Script kedua yang akan kita coba adalah menampilkan waktu seperti di bawah ini: Hari ini 3-9-2006, jam: 7:16.40

Untuk menampilkan waktu seperti di atas kita dapat menggunakan script berikut:

Secara default, date akan ditampilkan secara penuh,

Sun Feb 03 22:55:20 GMT0600 (Central Standard Time) 2002

Dapat pula hanya menampilkan sebagian dari date yang diinginkan menggunakan methods

here, determine if “AM” or “PM” and adjust so hour between 1-12

10:55:20 PM

create a Die object using new (similar to String and Array)

here, the argument to Die initializes numSides for that particular object

each Die object has its own properties (numSides & numRolls)

Roll(), when called on a particular Die, accesses its numSides property and updates its NumRolls

JavaScript untuk membuat Page Dynamic

Membuat Password

Password adalah system pengamanan untuk pencegahan hal-hal yang tidak diinginkan dari pihak luar.

Penerapan password dapat dilakukan dengan berbagai cara.

Misalnya dari jumlah karakter password yang harus terdidi dari jumlah karakter tertentu, password dengan enkripsi atau pembatasan pemasukan password

Password terbatas untuk membatasi proses pengisian password yang berulang kali

LEAVE A REPLY

Please enter your comment!
Please enter your name here