AL"tecnology: September 2018

hello guys kembali lagi dengan saya sudah sekian lama tidak berjumpa saya di sini akan menggunakan javascript cukup menark di dalam javascript ini langsung saja biar tidak membuang waktu terlalu lama saya akan mengkoding array

Pengertian JavaScript

JavaScript adalah bahasa pemrograman web yang bersifat Client Side Programming Language. Client Side Programming Language adalah tipe bahasa pemrograman yang pemrosesannya dilakukan oleh client. Aplikasi client yang dimaksud merujuk kepada web browser seperti Google Chrome dan Mozilla Firefox.

Bahasa pemrograman Client Side berbeda dengan bahasa pemrograman Server Side seperti PHP, dimana untuk server side seluruh kode program dijalankan di sisi server.

Untuk menjalankan JavaScript, kita hanya membutuhkan aplikasi text editor dan web browser. JavaScript memiliki fitur: high-level programming language, client-side, loosely tiped dan berorientasi objek.

Fungsi JavaScript Dalam Pemograman Web

JavaScript pada awal perkembangannya berfungsi untuk membuat interaksi antara user dengan situs web menjadi lebih cepat tanpa harus menunggu pemrosesan di web server. Sebelum javascript, setiap interaksi dari user harus diproses oleh web server.

Bayangkan ketika kita mengisi form registrasi untuk pendaftaran sebuah situs web, lalu men-klik tombol submit, menunggu sekitar 20 detik untuk website memproses isian form tersebut, dan mendapati halaman yang menyatakan bahwa terdapat kolom form yang masih belum diisi.

Untuk keperluan seperti inilah JavaScript dikembangkan. Pemrosesan untuk mengecek apakah seluruh form telah terisi atau tidak, bisa dipindahkan dari web server ke dalam web browser.

Dalam perkembangan selanjutnya, JavaScript tidak hanya berguna untuk validasi form, namun untuk berbagai keperluan yang lebih modern. Berbagai animasi untuk mempercantik halaman web, fitur chatting, efek-efek modern, games, semuanya bisa dibuat menggunakan JavaScript.

1.buatArray

2.buatArray

3.arrayobjek

4.aksesONdata

hallo guys kembali lagi dengan saya di dalamblog saya pada hariini saya akan menyajikan css untuk memasukan gambar dan tabel dengan menggunakan css untuk style

Embedded Image CSS

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana X-RPL-3 | CSS pada Image</title>
 <style type="text/css">
  img.mouse {
   margin-top: 10px;
   float: left;
   clear: both;
   width: 200px;
   height: 200px;
  }
  img.cat {
   margin-top: 5px;
   float: right;
   clear: both;
   width: 200px;
   height: 200px;
   border: solid;
   border-color: blue;
  }
  img.koa {
   margin-top: 10px;
   float: right;
   clear: both;
   width: 200px;
   height: 200px;
  }
 </style>
</head>
<body>
<h1>
Contoh embedded css pada gambar</h1>
<img class="mouse" src="Myimage/tikus.jpeg">
<img class="cat" src="Myimage/kucing.jpeg">
<img class="koa" src="Myimage/koala.jpeg">
</body>
</html>

hasilnya

External Image CSS

<!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana X-RPL-3 | CSS pada Image</title>
 <link href="extImage.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>
Contoh CSS pada gambar secara external</h1>
<img id="Pikachu" src="MyImage/Pikachu.gif" />
<img id="kucing" src="MyImage/kucing.gif" />
<img id="Anjing" src="MyImage/gok.gif" />
</body>
</html>

CSS

Img#pikachu {
 margin-top: 10px;
 float: left;
 clear: both;
 }
Img#ucing {
 margin-top: 5px;
 float: right;
 clear: both;
 border: dotted;
 border-color: salmon;
 }
Img#Anjing {
 margin-top: 10px;
 float: right;
 clear: both;
}

Inline CSS Background Image

<!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana Inline css untuk bg image</title>
</head>
<body style="background-image: url(MyImage/paper.gif)">

<h1>
Hello World!</h1>
<p align="center" style="color:Green; font-family: Impact; font-size: 24px; background-color: Yellow;">
Hello World, Ini adalah contoh penggunaan Inline!
</p>
</body>
</html>

Embedded CSS for Background Image

<!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana Xl RPL 3| Background Image Goes Wrong</title>
 <style type="text/css">
  #utama {
   font-family: impact;
   font-size: 30pt;
   color: aqua;
   text-shadow: 2 2 2 red;
   background-image: url(MyImage/paper.gif);
   height: 600px;
   width: 800px;
   }
 </style>
</head>
<body>
<div id="utama">
 Sebenarnya, background gambar ini width dan height nya 300px x 200px tapi karena pada css tertulis 800px dan 600px, maka terjadilah tampilan seperti ini
</div>
</body>
</html>

Embedded Background Image As Image

 <!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana Xl -RPL 3 - CSS image placement</title>
 <style type="text/css">
  #headline1 {
   background-image: url(MyImage/Pikachu.gif);
   background-repeat: repeat-x;
   background-position: left top;
   padding-top: 68px;
   margin-bottom: 50px;
  }
  #headline2 {
   background-image: url(MyImage/gok.gif);
   background-repeat: no-repeat;
   background-position: right top;
   padding-top: 68px;
  }
 </style>
</head>
<body>
<div id="headline1" style="color: red">
CSS (verai sekarang adalah CSS3)
 lebih banyak daripada hanya dilibatkan dalam dokumen Web.
 Kegunaannya adalah untuk memformat dokumen.
 Sebagai contoh, warna teks atau bahkan warna latar belakang bisa diatur melalui CSS.
 
</div>
</body>
</html>

Embedded Video

<!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana Xl-RPL-3 | Testing Video</title>
</head>
<body>
<h1 style="color: OrangeRed; text-align: center; font-family: Consolas;">
Ini video ku</h1>
<video controls="controls"
style="display: block; margin: 0 auto;
width: 400px; height: 400;"">
 <source src="MyImage/video.mp4" type="video/mp4" />
 Your browser does not support the video tag.
</video>
</body>
</html>

Embedded Video Youtube

<!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana X-RPL-3| Testing Youtube</title>
 <style type="text/css">
  .videoWrapper {
   position: relative;
   padding-bottom: 56.25%; /* 16:9 */
   padding-top: 25px;
   height: 0;
  }
  .videoWrapper iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
  }
 </style>
</head>
<body>
<div class="official music ">
 <!-- Copy & Pasted from YouTube -->
 <iframe width="560" height="349" src="https://www.youtube.com/watch?v=mCcg42vdbPQ" frameborder="0" allowfullscreen>
 </iframe>
</div>
</body>
</html>

Embedded Table Border Collpase

<!DOCTYPE html>
<html>
<head>
 <style>
 table 
  {
   border-collapse: collapse;
  }

 table, td, th
  {
   border: 1px solid Red;
  }
 </style>
</head>
<body>
 <table>
<tr>
   <th>Nama Depan</th>
   <th>Nama</th>
  </tr>
<tr>
  <td>Adelin</td>
  <td>Larasati</td>
 </tr>
<tr>
  <td>Novero</td>
  <td>Davandra</td>
 </tr>
<tr>
  <td>Andika</td>
  <td>Dayandra</td>
 </tr>
</table>
</body>
</html>

External Table With CSS 1

<!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana X-RPL-3 | CSS pada Tabel</title>
 <link href="cssOnTable1.css"  rel="stylesheet" type="text/css">
</link>
</head>
<body>
<table>
<tr>
  <th>Nama Depan</th>
  <th>Nama Belakang</th>
 </tr>
<tr>
  <td>Thom</td>
  <td>Yorke</td>
 </tr>
<tr>
  <td>Vanessa</td>
  <td>Carlton</td>
 </tr>
<tr>
  <td>Jonny</td>
  <td>Greenwood</td>
 </tr>
</table>
</body>
</html>

css

table,th {
 border: 2px solid pink;
 font-family: Impact;
 color: orange;
}
td {
 border: 1px solid green;
 font-family: Arial Narrow;
 color: yellow;

}

External Table With CSS 2

<!DOCTYPE html>
<html>
<head>
 <title>Alpa Gustiana | CSS pada Tabel kedua</title>
 <link href="cssOnTable1.css"  rel="stylesheet" type="text/css">
</link>
</head>
<body>
<table>
<tr>
  <th>Nama Depan</th>
  <th>Nama Belakang</th>
  <th>Alamat</th>
 </tr>
<tr>
  <td>Karina</td>
  <td>Nurul Islami</td>
  <td>Jl. Rumahku Blok C 34</td>
 </tr>
<tr>
  <td>Salman</td>
  <td>Ravi</td>
  <td>Jl. Disini Aja Blok R 45</td>
 </tr>
<tr>
  <td>Muhammad Dandi</td>
  <td>Ramdani</td>
  <td>Jl. Bumi Abdi Blok S 6</td>
 </tr>
</table>
</body>
</html>

table,th,td {
 border-top: 2px solid Red;
 border-right: 2px groove Yellow;
 border-left: 2px dashed Green;
 border-bottom: 2px dotted Pink:;
 }
table {
 width: 100%;
 }
th {
 height: 50px;
 background-color: MediumPurple;
 color: mintcream; /*untuk warna dont */
 font-family: Consolas;
}

External Table with CSS 3

<!DOCTYPE html>
<html>
<head>
 <title>Alpa gustiana-Xl RPL 3-CSS Pada Tabel</title>
<link rel="stylesheet" type="text/css" href="cssontable3.css">
</head>
<body>
<table>
<tr>
  <th>First Name</th>
  <th>Family Name</th>
  <th>Country</th>
 </tr>
<tr>
  <td>Ariana</td>
  <td>Grande</td>
  <td>America</td>
 </tr>
<tr>
  <td>Taylor </td>
  <td>Swift</td>
  <td>America</td>
 </tr>
<tr>
  <td>Lorde</td>
  <td>Ajah</td>
  <td>New Zaeland</td>
 </tr>
</table>
</body>
</html>

table,td,th{
 border:1px solid salmon;
}
td{
 background-color: #5cd6d6;
 color: blue;
 text-align: right;
 height: 30px;
 vertical-align: middle;
 padding: 10px;
}
th{
 background-color: green;
 color: aqua;
 height: 50px;
 vertical-align: bottom;
 padding: 15px;

}

Latihan

<html>
 <head>
  <title>Alpa gusiana XI RPl 3</title>
  <link rel="stylesheet" href="latihan.css" type="text/css">
 </head>
 <body>
  <table align="center" >
<tr>
    <th class="judulsatu" colspan="2"><ins>Pendaftaran Acara Porak SMKN 4 Bandung</ins></th>
    <th class="judulsatu" colspan="3"><img src="MyImage/bola.png" alt="sepakbola" width="60px" height="50px"></th>
   </tr>
<tr>
    <th class="juduldua" width="30px">No</th>
    <th class="juduldua">Nama</th>
    <th class="juduldua">Kelas</th>
    <th class="juduldua">TKJ</th>
   </tr>
<tr>
    <td>1</td>
    <td>Alianso</td>
    <td rowspan="7" colspan="2"><img src="MyImage/basket.png" alt="" width="300" height="300"></td>
   </tr>
<tr>
    <td>2</td>
    <td>Al Gazhali</td>
   </tr>
<tr>
    <td>3</td>
    <td>Bento</td>
   </tr>
<tr>
    <td>4</td>
    <td>Charli</td>
   </tr>
<tr>
    <td>5</td>
    <td>Dube Herlimo</td>
   </tr>
<tr>
    <td>6</td>
    <td>Falseto</td>
   </tr>
<tr>
    <td>7</td>
    <td>Ghafani</td>
   </tr>
</table>
</body>
</html>

CSS

table{
 border : 1px dashed #ff0066;
 background-color: #66ffff;
}
.judulsatu{
 border-top: 1px dotted black;
 border-bottom: 1px dotted black;
 border-left: 1px dashed  #99ffcc;
 border-right: 1px dashed  #99ffcc;
 background-color: salmon;
 font-size: 20px;
}
.juduldua{
 border: 1px outset red;
 background-color: #6600ff;
 color: #ffffcc;
}
td{
 border: 1px double  black;
 background-color: #66ffff;
}

AL"tecnology

Selasa, 18 September 2018

praktikum 13