2. Dalam file JavaScript eksternal:

html
   
   
   
       
       
   
   
   
   
   

File script.js berisi kode JavaScript:

javascript
   console.log("Hello, World!");
   

3. Di dalam browser console:
Buka browser console (biasanya dengan menekan F12) dan ketik kode JavaScript secara langsung.

Variabel, Tipe informasi, dan Operator

Variabel

Variabel ialah wadah demi menaruh informasi di JavaScript. Deklarasikan variabel dengan keyword let, const, atau var.

javascript
let nama = "John"; // Deklarasikan variabel dengan 'let'
const umur = 30; // Deklarasikan variabel dengan 'const'
var pekerjaan = "Programmer"; // Deklarasikan variabel dengan 'var'

Tipe informasi

JavaScript memiliki beberapa tipe informasi dasar, misalnya:

• Number: Bilangan bulat dan bilangan desimal.
• String: Teks yang diapit tanda kutip ("" atau '').
• Boolean: Nilai benar (true) atau salah (false).
• Array: Kumpulan informasi yang diurutkan.
• Object: Kumpulan informasi yang tidak diurutkan.
• Null: menandakan tidak adanya nilai.
• Undefined: menandakan bahwa variabel belum memiliki nilai.

javascript
let angka = 10; // Tipe informasi Number
let teks = "Hello, World!"; // Tipe informasi String
let benar = true; // Tipe informasi Boolean
let array = [1, 2, 3]; // Tipe informasi Array
let objek = { nama: "John", umur: 30 }; // Tipe informasi Object
let kosong = null; // Tipe informasi Null
let belumDidefinisikan; // Tipe informasi Undefined

Operator

Operator digunakan demi menjalankan operasi pada informasi. Beberapa operator umum:

Aritmetika: +, -, , /, %

• Pembanding: ==, ===, !=, !==, >, <, >=, <=
• Logika: && (AND), || (OR), ! (NOT)

Penugasan: =, +=, -=, =, /=, %=

javascript
let hasilPenkuantitasan = 10 + 5; // Operator penkuantitasan
let hasilPengurangan = 10 - 5; // Operator pengurangan
let hasilPerkalian = 10 * 5; // Operator perkalian
let hasilPemkomponen = 10 / 5; // Operator pemkomponen
let hasilModulo = 10 % 3; // Operator modulo
let samaDengan = 10 == 5; // Operator pembanding '=='
let samaDenganStrict = 10 === 5; // Operator pembanding '==='
let tidakSamaDengan = 10 != 5; // Operator pembanding '!='
let tidakSamaDenganStrict = 10 !== 5; // Operator pembanding '!=='
let lebihBesar = 10 > 5; // Operator pembanding '>'
let lebihKecil = 10 < 5; // Operator pembanding '<'
let lebihBesarSamaDengan = 10 >= 5; // Operator pembanding '>='
let lebihKecilSamaDengan = 10 <= 5; // Operator pembanding '<='
let logikaAND = true && false; // Operator logika '&&'
let logikaOR = true || false; // Operator logika '||'
let logikaNOT = !true; // Operator logika '!'
let penugasan = 10; // Operator penugasan '='
let penugasanPenkuantitasan = 10; // Operator penugasan '+='
penugasanPenkuantitasan += 5;

Kondisi dan Perulangan

Kondisi

Kondisi digunakan demi mengeksekusi kode tertentu jika suatu syarat terpenuhi. keyword yang digunakan: if, else if, else.

javascript
let umur = 25;
if (umur >= 18) {
    console.log("Anda sudah dewasa.");
} else if (umur >= 13) {
    console.log("Anda masih remaja.");
} else {
    console.log("Anda masih anak-anak.");
}

Perulangan

Perulangan digunakan demi mengeksekusi kode beberapa kali. keyword yang digunakan: for, while, do while.

javascript
// Perulangan 'for'
for (let i = 0; i < 5; i++) {
    console.log(i);
}
// Perulangan 'while'
let i = 0;
while (i < 5) {
    console.log(i);
    i++;
}
// Perulangan 'do while'
let i = 0;
do {
    console.log(i);
    i++;
} while (i < 5);

Strukperjalanan wisata informasi JavaScript

Array

Array ialah kumpulan informasi yang diurutkan. Deklarasikan array dengan tanda kurung siku ([]).

javascript
let angka = [1, 2, 3, 4, 5];
console.log(angka[0]); // hasil: 1

Object

Object ialah kumpulan informasi yang tidak diurutkan. Deklarasikan object dengan tanda kurung kurawal ({}).

javascript
let orang = {
    nama: "John",
    umur: 30,
    pekerjaan: "Programmer"
};
console.log(orang.nama); // hasil: John

Map dan Set

Map dan Set ialah strukperjalanan wisata informasi yang lebih rumit, tetapi berguna demi menaruh informasi dengan cara yang khusus.

• Map: Memasangkan kunci dengan nilai.
• Set: Hanya menaruh nilai yang unik.

javascript
let map = new Map();
map.set("nama", "John");
map.set("umur", 30);
console.log(map.get("nama")); // hasil: John
let set = new Set();
set.add("apel");
set.add("pisang");
set.add("apel"); // 'apel' hanya akan disimpan sekali
console.log(set.has("apel")); // hasil: true

Fungsi dan Scope

Fungsi

Fungsi ialah blok kode yang mampu digunakan kembali. Deklarasikan fungsi dengan keyword function.

javascript
function sapa(nama) {
    console.log("aspeko, " + nama + "!");
}
sapa("John"); // hasil: aspeko, John!

Scope

Scope memutuskan di mana variabel mampu diaksesibilitas di dalam kode. JavaScript memiliki dua jenis scope:

• Global scope: Variabel mampu diaksesibilitas dari mana saja.
• Local scope: Variabel hanya mampu diaksesibilitas di dalam fungsi tempat variabel tersebut dideklarasikan.

javascript
let namaGlobal = "John"; // Variabel global
function sapa(namaLokal) {
    console.log("aspeko, " + namaLokal + "!"); // Variabel lokal
    console.log("Nama global: " + namaGlobal);
}
sapa("Jane");
// hasil:
// aspeko, Jane!
// Nama global: John
console.log("Nama global: " + namaGlobal);
// hasil: Nama global: John

Arrow Function

Arrow function ialah cara yang lebih singkat demi mendeklarasikan fungsi.

javascript
let sapa = (nama) => {
    console.log("aspeko, " + nama + "!");
};
sapa("John"); // hasil: aspeko, John!

DOM dan Interaksi dengan user

Memahami DOM

DOM (Document Object Model) ialah representasi strukperjalanan wisata HTML dalam bentuk objek JavaScript. DOM mengizinkan Anda mengaksesibilitas dan memanipulasi elemen HTML.

Mengaksesibilitas Elemen DOM

Anda mampu mengaksesibilitas elemen DOM mengappkan berbagai cara, misalnya:

• document.getElementById(): Menmampukan elemen berdasarkan ID.
• document.getElementsByClassName(): Menmampukan elemen berdasarkan kelas.
• document.getElementsByTagName(): Menmampukan elemen berdasarkan tag HTML.
• document.querySelector(): Menmampukan elemen pertama yang cocok dengan selector CSS.
• document.querySelectorAll(): Menmampukan semua elemen yang cocok dengan selector CSS.

javascript
// Menmampukan elemen dengan ID 'judul'
let judul = document.getElementById("judul");
// Menmampukan elemen dengan kelas 'paragraf'
let paragraf = document.getElementsByClassName("paragraf");
// Menmampukan semua elemen dengan tag 'p'
let semuaParagraf = document.getElementsByTagName("p");
// Menmampukan elemen pertama yang cocok dengan selector 'h1'
let h1 = document.querySelector("h1");
// Menmampukan semua elemen yang cocok dengan selector 'p'
let semuaParagraf = document.querySelectorAll("p");

Manipulasi Elemen DOM

Anda mampu memanipulasi elemen DOM dengan mengubah properti dan gaya elemen, meningkatkankan atau menghapus isi, dan deminya.

javascript
// Mengubah teks elemen dengan ID 'judul'
let judul = document.getElementById("judul");
judul.textContent = "Selamat informasing!";
// Mengubah warna latar belakang elemen dengan kelas 'paragraf'
let paragraf = document.getElementsByClassName("paragraf");
for (let i = 0; i < paragraf.length; i++) {
    paragraf[i].style.backgroundColor = "yellow";
}
// meningkatkankan elemen baru ke dalam body
let body = document.body;
let paragrafBaru = document.createElement("p");
paragrafBaru.textContent = "Ini paragraf baru.";
body.appendChild(paragrafBaru);

Event Handling

Event handling digunakan demi menanggapi aksi user, misalnya klik, mouseover, keyboard input, dan lainnya.

javascript
// meningkatkankan event listener 'click' pada tombol dengan ID 'tombol'
let tombol = document.getElementById("tombol");
tombol.addEventListener("click", function() {
    console.log("Tombol diklik!");
});

JavaScript Modern

ES6 dan kemampuan-kemampuannya

ES6 (ECMAScript 2015) ialah edisi terbaru dari bahasa JavaScript yang meningkatkankan banyak kemampuan baru, misalnya:

• Let dan Const: Deklarasi variabel yang lebih fleksibel.
• Arrow Function: Cara yang lebih ringkas demi mendeklarasikan fungsi.
• Template Literals: Cara yang lebih mudah demi membuat string dengan interpolasi.
• Classes: coding berorientasi objek yang lebih baik.
• Modules: Cara demi mengorganisir kode JavaScript menjadi modul-modul yang terpisah.

javascript
// misalnya ES6
let nama = "John";
const umur = 30;
let sapa = (nama) => {
    console.log(aspeko, ${nama}!);
};
class Orang {
    constructor(nama, umur) {
        this.nama = nama;
        this.umur = umur;
    }
    sapa() {
        console.log(aspeko, ${this.nama}!);
    }
}
let john = new Orang("John", 30);
john.sapa(); // hasil: aspeko, John!

Promise dan Async/Await

Promise dan Async/Await digunakan demi mengatasi operasi asinkron, misalnya mengambil informasi dari server.

javascript
// misalnya Promise
function getinformasi() {
    reperjalanan wisatan new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("informasi berhasil diambil!");
        }, 2000);
    });
}
getinformasi()
    .then((informasi) => {
        console.log(informasi); // hasil: informasi berhasil diambil!
    })
    .catch((error) => {
        console.error(error);
    });
// misalnya Async/Await
async function fetchinformasi() {
    try {
        let informasi = await getinformasi();
        console.log(informasi); // hasil: informasi berhasil diambil!
    } catch (error) {
        console.error(error);
    }
}
fetchinformasi();

Modules dan NPM

Modules digunakan demi mengorganisir kode JavaScript menjadi modul-modul yang terpisah. NPM (Node Package Manager) ialah perangkat yang digunakan demi mengelola dan menginstal modul-modul JavaScript.

javascript
// misalnya Modules
// file: module.js
export function sapa(nama) {
    console.log(aspeko, ${nama}!);
}
// file: main.js
import { sapa } from './module.js';
sapa("John"); // hasil: aspeko, John!

Praktik Terbaik dan metode coding

coding Berorientasi Objek (OOP)

OOP ialah paradigma coding yang mengappkan objek demi memodelkan informasi dan perilaku. JavaScript menopang OOP melalui ide kelas, objek, dan inheritance.

javascript
// misalnya OOP
class Hewan {
    constructor(nama, jenis) {
        this.nama = nama;
        this.jenis = jenis;
    }
    bersuara() {
        console.log(${this.nama} bersuara);
    }
}
class Anjing extends Hewan {
    constructor(nama) {
        super(nama, "Anjing");
    }
    bersuara() {
        console.log(${this.nama} menggonggong);
    }
}
let anjing = new Anjing("Max");
anjing.bersuara(); // hasil: Max menggonggong

Debugging dan Pengecekan Error

Debugging ialah proses menemukan dan meningkatkan kesalahan dalam kode. JavaScript memiliki berbagai perangkat debugging, misalnya:

• Browser console: Menampilkan pesan log, error, dan warning.
• Debugger bawaan browser: mengizinkan Anda menjalankan kode baris per baris dan memeriksa nilai variabel.
• perangkat debugging eksternal: perangkat debugging yang lebih canggih, misalnya Visual Studio Code.

Best Practices demi Kode yang Bersih dan Terstrukperjalanan wisata

Beberapa praktik terbaik demi menulis kode JavaScript yang bersih dan terstrukperjalanan wisata:

• Gunakan penamaan variabel yang deskriptif: menyederhanakan demi memahami fungsi variabel.
• Gunakan indentation: Membuat kode lebih mudah dibaca.
• Pisahkan kode menjadi fungsi: Membuat kode lebih mudah diorganisir dan digunakan kembali.
• Gunakan comments: menerangkan kode dan menolong orang lain memahami kode Anda.
• Hindari peprofitan global variables: Membuat kode lebih mudah diuji dan dipelihara.
• Gunakan linter: Memeriksa kesalahan dan gaya penulisan kode.

Proyek dan app JavaScript

Membuat Kalkulator Sederhana

javascript
let hasil = document.getElementById("hasil");
let tombol = document.querySelectorAll(".tombol");
tombol.forEach(function(btn) {
    btn.addEventListener("click", function() {
        let value = btn.value;
        if (value === "=") {
            hasil.value = eval(hasil.value);
        } else {
            hasil.value += value;
        }
    });
});

Membuat Game sederhana

javascript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
let x = canvas.width / 2;
let y = canvas.height / 2;
let dx = 2;
let dy = -2;
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI * 2);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();
    x += dx;
    y += dy;
    if (x + 10 > canvas.width || x - 10 < 0) {
        dx = -dx;
    }
    if (y + 10 > canvas.height || y - 10 < 0) {
        dy = -dy;
    }
}
setInterval(draw, 10);

Membuat internetsite Interaktif

javascript
const form = document.getElementById("form");
const nama = document.getElementById("nama");
const email = document.getElementById("email");
const pesan = document.getElementById("pesan");
form.addEventListener("submit", function(event) {
    event.preventDefault();
    if (nama.value === "" || email.value === "" || pesan.value === "") {
        alert("Harap isi semua kolom.");
        reperjalanan wisatan;
    }
    console.log("Nama:", nama.value);
    console.log("Email:", email.value);
    console.log("Pesan:", pesan.value);
    form.reset();
});

mengappkan Framework JavaScript (React, Angular, Vue.js)

Framework JavaScript menyuguhkan strukperjalanan wisata dan komponen yang siap pakai demi membangun app internet yang rumit. Beberapa framework JavaScript yang populer:

• React: Framework yang fokus pada UI dan component-based development.
• Angular: Framework yang lengkap demi membangun app internet single-page.
• Vue.js: Framework yang mudah dipelajari dan digunakan demi membangun app internet.

membangun Portofolio dan Melamar Pekerjaan

Membuat Portofolio JavaScript

Membuat portofolio JavaScript ialah cara demi menandakan keahlian Anda kepada calon pemberi kerja. Anda mampu membuat portofolio dengan:

• membangun proyek-proyek JavaScript: Buat app internet, game, atau perangkat yang menandakan keahlian Anda.
• Menulis artikel atau tutorial JavaScript: Bagikan wawasan Anda dengan orang lain.
• Bergabung dengan tour group JavaScript: Berinteraksi dengan pengembang JavaScript lain dan belajar dari mereka.

Mencari Pekerjaan Pengembang internet JavaScript

Banyak situs internet dan sistem yang mampu menolong Anda mencari pekerjaan pengembang internet JavaScript, misalnya:

• LinkedIn: Situs internet profesional demi mencari pekerjaan dan membangun network.
• Indeed: Situs internet pencarian kerja yang menampilkan banyak lowongan pekerjaan.
• Stack Overflow: Situs internet demi tanya dan jawaban tentang coding.
• GitHub: sistem demi menaruh dan berbagi kode sumber informasi.

Tips dan Trik demi Melamar Pekerjaan

• Persiapkan resume dan portofolio Anda dengan baik: Tampilkan keahlian dan kegiatan Anda dengan jelas.
• Latih kemampuan coding Anda: Siapkan diri demi menjalankan coding test.
• Pelajari tentang perusahaan dan posisi yang Anda lamar: Tunjukkan bahwa Anda tertarik dengan pekerjaan tersebut.
• Siapkan tanya demi wawancara: Tunjukkan bahwa Anda ingin tahu lebih banyak tentang pekerjaan tersebut.

Kesimpulan

Ringkasan Poin penting

• JavaScript ialah bahasa coding yang penting demi development internet.
• JavaScript mampu digunakan demi membuat situs internet interaktif, responsif, dan rumit.
• JavaScript memiliki banyak kemampuan dan perangkat yang mampu menolong Anda dalam membangun app internet.
• Memiliki keahlian JavaScript akan membuka peluang karir yang luas.

Langkah Selanjutnya

• Mulailah belajar JavaScript dengan mempelajari dasar-dasar bahasa.
• Buat proyek-proyek kecil demi mengasah kemampuan Anda.
• Pelajari tentang framework JavaScript misalnya React, Angular, dan Vue.js.
• Bangun portofolio JavaScript demi menandakan keahlian Anda kepada calon pemberi kerja.

sumber informasi Daya ekstra demi Belajar JavaScript

• freeCodeCamp: sistem online demi belajar coding tanpa biaya.
• W3Schools: Situs internet yang menyuguhkan tutorial dan sumber informasi tentang HTML, CSS, dan JavaScript.
• MDN internet Docs: Dokumentasi resmi demi JavaScript.
• JavaScript.info: Situs internet yang memberikan keterangan mendalam tentang JavaScript.

Tips demi Belajar JavaScript

• Tetapkan tempat yang Jelas: Tentukan apa yang ingin Anda capai dengan mempelajari JavaScript.
• Buat rencana Belajar yang Konsisten: Luangkan waktu setiap hari demi belajar JavaScript.
• Berlatih Secara Teraperjalanan wisata: Praktikkan kode JavaScript secara teraperjalanan wisata demi mengasah kemampuan Anda.
• Cari Mentor atau tour group: Bergabunglah dengan tour group JavaScript demi menmampukan bantuan dan bimbingan dari orang lain.
• Jangan Takut demi Mencoba dan Ber eksperimen: Cobalah berbagai aspek demi belajar dan meningkatkan kemampuan Anda.
• Jangan Berhenti Belajar: JavaScript ialah bahasa coding yang terus berkembang, jadi teruslah belajar dan perbarui wawasan Anda.