Pertemuan 4 - JS Fundamental

Pertemuan 4 :
• Javascript Fundamental
Novian Adi Prasetyo , S.Kom., M.Kom

Trihastuti Yuniati, S.Kom., M.T
Annisaa Utami, S.Kom., M.Cs
2
Daftar Pustaka
- https://www.dicoding.com/academies/123
- https://www.w3schools.com/js
3
Javascript (JS)
JavaScript merupakan bahasa pemrograman client-side sehingga
seluruh prosesnya berjalan pada sisi pengguna bukan server.
JavaScript diperlukan pada pengembangan website ketika kita
membutuhkan suatu interaksi dari pengguna. Sesungguhnya website
hanya menampilkan konten yang statis jika hanya menggunakan
HTML dan CSS. Karena diolah pada sisi client, JavaScript sangat
bergantung pada pengaturan dan kemampuan browser ketika
melakukan sebuah proses (compiling atau rendering pada DOM).
Bahkan pengguna dapat sepenuhnya tidak mengizinkan JavaScript
berjalan pada browser dengan menonaktifkan dukungan JavaScript
pada browser.
4
Menuliskan Syntax Javascript
Sama seperti styling, untuk menggunakan JavaScript pada website
kita bisa menerapkannya melalui atribut HTML, embed script, atau
menggunakan file external.
5
Menulis Javascript Inline Script
Untuk menuliskan JavaScript menggunakan atribut, kita bisa
menerapkannya pada atribut event seperti “onclick”, sehingga
JavaScript akan dieksekusi ketika elemen tersebut ditekan oleh
kursor. Contohnya sebagai berikut:
<button onclick="alert('Anda menekan elemen button!')">Click di sini!</p>

6
Menulis Javascript Inline Script
Ada banyak sekali atribut event yang dapat digunakan untuk
menuliskan script di dalamnya. Kita bisa lihat apa saja atributnya
pada tautan berikut:
https://www.w3schools.com/tags/ref_eventattributes.asp
7
Menulis Javascript Embedded Script
JavaScript juga dapat dituliskan dengan menanamnya (embedding)
pada berkas HTML dengan menggunakan elemen <script>.
<script>
// JavaScript dituliskan di sini.
</script>
Elemen <script> dapat diletakan di dalam
elemen <head> atau <body>. Akan tetapi jika kita menerapkan
banyak script pada elemen <head> proses memuat halaman akan
menjadi lambat, karena HTML akan membaca kode dari atas ke
bawah.
8
Menulis Javascript External Script
Metode lainnya yaitu dengan menggunakan berkas external yang
berekstensi .js. Di dalam berkas tersebutlah seluruh JavaScript
dituliskan. Keuntungan menggunakan metode ini adalah script dapat
diterapkan pada berbagai berkas HTML tanpa menuliskan ulang
scriptnya (keuntungan yang sama juga ketika kita
menggunakan external css).
Sama seperti Embedded Script kita bisa tuliskan elemen script
tersebut di dalam elemen <header> namun direkomendasikan untuk
disimpan di dalam elemen <body> sebelum tag penutup </body>.
9
Menulis Javascript External Script
Untuk menghubungkan external script dengan berkas HTML, kita
gunakan elemen <script> lalu tambahkan atribut src dengan nilai
alamat berkas .js yang digunakan.
<script src="berkas-javascript.js"></script>
10
HTML DOM
Document Object Model (DOM) adalah object model standar
untuk HTML dan XML yang bersifat platform independent.
Sebuah web browser tidak harus menggunakan DOM untuk
menampilkan dokumen HTML. Namun DOM diperlukan
oleh JavaScript yang akan mengubah tampilan sebuah website
secara dinamis. Dengan kata lain, DOM adalah cara JavaScript
melihat suatu halaman HTML.
11
HTML DOM
Dengan DOM, JavaScript dapat mengubah HTML agar menjadi
dinamis:
JavaScript dapat mengubah semua elemen HTML
JavaScript dapat mengubah semua atribut HTML
JavaScript dapat mengubah semua Stlye CSS
JavaScript dapat menghapus elemen dan atribut HTML
JavaScript dapat menambahkan elemen dan atribut HTML baru
JavaScript dapat bereaksi terhadap semua event HTML
12
HTML DOM Finding HTML Elements
Untuk dapat mengubah, menghapus, menambah segala sesuatu
yang ada di HTML diperlukan sebuah identifikasi element.
Untuk menemukan element pada halaman HTML, javascript
menggunakan metode seperti dibawah ini :
13
HTML DOM Changing HTML Elements
Untuk mengubah konten, nilai, style pada halaman HTML, Javascript
dapat menggunakan metode berikut ini :
14
HTML DOM Adding and Deleting Elements
Untuk menambah atau menghapus elemen pada halaman HTML,
Javascript dapat menggunakan metode berikut ini :
15
JS Output
Javascript dapat menampilkan output dengan cara sebagai berikut :
innerHTML
document.write()
window.alert()
using console.log()
16
JS Output innerHTML
innerHTML adalah sebuah atribut di dalam (objek) elemen HTML
yang berisi string HTML.
Dengan innerHTML, kita dapat menampilkan output ke elemen yang
lebih spesifik.
<script>
var hasil = document.getElementById("hasil-output");
hasil.innerHTML = "<p>Aku suka Javascript</p>";
</script>
17
JS Output document.write
Objek document adalah objek yang mewakili dokumen HTML di
dalam Javascript.
Dalam objek document, terdapat fungsi write() untuk menulis
sesuatu ke dokumen HTML.
<script>
document.write("<h1>Hello World!</h1>");
document.write("<hr>");
document.write("<p>Saya sedang belajar Javascript</p>");
document.write("di <b>petanikode.com</b>")
</script>
18
JS Output window.alert
Fungsi alert() adalah fungsi untuk menampilkan jendela dialog.
window.alert("Hello World!");
alert("Hello World!");
19
JS Output console.log
Fungsi console.log() adalah fungsi untuk menampilkan teks ke
console Javascript.
Fungsi console.log() biasanya digunakan untuk debugging. Karena
setiap pesaan error di Javascript selalu ditampilkan di dalam
Console.
console.log("Hello World!");
20
Operator Arithmetic
var x = (100 + 50) * a;
21
Operator Assignment
var x = 10;
x *= 5;
var x = 10;
x %= 5;
22
Operator Comparison & Logical
Var a = 1;
Var b = 2;
If(a>=b){
window.alert(‘Kondisi terpenuhi’);
}
23
Data Type
Variabel JavaScript dapat menampung banyak tipe data: angka,
string, objek, dan lainnya:
var length = 16; // Number

var lastName = "Johnson"; // String
var x = {firstName:"John", lastName:"Doe"}; // Object
var totalBelanja = prompt("Total belanja?", 0);
24
Object
Object sama seperti variable, tetapi object memiliki banyak nilai.
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
Pemanggilan object :
objectName.propertyName
objectName["propertyName"]
25
Array
Array digunakan untuk menyimpan banyak nilai dalam satu variabel.
Array adalah variabel khusus, yang dapat menampung lebih dari
satu nilai pada suatu waktu.
var array_name = [item1, item2, ...];
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
var cars = ["Saab", "Volvo", "BMW"];

document.getElementById("demo").innerHTML = cars[0];
26
Condition if else
<script>
var nilai = prompt("Inputkan nilai akhir:");
var grade = "";
if(nilai >= 90) grade = "A"
else if(nilai >= 80) grade = "B+"
else if(nilai >= 70) grade = "B"
else if(nilai >= 60) grade = "C+"
else if(nilai >= 50) grade = "C"
else if(nilai >= 40) grade = "D"
else if(nilai >= 30) grade = "E"
else grade = "F";
document.write(`<p>Grade anda: ${grade}</p>`);
</script>
27
Condition switch case
var nilai = prompt("input nilai");
var grade = "";
switch(true){
case nilai < 90:
grade = "A";
break;
case nilai < 80:
grade = "B+";
break;
case nilai < 70:
grade = "B";
break;
default:
grade = "F“;
28
Loop
Loop menawarkan cara cepat dan mudah untuk melakukan sesuatu
secara berulang-ulang.
For : While :
var jenis_musik = [‘Jazz’, ’Blues’,’Classic’]; var n = 0;
for (i = 0; i < jenis_musik.length; i++) { var x = 0;
console.log(jenis_music[i]); while (n < 3) {
} n++;
x += n;
console.log(x);
}
29
Json
JSON adalah singkatan dari JavaScript Object Notation, data json hanya berupa teks,
sehingga untuk untuk membaca dan menghasilkan data JSON dapat ditulis dalam
bahasa pemrograman apa pun.
JSON adalah format pertukaran data yang ringan, JSON adalah format untuk
menyimpan dan mengirim data, JSON sering digunakan ketika data dikirim dari server
ke halaman web.
Objek JSON ditulis di dalam kurung kurawal. {"firstName":"John", "lastName":"Doe"}
Array JSON ditulis di dalam tanda kurung siku.
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
30
Json Convert text to json
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}’;
var obj = JSON.parse(text);
obj.employees[1].firstName + " " + obj.employees[1].lastName;

31
</TERIMA KASIH>

Pertemuan 4 - JS Fundamental

Diunggah oleh

Informasi Dokumen

Judul Asli

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

Pertemuan 4 - JS Fundamental

Diunggah oleh

Hak Cipta:

Format Tersedia

Pertemuan 4 :

Novian Adi Prasetyo , S.Kom., M.Kom

<button onclick="alert('Anda menekan elemen button!')">Click di sini!</p>

var length = 16; // Number

var array_name = [item1, item2, ...];

var cars = ["Saab", "Volvo", "BMW"];

var obj = JSON.parse(text);

obj.employees[1].firstName + " " + obj.employees[1].lastName;

Anda mungkin juga menyukai