Butiran

1
Penggunaan textarea
sebagai keluaran
[20181023] Sebagai salah satu elemen dalam suatu halaman web, textarea dapat
digunakan sebagai keluaran, yang akan terasa lebih terintegrasi dalam halaman
web yang sedang dirancang ketimbang menggunakan console. Hal ini teruta-
ma bermanfaat apabila hasil keluaran tersebut ingin digunakan kembali dalam
bagian lain.
1.1 Chrome dan Notepad++

Temukan laman untuk mengunduh sumber penjelajah web Google Chrome dan
penyunting teks Notepad++ sehingga dapat dilakukan instalasi secara offline.
Salah satu offline installer Google Chrome 70.0.3538.67, per 16 Oktober 2018,
dapat diperoleh melalui laman
https://www.neowin.net/news/google-chrome-700353867-offline-
installer
dan untuk Notepad++ v.7.5.9, per 14 Oktober 2018, dapat diunduh dari
https://notepad-plus-plus.org/download/v7.5.9.html
yang keduanya sebaiknya disimpan dalam folder source untuk dapat digunakan
dalam keadaan darurat.
1.2 Menampilkan console dalam Chrome

Bagaimanakah cara menampilkan console dalam Google Chrome sehingga dapat
dimanfaatkan untuk melihat pesan kesalahan atau melakukan operasi aritmatika
sederhana?
Gunakan kombinasi tombol CTRL + SHIFT + J dan tuliskan beberapa operasi
yang telah dikenal seperti
1
1. PENGGUNAAN TEXTAREA SEBAGAI KELUARAN 2
a = 2
b = 3
c = a + b
Perhatikan hasil yang diperoleh.
1.3 Format berkas HTML minimal

Tuliskan format berkas Hypertext Markup Language (HTML) minimal dengan
nama template.html, yang dapat digunakan untuk menampilkan halaman web,
mengatur tampilan dengan Cascading Style Sheets (CSS), dan menjalankan
kode JavaScript (JS) yang ada di dalamnya.
1 <! DOCTYPE html >

2 <html >
3 <head >
4 <title > textarea </title >
5 < meta charset = " iso -8859 -1 " >
6 <style >
7 body { background : # fff ;}
8 </style >
9 </head >
10 <body >
11 <script >
12 // ----- script beg -----
13
14 // ----- script end -----
15 </script >
16 </body >
17 </html >
Kode 1.1: Berkas template.html.
1.4 Katakunci HTML title and CSS background

Dengan melihat Kode 1.1, jelaskan apakah fungsi dari informasi diapit oleh
pasangan tag title dan peran dari nilai background yang bernilai #fff. Gan-
tilah nilai-nilai tersebut dan amati perubahan yang terjadi.
Informasi yang diapit oleh tag title akan dicantumkan pada titlebar tab
Chrome yang sedang dibuka. Sedangkan background mengatur warna dari isi
tab yang dalam hal ini berwarna putih atau kode heksadesimalnya adalah #fff.
1.5 Membuat textarea

Buatlah sebuah obyek yang merupakan elemen HTML dengan jenis textarea
dan tampilkan dalam halaman web yang diberi nama textarea.html. Tuliskan
kode JS yang dimaksud hanya dalam bagian antara
// ----- script beg -----
dan
// ----- script end -----
dalam Kode 1.1.
Kode JS yang dimaksud adalah
1 var ta = document . createElement ( " textarea " ) ;

2 document . body . append ( ta ) ;
Kode 1.2: Berkas textarea.html.
Isi secara lengkap dari berkas textarea.html tidak ditampilkan dalam Kode
1.2 karena sama dengan dalam Kode 1.1.
1.6 Mengubah isi obyek berjenis textarea

Ubahlah isi dari textarea sehingga menjadi
a = 2
b = 3
c = a + b
Untuk mendapatkan hasil yang diminta dapat digunakan kode berikut ini.

3 ta . style . height = " 60 px " ;
4
5 ta . value = " a = 2 " + " \ n "
6 + " b = 1.5 " + " \ n "
7 + " c = a + b = 3.5 " ;
Kode 1.3: Berkas textarea-value.html.
Perhatikan bahwa dalam contoh Kode 1.3 belum dilakukan proses perhitungan.
Hasil yang diperoleh hanyalah teks yang dituliskan.
1.7 Menampilkan deret

Buatlah suatu program JS untuk menampilkan deret bilangan
1 4 9 16 25 36 49 64 81 100
dalam sebuah textarea

Deret bilangan yang dimaksud memiliki rumusan
Un = n2 , (1.1)
yang diterapkan dalam kode berikut.

4 ta . style . width = " 250 px " ;
5
6 var N = 10;
7 var Un = [];
8 for ( var n = 1; n <= N ; n ++) {
9 Un . push ( n * n ) ;
10 }
11
12 var M = Un . length ;
13 for ( var m = 0; m < M ; m ++) {
14 ta . value += Un [ m ] + " " ;
15 }
Kode 1.4: Berkas textarea-series.html.
Perhatikan bahwa hasil deret disimpan dalam array Un yang pertama-tema di-
isikan bilangannya, lalu kemudian ditampilkan. Indeks array selalu dimulai dari
nol dalam JS.
1.8 Perhitungan sederhana

Kembali ke Kode 1.3, kali ini buatlah perhitungan tersebut dan tampilkan hasil-
nya dalam suatu textarea dan tunjukkan bahwa memang merupakan hasil dari
perhitungan tersebut.
Kode yang diminta adalahs sebagai berikut.

5
6 var a = 2;
7 var b = 1.5;
8 var c = a + b ;
9
10 ta . value = " a = " + a + " \ n "

11 + "b = " + b + "\n"
12 + "c = a + b = " + c;
Kode 1.5: Berkas textarea-addition.html.
Gantilah nilai-nilai dari a, b, ataupun c, maka nilai dalam textarea pun akan
berubah.
1.9 Fungsi sederhana

Perhitungan yang berulang kali dilakukan dapat disederhanakan dengan meng-
gunakan fungsi. Buatlah fungsi add() dengan isinya dua buah argumen yang
merupakan alternatif Kode 1.5, yang dalam hal ini terlihat menjadi semakin
rumit.
Fungsi add() terdapat pada akhir program berikut.

5
6 var a = 2;
7 var b = 1.5;
8 var c = add (a , b ) ;
9
10 ta . value = " a = " + a + " \ n "
11 + "b = " + b + "\n"
12 + "c = a + b = " + c;
13
14 function add (x , y ) {
15 var z = x + y ;
16 return z ;
17 }
Kode 1.6: Berkas textarea-addition-func.html.
Dengan menggunakan contoh dalam 1.6 telah dapat dibuat berbagai fungsi-
fungsi sederhana.
1.10 Mengurutkan bilangan

Buatlah sebuah fungsi untuk mengurutkan bilangan yang disimpan dalam array.
Kode yang dimaksud adalah sebagai berikut.


5
6 var x = [3 , 0 , 10 , 15 , 3 , 4 , 8 , 77 , 1];
7 var y = sort ( x ) ;
8
9 var N = x . length ;
10 for ( var i = 0; i < N ; i ++) {
11 ta . value += x [ i ] + " ";
12 }
13 ta . value += " \ n " ;
14 for ( var i = 0; i < N ; i ++) {
15 ta . value += y [ i ] + " ";
16 }
17
18 function sort ( a ) {
19 var N = a . length ;
20 var b = a . slice () ;
21 for ( var i = 0; i < N ; i ++) {
22 for ( var j = i + 1; j < N ; j ++) {
23 if ( b [ i ] > b [ j ]) {
24 var c = b [ i ];
25 b [ i ] = b [ j ];
26 b[j] = c;
27 }
28 }
29 }
30 return b ;
31 }
Kode 1.7: Berkas textarea-series-sort.html.
Perhatikan perintah .slice() pada baris 20. Cobalah menggantikannya dengan

b = a. Apakah yang terjadi?

Butiran

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Butiran

Diunggah oleh

Hak Cipta:

Format Tersedia

1

1.1 Chrome dan Notepad++

1.2 Menampilkan console dalam Chrome

Perhatikan hasil yang diperoleh.

1.3 Format berkas HTML minimal

1 <! DOCTYPE html >

1.4 Katakunci HTML title and CSS background

1.5 Membuat textarea

1 var ta = document . createElement ( " textarea " ) ;

1.6 Mengubah isi obyek berjenis textarea

1 var ta = document . createElement ( " textarea " ) ;

1.7 Menampilkan deret

dalam sebuah textarea

yang diterapkan dalam kode berikut.

1 var ta = document . createElement ( " textarea " ) ;

1.8 Perhitungan sederhana

1 var ta = document . createElement ( " textarea " ) ;

10 ta . value = " a = " + a + " \ n "

1.9 Fungsi sederhana

1 var ta = document . createElement ( " textarea " ) ;

1.10 Mengurutkan bilangan

1 var ta = document . createElement ( " textarea " ) ;

3 ta . style . height = " 100 px " ;

Perhatikan perintah .slice() pada baris 20. Cobalah menggantikannya dengan

Anda mungkin juga menyukai