Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
TUTORIAL HOW TO MAKE
“HELLO WORLD” WITH
jQUERY
CREATE BY HERDIAN WARDHANI (1200039)
ICT CONCENTRATION
CURICULLUM AND EDUCA...
What is jQuery ??
jQuery merupakan suatu javascript library
yang dibuat untuk memperingkas kode-kode
javascript.
Salah sat...
How to make “Hello
World” with jQuery ???
First Step
Siapkan :
• text editor (notepad, notepad++, bluefish dll)
• web browser (Mozila firefox/ Google Chrome)
• jque...
Second Step
Buat file
1. Index.html
2. App.js
3. Jquery.js ( file yang tadi sudah di download )
Dalam satu folder
Bisa dib...
Third step
Pada file index.html isikan kode berikut
<html>
<head>
<title> Herdian jQuery </title>
<script type="text/javas...
Fourth step
Pada file app.js isikan kode berikut
$(document).ready(function(){
$(".tombol1").click(function(){
$("p").hide...
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
Upcoming SlideShare
Loading in …5
×

Tutorial how to make hello world herdian wardhani

339 views

Published on

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

Published in: Education
  • Be the first to comment

  • Be the first to like this

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 :

×