Javascript App

Javascript App @GDGGranada | March 2014

About us Esteban Dorado @Mr_Esti • Computer Science • Web
developer • Android developer Alberto J Gutiérrez @AJGutierrezJ • Degree Computer Science • Master Degree Software Development • Web Developer

http://goo.gl/CSQhQL

Web today!!

1. What is JQuery? 2. Using JQuery 3. Searching/Traversing 4.
Events/Animations 5. Styles 6. AJAX Agenda

¿What is JQuery?

What you can do with JQuery

Jquery make it easy to: FIND TALK LISTEN CHANGE ANIMATE
elements in an HTML doc over the network to fetch new content to what an user does and react accordingly HTML content content on the page

Challenge: changing content <!DOCTYPE html> <html> <head> <title>Javascript App</title> </head>
<body> <h1>Where do you want to go?</h1> <p>Plan your next challenge.</p> </body> </html> How can we modify the text of the <h1> element?

Finding the proper HTML <!DOCTYPE html> <html> <head> <title>Javascript App</title>
</head> <body> <h1>Where do you want to go?</h1> <p>Plan your next challenge.</p> </body> </html> How can we search through our HTML? • We need to understand how our browser organizes the HTML it receives.

Document Object Model A tree-like structure created by browsers so
we can quickly find HTML Elements using JavaScript. “DOM”

What does that DOM structure look like? html head body
title h1 p JavaScript App Where... Plan... • node types: element Text...

How do find things using the DOM? Request Sends files
Server Browser DOM Load Interacts

Jquery to th rescue! DOM DOM DOM DOM DOM

Basic JQuery usage JQuery(<code>); The DOM this is the JQuery
function

<!DOCTYPE html> <html> <head> <title>Javascript App</title> </head> <body> <h1>Where do
you want to go?</h1> <p>Plan your next challenge.</p> </body> </html> Using the JQuery function to find nodes JQuery(”h1”); JQuery(”p”); $(”h1”); $(”p”); JQuery selectors short & sweet syntax

Example 1 How can we modify the text of the
<h1> element? HTML document <!DOCTYPE html> <html> <head> <title>Javascript App</title> </head> <body> <h1>Where do you want to go?</h1> <p>Plan your next challenge.</p> </body> </html>

Selecting by HTML element name $(”h1”);

Fetching an element’s text $(”h1”).text(); Note: text() is a method
offered by JQuery

Modifying an element’s text $(”h1”).text(“Where are you?”); Note: text() is
a method offered by JQuery

Our completed code jQuery(document).ready(function(){ $(“h1”).text(“Where are you?”); }); Note: We
need to make sure the DOM has finished loading the HTML content before we can reliably use jQuery.

Using JQuery

JQuery.com

JQuery 1.x vs JQuery 2.x • JQuery 2.x has the
same API as JQuery 1.x • JQuery 2.x does not support IE 6, 7, or 8

Getting started 1. Download jquery 2. Load it in your
HTML document 3. Start using it <script src=”jquery.min.js”></script> <script src=”code.js”></script>

We can find elements by ID or Class nav {
… } .card_color { … } #container { … } $(“nav”); $(“.card_color”); $(“#container”); CSS JQuery

Searching the DOM

Selecting descendants <h1>Where do you want to go?</h1> <p>Plan your
next adventure.</p> <ul id=”countries”> <li class=”promo”>Spain</li> <li>UK</li> <li>USA</li> </ul> How do we find the <li> elements? $(”countries li”); parent descendant

Exercise 2 Select <li> element. <h1>Where do you want to
go?</h1> <p>Plan your next adventure.</p> <ul id="countries"> <li>Spain</li> <li> <ul id="uk"> <li>London</li> </ul> </li> <li>USA</li> </ul>

go?</h1> <p>Plan your next adventure.</p> <ul id="countries"> <li>Spain</li> <li> <ul id="uk"> <li>London</li> </ul> </li> <li>USA</li> </ul>

Exercise 4 Modifying the text of the <li> element. <h1>Where
do you want to go?</h1> <p>Plan your next adventure.</p> <ul id="countries"> <li>Spain</li> <li>UK</li> <li>USA</li> </ul>

CSS-like pseudo classes :first :last :even :odd

Exercise 5 Modifying the text of the <li> element, but
even elements. <h1>Where do you want to go?</h1> <p>Plan your next adventure.</p> <ul id="countries"> <li>Spain</li> <li>UK</li> <li>USA</li> <li>Germany</li> </ul>

Traversing

Filtering methods .first() .last() .prev() .parent() .next() .children()

go?</h1> <p>Plan your next adventure.</p> <ul id="countries"> <li>Spain</li> <li>UK</li> <li>USA</li> </ul>

Working with the DOM

Appending to the DOM

Changing our Style $(document).ready(function(){ var country = $(“<li>Germany</li>”); $(“#countries”).append(country); });
country.appendTo($(“#countries”));

Events / Animations

Events Methods Mouse Keyboard Forms

Exercise 7 Demonstrates the jQuery click() event

Exercise 8 Demonstrates the jQuery hide() method, hiding all <p>
elements.

Exercise 9 Demonstrates a simple use of the jQuery animate()
method

Exercise 10 Make to Web page scroll animated.

Styles

Jquery Object Methods .css(<attr>, <value>) .css(<attr>) .css(<object>) .show() .hide() .addClass(<class>)
.removeClass(<class>) .toggleClass()

Changing our Style $(document).ready(function(){ $(“#maps”).on(“click”, “.countries”,function() { $(this).css("background-color","#333"); $(this).css("border-color","1px solid
#123"); }); }); $(this).css("background-color","#333") .css("border-color","1px solid #123"); $(this).css("background-color":"#333", "border-color":"1px solid #123");

Showing the Price $(document).ready(function(){ $(“#maps”).on(“click”, “.countries”,function() { $(this).css("background-color":"#333", "border-color":"1px solid
#123"); }); }); $(this).find(".price").css("display","block"); $(this).find(".price").show();

Moving Styles to Externall CSS $(document).ready(function(){ $(“#maps”).on(“click”, “.countries”,function() { $(this).addClass("showData");
}); }); .showData{ background-color:"#333"; border-color:"1px solid #123"; } .showData .price{ display: block; }

Moving Styles to Externall CSS $(document).ready(function(){ $(“#maps”).on(“click”, “.countries”,function() { $(this).addClass("showData");
}); }); $(this).toggleClass("showData");

Ajax Ajax: Asynchronous JavaScript And XML Anyone called httpRequest. Webapp
interactive or RIA (Rich Internet Applications) Examples: Gmail, Google Maps, Youtube, Dropbox...

Basic example $.ajax({ url: ‘ajax/test.html’, success: function(data) { $(“.result”).html(data); alert(“Load
was performed”); } });

Other example var datas = null; $.ajax({ url: ‘ajax/test.html’, success:
function(data) { datas = data; } }); console.log(datas);

Other example I var datas = null; $.ajax({ url: ‘ajax/test.html’,
async: false, success: function(data) { datas = data; } }); console.log(datas);

Other example II var datas = null; $.ajax({ url: ‘ajax/test.html’,
success: function(data) { datas = data; } }).done(function(msg){ console.log(datas); });

Other example III var datas = null; $.ajax({ url: ‘ajax/test.html’,
success: function(data) { datas = data; }, error: function(){ datas = { v1: ’info’ }; } }).done(function(msg){ console.log(datas); });

Others methods load $.load(URL, data, callback); $.get(URL, callback); $.post(URL, data,
callback); get post getScript getJSON $.getScript(URL, data, callback); $.getJSON(URL, data, callback);

Example: Load button#FirstButton section#element URL Document HTML http://url.org/arg

Example: Load $(“#FirstButton”).click(function(event){ $(“#element”).load(“file.html”, function() { alert( "Load was performed."
); }); event.preventDefault(); }); URL: Absolute or Reference

Bibliography • http://www.w3schools.com/js/default.asp • http://librojquery.com/ • http://jquery.com/

Thank you!

Javascript App

Javascript App

More Decks by Esteban Dorado Roldan

Other Decks in Programming

Featured

Transcript