Blogroll

Rabu, 31 Januari 2018 Januari 31, 2018

PHP Dasar : ARRAY (part 3)





Assalamu’alaikum….

Hai sobat… kali ini saya akan mempelajari tentang apa itu Array. Apakah sebelumnya kalian sudah tau apa itu Array,mungkin belum oleh sebab itu mari kita lihat dan pelajari pembahasan saya kali ini ktentang Array.

Pengertian
Array adalah pengaturan sistematis dari objek serupa, biasanya dalam baris dan kolom.

Latar Belakang
Dapat memahami dan bisa membuat sebuah program menggunakan array.

Uraian
Seperti yang di jelaskan di atas Array adalah pengaturan sistematis dari objek serupa, biasanya dalam baris dan kolom, atau bisa juga Array adalah struktur data yang terdiri atas banyak variabel dengan tipe data sama, dimana masing-masing elemen variabel mempunyai nilai indeks. Indeks array selali bertipe integer yang dimulai dari 0.

Jenis-jenis Array

Ada dua jenis array

  • Array Indeks
    array dengan tombol angka/indeks yang disebut array yang diindeks.ini adalah jenis yang paling umum dari array.
    Sintaks :
    arrat_name=[key1 => nilai1, key2 => nilai2. ---];
    Praktiknya
    Coding :

    <html>
    <body>
    <?php
    $nama = [0 => “Sinta”, 1 => “Lia”, 2 => “Citra”, ];
    echo $nama[0];
    ?>
    </body>
    </html>


    Hasil:


    Contoh diatas akan menampilkan tulisan “Sinta” karena pada echo ditulis angka 0. pada array angka 0 itu mewakili string yang isinya adalah Sinta.


  • Array Assosiatif
    Array asosiatif adalah array yang tidak menggunakan angka sebagai kunci di setiap nilainya.

    • Array Asosiatif (satu dimensi)
      Array satu dimensi adalah array yang hanya berisi satu dimensi saja.

    • Array Dua dimensi
      Merupakan sebuah variabel yang menyimpan sekumpulan data yang memiliki tipe sama dan elemen yang akan diakses melalui 2 indeks atau subskrip yaitu indeks baris dan indeks kolom.
      Bentuk umum pendeklarasian:

      nama_array[jumlah_eleman_baris][jumah_eleme_kolom];

      Contoh :

      <html>
      <body>
      <?php
      //membuat array dua dimensi
      $nilai=array(
      array(90,Lia,27),
      array(75,Jesica,23),
      array(95,laila,19),
      array(86,citra,12)
      );
      //Tampilan menngunakan array 2 dimensi secara manual
      echo "<strong><h1>Nilai ditampilkan secara manual</h1></strong><br>";
      echo $nilai[0][0]." nilai dari ".$nilai[0][1]." absen ".$nilai[0][2]."<br>";
      echo $nilai[1][0]." nilai dari ".$nilai[1][1]." absen ".$nilai[1][2]."<br>";
      echo $nilai[2][0]." nilai dari ".$nilai[2][1]." absen ".$nilai[2][2]."<br>";
      echo $nilai[3][0]." nilai dari ".$nilai[3][1]." absen ".$nilai[3][2]."<br>";
      ?>
      </body>
      </html>


      Hasil :











    • Array Multidimensi
      Array multidimensi adalah array yang mengandung satu atau beberapa array lain didalamnya atau bisa dikatakan array dalam array.
      Contoh Array Multidimensi
      Coding :
      <html>
      <body>
      <?php
      $data=array(
      Array(Judul => "Website dengan PHP ",Pengarang => "Khoirul laila ", Alamat => "Ponorogo"),
      Array(Judul => "Pengenalan SQL ", Pengarang => "Ria Alfina ",Alamat => "Madiun",),
      Array(Judul => "Pengenalan Jaringan ",Pengarang => "Ibet Renata ",Alamat => "Magetan",)
      );
      Echo"Membuat Array Multidimensi<br><br>";
      Foreach($data as $val)
      {
      Foreach($val as $key => $data2)
      {
      echo"$key : $data2";
      }
      echo"<br>";
      }
      ?>
      </body>
      </html>



      Hasil :










      Tampilan di atas adalah contoh array multi-dimensi dimana array itu sendiri sudah dijelaskan bahwa array multi-dimensi itu adalah array di dalam array.
Maksud dan Tujuan
Dapat memahami Array multi-dimensi dengan benar dan jelas.

Alat dan Bahan
  1. Laptop
  2. File Items
  3. Text Editor

Kesimpulan
Seperti yang dijelaskan di atas tadi bahwa array multi-dimensi itu adalah array di dalam array. Dalam array multidimensi juga terdapat beberapa jenis, dan juga sudah dijelaskan pengertian dan contohnya.

Referensi

Tidak ada komentar:

Selasa, 30 Januari 2018 Januari 30, 2018

PHP Dasar : membuat Form PHP (part 2)



Assalamu’alaikum…


        Hai sobat kali ini saya akan mempelajari tentang apa itu Form dan bagaimana penggunaan dan cara membuatnya, nah kalian membuka blog yang tepat saya akan memberitahu apa itu form dan bagaimana cara meembuatnya. Yuk kita lihat uraian berikut :

Pengertian

       Form digunakan untuk menerima inputan dari user dan memproses hasil inputan tersebut ke server.

Latar Belakang

 Dapat memahami tentang Form pada PHP dan cara membuatnya.

Uraian

    Penggunaan Form yang hanya menggunakan HTML saja tidak akan terlalu berguna, Form biasanya hanya berupa interface yang disediakan untuk mengumpulkan data dari user dan akan di proses dengan bahasa pemrograman seperti JavaScript atau PHP, dan disimpan dalam database MySQL.
Perintah atau tag yang digunakan adalah <FORM> dan diakhiri d
engan </FORM>. Field-field yang berada diantaranya digunakan untuk menentukan ukuran jenis dari masing-masing input field.

Contoh dibawah ini menampilkan bentuk HTML sederhana dengan dua kolom dan tombol kirim.

Masukkan Coding :

<html>
<body>

<form action="form-input.php" method="post">
Name : <input type="text" name="name"><br>
E-mail : <input type="text" name="email"><br>
<input type="submit" value="Login">
</form>

</body>
</html>



hasil :












    Saat pengguna mengisi formulir di atas dan mengklik tombol kirim, data formulir dikirim untuk diproses ke file PHP yang bernama "form-input.php". Data formulir dikirim dengan metode HTTP POST.

Untuk itu mari kita buat Form baru yaitu simpan dengan nama “form-input.php”.



Masukkan coding :

<html>
<head>
<title>form php </title>
<style>
body {
background-image: url(h.jpg);
height: 400px;
width: 1000px;

}
.tengah{
position: absolute;
margin-top: -100px;
margin-left: -200px;
left: 50%;
top: 50%;
width: 500px;
height: 300px;
background-image: url(r.jpg);
}
</style>
</head>
<body>
<div align="center" class="tengah"><p align="center"><font face="verdana" size="6" color="black">Silahkan Masukkan Biodata</font></p>
<form method = "post" action = "simpan.php">
<table align="center">
<tr><td>NIS</td><td><input type = "text" onkeyup="isi_otomatis()" name="nim"></td></tr>
<tr><td>Nama</td><td><input type="text" name="nama"></td></tr>
<tr><td>Jenis Kelamin</td><td>
<input type="radio" name="jenis_kelamin" value="L">Laki Laki
<input type="radio" name="jenis_kelamin" value="P">Perempuan
</td></tr>
<tr><td>Jurusan</td><td>
<select name="jurusan">
<option value="AKUNTANSI">AKUNTANSI</option>
<option value="ADMINISTRASI PERKANTORAN">AP (Administrasi Perkantoran)</option>
<option value="PEMASARAN">PEMASARAN</option>
<option value="REKAYASA PERANGKAT LUNAK">RPL (Rekayasa Perangkat Lunak)</option>
<option value="TEKNIK KOMPUTER JARINGAN">TKJ (Teknik Komputer Jaringan</option>
</select>
</td></tr>
<tr><td>Agama</td><td>
<select name="agama">
<option value="ISLAM">Islam</option>
<option value="KRISTEN">Kristen</option>
<option value="HINDU">Hindu</option>
<option value="BUDHA">Budha</option>
<option value="KATHOLIK">Katholik</option>
</select>
</td></tr>
<tr><td>Alamat</td><td><input type="text" name="alamat"></td></tr>
<tr><td colspan="2"><button type="submit" value="simpan">SIMPAN</button></td></tr>
</table>
</form>
</div>
</body>
</html>




hasil :













untuk hasil diatas, mungkin coding CSS-nya tidak akan muncul background-nya karena pada background di masukkan gambar bukan color, untuk itu kita harus mengganti nama gambar sesuai nama gambar yang kita miliki. Ingat harus satu folder yaaa….





Selamat mencoba sobat……….;)

Maksud dan Tujuan

lebih memahami form pada PHP
mengerti penempatan pada form
dapat mempraktikkan membuat Form pada PHP


Alat dan Bahan

1. Laptop
2. File Items
3. Text Editor

Referensi


 

Tidak ada komentar:

Senin, 29 Januari 2018 Januari 29, 2018

Pengertian PHP Dasar (part 1)


 

 

Assalamu'alaikum...

          Hai sobat kali ini saya akan mempelajari tentang PHP mungkin sebelumnya sudah pernah saya ngeblog tentang PHP akan tetapi ini adalah target saya untuk minggu ini, untuk lebih jelasnya mari kita lihat penjelasan berikut.

  • Pengertian
            
             PHP adalah sebuah bahasa skrip yang dapat disisipkan ke dalam HTML. Banyak dipakai untuk memprogram situs web dinamis,juga digunakan untuk membangun sebah CMS. Dapat membuat halaman Web yang dinamis dan interaktif.

  • Latar Belakang 
     
          memahami dan mempelajari apa itu PHP.

  • Uraian

           Kalau dilihat dari pengertianya PHP-lah yang berperan penting di dunia website untuk mempermudah keseluruhan web itu sendiri. Sehingga jika ingin mempelajari pemrograman web dimulai dari dasar (HTML) adalah hal yang sangat penting sebelum belajar PHP.
    Pada awalnya PHP merupakan kependekan dari Personal Home Page. PHP hanya mengeksekusi kode yang ditulis dalam pembatas, pembatas disini adalah seperti “<?php” untuk membuka dan “?>” untuk menutup. Apapun teks yang berada diluar pembatas tidak akan dieksekusi.

    • Variabel 
       
           Variabel diawali dengan simbol $. pada PHP 5 di perkenalkan jenis isyarat yang memungkinkan fungsi untuk memaksa mereka untuk menjadi parameter objek dari class tertentu, array, atau fungsi. Namun, jenis petunjuk ini tidak dapat digunakan dengan jenis skalar seperti angka atau sting. Contoh variabel dapat ditulis sebagai $nama_variabel.
      Penulisan fungsi, penamaan kelas, nama variabel adalah peka akan huruf besar (Kapital) dan huruf kecil. Kedua tanda kutip “” dari string memberikan kemampuan untuk interpolasi nilai variabel ke dalam string PHP. Dalam PHP menerjemahkan baris sebagai spasi, dan pernyataan harus diakhiri dengan titik koma (;) .

    • Komentar

             PHP memiliki 3 jenis sintaks sebagai komentar pada kode yaitu tanda blok / * * /, komentar 2 baris yaitu // serta tanda pagar # digunakan untuk komentar satu baris. Komentar bertujuan untuk meninggalkan catatan pada kode PHP dan tidak akan diterjemahkan ke program.

    • Fungsi

              Ratusan fungsi yang disediakan oleh PHP serta ribuan lainnya yang tersedia melalui berbagai ekstensi tambahan. Fungsi-fungsi ini didokumentasikan dalam dokumentasi PHP. Namun, dalam berbagai tingkat pengembangan, kini memiliki berbagai konvensi penamaan.


Kelebihan PHP dari Bahasa Pemrograman Lain :
  1. Dalam bahasa pemrograman PHP tidak melakukan sebuah kompilasi dalam penggunaannya.
  2. Web Server yang mendukung PHP dapat ditemukan dimana-mana.
  3. Dalam sisi pengembangan lebih mudah.
  4. Dalam sisi pemahaman juga lebih mudah karena PHP adalah bahasa scripting yang paling mudah dan memiliki referensi yang banyak.


Ada beberapa macam Tipe Data dalam PHP:
  • Boolean
  • Integer
  • Float/Double
  • String
  • Array
  • Object
  • Resource
  • NULL
dalam penjelasan tipe data dapat dilihat pada blog saya http://lailaa08.blogspot.com yang judulnya “Tipe Data”

  • Maksud dan Tujuan

    Lebih memahami apa iti PHP
    mengerti dasar dari PHP

  • Alat dan Bahan
    1. Laptop
    2. File Items
  • Kesimpulan 
     
          Bahwa PHP adalah sebuah skrip yang disisipkan dalam HTML, dan digunakan untuk membuat halaman web yang dinamis dan interaktif. Selain itu terdapat juga kelebihan PHP.
Tidak ada komentar:

PHP Dasar : Konstanta








               Selain Variabel juga terdapat istilah “Konstanta” atau “Constant”. Pada pembahasan kali ini kita akan mempelajari tentang pengertian dan cara penulisan Konstanta dalam PHP, serta bedanya dari variabel.

Pengertian
Konstanta (constant) adalah suatu lokasi penyimpanan (dalam memory) yang berisikan nilai yang sifatnya tetap dan tidak bisa diubah sepanjang program berjalan.

Bedanya dengan Variabel adalah kalu variabel itu isinya dapat diubah bahkan dihapus selama program itu berjalan, sedangkan konstan jika telah diberi nilai, tidak dapat diubah lagi dalam kode program. Sesuai dengan namanya “Konstant”.

Aturan Penulisan Konstanta PHP
  1. Mendefinisikan Konstanta dalam PHP
    jika dalam PHP dibikin menggunakan tanda dolar maka cara pembuatan konstantanya ada dua cara yaitu :
      1. menggunakan kata kunci (keyword) const.
      2. Menggunakan fungsi define
Untuk mendefinisikan konstanta dengan menggunakan const, caranya serupa dengan menambahkan nilai pada sebuah variabel, hanya saja didahului kata const. Berikut contoh penulisannya :



<?php
const situs = “www.wikipedia.com”;
echo situs; // www.wikipedia.com
?>

Jika memakai atau menggunakan define, fungsi ini memerlukan 2 nilai yaitu nama konstanta dan nilainya. Lihat contoh dibawah ini :



<?php
define(“situs”, “www.wikipedia.com”);
echo situs; // www.wikipedia.com
?>

Aturan penamaan konstanta sama seperti variabel, yaitu untuk karakter pertama cuma bisa memakai huruf dan underscore (_), dan untuk huruf kedua dan seterusnya , bisa memakai huruf, angka dan underscore.konstanta juga tidak bisa diawal angka atau mengandung karakter khusus sepert #,*, atau &.

Pembuatan konstanta dengan keyword const cuma bisa dipakai pada top-level scope, yaitu harus dalam lingkungan global PHP. Sehingga kita tidak dapat memakai const di dalam function, loop, atau keadaan if.
Jika kamu memerlukan konstanta di dalam fungsi, maka harus memakai keyword define.

2. Konstanta PHP bersifat Case Sensitif
Sama seperti variabel, konstanta dalam PHP bersifat case sensitif, sehingga perbedaan huruf besar dan kecil dianggap berbeda. SAYA, SaYa, dan saya merupakan 3 konstanta yang berbeda.

Meskipun kita dapat menggunakan huruf kecil pada penulisan konstanta disarankan atau dianjurkan memakai huruf besar untuk penulisan konstanta. Tujuannya yaitu agar kita dapat mudah membedakan antara variabel dan konstanta.

3. Nilai Konstanta PHP Tidak Bisa Diubah
Jika sebuah konstanta sudah didefinisikan kita tidak dapat mengubah nilai itu.

Contoh error konstanta :


<?php
define(“GAJI”, 5000000);
echo GAJI; echo “<br/>;
define(“GAJI”, 50000);
?>


4. Konstanta cuma bisa berisi tipe data tertentu
Konstanta dalam PHP cuma bisa berisi tipe data sederhana (disebut juga jenis tipe skalar) yaitu: boolean,integer,float dan string. berbeda dengan variabel, yang bisa juga berisi tipe data turunan seperti array, objek atau resources.

5. Konstanta Sistem PHP (Predefined Constant)
Sama seperti variabel, PHP juga sudah membuat beberapa konstanta yang sudah diartikan dan tidak boleh di ubah nilainya. Tetapi sebab banyaknya modul yang bisa ditambahkan kedalam PHP, Predefined Constant dalam PHP akan meningkat bergantung modul yang ada.


Maksud dan Tujuan
Lebih mengenal perbedaan Variabel dengan Konstanta.

Alat dan Bahan
  1. Laptop
  2. File Items



Sekian dan trimakasih, penjelasan diatas adalah tambahan saja mohon maaf jika ada kekurangan .

Tidak ada komentar:

Sabtu, 27 Januari 2018 Januari 27, 2018

JavaScript : Evaluasi





Assalamu’alaikum..


          Hai sobat… hari ini saatnya evaluasi karena dipake buat training dari cisco jadi tidak ada evaluasi. Nah pada kesempatan ini saya akan evaluasi di blog saja tentang apa yang saya pelajari minggu ini.minggu ini saya mempunyai target untuk mempelajari dan memahami apa itu JavaScript. Sumber informasi atau referensi saya untuk mempelajari JavaScript adalah
di dalamnya sudah komplit jika ingin tau lebih tentang JavaScript, tidak hanya JavaScript saja yang ada akan tetapi masih banyak lagi contohnya HTML, CSS, PHP, JQUERY itu beserta contoh dan pengertiannya. Pokoknya komplit deh buka aja web di atas kalo kalian penasaran. ;)

Pengertian
JavaScript adalah sebuah bahasa tingkat tinggi yang dinamis.

Latar Belakang
mengerti dan memahami ap itu JavaScript.

Uraian

      JavaScript mrupakan salah satu dari 3 bahasa pemrograman yang berfungsi untuk membuat interaksi pada halaman website atau aplikasi yang dibangun berbasis web. JavaScript bersifat case sensitive,maksudnya berpengaruh terhadap huruf besar dan huruf kecil. JavaScript dapat ditulis dalam tag <script> dan ditutup dengan tag </script>, juga bisa diletakkan di bagian tag <head> atau tag <body>.

Menggunakan Java Script Secara Internal
         Penulisan javascript secara internal adalah dengan cara menyisipkan langsung syntax javascript di dalam HTML. Jika teman-teman menggunakan cara ini maka teman-teman harus meletakkan di antara tag <script> pembuka dan tag </script> penutup. Dan meletakkannya bisa di dalam tag <head>, bisa juga di dalam tag <body>. Buat file HTML untuk membuat contoh penggunaan javascript secara internal. Bisa file html bisa juga php. Karena javascript mampu berjalan di antara keduanya. Di sini saya hanya membuat file html saja sebagai contoh.
Buat file HTML dengan nama belajar.html 
<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<h1>Belajar Javascript</h1>
<h2>lailaa08.blogspot.com<h2>
<div id=”nama”></div>
<script>
document.getElementById(“nama”).innerHTML=”Nama Saya Laila”;
</script>
</body>
</html>
pada contoh diatas, terdapat sebuah element div yang kita beri id=”nama”. Dan kemudian kita memberikan sentuhan javascript di sana dengan perintah :
document.getElementById(“nama”).innerHTML=”Nama Saya Laila”;
document adalah syntax wajib di javascript , dan fungsi getElementById() berungsi untuk memerintahkan mendapatkan element yang ber id sesuai dengan yang ada dalam parameter fungsi getElementById() itu sendiri. Penulisannya harus di perhatikan ya teman-teman besar kecilnya. Karena javascript bersifat case sensitive. Yang dimaksud case sensitive adalah suatu sifat yang berpengaruh terhadap huruf besar dan huruf kecil, di sini case sensitive itu sensitif terhsdsp huruf besar atau kecil. Dan innerHTML berfungsi untuk menuliskan html. Jadi secara lengkap instruksi yang kita serukan adalah kita masukkan untuk menuliskan “Nama Saya Laila” di element yang ber id “nama”. Jika dijalankan pada browser sebagai berikut :







Menggunakan Javascript Secara Eksternal 


 
                Setelah membahas cara penulisan javascript secara internal, atau dengan cara menyisipkan syntax javascript pada html, maka di sini kita akan membahas cara lainnya untuk menggunakan javascript, yaitu dengan cara menggunakan javascript secara eksternal. Caranya yaitu buatlah dua file yaitu :
belajar.html
belajar.js
di file belajar.html kita akan menuliskan syntax HTML nya saja. Dan pada belajar.js kita akan menuliskan syntax javascript nya pada file belajar.js . cara agar kedua file bisa terhubung adalah dengan cara menghubungkannya dengan syntax berikut :
 
<script type="text/javascript" src="belajar.js"></script>
belajar.html

<html>
<head>
<title>Belajar Javascript</title>
</head>
<body>
<h1>Belajar Javascript</h1>
<h2>lailaa08.blogspot.com</h2>
<div id="nama"></div>
</body>
<script type="text/javascript" src="belajar.js"></script>
</html>
belajar.js
document.getElementById("nama").innerHTML = "Nama Saya Laila";
jika dijalankan maka hasilnya akan sama.

 Terdapat juga beberapa macam JavaScript salah satunya adalah JavaScript Function, JavaScript HTML DOM Event.

JavaScript Function
Fungsi JavaScript di definisikan dengan kata kunci fungsi , diikuti dengan nama , diikuti tanda kurung () . Nama fungsi dapat berisi huruf, angka, garis bawah, dan tanda dolar (aturan yang sama dengan variabel). Tanda kurung dapat mencakup nama parameter yang dipisahkan dengan koma
( parameter1, parameter2, ... ) Kode yang akan dieksekusi, oleh fungsinya, ditempatkan di dalam kurung kurawal {} 
 JavaScript HTML DOM Animation kita membuat animasi dalam sebuah halaman web. Seperti yang kita ketahui animasi adalah hasil pengolahan gambar sehingga menjadi gambar yang bergerak.

JavaScript HTML DOM Element

        JavaScript HTML DOM Event adalah JavaScrip yang dapat dijalankan saat sebuah peristiwa terjadi, seperti pengguna mengeklik elemen HTML. Untuk menjalankan kode saat pengguna mengeklik elemen, tambahkan kode javascript ke atribut sebuah HTML.
Contoh HTML Event:
  • Saat pengguna mengeklik mouse
  • Saat halaman web dimuat
  • Saat gambar telah dimuat
  • Saat mouse bergerak di atas sebuah elemen
  • Bila field masukan diubah
  • Saat formulir HTML dikirimkan
  • Saat pengguna memasukkan kunci 

Masih banyak lagi, untuk lebih detailnya buka aja blog saya
disitu terdapat juga contoh-contohnya, maaf ya ini cuma evaluasi jadi cuma pengertian saja.

Maksud dan tujuan
mengulang yang dipelajari kemarin tentang JavaScript.

Alat dan Bahan
  • Laptop
  • File Items
Kesimpulan
Jadi JavaScript adalah  mrupakan salah satu dari 3 bahasa pemrograman yang berfungsi untuk membuat interaksi pada halaman website atau aplikasi yang dibangun berbasis web. JavaScript bersifat case sensitive,maksudnya berpengaruh terhadap huruf besar dan huruf kecil. dan terdapat juga macam macamnya.

Referensi
1.  http://lailaa08.blogspot.co.id/ 
2.  https://www.w3schools.com/
Tidak ada komentar:

Jumat, 26 Januari 2018 Januari 26, 2018

JavaScript : HTML DOM (part 2)








Assalamu’alaikum…

         Hai sobat kali ini saya akan memberitahu tentang macam macam Javascript HTML DOM, ternyata ada banyak macamnya mari kita pahami dan praktikkan coding di bawah ini .

Pengertian
        JavaScript HTML DOM Animation kita membuat animasi dalam sebuah halaman web. Seperti yang kita ketahui animasi adalah hasil pengolahan gambar sehingga menjadi gambar yang bergerak.

        JavaScript HTML DOM Event adalah JavaScrip yang dapat dijalankan saat sebuah peristiwa terjadi, seperti pengguna mengeklik elemen HTML. Untuk menjalankan kode saat pengguna mengeklik elemen, tambahkan kode javascript ke atribut sebuah HTML.
Contoh HTML Event:
  • Saat pengguna mengeklik mouse
  • Saat halaman web dimuat
  • Saat gambar telah dimuat
  • Saat mouse bergerak di atas sebuah elemen
  • Bila field masukan diubah
  • Saat formulir HTML dikirimkan
  • Saat pengguna memasukkan kunci


Latar Belakang

        JavaScript HTML DON Animation dan JavaScript HTML DOM Event sendiri memiliki kode atau cara yang bermacam macam, tampilannya juga banyak. Berikut ini contoh dari masing masing javascript HTML DOM :

JavaScript HTML DOM Animation

  • Membuat Halaman web sederhana

    Coding :

<html>
<body>

<h1>Animasi JavaScript pertama saya</h1>

<div id="animate">Aniamasi saya akan masuk di Halaman ini</div>

</body>
</html>



Hasil :









  • Membuat Kontainer Animasi Gaya Elemen
Elemen kontainer harus dibuat dengan style = “position : relative “.
Element Animasi harus dibuat dengan = “position : absolute “.

Coding :

<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: aqua;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background: red;
}
</style>
<body>

<h1>Animasi JavaScript Pertamaku </h1>

<div id="container">
<div id="animate"></div>
</div>

</body>
</html>





Hasil :














Tampilan di atas hanya menampilkan halaman saja belum ada animasinya.hanya pewarnaan dan gaya elemen.


  • Kode Animasi
    dilakukan dengan memprogram perubahan terhadap dalam gaya elemen perubahan dipanggil oleh timer, bila interval timer kecil, maka animasi akan terus-menerus. kode dasarnya adalah sebagai berikut :
var id = setInterval(frame, 5);

function frame() {
if (/* test for finished */) {
clearInterval(id);
} else {
/* code to change the element style */
}
}


Contoh :

<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: aqua;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>

<p>
<button onclick="myMove()">Click Me</button>
</p>

<div id="container">
<div id="animate"></div>
</div>

<script>
function myMove() {
var elem= document.getElementById("animate");
var pos= 5;
var id= setInterval(frame, 5);
function frame() {
if (pos == 350){
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
</script>
</body>
</html>





Hasil :















Tampilan di atas juka di klik maka warna kotak merah akan bergerak ke pojok kiri atas.





JavaScript HTML DOM Element

  • Bereaksi ke Event
    Dalam contoh ini, isi elemen <h1> akan berubah saat pengguna mengekliknya.

Coding :

<html>
<body>

<h1 onclick="changeText(this)">Klik pada teks!</h1>

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

</body>
</html>



Hasil :




 


Jika teks di atas di klik maka akan berubah menjadi :








  • HTML Event Attributes
    Dalam contoh ini menampilkan Date (waktu dan tanggal) pada saat tombol atau button di klik.

Coding :















Hasil :









  • The Ochange Event
    Acara onchange sering digunakan bersamaan dengan validasi field input.Berikut adalah contoh bagaimana cara menggunakan onchange. Fungsi upperCase () akan dipanggil saat pengguna mengubah isi field masukan. Yang akan menampilkan sebuah tampilan jika diisi huruf maka akan diubah menjadi huruf kapital.


Coding :









Hasil :













  • The onmouseover and onmouseout Events
    Jika cursor diarahkan ke gambar warna tersebut maka akan berubah warna dan tulisan sesuai warna dan tulusan yang kita isikan pada coding.


Coding :













Hasil :




 Jika cursor diarahkan pada gambar akan berubah menjadi :







  • The onmousedown, onmouseup and onclick Events
    Ini adalah bagian dari klik mouse. Pertama pada saat tombol mouse di klik,event onmousedown dipicu, saat tombol mouse dilepaskan akan berubah.

Coding :







Hasil :











Maksud dan Tujuan
Lebih memahami JavaScript HTML DOM Animation dan Javascript HTML DOM Event.

Alat dan Bahan
  • Laptop
  • File Items
  • Text Editor

Hasil yang diharapkan
agar bisa memahami penjelasan di atas dan mempraktikkan contoh.

Referensi

Tidak ada komentar:
Langganan: Postingan (Atom)

About

RPL (Rekayasa Perangkat Lunak) . Diberdayakan oleh Blogger.

Number Of Visitors :

Cari Blog Ini

BTemplates.com

Pages

Blogger templates

Popular Posts