Belajar JavaScript 9

BELAJAR JAVASCRIPT



Cara Menulis Kode JavaScript

Ada dua cara yang bisa Anda coba untuk membuat kode JavaScript, yaitu:

1. Langsung di File HTML (Internal JavaScript)

Sesuai namanya, Anda bisa langsung memasukkan kode JavaScript pada file berformat HTML. Caranya dengan menuliskan kode di antara tag <script> </script>, lalu tempatkan skrip tersebut pada tag <body>.

Contohnya seperti berikut:

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html>
<body>
    <script>
        alert("Ini adalah kode JavaScript!")
    </script>
</body>
</html>


2. Terpisah dari File HTML (External JavaScript)

Cara kedua adalah dengan membuat file JavaScript terpisah, lalu menghubungkannya dengan file HTML. External JavaScript lebih direkomendasikan, karena:

  • Reusability – Memungkinkan JavaScript digunakan di banyak file HTML.
  • Readability – Membuat kode program jadi lebih mudah dibaca.
  • Conciseness – Meringkas jumlah baris kode yang dihasilkan.

Berikut adalah contoh penggunaan External JavaScript:

File HTML:

1
2
3
4
5
6
<!DOCTYPE html>
<html>
<body>
    <script src="script.js"></script>
</body>
</html>

File JavaScript:

1
alert("Ini adalah kode JavaScript!");


Cara Membuat Program Sederhana dengan JavaScript

Seperti yang sudah dijelaskan, Anda membutuhkan web browser dan code editor untuk mempraktikkan tutorial JavaScript. Nah, di sini kami menggunakan browser Google Chrome dan editor Visual Studio Code.

Selain itu, Anda perlu menyiapkan sebuah folder pada komputer sebagai tempat menyimpan file HTML dan JavaScript. Di sini kami membuat folder dengan nama helloworld.

Setelah menyiapkan beberapa hal di atas, mari ikuti tutorial JavaScript membuat program sederhana yang menampilkan pop up ketika menekan sebuah tombol.

Langkah-langkahnya sebagai berikut:

Pertama, buka Visual Studio Code dan buat file baru dengan cara klik File > New File. Setelah itu, tulis kode berikut untuk membuat sebuah halaman HTML:

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Ini adalah Program JavaScript Pertama Saya</h1>
</body>
</html>

Simpan file dengan nama index.html.

Selanjutnya buat lagi sebuah file baru, lalu ketikkan kode di bawah ini. Gunanya untuk membuat fungsi untuk menampilkan pop up JavaScript.

1
2
3
function button() {
    alert("Ini adalah Tombol JavaScript");
};

Kali ini simpan file dengan nama script.js.

Kembali lagi ke file index.html, tambahkan kode berikut setelah tag </h1>. Fungsinya untuk menghubungkan file ini dengan file script.js yang tadi dibuat.

1
2
<button onclick="button()">Klik Tombol Ini!</button>
    <script src="script.js"></script>

Simpan perubahan pada file tersebut.

Selanjutnya buka folder helloworld, klik kanan file index.html > Open with > Google Chrome. Anda akan melihat tampilan seperti ini:



Selamat! Anda berhasil menyelesaikan tutorial JavaScript untuk membuat program sederhana. Mudah sekali bukan? Selama Anda coding JavaScript dengan benar, website tidak akan mengalami error.

Komentar

Posting Komentar

Postingan populer dari blog ini

contoh operator logika part 2

Gambar
  Rumus untuk menentukan hasil dari operator logika adalah sebagai berikut: Operator  &&  hanya akan menghasilkan true jika kedua operand bernilai true, selain itu hasilnya false. Operator  ||  hanya akan menghasilkan false jika kedua operand bernilai false, selain itu hasilnya true . Operator  !  Akan membalikkan logika, !false menjadi true, !true menjadi false. Kita juga bisa menggabungkan lebih dari satu operasi seperti contoh berikut: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 class BelajarJava {    public static void main(String args[]){                 boolean hasil;              hasil = ( false && true ) || ( true || false );      System.out.println( "Hasil: " + hasil );               hasil = ! false && ( false || true ...
Baca selengkapnya

Variabel PHP

Gambar
VARIABEL PHP Variabel dalam PHP Variable adalah suatu pengenal di dalam program yang merepresentasikan nilai atau data tertentu. Nilai variabel dapat diubah sesuai dengan kebutuhan program. Dalam Bahasa PHP, variable didefinisikan dengan cara membubuhkan tanda  $  (dollar) di depannya. Contoh :         $nama = 'SmartDevTala' Pada contoh di atas, kita dapat membuat variable  $nama  dan mengisi nilai ke dalamnya. Dalam penggunaan variable, PHP sedikit berbeda dengan Bahasa program lain, karena pada bahasa program yang lain pada umumnya perlu mendeklarasikan tipe data pada variabel sebelum menampung nilai di dalamnya, sebagai contoh :        $x = "SmartDevTala";       $x = 8;       $x = 10.3;       $x = true;       $x = ["SmartDevTala",8,10.3,true]; Pada contoh di atas, variable  $x  dapat menampung nilai dari beberapa tipe data, yaitu : string, integer, floati...
Baca selengkapnya

Tipe Data Phyton

Gambar
  Tipe Data Python Tipe data adalah suatu media atau memori pada komputer yang digunakan untuk menampung informasi. Python sendiri mempunyai tipe data yang cukup unik bila kita bandingkan dengan bahasa pemrograman yang lain. Berikut adalah tipe data dari bahasa pemrograman Python : Tipe Data Contoh Penjelasan Boolean True  atau  False Menyatakan benar  True  yang bernilai  1 , atau salah  False  yang bernilai  0 String "Ayo belajar Python" Menyatakan karakter/kalimat bisa berupa huruf angka, dll (diapit tanda  "  atau  ' ) Integer 25  atau  1209 Menyatakan bilangan bulat Float 3.14  atau  0.99 Menyatakan bilangan yang mempunyai koma Hexadecimal 9a  atau  1d3 Menyatakan bilangan dalam format heksa (bilangan berbasis 16) Complex 1 + 5j Menyatakan pasangan angka real dan imajiner List ['xyz', 786, 2.23] Data untaian yang menyimpan berbagai tipe data dan isinya bisa diubah-ubah Tuple ('xyz', 768, 2.23)...
Baca selengkapnya