MODUL 4 JAVA SCRIPT Sub :...

35
Praktikum Pemrograman Berbasis Web [email protected] MODUL 4 JAVA SCRIPT Sub : PENGENALAN Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang

Transcript of MODUL 4 JAVA SCRIPT Sub :...

Page 1: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

MODUL 4

JAVA SCRIPT

Sub : PENGENALAN

Laboratorium Komputer

STIMIK PPKIA Pradnya Paramita Malang

Page 2: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Pertemuan 4

4.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah – perintah jAVAsCRIPT2. Mahasiswa dapat mengoperasikan struktur Java Script3. Mahasiswa dapat memakai variable, tipe data dan operator pada java script

4.2 Materi :1. Pengenalan Java Script2. Dasar – dasar Java Script3. Fungsi4. Variabel5. Event

4.3 Alat Bantu1. Notepad ++2. Page, Image

4.4. Prosedure Praktikum1. Peserta membaca dan memperlajari materi praktkum sebelumnya2. Instruktur menerangkan dan menjelaskan teori dan cara kerja3. Peserta mempraktikkan materi percobaan4. Peserta membuat penyelesaian terhadap soal latihan, tugas dan berhak mendapatkan

nilai praktikum harian

4.5 TeoriA. Apa Itu JavascriptJavascript adalah bahasa script yang biasa jalan di browser, orang-orang biasa bilang clientside programming. Client di sini adalah browser, seperti: Internet Explorer, Firefox, Safaridan sebagainya. Kode javascript biasanya disisipkan diantara kode-kode HTML. Di manasaya bisa menulis kode javascript? Anda bisa menulis kode javascript di teks editor sepertinotepad dan sebagainya. Apakah saya butuh compiler untuk menjalankan javascript? Tidakperlu, anda cukup menjalankan javascript menggunakan browser. Semua browsermempunyai engine yang menginterpretasikan kode javascript kita. JavaScript adalah salahsatu dari 3 bahasa yang harus dipelajari oleh semua pengembang web:

1. HTML untuk mendefinisikan isi halaman web2. CSS untuk menentukan tata letak halaman web3. JavaScript untuk memprogram perilaku halaman web

JavaScript lama dapat menggunakan atribut tipe: <script type = "text / javascript">. Atributjenis tidak diperlukan. JavaScript adalah bahasa scripting default dalam HTML. Tutorial iniadalah tentang JavaScript, dan bagaimana JavaScript bekerja dengan HTML dan CSS.JavaScript Dapat Mengubah Konten HTML Salah satu dari banyak metode JavaScript HTMLadalah getElementById ().

Contoh ini menggunakan metode untuk "menemukan" elemen HTML (dengan id = "demo")dan mengubah konten elemen (innerHTML) menjadi "Halo JavaScript":

Page 3: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Contoh :<!DOCTYPE html><html><body><h2>What Can JavaScript Do?</h2><p id="demo">JavaScript can change HTML content.</p><button type="button" onclick='document.getElementById("demo").innerHTML = "HelloJavaScript!"'>Click Me!</button></body></html>

JavaScript Dapat Mengubah Atribut HTMLContoh ini mengubah gambar HTML dengan mengubah atribut src (source) tag <img>:Contoh :<!DOCTYPE html><html><body><h2>What Can JavaScript Do?</h2><p>JavaScript can change HTML attributes.</p><p>In this case JavaScript changes the src (source) attribute of an image.</p><button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on thelight</button><img id="myImage" src="pic_bulboff.gif" style="width:100px"><button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off thelight</button></body></html>

JavaScript Dapat Mengubah Gaya HTML (CSS)Mengubah gaya elemen HTML, adalah varian dari perubahan atribut HTML:Contoh<!DOCTYPE html><html><body><h2>What Can JavaScript Do?</h2><p id="demo">JavaScript can change the style of an HTML element.</p><button type="button"onclick="document.getElementById('demo').style.fontSize='35px'">Click Me!</button></body></html>

JavaScript dapat menyembunyikan elemen HTMLMenyembunyikan elemen HTML bisa dilakukan dengan mengubah tampilan style:Contoh:<!DOCTYPE html><html><body>

Page 4: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<h2>What Can JavaScript Do?</h2><p id="demo">JavaScript can hide HTML elements.</p><buttontype="button"onclick="document.getElementById('demo').style.display='none'">Click Me!</button></body></html>

JavaScript dapat menampilkan elemen HTMLMenampilkan elemen HTML yang tersembunyi juga bisa dilakukan dengan mengubahtampilan style:Contoh :<!DOCTYPE html><html><body><h2>What Can JavaScript Do?</h2><p>JavaScript can show hidden HTML elements.</p><p id="demo" style="display:none">Hello JavaScript!</p><button type="button"onclick="document.getElementById('demo').style.display='block'">Click Me!</button></body></html>

Dalam HTML, kode JavaScript harus disisipkan di antara tag <script> dan </ script>.Contoh :<!DOCTYPE html><html><body><h2>JavaScript in Body</h2><p id="demo"></p><script>document.getElementById("demo").innerHTML = "My First JavaScript";</script></body></html>

Fungsi dan Event JavaScriptFungsi JavaScript adalah blok kode JavaScript, yang dapat dijalankan saat "dipanggil".Misalnya, sebuah fungsi dapat dipanggil saat sebuah peristiwa terjadi, seperti saat penggunamengeklik tombol. Skrip dapat ditempatkan di bagian <body>, atau di bagian <head> darihalaman HTML, atau keduanya. JavaScript di <head> Dalam contoh ini, fungsi JavaScriptditempatkan di bagian <head> pada halaman HTML. Fungsi dipanggil (disebut) saat tomboldiklik:Contoh :<!DOCTYPE html><html><head><script>

Page 5: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

function myFunction() {document.getElementById("demo").innerHTML = "Paragraph changed.";

}</script></head><body><h2>JavaScript in Head</h2><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button></body></html>

JavaScript di <body>Dalam contoh ini, fungsi JavaScript ditempatkan di bagian <body> dari halaman HTML.Fungsi dipanggil (disebut) saat tombol diklik:Contoh :<!DOCTYPE html><html><body><h2>JavaScript in Body</h2><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button><script>function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";}</script></body></html>

Fungsi JavaScript didefinisikan dengan kata kunci fungsi, diikuti dengan nama, diikuti tandakurung (). Nama fungsi dapat berisi huruf, angka, garis bawah, dan tanda dolar (aturan yangsama dengan variabel). Tanda kurung dapat mencakup nama parameter yang dipisahkandengan koma, Kode yang akan dieksekusi, oleh fungsinya, ditempatkan di dalam kurungkurawal: {}

function name(parameter1, parameter2, parameter3) {code to be executed

}

Parameter fungsi adalah nama yang tercantum dalam definisi fungsi. Argumen fungsiadalah nilai sebenarnya yang diterima oleh fungsi saat dipanggil. Di dalam fungsi, argumen(parameter) berperilaku sebagai variabel lokal. Fungsi sama seperti Prosedur atau Subrutin,dalam bahasa pemrograman lain.

Page 6: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Fungsi ReturnSaat JavaScript mencapai pernyataan kembali, fungsi akan berhenti dijalankan. Jika fungsidipanggil dari sebuah pernyataan, JavaScript akan "kembali" untuk mengeksekusi kodesetelah pernyataan yang memanggil. Fungsi sering menghitung nilai kembali. Nilaikembalian "dikembalikan" kembali ke "pemanggil":

Contoh :<!DOCTYPE html><html><body><h2>JavaScript Functions</h2><p>Contoh ini memanggil fungsi yang melakukan perhitungan dan mengembalikanhasilnya:</p><p id="demo"></p><script>function myFunction(a, b) {

return a * b;}document.getElementById("demo").innerHTML = myFunction(4, 3);</script></body></html>

Dengan fungsi Anda dapat menggunakan kembali kode: Tentukan kode sekali, dan gunakanberkali-kali. Anda bisa menggunakan kode yang sama berkali-kali dengan argumen yangberbeda, untuk menghasilkan hasil yang berbeda.Contoh 1 :<!DOCTYPE html><html><body><h2>JavaScript Functions</h2><p>Contoh ini memanggil fungsi untuk mengkonversi dari Fahrenheit ke Celsius:</p><p id="demo"></p><script>function toCelsius(f) {

return (5/9) * (f-32);}document.getElementById("demo").innerHTML = toCelsius(77);</script></body></html>

Contoh 2 :<!DOCTYPE html><html><body><h2>JavaScript Functions</h2>

Page 7: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<p>Mengakses fungsi tanpa () akan mengembalikan definisi fungsi alih-alih hasilfungsinya:</p><p id="demo"></p><script>function toCelsius(f) {

return (5/9) * (f-32);}document.getElementById("demo").innerHTML = toCelsius;</script></body></html>

Fungsi yang Digunakan sebagai Nilai Variabel , Fungsi dapat digunakan dengan cara yangsama seperti Anda menggunakan variabel, dalam semua jenis rumus, tugas, danperhitungan. Anda dapat menggunakan fungsi secara langsung, sebagai nilai variabel:Contoh :<!DOCTYPE html><html><body><p id="demo"></p><script>document.getElementById("demo").innerHTML ="The temperature is " + toCelsius(77) + " Celsius";

function toCelsius(fahrenheit) {return (5/9) * (fahrenheit-32);

}</script></body></html>

LATIHAN

1. Panggil fungsinya<!DOCTYPE html><html><body><p id="demo"></p><script>function myFunction() {

document.getElementById("demo").innerHTML = "Hello World!";}// Call the function here</script></body></html>

Page 8: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

2. Cari tahu apa yang salah dengan fungsinya - perbaiki dan jalankan sepertiseharusnya!<!DOCTYPE html><html><body><p id="demo"></p><script>func myFunc {

document.getElementById("demo").innerHTML = "Hello World!";}myFunction();</script></body></html>

3. Gunakan fungsi untuk menampilkan produk 5 * 5.<!DOCTYPE html><html><body><p id="demo"></p><script>function myFunction() {

// Add code here}document.getElementById("demo").innerHTML = myFunction();</script></body></html>

4. Gunakan fungsi untuk menampilkan "Hello John".<!DOCTYPE html><html><body><p id="demo">Display the result here.</p><script>function myFunction(name) {

return "Hello " + name;}</script></body></html>

5. Tentukan fungsi bernama "myFunction", dan buatlah display "Hello World!" Dielemen <p>.<!DOCTYPE html><html><body><p id="demo">Display the result here.</p><script>// Define and call the function here

Page 9: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

</script></body></html>

Menempatkan skrip di bagian bawah elemen <body> meningkatkan kecepatan tampilan,karena kompilasi skrip memperlambat tampilan. JavaScript eksternal Script juga bisaditempatkan di file eksternal: Berkas eksternal: myScript.jsContoh :function myFunction() {

document.getElementById("demo").innerHTML = "Paragraph changed.";}Script eksternal praktis bila kode yang sama digunakan di banyak halaman web yangberbeda.

File JavaScript memiliki ekstensi file .js.

Untuk menggunakan skrip eksternal, letakkan nama file skrip di atribut src (sumber) tag<script>:Contoh :<!DOCTYPE html><html><body><h2>External JavaScript</h2><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button><p>(myFunction is stored in an external file called "myScript.js")</p><script src="myScript.js"></script></body></html>

Keunggulan JavaScript EksternalMenempatkan skrip pada file eksternal memiliki beberapa kelebihan:

Ini memisahkan HTML dan kode, Itu membuat HTML dan JavaScript lebih mudah dibacadan dipelihara, File cache dalam cache dapat mempercepat beban halaman. Untukmenambahkan beberapa file skrip ke satu halaman - gunakan beberapa tag skrip: ReferensiEksternal. Skrip eksternal dapat dirujuk dengan URL lengkap atau dengan path relatif kehalaman web saat ini.

Contoh ini menggunakan URL lengkap untuk menautkan ke skrip:Contoh :<!DOCTYPE html><html><body><h2>External JavaScript</h2><p id="demo">A Paragraph.</p><button type="button" onclick="myFunction()">Try it</button><p>(myFunction is stored in an external file called "myScript.js")</p>

Page 10: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<script src="https://www.w3schools.com/js/myScript.js"></script></body></html>

JavaScript dapat "menampilkan" data dengan berbagai cara:

Menulis ke elemen HTML, menggunakan innerHTML.Menulis ke dalam output HTML menggunakan document.write ().Menulis ke kotak peringatan, menggunakan window.alert ().Menulis ke konsol browser, menggunakan console.log ().

Menggunakan innerHTMLUntuk mengakses elemen HTML, JavaScript dapat menggunakan metodedocument.getElementById (id). Atribut id mendefinisikan elemen HTML. PropertiinnerHTML mendefinisikan konten HTML:Contoh :<!DOCTYPE html><html><body><h2>My First Web Page</h2><p>My First Paragraph.</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 5 + 6;</script></body></html>

Mengubah properti innerHTML dari elemen HTML adalah cara yang umum untukmenampilkan data dalam HTML Menggunakan document.write (). Untuk tujuan pengujian,lebih mudah menggunakan document.write ():Contoh :<!DOCTYPE html><html><body><h2>My First Web Page</h2><p>My first paragraph.</p><script>document.write(5 + 6);</script></body></html>

Menggunakan window.alert ()Anda dapat menggunakan kotak peringatan untuk menampilkan data:Contoh :<!DOCTYPE html>

Page 11: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<html><body><h2>My First Web Page</h2><p>My first paragraph.</p><script>window.alert(5 + 6);</script></body></html>

Sintaks JavaScript adalah seperangkat aturan, bagaimana program JavaScript dibuat.Program komputer adalah daftar "instruksi" untuk "dieksekusi" oleh komputer. Dalambahasa pemrograman, instruksi program ini disebut pernyataan. JavaScript adalah bahasapemrograman. Pernyataan JavaScript dipisahkan oleh titik koma:Contoh :<!DOCTYPE html><html><body><h2>JavaScript Statements</h2><p>Pernyataan dipisahkan dengan titik koma.</p><p>Variabel x, y, dan z diberi nilai 5, 6, dan 11.</p><p>Kemudian nilai z ditampilkan pada paragraf di bawah ini:</p><p id="demo"></p>

<script>var x, y, z;x = 5;y = 6;z = x + y;document.getElementById("demo").innerHTML = z;</script></body></html>

Variabel JavaScript

Dalam bahasa pemrograman, variabel digunakan untuk menyimpan nilai data.JavaScriptmenggunakan kata kunci var untuk mendeklarasikan variabel. Tanda sama digunakan untukmenetapkan nilai pada variabel. Dalam contoh ini, x didefinisikan sebagai variabel.Kemudian, x ditugaskan (diberikan) nilai 6:Contoh :<!DOCTYPE html><html><body><h2>JavaScript Variables</h2><p>Dalam contoh ini, x didefinisikan sebagai variabel.

Page 12: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Kemudian, x diberi nilai 6:</p><p id="demo"></p>

<script>var x;x = 6;document.getElementById("demo").innerHTML = x;</script></body></html>

Satu Pernyataan, Banyak VariabelAnda bisa mendeklarasikan banyak variabel dalam satu pernyataan. Mulai pernyataandengan var dan pisahkan variabel dengan koma:Contoh :<!DOCTYPE html><html><body><h2>JavaScript Variables</h2><p>You can declare many variables in one statement.</p><p id="demo"></p>

<script>var person = "John Doe", carName = "Volvo", price = 200;document.getElementById("demo").innerHTML = carName;</script></body></html>

LATIHAN1. Buat variabel dengan nama carName, tetapkan nilai "Volvo" ke dalamnya, dan

tampilkan itu.<!DOCTYPE html><html><body><p id="demo">Display the result here.</p><script>// Create the variable here</script></body></html>

2. Kode di bawah ini akan menampilkan "Volvo" - Perbaiki.<!DOCTYPE html><html><body><p id="demo">Display the result here.</p><script>

Page 13: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

var carName = "Volvo";document.getElementById("demo").innerHTML = carname;</script></body></html>

3. Buat variabel ketiga yang disebut z, tetapkan x + y ke dalamnya, dan tampilkan.<!DOCTYPE html><html><body><p id="demo">Display the result here.</p><script>var x = 5;var y = 10;</script></body></html>

4. Gunakan kata kunci var tunggal untuk membuat tiga variabel dengan nilai berikut:FirstName = "diana"LastName = "wati"Umur = 20<!DOCTYPE html><html><body><p id="demo">Display the result here.</p><script>// Create the variables heredocument.getElementById("demo").innerHTML =firstName + " " + lastName + " is " + age;</script></body></html>

Operator JavaScriptOperator aritmatika digunakan untuk melakukan aritmatika pada bilangan:

Operator Description

+ Addition

- Subtraction

* Multiplication

/ Division

% Modulus

++ Increment

Page 14: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Operator Description

-- Decrement

JavaScript menggunakan operator aritmatika (+ - * /) untuk menghitung nilai:Contoh :<!DOCTYPE html><html><body><h2>JavaScript Operators</h2><p>JavaScript menggunakan operator aritmatika untuk menghitung nilai (sepertialjabar).</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = (5 + 6) * 10;</script></body></html>

JavaScript menggunakan operator penugasan (=) untuk menetapkan nilai pada variabel:

Operator Example Same As

= x = y x = y

+= x += y x = x + y

-= x -= y x = x - y

*= x *= y x = x * y

/= x /= y x = x / y

%= x %= y x = x % y

Contoh :<!DOCTYPE html><html><body><h2>Assigning JavaScript Values</h2><p>Dalam JavaScript, = operator digunakan untuk menetapkan nilai ke variabel.</p><p id="demo"></p><script>var x, y;x = 5;y = 6;document.getElementById("demo").innerHTML = x + y;</script>

Page 15: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

</body></html>

Penambahan operator penugasan (+ =) menambahkan nilai pada variabel.Contoh :<!DOCTYPE html><html><body><h2>The += Operator</h2><p id="demo"></p>

<script>var x = 10;x += 5;document.getElementById("demo").innerHTML = x;</script></body></html>

Operator + juga bisa digunakan untuk menambahkan (menggabungkan) string.Contoh :<!DOCTYPE html><html><body><h2>JavaScript Operators</h2><p>Operator + menggabungkan (menambahkan) string.</p><p id="demo"></p>

<script>var txt1 = "John";var txt2 = "Doe";document.getElementById("demo").innerHTML = txt1 + " " + txt2;</script></body></html>

LATIHAN1. Gunakan + = operator untuk menambahkan nilai 5 ke variabel x.

<!DOCTYPE html><html><body><p id="demo"></p><script>var x = 10;// add code heredocument.getElementById("demo").innerHTML = x;</script>

Page 16: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

</body></html>

2. Gunakan% = operator untuk menetapkan sisa 10/3 ke variabel x.<!DOCTYPE html><html><body><p id="demo"></p><script>var x = 10;// add code heredocument.getElementById("demo").innerHTML = x;</script></body></html>

Menambahkan String dan BilanganMenambahkan dua angka, akan mengembalikan jumlah tersebut, namun menambahkanangka dan string akan mengembalikan sebuah string:Contoh :<!DOCTYPE html><html><body>

<h2>JavaScript Operators</h2><p>Menambahkan nomor dan string, mengembalikan sebuah string.</p><p id="demo"></p>

<script>var x = 5 + 5;var y = "5" + 5;var z = "Hello" + 5;document.getElementById("demo").innerHTML =x + "<br>" + y + "<br>" + z;</script></body></html>

OPERATOROperator Perbandingan JavaScript

Operator Description

== equal to

=== equal value and equal type

!= not equal

!== not equal value or not equal type

Page 17: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Operator Description

> greater than

< less than

>= greater than or equal to

<= less than or equal to

? ternary operator

JavaScript Logical OperatorOperator Description

&& logical and

|| logical or

! logical not

LATIHAN1. Tampilkan jumlah = 10 + 5, dengan menggunakan dua variabel x dan y.

<!DOCTYPE html><html><body><p id="demo">Display the result here.</p><script>var x;var y;</script></body></html>

2. Temukan sisanya ketika 15 dibagi dengan 9, dengan menggunakan dua variabel xdan y<!DOCTYPE html><html><body><p id="demo">Display the result here.</p><script>var x;var y;</script></body></html>

Page 18: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Komentar JavaScript

Tidak semua pernyataan JavaScript "dieksekusi". Kode setelah garis miring ganda // atauantara / * dan * / untuk multi linediperlakukan sebagai komentar. Komentar JavaScriptdapat digunakan untuk menjelaskan kode JavaScript, dan membuatnya lebih mudah dibaca.Komentar JavaScript juga bisa digunakan untuk mencegah eksekusi, saat menguji kodealternatif. Komentar Baris tunggal Komentar baris tunggal dimulai dengan //. Setiap teksantara // dan akhir baris akan diabaikan oleh JavaScript (tidak akan dieksekusi). Komentardiabaikan, dan tidak akan dieksekusi:

Contoh :<!DOCTYPE html><html><body><h2>JavaScript Comments are NOT Executed</h2><p id="demo"></p>

<script>var x;x = 5;// x = 6; I will not be executeddocument.getElementById("demo").innerHTML = x;</script></body></html>

JavaScript Case Sensitif. Semua pengidentifikasi JavaScript peka terhadap huruf besar.Variabel Last Name dan last name, adalah dua variabel yang berbeda.Contoh :<!DOCTYPE html><html><body><h2>JavaScript is Case Sensitive</h2><p>Try change lastName to lastname.</p><p id="demo"></p>

<script>var lastname, lastName;lastName = "Doe";lastname = "Peterson";document.getElementById("demo").innerHTML = lastName;</script></body></html>

Page 19: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Sebagian besar program JavaScript berisi banyak pernyataan JavaScript. Pernyataandijalankan, satu per satu, sesuai urutan penulisannya. Dalam contoh ini x, y, dan z diberinilai, dan akhirnya z ditampilkan:Contoh 1:<!DOCTYPE html><html><body><h2>JavaScript Statements</h2><p>Kode JavaScript (atau hanya JavaScript) adalah urutan pernyataan JavaScript.</p><p id="demo"></p>

<script>var x, y, z;x = 5;y = 6;z = x + y;document.getElementById("demo").innerHTML = z;</script></body></html>

Semicolons ;

Semikolon memisahkan pernyataan JavaScript. Gunakan titik koma di akhir setiappernyataan yang dapat dieksekusi :Contoh :<!DOCTYPE html><html><body><h2>JavaScript Statements</h2><p>JavaScript statements are separated by semicolons.</p><p id="demo1"></p><script>var a, b, c;a = 1;b = 2;c = a + b;document.getElementById("demo1").innerHTML = c;</script></body></html>

Bila dipisahkan oleh titik koma, beberapa pernyataan pada satu baris diperbolehkan:

<!DOCTYPE html><html><body>

Page 20: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<h2>JavaScript Statements</h2><p>Multiple statements on one line is allowed.</p><p id="demo1"></p>

<script>var a, b, c;a = 1; b = 2; c = a + b;document.getElementById("demo1").innerHTML = c;</script></body></html>

Jenis Data JavaScript (TIPE DATA)Variabel JavaScript dapat menyimpan banyak tipe data: angka, string, objek dan banyak lagi:var length = 16; // Numbervar lastName = "Johnson"; // Stringvar x = {firstName:"John", lastName:"Doe"}; // Object

Konsep Tipe DataDalam pemrograman, tipe data merupakan konsep penting. Agar dapat beroperasi padavariabel, penting untuk mengetahui sesuatu tentang jenisnya. Tanpa tipe data, komputertidak bisa menyelesaikannya dengan aman:

var x = 16 + "Volvo"; jadi kebaca var x = "16" + "Volvo";Saat menambahkan angka dan string, JavaScript akan memperlakukan nomor itu sebagaistring.

Contoh :<!DOCTYPE html><html><body><p>When adding a number and a string, JavaScript will treat the number as a string.</p><p id="demo"></p>

<script>var x = 16 + "Volvo";document.getElementById("demo").innerHTML = x;</script></body></html>

JavaScript mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda dapatmenghasilkan hasil yang berbeda:Contoh1 :<!DOCTYPE html><html><body>

Page 21: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<p id="demo"></p>

<script>var x = 16 + 4 + "Volvo";document.getElementById("demo").innerHTML = x;</script></body></html>

Contoh 2:<!DOCTYPE html><html><body><p id="demo"></p>

<script>var x = "Volvo" + 16 + 4;document.getElementById("demo").innerHTML = x;</script></body></html>

Pada contoh pertama, JavaScript memperlakukan 16 dan 4 sebagai angka, sampai mencapai"Volvo". Pada contoh kedua, karena operan pertama adalah string, semua operandiperlakukan sebagai string.

Jenis JavaScript Dinamis.JavaScript memiliki tipe dinamis. Ini berarti bahwa variabel yang sama dapat digunakanuntuk menyimpan tipe data yang berbeda:Contoh :Var x; // Sekarang x tidak terdefinisiVar x = 5; // Sekarang x adalah sebuah nomorVar x = "john"; // Sekarang x adalah sebuah String

String JavaScriptString (atau string teks) adalah serangkaian karakter seperti "John Doe". String ditulisdengan tanda petik. Anda bisa menggunakan tanda kutip tunggal atau ganda: Contoh varvarName = "Volvo XC60"; // Menggunakan tanda kutip ganda svar varName = 'Volvo XC60';// Menggunakan tanda kutip tunggal

Contoh :<!DOCTYPE html><html><body><p id="demo"></p>

<script>

Page 22: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

var carName1 = "Volvo XC60";var carName2 = 'Volvo XC60';var answer1 = "It's alright";var answer2 = "He is called 'Johnny'";var answer3 = 'He is called "Johnny"';

document.getElementById("demo").innerHTML =carName1 + "<br>" +carName2 + "<br>" +answer1 + "<br>" +answer2 + "<br>" +answer3;</script></body></html>

Nomor (number) JavaScriptJavaScript hanya memiliki satu jenis angka. Angka dapat ditulis dengan, atau tanpa desimal:Contoh :<!DOCTYPE html><html><body><p id="demo"></p>

<script>var x1 = 34.00;var x2 = 34;var y = 123e5;var z = 123e-5;

document.getElementById("demo").innerHTML = x1 + "<br>" + x2 + "<br>" + y + "<br>" + z</script></body></html>

JavaScript BooleansBoolean hanya bisa memiliki dua nilai: benar atau salah.

Examplevar x = true;var y = false;

Boolean sering digunakan dalam pengujian bersyarat.

Array JavaScriptArray JavaScript ditulis dengan tanda kurung siku. Item array dipisahkan dengan koma.Kode berikut menyatakan (membuat) sebuah array yang disebut mobil, berisi tiga item(nama mobil):

Page 23: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Contoh :<!DOCTYPE html><html><body><p id="demo"></p>

<script>var cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];</script></body></html>

Objek JavaScriptObjek JavaScript ditulis dengan kurung kurawal. Properti objek ditulis sebagai nama:pasangan nilai, dipisahkan dengan tanda koma. Anda telah mengetahui bahwa variabelJavaScript adalah kontainer untuk nilai data. Kode ini memberikan nilai sederhana (Fiat) kevariabel bernama mobil:Contoh :<!DOCTYPE html><html><body><p>Membuat Variabel JavaScript.</p>

<p id="demo"></p>

<script>var car = "Fiat";document.getElementById("demo").innerHTML = car;</script></body></html>

Objek juga variabel. Tapi objek bisa mengandung banyak nilai. Kode ini memberikan banyaknilai (Fiat, 500, putih) ke variabel bernama mobil:Contoh :<!DOCTYPE html><html><body><p>Creating a JavaScript Object.</p><p id="demo"></p>

<script>var car = {type:"Fiat", model:"500", color:"white"};document.getElementById("demo").innerHTML = car.color;</script>

Page 24: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

</body></html>

Nilai ditulis sebagai nama: nilai pasangan (nama dan nilai dipisahkan oleh titik dua). ObjekJavaScript adalah kontainer untuk nilai yang dinamai.

Properti ObjekNama: nilai pasangan (dalam objek JavaScript) disebut properti.Contoh :<!DOCTYPE html><html><body><p id="demo"></p>

<script>var person = {

firstName : "John",lastName : "Doe",age : 50,eyeColor : "blue"

};

document.getElementById("demo").innerHTML =person.firstName + " is " + person.age + " years old.";</script></body></html>

Objek (orang) pada contoh di atas memiliki 4 properti: firstName, lastName, age, dan eyecolor.

Mengakses Properti ObjekAnda dapat mengakses properti objek dengan dua cara:

objectName.propertyName

or

objectName["propertyName"]

Contoh 1 :<!DOCTYPE html><html><body><p> Ada dua cara berbeda untuk mengakses properti objek: </p><p>Anda bisa menggunakan person.property atau person ["property"].</p>

Page 25: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<p id="demo"></p>

<script>var person = {

firstName: "John",lastName : "Doe",id : 5566

};document.getElementById("demo").innerHTML =person.firstName + " " + person.lastName;</script></body></html>

Contoh 2 :<!DOCTYPE html><html><body><p> There are two different ways to access an object property: </p><p>You can use person.property or person["property"].</p><p id="demo"></p>

<script>var person = {

firstName: "John",lastName : "Doe",id : 5566

};document.getElementById("demo").innerHTML =person["firstName"] + " " + person["lastName"];</script></body></html>

Mengakses Metode ObjekAnda mengakses metode objek dengan sintaks berikut:

objectName.methodName()

Contoh :<!DOCTYPE html><html><body><p>Creating and using an object method.</p><p>An object method is a function definition, stored as a property value.</p><p id="demo"></p>

Page 26: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<script>var person = {

firstName: "John",lastName : "Doe",id : 5566,fullName : function() {

return this.firstName + " " + this.lastName;}

};

document.getElementById("demo").innerHTML = person.fullName();</script></body></html>

Jika Anda mengakses metode Nama Lengkap, tanpa (), itu akan mengembalikan definisifungsi, Sebuah metode sebenarnya adalah definisi fungsi yang disimpan sebagai nilaiproperti:

Contoh :<!DOCTYPE html><html><body><p>Metode objek adalah definisi fungsi, disimpan sebagai nilai properti.</p><p>Jika Anda mengaksesnya tanpa (), itu akan mengembalikan definisi fungsi:</p><p id="demo"></p>

<script>var person = {

firstName: "John",lastName : "Doe",id : 5566,fullName : function() {

return this.firstName + " " + this.lastName;}

};

document.getElementById("demo").innerHTML = person.fullName;</script></body></html>

LATIHAN :1. Tampilkan "John" dengan mengekstrak informasi dari objek orang tersebut.

<!DOCTYPE html><html><body>

Page 27: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<p id="demo">Display the result here.</p>

<script>var person = {firstName:"John", lastName:"Doe"};</script></body></html>

2. Tambahkan properti dan nilai berikut ke objek orang tersebut: negara: AmerikaSerikat<!DOCTYPE html><html><body><p id="demo"></p>

<script>var person = {firstName:"John", lastName:"Doe"};document.getElementById("demo").innerHTML = person.country;</script></body></html>

3. Buat objek yang disebut orang dengan nama = John, umur = 50.Kemudian, akses objek untuk menampilkan "John berusia 50 tahun".<!DOCTYPE html><html><body><p id="demo">Display the result here.</p>

<script>// Create the object here</script></body></html>

Cakupan JavaScript (Scope)Lingkup adalah himpunan variabel yang dapat Anda akses. Dalam JavaScript, ruang lingkupadalah himpunan variabel, objek, dan fungsi yang dapat Anda akses. Variabel dinyatakandalam fungsi JavaScript, menjadi LOCAL. Variabel lokal memiliki cakupan lokal: Merekahanya dapat diakses dalam fungsi.Contoh :<!DOCTYPE html><html><body><p>Variabel lokal carName tidak bisa diakses dari kode diluar fungsi:</p><p id="demo"></p>

<script>myFunction();

Page 28: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

document.getElementById("demo").innerHTML ="The type of carName is " + typeof carName;

function myFunction() {var carName = "Volvo";

}</script></body></html>

Karena variabel lokal hanya dikenali di dalam fungsinya, variabel dengan nama yang samadapat digunakan dalam fungsi yang berbeda.Variabel lokal dibuat saat fungsi dimulai, dandihapus saat fungsi selesai. Variabel yang dinyatakan di luar fungsi, menjadiGLOBAL.Variabel global memiliki cakupan global: Semua skrip dan fungsi pada halaman webdapat mengaksesnya.Contoh :<!DOCTYPE html><html><body><p>Sebuah variabel GLOBAL dapat diakses dari script atau fungsi apapun.</p><p id="demo"></p>

<script>var carName = "Volvo";myFunction();

function myFunction() {document.getElementById("demo").innerHTML ="I can display " + carName;

}</script></body></html>

Jika Anda menetapkan nilai pada variabel yang belum diumumkan, maka secara otomatisakan menjadi variabel GLOBAL.

Contoh kode ini akan mendeklarasikan variabel global carName, walaupun nilainyadiberikan di dalam sebuah fungsi.<!DOCTYPE html><html><body><p>Jika Anda menetapkan nilai pada variabel yang belum diumumkan,Maka secara otomatis akan menjadi variabel GLOBAL:</p>

Page 29: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

<p id="demo"></p>

<script>myFunction();// code here can use carName as a global variabledocument.getElementById("demo").innerHTML = "I can display " + carName;

function myFunction() {carName = "Volvo";

}</script></body></html>

Event Java scriptevent HTML adalah "hal-hal" yang terjadi pada elemen HTML. Saat JavaScript digunakan dihalaman HTML, JavaScript dapat "bereaksi" terhadap kejadian ini. event HTML bisa jadisesuatu yang dilakukan browser, atau sesuatu yang dilakukan pengguna, Berikut adalahbeberapa contoh event HTML:

Laman web HTML telah selesai dimuatBidang masukan HTML telah diubahSebuah tombol HTML diklik

Seringkali, saat kejadian terjadi, Anda mungkin ingin melakukan sesuatu. JavaScriptmemungkinkan Anda menjalankan kode saat kejadian terdeteksi. HTML memungkinkanatribut event handler, dengan kode JavaScript, untuk ditambahkan ke elemen HTML. Dalamcontoh berikut, atribut onclick (dengan kode), ditambahkan ke elemen tombol:Contoh :<!DOCTYPE html><html><body><button onclick="document.getElementById('demo').innerHTML=Date()">The timeis?</button><p id="demo"></p></body></html>

Pada contoh di atas, kode JavaScript akan mengubah isi elemen dengan id = "demo". Padacontoh berikut, kode akan mengubah isi elemennya sendiri (menggunakan this.innerHTML):

<!DOCTYPE html><html><body><button onclick="this.innerHTML=Date()">The time is?</button></body></html>

Page 30: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Kode JavaScript seringkali beberapa barisnya panjang. Lebih umum melihat atribut dengancara memanggil fungsi:Contoh :<!DOCTYPE html><html><body><p>Click the button to display the date.</p><button onclick="displayDate()">The time is?</button>

<script>function displayDate() {

document.getElementById("demo").innerHTML = Date();}</script><p id="demo"></p></body></html>

Berikut adalah daftar beberapa event HTML yang umum:Event Description

onchange An HTML element has been changed

onclick The user clicks an HTML element

onmouseover The user moves the mouse over an HTML element

onmouseout The user moves the mouse away from an HTML element

onkeydown The user pushes a keyboard key

onload The browser has finished loading the page

LATIHAN1. Saat tombol diklik, trigger Function () dengan sebuah event.

<!DOCTYPE html><html><body><button>Click Me</button><p id="demo"></p>

<script>function myFunction() {

document.getElementById("demo").innerHTML = "Hello World";}</script></body></html>

Page 31: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

2. Elemen <span> harus melakukan sesuatu saat seseorang mengarahkan mouse keatasnya. Cobalah untuk memperbaikinya<!DOCTYPE html><html><body><span someevent="this.style.color='red'">Mouse over me!</span></body></html>

DOM HTML (Document Object Model)Saat halaman web dimuat, browser membuat Document Object Model halaman. ModelHTML DOM dibangun sebagai pohon Objek:

Dengan model objek, JavaScript mendapatkan semua kekuatan yang dibutuhkan untukmembuat HTML dinamis:

JavaScript dapat mengubah semua elemen HTML di halamanJavaScript dapat mengubah semua atribut HTML di halamanJavaScript dapat mengubah semua gaya CSS di halamanJavaScript dapat menghapus elemen dan atribut HTML yang adaJavaScript dapat menambahkan elemen HTML dan atribut baruJavaScript dapat bereaksi terhadap semua aktivitas HTML yang ada di halamanJavaScript dapat membuat acara HTML baru di halaman

Apa itu HTML DOM?DOM HTML adalah model objek standar dan antarmuka pemrograman untuk HTML. Inimendefinisikan:

Elemen HTML sebagai objekProperti semua elemen HTMLMetode untuk mengakses semua elemen HTMLAcara untuk semua elemen HTML

Page 32: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Dengan kata lain: DOM HTML adalah standar untuk mendapatkan, mengubah, menambah,atau menghapus elemen HTML. Metode HTML DOM adalah tindakan yang dapat Andalakukan (pada Elemen HTML). Properti HTML DOM adalah nilai (dari Elemen HTML) yangdapat Anda setel atau ubah.

Antarmuka Pemrograman DOMDOM HTML dapat diakses dengan JavaScript (dan dengan bahasa pemrograman lainnya).Di DOM, semua elemen HTML didefinisikan sebagai objek.Antarmuka pemrograman adalahsifat dan metode masing-masing objek. Properti adalah nilai yang bisa Anda dapatkan atautetapkan (seperti mengubah konten elemen HTML). Metode adalah tindakan yang dapatAnda lakukan (seperti menambahkan atau menghapus elemen HTML).

Contoh berikut mengubah konten (innerHTML) elemen <p> dengan id = "demo":

<!DOCTYPE html><html><body><h2>My First Page</h2><p id="demo"></p>

<script>document.getElementById("demo").innerHTML = "Hello World!";</script></body></html>

Pada contoh di atas, getElementById adalah sebuah metode, sedangkan innerHTML adalahsebuah properti.

Metode GetElementByIdCara yang paling umum untuk mengakses elemen HTML adalah dengan menggunakan idelemen. Pada contoh di atas, metode getElementById menggunakan id = "demo" untukmenemukan elemennya.

Properti innerHTMLCara termudah untuk mendapatkan konten sebuah elemen adalah dengan menggunakaninnerHTML properti. Properti innerHTML berguna untuk mendapatkan atau menggantikonten elemen HTML. Properti innerHTML dapat digunakan untuk mendapatkan ataumengubah elemen HTML, termasuk <html> dan <body>. Objek dokumen HTML DOM adalahpemilik semua objek lain di halaman web Anda.

Objek Dokumen DOM HTMLObjek dokumen mewakili halaman web Anda. Jika Anda ingin mengakses elemen apapun dihalaman HTML, Anda selalu mulai dengan mengakses objek dokumen. Berikut adalahbeberapa contoh bagaimana Anda dapat menggunakan objek dokumen untuk mengaksesdan memanipulasi HTML.

Page 33: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Menemukan Elemen HTMLMethod Description

document.getElementById(id) Find an element by element id

document.getElementsByTagName(name) Find elements by tag name

document.getElementsByClassName(name) Find elements by class name

Mengubah Unsur HTMLMethod Description

element.innerHTML = new html content Change the inner HTML of an element

element.attribute = new value Change the attribute value of an HTMLelement

element.setAttribute(attribute, value) Change the attribute value of an HTMLelement

element.style.property = new style Change the style of an HTML element

Menambahkan dan Menghapus UnsurMethod Description

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(element) Replace an HTML element

document.write(text) Write into the HTML output stream

Menambahkan Adding Events HandlersMethod Description

document.getElementById(id).onclick =function(){code}

Adding event handler code to an onclickevent

HTML pertama DOM Level 1 (1998), mendefinisikan 11 objek HTML, koleksi objek, danproperti. Ini masih berlaku di HTML5. Kemudian, di HTML DOM Level 3, lebih banyak objek,koleksi, dan properti ditambahkan.Property Description DOM

document.anchors Returns all <a> elements 1

Page 34: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Property Description DOM

that have a name attribute

document.appletsReturns all <applet>elements (Deprecated inHTML5)

1

document.baseURI Returns the absolute baseURI of the document 3

document.body Returns the <body> element 1

document.cookie Returns the document'scookie 1

document.doctype Returns the document'sdoctype 3

document.documentElement Returns the <html> element 3

document.documentMode Returns the mode used bythe browser 3

document.documentURI Returns the URI of thedocument 3

document.domain Returns the domain name ofthe document server 1

document.domConfig Obsolete. Returns the DOMconfiguration 3

document.embeds Returns all <embed>elements 3

document.forms Returns all <form> elements 1

document.head Returns the <head> element 3

document.images Returns all <img> elements 1

document.implementation Returns the DOMimplementation 3

document.inputEncoding Returns the document'sencoding (character set) 3

document.lastModified Returns the date and timethe document was updated 3

document.links Returns all <area> and <a> 1

Page 35: MODUL 4 JAVA SCRIPT Sub : PENGENALANstaffsite.stimata.ac.id/assets/uploads/files/download/59653-modul... · 4.4. Prosedure Praktikum 1. ... .

Praktikum Pemrograman Berbasis Web

[email protected]

Property Description DOM

elements that have a hrefattribute

document.readyState Returns the (loading) statusof the document 3

document.referrerReturns the URI of thereferrer (the linkingdocument)

1

document.scripts Returns all <script> elements 3

document.strictErrorChecking Returns if error checking isenforced 3

document.title Returns the <title> element 1

document.URL Returns the complete URL ofthe document 1