Embed Size (px)
DESCRIPTION
Minicurso Iniciando no Mundo Front-End - Dia 03 Ministrado na SASPI {5} - Semana Acadêmica do curso de Sistemas para Internet - IFSUL
Citation preview
Matheus S. Thomaz
Front-end Developer
Matheus S. Thomaz
Front-end Developer
CRONOGRAMA
Matheus S. Thomaz
Front-end Developer
/Cronograma
Javascript
Jquery
Pré-processadores
Matheus S. Thomaz
Front-end Developer
JAVASCRIPT
Matheus S. Thomaz
Front-end Developer
/Javascript
Principal linguagem client-side
Matheus S. Thomaz
Front-end Developer
/Javascript
JSFiddle
http://jsfiddle.net/
FRONT-ENDERAND
MOTHER-F***ER
FRONT-ENDERMatheus S. Thomaz
Front-end Developer
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.
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.
Matheus S. Thomaz
Front-end Developer
JAVASCRIPT+
CSS+
HTML
HTML
informação
Matheus S. Thomaz
Front-end Developer
CSS
formatação
Matheus S. Thomaz
Front-end Developer
JAVASCRIPT
manipulação
Matheus S. Thomaz
Front-end Developer
Matheus S. Thomaz
Front-end Developer
HELLO WORLD!
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>
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>
Matheus S. Thomaz
Front-end Developer
INSERINDO NA
TELA
De preferência no
final da tela!
Matheus S. Thomaz
Front-end Developer
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.
Matheus S. Thomaz
Front-end Developer
/Inline
1. <script>2. console.log('Hello World!');3. </script>
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>
Matheus S. Thomaz
Front-end Developer
VARIÁVEIS
Matheus S. Thomaz
Front-end Developer
/Variáveis
Tipagem dinâmica
Variáveis de escopo local [var]
Variáveis de escopo global [window]
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”};
Matheus S. Thomaz
Front-end Developer
/Variáveis
var num1 = 123;
var num2 = “123”;
num1 + num2;
Matheus S. Thomaz
Front-end Developer
/Variáveis
var num1 = 123;
var num2 = “123”;
num1 + num2;
// 123123
Matheus S. Thomaz
Front-end Developer
FUNÇÕES
Matheus S. Thomaz
Front-end Developer
/Funções - Declaração simples
function log (msg) {
console.log(msg);
};
log(‘lorem ipsum’);
Matheus S. Thomaz
Front-end Developer
/Funções - Expressão
var log = function (msg) {
console.log(msg);
};
log(‘lorem ipsum’);
Matheus S. Thomaz
Front-end Developer
/Funções - Método
var App = {
log : function (msg) {
console.log(msg);
}
};
App.log(‘lorem ipsum’);
Matheus S. Thomaz
Front-end Developer
ESCOPO
Matheus S. Thomaz
Front-end Developer
/Escopo
var a = 0,
b = 2;
function soma () {
var a = 1,
b = 4;
return a + b;
};
soma();
Matheus S. Thomaz
Front-end Developer
/Escopo
var a = 0,
b = 2;
function soma () {
var a = 1,
b = 4;
return a + b;
};
soma(); // 5
Matheus S. Thomaz
Front-end Developer
DOM
Document Object Model
Matheus S. Thomaz
Front-end Developer
Matheus S. Thomaz
Front-end Developer
/DOM
Interação entre o HTML e o JS.
Matheus S. Thomaz
Front-end Developer
/DOM
document.querySelector(‘#body’);
document.getElementById(‘main’);
document.getElementByClassName(‘class’);
Matheus S. Thomaz
Front-end Developer
/DOM
var btn = document.getElementById(‘btn-home’);
btn.onclick = function(){
window.location.href = “index.html”;
};
Matheus S. Thomaz
Front-end Developer
JQUERY
Jquery
!==
JavascriptMatheus S. Thomaz
Front-end Developer
Jquery
===
BibliotecaMatheus S. Thomaz
Front-end Developer
Jquery
===Linguagem de
abstração Matheus S. Thomaz
Front-end Developer
Matheus S. Thomaz
Front-end Developer
/Jquery
Primeiro aprenda o básico de Javascript.
Poucos projetos não utilizam Jquery.
framework javascript mais utilizado.
Matheus S. Thomaz
Front-end Developer
/Jquery
Duas versões
1.X
Suporte IE6+
2.X
Suporte IE9+
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
Matheus S. Thomaz
Front-end Developer
JQUERYPORQUE USAR?
“Write less, do more”
Matheus S. Thomaz
Front-end Developer
/Jquery
Mágica com poucas linhas de código.
Como todo framework, expande a usabilidade de
uma linguagem.
Matheus S. Thomaz
Front-end Developer
JQUERYCOMO USAR?
Matheus S. Thomaz
Front-end Developer
/Jquery
http://jquery.com/
<script src="js/jquery.min.js"></script>
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>
Matheus S. Thomaz
Front-end Developer
/Jquery
$(document).ready(function() {
// código jquery
});
$(function(){
// código jquery
});
Matheus S. Thomaz
Front-end Developer
/Jquery - Hello World!
<script>
$(function(){
alert('Hello World');
});
</script>
Matheus S. Thomaz
Front-end Developer
/DOM
document.querySelector(‘#body’);
$(‘#body’);
document.getElementById(‘main’);
$(‘#main’);
document.getElementByClassName(‘class’);
$(‘.class’);
Matheus S. Thomaz
Front-end Developer
/Jquery - Manipulação HTML
1. $("#helloDiv").html("Hello World!");
Matheus S. Thomaz
Front-end Developer
/Jquery - Eventos
var btn = document.getElementById(‘btn-home’);
btn.onclick = function(){
window.location.href = “index.html”;
};
Matheus S. Thomaz
Front-end Developer
/Jquery - Eventos
var btn =$(‘#btn-home’);
btn.click(function(){
$("#helloDiv").html("Hello World!");
});
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".botao").addClass("loremIpsum");
http://api.jquery.com/addClass/
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".botao").removeClass("loremIpsum");
http://api.jquery.com/removeClass/
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".botao").css("border", “1px solid black”);
http://api.jquery.com/css/
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".botao").css("border", “1px solid black”);
http://api.jquery.com/css/
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".box").toggleClass("open");
http://api.jquery.com/toggleClass/
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".btn").attr("href", “google.com”);
1. $(".btn").attr("href");
http://api.jquery.com/attr/
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $(".btn").html("clique aqui!”);
1. $(".btn").html();
http://api.jquery.com/html/
Matheus S. Thomaz
Front-end Developer
/Jquery - Atributos
1. $("input").val("clique aqui!”);
1. $("input").val();
http://api.jquery.com/val/
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/
Matheus S. Thomaz
Front-end Developer
/Jquery - Eventos
1. $(".botao").find("span").function() {
2. // code
3. });
http://api.jquery.com/find/
Matheus S. Thomaz
Front-end Developer
/Jquery - Evento
1. $(".botao").show();
2. $(".botao").show(400);
3. $(".botao").show(‘fast’);
http://api.jquery.com/show/
Matheus S. Thomaz
Front-end Developer
/Jquery - Evento
1. $(".botao").hide();
2. $(".botao").hide(500);
3. $(".botao").hide(‘slow’);
http://api.jquery.com/hide/
Matheus S. Thomaz
Front-end Developer
/Jquery - Evento
1. $(".botao").click(function(){
2. alert($(this).attr(‘href’));
3. });
http://api.jquery.com/hide/
Matheus S. Thomaz
Front-end Developer
/Jquery - Evento
$(".box").animate({
left: "-50px",
opacity: 0.25
}, 'slow');
http://api.jquery.com/hide/
Matheus S. Thomaz
Front-end Developer
AUTOMATIZADOR
DE TAREFAS
Matheus S. Thomaz
Front-end Developer
/Automatizadores
Ferramentas que ajudam a realizar
tarefas repetitivas.
Matheus S. Thomaz
Front-end Developer
/Automatizadores
Concatenar arquivos.
Minificar.
Testes.
Build.
Matheus S. Thomaz
Front-end Developer
/Porque usar?
Produtividade maior.
Imagina ter que abrir um site para compilar LESS
toda hora que for testar?
Matheus S. Thomaz
Front-end Developer
/Porque usar?
Minificar arquivos.
Transferir para FTP.
Compilar javascript.
Gerar sprites.
Matheus S. Thomaz
Front-end Developer
/Principais
http://gruntjs.com http://gulpjs.com
Matheus S. Thomaz
Front-end Developer
