Chapter 7 Javascript Muhammad Nur Faiz Aditya Wijayanto
- Slides: 29
Chapter 7 Javascript Muhammad Nur Faiz Aditya Wijayanto
Materi Java. Script • Pengenalan JS, Code JS, Display Outputs, JS Statement, Variabel dan Tipe Data, Operator Aritmatika, JS Array, JS Object, JS Conditions dan Loop, Global Variable vs Local Variable, Random Number Generator, Random Image Generator, Event Handling, JS Events, Rekursi
Pengenalan Javascript § Asal mula nama Live. Script tahun 1995 di Netscape Communications § Hasil kolaborasi antara Netcape dan Sun (pengembang java) muncul nama java. Script tanggal 4 Desember 1995 § Javascript bahasa yang mirip dengan konsep bahasa pemvis, java atau c § Bahasa yang case sensitive § Setiap intruksi diakhiri dengan ;
Javascript • Java. Script adalah bahasa pemrograman berbasiskan client side scripting, yang berarti bahwa program yang diekskusi di sisi browser / client. Teknologi javascript dibuat dengan tujuan agar dapat memperingan kerja server serta menambah sifat dinamis dan interaktif dari sebuah halaman web. Penggunaan javascript digunakan pada hal-hal yang berkaitan dengan interaksi user seperti animasi teks, efek kursor mouse, validasi inputan, dan lain sebagainya. • HTML untuk menentukan isi halaman web, CSS untuk menentukan tata letak halaman web dan Java. Script untuk memprogram perilaku halaman web. • Secara teknis, tidak ada hubungannya dengan bahasa pemrograman Java
Sintaks Java. Script • Sintaks dari Java. Script terletak pada dokumen HTML ditulis dengan sintaks: <SCRIPT language="Javascript"> Letakkan script di sini </SCRIPT>
Jenis Penulisan 1) Internal Script JS diletakkan pada <body> dan <head> pada halaman HTML Menggunakan <script> 2) External Script JS berada pada eksternal link, disimpan dengan ekstensi. js Menggunakan src untuk mencari link js. Ex : <script src =“script. js”></script> Dapat meletakkan skrip external pada <head> atau <body> dan menyesuaikan
Contoh Program JS <HTML> <HEAD> <TITLE>Contoh Program Javascript</TITLE> </HEAD> <BODY> <SCRIPT language="Javascript"> alert("Hallo Bro !"); </SCRIPT> </BODY> </HTML>
Display Output • • • Writing into an alert box, using window. alert(). Writing into the HTML output using document. writeln(). Prompt box input, using window. prompt(); Writing into an HTML element, using inner. HTML. Writing into the browser console, using console. log().
JS Statement • Java. Script statements are separated by semicolons. • Java. Script is Case Sensitive • the first character of identifiers (name of variables, keywords, functions, and labels)) must be a letter, an underscore (_), or a dollar sign ($). • To make comment, use //this is comment or /* this is • comment */
JS Keyword
Variabel dan Tipe Data • How to create variable: just use var • Example: variable. Name; • Java. Script Has Dynamic Types which means the variable (data) types will change according to the variable value. The same variable can be used as different types • Data type are: number, string, array, object, boolean, etc.
Variabel dan Tipe Data
Operator Aritmatika Operator Arti Contoh Hasil + Penjumlahan X=y+5 X=15 - Pengurangan X = y-5 X = 5 * Perkalian X = Y * 5 X = 50 / Pembagian X = y/5 X = 2 % Sisa Pembagi X = y%3 X = 1 ++ Increment X = y++ X = 11 – Decrement X = y– X = 9 Y=10
Operator Perbandingan dan Logika Operator Deskripsi Contoh == sama dengan x == 8 adalah palsu x == 5 adalah benar === adalah persis sama dengan (nilai dan jenis) === x 5 adalah benar x === “ 5” adalah palsu ! = tidak sama x! = 8 adalah benar > lebih besar dari x> 8 adalah palsu < kurang dari x <8 adalah benar > = lebih besar dari atau sama dengan x> = 8 adalah palsu <= kurang dari atau sama dengan x <= 8 adalah benar X=5
Operator Logika Operator Description Example && and (x < 10 && y > 1) is true || or (x==5 || y==5) is false ! not !(x==y) is true X=6 dan Y=3
Penggunaan parse. Int <script type="text/javascript"> var a = "100"; var b = "200"; var hasil = b+a var hasil =parse. Int(a) +parse. Int(b); document. write(hasil); </script>
Kuis Silahkan ubah source code hello. html yang sudah dicoba agar dapat menjumlahkan dua input dari user. Gunakan: 1. window. prompt untuk mendapatkan input dari user 2. parse. Int untuk memparse input dari user 3. document. writeln untuk menampilkan output
Latihan Buat halaman html untuk menampilkan aplikasi program kalkulator sederhana dengan menggunakan javascript. Contoh tampilan : Bil 1 Bil 2 + - x / Hasil Bil 1 dan Bil 2 merupakan text box, dapat diisi angka, bila tombol + atau – atau x atau / ditekan, maka akan keluar bilangan pada text box hasil, dimana bilangan ini merupakan operasi arithmetic sesuai dengan tombol yang ditekan.
Perulangan • • For While Do. . while Switch case
Function • Fungsi Rekursif adalah fungsi yang memanggil dirinya sendiri Contoh : faktorial
Global Variable vs Local Variable <script> var x = 1; //global variable function fun (){ var x = 5; //local variable } </script>
Object • var campus = “Telkom"; – var campus = {type: “telkom", color: “red"}; • Object Properties – var hero = {first. Name: “zilong", last. Name: “elite", Color: “yellow"};
Object Akses Nilai Properti Akses nilai properti dapat dilakukan dengan dua cara, yaitu: • Penggunaan kurung siku ([]) setelah nama objek. Kurung siku kemudian diisikan dengan nama properti, yang harus berupa string. Cara ini biasanya digunakan untuk nama properti yang adalah nama ilegal atau kata kunci Javascript. • Penggunaan tanda titik (. ) setelah nama objek diikuti dengan nama properti. Notasi ini merupakan notasi yang umum digunakan pada bahasa pemrograman lainnya. Sayangnya kita tidak dapat menggunakan notasi ini untuk nama ilegal atau kata kunci Javascript. • Contoh penggunaan kedua cara pemanggilan di atas adalah sebagai berikut: – hero[“color"] // Hasil: “kuning" – campus. platform // Hasil: 34
Event • Onload, onmouseout, onmouseover, onclick, onmousedown, onerror, onresize, ondblclick, etc
HTML DOM • HTML DOM mendefinisikan standar untuk mengakses dan memanipulasi dokumen HTML. • DOM standar W 3 C. • DOM mendefinisikan standar untuk mengakses dokumen HTML dan XML: • W 3 C DOM standar dipisahkan menjadi 3 bagian yang berbeda: – DOM Core - model standar untuk dokumen terstruktur – XML DOM - model standar untuk dokumen XML – HTML DOM - model standar untuk dokumen HTML
HTML DOM Nodes • DOM HTML dipandang sebagai pohon node. • Dengan HTML DOM, semua node dalam pohon dapat diakses oleh Java. Script. Semua elemen HTML (node) dapat dimodifikasi, dan node dapat dibuat atau dihapus
HTML DOM Objects - Methods dan Properties • Beberapa metode yang umum digunakan HTML DOM: – get. Element. By. Id(id) – get (mendapatkan) node (elemen) dengan id tertentu – append. Child(node) – insert (menyisipkan) node anak baru (elemen) – remove. Child(node) – remove (menghapus) child node (elemen) • Beberapa umum digunakan HTML DOM properti: – – o o o inner. HTML – nilai teks dari node (elemen) parent. Node – parent node dari node (elemen) hild. Nodes – child node dari node (elemen) attributes – attributes node dari node (elemen) x. inner. HTML - the text value of x x. node. Name - the name of x x. node. Value - the value of x x. parent. Node - the parent node of x x. child. Nodes - the child nodes of x x. attributes - the attributes nodes of x
Metode DOM Umum Method get. Element. By. Id() Description get. Elements. By. Tag. Name() Mengembalikan daftar node (collection/array of nodes) yang mengandung semua elemen dengan nama tag yang ditentukan get. Elements. By. Class. Name() Mengembalikan daftar node yang berisi semua elemen dengan kelas tertentu append. Child() Menambahkan node child baru ke node tertentu remove. Child() Removes a child node replace. Child() Replaces a child node insert. Before() Inserts a new child node sebelum child node ditentukan create. Attribute() Creates an Attribute node create. Element() Creates an Element node create. Text. Node() Creates a Text node get. Attribute() Mengembalikan nilai atribut yg ditentukan set. Attribute() Sets or changes the specified attribute, to the specified value Mengembalikan elemen yang memiliki atribut ID dengan sebuah nilai
Tugas • Buatlah web dengan Java. Script tentang perulangan, function, dan event (Setiap mhs berbeda) • Silakan ubah source code rolldice. html yang sudah dibagikan Tambahkan info jumlah dari dua nilai mata dadu yang muncul. Jika, jumlahnya di bawah 5, maka kalah. Jika, jumlahnya lebih dari sama dengan 5, maka menang.