Java Script
JavaScript adalah bahasa scripting yang paling populer di internet, dan
bekerja di semua browser utama, seperti Internet Explorer, Firefox, Chrome, Opera,
dan Safari.
Sebelum melanjutkan, anda harus memiliki pemahaman dasar sebagai berikut:
Sebelum melanjutkan, anda harus memiliki pemahaman dasar sebagai berikut:
- HTML and CSS
What
is JavaScript?
- JavaScript dirancang untuk menambah interaktivitas ke halaman HTML
- JavaScript adalah bahasa scripting
- Sebuah bahasa scripting adalah bahasa pemrograman yang ringan
- JavaScript biasanya embedded langsung ke dalam halaman HTML
- JavaScript adalah bahasa yg ditafsirkan (berarti bahwa script mengeksekusi tanpa pendahuluan kompilasi)
- Setiap orang dapat menggunakan JavaScript tanpa membeli lisensi
What
Can JavaScript do?
- JavaScript memberikan desainer HTML alat pemrograman - penulis HTML biasanya bukan programmer, tapi JavaScript adalah bahasa scripting dengan sintaks yang sangat sederhana! Hampir setiap orang dapat meletakkan "potongan" kecil dari kode ke dalam halaman HTML mereka
- JavaScript dapat bereaksi terhadap peristiwa - JavaScript dapat diatur untuk mengeksekusi ketika sesuatu terjadi, seperti saat halaman selesai loading atau ketika pengguna mengklik elemen HTML
- JavaScript dapat membaca dan menulis elemen HTML - Sebuah JavaScript dapat membaca dan mengubah isi dari elemen HTML
- JavaScript dapat digunakan untuk memvalidasi data - JavaScript dapat digunakan untuk memvalidasi data formulir sebelum diserahkan ke server. Ini menghemat server dari pemrosesan tambahan
- JavaScript dapat digunakan untuk mendeteksi browser pengunjung - Sebuah JavaScript dapat digunakan untuk mendeteksi browser pengunjung, dan - tergantung pada browser - buka halaman lain yang khusus dirancang untuk browser yang
- JavaScript dapat digunakan untuk membuat cookies - JavaScript dapat digunakan untuk menyimpan dan mengambil informasi pada komputer pengunjung
The example below writes a <p> element with current date
information to the HTML document:
<html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
<body>
<h1>My First Web Page</h1>
<script type="text/javascript">
document.write("<p>" + Date() + "</p>");
</script>
</body>
</html>
Untuk
memasukkan sebuah JavaScript ke dalam halaman HTML, gunakan tag <script>. Di dalam tag <script> menggunakan
jenis atribut untuk mendefinisikan bahasa scripting. <script> dan </ script> memberitahu dimana JavaScript mulai dan
berakhir:
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
... some JavaScript code ...
</script>
</body>
</html>
<body>
<h1>My First Web Page</h1>
<p id="demo">This is a paragraph.</p>
<script type="text/javascript">
... some JavaScript code ...
</script>
</body>
</html>
JavaScript Statements
Sebuah pernyataan JavaScript adalah perintah untuk browser. Tujuan dari perintah adalah untuk memberitahu browser apa yang harus dilakukan.JavaScript Code
Kode JavaScript (atau hanya JavaScript) adalah urutan pernyataan JavaScript. Setiap pernyataan dieksekusi oleh browser dalam urutan yang tertulis.Contoh ini akan menulis judul dan dua paragraf ke halaman web:
Example:
<script type="text/javascript">
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
JavaScript Comments
Komentar dapat
ditambahkan untuk menjelaskan JavaScript, atau untuk membuat kode lebih mudah
dibaca.
Komentar baris tunggal mulai dengan / /.
Contoh berikut ini menggunakan komentar untuk menjelaskan baris kode:
Komentar baris tunggal mulai dengan / /.
Contoh berikut ini menggunakan komentar untuk menjelaskan baris kode:
Example:
<script type="text/javascript">
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
// Write a heading
document.write("<h1>This is a heading</h1>");
// Write two paragraphs:
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
JavaScript Multi-Line Comments
Komentar garis multi dimulai dengan / * dan diakhiri dengan * /.Contoh berikut ini menggunakan komentar untuk menjelaskan garis multi kode:
Example:
<script
type="text/javascript">
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
/*
The code below will write
one heading and two paragraphs
*/
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>This is another paragraph.</p>");
</script>
JavaScript
Variables
Seperti aljabar, variabel JavaScript yang
digunakan untuk menyimpan nilai atau ekspresi.
Sebuah variabel dapat memiliki nama pendek, seperti x, atau nama yang lebih deskriptif, seperti carname.
Aturan untuk nama variabel JavaScript:
• Nama-nama variabel adalah case sensitif (y dan Y adalah dua variabel yang berbeda)
• Nama-nama variabel harus dimulai dengan huruf, karakter $, atau karakter garis bawah
Sebuah variabel dapat memiliki nama pendek, seperti x, atau nama yang lebih deskriptif, seperti carname.
Aturan untuk nama variabel JavaScript:
• Nama-nama variabel adalah case sensitif (y dan Y adalah dua variabel yang berbeda)
• Nama-nama variabel harus dimulai dengan huruf, karakter $, atau karakter garis bawah
Declaring (Creating) JavaScript Variables
Membuat variabel dalam JavaScript yang paling sering disebut sebagai "menyatakan" variabel.Anda mendeklarasikan variabel JavaScript dengan kata kunci var:
var x;
var carname;
Setelah deklarasi di atas, variabel kosong (mereka tidak memiliki nilai-nilai belum).var carname;
Namun, Anda juga bisa memberikan nilai pada variabel ketika Anda menyatakan mereka:
var x=5;
var carname="Volvo";
var carname="Volvo";
JavaScript Operators
The assignment operator = is used to assign values to JavaScript variables.The arithmetic operator + is used to add values together.
JavaScript Arithmetic Operators
Arithmetic operators are used to perform arithmetic between variables and/or values.Given that y=5, the table below explains the arithmetic operators:
JavaScript Assignment Operators
Assignment operators are used to assign values to JavaScript variables.Given that x=10 and y=5, the table below explains the assignment operators:
Adding Strings and Numbers
The rule is: If you add a number and a string, the result will be a string!
Example:
x=5+5;
document.write(x);
x="5"+"5";
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
document.write(x);
x="5"+"5";
document.write(x);
x=5+"5";
document.write(x);
x="5"+5;
document.write(x);
Logical Operators
Operator logika digunakan untuk menentukan logika antara variabel atau nilai.Mengingat bahwa x = 6 dan y = 3, tabel di bawah ini menjelaskan operator logika:
JavaScript If...Else Statements
Conditional
Statements
Sangat sering ketika Anda menulis kode,
Anda ingin melakukan tindakan yang berbeda untuk keputusan yang berbeda. Anda
dapat menggunakan pernyataan kondisional dalam kode Anda untuk melakukan ini.
Dalam JavaScript kita memiliki pernyataan bersyarat berikut:
Dalam JavaScript kita memiliki pernyataan bersyarat berikut:
·
if… - gunakan pernyataan ini untuk
mengeksekusi beberapa kode hanya jika kondisi yang ditentukan benar
·
if...else - gunakan pernyataan ini untuk mengeksekusi beberapa kode jika kondisi
benar dan kode lain jika kondisi salah
·
if...else
if....else -
gunakan pernyataan ini untuk memilih salah satu dari banyak blok kode yang akan
dieksekusi
·
switch - gunakan pernyataan ini
untuk memilih salah satu dari banyak blok kode yang akan dieksekusi
If Statement
Gunakan if… jika pernyataan untuk mengeksekusi beberapa kode hanya jika kondisi yang ditentukan benar.Syntax:
<script type="text/javascript">
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>
//Write a "Good morning" greeting if
//the time is less than 10
var d=new Date();
var time=d.getHours();
if (time<10)
{
document.write("<b>Good morning</b>");
}
</script>
If...else
Statement
Gunakan if .... else jika pernyataan lain untuk mengeksekusi beberapa kode jika kondisi benar dan kode lain jika
kondisi tidak benar.
Example:
<script type="text/javascript">
//If the time is less than 10, you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
//If the time is less than 10, you will get a "Good morning" greeting.
//Otherwise you will get a "Good day" greeting.
var d = new Date();
var time = d.getHours();
if (time < 10)
{
document.write("Good morning!");
}
else
{
document.write("Good day!");
}
</script>
If...else
if...else Statement
Gunakan
if....else if... jika pernyataan lain untuk memilih salah satu
dari beberapa blok kode yang akan
dieksekusi.
Example:
<script type="text/javascript">
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>
var d = new Date()
var time = d.getHours()
if (time<10)
{
document.write("<b>Good morning</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>Good day</b>");
}
else
{
document.write("<b>Hello World!</b>");
}
</script>
The
JavaScript Switch Statement
Gunakan pernyataan switch untuk memilih salah satu dari banyak blok kode
yang akan dieksekusi.
Ini adalah cara kerjanya: Pertama kita memiliki ekspresi n tunggal (paling sering variabel), yang dievaluasi sekali. Nilai ekspresi tersebut kemudian dibandingkan dengan nilai-nilai untuk setiap kasus dalam struktur. Jika ada pertandingan, blok kode yang terkait dengan kasus yang dieksekusi. Gunakan break untuk mencegah kode lari ke kasus berikutnya secara otomatis.
Ini adalah cara kerjanya: Pertama kita memiliki ekspresi n tunggal (paling sering variabel), yang dievaluasi sekali. Nilai ekspresi tersebut kemudian dibandingkan dengan nilai-nilai untuk setiap kasus dalam struktur. Jika ada pertandingan, blok kode yang terkait dengan kasus yang dieksekusi. Gunakan break untuk mencegah kode lari ke kasus berikutnya secara otomatis.
<script type="text/javascript">
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
var theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
//You will receive a different greeting based
//on what day it is. Note that Sunday=0,
//Monday=1, Tuesday=2, etc.
var d=new Date();
var theDay=d.getDay();
switch (theDay)
{
case 5:
document.write("Finally Friday");
break;
case 6:
document.write("Super Saturday");
break;
case 0:
document.write("Sleepy Sunday");
break;
default:
document.write("I'm looking forward to this weekend!");
}
</script>
JavaScript Popup Boxes
Alert
Box
Sebuah alert box ini sering
digunakan jika Anda ingin membuat informasi yakin datang melalui ke pengguna.
Ketika kotak peringatan muncul, pengguna harus klik "OK" untuk melanjutkan
Ketika kotak peringatan muncul, pengguna harus klik "OK" untuk melanjutkan
<html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html>
<head>
<script type="text/javascript">
function show_alert()
{
alert("I am an alert box!");
}
</script>
</head>
<body>
<input type="button" onclick="show_alert()" value="Show alert box" />
</body>
</html>
Confirm
Box
Sebuah confirm box ini sering digunakan jika Anda ingin pengguna untuk
memverifikasi atau menerima sesuatu.
Ketika sebuah confirm box muncul, pengguna harus klik "OK" atau "Batal" untuk melanjutkan.
Jika pengguna mengklik "OK", kotak mengembalikan nilai true. Jika pengguna mengklik "Batal", kotak kembali palsu.
Ketika sebuah confirm box muncul, pengguna harus klik "OK" atau "Batal" untuk melanjutkan.
Jika pengguna mengklik "OK", kotak mengembalikan nilai true. Jika pengguna mengklik "Batal", kotak kembali palsu.
Example:
<html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>
<head>
<script type="text/javascript">
function show_confirm()
{
var r=confirm("Press a button");
if (r==true)
{
alert("You pressed OK!");
}
else
{
alert("You pressed Cancel!");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_confirm()" value="Show confirm box" />
</body>
</html>
