Java Script Java Script Program Java Script merupakan
- Slides: 22
Java. Script
Java. Script Program • Java. Script merupakan bahasa pemrograman. • Terdapat instruksi-instruksi yang dieksekusi oleh komputer. • Masing-masing instruksi disebut dengan pernyataan. • Setiap pernyataan dipisahkan oleh titik koma.
Java. Script Statements • • • Values Operators Expressions Keywords Comments
Java. Script Values • Fixed values 15. 02 1502 “Java. Script” ‘Java. Script’ • variable values var x, y; x = 4; y = 5;
Java. Script Operators • Java. Script menggunakan operator aritmatika (+ - * /) untuk menghitung nilai. ( 1 + 2 ) * 3 “Java” + “Script”
Java. Script Expressions • Kombinasi dari values, variables, dan operators. <!DOCTYPE html> <body> <h 1>Java. Script Expressions</h 1> <p>Expressions menghitung nilai yaitu : </p> <p id=“demo”></p> <script> document. get. Element. By. Id(“demo”). inner. HTML = 5 * 10; </script> </body> </html>
Java. Script Keywords • Java. Script Keywords digunakan untuk mengidentifikasi tindakan yang akan dilakukan. • Var keyword untuk memberitahu browser untuk membuat variabel. var x, y; x = 1 + 2; y = x * 3;
Java. Script Comments • Komentar single line // • Komentar multiple line /* dan */ var x = 1; // baris ini akan dieksekusi // var x = 2; baris ini tidak akan dieksekusi /* var x = 3; dari baris ini sampai akhir var x = 4; tidak akan dieksekusi var x = 5; oleh browser */
Java. Script Tag • Dalam HTML, kode Java. Script disisipkan di antara tag <script> dan </script>. <!DOCTYPE html> <body> <h 1>Java. Script in Body</h 1> <p id=“demo”></p> <script> document. get. Element. By. Id(“demo”). inner. HTML = “Ini adalah Java. Script”; </script> </body> </html>
Java. Script dalam <head> <!DOCTYPE html> <head> <script> function fungsi 1() { document. get. Element. By. Id(“demo”). inner. HTML = “Paragraf berubah. ”; } </script> </head> <body> <h 1>Java. Script dalam head</h 1> <p id=“demo”>Ini adalah sebuah paragraf. </p> <button type=“button” onclick=“fungsi 1()”>Tekan Tombol</button> </body> </html>
Java. Script dalam <body> <!DOCTYPE html> <body> <h 1>Java. Script dalam body</h 1> <p id=“demo”>Ini adalah sebuah paragraf. </p> <button type=“button” onclick=“fungsi 1()”>Tekan Tombol</button> <script> function fungsi 1() { document. get. Element. By. Id(“demo”). inner. HTML = “Paragraf berubah. ”; } </script> </body> </html>
External Java. Script scriptsaya. js function fungsi 1() { document. get. Element. By. Id(“demo”). inner. HTML = ”Paragraf berubah. ”; }
External Java. Script <!DOCTYPE html> <body> <h 1>External Java. Script</h 1> <p id=“demo”>Ini adalah sebuah paragraf. </p> <button type=“button” onclick=“fungsi 1()”>Tekan Tombol</button> <p>(fungsi 1 disimpan pada file eksternal yaitu file “scriptsaya. js”)</p> <script src=“. /scriptsaya. js”></script> </body> </html>
Mengubah Konten HTML <!DOCTYPE html> <body> <h 1>Apa yang bisa dilakukan Java. Script? </h 1> <p id=“demo”>Java. Script dapat merubah konten HTML. </p> <button type=“button” onclick=‘document. get. Element. By. Id(“demo”). inner. HTML = “Ini adalah Java. Script”’>Tekan Tombol</button> </body> </html>
Mengubah Atribut HTML <!DOCTYPE html> <body> <h 1>Apa yang bisa dilakukan Java. Script? </h 1> <p>Java. Script bisa merubah atribut HTML. </p> <p>Pada contoh ini Java. Script merubah src (source) atribut dari sebuah gambar. </p> <button onclick=“document. get. Element. By. Id(‘gambar’). src=‘lampu_hidup. gif’”> Nyalakan Lampu</button> <img id=“gambar” src=“lampu_mati. gif” style=“width: 100 px”> <button onclick=“document. get. Element. By. Id(‘gambar’). src=‘lampu_mati. gif’”> Matikan Lampu</button> </body> </html>
Mengubah HTML Styles (CSS) <!DOCTYPE html> <body> <h 1>Apa yang bisa dilakukan Java. Script? </h 1> <p id=“demo”>Java. Script bisa merubah style dari elemen HTML. </p> <button type=“button” onclick=“document. get. Element. By. Id(‘demo’). style. f ont. Size=‘ 35 px’”>Tekan Tombol</button> </body> </html>
Menyembunyikan Elemen HTML <!DOCTYPE html> <body> <h 1>Apa yang bisa dilakukan Java. Script? </h 1> <p id=“demo”>Java. Script bisa menyembunyikan elemen HTML. </p> <button type=“button” onclick=“document. get. Element. By. Id(‘demo’). style. d isplay=‘none’”>Tekan Tombol</button> </body> </html>
Memunculkan Elemen HTML <!DOCTYPE html> <body> <h 1>Apa yang bisa dilakukan Java. Script? </h 1> <p>Java. Script bisa memunculkan elemen HTML yang disembunyikan. </p> <p id=“demo” style=“display: none”>Ini adalah Java. Script</p> <button type=“button” onclick=“document. get. Element. By. Id(‘demo’). style. display=‘blo ck’”>Tekan Tombol</button> </body> </html>
Tipe Data Java. Script • Variabel Java. Script dapat menyimpan banyak tipe data : angka, string, objek dan sebagainya : var panjang = 10; var Nama. Belakang = “Pekerti"; var x = {Nama. Depan: “Budi", Nama. Belakang: “Pekerti"}; // Angka // String // Objek
Konsep Tipe Data var x = 1 + 2 + “kata”; Var x = “kata” + 1 + 2; → 3 kata → kata 12
Tipe Data Java. Script Bersifat Dinamis <!DOCTYPE html> <body> <h 1>Tipe Data Java. Script</h 1> <p>Tipe data Java. Script bersifat dinamis. Artinya variabel yang sama bisa digunakan untuk menyimpan tipe data yang berbeda : </p> <p id=“demo”></p> <script> var x; // sekarang x didefinisikan x = 10; // sekarang x adalah angka x = “Java. Script”; // sekarang x adalah string document. get. Element. By. Id(“demo”). inner. HTML = x; </script> </body> </html>
Java. Script Objects <!DOCTYPE html> <body> <h 1>Java. Script Objects</h 1> <p id=“demo”></p> <script> var orang = { Nama. Depan : “Budi”, Nama. Belakang : “Pekerti”, umur : 20, rambut : “hitam” }; document. get. Element. By. Id("demo"). inner. HTML = orang. Nama. Depan + orang. Nama. Belakang + " berumur " + orang. umur + " tahun. "; </script> </body> </html>