J query tutorial (hello world)

•Download as PPTX, PDF•

0 likes•445 views

Rama Stokelan

BAHASA
PEMOGRAMAN
RAMDANI
1202479
TEKNOLOGI PENDIDIKAN
jQuery
Tutorial

Make a word “Hello World”
with jQuery !
Bagaimana Prosesnya ???
Ketahui terlebih dahulu, apa itu jQuery.

Perkenalan jQuery
jQuery adalah Javascript Library atau
kumpulan kode/fungsi Javascript siap
pakai, sehingga mempermudah kita untuk
membuat kode Javascript.

Kelebihan jQuery
 Mempermudah akses dan manipulasi
elemen tertentu pada dokumen.
 Mempermudah modifikasi/perubahan
tampilan halaman web.
 Mampu merespon interaksi antara user
dengan halaman web dengan lebih
cepat.
 Menyediakan fasilitas untuk membuat
animasi sekelas flash dengan mudah.

Perkenalan
 jQuery akan memastikan bahwa semua elemen yang diinginkan sudah di
tampilkan semua di halaman web, fungsi yang digunakan :
$(document).ready(function(){
//Baris kode jQuery akan di jalankan
//Apabila semua elemen sudah di tampilkan semua
});
 Memilih elemen berdasarkan class atau id yang telah di definisikan. Dalam
hal ini jQuery menggunakan fungsi selektor.
$(“#btn1”)
$(“p”)
//Penyeleksian
 $(“#btn”).click(function(){
$(“p”).fadeIn(1000);
});
//Memberikan aksi, jika tombol di tekan akan terjadi fadeIn pada elemen “p”.

Cara kerja jQuery
1. Kunjungi situs www.jQuery.com dan download. Ikuti
langkah yang tertera di situs tersebut untuk
mendownloadnya.
1. Langkah 1

Langkah ke-2
Siapkan software pendukung seperti :
1. Adobe dreamweaver
2. Notepad++
3. Bluefish

PRAKTEK
<html>
<head>
<title> Hello World!!!</title>
<link href="Hello.css" rel="stylesheet" type="text/css" />
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />
<script src="jquery-2.0.3.js" type="text/javascript" ></script>
<script src="jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("h1").fadeIn(5000);
});
$("#btn2").click(function(){
$("h1").fadeOut(1000);
});
});
</script>
</head>

<body>
<h1 align="center" size="120" face="Dense"> Hello World B)</h1>
<br>
<button id="btn1">Fade In</button>
<button id="btn2">Fade Out</button>
<br>
<div data-role='header'>
<p id="nama">Nama : Ramdani</p>
<p id="nim">NIM : 1202479</p>
</div>
</body>
</html>

SELAMAT MENCOBA
Rujukan :
Ramdani,Luky,Ahmad. 2011 [Online].Tersedia
:ahmadlukyramdani.files.wordpress.com/2011/04/jquery-id.pdf [6 September 2013]

Featured

Content Methodology: A Best Practices Report (Webinar)contently

How to Prepare For a Successful Job Search for 2024Albert Qian

Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)

Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal

5 Public speaking tips from TED - Visualized summarySpeakerHub

ChatGPT and the Future of Work - Clark Boyd Clark Boyd

Getting into the tech field. what next Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray

How to have difficult conversations Rajiv Jayarajah, MAppComm, ACC

Introduction to Data ScienceChristy Abraham Joy

Time Management & Productivity - Best PracticesVit Horky

The six step guide to practical project managementMindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools

12 Ways to Increase Your Influence at WorkGetSmarter

ChatGPT webinar slidesAlireza Esmikhani

More than Just Lines on a Map: Best Practices for U.S Bike RoutesProject for Public Spaces & National Center for Biking and Walking

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference

Barbie - Brand Strategy PresentationErica Santiago

Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them wellSaba Software

Featured (20)

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

12 Ways to Increase Your Influence at Work

ChatGPT webinar slides

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

Barbie - Brand Strategy Presentation

Good Stuff Happens in 1:1 Meetings: Why you need them and how to do them well

J query tutorial (hello world)

1. BAHASA PEMOGRAMAN RAMDANI 1202479 TEKNOLOGI PENDIDIKAN jQuery Tutorial

2. Make a word “Hello World” with jQuery ! Bagaimana Prosesnya ??? Ketahui terlebih dahulu, apa itu jQuery.

3. Perkenalan jQuery jQuery adalah Javascript Library atau kumpulan kode/fungsi Javascript siap pakai, sehingga mempermudah kita untuk membuat kode Javascript.

4. Kelebihan jQuery  Mempermudah akses dan manipulasi elemen tertentu pada dokumen.  Mempermudah modifikasi/perubahan tampilan halaman web.  Mampu merespon interaksi antara user dengan halaman web dengan lebih cepat.  Menyediakan fasilitas untuk membuat animasi sekelas flash dengan mudah.

5. Perkenalan  jQuery akan memastikan bahwa semua elemen yang diinginkan sudah di tampilkan semua di halaman web, fungsi yang digunakan : $(document).ready(function(){ //Baris kode jQuery akan di jalankan //Apabila semua elemen sudah di tampilkan semua });  Memilih elemen berdasarkan class atau id yang telah di definisikan. Dalam hal ini jQuery menggunakan fungsi selektor. $(“#btn1”) $(“p”) //Penyeleksian  $(“#btn”).click(function(){ $(“p”).fadeIn(1000); }); //Memberikan aksi, jika tombol di tekan akan terjadi fadeIn pada elemen “p”.

6. Cara kerja jQuery 1. Kunjungi situs www.jQuery.com dan download. Ikuti langkah yang tertera di situs tersebut untuk mendownloadnya. 1. Langkah 1

7. Langkah ke-2 Siapkan software pendukung seperti : 1. Adobe dreamweaver 2. Notepad++ 3. Bluefish

8. PRAKTEK <html> <head> <title> Hello World!!!</title> <link href="Hello.css" rel="stylesheet" type="text/css" /> <link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" /> <script src="jquery-2.0.3.js" type="text/javascript" ></script> <script src="jquery.mobile-1.3.2.js" type="text/javascript"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("h1").fadeIn(5000); }); $("#btn2").click(function(){ $("h1").fadeOut(1000); }); }); </script> </head>

9. <body> <h1 align="center" size="120" face="Dense"> Hello World B)</h1> <br> <button id="btn1">Fade In</button> <button id="btn2">Fade Out</button> <br> <div data-role='header'> <p id="nama">Nama : Ramdani</p> <p id="nim">NIM : 1202479</p> </div> </body> </html>

10. SELAMAT MENCOBA Rujukan : Ramdani,Luky,Ahmad. 2011 [Online].Tersedia :ahmadlukyramdani.files.wordpress.com/2011/04/jquery-id.pdf [6 September 2013]

J query tutorial (hello world)

Recommended

Recommended

More Related Content

Featured

Featured (20)

J query tutorial (hello world)