Tutorial how to make hello world herdian wardhani
•Télécharger en tant que PPTX, PDF•
0 j'aime•374 vues
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"
Recommandé
Contenu connexe
Tendances
En vedette
Similaire à Tutorial how to make hello world herdian wardhani
Similaire à Tutorial how to make hello world herdian wardhani (20)
Dernier
Dernier (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 :