Tweet
Tweet

Slide 1

Slide 1 text

Javascript App @GDGGranada | March 2014

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

http://goo.gl/CSQhQL

Slide 4

Slide 4 text

Web today!!

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

¿What is JQuery?

Slide 7

Slide 7 text

What you can do with JQuery

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Challenge: changing content Javascript App

Where do you want to go?

Plan your next challenge.

How can we modify the text of the

element?

Slide 10

Slide 10 text

Finding the proper HTML Javascript App

Where do you want to go?

Plan your next challenge.

How can we search through our HTML? ● We need to understand how our browser organizes the HTML it receives.

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Jquery to th rescue! DOM DOM DOM DOM DOM

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Javascript App

Where do you want to go?

Plan your next challenge.

Using the JQuery function to find nodes JQuery(”h1”); JQuery(”p”); $(”h1”); $(”p”); JQuery selectors short & sweet syntax

Slide 17

Slide 17 text

Example 1 How can we modify the text of the

element? HTML document Javascript App

Where do you want to go?

Plan your next challenge.

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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.

Slide 22

Slide 22 text

Using JQuery

Slide 23

Slide 23 text

JQuery.com

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Getting started 1. Download jquery 2. Load it in your HTML document 3. Start using it

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Searching the DOM

Slide 28

Slide 28 text

Selecting descendants

Where do you want to go?

Plan your next adventure.

  • Spain
  • UK
  • USA
How do we find the
  • elements? $(”countries li”); parent descendant

    • Slide 29

    Slide 29 text

    Exercise 2 Select
  • element.

    Where do you want to go?

    Plan your next adventure.

    • Spain
      • London
    • USA

    • Slide 30

    Slide 30 text

    Exercise 3 Select
  • element.

    Where do you want to go?

    Plan your next adventure.

    • Spain
      • London
    • USA

    • Slide 31

    Slide 31 text

    Exercise 4 Modifying the text of the
  • element.

    Where do you want to go?

    Plan your next adventure.

    • Spain
    • UK
    • USA

    • Slide 32

    Slide 32 text

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

    Slide 33

    Slide 33 text

    Exercise 5 Modifying the text of the
  • element, but even elements.

    Where do you want to go?

    Plan your next adventure.

    • Spain
    • UK
    • USA
    • Germany

    • Slide 34

    Slide 34 text

    Traversing

    Slide 35

    Slide 35 text

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

    Slide 36

    Slide 36 text

    Exercise 6 Select
  • element.

    Where do you want to go?

    Plan your next adventure.

    • Spain
    • UK
    • USA

    • Slide 37

    Slide 37 text

    Working with the DOM

    Slide 38

    Slide 38 text

    Appending to the DOM

    Slide 39

    Slide 39 text

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

    Slide 40

    Slide 40 text

    Events / Animations

    Slide 41

    Slide 41 text

    Events Methods Mouse Keyboard Forms

    Slide 42

    Slide 42 text

    Exercise 7 Demonstrates the jQuery click() event

    Slide 43

    Slide 43 text

    Exercise 8 Demonstrates the jQuery hide() method, hiding all

    elements.

    Slide 44

    Slide 44 text

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

    Slide 45

    Slide 45 text

    Exercise 10 Make to Web page scroll animated.

    Slide 46

    Slide 46 text

    Styles

    Slide 47

    Slide 47 text

    Jquery Object Methods .css(, ) .css() .css() .show() .hide() .addClass() .removeClass() .toggleClass()

    Slide 48

    Slide 48 text

    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");

    Slide 49

    Slide 49 text

    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();

    Slide 50

    Slide 50 text

    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; }

    Slide 51

    Slide 51 text

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

    Slide 52

    Slide 52 text

    Ajax

    Slide 53

    Slide 53 text

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

    Slide 54

    Slide 54 text

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

    Slide 55

    Slide 55 text

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

    Slide 56

    Slide 56 text

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

    Slide 57

    Slide 57 text

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

    Slide 58

    Slide 58 text

    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); });

    Slide 59

    Slide 59 text

    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);

    Slide 60

    Slide 60 text

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

    Slide 61

    Slide 61 text

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

    Slide 62

    Slide 62 text

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

    Slide 63

    Slide 63 text

    Q&A

    Slide 64

    Slide 64 text

    Thank you!