Nama : Parlindungan Sihaloho
Npm : 120840011
M.Kuliah : Pemrograman Web
M.Kuliah : Pemrograman Web
Monggo ini Isi Blog saya...
Materi:
Blog yang paling umum
digunakan:
- Blogspot
- Blogspot
-Wordpress WWW (Word Wide Web) Web adalah Teknologi di
internet yang menyediakan informasi dalam bentuk Text,Grafik,video dan
sound.
Teknologi di internet
1. Web
2. FTP (File Transfer Protokol ) Upload (Unggah) Download (Unduh)
3. Search Engine adalah mesin pencari
4. E-mail
5. chathing
6. Mosaic Bahasa standart membuat web adalah HTML (Hypertext Mark up Language) Belajar Web:
a. Struktur dasar HTML Catt: / =slash \ =Back slash < = Less than > = Greather than & = Ampersand b. Format Text
c. Format gambar
d. Format tabel
e. format Form
f. Format tag dinamisasi
Web Web statis artinya Isi web tak berubah jika kode tidak berubah dan tidak berhubungan dengan database .
Web Dinamis artinya Isi web bisa berubah tanpa merubah kode dan berhubungan dengan database.
2. FTP (File Transfer Protokol ) Upload (Unggah) Download (Unduh)
3. Search Engine adalah mesin pencari
4. E-mail
5. chathing
6. Mosaic Bahasa standart membuat web adalah HTML (Hypertext Mark up Language) Belajar Web:
a. Struktur dasar HTML Catt: / =slash \ =Back slash < = Less than > = Greather than & = Ampersand b. Format Text
c. Format gambar
d. Format tabel
e. format Form
f. Format tag dinamisasi
Web Web statis artinya Isi web tak berubah jika kode tidak berubah dan tidak berhubungan dengan database .
Web Dinamis artinya Isi web bisa berubah tanpa merubah kode dan berhubungan dengan database.
Pertemuan 1
Untuk
membuat Web digunakan bahasa standar yaitu HTML(Hyper Text Markup Languange)
dalam HTML dapat disisipkan bahasa PHP, ASP, JS sehingga membuat web lebih
menarik dan dinamis.
Hypertext Markup Language merupakan standard bahasa yang di
gunakan untuk menampilkan document web. seperti yang telah di jelaskan bahwa
suatu dokumen HTML itu terdiri dari tiga elemen utama yaitu : Html, Head, dan
body, yang dalam penulisanya di awali dengan tag pembuka "<
>" dan diakhiri dengan tag penutup "</ >".
Hal-hal yang bisa kita lakukan dengan HTML yaitu:
Hal-hal yang bisa kita lakukan dengan HTML yaitu:
·
Mengontrol
tampilan dari web page dan contentnya.
·
Mempublikasikan
document secara online sehingga bisa di akses dari seluruh dunia.
·
Membuat
online form yang bisa di gunakan untuk menangani pendaftaran, transaksi
secara online.
·
Menambahkan
object-object seperti image, audi, video dan juga java applet dalam document
HTML.
Arsitektur
web terbagi atas 2 (Dua) yaitu :
1. Web Statis adalah web
yang isinya tidak akan berubah kecuali kode program berubah. Bahasa yang
digunakan adalah HTML, CSS, JS.
2. Web Dinamis adalah web
yang isinya dapat berubah tanpa merubah kode program. Bahasa yang
digunakan adalah HTML, CSS, JSS, PHP, MYSQL.
- HTML (
Hypertext Markup Language)
- CSS (
Cascading Style Sheet)
- JS (
Java Script)
- PHP (
Personal Home Page)
- MYSQL
( Basis Data Server)
Adapun
Perbedaan Web dengan dengan Blog adalah Web isinya bersifat umum sedangkan Blog
isninya bersifat khusus.
1.
HTML
A.
Struktur
Contoh :
<html>
<html>
<head>
<tittle> </tittle>
</head>
<tittle> </tittle>
</head>
<body>
</body>
</html>
untuk membuktikannya bahwa kita bisa langsung melihat kode sumber suatu halaman website.
Caranya adalah :
1. Buka editor Notepad
2. Ketikkan kode(struktur) html diatas di dalam
notepad.
3. Simpan dengan nama latihan1.html misanya
4. Jalankan Web Browser atau Google Chrome, mozilla firefox , opera .
5. Buka File latihan1.html dari web browser yang
sudah berjalan
Pertemuan II
Suatu
web dirancang sesuai dengan tujuan usaha/ bisnis.
Cth:
Contoh
di atas merupakan contoh penggunaan dari web.
Web
diracang sesuai kebutuhan pengguna/user.
Dalam
suatu web membutuhkan software, dan ada juga software yang saling berhubungan.
yaitu Costumer,
Development, User.
Software house terbagi menjadi beberapa bagian yaitu :
1. Operator
(Typing Master)
2. Analyst
3. Programmer
4. Manager
PROGRAMING
Program
di web ada dua macam yaitu:
1. Tag
<ol> (Ordered List)
2. Tag
>ul> (unordered List)
Penomoran
dengan menggunakan tag <ul>
PENOMORAN
|
KODE HTML
|
Daftar Belanja
|
Daftar Belanja <BR>
|
1. APEL
|
<ul>
|
2. JERUK
|
<li>APEL</li>
|
3. PISANG
|
<li>JERUK</li>
|
<li>PISANG</li>
|
|
</ul>
|
Penomoran
dengan menggunakan tag <ol>
PENOMORAN
|
KODE HTML
|
Teman-temanku
|
Teman-temanku <BR>
|
1. ADI
|
<ol>
|
2. BUDI
|
<li>ADI</li>
|
3. SUCI
|
<li>BUDI</li>
|
<li>SUCI</li>
|
|
</ol>
|
Contoh
: web sederhana
Logo
|
|
Menu
|
Isi
|
<html>
<head>
<title></title>
</head>
<body>
<table border=1px width=75%
height=75%>
<TR>
<td colspan=2>logo</td>
</TR>
<TR>
<td>menu</td>
<td>isi</td>
</TR>
</table>
</body>
</html>
|
Contoh :
Tabel 2 baris 1 kolom
1.buka editor notepad
2.Ketikkan Struktur Html
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3.simpan kode html dengan nama lat1.html
4.jalankan web browser
5.buka file lat1.html dari web browser
6.rancanglah tabel seperti di bawah ini
2.Ketikkan Struktur Html
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3.simpan kode html dengan nama lat1.html
4.jalankan web browser
5.buka file lat1.html dari web browser
6.rancanglah tabel seperti di bawah ini
Ok
|
Bro
|
Kode htmlnya :
<html>
<head>
<title></title>
</head>
<body>
<table border=1px width=75%
height=75%>
<TR>
<TD>Kamu</TD>
</TR>
<TR>
<TD>Saya</TD>
</TR>
</table>
</body>
</html>
|
Contoh :
2 baris 2 kolom
1
|
1
|
2
|
Cth:
<html>
<head>
<title></title>
</head>
<body>
<table border=1px width=75%
height=75%>
<TR>
<td rowspan=2>1</td>
<td>1</td>
</TR>
<TR>
<td>2</td>
</TR>
</table>
</body>
</html>
|
PERTEMUAN III
MATERI :
1. Website Template
2.Formulir
1. Website Template
2.Formulir
1.Website template
adalah tata letak Informasi atau data dalam suatu website.
Contoh :
Sumber :
www.google.com
Tabel banyak
digunakan dalam mengatur tata letak informasi atau data dalam suatu website.
Untuk membuat website biasanya terdiri
dari 1 kolom dan 2 baris seperti :
LOGO
|
Isi Web
|
Dalam HTML untuk membuat tabel digunakan tag <table>
Contoh tag table
<html>
<head>
<title>….</title>
</head>
<body>
<table>
<TR>
<TD>….</TD>
</TR>
<TR>
<TD>…</TD>
</TR>
</table>
</body>
</html>
<html>
<head>
<title>….</title>
</head>
<body>
<table>
<TR>
<TD>….</TD>
</TR>
<TR>
<TD>…</TD>
</TR>
</table>
</body>
</html>
UNTUK MEMBUAT TABEL dengan berbgai
kolom dan baris
.
.
.
<table>
<TR>
<TD colspan=2>….</TD>
</TR>
<TR>
<TD>…..</TD>
<TD>…..</TD>
</TR>
.
.
<table>
<TR>
<TD colspan=2>….</TD>
</TR>
<TR>
<TD>…..</TD>
<TD>…..</TD>
</TR>
</table>
.
.
.
.
.
.
2.
.
.
.
.
<table>
<TR>
<TD rowspan=2>….</TD>
<TD>….</TD>
</TR>
<TR>
<TD>….</TD>
</TR>
</table>
.
.
.
<table>
<TR>
<TD rowspan=2>….</TD>
<TD>….</TD>
</TR>
<TR>
<TD>….</TD>
</TR>
</table>
.
.
.
3.
.
.
.
<table>
<TR>
<TD colspan=2>….</TD>
</TR>
<TR>
<TD rowspan=2>….</TD>
<TD>…..</TD>
</TR>
<TR>
<TD>…..</TD>
</TR>
</table>
.
<table>
<TR>
<TD colspan=2>….</TD>
</TR>
<TR>
<TD rowspan=2>….</TD>
<TD>…..</TD>
</TR>
<TR>
<TD>…..</TD>
</TR>
</table>
TEORI PERTEMUAN IV
CSS merupakan singkatan dari Cascading
Style Sheets, CSS adalah bahasa yang digunakan untuk mengatur desain
suatu halaman HTML atau XHTML. CSS ini merupakan standarisasi dalam mendesain
sebuah web yang dikembangkan oleh W3C (World Wide Web
Consortium).
Dengan CSS ini pekerjaan seorang webdeveloper atau webdesigner menjadi lebih mudah, karena dengan hanya menuliskan satu style saja bisa digunakan berulang-ulang kali.
Css (Cascading Style Sheet) adalah bahasa presentasi Html. Artinya tampilan awal suatu website masih bisa di format dengan kode css. Css digunakan untuk memformat tag-tag Html.
Terdapat tiga jenis css yaitu :
1. Inline css
2. Internal css
3. External css
· Inline css
Inline css adalah kode- kode css yang digunakan langsunga pada elemen HTML .Inline css ditandai dengan kata STYLE dalam tag html tersebut. Dan cara penulisanya cukup dengan menambahkan atribut STYLE . Contoh : format tag <body> untuk warna putih dan warna latar belakang hitam.
Jawab :
<body style="color:white;background-color:black;">
· Internal css
Diletakkan di bagian tag head.
Internal css ditandai dengan kata <style> </style>.
Contoh :
<Html>
<Head>
<Title>internal css</title>
<style>
h1 {
color : yellow;
font-size : 50px;
background-color: teal;
border : 5px solid cyan;
text-align : center;
}
</Style>
<Body>
</body>
</Html>
· External css
External CSS adalah sebuah document/file yang hanya berisikan kode kode CSS, extensi file css biasanya “.css”. External CSS ini terpisah dari file HTML, untuk di butuhkan sebuah perintah untuk menghubungkan/memanggil External CSS pada file HTML. Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> … </head>.
Juga diletakkan di tag Head dandi tandai dengan kata link Style Sheet.
Contoh :
1. Spasi = satu setengah spasi
2. Indent = 50 px
3. Tulisa rata kiri dan kanan
4. Besar tulisan 12 px
5. Besar jenis tulisan area
6. Paragraf berlatar belakang warna biru
7. Tulisan berwarna putih
Dengan CSS ini pekerjaan seorang webdeveloper atau webdesigner menjadi lebih mudah, karena dengan hanya menuliskan satu style saja bisa digunakan berulang-ulang kali.
Css (Cascading Style Sheet) adalah bahasa presentasi Html. Artinya tampilan awal suatu website masih bisa di format dengan kode css. Css digunakan untuk memformat tag-tag Html.
Terdapat tiga jenis css yaitu :
1. Inline css
2. Internal css
3. External css
· Inline css
Inline css adalah kode- kode css yang digunakan langsunga pada elemen HTML .Inline css ditandai dengan kata STYLE dalam tag html tersebut. Dan cara penulisanya cukup dengan menambahkan atribut STYLE . Contoh : format tag <body> untuk warna putih dan warna latar belakang hitam.
Jawab :
<body style="color:white;background-color:black;">
· Internal css
Diletakkan di bagian tag head.
Internal css ditandai dengan kata <style> </style>.
Contoh :
<Html>
<Head>
<Title>internal css</title>
<style>
h1 {
color : yellow;
font-size : 50px;
background-color: teal;
border : 5px solid cyan;
text-align : center;
}
</Style>
<Body>
</body>
</Html>
· External css
External CSS adalah sebuah document/file yang hanya berisikan kode kode CSS, extensi file css biasanya “.css”. External CSS ini terpisah dari file HTML, untuk di butuhkan sebuah perintah untuk menghubungkan/memanggil External CSS pada file HTML. Pada berkas HTML yang akan menggunakan berkas CSS, harus dibuat tag <link> yang dituliskan di antara tag <head> … </head>.
Juga diletakkan di tag Head dandi tandai dengan kata link Style Sheet.
Contoh :
1. Spasi = satu setengah spasi
2. Indent = 50 px
3. Tulisa rata kiri dan kanan
4. Besar tulisan 12 px
5. Besar jenis tulisan area
6. Paragraf berlatar belakang warna biru
7. Tulisan berwarna putih
Materi :
1. Cascading Style Sheet (CSS)
2. Desain Web Dengan CSS
Ada 3
Jenis CSS yaitu :
1. Inline css
2. Internal css
3. External css
Inline css
à css yang dituliskan di dalam
tag html
Contoh format tag <body>
untuk warna putih dan warna latar belakang hitam
<body
style="color:white;background-color:black;">
|
à setiap attribut dipisahkan
tanda ; (semicolon)
Latihan 1.
1. Jalankan notepad
2. Ketikkan struktur HTML
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
</body>
</html>
|
3. format tag
<body> warna tulisan putih dan warna latar belakang hitam
<html>
<head>
<title>Inline CSS</title>
</head>
<body style="color:white;background-color:black;">
</body>
</html>
|
4. Ketikkan tulisan dalam tag <body>
<html>
<head>
<title>Inline
CSS</title>
</head>
<body
style="color:white;background-color:black;">
Selamat Datang di Program Studi Sistem
Informasi
Fakultas Ilmu Komputer, Universitas
Katolik St. Thomas
Sumatera Utara Medan.
</body>
</html>
|
5. Masukkan tag <h1> dan format tag <h1>
<html>
<head>
<title>Inline CSS</title>
</head>
<body
style="color:white;background-color:black;">
Selamat Datang
di Program Studi Sistem Informasi
Fakultas Ilmu
Komputer, Universitas Katolik St. Thomas
Sumatera Utara Medan.
<!-- Tag h1 tanpa style -->
<h1>Pemrograman Web</h1>
<!-- Tag h1 dengan style -->
<h1 style="color : yellow;
font-size : 50px;
background-color: teal;
border : 5px solid cyan;
text-align : center;">Prodi
Sisfo</h1>
</body>
</html>
|
6. Format tag <p>
<html>
<head>
<title>Inline CSS</title>
</head>
<body
style="color:white;background-color:black;">
Selamat Datang
di Program Studi Sistem Informasi
Fakultas Ilmu
Komputer, Universitas Katolik St. Thomas
Sumatera Utara
Medan.
<!-- Tag h1
tanpa style -->
<h1>Pemrograman Web</h1>
<!-- Tag h1
dengan style -->
<h1
style="color : yellow;
font-size : 50px;
background-color: teal;
border : 5px solid
cyan;
text-align :
center;">Prodi Sisfo</h1>
<p
style="color :
gold;
background-color: magenta;
font-size : 14pt;
font-face : Arial Verdana MS-Sanserif;
text-align : justify;
text-indent : 30px;
line-height : 50px;">
Terima Kasih Saya Ucapkan Kepada Bapa
di Surga Atas
Limpahan <b>KASIH</b> Yang
Telah Diberikan. Mulai Dari
Pagi Hari Pada Saat Bangun Tidur Hingga
Saat Ini Bapa
Tetap Menjagai Saya. Saya Sadar Bapa
Dalam Ucapan,
Pikiran dan Tindakan Saya Banyak
Kesalahan Yang Telah
Saya Perbuat. Oleh Karena Itu Ampunilah
Saya Ya Bapa,
Kasihanilah Saya Selama-Lamanya.
Amin.</p>
</p>
</body>
</html>
|
Internal CSS
Css yang
dituliskan di dalam tag <head>
Ditandai
dengan kata <style </style>
Kode CSS Internal
<html>
<head>
<title>Internal CSS</title>
<style>
h1 {
color : yellow;
font-size : 50px;
background-color: teal;
border : 5px solid cyan;
text-align :
center;
}
p.a
{
color : gold;
background-color: magenta;
font-size : 14pt;
font-face : Arial Verdana MS-Sanserif;
text-align : justify;
text-indent : 30px;
line-height : 50px;
}
p.b
{
color : blue;
background-color: magenta;
font-size : 14pt;
font-face : Arial Verdana MS-Sanserif;
text-align : justify;
text-indent : 30px;
line-height : 50px;
}
</style>
</head>
<body
style="color:white;background-color:black;">
Selamat Datang di Program Studi Sistem
Informasi
Fakultas Ilmu Komputer, Universitas
Katolik St. Thomas
Sumatera Utara Medan.
<!-- Tag h1 tanpa style -->
<h1>Pemrograman Web</h1>
<!-- Tag h1 dengan style -->
<h1>Prodi Sisfo</h1>
<p class="a">
Terima Kasih Saya Ucapkan Kepada Bapa
di Surga Atas
Limpahan <b>KASIH</b> Yang
Telah Diberikan. Mulai Dari
Pagi Hari Pada Saat Bangun Tidur Hingga
Saat Ini Bapa
Tetap Menjagai Saya. Saya Sadar Bapa
Dalam Ucapan,
Pikiran dan Tindakan Saya Banyak
Kesalahan Yang Telah
Saya Perbuat. Oleh Karena Itu Ampunilah
Saya Ya Bapa,
Kasihanilah Saya Selama-Lamanya.
Amin.</p>
</p>
<p class="b">
Terima Kasih Saya Ucapkan Kepada Bapa
di Surga Atas
Limpahan <b>KASIH</b> Yang
Telah Diberikan. Mulai Dari
Pagi Hari Pada Saat Bangun Tidur Hingga
Saat Ini Bapa
Tetap Menjagai Saya. Saya Sadar Bapa
Dalam Ucapan,
Pikiran dan Tindakan Saya Banyak
Kesalahan Yang Telah
Saya Perbuat. Oleh Karena Itu Ampunilah
Saya Ya Bapa,
Kasihanilah Saya Selama-Lamanya.
Amin.</p>
</p>
</body>
</html>
|
Pertemuan
VI
Materi :
1.
Inline css
2.
Internal css
3.
Exterlan css
PERBEDAAN ANTARA INLINE CSS DENGAN KODE HTML
KODE CSS
|
KODE HTML
|
<Html>
<Head>
<Title></Title>
</Head>
<Body Style=”background-color:yellow”>
</Body>
</Html>
|
<Html>
<Head>
<Title></Title>
</Head>
<Body bgcolor=yellow>
</Body>
</Html>
|
Kode-kode
css beserta fungsi-fungsinya :
1.
<h1 Style =”font-size :200pt;”> Belajar Pemrograman Web </h1>
Fungsinya
adalah untuk membuat ukuran paragrafnya 200 pt.
2.
Background-color :black;
Fungsinya
adalah untuk membuat latar belakang tulisan warna hitam.
3.
Text-align : justify ;
Fungsinya
adalah membuat paragraf rata kiri dan rata kanan.
4.
Text-indent : 50n px ;
Fungsinya
adalah untuk membuat awal teks paragraf 50 px.
5.
Color : yellow ;
Fungsinya
adalah untuk membbuat warna tulisan warna kunning
6.
Line-heigh : 50 px;
Fungsina
adalah untuk mengatur spasi 50 px;
7.
Border : 5 px solid blue;
Fungsinya
adalah untuk membuaut kotak paragraf.
Contoh :
<Html>
|
<Head>
|
<Title></Title>
|
</Head>
|
<Body>
|
<h1 style =”font-size :30 pt;>selamat Datang</h1>
<p style = “font-size
:12 pt;
Text-align : justify;
Text-indent : 50 px;
Border : 5 px solid
blue;
Color : yellow;
Background-color :
black;
Line-heigt : 50 px;”>
“Mengucap syukurlah dalam
segala hal,
Sebab itulah yang di
kehendaki Allah
Di dalam Yesus bagi
kamu”. 2 tesalonika 5:18
|
</body>
|
</html>
|
Note :
<marquee
direction =top>berfungsi untuk membuat tulisan berjalan ..
<marquee
behavior =alternate>berfungsi membuat tulisan ke kiri dan ke kanan.
|
Internal
css
<html>
<head>
<title></title>
<style>
P
{
Font-size :14px;
Text-align :justify;
Text-indent :30px;
Color
:blue;
Background-color :00 00 00;
Margin
:50 100 100 50;
}
</style>
</head>
<body>
<marquee behavior =alternate>
<p>wellcome</p>
</body>
</html>
|
External
css
External
css adalah css yang di simpan terpisah dari kode html.
Kelebihan external css adalah :
1. Kode sumber external tidak perlu di edit secara berulang
sehingga lebih memudahkan dalam manajemen kode css.
2. External css di letakkan di dalam tag <head> dengan kata
kunci yaitu :
<link
href =sumber type=text/css ref=stylesheet>
Contoh:
<link
href =utama.css type=text/css ref=stylesheet>
<link href =../utama.css type=text/css ref=stylesheet>
<link
href =../isi.css type=text/css ref=stylesheet>
<link
href =../..utama.css type=text/css ref=stylesheet>
Css
disimpan dengan namafile.css
|
Materi :
1. Memahami struktur
javascript
2. Memahami variabel
3. Mampu membuat kode javascript
Latihan 1.
1. Buka editor notepad
2. Ketikkan struktur html
<html>
<head>
<title>latihan JS-1</title>
</head>
<body>
</body>
</html>
|
3. Ketikkan kode javascript untuk mencetak string (UNIKA
ST.ThoMAS )ini adalah contoh.bisa juga dibuat denagn kata-kata yang lain.
<html>
<head>
<title>latihan
JS-1</title>
</head>
<body>
<script>
document.write(“<b>UNIKA
ST.THOMAS </b>”);
</script>
</body>
</html>
|
4. Simpan kode html dengan nama JS1.html
Seperti ganbar di bawah ini.
5. Jalankan web browser
6. Buka file JS1.html
- Ctrl +O
- Arahkan pointer ke folder
penyimpanan JS1.html
7. Dengan menggunakan internal css formatlah tag <body>
sehingga warna latar-belakangnya menjadi warna magenta
dan warna huruf adalah putih.
8. - syarat utama yang harus dipenuhi bila
menggunakan internal scc adalah kode htmlya diletakkan di bagian tag head dan
ditandai dengan kata <style>
</style>
9. Kode html nya adalah sbb:
<html>
<head>
<title>Latihan JS-1</title>
<style>
body {
background-color : magenta;
color : white;
}
</style>
</head>
<body>
<script>
document.write("<b>Unika St. Thomas</b>");
</script>
</body>
</html>
|
Latihan 2.
Buatlah kode javascript untuk
menyelesaikan rumus di bawah ini
Input B dan C
A=B+C
D=A2-B2+C
E=B/2*(C-D)
Output A,B,D
<html>
<head>
<title>Latihan Js-2</title>
<style>
body {
background-color :green;
color :magenta;
font-family :"monotype corsiva";
font-size :14
px;
margin :50px
50px 50px 50px;
}
</style>
</head>
<body>
<script>
var a,b,c,d,e;
b=10;
c=15;
a=b+c;
d=a*a-b*b+c;
e=b/2*(c-d);
document.write("Nilai A =",a);
document.write("<br> Nilai D =",d);
document.write("<br>
Nilai E =",e);
document.write("<hr>");
document.write("Belajar Test
Kondisi");
var ip;
ip=2.5;
if (ip >3)
document.write("<br>Anda
Lulus");
else
document.write("<br>Anda Tidak Lulus");
document.write("<hr>");
document.write("<br>Belajar
Perulangan");
var i;
for (i=1;i<=30;i++)
{
if (i % 2 == 0)
document.write("<marquee
direction=left>Yes</marquee>");
else
document.write("<marquee
direction=right>No</marquee>");
}
</script>
</body>
</html>
|
Materi
1. Memahami struktur pernyataan if
2. Mampu membuat kode
javascript dengan memanfaatkan pernyataan if
Terdapat 3 (tiga ) syntax
pernyataan if, yaitu :
SYNTAX-1
If (kondisi)
{
<Pernyataan>
}
|
Jika nilai kondisi TRUE maka
pernyataan di dalam if akan dieksekusi
|
Latuhan 1
1. Buka editor notepad
2. Ketikkan struktur html
<html>
<head>
<title>latihan JS Lanjut</title>
</head>
<body>
</body>
</html>
|
3. Ketikkan kode javascript berikut:
Deklarasikan variable ipku
Beri nilai ipku ß 3.2
Jika ipku > 3.2 cetak string “Dapat
Memperoleh Beasiswa “ di web browser
4. Ketikkan kode javascript berikut
<html>
<head>
<title>Latihan JS Lanjut</title>
</head>
<body>
<script>
var ipku;
ipku=3.2;
if (ipku>3.5)
{
document.write("Bisa
Memperoleh Beasiswa");
}
</script>
</body>
</html>
|
5. Simpan kode dengan nama latuhanjs2.html
6. Jalankan web browser
7. Buka file js2.html dari browser
- CTRL+O
- Arahkan pointer ke pointer penyimpanan js2.html
SYNTAX-2
If (kondisi)
{
<pernyataan>
}
Else
{
<pernyataan>
}
|
Jika kondisi bernilai TRUE maka pernyataan di dalam if akan dikerjakan , jika kondisi
bernilai FALSE maka pernyataan ai dalam ELSE akan dikerjakan
|
Latihan 2.
1. Buka notepad baru
2. Ketikkan kode berikut:
<html>
<head>
<title>Latihan JS Lanjut</title>
</head>
<body>
<script>
var ipku;
ipku=3.7;
if (ipku>3.5)
{
document.write("Bisa
Memperoleh Beasiswa");
}
else
{
document.write("TIDAK Bisa
Memperoleh Beasiswa");
}
document.write("<h1>Belajar IF</h1>");
</script>
</body>
</html>
|
3. Format tag <h1> dari internal css dengan karakteristik
sbb:
- Besar huruf : 70px
- Warna huruf : magenta
- Latar belakang warna huruf :
black;
- Jenis huruf : verdana
- Perataan teks : tengah
- Bingkai : 10px solid putih
SYNTAX-3
if
(kondisi)
{
<pernyataan>
}
else
if (kondisi)
{
<pernyataan>
}
else
if (kondisi)
{
<pernyataan>
}
else
{
<pernyataan>
}
|
Jika kondisi bernilai TRUE maka pernyataan di dalam if akan dikerjakan , jika kondisi
bernilai FALSE maka pernyataan ai dalam ELSE akan dikerjakan
|
Latihan 2.
Buatlah kode javascript untuk
algoritma berikut:
1. Deklarasikan variabel v,s,t
2. Beri nilai sß 100
3. Beri nilai tß 1
4. v=s/t
5. Uji nilai V
Jika v>300
Ket=”Kecepatan
Extreme”
Jika v>200
Ket =”Kecepatan
Luar Biasa”
Jika V>100
Ket =”Kecepatan
Lumayan Cepat”
Jika V<=100
Ket =”Kecepatan
Biasa “
6. Cetak nilai v,s,t dan Ket
<html>
<head>
<title>Latihan JS Lanjut</title>
</head>
<body
bgcolor="teal">
<script>
var v,s,t;
var ket;
s=1000;
t=3;
v=s/t;
if
(v>300)
ket="Kecepatan Extreme";
else if
(v>200)
ket="Kecepatan Luar Biasa";
else if
(v>100)
ket="Kecepatan Lumayan Cepat";
else
ket="Kecepatan Normal";
document.write("<br>Nilai V : ",v,"
km/jam");
document.write("<br>Nilai S : ",s," km");
document.write("<br>Nilai T : ",t," jam");
document.write("<br>Dengan Kecepatan : ",v,"
km/jam maka ",ket);
</script>
</body>
</html>
|
7. Buat tabel seperti di bawah ini
8. Kode html nya adalah
<html>
<head>
<title>Latihan JS Lanjut</title>
</head>
<body
bgcolor="teal">
<script>
var v,s,t;
var ket;
s=1000;
t=3;
v=s/t;
if
(v>300)
ket="Kecepatan Extreme";
else if
(v>200)
ket="Kecepatan Luar Biasa";
else if
(v>100)
ket="Kecepatan Lumayan Cepat";
else
ket="Kecepatan Normal";
document.write("<br>Nilai V : ",v,"
km/jam");
document.write("<br>Nilai S : ",s," km");
document.write("<br>Nilai T : ",t," jam");
document.write("<br>Dengan Kecepatan : ",v," km/jam
maka ",ket);
document.write("<hr>");
document.write("<table border=1
width=75% bgcolor=yellow align=center>");
document.write("<tr><td
colspan=3>Logo</td></tr>");
document.write("<tr
height=300px><td width=15%>Menu</td>");
document.write("<td>Isi</td><td
width=15%>news</td></tr>");
document.write("<tr><td
colspan=3 align=center>Hakcipta</td></tr>");
</script>
</body>
</html>
|
Note :
window.alert("Sukses... Selamat Belajar");
|
Menampilkan kotak yang berisi
informasi “Sukses.. Selamat Belajar”
|
9. Tambahkan windows.alert pada kode html tersebut
<html>
<head>
<title>Latihan JS Lanjut</title>
</head>
<body
bgcolor="teal">
<script>
var v,s,t;
var ket;
s=1000;
t=3;
v=s/t;
if
(v>300)
ket="Kecepatan Extreme";
else if
(v>200)
ket="Kecepatan Luar Biasa";
else if
(v>100)
ket="Kecepatan Lumayan Cepat";
else
ket="Kecepatan
Normal";
document.write("<br>Nilai V : ",v,"
km/jam");
document.write("<br>Nilai S : ",s," km");
document.write("<br>Nilai T : ",t," jam");
document.write("<br>Dengan Kecepatan : ",v,"
km/jam maka ",ket);
window.alert("Sukses... Selamat Belajar");
document.write("<hr>");
document.write("<table border=1 width=75% bgcolor=yellow
align=center>");
document.write("<tr><td
colspan=3>Logo</td></tr>");
document.write("<tr height=300px><td
width=15%>Menu</td>");
document.write("<td>Isi</td><td
width=15%>news</td></tr>");
document.write("<tr><td colspan=3
align=center>Hakcipta</td></tr>");
</script>
</body>
</html>
|
Materi :
1. Mengenal javascript
2. Elemen-elemen javascript
Komputer merupakan bahasa
komputer yang bekerja di sisi client, artinya javascript di prosese di web browser.
Javascript digunakan untuk mendinamisasi bahasa web.
Kelebihan javascript atau yang
dapat dilakukan di javascript adalah :
1. Mengatur web browser
2. Validasi form
3. Pembuatan grafik
4. Pengaturan waktu
Dengan memahami javascript akan
memudahkan, memahami ajax (Asyncronous Javascript And Xml). Dengan menggunakan
javascript hanya membutuhkan web browser.
Kekurangan dari javascript,
HTML, dan Css adalah kode yang dibuat dapat dilihat oleh orang lain (bersifat
terbuka)
Elemen-elemen pembentuk javascript
:
1. Struktur
2. Variabel
3. Operator
4. Pernyaytaan Bersyarat
- If
- Swith
5. Pernyataan Berulang
- For
- While
6. Larik (Array)
7. Fungsi
8. Objek
9. Grafik
A. STRUKTUR
Struktur dasar dari javascript
<html>
<head>
<title>struktur Javascript
1</title>
</head>
<body>
<script>
</script>
</body>
</html>
|
Atau
<html>
<head>
<title>struktur Javascript
2</title>
</head>
<body>
<script type =”languange/javascript”>
</script>
</body>
</html>
|
Contoh :
- Misalkan ingin mencetek sebuah
nama atau apa saja, tetapi di sini saya menggunakan string Unika St.Thomas dari
javascript.
Jawab:
<html>
<head>
<title>contoh 1</title>
</head>
<body>
<script>
Document.write(“Unika St.Thomas”);
</body>
</script>
|
- Mencetak garis horizontal dari
javascript
Jawab :
<html>
<head>
<title>Contoh 2</title>
</head>
<body>
<script>
Document.write(“<hr>”);
</body>
</script>
|
B. VARIABEL
Variabel adalah suatu objek yang
berisi data-data, yang mana dapat di modifikasi selama pengeksekusian program
atau pengenal (identifier) yang nilainya bisa di ubah selama eksekusi program
Pendeklarasian dilakukan melalui
pernyataan “Var”.
Aturan penggunaan dari variabel
adalah :
Nama
variabel adalah case-sensitive (a dan A adalah dua contoh variabel yang
berbeda).
Nama
variabel harus dimulai dengan suatu huruf atau oleh karakter garis bawah
(underscore)
Contoh :
Menjumlahkan 2 buah bilangan
<html>
<head>
<title>Contoh 3</title>
</head>
<body>
<script>
Var a,b,c;
a=20;
b=30;
c=a+b;
document.write(“a,”+”,b,”+”,c”);
</body>
</html>
|
C. OPERATOR
Operator dalam javascript dapat
dikelompokkan menjadi :
- Operator
Aritmatika
Operator yang digunakan untuk melakukan perhitungan
matematika.
Tipe-tipe operator aritmatika adalah :
1. + (Penjumlahan)
2. _ (Pengurangan)
3. * (perkalian)
4. /(Pembagian)
5. % (hasil sisa bagi/modulo)
- Operator
Comparison
Operator ini digunakan untuk membandingkan nilai dari dua
operand. Hasil perbandingan dinyatakan dalam nilai boolean. TRUE berarti benar
FALSE berarti salah.
Operator
|
Keterangan
|
==
|
Memeriksa
apakah operand kanan bernilai sama dengan perand kiri.
|
>
|
Memeriksa
apakah operand kiri bernilai lebih besar dari operan kanan.
|
<
|
Memeriksa
apakah operand kiri bernilai lebih kecil dari operand kanan.
|
>=
|
Memeriksa
apakah operand kiri bernilai lebih besar atau sama dengan dari pada operand
kanan.
|
<=
|
Memeriksa
apakah operand kiri bernilai lebih kecil atau sama dengan dari pada operand
kanan.
|
!=
|
Memeriksa
apakah operand kiri bernilai tidak sama dengan operand kanan.
|
- Operator
logika
Operator ini digunakan untuk membandingkan dua nilai
variabel yang bertipe boolean.
Hasil yang didapat dari penggunaan operator logika adalah
boolean.
- Operator
Assigment
Operator assigment digunakan untuk memberikan/mengisi nilai
kedalam variabel tertentu.
Operator yang digunakan adalah “=” yang berarti operand kiri
diberi nilai sama dengan operand kanan
Tidak ada komentar:
Posting Komentar