Javascript 7-1: String Dan Membuat Trayek Generator
Javascript Bag. 7-1
String dan Membuat Mini Projek Mmembuat Trayek Generator
JavaScript memiliki tipe data string yang digunakan untuk merepresentasikan teks. String dalam JavaScript dapat berisi karakter apa pun, termasuk huruf, angka, simbol, dan spasi. Manipulasi string adalah bagian penting dari pemrograman JavaScript, terutama dalam pengembangan web.
1. Properti String
Beberapa properti yang berguna untuk string di JavaScript adalah:
- length: Properti ini mengembalikan jumlah karakter dalam string.
2. Metode String
Beberapa metode yang sering digunakan untuk memanipulasi string di JavaScript antara lain:
- split(): Metode ini memecah string menjadi array substring berdasarkan pemisah yang ditentukan.
- trim(): Metode ini menghapus spasi di awal dan akhir string.
- join(): Metode ini menggabungkan semua elemen array menjadi string dan menggabungkannya menggunakan pemisah yang ditentukan.
- concat(): Metode ini menggabungkan dua atau lebih string dan mengembalikan string baru.
Dalam proyek mini berikut, kita akan membuat Trayek Generator yang akan membantu mengelompokkan trayek berdasarkan kota yang dimasukkan pengguna.
Trayek Generator Mini Project
Projek mini Trayek Generator ini memungkinkan pengguna untuk memasukkan data trayek dalam textarea dan kemudian menampilkan data tersebut dalam bentuk tabel.
Penjelasan Kode
html<body>
<style>
/* CSS styling untuk tampilan */
</style>
<h2>Trayek Generator</h2>
<label <body> <style>
/* CSS styling untuk tampilan */
</style>
<h2>Trayek Generator</h2>
<label for="trayekInput">Masukkan Data Trayek:</label>
<textarea id="trayekInput" placeholder="Masukkan trayek dipisah dengan koma, dan antara kota dalam 1 trayek dipisah menggunakan spasi"></textarea>
<button onclick="generateTable()">Generate</button>
<div id="tableContainer"></div>
<script>
// Fungsi untuk menghasilkan tabel dari data trayek
function generateTable() {
// Mendapatkan nilai dari textarea dan menghapus spasi ekstra di awal dan akhir
const trayekInput = document.getElementById('trayekInput').value.trim();
// Memeriksa apakah textarea kosong
if (trayekInput === '') {
alert('Masukkan data trayek tidak boleh kosong.');
return;
}
// Memecah data trayek berdasarkan koma untuk mendapatkan setiap trayek
const trayekArray = trayekInput.split(',');
// Mendefinisikan template tabel
let tableHtml = '<table>';
tableHtml += '<tr><th>No</th><th>Kota</th></tr>';
// Melakukan iterasi pada setiap trayek dan memasukkannya ke dalam tabel
trayekArray.forEach((trayek, index) => {
// Memecah setiap trayek menjadi kota-kota yang terpisah oleh spasi
const kotaArray = trayek.trim().split(' ');
// Membuat baris baru dalam tabel untuk setiap kota dalam trayek
tableHtml += '<tr><td>' + (index + 1) + '</td><td>' + kotaArray.join(' - ') + '</td></tr>';
});
// Menutup tag tabel
tableHtml += '</table>';
// Menampilkan tabel dalam div dengan id 'tableContainer'
document.getElementById('tableContainer').innerHTML = tableHtml;
}
</script>
</body>Langkah-Langkah Pengerjaan
- Pengguna diminta untuk memasukkan data trayek dalam textarea.
- Ketika tombol "Generate" ditekan, fungsi
generateTable()akan dipanggil. - Fungsi tersebut akan mengambil nilai dari textarea, memisahkan setiap trayek berdasarkan koma, dan kemudian membuat tabel HTML berdasarkan data yang dimasukkan.
- Setiap trayek akan dipisahkan menjadi kota-kota yang terpisah oleh spasi, dan kemudian ditampilkan dalam bentuk tabel dengan nomor urut trayek.
Komentar
Posting Komentar