Your SlideShare is downloading. ×
Tutorial how to make hello world herdian wardhani
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Tutorial how to make hello world herdian wardhani

157
views

Published on

Tugas membuat "Hello World !" menggunakan jQuery …

Tugas membuat "Hello World !" menggunakan jQuery
Mata kuliah : Bahasa Pemrograman

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
157
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TUTORIAL HOW TO MAKE “HELLO WORLD” WITH jQUERY CREATE BY HERDIAN WARDHANI (1200039) ICT CONCENTRATION CURICULLUM AND EDUCATIONAL TECHNOLOGY INDONESIAN UNIVERSITY OF EDUCATION
  • 2. 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
  • 3. How to make “Hello World” with jQuery ???
  • 4. 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)
  • 5. 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)
  • 6. 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
  • 7. 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
  • 8. Third step Pada file index.html isikan kode berikut
  • 9. Final step Buka file index.html yang telah diisikan kode di web browser dan hasilnya sebagai berikut :

×