Slide IST209 3 Dasar Javascript CSS

Pengolahan Informasi Berbasis
Bahasa Pemrograman Script
Dasar Javascript #2

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM
• hirarki object model pada browser:
window
document
Body
Style
Event
Frame
History
Location
Navigator
Screen

Augury El Rayeb, S.Kom., MMSI.

Pengolahan Informasi Berbasis Script | IST209

DOM
• Contoh object model pada dokumen
HTML

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM dan Javascript
• Property dan Method pada Object
Document:
▫ Method document.createElement()
▫ Method document.getElementById()
▫ Method
document.getElementsByClassName()
▫ Method
document.getElementsByTagName()
▫ Method document.write()

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM dan Javascript
• Property dan Method pada Object
Document:
▫ Method document.createElement()
Contoh:

var divTambahan = document.createElement('div');
divTambahan.id="idDivBaru";
divTambahan.innerText = "ini DIV tambahan";
document.body.appendChild(divTambahan);


Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM dan Javascript
• Property dan Method pada Object Document:

▫ Method document.getElementById()
Contoh:

function ubah() {
document.getElementById("noSatu").innerText='Teks Baru';
}


Click Me


Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM dan Javascript
• Property dan Method pada Object Document:
▫ Method document.getElementsClassName()
Contoh:

function ubah() {

document.getElementsByClassName("awal")[0].innerText='Teks Baru';
}


Teks Awal
Click Me


Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM dan Javascript
• Property dan Method pada Object Document:
▫ Method document.getElementsTagName()
Contoh:

function ubah() {
document.getElementsByTagName(“div")[0].innerText='Teks Baru';
}

Teks Awal
Click Me


Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM dan Javascript
• Property dan Method pada Object Document:
▫ Method document.write()
Contoh:

function ubah() {
document.write("What is JavaScript?"); document.write("How to work with
JavaScript?",
"What is jQuery?");
document.write("Hello Madhav")
}

Teks Awal
Click Me


Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM
• hirarki object model pada browser:
window
document
Body
Style
Event
Frame
History
Location
Navigator
Screen

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM dan Javascript
• Property dan Method pada Object
History:
▫ Attribute status
▫ Method go( )
▫ Method back( )
▫ Method forward( )

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

DOM dan Javascript
• Property dan Method pada Object
Location:
▫ Method assign( )
▫ Method reload( )

▫ Method replace( )
▫ Attribute href
▫ Attribute hostname
▫ Attribute pathname

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

CSS
• CSS: Salah satu fasilitas yang diberikan
pemrograman HTML sehingga
pengaturan/
tampilan web-page menjadi lebih baik.
• CSS: Suatu tool dan
manajemen aplikasi.

bahasa

desain

web

untuk
disain

site

dan

• Sebagai bagian lapisan dalam Front-end web development:
▫ Document HTML & Content,
▫ Presentation  CSS,
▫ Behavior  Javascript

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

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)

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

CSS – Inline Style Sheet




latihanKelas_3a
latihanKelas_3a -- Inline
Inline CSS

CSS





Ini
Ini adalah
adalah contoh
contoh tag
tag PP tanpa
tanpa diformat
diformat menggunakan
menggunakan CSS
CSS



tag
tag PP ini
ini di
di Format
Format dengan
dengan besar
besar font
font 14
14 point
point



tag
tag PP ini
ini di
di Format
Format dengan
dengan besar
besar font
font 14
14 point,
point, dan
dan
menggunakan
menggunakan warna
warna merah
merah







Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

CSS – Embedded Style Sheet




latihanKelas_3b
latihanKelas_3b -- Embedded
Embedded CSS
CSS





body
body {background:blue;
{background:blue; color:yellow;
color:yellow; margin-left:0.5in}
margin-left:0.5in}
h1
h1 {font-size:18pt;
{font-size:18pt; color:#FF0000}
color:#FF0000}
pp {font-size:12pt;
{font-size:12pt; font-family:arial;
font-family:arial; text-indent:0.5in}
text-indent:0.5in}




Judul ini
ini berukuran
berukuran 18
18 dengan
dengan warna
warna merah!
merah!

Tag
Tag PP ini
ini di
di Format
Format dengan
dengan besar
besar font
font 12
12 point
point dengan
dengan tipe
tipe
font
Arial
dan
mempunyai
identasi
0.5
inch
font
Arial dan mempunyai identasi 0.5 inch



Yang
Yang perlu
perlu diperhatikan
diperhatikan juga
juga bahwa
bahwa body
body disini
disini telah
telah diformat
diformat
dengan
margin
kiri
0.5
inch
dan
warna
background
dengan margin kiri 0.5 inch dan warna background biru
biru







Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

CSS – Linked Style Sheet




latihanKelas_3c
latihanKelas_3c -- Linked
Linked CSS
CSS






Judul
Judul ini
ini berukuran
berukuran 18
18 dengan
dengan warna
warna
merah!
merah!



Format
Format tag
tag P:
P: ukuran
ukuran font
font 12
12 point,
point, tipe
tipe
font
Arial
font
Arial && indent
indent 0.5in
0.5in



Format
Format tag
tag body:
body: background-color
background-color biru,
biru,
color
kuning,
color
kuning, margin
margin kiri
kiri 0.5in
0.5in







latihanKelas_3c.css
latihanKelas_3c.css
body
body {{
background-color:blue;
background-color:blue;
color:yellow;
color:yellow;
margin-left:0.5in
margin-left:0.5in
}}
h1
h1 {{
font-size:18pt;
font-size:18pt;
color:red
color:red
}}
pp {{
font-size:12pt;
font-size:12pt;
font-family:arial;
font-family:arial;
text-indent:0.5in
text-indent:0.5in
}}

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

CSS – Syntax
selector {
attribute: value;
…
}

• selector :

body
body {{
background-color:blue;
background-color:blue;
color:yellow;
color:yellow;
margin-left:0.5in
margin-left:0.5in
}}
h1
h1 {{
font-size:18pt;
font-size:18pt;
color:red
color:red
}}

tag HTML
class
dari elemen yang ingin tentukan
tampilannya,

• property :
 atribut dari selector yang akan diubah
nilainya.

CSS –Selector
Tag selector

Class selector

{
attribute: value;
…
}

. {
attribute: value;
…
}

Contoh:

Contoh:

h1 {
font-size:18pt;
color:red
}

.kiri {
font-size:18pt;
color:red
}

CSS – Contoh Class Selector
File HTML

File CSS

…

Judul ini berukuran 18
dengan
warna merah!


Format tag P: ukuran font
12
point, tipe font Arial
& indent
0.5in


Format tag body:
backgroundcolor biru,
color kuning,
margin
kiri 0.5in



.kiri {
text-align: left;
color:blue;
}
.kanan {
text-align: right;
color:purple;
}

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

CSS – Contoh: Membuat
HighLight





latihanKelas_3e
latihanKelas_3e –– Highlight
Highlight





Membuat HighLight
HighLight dengan
dengan
CSS
CSS


This is
is aa
text.
This
text.
This is
is aa text.
text. This
This is
is aa
text.
This
text. This
This is
is aa text.
text.
This is
is aa text.
text.
This
is
a
text.
This
is
a
text.
This
This is a text. This is a text.
This is
is aa
text.
text. This
This is
is aa text.
text.
latihanKelas_3e.css
latihanKelas_3e.css
This is
is aa
text.
text.
.highlight
.highlight {{


background-color:
background-color: yellow;
yellow;


font-weight:
bold;
font-weight: bold;


color:
color: blue;
blue;
}}

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

CSS – Contoh: Membuat
Dropcap





latihanKelas_3e
latihanKelas_3e –– Highlight
Highlight





Membuat HighLight
HighLight dengan
dengan
CSS
CSS
ascading
ascading Style
Style
Sheet,
Sheet,
Salah
Salah satu
satu fasilitas
fasilitas yang
yang diberikan
diberikan untuk
untuk
pemrograman
HTML
sehingga
pengaturan
pemrograman HTML sehingga pengaturan // disain
disain
tampilan
tampilan web-page
web-page menjadi
menjadi lebih
lebih baik.
baik. CSS
CSS dapat
dapat
didefinisikan
didefinisikan langsung
langsung pada
pada tag
tag HTML
HTML yang
yang
bersangkutan,
bersangkutan, atau
atau dedefinisikan
dedefinisikan pada
pada area
area head
head
atau
atau dibuat
dibuat pada
pada file
file terpisah.
terpisah.
CSS
CSS dapat
dapat didefinisikan
didefinisikan langsung
langsung pada
pada tag
tag HTML
HTML
yang
bersangkutan,
atau
dedefinisikan
pada
yang bersangkutan, atau dedefinisikan pada area
area
head
atau
dibuat
pada
file
terpisah.
head atau dibuat pada file terpisah.




latihanKelas_3e.css
latihanKelas_3e.css

body
body {{
text-align:
text-align: justify;
justify;
}}
.dropcap
.dropcap {{
font-size:
font-size: xx-large;
xx-large;
font-weight:
font-weight: bolder;
bolder;
color:
color: blue;
blue;
text-transform:
text-transform: capitalize;
capitalize;
float:
float: left;
left;
}}
.normal
.normal {{
font-size:
font-size: medium;
medium;
color:
color: blue;
blue;
}}

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

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.

Augury El Rayeb, S.Kom., MMSI.
Pengolahan Informasi Berbasis Script | IST209

That’s All
• Thank’s