DOM
•
hirarki object model pada browser:
window
document
Body
Style Event
Frame History Location Navigator
DOM dan Javascript
•
Property dan Method pada Object
Document:
▫Method document.createElement()
▫Method document.getElementById()
▫Method
document.getElementsByClassName()
▫Method
•
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);
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>
•
Property dan Method pada Object Document:
▫Method document.getElementsClassName()
Contoh:
<script>
function ubah() {
document.getElementsByClassName("awal")[0].innerText='Teks Baru';
}
</script>
<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>
•
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>
DOM
•
hirarki object model pada browser:
window
document
Body
Style Event
Frame History Location Navigator
•
Property dan Method pada Object
History:
▫Attribute status
▫Method go( )
▫Method back( )
DOM dan Javascript
•
Property dan Method pada Object
Location:
▫Method assign( )
▫Method reload( )
▫Method replace( )
▫Attribute href
•
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,
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
<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>
<p id
="cth3" style="font-size:14pt ; color:red">
tag P ini di Format dengan besar font 14 point, dan
menggunakan warna merah
</p>
</body>
</html>
<
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
>
<
p
id
=
"cth3"
style=
"
font-size
:
14pt
;
color
:
red">
tag P ini di Format dengan besar font 14 point, dan
menggunakan warna merah
<!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 </p>
</body> </html>
<!DOCTYPE html> <html lang="en">
<head>
<title>latihanKelas_3b - Embedded CSS </title> </head>
<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
<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
</p> </body> </html>
<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
</p> </body> </html>
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 }
body {
background-color:blue;
color:yellow;
margin-left:0.5in
}
font-family:arial;
text-indent:0.5in
}
CSS – Syntax
•
selector :
tag HTML
class
dari elemen yang ingin tentukan
tampilannya,
•
property :
atribut dari selector yang akan diubah
nilainya.
background-color
:blue;
color
:yellow;
margin-left
:0.5in
}
h1
{
font-size
:18pt;
color
:red
}
body
{
background-color
:
blue
;
color
:
yellow
;
margin-left
:
0.5in
}
h1
{
font-size
:
18pt
;
color
:
red
attribute
:
value
;
…
}
Contoh:
h1
{
font-size
:
18pt
;
color
:
red
}
attribute
:
value
;
…
}
Contoh:
.kiri
{
font-size
:
18pt
;
color
:
red
…
<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
</p> </body>
.kiri {
text-align: left;
color:blue; }
.kanan {
text-align: right;
<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>
<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>
.highlight {
background-color: yellow;
font-weight: bold;
color: blue; }
.highlight {
background-color: yellow;
font-weight: bold;
color: blue; }
<!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>
<!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>
body {
text-align: justify; }
.dropcap {
font-size: xx-large;
font-weight: bolder;
color: blue;
text-transform: capitalize;
float: left; }
.normal {
font-size: medium;
color: blue; }
body {
text-align: justify; }
.dropcap {
font-size: xx-large;
font-weight: bolder;
color: blue;
text-transform: capitalize;
