widget

Minggu, 09 Februari 2014

JAWABAN SOAL UJIAN NOMOR 1

<html>
<head>
</title> </title>
</head>
<body>
<script>
var i,j,dx;
dx=100;
document.write("<table><tr height=100px>")
for(i=1;i<=10;i++)
{
document.write("<td><div style='width:3px;height:",dx,"% ;background-color:#000000;'></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>");
// document.write("<hr width=",dx,"% >");
dx=dx-10;
}
document.write("</tr></table>")
</script>
</body>
</html>


Hasil

Diposting oleh di 1 komentar:

Pratikum Pertemuan (1-8) Pemrograman Web


 Nama                 : Parlindungan Sihaloho
 Npm                  : 120840011
 M.Kuliah             : Pemrograman Web

Monggo ini Isi Blog saya...
PERTEMUAN PERTAMA
Materi: 
 Blog yang paling umum digunakan:
 - 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.
PENGENALAN HTML
 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:
·         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>
  <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:
1. Akademik (www.unika.ac.id) ac : academic
2. Berita (www.kompas.com) com : comercial
3. Pertemanan (www.facebook.com)
4. Militer (www.sakti.mil.id)  mil : militer
5. Organisasi (www.wikipedia.org) org : organisasi
6. Jaringan (www.aku.net) net : jaringan
7. Pemerintah (www.kpk.go.id) go : pemerintah, dll
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


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
adalah tata letak Informasi atau data dalam suatu website.
Contoh :
http://onlinemarketingguys.co.za/http:/onlinemarketingguys.co.zawp-content/uploads/2011/11/Google-Search.png 
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>
UNTUK MEMBUAT TABEL dengan berbgai kolom dan baris



.
.
.
<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>
.
.
.
3.
 
 
  

 


.
.
.
<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



PRAK PERTEMUAN V
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>











TEORI PERTEMUAN VI

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.
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMvVPrU00lPWeMXvzVQR83QLcbHoAaesQXHE374C5t9HVDwrav4VmV1rhPFBAWUE503Dd4xuglR1BW1wS5YndWw5EmWmbvotZKsOEVugXC7qAtrWP000szKWydtn_H4ov4CLsAtM0DTXfS/s320/Untitled12.png

5.   Jalankan web browser
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi5ughOZ0jXLXU7jftXDpTWl0EJgxp1-I0U2oqXoFwItLBnmZeEuWL-Ezv92B6sR6C6KvXg4TyjcBlC6zAKIzNwe_rNUwaonJnh0ZiPIPuG_lrJtOYeyf2qrqKz_MOMTe8Ghs6nJSd1eH_/s320/Untitled11.png

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>






























 Praktek pertemuan VII
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
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1g-ZrrMeA90G8yDF9_LFRe8Xageyw5WK5tPG64XOnl5Lb081JzlaJ0if-F6P0kU9m5MVbnQlii9OqxsuEk_wqDbmnild1qZXt2N8W2haqgvaknhEhaO4CVgjFhEGF4xXgf1sPZEaOK0J4/s320/Untitled11.png

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>
















Teori pertemuan VIII
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
Diposting oleh di Tidak ada komentar:
Langganan: Komentar (Atom)