Category

Powered by Blogger.

Friday, December 11, 2015

javascript - frame

by Lindi Classic  |  in javascript at  3:00 PM
Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan sedikit tentang Frame pada Javascript.

Sebagai contoh, Buatlah file html dengan script seperti di bawah ini:


Disini saya menyimpan dengan nama 84-javascript-frame.html
Kemuadian, Buatlah file html dengan script seperti di bawah ini:






















Disini saya menyimpan dengan nama 85-javascript-frame-kiri.html
Kemuadian, Buatlah file html dengan script seperti di bawah ini:
 













Disini saya menyimpan dengan nama 86-javascript-frame-kanan.html
Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:

















Demikianlah sedikit penjelasan tentang pembuatan frame pada Javascript. Semoga bermanfaat, Salam sukses...


Monday, December 7, 2015

javascript - object browser

by Lindi Classic  |  in javascript at  11:41 PM
Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan tentang fungsi object browser pada Javascript. 
1. Object Browser
a. Hirarki Objek Browser dan Objek HTML

















Hirarki ini penting untuk membuat acuan kepada Objek dan propertinya. Turunan dari suatu Objek adalah properti dari objek orang tuanya. Karena semua objek adalah merupakan turunan dari objek window, sehingga objek window sendirinya tidak memiliki acuan ke objek maupun properti apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada window lain membutuhkan tambahan nama window kepada Objek acuan-nya.
contoh:






Macam-macam Objek Browser














b.Metoda dari Objek Window
Metoda dari objek window dapat digunakan untuk menampilkan kotak dialog, yang merupakan satu jendela yang tampil di bagian depan (layer paling atas) menyusul satu event yang di jalankan, dan memungkinkan untuk :

  1. Memberikan peringatan kepada user
  2. Memberikan pilihan yang harus dipilih oleh user
  3. Meminta user untuk mengisi atau melengkapi isian pada suatu form field.
Macam-macam Metoda Objek Window































Sebagai contoh, Buatlah file html dengan script seperti di bawah ini:
text-align: justify;">  

<html>
<head>
    <title>javascript objecct browser</title>
    <script language="Javascript">
        <!--
        var tanda = 0;
        var posisi = 0;
        var IsAnim = false;
        var IsKanan = true;
        var kata = "";

        function evTimeOut()
        {
            if (IsKanan)
                status = kata.substring(0,posisi);
            else
                status = kata.substring(posisi, posisi + kata.length);

            if (posisi++ > kata.length)
            {
                posisi = 0;
                IsKanan = !IsKanan;
            }
           
            tanda = setTimeout("evTimeOut()",250);
            IsAnim = true;
        }

        function evMulai()
        {
            kata = document.frform.txKata.value;
            evSelesai();
            evTimeOut();
        }

        function evSelesai()
        {
            if (IsAnim)
            {
                clearTimeout (tanda);
                IsAnim = false;
                posisi = 0;
                IsKanan = true;
                status = "";
            }
        }
        //-->
    </script>
</head>
<body>
    <FORM NAME="frform">
        Teks berikut akan ditampilkan pada <I>status bar</I>
        <BR>
        <INPUT TYPE="text" NAME="txKata" SIZE=50 MAXLENGTH=100>
        <BR><BR>
        <INPUT TYPE="button" VALUE="Mulai" onClick="evMulai()">
        <INPUT TYPE="button" VALUE="Selesai" onClick="evSelesai()">
    </FORM>
</body>
</html>

Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:

Demikianlah sedikit penjelasan tentang fungsi dari object browser pada Javascript. Semoga bermanfaat, Salam sukses...

javascript - object metoda hapus

by Lindi Classic  |  in javascript at  11:16 PM
Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan sedikit tentang fungsi (object metoda hapus) pada Javascript. Untuk menghapus instan objek yang telah kita buat yaitu dengan memberi nilai null, contoh:




Sebagai contoh, Buatlah file html dengan script seperti di bawah ini:

<html>
<head>
    <title>javascript object hapus</title>
    <script language="javascript">
        <!--
        //definisi objeck mahasiswa
        function mahasiswa(nim , nama , umur)
        {
            this.nim    = nim;
            this.nama    = nama;
            this.umur    = umur;
        }
           
        function lindi(programmer)    
        {   
            for(var kelas in programmer)
            document.writeln(programmer[kelas]);
            document.writeln("");
        }   
        -->
    </script>
</head>
<body bgcolor="lightblue">
    <script language="javascript">
        <!--
        document.writeln("<pre>");
            //menciptakan instan objek mahasiswa
            var mahasiswa1 = new mahasiswa("12140022" , "lindi" , "26");
            var mahasiswa2 = new mahasiswa("12140045" , "reki" , "25");
            var mahasiswa3 = new mahasiswa("12140050" , "dika" , "25");
       
            var mahasiswa1 = null;
            var mahasiswa2 = null;
            var mahasiswa3 = null;
           
            //menuliskan instan objek mahasiswa
            document.writeln("nilai objek mahasiswa 1");
            lindi(mahasiswa1);
            document.writeln("nilai objek mahasiswa 2");
            lindi(mahasiswa2);
            document.writeln("nilai objek mahasiswa 3");
            lindi(mahasiswa3);
        document.writeln("</pre>");
        -->
    </script>
</body>
</html>

Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:

















Demikianlah sedikit penjelasan tentang fungsi dari  (object metoda hapus) pada Javascript. Semoga bermanfaat, Salam sukses...





Saturday, December 5, 2015

javascript - object metoda

by Lindi Classic  |  in javascript at  11:24 AM
Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan tentang fungsi metoda object pada Javascript. Metoda adalah suatu fungsi yang diasosiasikan dengan satu objek, satu aksi yang bisa di eksekusi pada satu objek. Metoda pada objek dari navigator adalah fungsi-fungsi yang sudah didefinisikan sebelumnya (predefined) berdasarkan aturan-aturan HTML dan tidak bisa dimodifikasi. Akan tetapi bisa dibuat metoda yang mempersonalisasikan sendiri untuk setiap objek yang di buat. Perhatikan contoh tentang dokumen HTML, yang terdiri dari objek yang bernama document, objek ini mempunyai metoda yang bernama write() yang berguna untuk memodifikasi isi dari dokumen HTML dengan menampilkan teks tertentu. Maka metoda itu akan di panggil dengan cara berikut :

Deklarasi Metoda
Suatu fungsi yang berasosiasikan objek acuan adalah metode. Format berikut meng-asosiasikan fungsi dengan suatu objek :



Kemudian metode tersebut berkerja dengan suatu objek :




1. Metoda Write
Metoda write() dari satu objek dokumen memungkinkan untuk memodifikasi secara dinamik isi dokumen HTML. Berikut ini adalah sintaks secara umum dari metoda write():
Secara praktisnya bisa menuliskan metoda write() sebagai berikut :
  1. Menuliskan secara langsung teks ke dalam parameter :
  2. Melewatkan teks tersebut melalui suatu variabel :
  3. Menggabungkan kedua cara diatas :
  4. Menyisipkan langsung satu ekspresi, yang akan dievaluasi dan dijalankan segera mungkin, dan hasilnya langsung ditampilkan
  5. Cara lain juga bisa dengan memasukkan tag HTML kedalam metoda write:

     




2. Metoda Writeln

Metoda writeln() berfungsi sama persis seperti metoda write dengan penambahan pemindahan ke baris baru setiap kali usai menuliskan metodanya. Akan tetapi dokumen HTML tidak mengenal adanya penambahan baris baru dengan cara tradisional, penambahan baris baru hanya bisa dilakukan dengan menggunakan tag <BR>, oleh karena itu metoda ini tidak terlalu berguna di dalam HTML, kecuali diantara tag <PRE> dan </PRE> dimana kita memperlakukan teks didalamnya seperti file teks biasa.


Sebagai contoh, Buatlah file html dengan script seperti di bawah ini:

<html>
<head>
    <title>javascript metoda</title>
    <script language="javascript">
        <!--
        //definisi objek mahasiswa
        function mahasiswa(nim , nama , umur)
        {
            this.nim    = nim;
            this.nama    = nama;
            this.umur    = umur;
          
            //deklarasi metoda
            this.universitas    = universitas2;
            this.tampilkaninfo    = tampilkaninfo;
        }
      
        //menulis property-property objek
        function tulis(objek)
        {
            for (var lindi in objek)
            document.writeln(objek[lindi]);
            document.writeln(" ");
        }
      
        //metoda universitas
        function universitas2(namauniv , alamatuniv)
        {
            this.namauniv    = namauniv;
            this.alamatuniv    = alamatuniv;
        }
      
        //menampilkan info
        function tampilkaninfo()
        {
            alert(this.nama + ", umur : " + this.umur + ", dengan nim : " + this.nim + ", kuliah di : " + this.namauniv +
            ", dengan alamat : " + this.alamatuniv);
        }  
        -->
    </script>
</head>
<body bgcolor="lightblue">
    <script language="javascript">
        <!--
        document.writeln("<pre>");
            //menciptakan instan objek mahasiswa
            mahasiswa1 = new mahasiswa("12140022" , "lindi" , "26");
            mahasiswa2 = new mahasiswa("12140045" , "reki" , "25");
            mahasiswa3 = new mahasiswa("12140050" , "dika" , "25");
  
            //mengisi metoda universitas dengan mahasiswa1
            mahasiswa1.universitas("politeknik telkom" , "bandung");
            mahasiswa1.tampilkaninfo();
        document.writeln("</pre>");
        -->
    </script>
</body>
</html>

Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:

Demikianlah sedikit penjelasan tentang fungsi (metoda object) pada Javascript. Semoga bermanfaat, Salam sukses...

Friday, December 4, 2015

javascript - object

by Lindi Classic  |  in javascript at  1:14 PM
Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan sedikit tentang (object) pada Javascript.  
A. Penggunaan Objek
1. Menciptakan Objek Sendiri
JavaScript adalah suatu bahasa berdasarkan pada objek dan bukan merupakan bahasa object-oriented programming (OOP). Perancang JavaScript tidak bertujuan membuat suatu bahasa OOP yang baru; tetapi bertujuan membuat suatu bahasa script untuk mengintegrasikan objek yang telah dibuat dengan suatu bahasa OOP kedalam dokumen HTML. Selanjutnya Javascript tidak memiliki encapsulation, inheritance dan abstraction seperti pada bahasa pemrograman C atau Java. Tetapi class pada JavaScript menyediakan properti dan metode untuk membuat objek.

JavaScript memperlakukan elemen-elemen yang tampil di jendela navigator kita sebagai suatu objek, yang artinya adalah elemen yang :
  1. Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga bisa diketahui dimana letak/lokasi objek itu sebenarnya.
  2. Dimana kita mengasosiasikan dengan kondisi atau sifat sifat khusus (properti). Pengertian diatas mungkin sedikit membingungkan bagi anda, tapi coba lihat contoh berikut ini untuk memperjelas. Misal bayangkan ada satu pohon yang terletak di dalam satu kebun, dimana pohon itu mempunyai banyak dahan, dan di salah satu dahannya terdapat sarang burung. Hirarkinya sebagai berikut :

 Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut :
Bayangkan sekarang untuk mengecat atau mengganti warna sarang burung yang terletak di atas pohon, maka cukup mengetik perintah berikut ini :

Penjelasan diatas merupakan ilustrasi tentang bagaimana memperlakukan objek didalam JavaScript, perbedaannya adalah bukan pohon sebagai bentuk objek kita, akan tetapi navigator kitalah sebagai objek utamanya.

1.1 Mendefinisikan Objek
Berikut ini adalah notasi yang digunakan oleh JavaScript untuk menggambarkan suatu objek dan propertinya:
 Sebagai contoh, objek pegawai memiliki properti sebagai berikut :







Juga dapat mengunakan acuan array dengan index secara numerik:

1.2 Mendefinisikan Objek dengan Fungsi
Suatu objek dapat dibuat dengan properti yang telah didefinisikan. Sebagai contoh akan dibuat satu objek mahasiswa dengan properti sebagai berikut :
  • NIM
  • Nama
  • Umur
Kita bisa membuat objek mahasiswa dengan menggunakan satu fungsi yang kita beri nama fungsi mahasiswa, dimana properti dari objek mahasiswa didefinisikan di fungsi tersebut. Kita juga menggunakan kata kunci this, properti ini merupakan penunjuk ke objek mahasiswa, dalam contoh yang detailnya dapat anda lihat berikut ini :

Untuk seterusnya fungsi diatas disebut konstruktur objek, karena Anda telah mengkonstruksi sebuah objek dengan fungsi tersebut.

Untuk menciptakan instant dari objek mahasiswa diatas, kita gunakan kata kunci new (maksudnya satu objek yang lain dengan properti sama dengan objek mahasiswa) :
Untuk melakukan manipulasi pada objek membutuhkan fasilitas tambahan dari JavaScript yaitu dengan perintah for...in , perintah with, operator new, dan kata kunci this. Bila Anda ingin menggunakan properti atau memanggil metode beberapa kali, dapat mempersingkat penulisan dengan pernyataan with. Pernyataan with menghilangkan perlunya penulisan nama objek.

2. Objek Standar JavaScript
JavaScript telah menyediakan predefined objects, yaitu objek-objek yang telah terdefinisi dan siap dipakai. Objek-objek ini distandarisasikan oleh asosiasi ECMA (European Computer Manufacturer Association). Berikut ini adalah daftar objek standar JavaScript.

Cara mendefinisikan objek standar JavaScript untuk array, boolean, date adalah sebagai berikut :

Cara mendefinisikan objek standar JavaScript untuk string adalah sebagai berikut :

Sebagai contoh, Buatlah file html dengan script seperti di bawah ini:

<html>
<head>
    <title>javascript object</title>
    <script language="javascript">
        <!--
        //definisi objeck mahasiswa
        function mahasiswa(nim , nama , umur)
        {
            this.nim    = nim;
            this.nama    = nama;
            this.umur    = umur;
        }
           
        function lindi(programmer)    
        {   
            for(var kelas in programmer)
            document.writeln(programmer[kelas]);
            document.writeln("");
        }   
        -->
    </script>
</head>
<body bgcolor="lightblue">
    <script language="javascript">
        <!--
        document.writeln("<pre>");
            //menciptakan instan objek mahasiswa
            var mahasiswa1 = new mahasiswa("12140022" , "lindi" , "26");
            var mahasiswa2 = new mahasiswa("12140045" , "reki" , "25");
            var mahasiswa3 = new mahasiswa("12140050" , "dika" , "25");
       
            //menuliskan instan objek mahasiswa
            document.writeln("nilai objek mahasiswa 1");
            lindi(mahasiswa1);
            document.writeln("nilai objek mahasiswa 2");
            lindi(mahasiswa2);
            document.writeln("nilai objek mahasiswa 3");
            lindi(mahasiswa3);
       
            //mmengisi nilai baru mahasiswa1
            document.writeln("Nilai baru mahasiswa 1");
            mahasiswa1["nim"] = "12140025";
            mahasiswa1["nama"] = "lindiyantoro";
            mahasiswa1["umur"] = "27";
           
            lindi(mahasiswa1)
        document.writeln("</pre>");
        -->
    </script>
</body>
</html>

Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:


Demikianlah sedikit penjelasan tentang object pada Javascript. Semoga bermanfaat, Salam sukses...

Thursday, December 3, 2015

javascript - event

by Lindi Classic  |  in javascript at  4:11 AM
Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan sedikit tentang (function event) pada Javascript. Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada kenyataannya event di dalam JavaScript adalah klik dari tombol mouse (merupakan satu satunya aksi yang dapat diatur oleh HTML). JavaScript memungkinkan mengasosiasikan event dengan beberapa fungsi dari metode seperti lewatnya mouse pointer diatas zona tertentu, perubahan nilai dan lain sebagainya.

Event administrator adalah yang memperbolehkan untuk mengasosiasikan satu aksi ke dalam sebuah event. Sintaks dari event administrator tersebut adalah sebagai berikut :



Untuk penggunaan link hiperteks, maka sintaksnya adalah sebagai berikut :





A. Macam-macam Kejadian

Dalam JavaScript terdapat beberapa macam kejadian yang harus ditangani. Dibawah ini beberapa kode yang harus dimasukkan ke dalam tag event administrator untuk menghasilkan aksi tertentu.



































































Dibawah ini akan mencoba satu contoh sederhana cara menampilkan kotak dialog yang berisi tulisan 'Latihan Event' (dengan tanda satu petik di depan dan di belakang kata) sesudah anda melakukan klik terhadap satu link yang mentrigger event untuk mengaktifkan kotak dialog tersebut.














Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:
 
Dan apabila di klik pada link tersebut, maka hasilnya aalah sebagi berikut:


Demikianlah sedikit penjelasan tentang (function event) pada Javascript. Semoga bermanfaat, Salam sukses...

javascript - function alert

by Lindi Classic  |  in javascript at  3:58 AM
Assalamualaikum wr. wb.
Pada kesempatan kali ini saya akan menjelaskan sedikit tentang (function alert) pada Javascript.kita bisa melewatkan parameter di dalam suatu fungsi, dalam artian kita berikan nilai atau nama variabel supaya fungsi itu bisa di eksekusi berdasarkan parameter tersebut. Pada saat kita melewatkan beberapa parameter ke dalam fungsi, parameter-parameter tersebut dipisahkan oleh tanda koma, baik pada saat deklarasi ataupun pada saat pemanggilan. 

Kita lihat contoh di bawah ini, kita akan membuat program JavaScript yang menampilkan kotak dialog :




















Bukalah file tersebut pada browser, dan hasilnya adalah sebagai berikut:


Dan apabila link tersebut di klik, maka hasilnya adalah sebagai berikut:















Demikianlah sedikit penjelasan tentang (function alert) pada Javascript. Semoga bermanfaat, Salam sukses...






Proudly Powered by Blogger.