Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}
•Transferir como PPTX, PDF•
3 gostaram•308 visualizações
O documento apresenta um cronograma de conteúdos sobre desenvolvimento front-end, incluindo JavaScript, jQuery, DOM e automatizadores de tarefas. É dividido em seções sobre os principais tópicos, com explicações concisas e links para recursos adicionais.
Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (13)
Destaque
Destaque (20)
Semelhante a Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}
Semelhante a Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5} (20)
Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}
- 1. Matheus S. Thomaz Front-end Developer
- 2. CRONOGRAMA Matheus S. Thomaz Front-end Developer
- 3. Matheus S. Thomaz Front-end Developer /Cronograma Javascript Jquery Pré-processadores
- 4. JAVASCRIPT Matheus S. Thomaz Front-end Developer
- 5. Matheus S. Thomaz Front-end Developer /Javascript Principal linguagem client-side
- 6. Matheus S. Thomaz Front-end Developer /Javascript JSFiddle http://jsfiddle.net/
- 7. FRONT-ENDER AND MOTHER-F***ER FRONT-ENDER Matheus S. Thomaz Front-end Developer
- 8. Matheus S. Thomaz Front-end Developer /Front-ender O cara mais focado em designer. O cara do CSS e do HTML. O cara que deixa tudo bonito.
- 9. Matheus S. Thomaz Front-end Developer /Mother-f***er front-ender O cara da programação. O cara que vai fazer cálculos e funções monstruosas. O cara que vai criar o novo jquery.
- 10. Matheus S. Thomaz Front-end Developer JAVASCRIPT + CSS + HTML
- 11. HTML informação Matheus S. Thomaz Front-end Developer
- 12. CSS formatação Matheus S. Thomaz Front-end Developer
- 13. JAVASCRIPT manipulação Matheus S. Thomaz Front-end Developer
- 14. HELLO WORLD! Matheus S. Thomaz Front-end Developer
- 15. Matheus S. Thomaz Front-end Developer /Hello World! 1. <!DOCTYPE html> 2. 3. <html lang="pt-br"> 4. <head> 5. <meta charset="utf-8"> 6. <title>Título da página</title> 7. </head> 8. <body> 9. // conteudo 10.</body> 11.</html>
- 16. Matheus S. Thomaz Front-end Developer /Hello World! 1. <!DOCTYPE html> 2. 3. <html lang="pt-br"> 4. <head> 5. <meta charset="utf-8"> 6. <title>Título da página</title> 7. </head> 8. <body> 9. 10. <script type="text/javascript"> 11. alert('Hello World!'); 12. </script> 13. </body> 14. </html>
- 17. INSERINDO NA Matheus S. Thomaz Front-end Developer TELA
- 18. De preferência no final da tela! Matheus S. Thomaz Front-end Developer
- 19. Matheus S. Thomaz Front-end Developer /DOM Browser renderiza de cima para baixo. Se encontrar um script no topo, ele vai pausar a renderização da tela e renderizar o JS.
- 20. Matheus S. Thomaz Front-end Developer /Inline 1. <script> 2. console.log('Hello World!'); 3. </script>
- 21. Matheus S. Thomaz Front-end Developer /Inline 1. <!DOCTYPE html> 2. 3. <html lang="pt-br"> 4. <head> 5. <meta charset="utf-8"> 6. <title>Título da página</title> 7. </head> 8. <body> 9. <script src="js/script.js"></script> 10. </body> 11. </html>
- 22. VARIÁVEIS Matheus S. Thomaz Front-end Developer
- 23. Matheus S. Thomaz Front-end Developer /Variáveis Tipagem dinâmica Variáveis de escopo local [var] Variáveis de escopo global [window]
- 24. Matheus S. Thomaz Front-end Developer /Variáveis var string = “Matheus Thomaz”; stringGlobal = “Matheus Thomaz”; var number = 123; var array = [“obj 1”, “obj 2”]; var objeto = { nome: “objeto”, lorem: “ipsum”};
- 25. Matheus S. Thomaz Front-end Developer /Variáveis var num1 = 123; var num2 = “123”; num1 + num2;
- 26. Matheus S. Thomaz Front-end Developer /Variáveis var num1 = 123; var num2 = “123”; num1 + num2; // 123123
- 27. Matheus S. Thomaz Front-end Developer FUNÇÕES
- 28. Matheus S. Thomaz Front-end Developer /Funções - Declaração simples function log (msg) { console.log(msg); }; log(‘lorem ipsum’);
- 29. Matheus S. Thomaz Front-end Developer /Funções - Expressão var log = function (msg) { console.log(msg); }; log(‘lorem ipsum’);
- 30. Matheus S. Thomaz Front-end Developer /Funções - Método var App = { log : function (msg) { console.log(msg); } }; App.log(‘lorem ipsum’);
- 31. Matheus S. Thomaz Front-end Developer ESCOPO
- 32. Matheus S. Thomaz Front-end Developer /Escopo var a = 0, b = 2; function soma () { var a = 1, b = 4; return a + b; }; soma();
- 33. Matheus S. Thomaz Front-end Developer /Escopo var a = 0, b = 2; function soma () { var a = 1, b = 4; return a + b; }; soma(); // 5
- 34. Matheus S. Thomaz Front-end Developer DOM
- 35. Document Object Model Matheus S. Thomaz Front-end Developer
- 36. Matheus S. Thomaz Front-end Developer /DOM Interação entre o HTML e o JS.
- 37. Matheus S. Thomaz Front-end Developer /DOM document.querySelector(‘#body’); document.getElementById(‘main’); document.getElementByClassName(‘class’);
- 38. Matheus S. Thomaz Front-end Developer /DOM var btn = document.getElementById(‘btn-home’); btn.onclick = function(){ window.location.href = “index.html”; };
- 39. Matheus S. Thomaz Front-end Developer JQUERY
- 40. Jquery !== Javascript Matheus S. Thomaz Front-end Developer
- 41. Jquery === Biblioteca Matheus S. Thomaz Front-end Developer
- 42. Jquery === Linguagem de abstração Matheus S. Thomaz Front-end Developer
- 43. Matheus S. Thomaz Front-end Developer /Jquery Primeiro aprenda o básico de Javascript. Poucos projetos não utilizam Jquery. framework javascript mais utilizado.
- 44. Matheus S. Thomaz Front-end Developer /Jquery Duas versões 1.X Suporte IE6+ 2.X Suporte IE9+
- 45. Matheus S. Thomaz Front-end Developer /Jquery Seleção e manipulação de elementos HTML Manipulação de CSS Efeitos e animações Navegação pelo DOM Ajax Eventos
- 46. Matheus S. Thomaz Front-end Developer JQUERY PORQUE USAR?
- 47. “Write less, do more”
- 48. Matheus S. Thomaz Front-end Developer /Jquery Mágica com poucas linhas de código. Como todo framework, expande a usabilidade de uma linguagem.
- 49. Matheus S. Thomaz Front-end Developer JQUERY COMO USAR?
- 50. Matheus S. Thomaz Front-end Developer /Jquery http://jquery.com/ <script src="js/jquery.min.js"></script>
- 51. Matheus S. Thomaz Front-end Developer /Jquery http://jquery.com/ <script src="js/jquery.min.js"></script> CDN https://developers.google.com/speed/libraries/ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
- 52. Matheus S. Thomaz Front-end Developer /Jquery $(document).ready(function() { // código jquery }); $(function(){ // código jquery });
- 53. Matheus S. Thomaz Front-end Developer /Jquery - Hello World! <script> $(function(){ alert('Hello World'); }); </script>
- 54. Matheus S. Thomaz Front-end Developer /DOM document.querySelector(‘#body’); $(‘#body’); document.getElementById(‘main’); $(‘#main’); document.getElementByClassName(‘class’); $(‘.class’);
- 55. /Jquery - Manipulação HTML Matheus S. Thomaz Front-end Developer 1. $("#helloDiv").html("Hello World!");
- 56. Matheus S. Thomaz Front-end Developer /Jquery - Eventos var btn = document.getElementById(‘btn-home’); btn.onclick = function(){ window.location.href = “index.html”; };
- 57. Matheus S. Thomaz Front-end Developer /Jquery - Eventos var btn =$(‘#btn-home’); btn.click(function(){ $("#helloDiv").html("Hello World!"); });
- 58. Matheus S. Thomaz Front-end Developer /Jquery - Atributos 1. $(".botao").addClass("loremIpsum"); http://api.jquery.com/addClass/
- 59. Matheus S. Thomaz Front-end Developer /Jquery - Atributos 1. $(".botao").removeClass("loremIpsum"); http://api.jquery.com/removeClass/
- 60. Matheus S. Thomaz Front-end Developer /Jquery - Atributos 1. $(".botao").css("border", “1px solid black”); http://api.jquery.com/css/
- 61. Matheus S. Thomaz Front-end Developer /Jquery - Atributos 1. $(".botao").css("border", “1px solid black”); http://api.jquery.com/css/
- 62. Matheus S. Thomaz Front-end Developer /Jquery - Atributos 1. $(".box").toggleClass("open"); http://api.jquery.com/toggleClass/
- 63. Matheus S. Thomaz Front-end Developer /Jquery - Atributos 1. $(".btn").attr("href", “google.com”); 1. $(".btn").attr("href"); http://api.jquery.com/attr/
- 64. Matheus S. Thomaz Front-end Developer /Jquery - Atributos 1. $(".btn").html("clique aqui!”); 1. $(".btn").html(); http://api.jquery.com/html/
- 65. Matheus S. Thomaz Front-end Developer /Jquery - Atributos 1. $("input").val("clique aqui!”); 1. $("input").val(); http://api.jquery.com/val/
- 66. Matheus S. Thomaz Front-end Developer /Jquery - Eventos 1. var box = $("#box"); 2. $(".botao").on("click", function() { 3. box.show(); 4. }); http://api.jquery.com/on/
- 67. Matheus S. Thomaz Front-end Developer /Jquery - Eventos 1. $(".botao").find("span").function() { 2. // code 3. }); http://api.jquery.com/find/
- 68. Matheus S. Thomaz Front-end Developer /Jquery - Evento 1. $(".botao").show(); 2. $(".botao").show(400); 3. $(".botao").show(‘fast’); http://api.jquery.com/show/
- 69. Matheus S. Thomaz Front-end Developer /Jquery - Evento 1. $(".botao").hide(); 2. $(".botao").hide(500); 3. $(".botao").hide(‘slow’); http://api.jquery.com/hide/
- 70. Matheus S. Thomaz Front-end Developer /Jquery - Evento 1. $(".botao").click(function(){ 2. alert($(this).attr(‘href’)); 3. }); http://api.jquery.com/hide/
- 71. Matheus S. Thomaz Front-end Developer /Jquery - Evento $(".box").animate({ left: "-50px", opacity: 0.25 }, 'slow'); http://api.jquery.com/hide/
- 72. AUTOMATIZADOR Matheus S. Thomaz Front-end Developer DE TAREFAS
- 73. Matheus S. Thomaz Front-end Developer /Automatizadores Ferramentas que ajudam a realizar tarefas repetitivas.
- 74. Matheus S. Thomaz Front-end Developer /Automatizadores Concatenar arquivos. Minificar. Testes. Build.
- 75. Matheus S. Thomaz Front-end Developer /Porque usar? Produtividade maior. Imagina ter que abrir um site para compilar LESS toda hora que for testar?
- 76. Matheus S. Thomaz Front-end Developer /Porque usar? Minificar arquivos. Transferir para FTP. Compilar javascript. Gerar sprites.
- 77. Matheus S. Thomaz Front-end Developer /Principais http://gruntjs.com http://gulpjs.com
- 78. Matheus S. Thomaz Front-end Developer