Scribd
Unggah
37 tayangan33 halaman

Materi Tutorial Web Bebas 1

Diunggah oleh

Siti Nur Fadila
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
37 tayangan33 halaman

Materi Tutorial Web Bebas 1

Diunggah oleh

Siti Nur Fadila
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 33

DIENG CYBER SOFTWARE HOUSE

Belajar Pemrograman Javascript

 Langkah Awal Belajar Javascript


Javascript adalah bahasa pemrograman yang wajib kamu pelajari jika ingin
mendalami dunia web development.
Saat ini javascript tidak hanya digunakan di sisi client (browser) saja. Javascript
juga digunakan pada server, console, program desktop, mobile, IoT, game, dan
lain-lain.
Hal ini membuat javascript semakin populer dan menjadi bahasa yang paling
banyak digunakan di Github.
Pada artikel ini, kita akan belajar Javascript dari dasar. Mulai dari pengenalan
Javascript, hingga membuat program pertama dengan Javascript.
Siap?
Mari kita mulai…

 Apa itu javascript?


Javascript adalah bahasa pemrograman yang awalnya dirancang untuk berjalan
di atas browser.
Namun, seiring perkembangan zaman, javascript tidak hanya berjalan di atas
browser saja. Javascript juga dapat digunakan pada sisi Server, Game, IoT,
Desktop, dsb.
Javascript awalnya bernama Mocha, lalu berubah menjadi LiveScript saat
browser Netscape Navigator 2.0 rilis versi beta (September 1995). Namun,
setelah itu dinamai ulang menjadi Javascript.
Terinspirasi dari kesuksesan Javascript, Microsoft mengadopsi teknologi serupa.
Microsoft membuat ‘Javascript’ versi mereka sendiri bernama JScript. Lalu di
tanam pada Internet Explorer 3.0.
Hal ini mengakibatkan ‘ perang browser’, karena JScript milik Microsoft berbeda
dengan Javascript racikan Netscape.
Akhirnya pada tahun 1996, Netscape mengirimkan standarisasi ECMA-262
ke Ecma International. Sehingga lahirlah standarisasi kode Javascript bernama
ECMAScript atau ES. Saat ini ECMAScript sudah mencapai versi 8 (ES8).

Versi ECMAScript Tahun Rilis

ES 1 Juni 1997

ES 2 Juni 1998

ES 3 Desember 1999

ES 4 Terbengkalai

ES 5 Desember 2009

ES 5.1 Juni 2011

ES 6 Juni 2015

ES 7 Juni 2016

ES 8 Juni 2017
 Peralatan untuk Belajar Javascript
Apa saja peralatan yang harus disiapkan untuk belajar Javascript?
1. Web Browser (Google Chrome, Firefox, Opera, dll)
2. Teks Editor (rekomendasi: VS Code)

 Mengenal Console JavaScript


Ada yang mengatakan, belajar javascript itu susah, karena saat melihat hasilnya
di web browser, pesan error-nya tidak tampil. Pendapat ini tidak benar. Karena
kita bisa melihatnya melalui console.
Console Javascript dapat kita buka melalui Inspect Element->Console.

Di dalam console, kita bisa menulis fungsi atau kode-kode javascript dan
hasilnya akan langsung ditampilkan.
Misalnya, mari kita coba kode berikut:
console.log("Hi apa kabar!");
alert("Saya sedang belajar javascript");
Maka hasilnya:
Jika kamu menggunakan Nodejs, maka cara mengakses console adalah dengan
mengetik perintah node pada Terminal.

Setelah mencoba console Javascript, maka dapat kita simpulkan:


1. Console bisa digunakan untuk menguji coba fungsi atau kode Javascript;
2. Console dapat kita gunakan untuk melihat pesan error
saat debugging program.
3. …apa lagi ya?

 Membuat Program Javascript Pertama


Sudah paham cara membuka dan menggunakan console javascript?
Bagus…
Kalau begitu, mari kita buat program pertama dengan Javascript.
Silakan buka teks editor, kemudian buat file baru
bernama hello_world.html dan isi dengan kode berikut:
<!DOCTYPE html>
<html>
<head>
<title>Hello World Javascript</title>
</head>
<body>
<script>
console.log("Saya belajar Javascript");
document.write("Hello World!");
</script>
</body>
</html>
Jika kamu menggunakan teks editor VS Code, maka akan terlihat seperti ini
Silahkan disimpan dengan nama hello_world.html, kemudian buka file tersebut
dengan web browser.
Maka hasilnya:

Tunggu sebentar Tadi kita menulis perintah:


console.log("Saya belajar Javascript");
Mengapa tidak ditampilkan?
Karena perintah atau fungsi console.log() akan menampilkan pesan ke
dalam console javascript. Sedangkan perintah document.write() berfungsi
untuk menulis ke dokumen HTML, maka dia akan ditampilkan ke sana.
Sekarang coba saja buka console javascript.
Maka kita akan melihat pesan "Saya belajar Javascript":
Kita sudah mengenal fungsi document.write() dan console.log(), nanti kita akan
bahas lebih dalam lagi tentang fungsi ini pada:
 Cara Menampilkan Output pada Javascript
 Mengenal DOM API untuk Manipulasi HTML pada Javascript
Sekarang, yang perlu kita ketahui berikutnya adalah:

 Bagaimana Cara Menulis Kode Javascript di HTML?


Pada contoh di atas, kita sudah menulis kode javascript di dalam HTML. Cara
tersebut merupakan cara penulisan embeded (ditempel). Masih ada beberapa
cara lagi yang perlu kita ketahui:
1. Embed (Kode Javascript ditempel langsung pada HTML. Contoh: yang
tadi)
2. Inline (kode Javascript ditulis pada atribut HTML)
3. Eksternal (Kode Javascript ditulis terpisah dengan file HTML)
Mari kita lihat contohnya:

1. Penulisan Kode javascript dengan Embed


Pada cara ini, kita menggunakan tag <script> untuk
menempelkan (embed) kode Javascript pada HTML. Tag ini dapat ditulis di
dalam tag <head> dan <body>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript dari Nol</title>
<script>
// ini adalah penulisan kode javascript
// di dalam tag <head>
console.log("Hello JS dari Head");
</script>
</head>
<body>
<p>Tutorial Javascript untuk Pemula</p>
<script>
// ini adalah penulisan kode javascript
// di dalam tag <body>
console.log("Hello JS dari body");
</script>
</body>
</html>
Mana yang lebih bagus, ditulis di dalam <head> atau <body>?
Banyak yang merekomendasikan menuliskannya di dalam <body>, karena akan
membuat web di-load lebih cepat.
2. Penulisan Kode javascript Inline
Pada cara ini, kita akan menulis kode javascript di dalam atribut HTML. Cara ini
biasanya digunakan untuk memanggil suatu fungsi pada event tertentu. Misal
saat link diklik.
Contoh:
<a href="#" onclick="alert('Yey!')">Klik aku!</a>
Hasilnya:

Perhatikan…
Pada atribut onclick dan href kita menuliskan fungsi javascript di sana.
Atribut onclick merupakan atribut HTML untuk menyatakan fungsi yang akan
dieksekusi saat elemen itu diklik. Pada contoh di atas, kita menjalankan
fungsi alert(). Fungsi ini merupakan fungsi untuk menampilkan dialog.
Lalu pada atribut href, kita juga memanggil fungsi alert() dengan
didahului javascript:. Atribut href sebenarnya digunakan untuk mengisi alamat
link atau URL. Karena kita ingin memanggil kode javascript di sana, maka
alamat link tersebut kita ubah menjadi javascript: lalu diikuti dengan fungsi
yang akan dipanggil.
3. Penulisan Kode javascript Eksternal
Pada cara ini, kita akan menulis kode javascript secara terpisah dengan file
HTML. Cara ini biasanya digunakan pada proyek-proyek besar, karena diyakini—
dengan cara ini—dapat lebih mudah mengelola kode project.
Mari kita lihat contohnya. Kita buat dua file, yaitu: file HTML dan Javascript.

📂 belajar-js/
├── 📜 kode-program.js
└── 📜 index.html
Isi dari file kode-program.js:
alert("Hello, ini adalah program JS eksternal!");
Isi dari file index.html:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Javascript dari Nol</title>
</head>
<body>
<p>Tutorial Javascript untuk Pemula</p>

<!-- Menyisipkan kode js eksternal -->


<script src="kode-program.js"></script>
</body>
</html>
Hasilnya:
Pada contoh di atas, kita menulis kode javascript terpisah dengan kode HTML.
Lalu, pada kode HTML. Kita menyisipkannya dengan memberikan
atribut src pada tag <script>.
<!-- Menyisipkan kode js eksternal -->
<script src="kode-program.js"></script>
Maka, apapun yang ada di dalam file kode-program.js akan dapat dibaca dari
file index.html. Bagaimana kalau file JavaScript-nya berada di folder yang
berbeda? Kita bisa menuliskan alamat lengkap folder-nya.
Contoh:
Misal kita punya struktur folder seperti ini:

📂 belajar-js/
├── 📂 js/
| └── 📜 kode-program.js
└── 📜 index.html
Maka untuk menyisipkan file kode-program.js ke dalam HTML, kita bisa
menuliskannya seperti ini:
<script src="js/kode-program.js"></script>
Karena file kode-program.js berada di dalam direktori js. Kita juga bisa
menyisipkan javascript yang ada di internet dengan memberikan alamat URL
lengkapnya.
Contoh:
<script src="https://www.petanikode.com/js/kode.js"></script>

 4 Cara Menulis Kode Javascript pada HTML


Baru belajar Javascript? dan masih bingung dengan cara menulis Javascript di
HTML? Tenang!
Ada 4 cara menulis kode Javascript pada HTML. Dari keempat cara ini, ada yang
biasa dan sering digunakan, ada juga yang ‘aneh’, jarang digunakan sih tapi
masih work! Apa saja keempat cara itu?
Mari kita bahas:

1. Menulis Javascript pada Tag <script>


Penulisan kode Javascript menggunakan tag <script> adalah cara umum yang
digunakan.
Tag <script> dapat kita buat di dalam tag <head> maupun <body>.
Contoh:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
<script>
console.log("Hi, ini kode Javascript");
</script>
</head>
<body>

<script>
document.write("Javascript itu keren!");
</script>
</body>
</html>
Hasilnya:

Mana sih yang lebih baik? ditulis di dalam <head> atau di <body>? Kedua cara
ini memang sah-sah saja dilakukan, namun ada juga pendapat yang
mengatakan:
Placing scripts at the bottom of the <body> element improves the display
speed, because script interpretation slows down the display. 1
Penulisan di akhir <body> akan meningkatkan kecepatan display atau
tampilannya konten di web. Karena, jika kita tulis di dalam <head>, script
tersebut akan dieksekusi terlebih dahulu sebelum konten ditampilkan. Jadi,
disarankan menulis kode Javascript di dalam <body>, tepatnya sebelum
tutup </body>.
2. Menulis Javascript pada File Eksternal
Cara kedua, kita bisa menulis Javascript di File yang terpisah dengan HTML.
Biasanya digunakan jika kita tidak ingin kode Javascript bercampur dengan kode
HTML. Bagaimana caranya? Caranya, buatlah sebuah file yang berekstensi .js.
File ini kita isi dengan kode Javascript.
Sebagai contoh, saya akan membuat file eksternal dengan nama kode-
script.js dan file-external.html sebagai kode HTML-nya.

Berikut ini isi file kode-script.js :


document.write("Kode Javascript dari File Eksternal");
Lalu isi file-external.html adalah sebagai berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Penulisan Javascript</title>
</head>
<body>
<script src="kode-script.js"></script>
</body>
</html>
Hasilnya:

Coba kamu perhatikan!


Pada kode HTML file-external.html, kita tetap menggunakan tag <script>. Akan
tetapi, tag ini tidak kita isi dengan kode Javascript. Melainkan kita
menggunakan atribut src untuk menggunakan kode Javascript yang ada di
file kode-script.js. Perlu diperhatikan juga:
Tag <script> tetap harus ditutup dengan </script> walaupun tidak punya isi.
Contoh:
<script src="kode-script.js"></script>
Lalu gimana jika kode Javascript-nya berada di folder yang berbeda dengan
dokumen HTML-nya? Atau JavaScript-nya berada di internet?
Itu gimana?
Untuk kode Javascript yang berada di folder yang berbeda, kita menulisnya
mengikuti alamat path folder-nya. Misalnya struktur folder-nya seperti ini:
Karena file kode-script.js berada di dalam folder js, maka kita harus menulisnya:
<script src="js/kode-script.js"></script>
Gimana paham kan? Nah, untuk kode Javascript yang diambil dari internet, kita
cukup tuliskan alamat URL dari Javascript tersebut.
Contoh:
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

3. Menulis Javascript pada Atribut


Penulisan Javascript pada atribut bisanya dilakukan pada atribut event.
Contoh:
<button onclick="alert('Ok Terima kasih!')">Klik donk!</button>
Pada contoh ini, kita membuat elemen <button> dan memiliki
atribut onclick yang berisi kode Javascript. Nantinya, kode javascript yang ada di
dalam atribut onclick akan dieksekusi saat event klik terjadi pada
elemen <button>.
Apakah Javascript hanya bisa ditulis pada atribut onclick saja?
Atribut onclick adalah salah satu atribut event yang ada di HTML, kode
Javascript bisa ditulis di semua atribut event.
Ingat atribut event! Bukan atribut biasa.
Jika kamu ingin lihat semua atribut event, silakan cek di Event Reference.

Penulisan atribut event di HTML diawali dengan on, misalnya untuk event click,
maka pada atribut HTML ditulis onclick.
Contoh:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Penulisan Javascript di Atribut</title>
</head>

<body>
<textarea onkeyup="document.getElementById('counter').innerText =
this.value.length" cols="30" rows="10"></textarea>
<p>Panjang: <span id="counter">0</span> karakter</p>
</body>

</html>
Pada contoh ini, kita menggunakan event keyup, maka ditulis onkeyup. Event ini
terjadi saat kita melepas tombol di keyboard. Jadi nantinya saat kita mengetik
pada elemen <textarea>, kode Javascript yang ada di onkeyup akan dieksekusi.
Kode Javascript tersebut berfungsi untuk menampilkan jumlah karakter yang
diketik.
Hasilnya:

4. Penulisan Javascript pada URL


Nah ini yang menurut saya cara yang cukup aneh. Cara ini memang jarang
digunakan dan hampir tidak ada yang menggunakannya di dalam aplikasi. Tapi
tetap bisa.
Caranya, pada URL kita gunakan javascript: lalu diikuti dengan kode Javascript
yang ingin dieksekusi.
Contoh:
javascript:alert("Nah! ini Javascript")
Ini di ketik pada address bar browser.
Maka hasilnya:

“Catatan: Cara ini tidak bekerja di web browser versi terbaru, karena ini
merupakan sebuah celah yang bisa dipakai untuk serangan XSS.”

Lalu, bagaimana kita menggunakan cara ini di HTML? Cara ini bisa kita gunakan
pada tag <a>, lalu mengisinya di atribut href.
Contoh:
<a href="javascript:alert('Wih! hebat bukan?')">Coba Klik</a>
Hasilnya:
Jadi saat link <a> diklik, ia akan membuka URL javascript: dan menjalankan
kode Javascript yang ada di sana. Mirip seperti event onclick ya.
Nah, itulah 4 cara menulis Javascript di HTML. Cara manakah yang akan kamu
gunakan?
Menurut saya, cara pertama, kedua, dan ketiga cukup sering dan umum
dipakai. Sedangkan cara keempat, tidak saya rekomendasikan untuk digunakan.

 4 Cara Menampilkan Outpout pada Javascript

Output adalah sebuah tampilan program yang biasanya digunakan untuk


memperlihatkan hasil akhir. Output biasanya ditampilkan dalam bentuk teks
dengan fungsi print(). Ada 4 cara menampilkan output pada Javascript:
1. Menggunakan Fungsi console.log();
2. Menggunakan Fungsi alert();
3. Menggunakan Fungsi document.write();
4. Menggunakan innerHTML.
Apa perbedaan dari keempat cara tersebut? Mari kita bahas
1. Menggunakan Fungsi console.log()
Fungsi console.log() adalah fungsi untuk menampilkan teks ke console
Javascript.
Contoh penggunaan:
console.log("Hello World!");
Hasilnya:

Fungsi console.log() biasanya digunakan untuk debugging. Karena setiap


pesaan error di Javascript selalu ditampilkan di dalam Console.
Selain console.log(), terdapat juga beberapa fungsi
untuk debugging seperti console.debug(), console.info(), console.error(), conso
le.dir(), dsb.
Fungsi-fungsi console ini juga berlaku pada console Nodejs.

2. Menggunakan Fungsi alert()


Fungsi alert() adalah fungsi untuk menampilkan jendela dialog. Fungsi
sebenarnya berada pada objek window.
Secara lengkap bisa ditulis seperti ini:
window.alert("Hello World!");
Bisa juga ditulis alert() saja seperti ini:
alert("Hello World!");
Fungsi alert(), hanya bisa digunakan di dalam browser saja. Sedangkan pada
Nodejs fungsi ini tidak ada.
Contoh penggunaan fungsi alert():
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Javascript</title>
<script>
alert("Selamat datang di tutorial belajar Javascript");

function sayHello(){
alert("Hello!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Klik Aku!</button>
</body>
</html>
Hasilnya:

3. Menggunakan Fungsi document.write()


Objek document adalah objek yang mewakili dokumen HTML di dalam
Javascript. Dalam objek document, terdapat fungsi write() untuk menulis
sesuatu ke dokumen HTML.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Javascript</title>
<script>
document.write("<h1>Hello World!</h1>");
document.write("<hr>");
document.write("<p>Saya sedang belajar Javascript</p>");
document.write("di <b>petanikode.com</b>")
</script>
</head>
<body>

</body>
</html>
Hasilnya:

Selain fungsi write(), objek document juga menyediakan berbagai macam fungsi
untuk manipulasi dokumen HTML.

4. Menggunakan innerHTML
innerHTML adalah sebuah atribut di dalam (objek) elemen HTML yang berisi
string HTML. Dengan innerHTML, kita dapat menampilkan output ke elemen
yang lebih spesifik.
Contoh:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar Javascript</title>
</head>
<body>

<h1>Tutorial Javascript untuk Pemula</h1>


<div id="hasil-output"></div>

<script>
// membuat objek elemen
var hasil = document.getElementById("hasil-output");

// menampilkan output ke elemen hasil


hasil.innerHTML = "<p>Aku suka Javascript</p>";
</script>

</body>
</html>
Hasilnya:
Sudah paham ‘kan perbedaan dari keempat fungsi tersebut. Kalau kita ringkas
akan seperti ini:
1. Fungsi console.log() untuk menampilkan output ke console Javascript;
2. Fungsi alert() untuk menampilkan output ke jendela dialog;
3. Fungsi document.write() untuk menulis output ke dokumen HTML;
4. Atribut innerHTML untuk menampilkan output ke elemen HTML yang
lebih spesifik.

Berikut adalah contoh kode untuk membuat website sederhana menggunakan


HTML, CSS, dan JavaScript. Contoh ini adalah aplikasi To-Do List yang
memungkinkan pengguna untuk menambahkan, menandai sebagai selesai, dan
menghapus tugas.

1. index.html
Berikut adalah kode HTML untuk halaman aplikasi To-Do List.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List App</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>To-Do List</h1>
<input type="text" id="taskInput" placeholder="Add a new task..." />
<button onclick="addTask()">Add Task</button>
<ul id="taskList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>

2. style.css
Berikut adalah kode CSS untuk memberikan gaya pada halaman.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Arial, sans-serif;
}

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f3f3f3;
}

.container {
width: 300px;
text-align: center;
}

h1 {
color: #333;
}

input[type="text"] {
width: 80%;
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
}

button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #28a745;
color: #fff;
cursor: pointer;
}

button:hover {
background-color: #218838;
}

ul {
list-style-type: none;
padding: 0;
}

li {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin-top: 5px;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 5px;
}

li.completed {
text-decoration: line-through;
color: gray;
}

.delete-button {
color: #e74c3c;
cursor: pointer;
font-weight: bold;
}

3. script.js
Berikut adalah kode JavaScript untuk menambahkan interaktivitas pada
aplikasi.
const taskInput = document.getElementById("taskInput");
const taskList = document.getElementById("taskList");

function addTask() {
const taskText = taskInput.value.trim();
if (taskText === "") return; // Jangan tambahkan tugas kosong

const taskItem = document.createElement("li");


taskItem.textContent = taskText;

// Tombol untuk menghapus tugas


const deleteButton = document.createElement("span");
deleteButton.textContent = "X";
deleteButton.classList.add("delete-button");
deleteButton.onclick = () => {
taskList.removeChild(taskItem);
};

taskItem.appendChild(deleteButton);

// Tandai sebagai selesai/tidak selesai


taskItem.onclick = () => {
taskItem.classList.toggle("completed");
};

taskList.appendChild(taskItem);
taskInput.value = ""; // Reset input setelah menambah tugas
}
Setelah Anda membuat ketiga file tersebut, buka file index.html di browser.
Anda akan melihat tampilan aplikasi To-Do List seperti ini:
1. Input Field: Tempat untuk memasukkan tugas baru.
2. Add Task Button: Tombol untuk menambahkan tugas ke daftar.
3. Task List: Daftar tugas yang ditambahkan, dengan kemampuan untuk
menandai sebagai selesai (dengan coretan) dan menghapus tugas
menggunakan tombol "X".
Ini adalah contoh sederhana, tetapi memberikan gambaran bagaimana HTML,
CSS, dan JavaScript dapat bekerja sama untuk menciptakan website interaktif.
Anda kini telah mengenal dasar-dasar JavaScript dan memahami perannya
dalam membuat halaman web yang interaktif. JavaScript memungkinkan Anda
menambahkan fungsi dinamis dan responsif pada website, dari manipulasi
elemen HTML hingga pengelolaan data di dalam aplikasi.
Semoga pengetahuan ini menjadi fondasi yang kuat dalam perjalanan Anda di
dunia pengembangan web, dan jangan ragu untuk mempraktikkan lebih banyak
proyek untuk memperdalam pemahaman. Selamat berkarya, dan semoga
sukses!

Anda mungkin juga menyukai