SlideShare uma empresa Scribd logo
Desenvolvimento Web:
do básico ao deploy
Módulo II - Javascript e jQuery
Javascript + jQuery
PRESTE ATENÇÃO!
Um slide de história


                             1995


    vbscript                                 mocha
  internet explorer                          netscape



                      JAVASCRIPT
https://developer.mozilla.org/en/JavaScript/Reference
ATUALMENTE
Por que ?
Criar variáveis.


var instrutor = “Harry”;
var nota_aluno = 9.0;
var odeia_windows = true;
var idade = 22;



 Ponto e Vírgula no final !!!
Funções Globais

alert(“Oi Sebastian!”);


var answer = confirm(“Ta na FATEC ?”);



var age = prompt(“Sua idade:”);
Arrays

var x = [“zero”,“um”,“dois”];


 x[2]; // dois

 x.length; // 3

 x.reverse();
Funções

function nome (var1, var2) {};


function soma (num1, num2) {
   return num1 + num2;
};
Javascript + jQuery
Carregando jQuery na sua página

Por 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
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>
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>
Seletores do jQuery


                    Por classe

                    <p class=‘souracker’>
$(“p.souracker”);   Eu gosto de Javascript por que é hype!
                    </p>




                          CSS !!!!
   Elemento + . + nome da classe
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
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
Seletores do jQuery


               Múltiplos elementos

$(“p#noob, p.souracker”);
Manipulando CSS

$(“p”).css(“font-size”,“24px”);

$(“p”).hasClass(“plan”);

$(“p:first”).addClass(“bigger”);

$(“p:first”).removeClass(“bigger”);

$(“p:first”).toggleClass(“bigger”);
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”);
Eventos

$(“p”).click();

$(“p”).hover();

$(“p”).keypress();




Funções anônimas

function(){
   alert(“Não tenho nome!”);
}
Animações

$(“p”).slideDown();

$(“p”).slideUp();

$(“p”).slideToggle();

$(“p”).fadeIn();

$(“p”).fadeOut();

$(“p”).fadeToggle();
Javascript + jQuery
Anúncio

Mais conteúdo relacionado

Mais procurados (19)

jQuery na Prática!
jQuery na Prática!jQuery na Prática!
jQuery na Prática!
José Alexandre Macedo
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
Giovanni Bassi
 
Javascript OO
Javascript OOJavascript OO
Javascript OO
Fábio Elísio
 
Java script aula 07 - j-query
Java script   aula 07 - j-queryJava script   aula 07 - j-query
Java script aula 07 - j-query
Cristiano Pires Martins
 
Java script aula 02 - operadores
Java script   aula 02 - operadoresJava script   aula 02 - operadores
Java script aula 02 - operadores
Cristiano Pires Martins
 
Jquery - Dicas e Truques
Jquery - Dicas e TruquesJquery - Dicas e Truques
Jquery - Dicas e Truques
Lambda 3
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
Cristiano Pires Martins
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Rodrigo Bueno Santa Maria, BS, MBA
 
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
iMasters
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Romulo Fagundes
 
Mashups: Criando Valor na Web 2.0 (BandTec)
Mashups: Criando Valor na Web 2.0 (BandTec)Mashups: Criando Valor na Web 2.0 (BandTec)
Mashups: Criando Valor na Web 2.0 (BandTec)
Carlos Duarte do Nascimento
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
Freedom DayMS
 
Java script - funções
Java script - funçõesJava script - funções
Java script - funções
Cristiano Pires Martins
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
Thiago Poiani
 
jQuery
jQueryjQuery
jQuery
Bruno Cunha
 
Da argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroDa argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguro
Michael Castillo Granados
 
Java script aula 06 - dom
Java script   aula 06 - domJava script   aula 06 - dom
Java script aula 06 - dom
Cristiano Pires Martins
 
jQuery Simplificando o JavaScript
jQuery Simplificando o JavaScriptjQuery Simplificando o JavaScript
jQuery Simplificando o JavaScript
Everaldo Wanderlei Uavniczak
 
Bread board
Bread boardBread board
Bread board
André Walker
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
Giovanni Bassi
 
Jquery - Dicas e Truques
Jquery - Dicas e TruquesJquery - Dicas e Truques
Jquery - Dicas e Truques
Lambda 3
 
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
7Masters jQuery - boas práticas em JavaScriptQuery, com Bruno Rocha
iMasters
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Romulo Fagundes
 
Aplicações rápidas para a Web com Django
Aplicações rápidas para a Web com DjangoAplicações rápidas para a Web com Django
Aplicações rápidas para a Web com Django
Freedom DayMS
 
DOMinando JavaScript
DOMinando JavaScriptDOMinando JavaScript
DOMinando JavaScript
Thiago Poiani
 
Da argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguroDa argila ao forte: como desenvolver uma loja com PagSeguro
Da argila ao forte: como desenvolver uma loja com PagSeguro
Michael Castillo Granados
 

Destaque (9)

Geo on Rails - Um guia para manter o seu cabelo.
Geo on Rails - Um guia para manter o seu cabelo.Geo on Rails - Um guia para manter o seu cabelo.
Geo on Rails - Um guia para manter o seu cabelo.
Guilherme Vinicius Moreira
 
Ruby on Rails em 30 minutos
Ruby on Rails em 30 minutosRuby on Rails em 30 minutos
Ruby on Rails em 30 minutos
Guilherme Vinicius Moreira
 
Introdução ao conceito de testes.
Introdução ao conceito de testes.Introdução ao conceito de testes.
Introdução ao conceito de testes.
Guilherme Vinicius Moreira
 
Introdução à Gamificação
Introdução à GamificaçãoIntrodução à Gamificação
Introdução à Gamificação
Guilherme Vinicius Moreira
 
Python: programação divertida novamente
Python: programação divertida novamentePython: programação divertida novamente
Python: programação divertida novamente
Rodrigo Amaral
 
Dojo com Arduino
Dojo com ArduinoDojo com Arduino
Dojo com Arduino
Luciano Ramalho
 
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
tdc-globalcode
 
Oficina Ruby on Rails Fatec
Oficina Ruby on Rails FatecOficina Ruby on Rails Fatec
Oficina Ruby on Rails Fatec
Guilherme Vinicius Moreira
 
Oficina Python e Google App Engine
Oficina Python e Google App EngineOficina Python e Google App Engine
Oficina Python e Google App Engine
Rodrigo Amaral
 
Geo on Rails - Um guia para manter o seu cabelo.
Geo on Rails - Um guia para manter o seu cabelo.Geo on Rails - Um guia para manter o seu cabelo.
Geo on Rails - Um guia para manter o seu cabelo.
Guilherme Vinicius Moreira
 
Python: programação divertida novamente
Python: programação divertida novamentePython: programação divertida novamente
Python: programação divertida novamente
Rodrigo Amaral
 
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
Open4Education | MC59 - Aprendendo a programar de forma divertida e eficiente...
tdc-globalcode
 
Oficina Python e Google App Engine
Oficina Python e Google App EngineOficina Python e Google App Engine
Oficina Python e Google App Engine
Rodrigo Amaral
 
Anúncio

Semelhante a Javascript + jQuery (20)

LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
GabrielaMota46
 
Javascript no SAPO e libsapojs
Javascript no SAPO e libsapojsJavascript no SAPO e libsapojs
Javascript no SAPO e libsapojs
codebits
 
Minicurso groovy grails
Minicurso groovy grailsMinicurso groovy grails
Minicurso groovy grails
Victor Hugo Germano
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
Caue Fajoli
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
Alisson Agiani
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
Miquéias Amaro
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
Wesley Lemos
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
Kaio Valente
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
Zeno Rocha
 
Ajax em java
Ajax em javaAjax em java
Ajax em java
Maurício Linhares
 
A vida além do jQuery
A vida além do jQueryA vida além do jQuery
A vida além do jQuery
Paulo Pires
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
André Willik Valenti
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
Vitor Garcia
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
Harlley Oliveira
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
Flávio Lisboa
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
Michael Castillo Granados
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
Impacta Eventos
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquery
grupoweblovers
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
GabrielaMota46
 
Javascript no SAPO e libsapojs
Javascript no SAPO e libsapojsJavascript no SAPO e libsapojs
Javascript no SAPO e libsapojs
codebits
 
jQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê FajolijQuery na Prática - Cauê Fajoli
jQuery na Prática - Cauê Fajoli
Caue Fajoli
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
Alisson Agiani
 
Simplificando o Javascrip
Simplificando o JavascripSimplificando o Javascrip
Simplificando o Javascrip
Miquéias Amaro
 
Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
Wesley Lemos
 
jQuery - Visão Geral
jQuery - Visão GeraljQuery - Visão Geral
jQuery - Visão Geral
Kaio Valente
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
Zeno Rocha
 
A vida além do jQuery
A vida além do jQueryA vida além do jQuery
A vida além do jQuery
Paulo Pires
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
Vitor Garcia
 
Melhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQueryMelhorando a Experiência do Usuário com JavaScript e jQuery
Melhorando a Experiência do Usuário com JavaScript e jQuery
Harlley Oliveira
 
Desenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo ToolkitDesenvolvendo com Dojo Toolkit
Desenvolvendo com Dojo Toolkit
Flávio Lisboa
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
Impacta Eventos
 
Palestra - Iniciando no Jquery
Palestra - Iniciando no JqueryPalestra - Iniciando no Jquery
Palestra - Iniciando no Jquery
grupoweblovers
 
Anúncio

Javascript + jQuery

Notas do Editor