tutorial how to make hello world herdian wardhani
DESCRIPTION
Tugas membuat "Hello World !" menggunakan jQuery Mata kuliah : Bahasa PemrogramanTRANSCRIPT
![Page 1: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/1.jpg)
TUTORIAL HOW TO MAKE “HELLO WORLD”
WITH jQUERY
CREATE BY HERDIAN WARDHANI (1200039)ICT CONCENTRATION
CURICULLUM AND EDUCATIONAL TECHNOLOGYINDONESIAN UNIVERSITY OF EDUCATION
![Page 2: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/2.jpg)
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
![Page 3: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/3.jpg)
How to make “Hello World” with jQuery ???
![Page 4: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/4.jpg)
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)
![Page 5: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/5.jpg)
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)
![Page 6: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/6.jpg)
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
![Page 7: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/7.jpg)
![Page 8: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/8.jpg)
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
![Page 9: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/9.jpg)
Third stepPada file index.html isikan kode berikut
![Page 10: Tutorial how to make hello world herdian wardhani](https://reader035.vdocuments.mx/reader035/viewer/2022062319/558cb1bfd8b42a855c8b4636/html5/thumbnails/10.jpg)
Final step Buka file index.html yang telah diisikan kode di web browser dan hasilnya sebagai berikut :