#13 web Intermediate | Web Programming Tutorial ~ Angga Gemilang Blog

Assalamualaikum wr, wb

Pada kesempatan ini saya Angga Gemilang dari kelas XI - RPL 1 akan menjelaskan seluk beluk tentang materi dengan level intermediate, mengapa tidak lagi bereada di level begginer? karena mulai sekrang kita akan mulai untuk memasuki materi CSS. mudah-mudahan kalian bisa dan mudah mengerti dengan penjelasan - penjelasan yang saya sampaikan. Untuk penjelasannya, saya akan menjelaskan materi tentang CSS dari paling dasar, Yang pada postingan ini saya akan menjelaskan seluk beluk tentang css multimeda. Pokoknya pantengin terus, Check This Out...

DIbawah ini ada 4 bab yang akan kita pelajari, yaitu:

Pengertian Array
Jenis - Jenis Array
Cara Penulisan Array
Contoh Penggunaan Array

Tanpa langsung berlama-lama. silahkan disimak penjelasan-penjelasan saya dibawah ini :

Pengetian Array
Penjelasannya...

Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki ‘nomor urut’ yang dikenal dengan istilah index. Penomoran index di dalam array dimulai dari angka 0, sehingga elemen pertama berada di index0, elemen kedua berada di index 1, dan lain sebagainya.

Array di dalam javascript bersifat dinamis, dan kita tidak perlu mendefenisikan berapa ukuran array pada saat membuat variabel. Jumlah elemen dapat ditambah dan dikurang setiap saat. "tidak terurut" Kita bisa mengisi hanya index 0, 5, dan 10 saja di dalam array.

Jenis - Jenis Array
Penjelasannya...

Array Multidimensi

Array yang hanya berisikan nilai-nilai tunggal disebut sebagai array monodimensi atau unidimensi. Berikut merupakan ilustrasi dari array monodimensi tersebut.

Perhatian :
Indeks ini akan diberikan secara otomatis oleh interpreter javascript, dimulai dari elemen/data pertama dengan indeks 0. Dalam suatu array dengan n elemen, maka elemen ke-n akan mempunyai indeks n-1.

Jika elemen suatu array berisikan array lainnya, maka array tersebut termasuk array multidimensi. Berikut ilustrasinya.

Array Asosiatif

Indek dalam array selain ditentukan secara otomatis oleh sistem dan selalu dimulai dari 0, juga dapat dimodifikasi dengan menggunakan kata (string) atau nilai tertentu. Tabel dengan indeks termodifikasi ini kita kenal dengan nama array asosiatif. Berikut adalah ilustrasinya

Cara Penulisan Array
Penjelasannya...

Sebuah object array dideklarasikan di JavaScript dengan beberapa cara berikut :

Dengan penggunaan keyword new Array(), dengan contoh sebagai berikut :
var objArr = new Array();

Dengan penggunaan keyword new Array(jumlahindex), dengan contoh sebagai berikut :
var objArr = new Array(3);

Dengan penggunaan keyword new Array(item1, item2, ...), dimana antara satu item dengan item lainnya tidak harus memiliki tipe data yang sama.
Contoh deklarasinya adalah sebagai berikut :
var objArr = new Array("Sumatera", "Jawa", 100);

Dengan penggunaan literal [item1, item2, item3, ...], dimana antara satu item dengan item lainnya tidak harus memiliki tipe data yang sama.
Contoh deklarasinya adalah sebagai berikut :
var objArr = [10, "Sarah", "Meliani", true];

Contoh Penggunaan Array
Penjelasannya...

Langsung saja saya mulai dengan contoh - contoh penggunaan dari array, walaupun masih basic, tapi yaudahlah. lumayan buat belajar...

Contoh Pertama

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah elemen array ke 2</h3>
 </div>
 <p id="coba2">
  <script>
   var siswa = new Array ("Wicky","Subi","Rajab","Renaldi");
   document.getElementById("coba2").innerHTML = siswa[2];
   coba2.style.color = "#000";
   coba2.style.fontWeight = "bold";
   coba2.style.fontFamily = "arial";
   coba2.style.fontSize = "30px"; 
   coba2.style.textTransform = "uppercase"; 
   coba2.style.marginLeft = "100px";
   coba2.style.textAlign = "center";
 </script>
</p>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh kedua

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
 <div class="kotak">
 <h3>Ini adalah contoh penggunaan array objek nama depan</h3>
 </div>
 <p id="objek">
  <script>
   var person ={firstName:"Mochammad", lastName:"Faisal", age:15};
   document.getElementById("objek").innerHTML = person["firstName"];
   objek.style.color = "#000";
   objek.style.fontWeight = "bold";
   objek.style.fontFamily = "arial";
   objek.style.fontSize = "30px"; 
   objek.style.textTransform = "uppercase"; 
   objek.style.marginLeft = "100px";
   objek.style.textAlign = "center";
  </script>
 </p>
 </div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh Ketiga

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah contoh penggunaan array objek nama depan</h3>
</div>
<p id="coba">
<script>
var arrayHewan = ["Buaya", "Harimau", "Gajah", "Singa", "Jerapah", "Zebra", "Monyet", "Kelinci", "Lutung", "Kuda"];
document.write("	Di bonbin ada " + arrayHewan[0] + " dan " + arrayHewan[8] + arrayHewan[6] + "  dan teman-temannya ");
</script>
</p>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Contoh Keempat

HTML :

<!DOCTYPE html>
<html>
<head>
 <title>Membuat Array</title>
</head>
<body>
<div class="keseluruhan">
<div class="kotak">
 <h3>Ini adalah elemen array ke 2</h3>
 </div>
 <p id="coba2">
 <script>
   var siswaXRPL1=["Adi","Adnan","Arvi","Devina","Lukman","Pahmi"];
   document.getElementById("coba2").innerHTML = siswaXRPL1[4];
     coba2.style.color = "#000";
   coba2.style.fontWeight = "bold";
   coba2.style.fontFamily = "arial";
   coba2.style.fontSize = "30px"; 
   coba2.style.textTransform = "uppercase"; 
   coba2.style.marginLeft = "100px";
   coba2.style.textAlign = "center";
  </script>
</p>
</div>
</body>
</html>

CSS :

body
 	{
 		background: linear-gradient(-1505deg, #34aba6, white);
 	}
 	.keseluruhan
 	{
 		position: absolute;
 		top: 40%;
 		left: 50%;
 		transform: translate(-50%, -50%);
 		text-align: center;
 	}
 	.kotak
 	{
 		padding: 10px 50px;
 		width: 100%;
 		height: 20%;
 		box-shadow: 0 12px 30px rgba(0,0,0,.5);
 	}
 	.kotak h3
 	{
 		font-family: arial;
 		text-transform: uppercase;
 	}

Hasil Dari Pengerjaan Array Contoh Pertama :

Mungkin sekian saja yang dapat kami sampaikan pada kesempatan kali ini dalam post yang berjudul #13 Basic Web | Web Programming Tutorial karena postingan juga sudah sangat panjang, pinggang kami juga kayaknya sudah encok, mata udah sangat lelah melihat codingan yang begitu panjang dan acak-acakan. saya cukupkan saja.

Wassalamualaikum wr, wb

Angga Gemilang Blog

Sabtu, 15 September 2018

#13 web Intermediate | Web Programming Tutorial

Assalamualaikum wr, wb

Array Multidimensi

Array Asosiatif

Contoh Pertama

HTML :

CSS :

Contoh kedua

HTML :

CSS :

Contoh Ketiga

HTML :

CSS :

Contoh Keempat

HTML :

CSS :

0 komentar:

Posting Komentar

Follow Me

Clock

Calendar

Popular Posts

Blog Archive

About Me

Sent Quick Message

Translate

Translator's Flag

SMK Negeri 4 Bandung

Pesan Dari Admin

About