Untuk materi awal sebelum masuk ke Ajax nih...
Apakah javascript itu ? Javascript adalah bahasa scripting yang digunakan untuk membuat website lebih ber-‘energi’, membuat website yang bersifat mati terasa hidup. Apa yang bukan Javascript ? Javascript bukan java.
JavaScript bukan HTML, tapi bisa membuat html dan membaca html.
JavaScript bukan Object Oriented yang Strict.
javascript bukan satu-satunya bahasa scripting pada web, contoh lainnya adalah vbscript. Javascript buat apa? Javascript sering digunakan untuk :
- mendeteksi dan bereaksi terhadap aktifitas user, seperti gerakan mouse.
- mengimprove website dengan navigasi2, scrolling images, menyediakan dialog box, dynamic images, bahkan shopingchart.
- untuk memvalidasi data sebelum di submit ke server. Javascript dan event HTML itu static. Javascript itu dynamic. Javascript bisa menangkap event yang terjadi saat user melakukan sesuatu. Contohnya adalah saat user menekan suatu button. Contoh berikut javascript akan mengeluarkan window alert berisi ‘aduh’ saat user mengklik tombol.. <html> <head><title>Event</title></head> <body> <form> <input type ="button" value = "Pinch me" onClick="alert('OUCH!!')" > </form> </body> </html> Adapun event2 yang biasanya terjadi : ‘ | Event Handler | What Caused It | | onAbort | Saat Image loading di interrupsi | | onBlur | Saat user pergi dari suatu form element. | | onChange | Saat user mengubah value di form element. | | onClick | Saat user melakukan click pada button-like form element. | | onError | Saat terjadi error. | | onFocus | Saat user mengaktifkan suatu elemen | | onLoad | Ketika document selesai loading. | | onMouseOut | Ketika mouse pergi dari suatu object. | | onMouseOver | Ketika mouse bergerak pada suatu object. | | onSubmit | Ketika terjadi submit form. | | onUnLoad | Ketika meninggalkan frame atau window | 
Dimana javascript ditaruh? Dimanapun pada html diantara <head> dan </head> atau diantara <body> dan </body>. Developer biasanya menaruh fungsi-fungsi dan class2 javascript pada tag head. Jika ingin menaruh code yang mengubah tampilan html, baru ditaruh di body. Sering juga java script ditaruh di luar file html. Javascript akan diekseskusi dari atas ke bawah sesuai tempatnya di HTML, kecuali jika dia sebuah function yang akan dieksekusi ketika function tersebut dipanggil. Contoh berikut akan menuliskan heading 1 pada html <html> <head><title>First JavaScript Sample</title></head> <body bgcolor="yellow" text="blue"> <script language = "JavaScript" type="text/javascript"> document.writeln("<h2>Welcome to the JavaScript World!</h1>"); </script> <font size="+2">This is just plain old HTML stuff.</font> </body> </html> Strings dalam javascript String dalam javascript dapat didalam tanda petik satu (‘) maupun petik dua (“).. Petik dua digunakan jika meulis petik satu dan sebaliknya: "I don't care" 'He cried, "Ahoy!"' untuk menggabungkan string digunakan tanda + "hot" + "dog or "San Francisco" + "</br>" menuliskan ke sesuatu bisa menggunakan write() dan writeln(). Bedanya writeln akan otomatis menambahkan baris baru. Interaksi dengan User Ada 3 macam dialog interkasi dengan user yaitu : · alert() · prompt() · confirm() Alert digunakan untuk menampilkan pesan ke user, sepert messagebox pada aplikasi desktop. <html> <head> <title>Using JavaScript alert box</title> <script language="JavaScript"> alert("Welcome to\nJavaScript Programming!"); </script </head> </html> Prompt digunakan untuk mendapat masukan dari user.
formatnya adalah : prompt(message); prompt(message, defaultText); <html> <head> <title>Using the JavaScript prompt box</title> </head> <body> <script language = "JavaScript"> var name=prompt("What is your name?", ""); document.write("<br>Welcome to my world! " + name + ".</font><br>"); </script> </body> </html> Confirm box gunanya untuk mendapatkan konfirmasi dari user <html> <head> <title>Using the JavaScript confirm box</title> </head> <body> <script language = "JavaScript"> document.clear // Clears the page if(confirm("Are you really OK?") == true){ alert("Then we can proceed!"); } else{ alert("We'll try when you feel better? "); } </script> </body> </html> Conditionals Bentuk untuk conditional di javascript sangat mirip dengan bahasa C, dan PHP, formatnya seperti dibawah: If(condition){ statements; } if (condition){ statements1; } else{ statements2; } if (condition) { statements1; } else if (condition) { statements2; } else if (condition) { statements3; } else{ statements4; } switch (expression){case label : statement(s); break; case label : statement(s); break; ... default : statement; } contoh if else <html> <head> <title>Conditional Flow Control</title> </head> <body> <script language=javascript> document.write("<h3>"); var age=prompt("How old are you? ",""); if( age >= 55 ){ document.write("You pay the senior fare! "); } else{ document.write("You pay the regular adult fare. "); } document.write("</h3>"); </script> </body> </html> contoh if else if else <html> <head> <title>Conditional Flow Control</title> </head> <body> <script language=javascript> document.write("<H2>"); var age=eval( prompt("How old are you? ","")); if( age > 0 && age <= 12 ){ document.write("You pay the child's fare. "); } else if( age > 12 && age < 60 ){ document.write("You pay the regular adult fare. "); } else { document.write("You pay the senior fare! "); } document.write("</H2>"); </script></body></html> contoh switch <html> <head> <title>The Switch Statement</title> </head> <body> <script language=javascript> <!-- var color=prompt("What is your color?",""); switch(color){ case "red": document.bgColor="color"; document.write("Red is hot."); break; case "yellow": document.bgColor=color; document.write("Yellow is warm."); break; case "green": document.bgColor="lightgreen"; document.write("Green is soothing."); break; case "blue": document.bgColor="#RRGGBB"; document.write("Blue is cool."); break; default: document.bgColor="white"; document.write("Not available today. We'll use white"); break; } //--> </script> </body> </html> Loops Loop juga mempunyai bentuk seperti C dan PHP, yaitu dengan : · for · while · do/while contoh untuk for <html> <head> <title>Looping Constructs</title> </head> <body> <h2>For Loop</h2> <script language="JavaScript"> document.write("<font size='+2'>"); for( var i = 0; i < 10; i++ ){ document.writeln(i); } </script> </body> </html> contoh untuk while <html> <head> <title>Looping Constructs</title> </head> <body> <h2>While Loop</h2> <script language="JavaScript"> document.write("<font size='+2'>"); var i=0; // Initialize loop counter while ( i < 10 ){ // Test document.writeln(i); i++; // Increment the counter } // End of loop block </script> </body> </html> contoh untuk do <html> <head> <title>Looping Constructs</title> </head> <body> <h2>Do While Loop</h2> <script language="JavaScript"> document.write("<font size='+2'>"); var i=0; do{ document.writeln(i); i++; } while ( i < 10 ) </script> </body> </html> Function Function dapat membuat program terlihat lebih ringkas dan terstruktur. Javascript memfasilitasi pembuatan fungsi seperti pada contoh dibawah: Fungsi yang dipangggil dari link <html> <head> <title>Functions</title> <script language=javascript> function greetings(){ document.bgColor="lightblue"; alert("Greetings to you!"); } </script> </head> <body><center> <a href="javascript:greetings()"><big>Click here for Salutations</big> </a><br> </center> </body> </html> fungsi yang dipanggil dari click <html> <head<title>Functions and Events</title> <script language=javascript> function greetings(){ // Function definition document.bgColor="pink"; alert("Greetings and Salutations! "); } </script> </head> <body><center> <form> <input type="button" value="Welcome button" onClick="greetings();" > </form> </body> </html> Fungsi yang berparameter <html> <head<title>Functions and Events</title> <script language=javascript> function greetings(nama){ // Function definition document.bgColor="pink"; alert("Greetings and Salutations for "+nama); } </script> </head> <body><center> <form> <input type="button" value="Welcome button" onClick="greetings('daniel');" > </form> </body> </html> Fungsi berparameter yang diambil nilainya dari textbox <html> <head<title>Functions and Events</title> <script language=javascript> function greetings(nama){ // Function definition document.bgColor="pink"; alert("Greetings and Salutations for "+nama); } </script> </head> <body><center> <form> <input type="text" name="text1" id="text1"> <input type="button" value="Welcome button" onClick="greetings(text1.value);" > </form> </body> </html> Array Didalam Javascript kita dapat pula menggunakan array, berikut contoh penggunaannya <html> <head><title>The Array Object</title> <h2>An Array of Books</h2> <script language="JavaScript"> var book = new Array(6); // Create an Array object book[0] = "War and Peace"; // Assign values to its elements book[1] = "Huckleberry Finn"; book[2] = "The Return of the Native"; book[3] = "A Christmas Carol"; book[4] = "The Yearling"; book[5] = "Exodus"; </script> </head> <body bgcolor="lightblue"> <script language="JavaScript"> document.write("<h3>"); for(var i in book){ document.write("book[" + i + "] "+ book[i] + "<br>"); } </script> </body> </html> getElementById() Method untuk menganbil handle dari suatu object html, dapat digunakan perintah getElementById. Misal ada element berikut : <body id="bdy1"> maka untuk mengambilnya dapat menggunakan bdref=document.getElementById("bdy1") Javascript innerHTML Javascript dapat mengganti isi dari suatu elemen HTML denggan mengisikan pada property innerHTML <script type="text/javascript"> function changeText(){ document.getElementById('boldStuff').innerHTML = 'Fred Flinstone';} </script> <p>Welcome to the site <b id='boldStuff'>dude</b> </p> <input type='button' onclick='changeText()' value='Change Text'/> Updating Text Based on User Input By adding a Text Input we can take the update our bold text with whatever the user types into the text input. Note: We updated the function a bit and set the id to boldStuff2. <script type="text/javascript"> function changeText2(){ var userInput = document.getElementById('userInput').value; document.getElementById('boldStuff2').innerHTML = userInput;} </script> <p>Welcome to the site <b id='boldStuff2'>dude</b> </p> <input type='text' id='userInput' value='Enter Text Here' /> <input type='button' onclick='changeText2()' value='Change Text'/> mengubah tampilan html <script type="text/javascript"> function changeText3(){ var oldHTML = document.getElementById('para').innerHTML; var newHTML = "<span style='color:#ffffff'>" + oldHTML + "</span>"; document.getElementById('para').innerHTML = newHTML;} </script> <p id='para'>Welcome to the site <b id='boldStuff3'>dude</b> </p> <input type='button' onclick='changeText3()' value='Change Text'/>
|
Kuliah TKI - Blog da...
mm Apparently, 21,000 boots imported by
Clas-class php yang ...
mm Apparently, 21,000 boots imported by
Kuliah TK Internet :...
mm Apparently, 21,000 boots imported by
The Power of GIS - U...
mm Apparently, 21,000 boots imported by
Kuliah TK Internet :...
mm Apparently, 21,000 boots imported by
JPGraph - membuat gr...
timberland - mm Apparently, 21,000 bo...
Kuliah TKI : Ajax - ...
mm Apparently, 21,000 boots imported by
Banner spesial untuk...
mm Apparently, 21,000 boots imported by