Tutorial how to make hello world herdian wardhani

266 views
223 views

Published on

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
266
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tutorial how to make hello world herdian wardhani

  1. 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. 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. 3. How to make “Hello World” with jQuery ???
  4. 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. 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. 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. 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. 8. Third step Pada file index.html isikan kode berikut
  9. 9. Final step Buka file index.html yang telah diisikan kode di web browser dan hasilnya sebagai berikut :

×