minicurso iniciando no mundo front-end - dia 03 - saspi {5}
DESCRIPTION
Minicurso Iniciando no Mundo Front-End - Dia 03 Ministrado na SASPI {5} - Semana Acadêmica do curso de Sistemas para Internet - IFSULTRANSCRIPT
![Page 1: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/1.jpg)
Matheus S. Thomaz
Front-end Developer
![Page 2: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/2.jpg)
Matheus S. Thomaz
Front-end Developer
CRONOGRAMA
![Page 3: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/3.jpg)
Matheus S. Thomaz
Front-end Developer
/Cronograma
Javascript
Jquery
Pré-processadores
![Page 4: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/4.jpg)
Matheus S. Thomaz
Front-end Developer
JAVASCRIPT
![Page 5: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/5.jpg)
Matheus S. Thomaz
Front-end Developer
/Javascript
Principal linguagem client-side
![Page 6: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/6.jpg)
Matheus S. Thomaz
Front-end Developer
/Javascript
JSFiddle
http://jsfiddle.net/
![Page 7: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/7.jpg)
FRONT-ENDERAND
MOTHER-F***ER
FRONT-ENDERMatheus S. Thomaz
Front-end Developer
![Page 8: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/8.jpg)
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.
![Page 9: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/9.jpg)
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.
![Page 10: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/10.jpg)
Matheus S. Thomaz
Front-end Developer
JAVASCRIPT+
CSS+
HTML
![Page 11: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/11.jpg)
HTML
informação
Matheus S. Thomaz
Front-end Developer
![Page 12: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/12.jpg)
CSS
formatação
Matheus S. Thomaz
Front-end Developer
![Page 13: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/13.jpg)
JAVASCRIPT
manipulação
Matheus S. Thomaz
Front-end Developer
![Page 14: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/14.jpg)
Matheus S. Thomaz
Front-end Developer
HELLO WORLD!
![Page 15: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/15.jpg)
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. // conteudo10.</body>11.</html>
![Page 16: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/16.jpg)
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>
![Page 17: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/17.jpg)
Matheus S. Thomaz
Front-end Developer
INSERINDO NA
TELA
![Page 18: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/18.jpg)
De preferência no
final da tela!
Matheus S. Thomaz
Front-end Developer
![Page 19: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/19.jpg)
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.
![Page 20: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/20.jpg)
Matheus S. Thomaz
Front-end Developer
/Inline
1. <script>2. console.log('Hello World!');3. </script>
![Page 21: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/21.jpg)
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>
![Page 22: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/22.jpg)
Matheus S. Thomaz
Front-end Developer
VARIÁVEIS
![Page 23: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/23.jpg)
Matheus S. Thomaz
Front-end Developer
/Variáveis
Tipagem dinâmica
Variáveis de escopo local [var]
Variáveis de escopo global [window]
![Page 24: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/24.jpg)
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”};
![Page 25: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/25.jpg)
Matheus S. Thomaz
Front-end Developer
/Variáveis
var num1 = 123;
var num2 = “123”;
num1 + num2;
![Page 26: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/26.jpg)
Matheus S. Thomaz
Front-end Developer
/Variáveis
var num1 = 123;
var num2 = “123”;
num1 + num2;
// 123123
![Page 27: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/27.jpg)
Matheus S. Thomaz
Front-end Developer
FUNÇÕES
![Page 28: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/28.jpg)
Matheus S. Thomaz
Front-end Developer
/Funções - Declaração simples
function log (msg) {
console.log(msg);
};
log(‘lorem ipsum’);
![Page 29: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/29.jpg)
Matheus S. Thomaz
Front-end Developer
/Funções - Expressão
var log = function (msg) {
console.log(msg);
};
log(‘lorem ipsum’);
![Page 30: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/30.jpg)
Matheus S. Thomaz
Front-end Developer
/Funções - Método
var App = {
log : function (msg) {
console.log(msg);
}
};
App.log(‘lorem ipsum’);
![Page 31: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/31.jpg)
Matheus S. Thomaz
Front-end Developer
ESCOPO
![Page 32: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/32.jpg)
Matheus S. Thomaz
Front-end Developer
/Escopo
var a = 0,
b = 2;
function soma () {
var a = 1,
b = 4;
return a + b;
};
soma();
![Page 33: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/33.jpg)
Matheus S. Thomaz
Front-end Developer
/Escopo
var a = 0,
b = 2;
function soma () {
var a = 1,
b = 4;
return a + b;
};
soma(); // 5
![Page 34: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/34.jpg)
Matheus S. Thomaz
Front-end Developer
DOM
![Page 35: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/35.jpg)
Document Object Model
Matheus S. Thomaz
Front-end Developer
![Page 36: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/36.jpg)
Matheus S. Thomaz
Front-end Developer
/DOM
Interação entre o HTML e o JS.
![Page 37: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/37.jpg)
Matheus S. Thomaz
Front-end Developer
/DOM
document.querySelector(‘#body’);
document.getElementById(‘main’);
document.getElementByClassName(‘class’);
![Page 38: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/38.jpg)
Matheus S. Thomaz
Front-end Developer
/DOM
var btn = document.getElementById(‘btn-home’);
btn.onclick = function(){
window.location.href = “index.html”;
};
![Page 39: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/39.jpg)
Matheus S. Thomaz
Front-end Developer
JQUERY
![Page 40: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/40.jpg)
Jquery
!==
JavascriptMatheus S. Thomaz
Front-end Developer
![Page 41: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/41.jpg)
Jquery
===
BibliotecaMatheus S. Thomaz
Front-end Developer
![Page 42: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/42.jpg)
Jquery
===Linguagem de
abstração Matheus S. Thomaz
Front-end Developer
![Page 43: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/43.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery
Primeiro aprenda o básico de Javascript.
Poucos projetos não utilizam Jquery.
framework javascript mais utilizado.
![Page 44: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/44.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery
Duas versões
1.X
Suporte IE6+
2.X
Suporte IE9+
![Page 45: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/45.jpg)
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
![Page 46: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/46.jpg)
Matheus S. Thomaz
Front-end Developer
JQUERYPORQUE USAR?
![Page 47: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/47.jpg)
“Write less, do more”
![Page 48: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/48.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery
Mágica com poucas linhas de código.
Como todo framework, expande a usabilidade de
uma linguagem.
![Page 49: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/49.jpg)
Matheus S. Thomaz
Front-end Developer
JQUERYCOMO USAR?
![Page 50: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/50.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery
http://jquery.com/
<script src="js/jquery.min.js"></script>
![Page 51: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/51.jpg)
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>
![Page 52: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/52.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery
$(document).ready(function() {
// código jquery
});
$(function(){
// código jquery
});
![Page 53: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/53.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Hello World!
<script>
$(function(){
alert('Hello World');
});
</script>
![Page 54: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/54.jpg)
Matheus S. Thomaz
Front-end Developer
/DOM
document.querySelector(‘#body’);
$(‘#body’);
document.getElementById(‘main’);
$(‘#main’);
document.getElementByClassName(‘class’);
$(‘.class’);
![Page 55: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/55.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Manipulação HTML
1. $("#helloDiv").html("Hello World!");
![Page 56: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/56.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Eventos
var btn = document.getElementById(‘btn-home’);
btn.onclick = function(){
window.location.href = “index.html”;
};
![Page 57: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/57.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Eventos
var btn =$(‘#btn-home’);
btn.click(function(){
$("#helloDiv").html("Hello World!");
});
![Page 58: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/58.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".botao").addClass("loremIpsum");
http://api.jquery.com/addClass/
![Page 59: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/59.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".botao").removeClass("loremIpsum");
http://api.jquery.com/removeClass/
![Page 60: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/60.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".botao").css("border", “1px solid black”);
http://api.jquery.com/css/
![Page 61: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/61.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".botao").css("border", “1px solid black”);
http://api.jquery.com/css/
![Page 62: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/62.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".box").toggleClass("open");
http://api.jquery.com/toggleClass/
![Page 63: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/63.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".btn").attr("href", “google.com”);
1. $(".btn").attr("href");
http://api.jquery.com/attr/
![Page 64: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/64.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".btn").html("clique aqui!”);
1. $(".btn").html();
http://api.jquery.com/html/
![Page 65: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/65.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $("input").val("clique aqui!”);
1. $("input").val();
http://api.jquery.com/val/
![Page 66: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/66.jpg)
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/
![Page 67: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/67.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Eventos
1. $(".botao").find("span").function() {
2. // code
3. });
http://api.jquery.com/find/
![Page 68: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/68.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Evento
1. $(".botao").show();
2. $(".botao").show(400);
3. $(".botao").show(‘fast’);
http://api.jquery.com/show/
![Page 69: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/69.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Evento
1. $(".botao").hide();
2. $(".botao").hide(500);
3. $(".botao").hide(‘slow’);
http://api.jquery.com/hide/
![Page 70: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/70.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Evento
1. $(".botao").click(function(){
2. alert($(this).attr(‘href’));
3. });
http://api.jquery.com/hide/
![Page 71: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/71.jpg)
Matheus S. Thomaz
Front-end Developer
/Jquery - Evento
$(".box").animate({
left: "-50px",
opacity: 0.25
}, 'slow');
http://api.jquery.com/hide/
![Page 72: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/72.jpg)
Matheus S. Thomaz
Front-end Developer
AUTOMATIZADOR
DE TAREFAS
![Page 73: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/73.jpg)
Matheus S. Thomaz
Front-end Developer
/Automatizadores
Ferramentas que ajudam a realizar
tarefas repetitivas.
![Page 74: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/74.jpg)
Matheus S. Thomaz
Front-end Developer
/Automatizadores
Concatenar arquivos.
Minificar.
Testes.
Build.
![Page 75: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/75.jpg)
Matheus S. Thomaz
Front-end Developer
/Porque usar?
Produtividade maior.
Imagina ter que abrir um site para compilar LESS
toda hora que for testar?
![Page 76: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/76.jpg)
Matheus S. Thomaz
Front-end Developer
/Porque usar?
Minificar arquivos.
Transferir para FTP.
Compilar javascript.
Gerar sprites.
![Page 77: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/77.jpg)
Matheus S. Thomaz
Front-end Developer
/Principais
http://gruntjs.com http://gulpjs.com
![Page 78: Minicurso Iniciando no Mundo Front-End - Dia 03 - SASPI {5}](https://reader033.vdocuments.site/reader033/viewer/2022042816/5595e2c61a28abb0598b475a/html5/thumbnails/78.jpg)
Matheus S. Thomaz
Front-end Developer