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 TECHNOLOGY
INDONESIAN 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.js
3. Jquery.js ( file yang tadi sudah di download )
Dalam satu folder
Bisa dibuat di notepad++
dengan extensi file .html
(index) dan .js (app)

Third step
Pada 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 step
Pada 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 step
Pada file index.html isikan kode berikut

Final step
Buka file index.html yang telah diisikan kode di
web browser dan hasilnya sebagai berikut :

Tutorial how to make hello world herdian wardhani

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (9)

Andere mochten auch

Andere mochten auch (6)

Ähnlich wie Tutorial how to make hello world herdian wardhani

Ähnlich wie Tutorial how to make hello world herdian wardhani (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Tutorial how to make hello world herdian wardhani