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.

Hello world with j query seni yuliarini

325 views

Published on

Hello world with j query seni yuliarini

  1. 1. MEMBUAT “HELLO WORLD” DENGAN MENGGUNAKAN JQUERY Oleh: Seni Yuliarini (1202729) TEKNOLOGI PENDIDIKAN – TIK UNIVERSITAS PENDIDIKAN INDONESIA BAHASA PEMROGRAMAN
  2. 2. Apa itu jquery? Bagaimana cara membuat “hello world” menggunakan jquery? JQUERY
  3. 3. APA ITU JQUERY? jQuery adalah sebuah library Javascript yang sangat ringkas dan sederhana untuk memanipulasi komponen di dokumen HTML, menangani event, animasi, efek dan memproses interaksi ajax. jQuery sangat ringkas dan simple sesuai dengan slogannya “write less, do more”. HOME
  4. 4. Cara membuat “hello world” menggunakan jquery • Pertama siapkan text editor seperti notepad, notepad++, bluefish, adobe dreamweaver, dll. • Siapkan juga web browser bisa Mozilla firefox ataupun Google Chrome • Siapkan jquery.js (bisa di download di situs http://www.jquery.com)
  5. 5. Untuk mempermudah pengerjaan maka dengan menggunakan notepad++ kita buat 2 file, yaitu: 1. index.html 2. app.js yang berisi koding dari script jquery Simpan jquery.js yang sudah didownload tadi didalam folder yang sama dengan 2 file di atas
  6. 6. <html> <head> <title> Seni Yuliarini </title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="app.js"></script> <center><img src="save.jpg" height="250" > </center> </head> <style type="text/css"> #panel,#flip { padding:10px; text-align:center; background-color:#33ccff; border:solid 1px #000000; font-family: britannic bold; font-size: 20px } #panel { padding:20px; display:none } </style> <body> <div id="flip">Click here</div> <div id="panel">Hello world :) <br> LET'S SAVE THE EARTH </br> </div> </body> <footer> <marquee><br> Hello world, my name is Seni Yuliarini :) </br></marquee> </footer> </html> Isikan kode berikut dan simpan dengan nama index.html
  7. 7. Isikan kode script jQuery di app.js
  8. 8. Buka index.html maka hasilnya adalah sebagai berikut:
  9. 9. TERIMA KASIH  SEKIAN

×