MODUL 4 JAVA SCRIPT. Sub : PENGENALAN

Praktikum Pemrograman Berbasis Web

MODUL 4

JAVA SCRIPT Sub : PENGENALAN

Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang

[email protected]


Pertemuan 4 4.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah – perintah jAVAsCRIPT 2. Mahasiswa dapat mengoperasikan struktur Java Script 3. Mahasiswa dapat memakai variable, tipe data dan operator pada java script 4.2 Materi : 1. Pengenalan Java Script 2. Dasar – dasar Java Script 3. Fungsi 4. Variabel 5. Event 4.3 Alat Bantu 1. Notepad ++ 2. Page, Image 4.4. Prosedure Praktikum 1. Peserta membaca dan memperlajari materi praktkum sebelumnya 2. Instruktur menerangkan dan menjelaskan teori dan cara kerja 3. Peserta mempraktikkan materi percobaan 4. Peserta membuat penyelesaian terhadap soal latihan, tugas dan berhak mendapatkan nilai praktikum harian 4.5 Teori A. Apa Itu Javascript Javascript adalah bahasa script yang biasa jalan di browser, orang-orang biasa bilang client side programming. Client di sini adalah browser, seperti: Internet Explorer, Firefox, Safari dan sebagainya. Kode javascript biasanya disisipkan diantara kode-kode HTML. Di mana saya bisa menulis kode javascript? Anda bisa menulis kode javascript di teks editor seperti notepad dan sebagainya. Apakah saya butuh compiler untuk menjalankan javascript? Tidak perlu, anda cukup menjalankan javascript menggunakan browser. Semua browser mempunyai engine yang menginterpretasikan kode javascript kita. JavaScript adalah salah satu dari 3 bahasa yang harus dipelajari oleh semua pengembang web: 1. HTML untuk mendefinisikan isi halaman web 2. CSS untuk menentukan tata letak halaman web 3. JavaScript untuk memprogram perilaku halaman web JavaScript lama dapat menggunakan atribut tipe: <script type = "text / javascript">. Atribut jenis tidak diperlukan. JavaScript adalah bahasa scripting default dalam HTML. Tutorial ini adalah tentang JavaScript, dan bagaimana JavaScript bekerja dengan HTML dan CSS. JavaScript Dapat Mengubah Konten HTML Salah satu dari banyak metode JavaScript HTML adalah getElementById (). Contoh ini menggunakan metode untuk "menemukan" elemen HTML (dengan id = "demo") dan mengubah konten elemen (innerHTML) menjadi "Halo JavaScript":

[email protected]


Contoh :
What Can JavaScript Do?

JavaScript can change HTML content.
JavaScript Dapat Mengubah Atribut HTML Contoh ini mengubah gambar HTML dengan mengubah atribut src (source) tag : Contoh :

JavaScript can change HTML attributes.

In this case JavaScript changes the src (source) attribute of an image.
JavaScript Dapat Mengubah Gaya HTML (CSS) Mengubah gaya elemen HTML, adalah varian dari perubahan atribut HTML: Contoh

JavaScript can change the style of an HTML element.
JavaScript dapat menyembunyikan elemen HTML Menyembunyikan elemen HTML bisa dilakukan dengan mengubah tampilan style: Contoh:

[email protected]



JavaScript can hide HTML elements.
Click Me! JavaScript dapat menampilkan elemen HTML Menampilkan elemen HTML yang tersembunyi juga bisa dilakukan dengan mengubah tampilan style: Contoh :

JavaScript can show hidden HTML elements.

Hello JavaScript!
Dalam HTML, kode JavaScript harus disisipkan di antara tag <script> dan . Contoh :
JavaScript in Body

<script> document.getElementById("demo").innerHTML = "My First JavaScript"; Fungsi dan Event JavaScript Fungsi JavaScript adalah blok kode JavaScript, yang dapat dijalankan saat "dipanggil". Misalnya, sebuah fungsi dapat dipanggil saat sebuah peristiwa terjadi, seperti saat pengguna mengeklik tombol. Skrip dapat ditempatkan di bagian , atau di bagian dari halaman HTML, atau keduanya. JavaScript di Dalam contoh ini, fungsi JavaScript ditempatkan di bagian pada halaman HTML. Fungsi dipanggil (disebut) saat tombol diklik: Contoh : <script>

[email protected]


function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; }
JavaScript in Head

A Paragraph.
JavaScript di Dalam contoh ini, fungsi JavaScript ditempatkan di bagian dari halaman HTML. Fungsi dipanggil (disebut) saat tombol diklik: Contoh :
JavaScript in Body

A Paragraph.
<script> function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } Fungsi JavaScript didefinisikan dengan kata kunci fungsi, diikuti dengan nama, diikuti tanda kurung (). Nama fungsi dapat berisi huruf, angka, garis bawah, dan tanda dolar (aturan yang sama dengan variabel). Tanda kurung dapat mencakup nama parameter yang dipisahkan dengan koma, Kode yang akan dieksekusi, oleh fungsinya, ditempatkan di dalam kurung kurawal: {} function name(parameter1, parameter2, parameter3) { code to be executed } Parameter fungsi adalah nama yang tercantum dalam definisi fungsi. Argumen fungsi adalah 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.

[email protected]


Fungsi Return Saat JavaScript mencapai pernyataan kembali, fungsi akan berhenti dijalankan. Jika fungsi dipanggil dari sebuah pernyataan, JavaScript akan "kembali" untuk mengeksekusi kode setelah pernyataan yang memanggil. Fungsi sering menghitung nilai kembali. Nilai kembalian "dikembalikan" kembali ke "pemanggil": Contoh :
JavaScript Functions

Contoh ini memanggil fungsi yang melakukan perhitungan dan mengembalikan hasilnya:

<script> function myFunction(a, b) { return a * b; } document.getElementById("demo").innerHTML = myFunction(4, 3); Dengan fungsi Anda dapat menggunakan kembali kode: Tentukan kode sekali, dan gunakan berkali-kali. Anda bisa menggunakan kode yang sama berkali-kali dengan argumen yang berbeda, untuk menghasilkan hasil yang berbeda. Contoh 1 :

Contoh ini memanggil fungsi untuk mengkonversi dari Fahrenheit ke Celsius:

<script> function toCelsius(f) { return (5/9) * (f-32); } document.getElementById("demo").innerHTML = toCelsius(77); Contoh 2 :

[email protected]


Mengakses fungsi tanpa () akan mengembalikan definisi fungsi alih-alih hasil fungsinya:

<script> function toCelsius(f) { return (5/9) * (f-32); } document.getElementById("demo").innerHTML = toCelsius; Fungsi yang Digunakan sebagai Nilai Variabel , Fungsi dapat digunakan dengan cara yang sama seperti Anda menggunakan variabel, dalam semua jenis rumus, tugas, dan perhitungan. Anda dapat menggunakan fungsi secara langsung, sebagai nilai variabel: Contoh :
<script> document.getElementById("demo").innerHTML = "The temperature is " + toCelsius(77) + " Celsius"; function toCelsius(fahrenheit) { return (5/9) * (fahrenheit-32); } LATIHAN 1.

Panggil fungsinya
<script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World!"; } // Call the function here

[email protected]


2.

Cari tahu apa yang salah dengan fungsinya - perbaiki dan jalankan seperti seharusnya!
<script> func myFunc { document.getElementById("demo").innerHTML = "Hello World!"; } myFunction(); 3. Gunakan fungsi untuk menampilkan produk 5 * 5.
<script> function myFunction() { // Add code here } document.getElementById("demo").innerHTML = myFunction(); 4. Gunakan fungsi untuk menampilkan "Hello John".
Display the result here.
<script> function myFunction(name) { return "Hello " + name; } 5. Tentukan fungsi bernama "myFunction", dan buatlah display "Hello World!" Di elemen
.
<script> // Define and call the function here

[email protected]


Menempatkan skrip di bagian bawah elemen meningkatkan kecepatan tampilan, karena kompilasi skrip memperlambat tampilan. JavaScript eksternal Script juga bisa ditempatkan di file eksternal: Berkas eksternal: myScript.js Contoh : function myFunction() { document.getElementById("demo").innerHTML = "Paragraph changed."; } Script eksternal praktis bila kode yang sama digunakan di banyak halaman web yang berbeda. File JavaScript memiliki ekstensi file .js. Untuk menggunakan skrip eksternal, letakkan nama file skrip di atribut src (sumber) tag <script>: Contoh :
External JavaScript

A Paragraph.

(myFunction is stored in an external file called "myScript.js")
<script src="myScript.js"> Keunggulan JavaScript Eksternal Menempatkan skrip pada file eksternal memiliki beberapa kelebihan: Ini memisahkan HTML dan kode, Itu membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara, File cache dalam cache dapat mempercepat beban halaman. Untuk menambahkan beberapa file skrip ke satu halaman - gunakan beberapa tag skrip: Referensi Eksternal. Skrip eksternal dapat dirujuk dengan URL lengkap atau dengan path relatif ke halaman web saat ini. Contoh ini menggunakan URL lengkap untuk menautkan ke skrip: Contoh :
External JavaScript

A Paragraph.

(myFunction is stored in an external file called "myScript.js")

[email protected]


<script src="https://www.w3schools.com/js/myScript.js"> 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 innerHTML Untuk mengakses elemen HTML, JavaScript dapat menggunakan metode document.getElementById (id). Atribut id mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML: Contoh :
My First Web Page

My First Paragraph.

<script> document.getElementById("demo").innerHTML = 5 + 6; Mengubah properti innerHTML dari elemen HTML adalah cara yang umum untuk menampilkan data dalam HTML Menggunakan document.write (). Untuk tujuan pengujian, lebih mudah menggunakan document.write (): Contoh :
My First Web Page

My first paragraph.
<script> document.write(5 + 6); Menggunakan window.alert () Anda dapat menggunakan kotak peringatan untuk menampilkan data: Contoh :

[email protected]


My First Web Page

My first paragraph.
<script> window.alert(5 + 6); Sintaks JavaScript adalah seperangkat aturan, bagaimana program JavaScript dibuat. Program komputer adalah daftar "instruksi" untuk "dieksekusi" oleh komputer. Dalam bahasa pemrograman, instruksi program ini disebut pernyataan. JavaScript adalah bahasa pemrograman. Pernyataan JavaScript dipisahkan oleh titik koma: Contoh :
JavaScript Statements

Pernyataan dipisahkan dengan titik koma.

Variabel x, y, dan z diberi nilai 5, 6, dan 11.

Kemudian nilai z ditampilkan pada paragraf di bawah ini:

<script> var x, y, z; x = 5; y = 6; z = x + y; document.getElementById("demo").innerHTML = z; Variabel JavaScript Dalam bahasa pemrograman, variabel digunakan untuk menyimpan nilai data.JavaScript menggunakan kata kunci var untuk mendeklarasikan variabel. Tanda sama digunakan untuk menetapkan nilai pada variabel. Dalam contoh ini, x didefinisikan sebagai variabel. Kemudian, x ditugaskan (diberikan) nilai 6: Contoh :
JavaScript Variables

Dalam contoh ini, x didefinisikan sebagai variabel.

[email protected]


Kemudian, x diberi nilai 6:

<script> var x; x = 6; document.getElementById("demo").innerHTML = x; Satu Pernyataan, Banyak Variabel Anda bisa mendeklarasikan banyak variabel dalam satu pernyataan. Mulai pernyataan dengan var dan pisahkan variabel dengan koma: Contoh :
JavaScript Variables

You can declare many variables in one statement.

<script> var person = "John Doe", carName = "Volvo", price = 200; document.getElementById("demo").innerHTML = carName; LATIHAN 1. Buat variabel dengan nama carName, tetapkan nilai "Volvo" ke dalamnya, dan tampilkan itu.
<script> // Create the variable here 2. Kode di bawah ini akan menampilkan "Volvo" - Perbaiki.
<script>

[email protected]


var carName = "Volvo"; document.getElementById("demo").innerHTML = carname; 3. Buat variabel ketiga yang disebut z, tetapkan x + y ke dalamnya, dan tampilkan.
<script> var x = 5; var y = 10; 4. Gunakan kata kunci var tunggal untuk membuat tiga variabel dengan nilai berikut: FirstName = "diana" LastName = "wati" Umur = 20
<script> // Create the variables here document.getElementById("demo").innerHTML = firstName + " " + lastName + " is " + age; Operator JavaScript Operator aritmatika digunakan untuk melakukan aritmatika pada bilangan: Operator Description +

Addition

-

Subtraction

*

Multiplication

/

Division

%

Modulus

++

Increment

[email protected]


Operator

Description

--

Decrement

JavaScript menggunakan operator aritmatika (+ - * /) untuk menghitung nilai: Contoh :
JavaScript Operators

JavaScript menggunakan operator aritmatika untuk menghitung nilai (seperti aljabar).

<script> document.getElementById("demo").innerHTML = (5 + 6) * 10; 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 :
Assigning JavaScript Values

Dalam JavaScript, = operator digunakan untuk menetapkan nilai ke variabel.

<script> var x, y; x = 5; y = 6; document.getElementById("demo").innerHTML = x + y; [email protected]


Penambahan operator penugasan (+ =) menambahkan nilai pada variabel. Contoh :
The += Operator

<script> var x = 10; x += 5; document.getElementById("demo").innerHTML = x; Operator + juga bisa digunakan untuk menambahkan (menggabungkan) string. Contoh :

Operator + menggabungkan (menambahkan) string.

<script> var txt1 = "John"; var txt2 = "Doe"; document.getElementById("demo").innerHTML = txt1 + " " + txt2; LATIHAN 1. Gunakan + = operator untuk menambahkan nilai 5 ke variabel x.
<script> var x = 10; // add code here document.getElementById("demo").innerHTML = x;

[email protected]


2. Gunakan% = operator untuk menetapkan sisa 10/3 ke variabel x.
<script> var x = 10; // add code here document.getElementById("demo").innerHTML = x; Menambahkan String dan Bilangan Menambahkan dua angka, akan mengembalikan jumlah tersebut, namun menambahkan angka dan string akan mengembalikan sebuah string: Contoh :

Menambahkan nomor dan string, mengembalikan sebuah string.

<script> var x = 5 + 5; var y = "5" + 5; var z = "Hello" + 5; document.getElementById("demo").innerHTML = x + "
" + y + "
" + z; OPERATOR Operator Perbandingan JavaScript Operator Description ==

equal to

===

equal value and equal type

!=

not equal

!==

not equal value or not equal type

[email protected]


Operator

Description

>

greater than

<

less than

>=

greater than or equal to

<=

less than or equal to

?

ternary operator

JavaScript Logical Operator Operator Description &&

logical and

||

logical or

!

logical not

LATIHAN 1. Tampilkan jumlah = 10 + 5, dengan menggunakan dua variabel x dan y.
<script> var x; var y; 2. Temukan sisanya ketika 15 dibagi dengan 9, dengan menggunakan dua variabel x dan y
<script> var x; var y;

[email protected]


Komentar JavaScript Tidak semua pernyataan JavaScript "dieksekusi". Kode setelah garis miring ganda // atau antara / * dan * / untuk multi linediperlakukan sebagai komentar. Komentar JavaScript dapat digunakan untuk menjelaskan kode JavaScript, dan membuatnya lebih mudah dibaca. Komentar JavaScript juga bisa digunakan untuk mencegah eksekusi, saat menguji kode alternatif. Komentar Baris tunggal Komentar baris tunggal dimulai dengan //. Setiap teks antara // dan akhir baris akan diabaikan oleh JavaScript (tidak akan dieksekusi). Komentar diabaikan, dan tidak akan dieksekusi: Contoh :
JavaScript Comments are NOT Executed

<script> var x; x = 5; // x = 6; I will not be executed document.getElementById("demo").innerHTML = x; JavaScript Case Sensitif. Semua pengidentifikasi JavaScript peka terhadap huruf besar. Variabel Last Name dan last name, adalah dua variabel yang berbeda. Contoh :
JavaScript is Case Sensitive

Try change lastName to lastname.

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

[email protected]


Sebagian besar program JavaScript berisi banyak pernyataan JavaScript. Pernyataan dijalankan, satu per satu, sesuai urutan penulisannya. Dalam contoh ini x, y, dan z diberi nilai, dan akhirnya z ditampilkan: Contoh 1:

Kode JavaScript (atau hanya JavaScript) adalah urutan pernyataan JavaScript.

<script> var x, y, z; x = 5; y = 6; z = x + y; document.getElementById("demo").innerHTML = z; Semicolons ; Semikolon memisahkan pernyataan JavaScript. Gunakan titik koma di akhir setiap pernyataan yang dapat dieksekusi : Contoh :

JavaScript statements are separated by semicolons.

<script> var a, b, c; a = 1; b = 2; c = a + b; document.getElementById("demo1").innerHTML = c; Bila dipisahkan oleh titik koma, beberapa pernyataan pada satu baris diperbolehkan:

[email protected]



Multiple statements on one line is allowed.

<script> var a, b, c; a = 1; b = 2; c = a + b; document.getElementById("demo1").innerHTML = c; Jenis Data JavaScript (TIPE DATA) Variabel JavaScript dapat menyimpan banyak tipe data: angka, string, objek dan banyak lagi: var length = 16; // Number var lastName = "Johnson"; // String var x = {firstName:"John", lastName:"Doe"}; // Object Konsep Tipe Data Dalam pemrograman, tipe data merupakan konsep penting. Agar dapat beroperasi pada variabel, penting untuk mengetahui sesuatu tentang jenisnya. Tanpa tipe data, komputer tidak bisa menyelesaikannya dengan aman: var x = 16 + "Volvo"; jadi kebaca var x = "16" + "Volvo"; Saat menambahkan angka dan string, JavaScript akan memperlakukan nomor itu sebagai string. Contoh :
When adding a number and a string, JavaScript will treat the number as a string.

<script> var x = 16 + "Volvo"; document.getElementById("demo").innerHTML = x; JavaScript mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda dapat menghasilkan hasil yang berbeda: Contoh1 :

[email protected]


<script> var x = 16 + 4 + "Volvo"; document.getElementById("demo").innerHTML = x; Contoh 2:
<script> var x = "Volvo" + 16 + 4; document.getElementById("demo").innerHTML = x; Pada contoh pertama, JavaScript memperlakukan 16 dan 4 sebagai angka, sampai mencapai "Volvo". Pada contoh kedua, karena operan pertama adalah string, semua operan diperlakukan sebagai string. Jenis JavaScript Dinamis. JavaScript memiliki tipe dinamis. Ini berarti bahwa variabel yang sama dapat digunakan untuk menyimpan tipe data yang berbeda: Contoh : Var x; // Sekarang x tidak terdefinisi Var x = 5; // Sekarang x adalah sebuah nomor Var x = "john"; // Sekarang x adalah sebuah String String JavaScript String (atau string teks) adalah serangkaian karakter seperti "John Doe". String ditulis dengan tanda petik. Anda bisa menggunakan tanda kutip tunggal atau ganda: Contoh var varName = "Volvo XC60"; // Menggunakan tanda kutip ganda svar varName = 'Volvo XC60'; // Menggunakan tanda kutip tunggal Contoh :
<script>

[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 + "
" + carName2 + "
" + answer1 + "
" + answer2 + "
" + answer3; Nomor (number) JavaScript JavaScript hanya memiliki satu jenis angka. Angka dapat ditulis dengan, atau tanpa desimal: Contoh :
<script> var x1 = 34.00; var x2 = 34; var y = 123e5; var z = 123e-5; document.getElementById("demo").innerHTML = x1 + "
" + x2 + "
" + y + "
" + z JavaScript Booleans Boolean hanya bisa memiliki dua nilai: benar atau salah. Example var x = true; var y = false; Boolean sering digunakan dalam pengujian bersyarat. Array JavaScript Array 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): [email protected]


Contoh :
<script> var cars = ["Saab","Volvo","BMW"]; document.getElementById("demo").innerHTML = cars[0]; Objek JavaScript Objek JavaScript ditulis dengan kurung kurawal. Properti objek ditulis sebagai nama: pasangan nilai, dipisahkan dengan tanda koma. Anda telah mengetahui bahwa variabel JavaScript adalah kontainer untuk nilai data. Kode ini memberikan nilai sederhana (Fiat) ke variabel bernama mobil: Contoh :
Membuat Variabel JavaScript.

<script> var car = "Fiat"; document.getElementById("demo").innerHTML = car; Objek juga variabel. Tapi objek bisa mengandung banyak nilai. Kode ini memberikan banyak nilai (Fiat, 500, putih) ke variabel bernama mobil: Contoh :
Creating a JavaScript Object.

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

[email protected]


Nilai ditulis sebagai nama: nilai pasangan (nama dan nilai dipisahkan oleh titik dua). Objek JavaScript adalah kontainer untuk nilai yang dinamai. Properti Objek Nama: nilai pasangan (dalam objek JavaScript) disebut properti. Contoh :
<script> var person = { firstName : "John", lastName : "Doe", age : 50, eyeColor : "blue" }; document.getElementById("demo").innerHTML = person.firstName + " is " + person.age + " years old."; Objek (orang) pada contoh di atas memiliki 4 properti: firstName, lastName, age, dan eye color. Mengakses Properti Objek Anda dapat mengakses properti objek dengan dua cara: objectName.propertyName or objectName["propertyName"] Contoh 1 :
Ada dua cara berbeda untuk mengakses properti objek:

Anda bisa menggunakan person.property atau person ["property"].

[email protected]


<script> var person = { firstName: "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person.firstName + " " + person.lastName; Contoh 2 :
There are two different ways to access an object property:

You can use person.property or person["property"].

<script> var person = { firstName: "John", lastName : "Doe", id : 5566 }; document.getElementById("demo").innerHTML = person["firstName"] + " " + person["lastName"]; Mengakses Metode Objek Anda mengakses metode objek dengan sintaks berikut: objectName.methodName() Contoh :
Creating and using an object method.

An object method is a function definition, stored as a property value.

[email protected]


<script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName(); Jika Anda mengakses metode Nama Lengkap, tanpa (), itu akan mengembalikan definisi fungsi, Sebuah metode sebenarnya adalah definisi fungsi yang disimpan sebagai nilai properti: Contoh :
Metode objek adalah definisi fungsi, disimpan sebagai nilai properti.

Jika Anda mengaksesnya tanpa (), itu akan mengembalikan definisi fungsi:

<script> var person = { firstName: "John", lastName : "Doe", id : 5566, fullName : function() { return this.firstName + " " + this.lastName; } }; document.getElementById("demo").innerHTML = person.fullName; LATIHAN : 1. Tampilkan "John" dengan mengekstrak informasi dari objek orang tersebut.

[email protected]


<script> var person = {firstName:"John", lastName:"Doe"}; 2. Tambahkan properti dan nilai berikut ke objek orang tersebut: negara: Amerika Serikat
<script> var person = {firstName:"John", lastName:"Doe"}; document.getElementById("demo").innerHTML = person.country; 3. Buat objek yang disebut orang dengan nama = John, umur = 50. Kemudian, akses objek untuk menampilkan "John berusia 50 tahun".
<script> // Create the object here Cakupan JavaScript (Scope) Lingkup adalah himpunan variabel yang dapat Anda akses. Dalam JavaScript, ruang lingkup adalah himpunan variabel, objek, dan fungsi yang dapat Anda akses. Variabel dinyatakan dalam fungsi JavaScript, menjadi LOCAL. Variabel lokal memiliki cakupan lokal: Mereka hanya dapat diakses dalam fungsi. Contoh :
Variabel lokal carName tidak bisa diakses dari kode diluar fungsi:

<script> myFunction();

[email protected]


document.getElementById("demo").innerHTML = "The type of carName is " + typeof carName; function myFunction() { var carName = "Volvo"; } Karena variabel lokal hanya dikenali di dalam fungsinya, variabel dengan nama yang sama dapat digunakan dalam fungsi yang berbeda.Variabel lokal dibuat saat fungsi dimulai, dan dihapus saat fungsi selesai. Variabel yang dinyatakan di luar fungsi, menjadi GLOBAL.Variabel global memiliki cakupan global: Semua skrip dan fungsi pada halaman web dapat mengaksesnya. Contoh :
Sebuah variabel GLOBAL dapat diakses dari script atau fungsi apapun.

<script> var carName = "Volvo"; myFunction(); function myFunction() { document.getElementById("demo").innerHTML = "I can display " + carName; } Jika Anda menetapkan nilai pada variabel yang belum diumumkan, maka secara otomatis akan menjadi variabel GLOBAL. Contoh kode ini akan mendeklarasikan variabel global carName, walaupun nilainya diberikan di dalam sebuah fungsi.
Jika Anda menetapkan nilai pada variabel yang belum diumumkan, Maka secara otomatis akan menjadi variabel GLOBAL:

[email protected]


<script> myFunction(); // code here can use carName as a global variable document.getElementById("demo").innerHTML = "I can display " + carName; function myFunction() { carName = "Volvo"; } Event Java script event HTML adalah "hal-hal" yang terjadi pada elemen HTML. Saat JavaScript digunakan di halaman HTML, JavaScript dapat "bereaksi" terhadap kejadian ini. event HTML bisa jadi sesuatu yang dilakukan browser, atau sesuatu yang dilakukan pengguna, Berikut adalah beberapa contoh event HTML: Laman web HTML telah selesai dimuat Bidang masukan HTML telah diubah Sebuah tombol HTML diklik Seringkali, saat kejadian terjadi, Anda mungkin ingin melakukan sesuatu. JavaScript memungkinkan Anda menjalankan kode saat kejadian terdeteksi. HTML memungkinkan atribut event handler, dengan kode JavaScript, untuk ditambahkan ke elemen HTML. Dalam contoh berikut, atribut onclick (dengan kode), ditambahkan ke elemen tombol: Contoh :
Pada contoh di atas, kode JavaScript akan mengubah isi elemen dengan id = "demo". Pada contoh berikut, kode akan mengubah isi elemennya sendiri (menggunakan this.innerHTML):

[email protected]


Kode JavaScript seringkali beberapa barisnya panjang. Lebih umum melihat atribut dengan cara memanggil fungsi: Contoh :
Click the button to display the date.
<script> function displayDate() { document.getElementById("demo").innerHTML = Date(); }
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

LATIHAN 1. Saat tombol diklik, trigger Function () dengan sebuah event.
<script> function myFunction() { document.getElementById("demo").innerHTML = "Hello World"; }

[email protected]


2.

Elemen <span> harus melakukan sesuatu saat seseorang mengarahkan mouse ke atasnya. Cobalah untuk memperbaikinya <span someevent="this.style.color='red'">Mouse over me!

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

Dengan model objek, JavaScript mendapatkan semua kekuatan yang dibutuhkan untuk membuat HTML dinamis: JavaScript dapat mengubah semua elemen HTML di halaman JavaScript dapat mengubah semua atribut HTML di halaman JavaScript dapat mengubah semua gaya CSS di halaman JavaScript dapat menghapus elemen dan atribut HTML yang ada JavaScript dapat menambahkan elemen HTML dan atribut baru JavaScript dapat bereaksi terhadap semua aktivitas HTML yang ada di halaman JavaScript dapat membuat acara HTML baru di halaman Apa itu HTML DOM? DOM HTML adalah model objek standar dan antarmuka pemrograman untuk HTML. Ini mendefinisikan: Elemen HTML sebagai objek Properti semua elemen HTML Metode untuk mengakses semua elemen HTML Acara untuk semua elemen HTML

[email protected]


Dengan kata lain: DOM HTML adalah standar untuk mendapatkan, mengubah, menambah, atau menghapus elemen HTML. Metode HTML DOM adalah tindakan yang dapat Anda lakukan (pada Elemen HTML). Properti HTML DOM adalah nilai (dari Elemen HTML) yang dapat Anda setel atau ubah. Antarmuka Pemrograman DOM DOM HTML dapat diakses dengan JavaScript (dan dengan bahasa pemrograman lainnya). Di DOM, semua elemen HTML didefinisikan sebagai objek.Antarmuka pemrograman adalah sifat dan metode masing-masing objek. Properti adalah nilai yang bisa Anda dapatkan atau tetapkan (seperti mengubah konten elemen HTML). Metode adalah tindakan yang dapat Anda lakukan (seperti menambahkan atau menghapus elemen HTML). Contoh berikut mengubah konten (innerHTML) elemen
dengan id = "demo":
My First Page

<script> document.getElementById("demo").innerHTML = "Hello World!"; Pada contoh di atas, getElementById adalah sebuah metode, sedangkan innerHTML adalah sebuah properti. Metode GetElementById Cara yang paling umum untuk mengakses elemen HTML adalah dengan menggunakan id elemen. Pada contoh di atas, metode getElementById menggunakan id = "demo" untuk menemukan elemennya. Properti innerHTML Cara termudah untuk mendapatkan konten sebuah elemen adalah dengan menggunakan innerHTML properti. Properti innerHTML berguna untuk mendapatkan atau mengganti konten elemen HTML. Properti innerHTML dapat digunakan untuk mendapatkan atau mengubah elemen HTML, termasuk dan . Objek dokumen HTML DOM adalah pemilik semua objek lain di halaman web Anda. Objek Dokumen DOM HTML Objek dokumen mewakili halaman web Anda. Jika Anda ingin mengakses elemen apapun di halaman HTML, Anda selalu mulai dengan mengakses objek dokumen. Berikut adalah beberapa contoh bagaimana Anda dapat menggunakan objek dokumen untuk mengakses dan memanipulasi HTML.

[email protected]


Menemukan Elemen HTML Method

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 HTML Method

Description

element.innerHTML = new html content

Change the inner HTML of an element

element.attribute = new value

Change the attribute value of an HTML element

element.setAttribute(attribute, value)

Change the attribute value of an HTML element

element.style.property = new style

Change the style of an HTML element

Menambahkan dan Menghapus Unsur Method

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 Handlers Method

Description

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

= Adding event handler code to an onclick event

HTML pertama DOM Level 1 (1998), mendefinisikan 11 objek HTML, koleksi objek, dan properti. 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 elements 1

[email protected]


Property

Description

DOM

that have a name attribute document.applets

Returns elements HTML5)

all (Deprecated in 1

document.baseURI

Returns the absolute base 3 URI of the document

document.body

Returns the element

1

document.cookie

Returns cookie

the

document's

1

document.doctype

Returns doctype

the

document's

document.documentElement

Returns the element

document.documentMode

Returns the mode used by 3 the browser

document.documentURI

Returns the URI of the 3 document

document.domain

Returns the domain name of 1 the document server

document.domConfig

Obsolete. Returns the DOM 3 configuration

document.embeds

Returns elements

document.forms

Returns all
elements

1

document.head

Returns the element

3

document.images

Returns all elements

1

document.implementation

Returns the implementation

3

document.inputEncoding

Returns the document's 3 encoding (character set)

document.lastModified

Returns the date and time 3 the document was updated

document.links

Returns all <area> and 1

all

<embed>

DOM

3 3

3

[email protected]


Property

Description

DOM

elements that have a href attribute document.readyState

Returns the (loading) status 3 of the document

document.referrer

Returns the URI of the referrer (the linking 1 document)

document.scripts

Returns all <script> elements 3

document.strictErrorChecking

Returns if error checking is 3 enforced

document.title

Returns the element<br /> <br /> document.URL<br /> <br /> Returns the complete URL of 1 the document<br /> <br /> 1<br /> <br /> suvi.rahma@gmail.com<br /> <br /> </div> </div> </div> </div> </div> </div> </div> </div> <div class="modal fade" id="report" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form role="form" method="post" action="https://adoc.pub/report/modul-4-java-script-sub-pengenalan" style="border: none;"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Report "MODUL 4 JAVA SCRIPT. Sub : PENGENALAN"</h4> </div> <div class="modal-body"> <div class="form-group"> <label>Your name</label> <input type="text" name="name" required="required" class="form-control" /> </div> <div class="form-group"> <label>Email</label> <input type="email" name="email" required="required" class="form-control" /> </div> <div class="form-group"> <label>Reason</label> <select name="reason" required="required" class="form-control"> <option value="">-Select Reason-</option> <option value="pornographic" selected="selected">Pornographic</option> <option value="defamatory">Defamatory</option> <option value="illegal">Illegal/Unlawful</option> <option value="spam">Spam</option> <option value="others">Other Terms Of Service Violation</option> <option value="copyright">File a copyright complaint</option> </select> </div> <div class="form-group"> <label>Description</label> <textarea name="description" required="required" rows="3" class="form-control" style="border: 1px solid #cccccc;"></textarea> </div> <div class="form-group"> <div style="display: inline-block;"> <div class="g-recaptcha" data-sitekey="6LcEnMcZAAAAAFHzKKgaE-Qh57XzUTzpfRElD4dP"></div> </div> </div> <script src='https://www.google.com/recaptcha/api.js'></script> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="submit" class="btn btn-primary">Send</button> </div> </form> </div> </div> </div> <script> $(document).ready(function () { var inner_height = $(window).innerHeight() - 250; $('#pdfviewer').css({"height": inner_height + "px"}); }); </script> <footer class="footer" style="margin-top: 60px;"> <div class="container-fluid"> Copyright © 2024 ADOC.PUB. All rights reserved. <div class="pull-right"> <span><a href="https://adoc.pub/about">About Us</a></span> | <span><a href="https://adoc.pub/privacy">Privacy Policy</a></span> | <span><a href="https://adoc.pub/term">Terms of Service</a></span> | <span><a href="https://adoc.pub/copyright">Copyright</a></span> | <span><a href="https://adoc.pub/contact">Contact Us</a></span> | <span><a href="https://adoc.pub/cookie_policy">Cookie Policy</a></span> </div> </div> </footer>  <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close" on="tap:login.close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="add-note-label">Sign In</h4> </div> <div class="modal-body"> <form action="https://adoc.pub/login" method="post"> <div class="form-group"> <label class="sr-only" for="email">Email</label> <input class="form-input form-control" type="text" name="email" id="email" value="" placeholder="Email" /> </div> <div class="form-group"> <label class="sr-only" for="password">Password</label> <input class="form-input form-control" type="password" name="password" id="password" value="" placeholder="Password" /> </div> <div class="form-group"> <div class="checkbox"> <label class="form-checkbox"> <input type="checkbox" name="remember" value="1" /> <i class="form-icon"></i> Remember me </label> <label class="pull-right"><a href="https://adoc.pub/forgot">Forgot password?</a></label> </div> </div> <button class="btn btn-primary btn-block" type="submit">Sign In</button> </form> </div> </div> </div> </div>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-177279549-1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-177279549-1'); </script> <script src="https://adoc.pub/assets/js/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://adoc.pub/assets/css/jquery-ui.css"> <script> $(function () { $("#document_search").autocomplete({ source: function (request, response) { $.ajax({ url: "https://adoc.pub/suggest", dataType: "json", data: { term: request.term }, success: function (data) { response(data); } }); }, autoFill: true, select: function( event, ui ) { $(this).val(ui.item.value); $(this).parents("form").submit(); } }); }); </script>  <div id="ADOCPUB_cookie_box" style="z-index:99999; border-top: 1px solid #fefefe; background: #FFC107; width: 100%; position: fixed; padding: 5px 15px; text-align: center; left:0; bottom: 0;"> Our partners will collect data and use cookies for ad personalization and measurement. <a href="https://adoc.pub/cookie_policy" target="_blank">Learn how we and our ad partner Google, collect and use data</a>. <a href="#" class="btn btn-success" onclick="accept_ADOCPUB_cookie_box();return false;">Agree & close</a> </div> <script> function accept_ADOCPUB_cookie_box() { document.cookie = "ADOCPUB_cookie_box_viewed=1;max-age=15768000;path=/"; hide_ADOCPUB_cookie_box(); } function hide_ADOCPUB_cookie_box() { var cb = document.getElementById('ADOCPUB_cookie_box'); if (cb) { cb.parentElement.removeChild(cb); } } (function () { var ADOCPUB_cookie_box_viewed = (function (name) { var matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)")); return matches ? decodeURIComponent(matches[1]) : undefined; })('ADOCPUB_cookie_box_viewed'); if (ADOCPUB_cookie_box_viewed) { hide_ADOCPUB_cookie_box(); } })(); </script>  </body> </html> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>

MODUL 4 JAVA SCRIPT. Sub : PENGENALAN

Recommend Documents

What Can JavaScript Do?

What Can JavaScript Do?

What Can JavaScript Do?

What Can JavaScript Do?

What Can JavaScript Do?

JavaScript in Body

JavaScript in Head

JavaScript in Body

JavaScript Functions

JavaScript Functions

JavaScript Functions

External JavaScript

External JavaScript

My First Web Page

My First Web Page

My First Web Page

JavaScript Statements

JavaScript Variables

JavaScript Variables

JavaScript Operators

Assigning JavaScript Values

The += Operator

JavaScript Operators

JavaScript Operators

JavaScript Comments are NOT Executed

JavaScript is Case Sensitive

JavaScript Statements

JavaScript Statements

JavaScript Statements

My First Page