Web Analytics Made Easy -
StatCounter
Belajar Bareng Java Script dan JQuery Sudah Sourse Code TInggal Copas - Website
Sat. Apr 20th, 2019

Belajar Bareng Java Script dan JQuery Sudah Sourse Code TInggal Copas

  1. Tujuan Praktikum
  • Mahasiswa dapat membuat contoh implementasi dari Javascript.
  • Mahasiswa dapat membuat dokumen *.js serta menghubungkannya dengan dokumen html.
  1. Manfaat Praktikum
  2. Teori singkat
  3. Java script

Javascript merupakan bahasa skrip yang ditempelkan pada pada halaman HTML kemudian diproses pada sisi klien. Penambahan JavaScript pada dasarnya untuk meningkatkan kemampuan dokumen HTML. Dengan adanya penambahan JavaScript memungkinkan untuk membuat validasi dari inputan pada sebuah formulir sebelum formulir tersebut dikirimkan ke server

Struktur dari Java Script.

<script language = “JavaScript”>

Syntax JavaScript

</script>

Funsi JavaScript pada html

  • Dapat merubah elemen HTML
  • Dapat menghapus elemen HTML
  • Dapat membuat elemen yang baru,
  • Dapat menyalin dan mengkloning elemen HTML.
  1. jQuery

jQuery merupakan sebuah library  JavaScript. jQuery berisi kumpulan fungsi-fungsi JavaScript yeng bertujuan mempermudah dalam penilisan JavaScript. Memudahkan yang dimaksud ilustrasi sebagai berikut :

Dengan javascript :

var x = document.getElementById(“tombol”);

Dengan jQuery :

var x = $(“#tombol”);

Dalam JavaScript, Lambang dollar ($) merupakankarakter yang valid sebagai nama varia yang di pakai secara global. Dengan demikian, dollar ($) adalah nama variable yang diperbolehkan. Bila mebongkar kode program jQuery, akan di tentukan baris seperti ini:

//Ekspose jQuery to the globalobject

Window.jQuery = window.$ = jQuery;

Jika dilihat dari pernyataan di atas, jQuery dan ($) merupakan variable global, sehingga mereka bias di panggil tanpa menambahkan window.

  1. Source code program
    • Alret JavaScript
<!DOCTYPE html>

<html>

<head>

<title>alret Java Script </title>

</head>

<script type=”text/javascript”>

alert(“Dedy Hermawan”);

</script>

<body>

</body>

</html>

 

  • Onklik JavaScript
<!DOCTYPE html>

<html>

<head>

<title>Onklik JavaScript</title>

</head>

<body>

<table>

<tr onmouseover=”this.bgColor=’skyblue'”     onmouseout=”this.bgColor=’green'” bgcolor=”#fff”>

<td>Kuning</td>

</tr>

<tr onmouseover=”this.bgColor=’yellow'” onmouseout=”this.bgColor=’blue'” bgcolor=”#fff”>

<td>Hijau</td>

</tr>

<tr onmouseover=”this.bgColor=’orange'” onmouseout=”this.bgColor=’yellow” bgcolor=”#fff”>

<td>Merah</td>

</tr>

</table>

</body>

</html>

 

 

 

 

 

 

 

 

  • Prompt JavaScript
<!DOCTYPE html>

<html>

<head><title> Prompt JavaScript </title>

</head>

<body>

<script type=”text/javascript”>

var nama;

nama=prompt(‘Kenalan Dong?’);

if(nama){

alert(‘Apa kabar ‘+nama+’! Saya Javascript, senang berkenalan dengan Anda’);

}else{

alert(‘Salam Kenal Baik Bos’);

}

</script>

</body>

</html>

 

 

  • External JavaScript
<!DOCTYPE html>

<html>

<head> <title> External JavaScript </title>

<script type=”text/javascript” src=”js.js”></script>

</head>

<body>

<form>

<h3>Klik Untuk Melalukan Registrasi</h3>

<p><input type=”button” name=”test” value=”Registrasi” onClick=”klik()” /></p>

</form>

</body>

function klik(){

alert(“Selamat anda berhasil registrasi”);

}

 

  • Selector tag jQuery
<!DOCTYPE html>

<html>

<head><title> Selector tag jQuery </title>

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“p”).click(function(){

$(this).hide();

});

});

</script>

</head>

<body>

<p> Jangan!!!, Awas Bingung</p>

</body>

</html>

 

 

 

  • Selector class jQuery
<!DOCTYPE html>

<html>

<head>

<title>selector class</title>

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

$(this).hide();

});

});

</script>

</head>

<body>

<button>Hilangkan</button>

<div>Jangan diklik nanti tombol akan hilang</div>

</body>

</html>

  • Animasi jQuery
<!DOCTYPE html>

<html>

<head>

<title>animasi 1</title>

<script type=”text/javascript” src=”js/jquery.js”></script>

<script type=”text/javascript”>

$(document).ready(function(){

$(“button”).click(function(){

var img =$(“img”)

img.animate({width:’500px’, opacity:’0,4′},”slow”)

img.animate({height:’600px’, opacity:’0,8′},”slow”)

img.animate({height:’400px’, opacity:’0,4′},”slow”)

img.animate({width:’300px’, opacity:’0,8′},”slow”)

});

});

</script>

</head>

<body>

<button>Demo Animasi</button>

<p>Semangat terus buat jadi progremer perlu belajar.!</p>

<div>

<img src=”img/mae.jpg” width=”300px” height=”400px”>

<img src=”img/mae.jpg” width=”300px” height=”400px”>

 

</div>

</body>

</html>

 

 

  1. Kesimpulan

Kesimpulannya adalah antara JavaScript dan jQuery dalam penuliasan kode programnya hampir sama, hanya ada sedikit perbedaan jika jQuery harus memanggil kumpulan kode program JavaScript yang bias dilakukan ofline maupun online.

Leave a Reply

Your email address will not be published. Required fields are marked *