12 Pengenalan Javascript 1

PENGENALAN JAVASCRIPT
Tujuan Kegiatan
1. Memahami pengertian JavaScript
2. Menulis kode JavaScript di HTML
3. Variabel dan Type Data JavaScript
4. alert (), confirm (), dan prompt ()
PEMBAHASAN
1. Memahami pengertian JavaScript

JavaScript merupakan salah satu teknologi inti World Wide Web
selain HTML dan CSS, yang membantu membuat halaman web menjadi
lebih interaktif. JavaScript pertama kali dikembangkan oleh Brendan
Eich dari Netscape dengan nama Mocha, yang nantinya namanya
diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
JavaScript adalah bahasa pemrograman populer yang digunakan
untuk membuat situs dengan konten website yang dinamis. Konten
dinamis artinya konten dapat bergerak atau berubah di depan layar
tanpa perlu mereload halaman. Misalnya saja, fitur slideshow foto,
gambar animasi, pengisian poling, dan lainnya.
JavaScript sendiri sebenarnya biasanya dikolaborasikan dengan
HTML dan CSS. Di mana HTML digunakan untuk membuat struktur
website dan CSS untuk merancang style halaman website. Lalu,
JavaScript berperan menambahkan elemen interaktif untuk
meningkatkan engagement pengguna.
2. Menulis kode JavaScript di HTML
Bagaimana cara menulis kode JavaScript di HTML? terdapat
beberapa cara, antara lain:
1) Menulis dengan embed

Pada cara ini, kita menggunakan tag <script> untuk
menempelkan (embed) kode Javascript pada HTML. Tag ini
dapat ditulis di dalam tag <body>.
Penulisan di akhir <body> akan meningkatkan
kecepatan display atau tampilnya konten di web, karena
apabila ditulis dalam <head>, script tersebut akan
dieksekusi terlebih dahulu sebelum konten ditampilkan.
Jadi, tulislah kode Javascript di dalam <body>, tepatnya
sebelum tutup </body>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>embed</title>
</head>
<body>
<p>Hello world</p>

<script>
// ini adalah penulisan kode JavaScript
document.write("ini adalah JavaScript pertama saya")
</script>
</body>
</html>
Hello word dibuat dengan menggunakan tag <p> sedangkan
ini adalah JavaScript pertama saya diu=buat menggunakan
JavaScript.
2) Menulis pada file eksternal

Hampir sama seperti CSS, jika menggunakan file
eksternal, kita harus membuat file terpisah dengan
ekstensi .js dan buatkan juga file htmlnya.
Sebagai contoh, kita akan membuat file eksternal
dengan nama script.js dan eksternal.html sebagai kode
HTML-nya. Ketik kode berikut pada file htmlnya
<!DOCTYPE html>
<html lang="en">
<head>
<title>eksternal</title>
</head>
<body>
<p>Hello world</p>

<script src="script.js"></script>
</body>
</html>
Kemudian ketik kode berikut pada file js nya

document.write("ini adalah JavaScript pertama saya")
3) Menulis pada atribut
Penulisan ini hampir mirip dengan inline pada CSS,
dimana kita bisa menuliskan JavaScript pada suatu elemen
html, langsung pada atributnya. Buatlah file dengan nama
penulisan_atribut.html kemudian masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<title>atribut</title>
</head>
<body>
<button onclick="alert('Data berhasil disimpan')">Simpan
</button>
</body>
</html>
Ketika elemen <button> yang memiliki atribut onclick

di klik, maka akan muncul alert atau pop-up
3. Menampilkan output pada JavaScript
Meskipun fungsi utama JavaScript adalah mengubah perilaku
browser, teknik ouput banyak digunakan untuk menampilkan data
tertentu. Selain itu, kita akan mengetahui mengapa ada lebih dari satu
metode untuk mencetak dalam JavaScript, di mana dan kapan harus
menggunakannya.
Output pada JavaScript mendefinisikan cara untuk menampilkan
output dari kode tertentu. Output dapat ditampilkan dengan
menggunakan beberapa cara berbeda, antara lain menulis ke dalam:
output HTML menggunakan document.write(), kotak peringatan
menggunakan alert(), elemen HTML menggunakan innerHTML, konsol
browser menggunakan console.log()
1) Menggunakan document.write ()
document.write() pada JavaScript berfungsi
menampilkan data langsung pada halaman web, fungsi ini
dapat di gunakan untuk menampilkan data langsung saat
halaman web selesai di muat (loaded) atau di eksekusi pada
event tertentu misalnya saat tombol di klik.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Documen.Write()</title>
</head>
<body>
<script>
document.write("<h1>Contoh penggunaan
document.write()</h1>");
document.write("<hr>");
document.write("<p>Ini adalah contoh menampilkan
output menggunakan document.write()</p>");
document.write("Selamat belajar")
</script>
</body>
</html>
Pada contoh di atas, data akan langsung ditampilkan
saat halaman web selesai di muat (loaded). Sedangkan
contoh dibawah data akan ditampilkan pada event atau
kejadian tertentu, misalnya pada saat kejadian di klik
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button onclick="document.write('Selamat belajar.')">
klik disini
</button>
</body>
</html>
Ketika klik disini di klik, akan menampiklan teks
Selamat belajar.
2) Menggunakan alert()
Fungsi window.alert() pada JavaScript berfungsi
menampilkan data dalam bentuk “peringatan” (alert) berupa
kotak dialog yang akan muncul pada web browser. Tampilan
kotak dialog biasanya berbeda pada tiap-tiap web browser,
beberapa web browser juga secara default memblokir fungsi
JavaScript karena berbagai alasan terutama alasan
keamanan (misalnya web browser Internet Explorer).
<!DOCTYPE html>
<html lang="en">
<head>
<title>alert</title>
</head>
<body>
<button onclick="simpan()">Klik simpan</button>
<script>
function simpan(){
alert("Data berhasil disimpan");
}
</script>
</body>
</html>
3) Menggunakan innerHTML
innerHTML adalah salah satu property dari JavaScript
yang berfungsi untuk menentukan dan mengembalikan nilai
konten dari suatu element. Dengan kata lain, innerHTML
digunakan untuk menentukan dan mengembalikan nilai
konten dari suatu element dalam bentuk text atau string
berikut dengan tag html didalamnya nya.
Selanjutnya, buatlah sebuah file html dengan nama
m_innerhtml.html dan masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<title>innerHTML</title>
</head>
<body>
<h2>menggunakan innerHTML</h2>
<div id="output"></div>
<script>
document.getElementById("output").innerHTML = "<p>Ini
adalah teks dari id ouput</p>";
</script>
</body>
</html>
metode document.getElementById(id) menampilkan
elemen berdasarkan “id” sebagai salah satu pengenalnya.
JavaScript akan mencari elemen pada suatu dokumen atau
suatu halaman web berdasarkan “id” sebagai parameter
pencarian.
4) Menggunakan console.log ()
Fungsi console.log() pada JavaScript berfungsi untuk
menampilkan data pada console, data tidak akan tampil
pada kotak dialog, pada halaman web, atau pada elemen,
melainkan pada fitur console di web browser. Console
adalah salah satu developer tool yang terdapat pada semua
web browser (kecuali web browser tertentu) yang di sediakan
untuk tujuan debugging, tekan F12 untuk membuka fitur
console pada web browser.
Debugging berasal dari kata “bug” yang berarti
serangga. Debugging adalah proses untuk mencari dan
menghapus suatu bug dalam sebuah program atau sistem.
Yang dimaksud bug adalah suatu eror atau cacat yang
dapat menyebabkan program atau sistem tidak berjalan
dengan sempurna
<!DOCTYPE html>
<html lang="en">
<head>
<title>console.log</title>
</head>
<body>
<p>Menampilkan kata selamat pagi pada console</p>
<script>
console.log("selamat pagi");
</script>
</body>
</html>
Kata selamat pagi akan ditampilkan pada console dengan

perintah console.log()
4. Variabel dan Type Data JavaScript
Variabel adalah penanda identitas yang digunakan untuk
menampung suatu nilai. Secara teknis, variabel merujuk ke sebuah
alamat di memory komputer (RAM).
Sesuai dengan namanya, isi variabel bisa berubah sepanjang kode
program. Sebagai contoh, jika saya membuat program menghitung luas
persegi, maka bisa menyiapkan variabel panjang dan lebar yang diisi
angka 10 dan 12. Nantinya isi variabel panjang dan lebar bisa ditukar
dengan angka 35, 40, atau angka lain.
1) Membuat Variabel
Membuat variabel yang umum digunakan di
JavaScript adalah menggunakan kata kunci var lalu diikuti
dengan nama variabel dan nilainya.
var siteName = "Google";
Pada contoh di atas, kita membuat variabel bernama

siteName dengan nilai atau value berupa teks (string):
"Google"
Kalau kita perhatikan, nama variabel siteName terdiri
dari 2 kata yaitu site dan name. Pada kegiatan-kegiatan
sebelumnya, apabila kita menulis 2 kata kita menambahkan
underscore site_Name. Tetapi pada pemrograman JavaScript
biasanya menggunakan Camel Case. Terdapat 4 macam
penulisan case pada kode program, yaitu:
 Snake Case. Gaya penulisan case yang ini
menggunakan garis bawah atau underscore (_).
Contoh site_name, nama_class, nama_variabel
 Camel Case. Ciri-cirinya semua suku kata
menyatu dan terdapat huruf kapital untuk
memisahnya. Contoh siteName, namaClass,
iPhone, camelCase, dan lain-lain
 Kebab Case. Gaya kebab case menggunakan
tanda minus (-) untuk memisah suku kata.
Contoh btn-primary, kebab-case, dan lain-lain
 All Caps. All Caps artinya semua kapital. Gaya
penulisan ini sering digunakan untuk
menuliskan nama sebuah konstanta. Contoh
DATABASE, TABLE, HOSTNAME, dan lain-lain
2) Menampilkan Variabel
Buatlah sebuah file html dengan nama variabel.html
kemudian masukan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<title>variabel</title>
</head>
<body>
<script>
// membuat variabel
var name = "Google";
var visitorCount = 123456;
var isActive = true;
var url = "https://www.google.com";
// menampilkan variabel ke jendela dialog (alert)

alert("Selamat datang di website " + name);

// menampilkan variabel ke dalam HTML
document.write("Nama Website: " + name + "<br>");
document.write("Jumlah Pengunjung hari ini: " +
visitorCount + "<br>");
document.write("Status Aktif: " + isActive + "<br>");
document.write("Alamat URL: " + url + "<br>");
</script>
</body>
</html>
3) Tipe Data Javascript
Dalam dunia programming, tipe data merupakan
suatu hal yang sangat penting untuk diketahui dan
dipahami, tidak untuk JavaScript saja tapi juga untuk
beberapa bahasa pemrograman lainnya. Variabel JavaScript
dapat menampung angka seperti 100 dan value text seperti
"Hello World".
Dalam dunia programming, value text disebut juga
dengan istilah string. JavaScript dapat menangani banyak
sekali jenis data (seperti number/integer, string, boolean
dan lain-lain).Value string harus ditulis di dalam tanda
kutip ganda atau tunggal. Jika kita memasukkan angka di
dalam tanda kutip maka nilai tersebut tetap akan dianggap
sebagai string. Buatlah sebuah file html dengan nama
typedata1.html kemudian masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<title>Type data</title>
</head>
<body>
<h2>Belajar menggunakan type data pada JavaScript</h2><hr>
<h3>Menggunakan string</h3>
<p id="string"></p>
<h3>Menggunakan number/integer</h3>
<p id="int"></p>
<h3>Menggunakan boolean</h3>
<p id="bool"></p>
<script>
var string1 = "Sekarang adalah hari jum'at";
var string2 = "Kegiatan rutinku adalah 'LaPadiTako'";
var string3 = '"LaPadiTaKo" artinya Lari Pagi di Taman
Kota';
var int1 = 10.5;

var int2 = 3;
var int3 = int1 + int2;
var bool1 = "ayam";

var bool2 = "bebek";
var bool3 = "cacing";

document.getElementById("string").innerHTML =
string1 + "<br>" +
string2 + "<br>" +
string3;
document.getElementById("int").innerHTML = "nilai dari

" + int1 + " + " + int2 + " adalah " + int3;
document.getElementById("bool").innerHTML = (bool1 ==
bool2) + "<br>" + (bool1 == "ayam") + "<br>" + (bool !=
bool3);
</script>
</body>
</html>
String merupakan tipe data untuk serangkaian teks
seperti "Sekarang adalah hari jum'at". Value dengan tipe
data string ditulis menggunakan tanda kutip baik tunggal
maupun ganda.
Selain itu kita juga bisa menggunakan variasi dalam
menggunakan string seperti penggunaan tanda kutip
tunggal di dalam tanda kutip ganda atau sebaliknya
menggunakan tanda kutip ganda di dalam tanda kutip
tunggal seperti contoh di atas.
Tipe data number atau integer pada JavaScript harus
ditulis tanpa tanda kutip (baik tunggal maupun ganda), jika
ditulis di dalam tanda kutip maka data akan terbaca sebagai
string meskipun sebenarnya datanya adalah angka. Tipe
data boolean merupakan data yang hanya memiliki dua
value yaitu true dan false.
Selanjutnya kita akan coba membuat contoh type data
array dan object. Array adalah tipe data yang berisi
kumpulan dari nilai atau tipe data lain. Nilai di dalam array
disebut dengan elemen, dan setiap elemen memiliki ‘nomor
urut’ yang dikenal dengan istilah index.
Penomoran index di dalam array dimulai dari angka 0,
sehingga elemen pertama berada di index 0, elemen kedua
berada di index 1, dan seterusnya. Sedangkan type data
object memiliki data yang banyak dalam sebuah variabel,
serta memiliki value masing-masing. Buatlah file dengan
nama typedata2.html kemudian masukkan kode berikut
<!DOCTYPE html>
<html lang="en">
<head>
<title>type data</title>
</head>
<body>
<h2>belajar array</h2>
<p id="array"></p><hr>
<h2>belajar object</h2>
<p id="object"></p>
<script>
const namaBinatang =
["Ayam","Bebek","Cacing","Domba"];
document.getElementById("array").innerHTML =
namaBinatang[3];
const biodata = {
namaDepan : "Budi",
namaBelakang : "Darmawan",
umur : 16,
pekerjaan : "pelajar"
};
document.getElementById("object").innerHTML =
biodata.namaDepan + " " + biodata.namaBelakang + ",
adalah seorang " + biodata.pekerjaan + " yang saat ini berusia
" + biodata.umur + " tahun";
</script>
</body>
</html>
5. alert(), confirm(), dan prompt()
Jendela dialog merupakan jendela yang digunakan oleh website
untuk berinteraksi dengan pengguna. Ada tiga macam jendela dialog
pada JavaScript yaitu alert(); confirm(); dan prompt();
1) alert();
Dialog alert() biasanya digunakan untuk menampilkan
sebuah pesan peringatan atau informasi. Dialog alert()
memiliki satu perameter yang harus diberikan, yaitu: teks
yang akan ditampilkan pada dialog. Sebelumnya kita sudah
membuat dialog alert() dengan nama file m_alert.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<button onclick="document.write('Selamat belajar.')">
klik disini
</button>
</body>
</html>
Jadi, Saat kita hanya ingin menampilkan informasi

saja, maka gunakan alert()
2) confirm();
Dialog confirm() digunakan untuk melakukan
konfirmasi dalam melakukan tindakan tertentu. Ketika
kotak konfirmasi muncul, pengguna harus mengklik “OK”
atau “Batal” untuk melanjutkan. Dialog confirm() akan
mengembalikan nilai true apabila kita memilih tombol Ok
dan akan mengembalikan nilai false apabila kita memilih
Cancel. Buatlah file html dengan nama m_confirm.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>confirm</title>
</head>
<body>
<h2>belajar dialog confirm</h2><hr>
<p>Saat ini kita berada di home</p>
<button onclick="google()">menuju google</button>
<script>
function google(){
var yakin = confirm ('apa kamu yakin menuju halaman
google?')
if (yakin) {
window.location = "https://www.google.com"
} else {
alert("kamu masih di home");
}
}
</script>
</body>
</html>
3) prompt();
Dialog prompt() berfungsi untuk mengambil sebuah
inputan dari pengguna. Prompt() akan mengembalikan
sebuah nilai string dari apa yang diinputkan oleh pengguna.
Prompt() digunakan apabila kita ingin mengambil data teks
dari pengguna. Buatlah file dengan nama m_prompt.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>prompt</title>
</head>
<body>
<script>
var nama = prompt("Siapa nama kamu?", "");
var umur = prompt("Berapa umur kamu?", "");

document.write("Selamat datang "+ nama + ", umur Anda
adalah " + umur + " tahun.");
</script>
</body>
</html>
Ketika kotak prompt muncul, pengguna harus

mengklik “OK” atau “Cancel” untuk melanjutkan setelah
memasukkan nilai masukan. Jika pengguna mengklik “Ok”
kotak mengembalikan nilai input. Jika pengguna mengklik
“Cancel” kotak mengembalikan null.
AYO KERJAKAN
Dengan menggunakan html, css dan javascript, buatlah sebuah

formulir pendaftaran dengan ketentuan sebagai berikut.
1) Saat tombol “daftar” di klik,
Jika form belum terisi semua, akan ada alert “harus mengisi
data dengan lengkap”
2) Jika form sudah terisi dengan lengkap, akan ada alert “data
telah disimpan”
3) Semua File disimpan dalam 1 buah folder dengan nama
absen_Nama_TugasJs1 contoh 13_Jivan_TugasJs1
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validasi Form</title>
<link rel="stylesheet" href="zz_style1.css">
</head>
<body>
<h2>Form Pendaftaran</h2>
<div class="login">
<form action="#" method="POST" onSubmit="validasi()">
<div>
<label>Nama Lengkap:</label>
<input type="text" name="nama" id="nama" />
</div>
<div>
<label>Email:</label>
<input type="email" name="email" id="email" />
</div>
<div>
<label>Alamat:</label>
<textarea cols="40" rows="5" name="alamat"
id="alamat"></textarea>
</div>
<div>
<input type="submit" value="Daftar" class="tombol">
</div>
</form>
</div>
</body>
<script>
function validasi() {
var nama = document.getElementById("nama").value;
var email = document.getElementById("email").value;
var alamat = document.getElementById("alamat").value;
if (nama != "" && email!="" && alamat !="") {
alert('data telah disimpan');
}else{
alert('Anda harus mengisi data dengan lengkap !');
}
}
</script>
</body>
</html>
body {
background-color: darkcyan;
font-family: sans-serif;
}
h2 {
text-align: center;
color: #fff;
}
.login {
padding: 10px;
margin: 50px auto;
width: 300px;
background: #fff;
border-radius: 3px;
}
label {
font-size: 10pt;
color: #555;
}
input[type="text"],
input[type="email"],
textarea {
padding: 8px;
width: 95%;
background: #efefef;
border: 0px;
font-size: 10pt;
margin: 6px 0px;
}
.tombol {
background: #3498db;
color: #fff;
border: 0;
padding: 5px 7px;
margin: 5px auto;
}

Bahasa

12 Pengenalan Javascript 1

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

12 Pengenalan Javascript 1

Diunggah oleh

Hak Cipta:

Format Tersedia

PENGENALAN JAVASCRIPT

1. Memahami pengertian JavaScript

1) Menulis dengan embed

2) Menulis pada file eksternal

Kemudian ketik kode berikut pada file js nya

Ketika elemen <button> yang memiliki atribut onclick

Kata selamat pagi akan ditampilkan pada console dengan

var siteName = "Google";

Pada contoh di atas, kita membuat variabel bernama

// menampilkan variabel ke jendela dialog (alert)

var int1 = 10.5;

var bool1 = "ayam";

document.getElementById("int").innerHTML = "nilai dari

Jadi, Saat kita hanya ingin menampilkan informasi

Ketika kotak prompt muncul, pengguna harus

Dengan menggunakan html, css dan javascript, buatlah sebuah

Anda mungkin juga menyukai