Download presentation
Presentation is loading. Please wait.
1
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
Dasar Javascript #2
2
Conditional Selection dengan if if (<kondisi>) {
<statement_kondisi_terpenuhi> } Contoh: var age = 10; if(age < 12) { alert(“Anak-anak");
3
Conditional Selection dengan if… else… if (<kondisi>) {
<statement_kondisi_terpenuhi> } else { <statement_kondisi_tidak terpenuhi> Contoh: var age = 10; if(age < 12) { alert("Anak-anak"); alert("Bukan anak-anak");
4
Conditional Selection dengan if… else if… else…
if (<kondisi1>) { <statement_kondisi_terpenuhi> } else if (<kondisi2>){ <statement_kondisi1_tdk_terpenuhi_kondisi2_terpenuhi> else: <statement_kondisi1_dan_kondisi2_tdk_terpenuhi> Contoh: if(age <= 12) { alert(“Anak-anak"); } else if (age < 20) { alert(“Remaja"); } else { alert(“Dewasa");
5
Operator Relasional (Komparasi)
Name Example === equality '50‘ === 50 // false 50 === 50 // true !== non-equality '50‘ !== 50 // true 50 !== 50 // false > < greater than Less than '50‘ > 40 // true 50 > 50 // false >= <= greater than or equal Less than or equal '50‘ >= 50 // true 30 >= 50 // false var age = 20; if(age > 18) { alert(“You're older than 18!"); } var name = "Jack"; if(name === "Jack") { alert("Hello Jack"); }
6
Operator Logika AND OR p q p && q F T p q p||q F T var name = "Jack";
var age = 20; if(age > 18 && name === "Jack") { alert("Hello Jack, you're older than 18!"); }
7
Array Deklarasi Array: var classMates = ["Jack", "Jamie", "Rich", "Will"]; Mengambil Isi Array: var teman2 = classMates[1]; //Jamie Deklarasi Array Dua Dimensi: var twoDArray = [ ["Jack", "Jon", "Fred"], ["Sue", "Heather", "Amy"] ]; Mengambil Isi Array Dua Dimensi: var temanCowok1 = twoDArray[0][0]; //Jack
8
Array Method push (untuk menambah elemen isi array): classMates.push("Catherine"); Menghapus Elemen Isi Array: delete classMates[1]; Method length: var twoDArray = [ ["Jack", "Jon", "Fred"], ["Sue", "Heather", "Amy"] ]; Mengambil Isi Array Dua Dimensi: var temanCowok1 = twoDArray[0][0]; //Jack
9
Loops For loops: Contoh: Contoh for untuk array:
for(before loop; condition; iteration) { //code } Contoh: for(var i = 0; i < 10; i++) { alert(i); Contoh for untuk array: for(var i = 0; i < classMates.length; i++) { alert(classMates[i]);
10
Loops While loops: Contoh: Contoh for untuk array: while(condition) {
//code } Contoh: var count = 0; while(count < 5) { alert(count); count++; Contoh for untuk array: while(count < classMates.length) { alert(classMates[count]);
11
DOM hirarki object model pada browser: window document Body Style
Event Frame History Location Navigator Screen
12
DOM dan Javascript Property dan Method pada Object Window:
Property status Method alert( ) Method confirm( ) Method prompt( ) Method open( ) Method close( )
13
DOM Contoh object model pada dokumen HTML
14
DOM - Contoh object model pada dokumen HTML
<head> <title> :: Welcome ::</title> </head> <body> <ul class="right"> <li class="has-dropdown"> <a href="#">about</a> <ul class="dropdown"> <li><a href="#">about me</a></li> </ul> </li> <a href="#">UI Tech</a> <li><a href="#">CSS</a></li> <li> <a href="#">contact</a> </body> </html>
15
DOM dan Javascript Property dan Method pada Object Document:
Method document.createElement() Method document.getElementById() Method document.getElementsByClassName() Method document.getElementsByTagName() Method document.getElementsByName() Method document.write()
16
DOM dan Javascript Property dan Method pada Object Document:
Method document.createElement() Contoh: <script> var divTambahan = document.createElement('div'); divTambahan.id="idDivBaru"; divTambahan.innerText = "ini DIV tambahan"; document.body.appendChild(divTambahan); </script>
17
DOM dan Javascript Property dan Method pada Object Document:
Method document.getElementById() Contoh: <script> function ubah() { document.getElementById("noSatu").innerText='Teks Baru'; } </script> <body> <div id=“noSatu">Teks Awal</div> <button onclick=“ubah();">Click Me</button> </body>
18
Referensi Jack Franklin, “Beginning jQuery”, Apress, 2013.
Mukund Chaudary and Ankur Kumar, “Practical jQuery, Apress, 2013.
19
That’s All Thank’s
Similar presentations
