Tutorial how to make hello world herdian wardhani
10
TUTORIAL HOW TO MAKE “HELLO WORLD” WITH jQUERY CREATE BY HERDIAN WARDHANI (1200039) ICT CONCENTRATION CURICULLUM AND EDUCATIONAL TECHNOLOGY INDONESIAN UNIVERSITY OF EDUCATION
-
Upload
herdian-wardhani -
Category
Education
-
view
185 -
download
3
description
Tugas membuat "Hello World !" menggunakan jQuery Mata kuliah : Bahasa Pemrograman
Transcript of 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 :
