Download - Tutorial how to make hello world herdian wardhani

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 :