Kursus Membuat Web

iklan

Mengenal JavaScript

JavaScript adalah bahasa pemrograman yang paling populer di dunia.

Halaman ini berisi beberapa contoh dari apa yang dapat dilakukan JavaScript.

Mengapa Mempelajari JavaScript ?

JavaScript adalah salah satu dari 3 bahasa yang harus dipelajari oleh semua pengembang web :

  1. HTML untuk menentukan isi dari halaman web
  2. CSS untuk menentukan layout (tata letak) halaman web
  3. JavaScript untuk sebuah halaman web yang interaktif

Tutorial ini adalah tentang JavaScript , dan bagaimana JavaScript bekerja dengan HTML dan CSS.

JavaScript Dapat Mengubah isi HTML

Salah satu dari banyak metode HTML yang digunakan adalah dengan document.getElementById().

Contoh berikut ini adalah "menemukan" elemen HTML dengan id = "demo", dan mengubah isinya ( innerHTML ):

Contoh :

<!doctype html>
<html lang="id">
	<head>
		<title>contoh</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Apa Yang Bisa Dilakukan JavaScript?</h1>
		<p id="demo">JavaScript dapat merubah isi HTML.</p>
		<button type="button" onclick="document.getElementById('demo').innerHTML = 'Hallo JavaScript!'"> Klick Saya!</button>
	</body>
</html>

JavaScript Dapat Mengubah Attribute HTML

Contoh berikut ini akan mengubah gambar HTML, dengan mengubah attribute src dari tag <img> :

<!doctype html>
<html lang="id">
	<head>
		<title>contoh</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>JavaScript Dapat Mengubah Attribute HTML</h1>
		<img id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
		<p>Klick bola lampu untuk menghidupkan atau mematikannya.</p>
		<script>
		  function changeImage() {
		  var image = document.getElementById('myImage');
		  if (image.src.match("bulbon")) {
		  image.src = "pic_bulboff.gif";
		  } else {
		  image.src = "pic_bulbon.gif";
		  }
		  }
		 </script>
	</body>
</html>

JavaScript Dapat Mengubah Style HTML ( CSS )

Mengubah style elemen HTML, adalah varian dari mengubah attribute HTML :

<!doctype html>
<html lang="id">
	<head>
		<title>contoh</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>Apa Yang Bisa Dilakukan JavaScript?</h1>
		<p id="demo">JavaScript dapat merubah style dari sebuah elemen HTML.</p>
		<script>
		  function myFunction() {
		  var x = document.getElementById("demo");
		  x.style.fontSize = "25px"; 
		  x.style.color = "red"; 
		  }
		</script>
		<button type="button" onclick="myFunction()">Klick Saya!</button>
	</body>
</html>

JavaScript Bisa Memvalidasi Data

JavaScript sering digunakan untuk memvalidasi inputan pengguna :

<!doctype html>
<html lang="id">
	<head>
		<title>contoh</title>
		<meta charset="utf-8">
	</head>
	<body>
		<h1>JavaScript Bisa Memvalidasi Data</h1>
		<p>Silakan masukkan nomor antara 1 sampai 10:</p>
		<input id="numb" type="number">
		<button type="button" onclick="myFunction()">Submit</button>
		<p id="demo"></p>
		<script>
		  function myFunction() {
		  var x, text;
		 // memdapatkan nilai dari inputan dengan id="numb"
		  x = document.getElementById("numb").value;
		 // jika x bukan angka atau lebih kecil 1 atau lebih besar dari 10
		  if (isNaN(x) || x < 1 || x > 10) {
		  text = "Input tidak valid";
		  } else {
		  text = "Input OK";
		  }
		  document.getElementById("demo").innerHTML = text;
		  }
		</script>
		</body>
</html> 

Tahukah Anda ?

JavaScript dan Java adalah bahasa yang sama sekali berbeda, baik dalam konsep dan desain.

JavaScript diciptakan oleh Brendan Eich pada tahun 1995, dan menjadi standar ECMA pada tahun 1997.

ECMA - 262 adalah nama resmi . ECMAScript 5 ( JavaScript 1.8.5 - Juli 2010) adalah standar terbaru saat tulisan ini Saya tulis.

Berikutnya ...

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015