Selasa, 09 Januari 2024

TUGAS JAVASCRIPT

 


NAMA  : BINTANG DWI.A

 KELAS : X-RPL

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>
       <script>
            // ini adalah penulisan kode javascript
            // di dalam tag <body>
            console.log("Hello JS dari body");
        </        <p>Tutorial Javascript untuk Pemula</p> 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>

atau bisa juga seperti ini:

<a href="javascript:alert('Yey!')">Klik aku!</a>















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>


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 tampilnya 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.

O ya, perlu diperhatikan juga:

Tag <script> tetap harus ditutup dengan </script> walaupun tidak punya isi.

Salah: ❌

<script src="kode-script.js">

Benar: ✅

<script src="kode-script.js"></script>

Lalu gimana jika kode Javascript-nya berada di folder yang berbeda dengan dokumen HTML-nya?

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

si 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 javascriptnya berada di folder yang berbeda?

Kita bisa menuliskan alamat lengkap foldernya.

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>


JavaScript Dasar

JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. Bahasa ini adalah bahasa pemrograman berbasis skrip yang dapat digunakan untuk menambahkan fungsionalitas ke halaman web.

Variable

Variable adalah tempat penyimpanan data dalam JavaScript. Variable dapat digunakan untuk menyimpan berbagai jenis data, seperti angka, teks, atau objek.

console.log(nama); // Andi
console.log(umur); // 20

If-else

Konstruk if-else digunakan untuk menguji kondisi dan mengeksekusi kode tertentu jika kondisi tersebut terpenuhi.

Konstruk if-else memiliki dua bagian, yaitu bagian if dan bagian else. Bagian if akan dieksekusi jika kondisinya terpenuhi. Bagian else akan dieksekusi jika kondisinya tidak terpenuhi.

var umur = 20;

if (umur >= 18) {
  console.log("Anda sudah dewasa.");
} else {
  console.log("Anda masih di bawah umur.");
}

Berikut adalah contoh penggunaan konstruk if-else:

Konstruk if-else digunakan untuk menguji kondisi dan mengeksekusi kode tertentu jika kondisi tersebut terpenuhi.

Konstruk if-else memiliki dua bagian, yaitu bagian if dan bagian else. Bagian if akan dieksekusi jika kondisinya terpenuhi. Bagian else akan dieksekusi jika kondisinya tidak terpenuhi.

var umur = 20;

if (umur >= 18) {
  console.log("Anda sudah dewasa.");
} else {
  console.log("Anda masih di bawah umur.");
}


Berikut adalah contoh penggunaan konstruk if-else:

📂 belajar-js/
├── 📂 js/
|   └── 📜 kode-program.js
└── 📜 index.html

Function

Function adalah blok kode yang dapat digunakan untuk melakukan tugas tertentu. Function dapat digunakan untuk mengotomatiskan tugas, membuat kode lebih modular, atau meningkatkan readability.

Untuk mendeklarasikan function di JavaScript, gunakan kata kunci function. Misalnya:

function hitungLuasSegitiga(alas, tinggi) {
  return alas * tinggi / 2;
}

Function dapat dipanggil dengan menggunakan tanda kurung. Misalnya:

Literals

Literal adalah nilai yang tidak dapat diubah. Literal dapat berupa angka, teks, boolean, atau null.

Expression

Expression adalah kombinasi dari operator dan literal yang digunakan untuk menghasilkan nilai. Expression dapat digunakan untuk melakukan operasi matematika, logika, atau perbandingan.

Comment

Comment adalah catatan yang dapat digunakan untuk menjelaskan kode. Comment dapat digunakan untuk meningkatkan readability dan maintainability kode.

Untuk membuat comment di JavaScript, gunakan tanda //. Misalnya:

// Ini adalah comment

Case Sensitive

JavaScript adalah bahasa pemrograman case sensitive. Artinya, perbedaan huruf besar dan huruf kecil berpengaruh terhadap makna kode. Misalnya, variabel nama berbeda dengan variabel Nama.

📂 belajar-js/
├── 📂 js/
|   └── 📜 kode-program.js
└── 📜 index.html

CamelCase

CamelCase adalah gaya penulisan nama variabel, function, atau objek yang menggabungkan huruf besar dan huruf kecil. Huruf besar digunakan pada awal setiap kata, kecuali kata pertama. Misalnya, variabel namaLengkap ditulis menggunakan CamelCase.

Berikut adalah contoh penggunaan CamelCase:

function hitungLuasSegitiga() {
  return alas * tinggi / 2;
}

var namaLengkap = "Andi Setiawan";



di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

TUGAS DPK Cara kolaborasi di Github

       Cara kolaborasi di Github Bintang Dwi Anggara  Juni  05, 2024 Assalamualaikum wr wb. Pada kesempatan kali ini, kelompok saya akan mem...

  • Data Analyitic
       Apa itu data?   sebelumnya mari kita pahami terlebih dahulu mengenai data,pengertian data,jenis-jenis        data,dan fungsi dari data ke...
  • Perbedaan PHP native dan PHP Framework (Laravel)
    P engembangan website dengan bahasa pemrograman PHP dapat memilih menggunakan PHP Native atau memanfaatkan framework, salah satunya adalah F...
  • Mini Project 2 (Modul 5)
                           NAMA  : Bintang Dwi Anggara             KELAS : X-RPPL      Tujuan dari pembahasaan mini project ini adalah m...