Javascript + jQuery

849 views

Published on

Módulo de Javascript + jQuery para o curso de web da Fatec Sorocaba.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
849
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
19
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • - é fácil!\n- compatibilidade com os browsers\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Javascript + jQuery

    1. 1. Desenvolvimento Web:do básico ao deployMódulo II - Javascript e jQuery
    2. 2. PRESTE ATENÇÃO!
    3. 3. Um slide de história 1995 vbscript mocha internet explorer netscape JAVASCRIPThttps://developer.mozilla.org/en/JavaScript/Reference
    4. 4. ATUALMENTE
    5. 5. Por que ?
    6. 6. Criar variáveis.var instrutor = “Harry”;var nota_aluno = 9.0;var odeia_windows = true;var idade = 22; Ponto e Vírgula no final !!!
    7. 7. Funções Globaisalert(“Oi Sebastian!”);var answer = confirm(“Ta na FATEC ?”);var age = prompt(“Sua idade:”);
    8. 8. Arraysvar x = [“zero”,“um”,“dois”]; x[2]; // dois x.length; // 3 x.reverse();
    9. 9. Funçõesfunction nome (var1, var2) {};function soma (num1, num2) { return num1 + num2;};
    10. 10. Carregando jQuery na sua páginaPor arquivo<script type="text/javascript" src="jquery.js"></script>Google CDN<script type="text/javascript" src= "https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"> </script> http://docs.jquery.com/Downloading_jQuery
    11. 11. DOM Document Object Model<html><head> <title>Javascript Rules</title></head><body> <h1>Javascript é muito D+ !</h1> <p class=‘souracker’> Eu gosto de Javascript por que é hype! </p> <p id=‘noob’> Eu gosto de Javascript por causa do JAVA no nome. </p></body></html>
    12. 12. Seletores do jQuery Por nome de elemento$(“h1”); <h1>Javascript é muito D+ !</h1> <p class=‘souracker’>$(“p”); Eu gosto de Javascript por que é hype! </p> <p id=‘noob’> Eu gosto de Javascript por causa do JAVA no nome. </p>
    13. 13. Seletores do jQuery Por classe <p class=‘souracker’>$(“p.souracker”); Eu gosto de Javascript por que é hype! </p> CSS !!!! Elemento + . + nome da classe
    14. 14. Seletores do jQuery Por ID <p id=‘noob’>$(“p#noob”); Eu gosto de Javascript por causa do JAVA no nome. </p> CSS !!!! Elemento + # + nome do ID
    15. 15. Seletores do jQuery Espaço$(“p#noob”); é diferente de $(“p #noob”);$(“p#noob”);Seleciona o elemento p com ID “noob”$(“p #noob”);Seleciona qualquer elemento com ID“noob” dentro de p
    16. 16. Seletores do jQuery Múltiplos elementos$(“p#noob, p.souracker”);
    17. 17. Manipulando CSS$(“p”).css(“font-size”,“24px”);$(“p”).hasClass(“plan”);$(“p:first”).addClass(“bigger”);$(“p:first”).removeClass(“bigger”);$(“p:first”).toggleClass(“bigger”);
    18. 18. Visibilidade$(“p:first”).hide();$(“p:first”).show();$(“p:first”).toggle();$(“p:first”).hide(“slow”); com animação!$(“p:first”).show(“fast”);$(“p:first”).toggle(“slow”);
    19. 19. Eventos$(“p”).click();$(“p”).hover();$(“p”).keypress();Funções anônimasfunction(){ alert(“Não tenho nome!”);}
    20. 20. Animações$(“p”).slideDown();$(“p”).slideUp();$(“p”).slideToggle();$(“p”).fadeIn();$(“p”).fadeOut();$(“p”).fadeToggle();

    ×