Langsung ke konten utama

Mencari kata/huruf dengan fungsi indexOf dan lastIndexOf dalam HTML (HTML Programming)

Hai teman teman.. ketemu lagi dengan saya diblog yang sederhana ini.
Dikeheningan malam yang sunyi ini, dikamar kos ditemani boneka dan musik A7x yang mengalun setia memecah keheningan malam, kali ini saya akan membahas tenteng pencarian huruf/kata. Berada di indeks keberapakah huruf / kata tersebut. Kita akan menggunakan fungsi ‘indexOf’ dan ‘lastIndexOf’.

indexOf berfungsi untuk menampilkan index data yang kita cari pertama kali ketemu di index keberapa. Sedangkan lastIndexOf  berfungsi untuk menampilkan index data yang kita cari terakhir kali ketemu di index keberapa.

Bingung? Jangan khawatir :D disini saya akan memberi contoh.

Misal pada tulisan “Hello World” kita akan mencari huruf l (el).

Maka indexOf-nya adalah 2 mengapa? Karna string adalah Array of char. Array kan dimulai dari index ke 0. Jadi H=0, e=1, l=2, l=3,o=4 dst.. 

Kalo lastIndexOf(‘l’)-nya  berarti l=9. Mengapa kok 9? Karna si komputer menemukan ‘l’ terakhir diindex ke 9.  Kalo setelah index ke 9 masih ada huruf l, maka index itulah yang akan diambil. Pokoknya index terakhir dari huruf tersebut yang dihitung.

Jadi dapat diambil kesimpulan kalo index of adalah pertama kali kita ketemu. Kalo lastIndexOf(‘l’) terakhir kali kita ketemu. nah gitu teman-teman.. masih bingung? Yah sekarang kita coba kodingan dibawah ini untuk lebih memahamkan apa yang saya sudah jelaskan diatas.

<!DOCTYPE html>
<html>
<head>
     <title>Latihan Index</title>
</head>
<body>
String <input type="text" id="teks"><br/>
Search <input type="text" id="cari"><br/>
<input type="button" value="click" onclick="cariIndex()"><br/>
<script type="text/javascript">
function cariIndex(){
     x=document.getElementById('teks').value;//memanpung string yang akan dijadikan objek pencarian
     cr=document.getElementById('cari').value;//menampung huruf/kata yang akan dicari
     document.getElementById('io').value=x.indexOf(cr);
     document.getElementById('lio').value=x.lastIndexOf(cr);   
}
</script>

</body>
</html>

Sekarang saya akan membahas indexOf after dan lastIndexOf after yang pencariannya dimulai dari indx ke... .cara penulisannya adalah:
indexOf(‘huruf/kata yang dicari’,’index mulai’)
lastIndexOf(‘huruf/kata yang dicari’,’index mulai’)
mengapa ada fungsi sepeti ini? Karna pada suatu kasus misalnya “saya ingin mencari huruf x nih. Tapi mulainya dari index ke 4. Jangan dari pertama”. Bisa aja kan ada orang yang minta kaya gitu?
Konsepnya sama seperti pencarian index biasa. Bedanya ini hanya start memulai pencariannya. Juga pada lastIndexOf jika sudah sampai index terakhir tapi blum menemukan, maka si komputer akan balik lagi ke index ke 0 sampai index dimulainya pencarian untuk mencari.
Bingung? Jangan :D
Nih saya beri contoh. Misal pada kalimat “Halo-Halo Bandung” kita akan mencari ‘lo’ setelah index ke 4.
Index ke mpat kan si strip(-) berarti kita mncari kata ‘lo’ setelah si strip(-)
Jadi indexOf(‘lo’,4) nya adalah 7. Lho kok bisa 7 bukan 4? Yo iso.. lha ngene tho.. sehabis strip kita cari ‘lo’. Ketemu kan? Nah pas ketemu itu jangan dihitung index ke 4,karna tetap saja index itu dimulai dari awal kalimat. Kalo masih bingung lihat tabel ini

H
A
l
o
-
H
a
l
o

B
a
n
d
u
n
g
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
                            End    Start

Atau kita bisa melihatnya seperti ini
-
H
A
l
o

B
a
n
d
u
n
g
H
a
l
o
4
5
6
7
8
9
10
11
12
13
14
15
16
0
1
2
3
Start                                                                                                                                          End

Kata’lo’ berada di index ke 7 jika mulainya dari index ke 4
Nah lastIndexof(‘lo’,4) nya adalah 2. Lho kok bisa 2 ??? iya kan sudah saya bilang. Sikomputer akan balik ke index ke 0 untuk mencari si lastindexnya. Nah ketemu deh di index ke 2. Bisa diibaratkan seperti ini: 

H
A
L
o
-
H
a
l
o

B
a
n
d
u
n
g
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
                              End  Start

Atau kita bisa melihatnya sepeti ini
-
H
A
l
o

B
a
n
d
u
n
g
H
a
l
o
4
5
6
7
8
9
10
11
12
13
14
15
16
0
1
2
3
Start                                                                                                                                          End

Kalo dibikin kodingannya kurang lebih seperti ini:
<html>
<head>
     <title>Latihan Indesx</title>
</head>
<body>
String <input type="text" id="teks"><br/>
Index Of (after 4)<input type="text" id="ioa"><br/>
Last Index Of (after 4)<input type="text" id="lioa"><br/>

<script type="text/javascript">
function cariIndex(){
     x=document.getElementById('teks').value;
     cr=document.getElementById('cari').value;
     document.getElementById('ioa').value=x.indexOf(cr,4);
     document.getElementById('lioa').value=x.lastIndexOf(cr,4);
}
</script>

</body>
</html>

Sekian dari saya, maaf apabila dalam menjelaskan masih belepotan. Terimakasih sudah menyimak dan semoga bermanfaat.
Selamat bertemu kembali ditutorial selanjutnya :D
Tetep keepCoding();

Komentar

Posting Komentar

Postingan populer dari blog ini

Tipe data dalam bahasa C (C Programming)

Hai.. ketemu lagi dengan saya di blog yang sederhana ini.. dalam kesempatan kali ini saya akan memposting tentang tipe data dalam bahasa C. yuk kita simak :) Tipe data adalah suatu pengenal (identifier) yang merupakan bagian program yang paling penting karena tipe data mempengaruhi setiap instruksi yang akan dilaksanakan oleh k omputer. Misalnya saja 5 dibagi 2 bisa saja menghasilkan hasil yang berbeda tergantung tipe datanya. Jika 5 dan 2 bertipe integer maka akan menghasilkan nilai 2, namun jika keduanya bertipe float maka akan menghasilkan nilai 2.5000000. Pemilihan tipe data yang tepat akan membuat proses operasi data menjadi lebih efisien dan efektif. Bahasa C menyediakan 5 macam tipe data dasar, yaitu 1. Tipe data integer yaitu bilangan bulat dideklarasikan dengan int . 2. Floating point yaitu bilangan pecahan dideklarasikan dengan float . 3. Double precision yaitu bilangan pecahan ketepatan ganda dideklarasikan dengan double . 4. karakter dideklaras...
20 komentar
Baca selengkapnya

Kimia (Polimer)

A.    DEFINISI POLIMER DAN PEMBENTUKAN POLIMER 1.    Pengertian Polimer Polimer adalah suatu makromolekul yang terbentuk dari molekul-molekul sederhana yang kita sebut sabagai monomer. Monomer adalah bagian terkecil dari suatu polimer. 2.    Pembentukan Polimer Proses pembentukan polimer dari monomer-monomernya disebut polimerisasi. Reaksi polimerisasi adalah reaksi penggabungan beberapa monomer. a.    Reaksi Polimer Adisi Polimerisasi terjadi pada monomer yang memiliki ikatan rangkap. Adalah perkaitan langsung antarmonomer berdasarkan reaksi adisi. 1)    Pembentukan Polietilena (Polietena) Polietilena dibentuk oleh monomer-monomer etena. Etena diperoleh dari hasil perengkahan (cracking) minyak bumi atau gas bumi. Pembentukan polimer ini digambarkan sebagai berikut CH 2 =CH 2   +   CH 2 =CH 2    →    --CH 2 -- CH 2 -- CH 2 -- CH 2 -- →   ( --CH 2 --...
1 komentar
Baca selengkapnya

Apa itu using namespace std?

Assalamu’alaikum.. Hai teman-teman.. dalam posting kali ini saya akan sedikit menjelaskan tentang namespace std. using namespace std , perintah ini digunakan untuk mendeklarasikan/ memberitahukan kepada compiler bahwa kita akan menggunakan semua fungsi/class/file yang terdapat dalam namespace std. namespace sendiri memiliki kesamaan dengan paket pada bahasa Java yang berisi pengelompokan fungsi, class dan yang sejenis. Pada C++ library- library umumnya disimpan dalam namespace std, seperti perintah cin dan cout. Perbedaan penulisan apabila kita menggunakan namespace std atau tidak adalah : Tanpa using namespace std               std::cout << " Tanpa menggunakan namespace std " ;       std::cin >> pil; Menggunakan using namespace std      #include <iostream>      using namespace std;      ...
2 komentar
Baca selengkapnya

MEMBACA DAN MENGIDENTIFIKASIKAN MOS,CMOS DAN FET

1)       Komponen MOS, CMOS dan FET diidentifikasi tipenya, rating operasinya .     MOSFET ( Metal Oxide Semiconductor Field Effect Transistor ) MOSFET disebut juga Transistor Efek Medan Oksida Logam, hal ini karena pada Gate di isolasi dari saluran mayoritas pembawa muatan hal ini mengakibatkan arus Gate sangat kecil dan tidak dipengaruhi oleh Positif atau Negatifnya Gate tersebut. MOSFET sering juga disebut sebagai IGFET (Insulated Gate Field Effect Transistor) , mempunyai elektroda Source, Drain dan Gate . Bekerjanya MOSFET berbeda dengan JFET, pada MOSFET Gate/Gerbang di isolasi dari kanal sehingga dapat dioperasikan menggunakan tegangan positif (+), sedang pada JFET menggunakan tegangan negatif (-). Tegangan positif tersebut memeberi manfaat mempertinggi konduktifitas kanal. Makin positif tegangan gerbang, semakin besar konduktifitas dari Source ke Drain (Sumber ke Cerat). Keuntungan utama menggunakan FET adalah, imped...
Posting Komentar
Baca selengkapnya

Mengenal Tipe data dan Operator di VB .net (VB Programming)

Assalamu'alaikum.. pada tutorial kali ini saya ingin berbagi tentang tipe data danoperator yang digunakan dalam pemrograman Visual Basic. selamat menyimak.. :) Teori 2.1. Variabel Variabel   adalah pengalokasian tempat di memory komputer dengan type data tertentu dan datanya dapat diubah. Aturan pendefinisian variabel -           Harus dimulai dengan huruf -           Tidak boleh menggunakan spasi -           Tidak melebihi 255 karakter -           Untuk vb. Net tidak case sensitive (tidak membedakan huruf kecil dan besar -           Boleh menggunakan underscore Contoh penulisan variabel yang benar : -           Dim Dataku as integer -         ...
3 komentar
Baca selengkapnya