Kursus Membuat Web

iklan

Dimana JavaScript Di Letakkan

JavaScript dapat ditempatkan di bagian tag <body> dan tag <head> pada halaman HTML.

Tag <script>

Di HTML, Kode JavaScript harus diletakkan diantara tag <script> dan </script>.

Contoh
<script>
document.getElementById("demo").innerHTML = "Hallo JavaScript";
</script>

Catatan : Pada contoh yang lama mungkin menggunakan attribute type: <script type="text/javascript">. Menuliskan attribute type sekarang tidak wajib lagi. JavaScript adalah default scripting language di HTML.

JavaScript Function dan Event

JavaScript function adalah sebuah block kode JavaScript, yang akan dieksekusi apabila "dipanggil".

Sebagai contoh, sebuah function akan dijalankan apabila terjadi sebuah event, seperti bila user meng-click tombol.

Anda akan belajar lebih banyak tentang functions dan event di penjelasan lain.

Kode JavaScript di tag <head> atau <body>

Anda dapat menempatkan beberapa baris kode dalam sebuah dokumen HTML.

Script bisa ditempatkan di bagian tag <body>, atau di tag <head> dari halaman HTML, atau diantara keduanya.

Catatan : Menempatkan semua kode dalam satu tempat, adalah sesuatu yang baik.

JavaScript di <head>

Pada contoh ini, sebuah function JavaScript di letakkan di bagian <head> dari sebuah halaman HTML.

function dipanggil bila button di click:

Contoh
<script>
document.getElementById("demo").innerHTML = "Hallo JavaScript";
</script>

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