Post on 26-Jun-2015
description
TUTORIAL HOW TO MAKE “HELLO WORLD”
WITH jQUERY
CREATE BY HERDIAN WARDHANI (1200039)ICT CONCENTRATION
CURICULLUM AND EDUCATIONAL TECHNOLOGYINDONESIAN UNIVERSITY OF EDUCATION
What is jQuery ??jQuery merupakan suatu javascript library yang
dibuat untuk memperingkas kode-kode javascript. Salah satu fungsi dari jQuery sendiri yaitu
pemberi animasi pada dokumen HTML
How to make “Hello World” with jQuery ???
First Step
Siapkan :• text editor (notepad, notepad++, bluefish dll)• web browser (Mozila firefox/ Google Chrome)• jquery.js (bisa di download di situs
http://www.jquery.com)
Second Step
Buat file
1. Index.html 2. App.js3. Jquery.js ( file yang tadi sudah di download )
Dalam satu folder
Bisa dibuat di notepad++ dengan extensi file .html (index) dan .js (app)
Third stepPada file index.html isikan kode berikut<html><head>
<title> Herdian jQuery </title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="app.js"></script><img src="lo.png" height="300" ></head><body><center> <p><b>Hello World!</b></p><style type="text/css">body{font-family: verdana; font-size: 45px;}footer{font-family: arial; font-size: 20px;} </style>
<button class="tombol2">Show</button><button class="tombol1">Hide</button>
</center></body><footer>
<center><p><b> Sampurasun ! </b></p></center> <marquee><br> Create by Herdian Wardhani </br></marquee>
</footer></html>Text
Editor Version
Fourth stepPada file app.js isikan kode berikut
$(document).ready(function(){
$(".tombol1").click(function(){$("p").hide(1000);});$(".tombol2").click(function(){$("p").show(1000);});});
$(function() {$("body").css("background", "#FFFF99");});
Text Editor Version
Third stepPada file index.html isikan kode berikut
Final step Buka file index.html yang telah diisikan kode di web browser dan hasilnya sebagai berikut :