Tutorial how to make hello world herdian wardhani
•Download as PPTX, PDF•
0 likes•374 views
Tutorial ini menjelaskan cara membuat "Hello World" dengan jQuery dengan 3 langkah: 1. Menyiapkan text editor, browser, dan file jQuery.js 2. Membuat 3 file: index.html, app.js, dan jQuery.js 3. Menambahkan kode HTML dan jQuery pada file-file tersebut untuk menampilkan dan menyembunyikan teks "Hello World"
More Related Content
What's hot
Viewers also liked
Similar to Tutorial how to make hello world herdian wardhani
Similar to Tutorial how to make hello world herdian wardhani (20)
Recently uploaded
Recently uploaded (20)
Tutorial how to make hello world herdian wardhani
- 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
- 8. 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
- 9. Third step Pada file index.html isikan kode berikut
- 10. Final step Buka file index.html yang telah diisikan kode di web browser dan hasilnya sebagai berikut :