Modul 4 Praktikum Rekayasa Web

Modul Praktikum Rekayasa Web

 

 

Pertemuan ke-4: Javascript

 

 

 

 

 

 

 

Disusun oleh

Dr. Uung Ungkawa, MT

 

 

 


Modul 4

Javascript

 

Tujuan :

  1. Menunjang mata kuliah Rekayasa Web
  2. Mengetahui, mengenal dan memahami dokumen HTML
  3. Mengenal dan memahami styling dengan CSS
  4. Mengenal dan memahami pemrograman web dengan Javascript

Jenis Praktikum :

  1. Eksplorasi HTML, CSS dan Javascript

Persyaratan :

  1. Praktikan harus menyiapkan terminal (Windows) perintah.
  2. Praktikan harus menyiapkan penyunting teks (text editor). Disrankan menggunakan Eclipse, Visual Studio Code, Netbean, Notepad++.
  3. Praktikan harus menyiapkan browser (Chrome, Firefox).

Perangkat praktikum :

  1. PC / Notebook

Materi

Web adalah jaringan komputer. Dari sudut pandang pemrograman, web dapat dipandang sebagai hubungan klien dengan server. Permintaan klien ke server dilayani server dan dieksekusi dengan script di sisi server. Namun ada juga pekerjaan yang tidak perlu dilakukan server karena membutuhkan waktu dan sumber daya yang lebih mahal dibanding jika dikerjakan komputer di sisi klien. Seperti halnya di sisi server, disisi klien juga membutuhkan script untuk melakukan tugas untuk klien. Di sinilah peranan Javascript.

Secara garis besar, peranan HTML, CSS dan Javascript dapat dibagi sebagai berikut:

  • HTML berperan untuk mendefinisikan isi halaman web. Apa saja yang harus tampil di halaman web.
  • CSS berperan menentukan tata letak dan corak isi halaman web, bagaimana elemen itu ditampilkan di layar, printer, dan lainnya
  • Javascript berperan dalam menentukan perilaku halaman web, sehingga halaman web menjadi lebih dinamis, interaktif dan cepat.

Beberapa pekerjaan yang dapat dikerjakan dengan Javascript, karena memang harus diambil alih ke sisi klien adalah:

  • Mengubah isi, nilai atribut, corak, elemen HTML.
  • Validasi, data input
  • Menu dropdown dinamik
  • Menampilkan tanggal dan waktu
  • Menampilkan jendela pop up dan kotak dialog seperti dialog peringatan (alert), konfirmasi dan prompt.
  • Menampilkan jam, dan lain-lain

Memasang Javascript (JS)

Di dalam HTML, kode JS disisipkan di antara tag <script> dan </script>. Jika ada tag <script> maka secara default yang dimaksud adalah script JS, sehingga tidak perlu dinyatakan secara eksplisit di dalam tag <script>. Scrip JS dapat dipasang di bagian badan (body) maupun di kepala (head) HTML dan bisa berapa pun jumlahnya (boleh memasang lebih dari satu script). Script JS juga bisa disimpan secara eksternal baik di komputer lokal maupun di luar. Penggunaan file eksternal JS diperlukan jika kodenya digunakan di beberapa halaman web. File JS berekstensi .js. Untuk dapat menggunakan script eksternal, pasang nama file script di dalam atribut src dalam tag script:

<script src=”myScript.js”></script>

Perlu dicatat bahwa di file eksternal kode JS tidak perlu diletakkan di antara tag <script>. Kita juga bisa mencantumkan lebih dari satu file JS eksternal di dalam satu halaman web. File eksternal dapat pula diacu dengan URL penuh seperti:

<script src="https://www.shibghah.com/js/myScript1.js"></script>

Kita juga bisa menggunakan notasi URL relatif terhadap lokasi halaman web yang aktif seperti:

<script src="/js/myScript1.js"></script>

Keluaran Program JS

JS dapat menampilkan data dengan berbagai cara:

  • Menuliskan data di elemen HTML dengan innerHTML.
  • Menuliskan data ke keluaran HTML dengan document.write().
  • Menuliskan data ke kotak peringatan dengan window.alert().
  • Menuliskan data ke konsol browser dengan console.log().

Menggunakan innerHTML

Untuk mengakses elemen HTML JS dapat menggunakan metode document.getElementById(Id). Atribut Id menentukan elemen HTML yang akan diakses, dan properti innerHTML menentukan isi HTML. Contoh:

<!DOCTYPE html>

<html>

<body>

 

<h2>Halaman Web Pertama-ku</h2>

<p>Paragraf Pertama</p>

 

<p id="demo"></p>

 

<script>

document.getElementById("demo").innerHTML = 5 + 6;

</script>

 

</body>

</html>

Keluarannya adalah

Gambar 1. Keluran dengan innerHTML

Menggunakan document.write()

Untuk keperluan pengujian, lebih cocok menggunakan document.write(). Ini akan menghapus isi halaman web sebelumnya.

<!DOCTYPE html>

<html>

<body>

 

<h2>My First Web Page</h2>

<p>My first paragraph.</p>

 

<p>Never call document.write after the document has finished loading.

It will overwrite the whole document.</p>

 

<script>

document.write(5 + 6);

</script>

 

</body>

</html>

Tampilannya seperti Gambar 2:

Gambar 2. Keluaran document.write

Menggunakan window.alert

Dalam JS, objek window bersifat global yang berarti menyertakan window bersifat opsional, boleh tidak disertakan, sehingga bisa hanya dengan alert saja.

Menggunakan console.log()

Untuk keperluan debugging, kita bisa memanggil metode console.log() di browser untuk menampilkan data.

<!DOCTYPE html>

<html>

<body>

 

<h2>Activate Debugging</h2>

 

<p>F12 on your keybord will activate debugging.</p>

<p>Then select "Console" in the debugger menu.</p>

<p>Then click Run again.</p>

 

<script>

console.log(5 + 6);

</script>

 

</body>

</html>

Menggunakan print

Kita bisa menggunakan metode window.print() di browser untuk mencetak isi window yang dibuka:

<!DOCTYPE html>

<html>

<body>

 

<h2>The window.print() Method</h2>

 

<p>Click the button to print the current page.</p>

 

<button onclick="window.print()">Print this page</button>

 

</body>

</html>

Statemen JS

Program komputer merupakan kumpulan instruksi yang akan dieksekusi komputer. Instruksi program ini disebut statement. Program JS merupakan kumpulan statemen program. Statemen JS terdiri dari nilai, operator, ekspresi, keyword (kata kunci) dan komentar. Statemen JS disebut program JS kadang disebut juga kode JS.

Dalam kumpulan statemen (program) di antara statemen dipisahkan dengan titik koma (semicolon):

<script>

var a, b, c;//deklarasi 3 buah variabel

a = 5;//memberikan nilai 5 ke a

b = 6;//memberikan nilai 6 ke b

c = a + b;//memberikan jumlah a dan b ke c

document.getElementById("demo1").innerHTML = c; //menampilkan hasil di elemen demo

</script>

Beberapa fitur JS:

Case sensitive: huruf kapital berbeda dengan huruf kecil

Pemrograman berorientasi objek yang menggunakan prototype bukan kelas

Mengikuti sintaks dan struktur bahasa C

Tidak terlalu ketat dengan tipe data

Bahasa interpreter, bukan dikompilasi

Nilai (Value)

Nilai dalam JS ada dua: nilai tetap (fixed) dan variabel. Nilai tetap disebut literal dan yang tidak tetap disebut variabel. Contoh literal: bilangan seperti 10.5, 1001. string seperti “Institut teknologi Nasional”.

Komentar

Komentar sebaris dalam JS diawali garis miring maju ganda (double forward slash): //, sedangkan komentar untuk beberapa baris dibatasi /* … */. Contoh:

/* Ini komentar

beberapa baris

di dalam JS */

 

//ini komentar sebaris di JS

Gunakan komentar untuk mencegah kode dieksekusi.

Identifier (Pengenal, nama)

Aturan pembuatan identifier (nama yang unik) dalam JS adalah:

Nama boleh mengandung huruf, angka, garis bawah (_) dan tanda dolar ($).

Nama harus diawali huruf, tapi boleh juga diawali $ dan _.

JS bersifat peka kasus sehingga huruf kapital berbeda dengan huruf kecilnya.

Kata cadangan (kata untuk bahasa JS) tidak boleh digunakan untuk nama.

Variabel

Variabel JS digunakan untuk menyimpan nilai. Dalam JS, variabel dideklarasikan dengan kata kunci var. Tanda sama dengan digunakan untuk statemen pemberian. Deklarasi variabel digunakan untuk menciptakan variabel, dengan kata kunci var. Memberikan nilai ke variable dengan tanda sama dengan (=).

var namaMahasiswa;

var orang=”Unyil”, merkMobil=”Honda”, harga=250;

Deklarasi ulang akan menghapus nilai yang disimpannya.

Nama variabel harus:

Nama harus diawali huruf, garis bawah atau dolar ($)

Setelah huruf pertama, boleh memnggunakan angka.

Varibel JS peka kasus, x berbeda dengan X.

Operator

Operator di JS umumnya sama dengan operator di Java hanya saja dalam JS, tipe data agak longgar, misalnya string bisa dijumlahkan dengan bilangan.

var x = 5 + 5; // menghasilkan 10

var y = "5" + 5; // menghasilkan 55

var z = "Hello" + 5; //menghasilkan Hello5

Tipe Data

Tipe data primitif dalam JS: bilangan, string, boolean, undefined. Bilangan mencakup bilangan bulat dan riil. Data jenis string dibatasi tanda petik tunggal atau tanda petik ganda. Data boolean terdiri dari dua nilai saja: true dan false. Sedangkan undefined merupakan data yang belum memiliki nilai, hanya baru dideklarasikan.

Selain itu, ada data jenis kompleks: object, array (larik), null dan function. Operator typeof akan mengembalikan nilai number untuk bilangan, memberikan nilai object untuk objek, larik dan null dan mengembalikan nilai function untuk fungsi. Untuk data yang belum didefinisikan, typeof akan memberikan nilai undefined.

Secara nilai, null dan undefined sama tetapi secara jenis berbeda. Null berjenis objek sedangkan undefined tidak berjenis (undefined). Berikut beberapa contoh data:

typeof ""// "string " Ini string kosong, boleh demikian

typeof "John"// "string"

typeof "John Doe"// "string"

typeof 0// Returns "number"

typeof 314// Returns "number"

typeof 3.14// Returns "number"

typeof (3)// Returns "number"

typeof (3 + 4)// Returns "number"

var car;

typeof car//undefined karena belum punya nilai

typeof true;//boolean

typeof null;//object

typeof undefined;//undefined

var orang = {namaDepan=”Unyil”, namaBelakang=”Surunyil”};

typeof orang;//object

typeof {nim:15xxxx012, nama:”Usro”} //object

typeof function myFunc(){} //function

typeof [1,2,3,4]//object

 

Fungsi

Deklarasi fungsi JS mirip dengan Java. Di JS tidak ada penjenisan parameter seperti di Java. Contoh:

function myFunc(param1, param2) {

//kode

return x; //x mewakili nilai yang dikembalikan

}

Parameter bersifat lokal, hanya dikenal di dalam badan fungsi. Pemanggilan fungsi tanpa tanda kurung akan menghasilkan deskripsi fungsi. Fungsi dalam JS bisa disimpan di dalam variabel dan bisa berperan sebagai fungsi:

var x = fungsi1(17);

var str1 = “Alamat: “ + x;

Objek

Objek menunjukkan apa saja dalam kehidupan nyata seperti mobil, rumah, mahasiswa dan sebagainya. Dalam pemrograman berorientasi objek, objek dalam program mewakili objek di kehidupan nyata. Dalam JS, objek terdidi dari properti dan metode dan berupa variabel seperti:

var mobil = {jenis:”sedan”, merk:”Honda”, warna:”Silver”};

Properti objek ditulis dalam bentuk pasangan nama:nilai. Untuk mengakses properti digunakan nama objek diikuti titik dan nama properti atau nama objek diikuti nama properti (dalam tanda petik) di dalam kurung kotak:

mobil.jenis

mobil[“jenis”]

Metode dalam JS disimpan di dalam properti sebagai definisi fungsi:

var orang = {

namaDepan: “Unyil”,

namaBelakang:”Surunyil”,

id:”1234”,

namaLengkap:function(){

return this.namaDepan + “ “ + this.namaBelakang;

}

}

Untuk mengakses objek, dengan cara seperti mengakses properti tetapi diikuti tanda kurung:

orang.namaLengkap()

Jika tidak menggunakan tanda kurung, berarti minta definisi fungsinya.

Masalah Objek String

Lazimnya, string itu nilai promitif, yang dibuat dengan memberikan literal string:

var x = “Unyil”;

tetapi string juga bisa dijadikan objek dengan konstruktor String dengan kata kunci new:

var y = new String(“Unyil);

Permasalahan objek string dalam JS adalah karena di JS ada pemadanan jenis sehingga jika x dan y di atas dipadanankan, secara nilai sama (keduanya bernilai Unyil) tetapi secara jenis berbeda karena yang satu string yang lain objek. Kedua, setiap deklarsi objek, menghasilkan objek yang berbeda, sehingga jika x dan y di atas dideklarasikan secara objek, menghasilkan dua objek yang berbeda yang bernilai sama:

var x = new String(“Unyil”), y = new String(“Unyil”);

// (x === y) menghasilkan false karena objek berbeda

Akan tetapi, meskipun string itu primitif, dalam JS bisa langsung menjadi objek jika diperlakukan sebagai objek: misalnya kita mengambil nilai properti panjang string (length). Hal seperti ini berlaku juga untuk bilangan dan larik (array).

Event

HTML event adalah sesuatu yang terjadi pada elemen HTML. Ketika JS digunakan di halaman HTML, JS dapat bereaksi terhadap (menanggapi) event ini. Event ini bisa berasal dari browser ataupun pengguna seperti:

Selesainya memuat halaman.

Isian input berubah

Tombol diklik

Seringkali, event terjadi akibat kita menghendaki sesuatu dan JS memungkinkan untuk mengeksekusi kode ketika terdeteksi ada event. Di dalam HTML kita bisa memasang event handler (yang menangani event) sebagai atribut di dalam elemen HTML, baik dengan tanda petik tunggal maupun ganda:

<elemen event=’kode JS’>

<elemen event=”kode JS”>

Contoh:

<button onclick="document.getElementById('demo').innerHTML=Date()"> The time is?</button>

Beberapa event HTML yang lazim:

Event

Keterangan

onchange

Elemen HTML telah berubah

onclick

Pengguna mengklik elemen HTML

onmouseover

Pengguna menggeser mouse ke atas elemen

onmouseout

Pengguna menggeser mouse ke luar elemen

onkeydown

Pengguna menekan tombol papan ketik

onload

Browser telah selesai memuat halaman

 

JSON

JSON (JavaScript Object Notation) adalah format untuk menyimpan dan mengirimkan data. JSON sering digunakan ketika data dikirim dari server ke halaman web. Format JSON secara sintaks sama dengan format objek dalam JS. Karenanya, program JS dapat dengan mudah mengubah data JSON ke objek JS. Aturan sintaks JSON:

Data berbentuk pasangan nama-nilai

Data dipisahkan dengan koma

Kurung kurawal menunjukkan objek

Kurung kotak menunjukkan larik.

Contoh:

{

“pegawai”:[

{“namaDepan”:”Ucrit”, “namaBelakang”:”Surucit”}

{“namaDepan”:”Ogah”, “namaBelakang”:”Surogah”}

]

}

DOM HTML

JS banyak menangani elemen HTML sehingga penting bagi kita untuk memodelkan dokumen HTML untuk dapat dengan mudah menangani HTML. Di sinilah peranan DOM (Dociment Object Model) HTML sehingga JS dapat mengakses dan mengubah semua elemen dalam dokumen HTML. Dengan demikian kita dapat membuat halaman HTML dinamis. DOM HTML disusun berbentuk pohon objek seperti Gambar 3:

Gambar 3. Pohon objek DOM HTML

Dengan model ini, JS mendpat jalan untuk mengelola HTML dinamik, yakni JS dapat:

Mengubah semua elemen HTML di halaman web

Mengubah atribut HTML di halaman web

Mengubah semua corak CSS di halaman web

Menghapus elemen dan atribut HTML yang ada

Menambah elemen dan atribut HTML yang baru

Bereaksi terhadap semua event HTML yang ada

Membuat event HTML yang baru

Metode dan Properti untuk DOM

Metode DOM HTML adalah tindakan yang dapat kita lakukan pada elemen HTML sedangkan properti DOM HTML adalah nilai dari elemen HTML yang dapat kita atur (set) atau dapat kita ubah dan dibaca. DOM HTML dapat diakses JS atau bahasa lain. Dalam DOM, semua elemen HTML dijadikan objek dan antar muka pemrograman adalah properti dan metode tiap objek. Jadi, properti adalah nilai yang dapat kita baca (get) atau atur (set) sedangkan metode adalah tindakan yang dapat kita lakukan (seperti add atau delete) terhadap elemen HTML. Contoh berikut mengubah isi elemen <p> dengan id= “demo”. Di sini, getElementById adalah metode dan innerHTML adalah properti:

<body>

<p id=”demo”></p>

<script>

document.getElementById(“demo”).innerHTML=”Hello Itenas”;

</script>

</body>

DOM Document

Objek DOM dokumen HTML adalah pemilik semua objek lain di halaman web. Objek dokumen mewakili halaman web. Jika kita hendak mengakses suatu elemen dalam halaman web, harus selalu dimulai dengan mengakses objek dokumen ini. Berikut ini contoh bagaimana kita menggunakan objek dokumen untuk mengakses dan manipulasi HTML:

Metode

Deskripsi

document.getElementById(id)

mengambil element dengan id

document.getElementsByTagName(name)

mengambil elemen dengan nama tag

document.getElementsByClassName(name)

mengambil elemen dengan nama kelas

 

Metode dan properti lainnya bisa dilihat di tutorial online.

DOM CSS

Untuk mengubah corak, gunakan sintaks:

document.getElementById(id).style.property = corak_baru;

Contoh:

<body>

<p id=”demo”> Hello Itenas </p>

<script>

document.getElementById(“demo”).style.color=”blue”;

</script>

</body>

Contoh di atas mengubah corak dengan JS secara langsung. Umumnya kita mengubah sesuatu melalui event:

<body>

<p id=”demo”> Hello Itenas </p>

<button onclick=

“document.getElementById(‘demo’).style.color=’blue’”>Klik Aku!

</button>

</body>

Event dan Pendengar Event

JS dieksekusi ketika terjadi event, seperti ketika pengguna mengklik elemen HTML. Untuk mengeksekusi kode ketika pengguna mengklik elemen, tambahkan kode JS pada event HTML (yang menjadi atribut elemen). Contoh:

onclick = kode_JS

DOM HTML membolehkan untuk memasang event ke elemen:

document.getElementById("myBtn").onclick= tampilkanTanggal;

Event membutuhkan fungsi untuk menangani event jika hal itu terjadi, yang biasa disebut event handler. Dalam JS ada metode addEventListener() untuk menambahkan event handler:

document.getElementById("myBtn").addEventListener("click", tampilkanTgl);

Kita bisa menambahkan banyak event handler untuk satu elemen bahkan kita juga bisa menambahkan event handler untuk event yang sama pada elemen yang sama. Event handler dapat ditanggalkan dengan metode removeEventListener(). Sintaks penulisannya:

elemen.addEventListener(event, fungsi, useCapture);

Parameter pertama adalah jenis event, parameter kedua fungsi yang dipanggil jia event terjadi dan parameter ketiga bernilai boolean (opsional) yang menentukan apakah bubbling atau capturing. Nilai defaultnya false yang berarti bubbling yaitu event handler elemen terdalam dulu yang ditangani. Sebaliknya untuk capturing, event handler elemen terluar dulu. Yang dimaksud terdalam adalah jika mislanya elemen <p> di dalam elemen <div>, maka elemen yang terdalam adalah elemen <p>.

DOM Navigasi

Jika kita ada di suatu folder (direktori) maka kita bisa navigasi ke sub folder atau ke folder di atasnya. Demikian juga dalam DOM HTML, kita bisa navigasi. Dalam DOM HTML, dokumen, elemen, dan komentar merupakan node. Setiap node dapat diakses JS. Hirarki node-node dalam HTML:

Dalam pohon node, yang tertinggi disebut akar (node akar).

Setiap node hanya memiliki satu induk, kecuali akar yang tidak punya induk.

Satu node bisa memiliki banyak anak.

Saudara adalah node dengan induk yang sama.

Untuk melakukan navigasi kita bisa menggunakan properti nodes: parentNode, childNodes[noNode], firdtChild, lastChild, nextSibling, previousSibling. Kita juga bisa mengetahui nama node dengan properti nodeName dan bisa mengambil nilai node dengan nodeValue, mengambil jenis Node dengan properti nodeType.

DOM Koleksi

Jika kita mengambil elemen dengan nama tag, mungkin akan mendapatkan banyak elemen dengan nama tag yang sama. Metode getElementByTagName() mengembalikan nilai ke objek HTMLCollection. Objek ini seperti larik (array) yang bisa diakses seperti larik misalnya:

var x = document.getElementsByTagName("p");

y = x[1];

DOM Atribut

Dalam DOM HTML, objek Attr menunjukkan atribut HTML. Atribut HTML selalu milik elemen HTML. Objek NamedNodeMap mewakili koleksi node atribut elemen HTML. Objek Attr (atribut) memiliki properti name (untuk mengambil nama atribut), value (mengambil atau menentukan nilai atibut), specified (memberikan nilai true jika atribut sudah ditentukan). Objek NamedNodeMap memiliki metode: getNamedItem(x), mengambil atribut dengan nama x, item() memberikan node atribut pada indeks tertentu dalam NamedNodeMap, length merupakan properti untuk mengetahui panjang larik (jumlah) node atribut, removeNamedItem() untuk menghapus node atribut tertentu dan setNamedItem() untuk menentukan node dengan nama tertentu. Contoh berikut mengambil elemen dengan tag <h1> kemudian ambil yang pertama dengan indeks 0 kemudian membuat variabel typ yang merupakan atribut class dan menentukan nilai atribut class tadi dengan dclass:

<html>

<head>

<style>

.dclass {

color: blue;

}

</style>

</head>

<body>

<h1>Hello Itenas</h1>

<p>Klik tombol untuk menentukan atribut class di h1 dengan nilai "dclass".</p>

<button onclick="myFunction()">Klik ini</button>

<script>

function myFunction() {

var h = document.getElementsByTagName("H1")[0];

var typ = document.createAttribute("class");

typ.value = "dclass";

h.attributes.setNamedItem(typ);

}

</script>

</body>

</html>

Objek HTML

Dengan DOM, HTML dan elemennya merupakan objek, yang berarti memiliki properti dan mungkin metode. Objek anchor (elemen <a>) misalnya memiliki properti download yang digunakan untuk menampilkan nilai atribut download di elemen <a> yang dimaksud. Demikian pula objek input jenis text (<input type=”text”>) memiliki properti value untuk mengambil dan menentukan nilai dari atribut value di isian teks. Contoh:

<html>

<body>

Name: <input type="text" id="myText" value="Mickey">

<p id=”p1”>Click the button to change the value of the text field.</p>

<button onclick="myFunction()">Try it</button>

 

<script>

function myFunction() {

var n = document.getElementById("myText").value;

document.getElementById(“p1”).innerHTML=n;

}

</script>

 

</body>

</html>

Latihan

Eksplorasi Javascript

Siapkan browser Chrome atau Firefox

Siapkan penyunting teks (text editor) seperti Eclipse, VS Code, Netbean, Notepad++ atau yang lainnya.

Buatkan kode JS dalam elemen HTML yang menampilkan tombol dan jika tombol diklik, menampilkan teks di elemen <p> yang kosong.

Buatkan kode JS dalam elemen HTML yang menampilkan tombol dan jika tombol diklik, menampilkan teks di elemen <p> yang berisi teks.

Cobalah kode-kode JS yang ada di modul ini.

Tugas Akhir

Buatkan sebuah kalkulator dengan JS dengan ketentuan (rekuiremen) sebagai berikut:

Nama kalkulator: Itenas Calclator.

Kalkulator sederhana yang bisa menghitung aritmetik: kali (*), bagi (/), tambah (+) dan Kurang (-).

Ada 10 tombol digit dan satu tombol untuk mengetahui hasil (=).

Ada satu layar (display) dan ada tombol C untuk menghapus isi di layar.

Ada tombol desimal (.) yang menunjukkan titik desimal (koma dalam ejaan Indonesia).

Jika tombol ”=” diklik maka muncul teks perhitungan dengan hasilnya seperti 2+3=5, tidak hanya memunculkan hasilnya saja.

Gunakan properti objek HTML untuk mengambil nilai di layar.

Penampakan kalkulator tersebut seperti Gambar 4 di bawah:

Gambar 4. Kalkulator Itenas


Last modified: Sunday, 22 November 2020, 10:10 PM