Javascript S
Javascript S
JAVASCRIPT
• Java dan JavaScript adalah dua bahasa yang berbeda baik dari sisi konsep
maupun dari sisi desain
• 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 Web/TI/ AK045216/2 sks
Pemrograman Client-Side
• HTML cocok untuk mengembangkan static pages
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 : <script type="text/javascript"> … </script>
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
<HTML>
<HEAD>
<SCRIPT language=“javascript”>
<!--
// Build HTML here
<!-- akhir script -->
</SCRIPT>
</HEAD>
</HTML>
</html>
Pemrograman Web/TI/ AK045216/2 sks
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
<html>
<!–- COMP519 js02.html 07.09.2005 --> Inisialisasi seperti pada C++/Java
message = "howdy";
<head> pi = 3.14159;
<title>Data Types and Variables</title>
</head>
Nama variable terdiri dari letters, digits, dan
<body> underscores: diawali dengan letter
<script type="text/javascript">
var x, y;
x= 1024; Nama variables adalah case-sensitive
y=x; x = "foobar";
document.write("<p>x = " + y + "</p>");
you don't have to declare variables, will be
document.write("<p>x = " + x + "</p>"); created the first time used, but better if you
</script> use var statements
</body> var message, pi=3.14159;
</html>
<html>
<!–- COMP519 js03.html 7.09.2005 --> Operator standard dan statement kontrol
pada C++/Java sama seperti pada
<head> JavaScript
<title>Folding Puzzle</title>
</head>
• +, -, *, /, %, ++, --,
…
<body>
• ==, !=, <, >, <=, >=
<script type="text/javascript">
distanceToSun = 93.3e6*5280*12; • &&, ||, !,===,!==
thickness = .002;
• if-then, if-then-else, switch
foldCount = 0; • while, for, do-while, …
while (thickness < distanceToSun) {
thickness *= 2;
foldCount++;
}
document.write("Number of folds = " +
foldCount);
</script>
</body>
</html>
<SCRIPT LANGUAGE="JavaScript">
function tanya()
{ var jawab=" "
var jawab=prompt("Anda senang bikin hompej ?")
var JAWAB = jawab.toUpperCase()
var tampil="Jawab dong, ya/yup atau tidak/nggak"
if ( JAWAB == "YA" || JAWAB == "YUP")
{ var tampil="Sama dong, saya juga :D" }
if(JAWAB == "TIDAK" || JAWAB == "NGGAK")
{ var tampil="Iya euy, bikin suntuk tuh (_ _)Zz..“ }
alert(tampil)
} </SCRIPT> <b>Hobi</b>
<FORM> <INPUT TYPE="button" VALUE="polling" onClick="tanya()"> </FORM>
<HTML> <HEAD>
<TITLE>Simple JavaScript Button</TITLE>
<SCRIPT TYPE=“text/javascript">
<!--
Function dontClick() {
alert(“I told you not to click !”); }
// -->
</SCRIPT> </HEAD>
<BODY BGCOLOR=“WHITE”>
<H1>Simple JavaScript Button</H1>
<FORM>
<INPUT TYPE=“BUTTON”
VALUE=“Don’t Click Me” onClick=“alert(‘hey…I said don’t click me’); return value”>
</FORM>
</BODY></HTML>
Pemrograman Web/TI/ AK045216/2 sks
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.
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.
- Sebagai contoh, berikut ini memberikan nilai equivalent pada object1 dan
object2
var object1 = new Object();
object1.x =3;
object1.x =4;
object1.x =5;
<head>
<title>Interactive page</title> 1st argument: prompt message
</head> tampak pada dialog box
<body>
<script type="text/javascript">
2nd argument: default value
userName = prompt("What is your name?", ""); akan muncul pada kotak
userAge = prompt("Your age?", "");
3rd Fungsi mengembalikan nilai
userAge = parseFloat(userAge);
yang dimasukkan oleh user ke
document.write("Hello " + userName + ".") dalam dialog box
if (userAge < 18) {
document.write(" Do your parents know " +
"you are online?"); Jika value adalah sebuah
} number, harus menggunakan
</script> parseFloat untuk mengubahnya
<p>The rest of the page...
</body>
</html>
function factorial(n) {
if (n <=0) {
return(1);
} else {
return(n * factorial(n-1));
}
}
function isPrime(n)
// Assumes: n > 0
can limit variable scope
// Returns: true if n is prime, else false
{ Jika penggunaan pertama dari variable
if (n < 2) { diawali dengan var, maka variabel
return false; tersebut adalah local pada fungsi
}
else if (n == 2) {
return true; Untuk modularity, sebaiknya dibuat
} semua variabel ada pada sebuah
else {
for (var i = 2; i <= Math.sqrt(n); i++) {
fungsi local
if (n % i == 0) {
return false;
} }
return true;
} }
newYear.getYear()
newYear.getMonth()
newYear.getDay() dapat mengakses komponen
newYear.getHours() individual dari sebuah date
newYear.getMinutes()
newYear.getSeconds()
newYear.getMilliseconds()
Untuk menampilkan waktu seperti di atas kita dapat menggunakan script berikut:
<html>
<!–- COMP519 js11.html 09.09.2005 -->
<head> <title>Time page</title> </head>
<body>
Time when page was loaded:
<SCRIPT LANGUAGE="JavaScript"> //Script tentang waktu
Sekarang = new Date();
document.write("Hari ini " + Sekarang.getDate() + "-" +
(Sekarang.getMonth()+1)+ "-" + Sekarang.getFullYear() + ", jam: " +
Sekarang.getHours() + ":" + Sekarang.getMinutes() + "." +
Sekarang.getSeconds())
</SCRIPT>
</body> </html>
• 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