Jumat, 13 Maret 2020

Pemrograman Web dengan kode Javascript

JavaScript
--> Kodeprogram yang digunkan untuk mendinmisasi halaman web

Html
--> Kode untuk menmpilkan informsi ke halaman web

CSS
--> Kode untuk memformat tag tag html

1. Strktur
<script>
  {Pernyataan]
</script>
contoh. 1 Kode javascript  untuk menampilkan identitas fakultas.

Penyelesaian :

1.Aktiifkan notepad
2.buka lembaran Kerja baru
3. Ketikkan kode berikut
<html>
<head>
  <title>Latihan 4.1 </title> 
 <style>
    body{
     color : #ff0000;
     font-size : 50pt;
     background-image : url("index.jpg");
    }
  </style>
</head>
<body>
<script>
  document.write("Fakultas Ilmu Komputer<br>");
  document.write("Unika St.Thomas <br>");
  document.write("Medan<br>");
  </script>
</body>
</html>


4. Simpan kode dengan nama ti41.html
5.aktifkan web browser
6. buka file ti41.html dari web browser


contoh soal 2. buat kode js untuk menjumlahkan 2 buah bilangan
<script>
  var a,b,c;
  a = 10;
  b = 20;
  c = a + b;
  document.write(a+ "+" +b + "=" +c);
</script>


-->  Simpan dan jalankan kode di web browser.



soal 3. Buat form untuk menginput 2 (dua) buah bilanngan .
Buat kode Js untuk menjumlahkan ke dua bilangan tersebut !!
<html>
 <head>
    <title>Menjumlahkan dua buah bilangan</title>
 </head>
 <body>
   <form>
   input Bilangan <br>
   A : <input type= text id=idA size=3><br>
   B : <input type= text id=idB size=3><br>
   <input type=button value="A+B" onclick="prosesTam()">  
   <input type=button value="A-B" onclick="prosesKur()">
   <input type=button value="A/B" onclick="prosesbag()">
   <input type=button value="A*B" onclick="prosesKal()">
   <input type=button value="A%B" onclick="prosesMod()">
   </form>
   <script>
    function prosesTam()
                {
                   var a,b,c;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   c = a + b;
                   //document.write(a+ "+" +b +"=" +c);
                   window.alert(a+ "+" +b +"=" +c);
                }

   function prosesKur()
                {
                   var a,b,c;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   c = a - b;
                   //document.write(a+ "+" +b +"=" +c);
                   window.alert(a+ "-" +b +"=" +c);
                }

   function prosesMod()
                {
                   var a,b,c;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   c = a % b;
                   //document.write(a+ "+" +b +"=" +c);
                   window.alert(a+ "%" +b +"=" +c);
                }
    function prosesKal()
                {
                   var a,b,c;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   c = a * b;
                   //document.write(a+ "+" +b +"=" +c);
                   window.alert(a+ "*" +b +"=" +c);
                }

   function prosesbag()
                {
                   var a,b,c;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   c = a / b;
                   //document.write(a+ "+" +b +"=" +c);
                   window.alert(a+ "/" +b +"=" +c);
                }
   </script>
  </body>
</html>


Simpan kode program di atas dan buka pada web browser :

soal 4. Buat kode Js untuk menentukan bilangan terbesar diantara dua buah bilanngan.
Penyelesaian :

<html>
 <head>
    <title>Mencari Nilai terbesar di Js</title>
 </head>
 <body>
   <form>
   input Bilangan <br>
   A : <input type= text id=idA size=3><br>
   B : <input type= text id=idB size=3><br>
   <input type=button value="Max" onclick="proses()">  
   <input type=button value="Min" onclick="proses1()">  
</form>
   <script>
    function proses()
                {
                   var a,b,max;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   if(a>b)
                                max=a;
                   else
                                max = b;

                   //document.write("Bilangan terbesar "+ a+ "dan" +b );
                   //document.write("Adalah " + max );
                   window.alert("Bilangan terbesar  "+ a+ "  dan  " +b + "   Adalah :   " +max);
                 
                }
                function proses1()
                {
                   var a,b,min;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   if(a<b)
                                min=a;
                   else
                                min = b;

                   //document.write("Bilangan terbesar "+ a+ "dan" +b );
                   //document.write("Adalah " + min );
                   window.alert("Bilangan Terkecil  "+ a+ "  dan  " +b + "   Adalah :   " +min);
                 
                }

  document.write("Bilangan terbesar "+ a+ " dan "+ b);
  document.write("  adalah : " +max);
</script>


Simpan kode Program tersebut dan buka pada web browser : 

Tugas  :

1. Buat form untuk menginput 3(tiga) buah bilangan , Kemudian buat kode js
untuk menentukan Bilangan terkecil diantara ke 3(Tiga) buah bilangan tersebut.

Kode Program : 

<html>
 <head>
    <title>Mencari Nilai terbesar di Js</title>
    <style>
    body{
     color : silver;
     font-size : 50pt;
     background-image : url("IMG-20181202-WA0011.jpg");
    }
  </style>
 </head>
 <body>
   <form>
   input Bilangan <br>
   A : <input type= text id=idA size=3><br>
   B : <input type= text id=idB size=3><br>
   C : <input type= text id=idC size=3><br>
   <input type=button value="Max" onclick="proses()">  
   <input type=button value="Min" onclick="proses1()">  
</form>
   <script>
    function proses()
                {
                   var a,b,c,max;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   c = parseInt(document.getElementById('idC').value);
                   if(a>b){
                                if(a>c)
                                   max=a;
                                else
                                   max = c;}
                   else {
                                if(b>c)
                                   max=b;
                                else
                                   max = c;}

                   //document.write("Bilangan terbesar "+ a+ "dan" +b );
                   //document.write("Adalah " + max );
                   window.alert("Bilangan terbesar  "+ a+ "  dan  " +b +" dan  "+c + "   Adalah :   " +max);
                 
                }
                function proses1()
                {
                   var a,b,min;
                   a = parseInt(document.getElementById('idA').value);
                   b = parseInt(document.getElementById('idB').value);
                   c = parseInt(document.getElementById('idC').value);
                   if(a<b){
                                if(a<c)
                                   min=a;
                                else
                                   min = c;}
                   else {
                                if(b<c)
                                   min=b;
                                else
                                   min = c;}

                   //document.write("Bilangan terbesar "+ a+ "dan" +b );
                   //document.write("Adalah " + max );
                   window.alert("Bilangan terbesar  "+ a+ "  dan  " +b +" dan  "+c + "   Adalah :   " +min);
                 
                }

  document.write("Bilangan terbesar "+ a+ " dan "+ b);
  document.write("  adalah : " +max);
</script>

Simpan Kode program dengan Ekstensi . html dan type data all files (" .html"), Kemudian Buka dari web browser untuk menampilkan : 


Sekian yang bisa saya bagi Ilmu tentang membuat sebuah kode program dari java Script 
Semoga bermanfaat bagi kita semua 


Nama  : Irwan amriando purba
Npm    :  180840001
Dosen Pengampu  :  Wasit Ginting  S.Kom,M.Kom.

Diposting oleh di Tidak ada komentar:

Belajar Pemrograman Web dengan Kode CSS (Cascending Style Sheet)

Pertemuan : III
Hari/Tanggal : Kamis, 5 Februari 2020

Materi  :
- Cascending Style sheet (CSS)
- Pesan Domain dan Hosting

Pengantar

CSS merupakan bahasa web yang digunakan untuk Memformat tag tag pada Html.
Ada 3 (Tiga) Jenis CSS :
1. CSS Inline
2. CSS Internal
3. CSS Eksternal

HTML dan Javascrip Otomatis Sudah dikenal oleh web Browser. Seperti Google chrome, Internet Explorer, Mozila Firefox, chromium dan lainnya lagi.

Materi 1 : Cascending Style Sheet

1. Cara Penggunaan CSS Inline
    --> CSS inline adalah melakukan pengaturan CSS tepat pada garis dari tag-tag yang akan kita format. atau bisa di katakan Segaris/ inline dengan tag yang hendak di ganti formatnya.

Contoh Penggunaan CSS Inline :

<html>
  <head>
    <title></title>
  </head>
  <body style ="background-color : silver;">
     <h1 style="color            : yellow;
                background-color : black;
                border           : 5px solid #0000ff;
                font-size        : 100px;
                font-family      : Algerian;
                                background-image : url(none);">             FIKOM</h1>
    <p style = "text-align  : justify;
                        line-height : 36px;
                                text-indent : 50px;
                                font-size   : 24pt;
                                color       : #00ff3a;"> Selamat pagi kami ucapkan kepada kita semua, Kiranya kita semua
        Tetap dalam lindungan Tuhan dan sehat selalu. terima kasih Kami ucapkan
                Atas keringanan langkah bapak dan ibu sekalian , Untuk menghadiri
                Acara Sederhana kami yang di selenggarakan oleh mahasiswa Tehnik Informatika univesitas katolik Santo thomas Medan.
                Acara ini hanya bentuk dari kreatifitas kami , yng muncul dari ide ide sederhana untuk  hiburan semata.
                Semoga bapak ibu sekalian terhibur dengan acara
                kami. Terima Kasih </p>              
   
  </body>
</html>


Berikut Hasil Dari Kode program yang kita buatkan di atas : 


2. Cara penggunaan CSS Internal
    --> CSS Internal adalah melakukan pengaturan CSS tepat berada pada tag <head>. Atau bisa dikatakan CSS nya bedarada tepat dibawah <title>.

Berikut contoh Penggunaan CSS Internal :
<html>
  <head>
    <title> Belajar CSS Internal</title>
    <style>
    h1{
                                color            : yellow;
                background-color : black;
                border           : 5px solid #0000ff;
                font-size        : 100px;
                font-family      : Algerian;
                                background-image : url("fikom.jpg") no-repeat center center fixed;
    }
    p{
                text-align  : justify;
                        line-height : 36px;
                                text-indent : 50px;
                                font-size   : 24pt;
                                color       : #00ff3a;
     }
    body{
     background-color : silver;
     margin           : 10px 50px ;
     }
    </style> 
</head>
  <body>
     <h1>                 FIKOM</h1>
    <p> Selamat pagi kami ucapkan kepada kita semua, Kiranya kita semua
        Tetap dalam lindungan Tuhan dan sehat selalu. terima kasih Kami ucapkan
                Atas keringanan langkah bapak dan ibu sekalian , Untuk menghadiri
                Acara Sederhana kami yang di selenggarakan oleh mahasiswa Tehnik Informatika univesitas katolik Santo thomas Medan.
                Acara ini hanya bentuk dari kreatifitas kami , yng muncul dari ide ide sederhana untuk  hiburan semata.
                Semoga bapak ibu sekalian terhibur dengan acara
                kami. Terima Kasih </p>              
   
  </body>
</html>

  Dan hasil Output pada web browser adalah sebagai berikut :

3. Cara pengaturan CSS Eksternal
   -->  CSS Eksternal adalah melakukan pengaturan dengan CSS tapi file CSS nya berbeda dengan code html yg akan di foormat.
Berikut adalah contoh penggunaan CSS Eksternal :

<html>
  <head>
    <title> Belajar CSS Internal</title>
    <link rel="stylesheet" href="css1.css">
</head>
  <body>
     <h1>                 FIKOM</h1>
    <p> Selamat pagi kami ucapkan kepada kita semua, Kiranya kita semua
        Tetap dalam lindungan Tuhan dan sehat selalu. terima kasih Kami ucapkan
                Atas keringanan langkah bapak dan ibu sekalian , Untuk menghadiri
                Acara Sederhana kami yang di selenggarakan oleh mahasiswa Tehnik Informatika univesitas katolik Santo thomas Medan.
                Acara ini hanya bentuk dari kreatifitas kami , yng muncul dari ide ide sederhana untuk  hiburan semata.
                Semoga bapak ibu sekalian terhibur dengan acara
                kami. Terima Kasih </p>              
   
  </body>
</html>

    h1{
                                color            : yellow;
                background-color : black;
                border           : 5px solid #0000ff;
                font-size        : 100px;
                font-family      : Algerian;
                                background-image : url("fikom.jpg") no-repeat center center fixed;
    }
    p{
                text-align  : justify;
                        line-height : 36px;
                                text-indent : 50px;
                                font-size   : 24pt;
                                color       : #00ff3a;
     }
    body{
     background-color : silver;
     margin           : 10px 50px ;
     }


Dan hasil tampilan Pada web browser  : 


Kesimpulan yang dapat Kita ambil adalah : Ketiga CSS di atas semua sama fungsinya , perbedaannya hanya ada pada letak dari setiap CSS.
Jika Dia CSS inline ( Kita membuat code CSS nya berada segaris dengan tag yang akan di format), jika dia CSS Internal ( code CSS nya kita letakkan pada tag <head>),
dan Jika dia CSS Eksternal Kita bisa membuat code CSS -nya dalam file yang berbeda .
pada

Materi II : Domain dan hosting

Domain adalah nama di internet dan Hosting adalah kapasistas penyimpanan di internet.



Nama   :  Irwan amriando Purba
Npm     :  180840001
Dosen Pengampu   :  Wasit Ginting S.Kom,M.Kom
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)