Scribd
Unggah
2 tayangan4 halaman

Pengenalan JavaScript dan Variabel

Dokumen ini adalah jobsheet yang memperkenalkan JavaScript dan variabel, mencakup cara menulis JavaScript di HTML, fungsi console untuk debugging, serta cara deklarasi dan tipe data variabel. Terdapat langkah kerja untuk membuat file HTML sederhana dan tugas latihan untuk menerapkan konsep yang dipelajari. Catatan penting menekankan penggunaan 'let' dan 'const' serta sensitivitas huruf besar-kecil dalam JavaScript.

Diunggah oleh

szayel664
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 PDF, TXT atau baca online di Scribd
2 tayangan4 halaman

Pengenalan JavaScript dan Variabel

Dokumen ini adalah jobsheet yang memperkenalkan JavaScript dan variabel, mencakup cara menulis JavaScript di HTML, fungsi console untuk debugging, serta cara deklarasi dan tipe data variabel. Terdapat langkah kerja untuk membuat file HTML sederhana dan tugas latihan untuk menerapkan konsep yang dipelajari. Catatan penting menekankan penggunaan 'let' dan 'const' serta sensitivitas huruf besar-kecil dalam JavaScript.

Diunggah oleh

szayel664
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 PDF, TXT atau baca online di Scribd

Jobsheet 1 — Pengenalan JavaScript &

Variabel

Tujuan
1. Mengenal JavaScript dan cara menuliskannya di HTML.
2. Memahami fungsi console sebagai media debugging.
3. Mengenal variabel, cara deklarasi, dan tipe data dasar.

Alat & Bahan


• Komputer/laptop dengan browser modern (Chrome, Firefox, Edge).
• Editor kode: Visual Studio Code / Sublime Text / Notepad++.

Teori Singkat
1. Apa itu JavaScript?

• JavaScript (JS) adalah bahasa pemrograman web yang berjalan di browser.


• HTML = struktur → CSS = tampilan → JavaScript = interaksi.
• Tanpa JS, website hanya bisa menampilkan informasi statis.

2. Menjalankan JavaScript

Ada dua cara:

Internal Script (langsung di HTML):

<script>
[Link]("Hello, JavaScript!");
</script>

External Script (terpisah di file .js):

<script src="[Link]"></script>

3. Console
• [Link]() = alat untuk menampilkan informasi di Console Browser (Developer
Tools → Tab Console).
• Berguna untuk debugging (cek error, cek nilai variabel).

4. Variabel

• Variabel = wadah untuk menyimpan data.


• Ada 3 cara deklarasi:
o var → cara lama (tidak disarankan).
o let → bisa diubah nilainya.
o const → tidak bisa diubah (konstan).

5. Tipe Data

• String = teks → "Halo Dunia".


• Number = angka → 12, 3.14.
• Boolean = benar/salah → true / false.
• Null = kosong (sengaja dikosongkan).
• Undefined = belum didefinisikan.

Contoh:

let nama = "Yere"; // String


let umur = 12; // Number
const aktif = true; // Boolean
let kosong = null; // Null
let belum; // Undefined

Langkah Kerja
Buka editor kode.

Buat file baru bernama [Link].

Isi dengan kode dasar HTML berikut:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Jobsheet 1</title>
</head>
<body>
<h1>Pengenalan JavaScript</h1>

<script>
// Menampilkan teks di console
[Link]("Hello, JavaScript!");

// Membuat variabel
let nama = "Yere";
let umur = 12;

// Menampilkan variabel
[Link]("Nama:", nama);
[Link]("Umur:", umur);
</script>
</body>
</html>

Simpan dan buka [Link] di browser.

Tekan F12 → Console untuk melihat hasil.

Tugas & Latihan


Buat variabel namaSekolah dan jumlahSiswa.
Cetak dalam 1 baris menggunakan [Link]().
Contoh:

const namaSekolah = "SMK Negeri 1 Sukoharjo";


const jumlahSiswa = 1200;
[Link](namaSekolah, "-", jumlahSiswa, "siswa");

Tambahkan variabel alamat dan cetak dalam format:


"SMK Negeri 1 Sukoharjo berlokasi di [alamat] dengan jumlah
[jumlahSiswa] siswa."
(gunakan string concatenation atau template literal).

const alamat = "Jl. Veteran, Sukoharjo";


[Link](`${namaSekolah} berlokasi di ${alamat} dengan jumlah
${jumlahSiswa} siswa.`);

Coba ganti let dengan const. Apa yang terjadi kalau nilainya diubah?

Catatan Penting
• Biasakan gunakan let dan const, hindari var.
• Gunakan [Link]() sesering mungkin untuk cek hasil.
• JavaScript case-sensitive → nama ≠ Nama.
Proyek Mini
Buat program biodata sederhana yang menampilkan:

• Nama lengkap
• Umur
• Sekolah
• Hobi

Output di console (gunakan template literal):

Halo, nama saya Yerena, umur 12 tahun.


Saya bersekolah di SMK Negeri 1 Sukoharjo.
Hobi saya membaca buku.

Anda mungkin juga menyukai