Modul 8 - Workshop Design Web
Diunggah oleh
Rizky KhametModul 8 - Workshop Design Web
Diunggah oleh
Rizky KhametWORKSHOP DESAIN WEB
“Javascript – Modul 8”
Oleh:
Nama :Rizky Abdul Jabar
Nrp : 2103187013
Kelas : D3 PJJ Teknik Informartika 2018
Dosen Pengajar : M. Udin Harun AR, M.Sc, Ph.D
POLITEKNIK ELEKTRONIKA NEGERI SURABAYA
2019/2020
JavaScript
JavaScript adalah bahasa pemrograman HTML dan Web.
JavaScript adalah salah satu dari 3 bahasa yang harus dipelajari semua pengembang web :
1. HTML untuk menentukan konten halaman web
2. CSS untuk menentukan tata letak halaman web
3. JavaScript untuk memprogram perilaku halaman web
Halaman web bukan satu-satunya tempat di mana JavaScript digunakan. Banyak program desktop
dan server menggunakan JavaScript. Node.js adalah yang paling dikenal. Beberapa database,
seperti MongoDB dan CouchDB, juga menggunakan JavaScript sebagai bahasa pemrograman
mereka.
JavaScript dan Java adalah bahasa yang sama sekali berbeda, baik dalam konsep maupun desain.
JavaScript ditemukan oleh Brendan Eich pada tahun 1995, dan menjadi standar ECMA pada tahun
1997.
ECMA-262 adalah nama resmi standar tersebut. ECMAScript adalah nama resmi bahasa tersebut.
Anda dapat membaca lebih lanjut tentang berbagai versi JavaScript di bab Versi JS .
Examples in Each Chapter
<!DOCTYPE html>
<html>
<body>
<h2>My First JavaScript</h2>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
Click me to display Date and Time.</button>
<p id="demo"></p>
</body>
</html>
JavaScript Introduction
JavaScript Dapat Mengubah Konten HTML
Salah satu dari banyak metode HTML JavaScript adalah getElementById().
Contoh ini menggunakan metode untuk "menemukan" elemen HTML (dengan id = "demo") dan
mengubah konten elemen ( innerHTML) menjadi "Halo JavaScript"
JavaScript menerima kutip ganda dan juga tunggal:
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 = "BELAJAR
MENCOBA JAVASCRIPT!"'>Click Me!</button>
</body>
</html>
JavaScript Can Change HTML Attribute Values
Dalam contoh ini, JavaScript mengubah nilai srcatribut (sumber) dari sebuah <img>tag:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p>JavaScript can change HTML attribute values.</p>
<p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>
<button onclick="document.getElementById('myImage').src='happy.jpg'">HAPPY</button>
<img id="myImage" src="feel.jpg" style="width:100px">
<button onclick="document.getElementById('myImage').src='sad.png'">SAD</button>
</body>
</html>
JavaScript Can Change HTML Styles (CSS)
Mengubah gaya elemen HTML, adalah varian untuk mengubah atribut HTML:
<!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 Can Hide HTML Elements
Menyembunyikan elemen HTML dapat dilakukan dengan mengubah displaygaya:
<!DOCTYPE html>
<html>
<body>
<h2>What Can JavaScript Do?</h2>
<p id="demo">JavaScript can hide HTML elements.</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">Click
Me!</button>
</body>
</html>
JavaScript Can Show HTML Elements
Menampilkan elemen HTML tersembunyi juga bisa dilakukan dengan mengubah displaygaya:
<!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>
JavaScript Where To
The <script> Tag
Dalam HTML, kode JavaScript harus disisipkan di antara <script>dan </script>tag.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "MENCOBA JAVA PERTAMA KALI";
</script>
</body>
</html>
JavaScript Functions and Events
JavaScript function adalah blok kode JavaScript, yang dapat dieksekusi ketika "dipanggil" untuk.
Misalnya, suatu fungsi dapat dipanggil ketika suatu peristiwa terjadi, seperti ketika pengguna
mengklik sebuah tombol.
JavaScript in <head> or <body>
Anda dapat menempatkan sejumlah skrip dalam dokumen HTML.
Script dapat ditempatkan di <body>, atau di <head>bagian halaman HTML, atau di keduanya.
JavaScript di <head>
Dalam contoh ini, JavaScript functionditempatkan di <head>bagian halaman
HTML.
Fungsi dipanggil (dipanggil) ketika sebuah tombol diklik:
Contoh:
<!DOCTYPE html>
<html>
<head>
<script>
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, JavaScript functionditempatkan di <body>bagian halaman
HTML.
Fungsi dipanggil (dipanggil) ketika sebuah tombol diklik:
<!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>
External JavaScript
Skrip juga dapat ditempatkan di file eksternal:
File eksternal: myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
Skrip eksternal praktis ketika 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 srcatribut (sumber) <script>tag:
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>
Keuntungan JavaScript Eksternal
Menempatkan skrip dalam file eksternal memiliki beberapa keunggulan:
Ini memisahkan HTML dan kode
Itu membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara
File JavaScript yang di-cache dapat mempercepat pemuatan halaman
Untuk menambahkan beberapa file skrip ke satu halaman - gunakan beberapa tag skrip:
Contoh
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
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
<!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="https://www.w3schools.com/js/myScript.js"></script>
</body>
</html>
Contoh ini menggunakan skrip yang terletak di folder tertentu di situs web saat ini:
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="/js/myScript.js"></script>
</body>
</html>
Contoh ini menghubungkan ke skrip yang terletak di folder yang sama dengan halaman saat ini:
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>
JavaScript Output
Kemungkinan Tampilan JavaScript
JavaScript dapat "menampilkan" data dengan berbagai cara:
Menulis menjadi elemen HTML, menggunakan innerHTML.
Menulis ke dalam output HTML menggunakan document.write().
Menulis ke dalam kotak peringatan, menggunakan window.alert().
Menulis ke konsol browser, menggunakan console.log().
Menggunakan innerHTML
Untuk mengakses elemen HTML,
JavaScript dapat menggunakan document.getElementById(id)metode ini.
The idAtribut mendefinisikan elemen HTML. The innerHTML properti 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 = 20 / 5;
</script>
</body>
</html>
Using document.write()
Untuk tujuan pengujian, mudah digunakan document.write():
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<p>Never call document.write after the document has finished loading.
It will overwrite the whole document.</p>
<script>
document.write(5 * 6);
</script>
</body>
</html>
Menggunakan document.write () setelah dokumen HTML dimuat, akan menghapus semua
HTML yang ada :
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<button type="button" onclick="document.write(100/5)">Try it</button>
</body>
</html>
Using window.alert()
Anda dapat menggunakan kotak peringatan untuk menampilkan data:
<!DOCTYPE html>
<html>
<body>
<h2>My First Web Page</h2>
<p>My first paragraph.</p>
<script>
window.alert(5 * 6);
</script>
</body>
</html>
Using console.log()
Untuk tujuan debugging, Anda dapat menggunakan console.log()metode ini untuk menampilkan
data.
<!DOCTYPE html>
<html>
<body>
<h2>Activate debugging with F12</h2>
<p>Select "Console" in the debugger menu. Then click Run again.</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript Statements
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>A <b>JavaScript program</b> is a list of <b>statements</b> to be executed by a
computer.</p>
<p id="demo"></p>
<script>
var x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById("demo").innerHTML =
"The value of z is " + z + ".";
</script>
</body>
</html>
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
Keterangan : Pernyataan ini memberi tahu browser untuk menulis "Hello Dolly." di dalam
elemen HTML dengan id = "demo"
Try it yourself >>
<!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 = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
</body>
</html>
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>
Try it yourself >>
Tujuan dari blok kode adalah untuk mendefinisikan pernyataan yang akan dieksekusi bersama.
Satu tempat Anda akan menemukan pernyataan dikelompokkan bersama dalam blok, dalam
fungsi JavaScript :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>JavaScript code blocks are written between { and }</p>
<button type="button" onclick="myFunction()">Click Me!</button>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
function myFunction() {
document.getElementById("demo1").innerHTML = "Hello Dolly!";
document.getElementById("demo2").innerHTML = "How are you?";
}
</script>
</body>
</html>
JavaScript Syntax
Literal JavaScript
Aturan paling penting untuk menulis nilai tetap adalah:
Angka ditulis dengan atau tanpa desimal:
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Number can be written with or without decimals.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 10.50;
</script>
</body>
</html>
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings can be written with double or single quotes.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script>
</body>
</html>
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<p id="demo"></p>
<script>
var x;
x = 6;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Keterangan : Dalam contoh ini, x didefinisikan sebagai variabel. Kemudian, x diberikan (diberi)
nilai 6
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>
Try it yourself >>
Ekspresi adalah kombinasi dari nilai, variabel, dan operator, yang menghitung nilai.
Perhitungannya disebut evaluasi.
Misalnya, 5 * 10 bernilai 50 :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Expressions</h2>
<p>Expressions compute to values.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script>
</body>
</html>
Try it yourself >>
Nilai bisa dari berbagai jenis, seperti angka dan string.
Misalnya, "John" + "" + "Doe", dievaluasi menjadi "John Doe"
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Expressions</h2>
<p>Expressions compute to values.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "John" + " " + "Doe";
</script>
</body>
</html>
Try it yourself >>
Kata kunci JavaScript digunakan untuk mengidentifikasi tindakan yang harus dilakukan.
Kata kunci var memberi tahu browser untuk membuat variabel
<!DOCTYPE html>
<html>
<body>
<h2>The var Keyword Creates Variables</h2>
<p id="demo"></p>
<script>
var x, y;
x = 5 + 6;
y = x * 10;
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
Try it yourself >>
<!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 executed
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Try it yourself >>
JavaScript adalah Huruf Besar-Kecil
Semua pengidentifikasi JavaScript peka huruf besar-kecil.
Variabel lastName dan lastname, adalah dua variabel yang berbeda
<!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>
JavaScript Comments
Try it yourself >>
Komentar satu baris dimulai dengan //.
Teks apa pun antara // dan akhir baris akan diabaikan oleh JavaScript (tidak akan dieksekusi).
Contoh ini menggunakan komentar satu baris sebelum setiap baris kode:
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
// Change heading:
document.getElementById("myH").innerHTML = "JavaScript Comments";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
</body>
</html>
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comments</h2>
<p id="demo"></p>
<script>
var x = 5; // Declare x, give it the value of 5
var y = x + 2; // Declare y, give it the value of x + 2
// Write y to demo:
document.getElementById("demo").innerHTML = y;
</script>
</body>
</html>
Try it yourself >>
Komentar multi-baris dimulai dengan / * dan diakhiri dengan * /.
Teks apa pun antara / * dan * / akan diabaikan oleh JavaScript.
Contoh ini menggunakan komentar multi-baris (blok komentar) untuk menjelaskan kode
<!DOCTYPE html>
<html>
<body>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
The code below will change
the heading with id = "myH"
and the paragraph with id = "myP"
*/
document.getElementById("myH").innerHTML = "JavaScript Comments";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
</body>
</html>
Try it yourself >>
Menggunakan komentar untuk mencegah eksekusi kode cocok untuk pengujian kode.
Menambahkan // di depan baris kode mengubah baris kode dari baris yang dapat dieksekusi ke
komentar.
Contoh ini menggunakan // untuk mencegah eksekusi salah satu baris kode
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comments</h2>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
//document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My first paragraph.";
</script>
<p>The line starting with // is not executed.</p>
</body>
</html>
Try it yourself >>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comments</h2>
<h1 id="myH"></h1>
<p id="myP"></p>
<script>
/*
document.getElementById("myH").innerHTML = "Welcome to my Homepage";
document.getElementById("myP").innerHTML = "This is my first paragraph.";
*/
document.getElementById("myP").innerHTML = "The comment-block is not executed.";
</script>
</body>
</html>
JAVASCRIPT ASSIGNMENT
JavaScript assignment operator
Operator penugasan memberikan nilai ke variabel JavaScript.
Contoh Tugas
Operator penugasan = memberikan nilai ke variabel.
<!DOCTYPE html>
<html>
<body>
<h2>The = Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Operator penugasan + = menambahkan nilai ke variabel.
<!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 penugasan - = mengurangkan nilai dari variabel.
<!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>
The * = operator penugasan mengalikan variabel.
<!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>
Tugas / = membagi variabel.
<!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 penugasan menetapkan sisa ke variabel.
<!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>
JAVASCRIPT DATA TYPES
The Concept Data Types
Jenis Data JavaScript
Variabel JavaScript dapat menampung banyak tipe data: angka, string, objek, dan lainnya:
Konsep Tipe Data
Dalam pemrograman, tipe data adalah konsep penting.
Untuk dapat beroperasi pada variabel, penting untuk mengetahui sesuatu tentang tipe
tersebut.
Tanpa tipe data, komputer tidak dapat dengan aman menyelesaikan ini:
Saat menambahkan angka dan string, JavaScript akan memperlakukan angka sebagai string.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<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>
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>When adding a string and a number, JavaScript will treat the number as a
string.</p>
<p id="demo"></p>
<script>
var x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda dapat
menghasilkan hasil yang berbeda:
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can
produce different results:</p>
<p id="demo"></p>
<script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can
produce different results:</p>
<p id="demo"></p>
<script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can
produce different results:</p>
<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, hingga mencapai
"Volvo".
Dalam contoh kedua, karena operan pertama adalah string, semua operan diperlakukan
sebagai string.
JavaScript Types Are Dynamic
JavaScript memiliki tipe dinamis. Ini berarti bahwa variabel yang sama dapat digunakan untuk
menampung berbagai tipe data:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Data Types</h2>
<p>JavaScript has dynamic types. This means that the same variable can be used to hold
different data types:</p>
<p id="demo"></p>
<script>
var x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript Strings
String (atau string teks) adalah serangkaian karakter seperti "John Doe".
String ditulis dengan tanda kutip. Anda dapat menggunakan tanda kutip tunggal atau ganda:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are written with quotes. You can use single or double quotes:</p>
<p id="demo"></p>
<script>
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
document.getElementById("demo").innerHTML =
carName1 + "<br>" +
carName2;
</script>
</body>
</html>
Anda dapat menggunakan tanda kutip di dalam string, asalkan tidak cocok dengan tanda kutip
yang mengelilingi string:
contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:</p>
<p id="demo"></p>
<script>
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" +
answer2 + "<br>" +
answer3;
</script>
</body>
</html>
JavaScript Numbers
JavaScript hanya memiliki satu jenis angka.
Angka dapat ditulis dengan, atau tanpa desimal:
contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written with, or without decimals:</p>
<p id="demo"></p>
<script>
var x1 = 34.00;
var x2 = 34;
var x3 = 3.14;
document.getElementById("demo").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>
Angka ekstra besar atau ekstra kecil dapat ditulis dengan notasi ilmiah (eksponensial):
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Extra large or extra small numbers can be written with scientific (exponential)
notation:</p>
<p id="demo"></p>
<script>
var y = 123e5;
var z = 123e-5;
document.getElementById("demo").innerHTML =
y + "<br>" + z;
</script>
</body>
</html>
JavaScript Booleans
Boolean hanya dapat memiliki dua nilai: benar atau salah.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans can have two values: true or false:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 5;
var z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
JavaScript Arrays
Array JavaScript ditulis dengan tanda kurung siku.
Item array dipisahkan dengan koma.
Kode berikut menyatakan (membuat) larik yang disebut mobil, berisi tiga item (nama
mobil):
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array indexes are zero-based, which means the first item is [0].</p>
<p id="demo"></p>
<script>
var cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
JavaScript Objects
Objek JavaScript ditulis dengan kurung kurawal {}.
Properti objek ditulis sebagai nama: pasangan nilai, dipisahkan oleh koma.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<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>
The Typeof Operator
Anda dapat menggunakan tipe JavaScript dari operator untuk menemukan tipe variabel
JavaScript.
Typeof operator mengembalikan tipe variabel atau ekspresi:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "" + "<br>" +
typeof "John" + "<br>" +
typeof "John Doe";
</script>
</body>
</html>
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof 0 + "<br>" +
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>
</body>
</html>
Undefined
Dalam JavaScript, sebuah variabel tanpa nilai, memiliki nilai yang tidak terdefinisi.
Jenisnya juga tidak terdefinisi.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>The value (and the data type) of a variable with no value is
<b>undefined</b>.</p>
<p id="demo"></p>
<script>
var car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
Variabel apa pun dapat dikosongkan, dengan menetapkan nilai ke tidak terdefinisi.
Jenisnya juga tidak akan ditentukan.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>
<p id="demo"></p>
<script>
var car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
Empty Value
Nilai kosong tidak ada hubungannya dengan undefined.
String kosong memiliki nilai hukum dan tipe.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>An empty string has both a legal value and a type:</p>
<p id="demo"></p>
<script>
var car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>
</body>
</html>
Null
Dalam JavaScript null adalah "tidak ada". Seharusnya sesuatu yang tidak ada.
Sayangnya, dalam JavaScript, tipe data null adalah objek.
Anda dapat menganggapnya sebagai bug dalam JavaScript yang tipenya null adalah objek.
Itu harus nol.
Anda dapat mengosongkan objek dengan mengaturnya ke nol:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Objects can be emptied by setting the value to <b>null</b>.</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>
</body>
</html>
Anda juga dapat mengosongkan objek dengan mengaturnya ke tidak terdefinisi:
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Objects can be emptied by setting the value to <b>undefined</b>.</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = undefined;
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>
Difference Between And Different and Null
undefined dan null bernilai sama tetapi berbeda dalam jenis:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Undefined and null are equal in value but different in type:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br><br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>
</body>
</html>
Primitive Data
Nilai data primitif adalah nilai data tunggal sederhana tanpa properti dan metode
tambahan.
Operator typeof dapat mengembalikan salah satu dari tipe primitif ini:
tali
jumlah
boolean
tidak terdefinisi
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof x;
</script>
</body>
</html>
Complex Data
Operator typeof dapat mengembalikan salah satu dari dua tipe kompleks:
fungsi
obyek
Operator typeof mengembalikan "objek" untuk objek, array, dan null.
Operator typeof tidak mengembalikan "objek" untuk fungsi.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns object for both objects, arrays, and null.</p>
<p>The typeof operator does not return object for functions.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof {name:'john', age:34} + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof null + "<br>" +
typeof function myFunc(){};
</script>
</body>
</html>
JAVASCRIPT FUNCTION
Fungsi JavaScript adalah blok kode yang dirancang untuk melakukan tugas tertentu.
Fungsi JavaScript dijalankan ketika "sesuatu" memanggilnya (menyebutnya).
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation, and returns the
result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Function Return
Saat JavaScript mencapai pernyataan pengembalian, fungsi tersebut akan berhenti
dieksekusi.
Jika fungsi dipanggil dari pernyataan, JavaScript akan "kembali" untuk mengeksekusi kode
setelah pernyataan pemanggilan.
Fungsi sering menghitung nilai balik. Nilai kembali "dikembalikan" kembali ke
"penelepon":
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation and returns the
result:</p>
<p id="demo"></p>
<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Why Function?
Anda dapat menggunakan kembali kode: Tetapkan kode satu kali, dan gunakan berkali-
kali.
Anda dapat menggunakan kode yang sama berkali-kali dengan argumen yang berbeda,
untuk menghasilkan hasil yang berbeda.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>
</body>
</html>
Using () Operator Invokes The Function
Menggunakan contoh di atas, toCelsius merujuk ke objek fungsi, dan toCelsius ()
mengacu pada hasil fungsi.
Mengakses fungsi tanpa () akan mengembalikan definisi fungsi alih-alih hasil fungsi:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Accessing a function without () will return the function definition instead of
the function result:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius;
</script>
</body>
</html>
Functions Used as Variable Values
Fungsi dapat digunakan dengan cara yang sama seperti Anda menggunakan variabel, di
semua jenis rumus, tugas, dan perhitungan.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<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>
Local Variable
Variabel dideklarasikan dalam fungsi JavaScript, menjadi LOKAL ke fungsi.
Variabel lokal hanya dapat diakses dari dalam fungsi.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Outside myFunction() carName is undefined.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
var carName = "Volvo";
document.getElementById("demo1").innerHTML =
typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML =
typeof carName;
</script>
</body>
</html>
Javascript Variable
Javascript variable adalah wadah untuk menyimpan nilai data.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Javascript Much like Algebra
Dalam pemrograman, seperti halnya dalam aljabar, kami menggunakan variabel (seperti
price1) untuk menyimpan nilai.
Dalam pemrograman, seperti halnya dalam aljabar, kami menggunakan variabel dalam
ekspresi (total = price1 + price2).
Dari contoh di bawah ini, Anda dapat menghitung total menjadi 11.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p id="demo"></p>
<script>
var price1 = 5;
var price2 = 6;
var total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
Javascript Data Types
Variabel JavaScript dapat menampung angka seperti 100 dan nilai teks seperti "John Doe".
Dalam pemrograman, nilai teks disebut string teks.
JavaScript dapat menangani banyak jenis data, tetapi untuk saat ini, pikirkan saja angka
dan string.
String ditulis dalam tanda kutip ganda atau tunggal. Angka ditulis tanpa tanda kutip.
Jika Anda memasukkan angka dalam tanda kutip, itu akan diperlakukan sebagai string teks.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "John Doe";
var answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Declaring (Creating) Javascript Variables
Membuat variabel dalam JavaScript disebut "mendeklarasikan" variabel.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
One Statement Many Variable
Anda dapat mendeklarasikan banyak variabel dalam satu pernyataan.
<!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>
<!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 = "Yo Dream!!",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Value = Undifined
Dalam program komputer, variabel sering dideklarasikan tanpa nilai. Nilai dapat
berupa sesuatu yang harus dihitung, atau sesuatu yang akan disediakan nanti, seperti input
pengguna.
Variabel yang dideklarasikan tanpa nilai akan memiliki nilai yang tidak terdefinisi.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>A variable declared without a value will have the value undefined.</p>
<p id="demo"></p>
<script>
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Re-Declarling Javascript Variables
Jika Anda mendeklarasikan ulang variable JavaScript, itu tidak akan kehilangan
nilainya.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "We Are One!! To The World!!";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Javascript Arithmetic
Seperti halnya aljabar, Anda dapat melakukan aritmatika dengan variabel
JavaScript, menggunakan operator seperti = dan +
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>The result of adding 5 + 2 + 3:</p>
<p id="demo"></p>
<script>
var x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Anda juga dapat menambahkan string, tetapi string akan digabungkan
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>The result of adding "shofi" + " " + "widuri":</p>
<p id="demo"></p>
<script>
var x = "shofi" + " " + "widuri";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>The result of adding "5" + 2 + 3:</p>
<p id="demo"></p>
<script>
x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p>The result of adding 2 + 3 + "5":</p>
<p id="demo"></p>
<script>
var x = 2 + 3 + "5"
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Javascript Operator
Operator yang digunakan untuk memberikan tugas kepada variabel. Biasanya digunakan
untuk mengisi variabel.
Contoh:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>x = 5, y = 2, calculate z = x + y, and display z:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>The = Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>The + Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>The * Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
JavaScript Assignment Operators
<!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>
JavaScript String Operators
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>The + operator concatenates (adds) strings.</p>
<p id="demo"></p>
<script>
var txt1 = "John";
var txt2 = "Doe";
document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>The assignment operator += can concatenate strings.</p>
<p id="demo"></p>
<script>
txt1 = "What a very ";
txt1 += "nice day";
document.getElementById("demo").innerHTML = txt1;
</script>
</body>
</html>
Adding String And Numbers
Menambahkan dua angka, akan mengembalikan jumlah, tetapi menambahkan
angka dan string akan mengembalikan string
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Operators</h2>
<p>Adding a number and a string, returns a 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>
Javascript Arithmetic
Operator aritmatika melakukan aritmatika pada angka (literal atau variabel).
Arithmetic Operations
Operasi aritmatika khas beroperasi pada dua angka.
<!DOCTYPE html>
<html>
<body>
<p>A typical arithmetic operation takes two numbers and produces a new number.</p>
<p id="demo"></p>
<script>
var x = 100 + 50;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>A typical arithmetic operation takes two numbers (or variables) and produces a new
number.</p>
<p id="demo"></p>
<script>
var a = 100;
var b = 50;
var x = a + b;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>A typical arithmetic operation takes two numbers (or expressions) and produces a
new number.</p>
<p id="demo"></p>
<script>
var a = 3;
var x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Operators and Operands
Angka-angka (dalam operasi aritmatika) disebut operan. Operasi (yang akan
dilakukan antara dua operan) ditentukan oleh operator
Adding
<!DOCTYPE html>
<html>
<body>
<h2>The + Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Subtracting
<!DOCTYPE html>
<html>
<body>
<h2>The - Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x - y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Multiplying
<!DOCTYPE html>
<html>
<body>
<h2>The * Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Dividing
<!DOCTYPE html>
<html>
<body>
<h2>The / Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x / y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Remainder
<!DOCTYPE html>
<html>
<body>
<h2>The % Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
var y = 2;
var z = x % y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Incrementing
<!DOCTYPE html>
<html>
<body>
<h2>The ++ Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
x++;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Decrementing
<!DOCTYPE html>
<html>
<body>
<h2>The -- Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
x--;
var z = x;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>
Exponentiation
<!DOCTYPE html>
<html>
<body>
<h2>The ** Operator</h2>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Math.pow()</h2>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = Math.pow(x,2);
</script>
</body>
</html>
Operator Precedence
Operator Precedence menggambarkan urutan operasi yang dilakukan dalam
ekspresi aritmatika.
Contoh:
<!DOCTYPE html>
<html>
<body>
<p>Multiplication has precedence over addition.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 + 50 * 3;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Multiplication has precedence over addition.</p>
<p>But parenthesis has precedence over multiplication.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = (100 + 50) * 3;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>When many operations has the same precedence, they are computed from left to
right.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 100 + 50 - 3;
</script>
</body>
</html>
JAVASCRIPT ASSIGNMENT
JavaScript assignment operator
Operator penugasan memberikan nilai ke variabel JavaScript.
Contoh Tugas
Operator penugasan = memberikan nilai ke variabel.
<!DOCTYPE html>
<html>
<body>
<h2>The = Operator</h2>
<p id="demo"></p>
<script>
var x = 10;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Operator penugasan + = menambahkan nilai ke variabel.
<!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 penugasan - = mengurangkan nilai dari variabel.
<!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>
The * = operator penugasan mengalikan variabel.
<!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>
Tugas / = membagi variabel.
<!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 penugasan menetapkan sisa ke variabel.
<!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>
JAVASCRIPT DATA TYPES
The Concept Data Types
Jenis Data JavaScript
Variabel JavaScript dapat menampung banyak tipe data: angka, string, objek, dan lainnya:
Konsep Tipe Data
Dalam pemrograman, tipe data adalah konsep penting.
Untuk dapat beroperasi pada variabel, penting untuk mengetahui sesuatu tentang tipe
tersebut.
Tanpa tipe data, komputer tidak dapat dengan aman menyelesaikan ini:
Saat menambahkan angka dan string, JavaScript akan memperlakukan angka sebagai string.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<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>
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>When adding a string and a number, JavaScript will treat the number as a
string.</p>
<p id="demo"></p>
<script>
var x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript mengevaluasi ekspresi dari kiri ke kanan. Urutan yang berbeda dapat
menghasilkan hasil yang berbeda:
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can
produce different results:</p>
<p id="demo"></p>
<script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can
produce different results:</p>
<p id="demo"></p>
<script>
var x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>JavaScript evaluates expressions from left to right. Different sequences can
produce different results:</p>
<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, hingga mencapai
"Volvo".
Dalam contoh kedua, karena operan pertama adalah string, semua operan diperlakukan
sebagai string.
JavaScript Types Are Dynamic
JavaScript memiliki tipe dinamis. Ini berarti bahwa variabel yang sama dapat digunakan untuk
menampung berbagai tipe data:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Data Types</h2>
<p>JavaScript has dynamic types. This means that the same variable can be used to hold
different data types:</p>
<p id="demo"></p>
<script>
var x; // Now x is undefined
x = 5; // Now x is a Number
x = "John"; // Now x is a String
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
JavaScript Strings
String (atau string teks) adalah serangkaian karakter seperti "John Doe".
String ditulis dengan tanda kutip. Anda dapat menggunakan tanda kutip tunggal atau ganda:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are written with quotes. You can use single or double quotes:</p>
<p id="demo"></p>
<script>
var carName1 = "Volvo XC60";
var carName2 = 'Volvo XC60';
document.getElementById("demo").innerHTML =
carName1 + "<br>" +
carName2;
</script>
</body>
</html>
Anda dapat menggunakan tanda kutip di dalam string, asalkan tidak cocok dengan tanda kutip
yang mengelilingi string:
contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>You can use quotes inside a string, as long as they don't match the quotes
surrounding the string:</p>
<p id="demo"></p>
<script>
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" +
answer2 + "<br>" +
answer3;
</script>
</body>
</html>
JavaScript Numbers
JavaScript hanya memiliki satu jenis angka.
Angka dapat ditulis dengan, atau tanpa desimal:
contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Numbers can be written with, or without decimals:</p>
<p id="demo"></p>
<script>
var x1 = 34.00;
var x2 = 34;
var x3 = 3.14;
document.getElementById("demo").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>
Angka ekstra besar atau ekstra kecil dapat ditulis dengan notasi ilmiah (eksponensial):
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Extra large or extra small numbers can be written with scientific (exponential)
notation:</p>
<p id="demo"></p>
<script>
var y = 123e5;
var z = 123e-5;
document.getElementById("demo").innerHTML =
y + "<br>" + z;
</script>
</body>
</html>
JavaScript Booleans
Boolean hanya dapat memiliki dua nilai: benar atau salah.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>Booleans can have two values: true or false:</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 5;
var z = 6;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>
JavaScript Arrays
Array JavaScript ditulis dengan tanda kurung siku.
Item array dipisahkan dengan koma.
Kode berikut menyatakan (membuat) larik yang disebut mobil, berisi tiga item (nama
mobil):
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>Array indexes are zero-based, which means the first item is [0].</p>
<p id="demo"></p>
<script>
var cars = ["Saab","Volvo","BMW"];
document.getElementById("demo").innerHTML = cars[0];
</script>
</body>
</html>
JavaScript Objects
Objek JavaScript ditulis dengan kurung kurawal {}.
Properti objek ditulis sebagai nama: pasangan nilai, dipisahkan oleh koma.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<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>
The Typeof Operator
Anda dapat menggunakan tipe JavaScript dari operator untuk menemukan tipe variabel
JavaScript.
Typeof operator mengembalikan tipe variabel atau ekspresi:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "" + "<br>" +
typeof "John" + "<br>" +
typeof "John Doe";
</script>
</body>
</html>
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof 0 + "<br>" +
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>
</body>
</html>
Undefined
Dalam JavaScript, sebuah variabel tanpa nilai, memiliki nilai yang tidak terdefinisi.
Jenisnya juga tidak terdefinisi.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>The value (and the data type) of a variable with no value is
<b>undefined</b>.</p>
<p id="demo"></p>
<script>
var car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
Variabel apa pun dapat dikosongkan, dengan menetapkan nilai ke tidak terdefinisi.
Jenisnya juga tidak akan ditentukan.
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>
<p id="demo"></p>
<script>
var car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>
Empty Value
Nilai kosong tidak ada hubungannya dengan undefined.
String kosong memiliki nilai hukum dan tipe.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>An empty string has both a legal value and a type:</p>
<p id="demo"></p>
<script>
var car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>
</body>
</html>
Null
Dalam JavaScript null adalah "tidak ada". Seharusnya sesuatu yang tidak ada.
Sayangnya, dalam JavaScript, tipe data null adalah objek.
Anda dapat menganggapnya sebagai bug dalam JavaScript yang tipenya null adalah objek.
Itu harus nol.
Anda dapat mengosongkan objek dengan mengaturnya ke nol:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Objects can be emptied by setting the value to <b>null</b>.</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>
</body>
</html>
Anda juga dapat mengosongkan objek dengan mengaturnya ke tidak terdefinisi:
Contoh
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Objects can be emptied by setting the value to <b>undefined</b>.</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = undefined;
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>
Difference Between And Different and Null
undefined dan null bernilai sama tetapi berbeda dalam jenis:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript</h2>
<p>Undefined and null are equal in value but different in type:</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br><br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>
</body>
</html>
Primitive Data
Nilai data primitif adalah nilai data tunggal sederhana tanpa properti dan metode
tambahan.
Operator typeof dapat mengembalikan salah satu dari tipe primitif ini:
tali
jumlah
boolean
tidak terdefinisi
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof "john" + "<br>" +
typeof 3.14 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof x;
</script>
</body>
</html>
Complex Data
Operator typeof dapat mengembalikan salah satu dari dua tipe kompleks:
fungsi
obyek
Operator typeof mengembalikan "objek" untuk objek, array, dan null.
Operator typeof tidak mengembalikan "objek" untuk fungsi.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript typeof</h2>
<p>The typeof operator returns object for both objects, arrays, and null.</p>
<p>The typeof operator does not return object for functions.</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof {name:'john', age:34} + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof null + "<br>" +
typeof function myFunc(){};
</script>
</body>
</html>
JAVASCRIPT FUNCTION
Fungsi JavaScript adalah blok kode yang dirancang untuk melakukan tugas tertentu.
Fungsi JavaScript dijalankan ketika "sesuatu" memanggilnya (menyebutnya).
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation, and returns the
result:</p>
<p id="demo"></p>
<script>
function myFunction(p1, p2) {
return p1 * p2;
}
document.getElementById("demo").innerHTML = myFunction(4, 3);
</script>
</body>
</html>
Function Return
Saat JavaScript mencapai pernyataan pengembalian, fungsi tersebut akan berhenti
dieksekusi.
Jika fungsi dipanggil dari pernyataan, JavaScript akan "kembali" untuk mengeksekusi kode
setelah pernyataan pemanggilan.
Fungsi sering menghitung nilai balik. Nilai kembali "dikembalikan" kembali ke
"penelepon":
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function which performs a calculation and returns the
result:</p>
<p id="demo"></p>
<script>
var x = myFunction(4, 3);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
return a * b;
}
</script>
</body>
</html>
Why Function?
Anda dapat menggunakan kembali kode: Tetapkan kode satu kali, dan gunakan berkali-
kali.
Anda dapat menggunakan kode yang sama berkali-kali dengan argumen yang berbeda,
untuk menghasilkan hasil yang berbeda.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>This example calls a function to convert from Fahrenheit to Celsius:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
</script>
</body>
</html>
Using () Operator Invokes The Function
Menggunakan contoh di atas, toCelsius merujuk ke objek fungsi, dan toCelsius ()
mengacu pada hasil fungsi.
Mengakses fungsi tanpa () akan mengembalikan definisi fungsi alih-alih hasil fungsi:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Accessing a function without () will return the function definition instead of
the function result:</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius;
</script>
</body>
</html>
Functions Used as Variable Values
Fungsi dapat digunakan dengan cara yang sama seperti Anda menggunakan variabel, di
semua jenis rumus, tugas, dan perhitungan.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<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>
Local Variable
Variabel dideklarasikan dalam fungsi JavaScript, menjadi LOKAL ke fungsi.
Variabel lokal hanya dapat diakses dari dalam fungsi.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Functions</h2>
<p>Outside myFunction() carName is undefined.</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
var carName = "Volvo";
document.getElementById("demo1").innerHTML =
typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML =
typeof carName;
</script>
</body>
</html>
JS Objects
JavaScript Objects
Anda telah mempelajari bahwa variabel JavaScript adalah wadah untuk nilai data.
Kode ini memberikan nilai sederhana (Fiat) ke variabel bernama mobil:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Variables</h2>
<p id="demo"></p>
<script>
// Create and display a variable:
var car = "Fiat";
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>
Objek juga variabel. Tetapi objek dapat mengandung banyak nilai.
Kode ini memberikan banyak nilai (Fiat, 500, putih) ke variabel bernama mobil:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
var car = {type:"Fiat", model:"500", color:"white"};
// Display some data from the object:
document.getElementById("demo").innerHTML = "The car type is " + car.type;
</script>
</body>
</html>
Object Definition
Anda mendefinisikan (dan membuat) objek JavaScript dengan objek literal:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Spasi dan jeda baris tidak penting. Definisi objek dapat menjangkau beberapa baris:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>
</body>
</html>
Accessing Object Properties
Anda dapat mengakses properti objek dengan dua cara:
1. objectName.propertyName
2. objectName["propertyName"]
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<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>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566
};
// Display some data from the object:
document.getElementById("demo").innerHTML =
person.firstName + " " + person.lastName;
</script>
</body>
</html>
Accessing Object Methods
Anda mengakses metode objek dengan sintaks berikut:
1. objectName.methodName()
2. name = person.fullName();
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>An object method is a function definition, stored as a property value.</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
Jika Anda mengakses metode tanpa tanda kurung (), itu akan mengembalikan definisi
fungsi:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Objects</h2>
<p>If you access an object method without (), it will return the function definition:</p>
<p id="demo"></p>
<script>
// Create an object:
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function() {
return this.firstName + " " + this.lastName;
}
};
// Display data from the object:
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>
JS Events
HTML Events
Dalam contoh berikut, atribut onclick (dengan kode), ditambahkan ke elemen <button>:
<!DOCTYPE html>
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time
is?</button>
<p id="demo"></p>
</body>
</html>
Pada contoh di atas, kode JavaScript mengubah konten elemen dengan id = "demo".
Dalam contoh berikut, kode mengubah konten elemennya sendiri (menggunakan
this.innerHTML):
<!DOCTYPE html>
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
<!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>
JS Strings
JavaScript Strings
String JavaScript adalah nol atau lebih karakter yang ditulis di dalam tanda kutip.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p id="demo"></p>
<script>
var x = "John Doe"; // String written inside quotes
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Anda dapat menggunakan tanda kutip tunggal atau ganda:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>Strings are written inside quotes. You can use single or double quotes:</p>
<p id="demo"></p>
<script>
var carName1 = "Volvo
XC60"; // Double quotes
var carName2 = 'Volvo XC60'; // Single quotes
document.getElementById("demo").innerHTML =
carName1 + " " + carName2;
</script>
</body>
</html>
Anda dapat menggunakan tanda kutip di dalam string, asalkan tidak cocok dengan tanda
kutip yang mengelilingi string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>You can use quotes inside a string, as long as they don't match the quotes surrounding
the string.</p>
<p id="demo"></p>
<script>
var answer1 = "It's alright";
var answer2 = "He is called 'Johnny'";
var answer3 = 'He is called "Johnny"';
document.getElementById("demo").innerHTML =
answer1 + "<br>" + answer2 + "<br>" + answer3;
</script>
</body>
</html>
String Length
Untuk menemukan panjang string, gunakan properti length:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Properties</h2>
<p>The length property returns the length of a
string:</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>
Escape Character
Urutan \ "menyisipkan kutipan ganda dalam sebuah string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p>The escape sequence \" inserts
a double quote in a string.</p>
<p id="demo"></p>
<script>
var x = "We are the so-called \"Vikings\" from the north.";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Breaking Long Code Lines
Untuk keterbacaan terbaik, programmer sering suka menghindari baris kode yang lebih
panjang dari 80 karakter.
Jika pernyataan JavaScript tidak cocok pada satu baris, tempat terbaik untuk
memutuskannya adalah setelah operator:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p>
The best place to break a code line is after an operator or a comma.
</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello Dolly!";
</script>
</body>
</html>
Anda tidak dapat memecah baris kode dengan garis miring terbalik:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Statements</h2>
<p id="demo">You cannot break a code line with a \ backslash.</p>
<script>
document.getElementById("demo").innerHTML
=\
"Hello Dolly.";
</script>
</body>
</html>
Strings Can be Objects
Biasanya, string JavaScript adalah nilai primitif, dibuat dari literal: var firstName =
"John";
Tetapi string juga dapat didefinisikan sebagai objek dengan kata kunci new: var
firstName = new String("John");
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML =
typeof x + "<br>" + typeof y;
</script>
</body>
</html>
Saat menggunakan operator ==, string sama adalah sama:
<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>Strings and objects cannot be safely
compared.</p>
<p id="demo"></p>
<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
Saat menggunakan operator ===, string yang sama tidak sama, karena operator ===
mengharapkan persamaan dalam jenis dan nilai.
<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>Strings and objects cannot be safely compared.</p>
<p id="demo"></p>
<script>
var x = "John"; // x is a string
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x===y);
</script>
</body>
</html>
Atau bahkan lebih buruk. Objek tidak dapat dibandingkan:
<!DOCTYPE html>
<html>
<body>
<h2>Never Create Strings as objects.</h2>
<p>JavaScript objects cannot be compared.</p>
<p id="demo"></p>
<script>
var x = new String("John"); // x is an object
var y = new String("John"); // y is an object
document.getElementById("demo").innerHTML = (x==y);
</script>
</body>
</html>
JS String Methods
String Length
Properti length mengembalikan panjang string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Properties</h2>
<p>The length property returns the length of a
string:</p>
<p id="demo"></p>
<script>
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
document.getElementById("demo").innerHTML = txt.length;
</script>
</body>
</html>
Finding a Dtring in a String
Metode indexOf () mengembalikan indeks (posisi) kemunculan pertama teks tertentu
dalam string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The indexOf() method returns the position of the first occurrence of a specified
text:</p>
<p id="demo"></p>
<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate");
document.getElementById("demo").innerHTML = pos;
</script>
</body>
</html>
Metode lastIndexOf () mengembalikan indeks kemunculan terakhir dari teks yang
ditentukan dalam string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The lastIndexOf() method returns the position of the last occurrence of a specified
text:</p>
<p id="demo"></p>
<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate");
document.getElementById("demo").innerHTML = pos;
</script>
</body>
</html>
Baik indexOf (), dan lastIndexOf () mengembalikan -1 jika teks tidak ditemukan :
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Both indexOf(), and lastIndexOf() return -1 if the text is not found:</p>
<p id="demo"></p>
<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("John");
document.getElementById("demo").innerHTML = pos;
</script>
</body>
</html>
Kedua metode menerima parameter kedua sebagai posisi awal untuk pencarian:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The indexOf() method accepts a second parameter as the starting position for the
search:</p>
<p id="demo"></p>
<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.indexOf("locate",15);
document.getElementById("demo").innerHTML = pos;
</script>
</body>
</html>
Metode lastIndexOf () mencari mundur (dari ujung ke awal), yang berarti: jika parameter
kedua adalah 15, pencarian dimulai pada posisi 15, dan mencari ke awal string.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The lastIndexOf() method accepts a second parameter as the starting position for
the search.</p>
<p>Remember that the lastIndexOf() method searches backwards, so position 15 means
start the search at position 15, and search to the beginning.</p>
<p>Position 15 is position 15 from the beginning.</p>
<p id="demo"></p>
<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.lastIndexOf("locate", 15);
document.getElementById("demo").innerHTML = pos;
</script>
</body>
</html>
Searching for a String in a String
Metode search () mencari string untuk nilai yang ditentukan dan mengembalikan posisi
pertandingan:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The search() method returns the position of the first occurrence of a specified text in
a string:</p>
<p id="demo"></p>
<script>
var str = "Please locate where 'locate' occurs!";
var pos = str.search("locate");
document.getElementById("demo").innerHTML = pos;
</script>
</body>
</html>
The slice() Method
slice () mengekstraksi bagian string dan mengembalikan bagian yang diekstraksi dalam
string baru.
Metode ini mengambil 2 parameter: posisi awal, dan posisi akhir (akhir tidak termasuk).
Contoh ini mengiris sebagian string dari posisi 7 ke posisi 12 (13-1):
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The slice() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
var res = str.slice(7,13);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
The substring() Method
substring () mirip dengan slice ().
Perbedaannya adalah bahwa substring () tidak dapat menerima indeks negatif.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
var res = str.substring(7,13);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
The substr() Mehod
substr () mirip dengan slice ().
Perbedaannya adalah bahwa parameter kedua menentukan panjang bagian yang
diekstraksi.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(7,6);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
Jika Anda menghilangkan parameter kedua, substr () akan memotong sisa string.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(7);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
Jika parameter pertama negatif, posisi dihitung dari akhir string.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The substr() method extract a part of a string
and returns the extracted parts in a new string:</p>
<p id="demo"></p>
<script>
var str = "Apple, Banana, Kiwi";
var res = str.substr(-4);
document.getElementById("demo").innerHTML = res;
</script>
</body>
</html>
Replacing String Content
Metode replace () menggantikan nilai yang ditentukan dengan nilai lain dalam string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Secara default, metode replace () hanya menggantikan kecocokan pertama:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("Microsoft","W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Secara default, metode replace () peka huruf besar-kecil. Menulis MICROSOFT (dengan
huruf besar) tidak akan berfungsi:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Try to replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace("MICROSOFT","W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
<p><strong>Note:</strong> Nothing will happen. By default, the replace() method is
case sensitive. Writing MICROSOFT (with upper-case) will not work.</p>
</body>
</html>
Untuk mengganti huruf tidak sensitif, gunakan ekspresi reguler dengan tanda / i
(insensitive):
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace "Microsoft" with "W3Schools" in the paragraph below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/MICROSOFT/i,"W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Untuk mengganti semua kecocokan, gunakan ekspresi reguler dengan tanda / g (global
match):
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>Replace all occurrences of "Microsoft" with "W3Schools" in the paragraph
below:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Please visit Microsoft and Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo").innerHTML;
var txt = str.replace(/Microsoft/g,"W3Schools");
document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Converting to Upper and Lower Case
Sebuah string dikonversi ke huruf besar dengan toUpperCase ():
<!DOCTYPE html>
<html>
<body>
<p>Convert string to upper case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toUpperCase();
}
</script>
</body>
</html>
Sebuah string dikonversi menjadi huruf kecil dengan toLowerCase ():
<!DOCTYPE html>
<html>
<body>
<p>Convert string to lower case:</p>
<button onclick="myFunction()">Try it</button>
<p id="demo">Hello World!</p>
<script>
function myFunction() {
var text = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = text.toLowerCase();
}
</script>
</body>
</html>
The concat() Method
concat () bergabung dengan dua string atau lebih:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The concat() method joins two or more strings:</p>
<p id="demo"></p>
<script>
var text1 = "Hello";
var text2 = "World!";
var text3 = text1.concat(" ",text2);
document.getElementById("demo").innerHTML = text3;
</script>
</body>
</html>
String.trim()
Metode trim () menghilangkan spasi putih dari kedua sisi string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String.trim()</h2>
<p>Click the button to alert the string with removed whitespace.</p>
<button onclick="myFunction()">Try it</button>
<p><strong>Note:</strong> The trim() method is not supported in Internet Explorer 8
and earlier versions.</p>
<script>
function myFunction() {
var str = " Hello World! ";
alert(str.trim());
}
</script>
</body>
</html>
Jika Anda perlu mendukung IE 8, Anda dapat menggunakan ganti () dengan ekspresi
reguler sebagai gantinya:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String.trim()</h2>
<p>IE 8 does not support String.trim(). To trim a string you can use a regular expression
instead.</p>
<script>
var str = " Hello World! ";
alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));
</script>
</body>
</html>
Anda juga dapat menggunakan solusi ganti di atas untuk menambahkan fungsi trim ke
JavaScript String.prototype:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String.trim()</h2>
<p>IE 8 does not support String.trim(). To trim a string you can use a polyfill.</p>
<script>
if (!String.prototype.trim) {
String.prototype.trim = function () {
return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
};
}
var str = " Hello World! ";
alert(str.trim());
</script>
</body>
</html>
The CharAt() Method
Metode charAt () mengembalikan karakter pada indeks (position) yang ditentukan
dalam sebuah string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>The charAt() method returns the character at a given position in a string:</p>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charAt(0);
</script>
</body>
</html>
The charCodeAt() Method
Metode charCodeAt () mengembalikan unicode karakter pada indeks yang ditentukan
dalam string:
Metode mengembalikan kode UTF-16 (bilangan bulat antara 0 dan 65535).
<!DOCTYPE html>
<html>
<body>
<p>The charCodeAt() method returns the unicode of the character at a given position in
a string:</p>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str.charCodeAt(0);
</script>
</body>
</html>
Property Access
ECMAScript 5 (2009) memungkinkan akses properti [] pada string:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript String Methods</h2>
<p>ECMAScript 5 allows property acces on strings:</p>
<p id="demo"></p>
<script>
var str = "HELLO WORLD";
document.getElementById("demo").innerHTML = str[0];
</script>
</body>
</html>
Converting a String to an Array
String dapat dikonversi ke array dengan metode split ():
<!DOCTYPE html>
<html>
<body>
<p>Click "Try it" to display the first array element, after a string split.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "a,b,c,d,e,f";
var arr = str.split(",");
document.getElementById("demo").innerHTML = arr[0];
}
</script>
</body>
</html>
Jika pemisah dihilangkan, array yang dikembalikan akan berisi seluruh string dalam
indeks [0].
Jika pemisahnya "", array yang dikembalikan akan berupa array karakter tunggal:
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
var str = "Hello";
var arr = str.split("");
var text = "";
var i;
for (i = 0; i < arr.length; i++) {
text += arr[i] + "<br>"
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Anda mungkin juga menyukai
- Mobile Application On Android PlatformBelum ada peringkatMobile Application On Android Platform141 halaman
- D3 - Modul - Algoritma&pemograman - I (C++)Belum ada peringkatD3 - Modul - Algoritma&pemograman - I (C++)158 halaman
- Pertemuan 1 Pengenalan Kotlin (Part 1)Belum ada peringkatPertemuan 1 Pengenalan Kotlin (Part 1)49 halaman
- Modul Web Programming II (682) - UBSI - Upd Juli 2021Belum ada peringkatModul Web Programming II (682) - UBSI - Upd Juli 2021135 halaman
- TypeScript Object Oriented ProgrammingBelum ada peringkatTypeScript Object Oriented Programming96 halaman
- Ebook Membuat Aplikasi Mobile Dengan QT SDK Versi 2 by IqbalBelum ada peringkatEbook Membuat Aplikasi Mobile Dengan QT SDK Versi 2 by Iqbal204 halaman
- Rancang Bangun Game Edukasi Ular Tangga Pada Aplikasi Mobile100% (3)Rancang Bangun Game Edukasi Ular Tangga Pada Aplikasi Mobile143 halaman
- JavaScript Object Oriented ProgrammingBelum ada peringkatJavaScript Object Oriented Programming132 halaman
- Perancangan Sistem Informasi Pelayanan Jasa Servis Dan Inventory Pada Bengkel Semoga Jaya Berbasis Web Menggunakan Framework NuxtBelum ada peringkatPerancangan Sistem Informasi Pelayanan Jasa Servis Dan Inventory Pada Bengkel Semoga Jaya Berbasis Web Menggunakan Framework Nuxt197 halaman
- Membangun Aplikasi Mutlimedia Player Menggunakan Java Media Frame Work AbstractBelum ada peringkatMembangun Aplikasi Mutlimedia Player Menggunakan Java Media Frame Work Abstract9 halaman
- Salinan Terjemahan 0525 Front End Developer HandbookBelum ada peringkatSalinan Terjemahan 0525 Front End Developer Handbook141 halaman
- Cara Membuat Project Android Menggunakan Eclipse PDF67% (3)Cara Membuat Project Android Menggunakan Eclipse PDF12 halaman
- Soal PTS Pemrograman Web Dan Perangkat Bergerak Kelas XI Semester 1Belum ada peringkatSoal PTS Pemrograman Web Dan Perangkat Bergerak Kelas XI Semester 13 halaman
- Modul Praktikum Berorientasi Objek 201 - 9Belum ada peringkatModul Praktikum Berorientasi Objek 201 - 9117 halaman
- Soal Pemrograman Web Dan Perangkat Bergerak XiBelum ada peringkatSoal Pemrograman Web Dan Perangkat Bergerak Xi4 halaman
- Pemrograman Web Mobile Dengan Apache CorBelum ada peringkatPemrograman Web Mobile Dengan Apache Cor110 halaman
- Cara Membuat CRUD Dengan Java MySQL Part 1 - Malas NgodingBelum ada peringkatCara Membuat CRUD Dengan Java MySQL Part 1 - Malas Ngoding12 halaman
- Modul Praktikum 8 - PPW - Reguler - Genap 2023-2024100% (1)Modul Praktikum 8 - PPW - Reguler - Genap 2023-202415 halaman
- Modul Pemrograman Bahasa C# Fundamental Temporary 9 Desember 2013 PDFBelum ada peringkatModul Pemrograman Bahasa C# Fundamental Temporary 9 Desember 2013 PDF94 halaman
- 06-Javascript Basic Dan Manipulasi DOMBelum ada peringkat06-Javascript Basic Dan Manipulasi DOM33 halaman
