Pengolahan Informasi Berbasis Bahasa Pemrograman Script Dasar Javascript #2
DOM hirarki object model pada browser: window document Body Style Event Frame History Location Navigator Screen
DOM Contoh object model pada dokumen HTML
DOM dan Javascript Property dan Method pada Object Document: Method document.createElement() Method document.getElementById() Method document.getElementsByClassName() Method document.getElementsByTagName() Method document.write()
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>
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>
DOM dan Javascript Property dan Method pada Object Document: Method document.getElementsClassName() Contoh: <script> function ubah() { document.getElementsByClassName("awal")[0].innerText='Te ks Baru'; } </script> <body> <div id="noSatu" class="awal">Teks Awal</div> <button onclick="ubah();">Click Me</button> </body>
DOM dan Javascript Property dan Method pada Object Document: Method document.getElementsTagName() Contoh: <script> function ubah() { document.getElementsByTagName(“div")[0].innerText='Teks Baru'; } </script> <body> <div id="noSatu" class="awal">Teks Awal</div> <button onclick="ubah();">Click Me</button> </body>
DOM dan Javascript Property dan Method pada Object Document: Method document.write() Contoh: <script> function ubah() { document.write("What is JavaScript?"); document.write("<p><br/>How to work with JavaScript?", "<br/>What is jQuery?</p>"); document.write("<div>Hello Madhav</div>") } </script> <body> <div id="noSatu" class="awal">Teks Awal</div> <button onclick="ubah();">Click Me</button> </body>
DOM hirarki object model pada browser: window document Body Style Event Frame History Location Navigator Screen
DOM dan Javascript Property dan Method pada Object History: Attribute status Method go( ) Method back( ) Method forward( )
DOM dan Javascript Property dan Method pada Object Location: Method assign( ) Method reload( ) Method replace( ) Attribute href Attribute hostname Attribute pathname location.assign('www.apress.com'); location.reload(true); location.replace("www.apress.com"); var currentUrl = location.href; // Get the current url location.href = "http://www.apress.com"; //Set the current url to apress home page
CSS CSS: Salah satu fasilitas yang diberikan untuk pemrograman HTML sehingga pengaturan/ disain tampilan web-page menjadi lebih baik. CSS: Suatu tool dan bahasa desain web site dan manajemen aplikasi. Sebagai bagian lapisan dalam Front-end web development: Document HTML & Content, Presentation CSS, Behavior Javascript
CSS Ada tiga metode cara penulisan CSS atribut, yaitu: Inline Style Sheet ditulis di dalam tag HTML Embedded Style Sheet ditulis di dalam tag style pada file HTML Linked Style Sheet ditulis pada file terpisah (.css)
CSS – Inline Style Sheet <!DOCTYPE html> <html lang="en"> <head> <title>latihanKelas_3a - Inline CSS </title> </head> <body style="background-color: cyan;"> <p id="cth1"> Ini adalah contoh tag P tanpa diformat menggunakan CSS </p> <p id="cth2" style="font-size:20pt"> tag P ini di Format dengan besar font 14 point <p id="cth3" style="font-size:14pt ; color:red"> tag P ini di Format dengan besar font 14 point, dan menggunakan warna merah </body> </html>
CSS – Embedded Style Sheet <!DOCTYPE html> <html lang="en"> <head> <title>latihanKelas_3b - Embedded CSS </title> </head> <style> body {background:blue; color:yellow; margin-left:0.5in} h1 {font-size:18pt; color:#FF0000} p {font-size:12pt; font-family:arial; text-indent:0.5in} </style> <body> <h1 id="cth1">Judul ini berukuran 18 dengan warna merah!</h1> <p id="cth2"> Tag P ini di Format dengan besar font 12 point dengan tipe font Arial dan mempunyai identasi 0.5 inch </p> <p id="cth3"> Yang perlu diperhatikan juga bahwa body disini telah diformat dengan margin kiri 0.5 inch dan warna background biru </body> </html>
CSS – Linked Style Sheet <!DOCTYPE html> <html lang="en"> <head> <title>latihanKelas_3c - Linked CSS</title> </head> <link rel="stylesheet" href="latihanKelas_3c.css" /> <body> <h1 id="cth1"> Judul ini berukuran 18 dengan warna merah! </h1> <p id="cth2"> Format tag P: ukuran font 12 point, tipe font Arial & indent 0.5in </p> <p id="cth3"> Format tag body: background-color biru, color kuning, margin kiri 0.5in </body> </html> latihanKelas_3c.css body { background-color:blue; color:yellow; margin-left:0.5in } h1 { font-size:18pt; color:red p { font-size:12pt; font-family:arial; text-indent:0.5in
CSS – Syntax selector : property : tag HTML class attribute: value; … } body { background-color:blue; color:yellow; margin-left:0.5in } h1 { font-size:18pt; color:red selector : tag HTML class dari elemen yang ingin tentukan tampilannya, property : atribut dari selector yang akan diubah nilainya.
CSS –Selector <nama_tag> { attribute: value; … } Contoh: Tag selector Class selector <nama_tag> { attribute: value; … } Contoh: h1 { font-size:18pt; color:red .<nama_class> { attribute: value; … } Contoh: .kiri { font-size:18pt; color:red
CSS – Contoh Class Selector File HTML File CSS … <body> <h1>Judul ini berukuran 18 dengan warna merah! </h1> <p id="cth2" class="kiri"> Format tag P: ukuran font 12 point, tipe font Arial & indent 0.5in </p> <p id="cth3" class="kanan"> Format tag body: background- color biru, color kuning, margin kiri 0.5in </body> .kiri { text-align: left; color:blue; } .kanan { text-align: right; color:purple;
CSS – Contoh: Membuat HighLight <!DOCTYPE html> <html lang="en"> <head> <title>latihanKelas_3e – Highlight</title> </head> <link rel="stylesheet" href="latihanKelas_3c.css" /> <body> <h1 id="cth1">Membuat HighLight dengan CSS</h1> <p> <span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span> </p> </body> </html> latihanKelas_3e.css .highlight { background-color: yellow; font-weight: bold; color: blue; }
CSS – Contoh: Membuat Dropcap <!DOCTYPE html> <html lang="en"> <head> <title>latihanKelas_3e – Highlight</title> </head> <link rel="stylesheet" href="latihanKelas_3c.css" /> <body> <h1 id="cth1">Membuat HighLight dengan CSS</h1> <span class="dropcap">c</span> <span class="normal"> ascading Style Sheet</span>, Salah satu fasilitas yang diberikan untuk pemrograman HTML sehingga pengaturan / disain tampilan web-page menjadi lebih baik. CSS dapat didefinisikan langsung pada tag HTML yang bersangkutan, atau dedefinisikan pada area head atau dibuat pada file terpisah. CSS dapat didefinisikan langsung pada tag HTML yang bersangkutan, atau dedefinisikan pada area head atau dibuat pada file terpisah. </body> </html> latihanKelas_3e.css body { text-align: justify; } .dropcap { font-size: xx-large; font-weight: bolder; color: blue; text-transform: capitalize; float: left; .normal { font-size: medium;
Referensi Augury, et. al, “Cara mudah membuat web dengan penguasaan CSS dan HTML”, Andi Publishing, 2009. Mukund Chaudary and Ankur Kumar, “Practical jQuery, Apress, 2013.
That’s All Thank’s