JavaScript adalah bahasa pemrograman HTML dan Web.
Pemrograman membuat komputer melakukan apa yang ingin mereka lakukan.
JavaScript mudah dipelajari.
Tutorial ini akan mengajarkan Anda JavaScript dari dasar hingga lanjutan.
contoh:
<!doctype html>
<html>
<head>
<title>Belajar java</title>
</head>
<body>
<h1>My first javaScript</h1>
<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">
click disini untuk melihat waktu dan tanggal.</button>
<p id="demo"></p>
</body>
</html>
Mengapa Studi JavaScript?
JavaScript adalah salah satu dari 3 bahasa semua pengembang web harus belajar:
1. HTML untuk menentukan isi dari halaman web
2. CSS untuk menentukan tata letak halaman web
3. JavaScript untuk program perilaku halaman web
Tutorial ini adalah tentang JavaScript, dan bagaimana JavaScript bekerja dengan HTML dan CSS.
Kecepatan Belajar
Dalam tutorial ini, kecepatan belajar adalah pilihan Anda.
Semua terserah padamu.
Jika Anda sedang berjuang, istirahat, atau membaca ulang materi.
Selalu pastikan Anda memahami contoh dan latihan.
JavaScript Pendahuluan
JavaScript adalah bahasa pemrograman yang paling populer di dunia.
Halaman ini berisi beberapa contoh dari apa yang dapat Anda lakukan JavaScript.
JavaScript Dapat Mengubah HTML Konten
Salah satu dari banyak metode HTML adalah getElementById ().
Contoh ini menggunakan metode untuk "menemukan" elemen HTML (dengan id = "demo"), dan mengubah konten elemen (innerHTML) untuk "Hello JavaScript":
onclick="document.getElementById('demo').innerHTML ='Hello JavaScript!'"
JavaScript Dapat Mengubah Atribut HTML
Contoh ini mengubah gambar HTML, dengan mengubah atribut src dari tag <img>:
<!doctype html>
<html>
<head>
<title>Belajar java</title>
</head>
<body>
<h1>My first javaScript</h1>
<img id="gambarku" onclick="changeImage()" src="image/pic_bulboff.gif"
width="100" height="180">
<p>klik gambar untuk on/off lampu.<p>
<script>
function changeImage() {
var image = document.getElementById('gambarku');
if (image.src.match("bulbon")){
image.src = "image/pic_bulboff.gif";
} else {
image.src = "image/pic_bulbon.gif";
}
}
</script>
</body>
</html>
JavaScript Dapat Mengubah Gaya HTML (CSS)
Mengubah gaya elemen HTML, adalah varian dari perubahan atribut HTML:
<!doctype html>
<html>
<head>
<title>Belajar java</title>
</head>
<body>
<h1>My first javaScript</h1>
<p id="contoh"> saya sekarang belajar JavaScript</p>
<script>
function myFunction() {
var x = document.getElementById("contoh");
x.style.fontSize = "25px";
x.style.color = "blue";
}
</script>
<button type="button" onclick="myFunction()">klik disini</button>
</body>
</html>
JavaScript Bisa Validasi data
JavaScript sering digunakan untuk memvalidasi input:
<!DOCTYPE html>
<html>
<head>
<title>Latihan 5</title>
</head>
<body>
<p>Silahkan input nomor 1 - 10</p>
<input id="numb" type="number">
<button type="button" onclick="fungsiku()">Proses</button>
<p id="demo"></p>
<script>
function fungsiku() {
var x, text;
x = document.getElementById("numb").value;
if (isNaN(x) || x < 1 || x > 10 ) {
text = "Input not valid";
}else{
text = " Input Ok!!";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
<html>
<head>
<title>Latihan 5</title>
</head>
<body>
<p>Silahkan input nomor 1 - 10</p>
<input id="numb" type="number">
<button type="button" onclick="fungsiku()">Proses</button>
<p id="demo"></p>
<script>
function fungsiku() {
var x, text;
x = document.getElementById("numb").value;
if (isNaN(x) || x < 1 || x > 10 ) {
text = "Input not valid";
}else{
text = " Input Ok!!";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
0 komentar:
Posting Komentar