SlideShare uma empresa Scribd logo
JavaScript e jQuery




JavaScript e jQuery para Webdesigners

                      Harlley R. Oliveira
JavaScript e jQuery



O que é JavaScript?
   Não é Java
   Foi projetado para dar interatividade às páginas HTML
   É uma linguagem de script que é intepretada pelo browser
   É a linguagem mais popular da internet, principalmente
   agora com essa onda de Web 2.0
   Os browsers estão se preparando para melhorar a
   performance para o uso intensivo de JavaScript:
      Chrome
      Firefox 3.1
      Safari 4
      Internet Explorer 8
JavaScript e jQuery



Além de páginas HTML
   Adobe Air
   Google Gears
   Jaxer
   Extensões para o Google Chrome
   Firefox
       Criando extensões
       Criando comandos para o Ubiquity
       Criando scripts para Greasemonkey
   Widgets para iGoogle, Netvibes, Open Social e até celular.
JavaScript e jQuery



Antes de programar, vamos nos motivar!
   Validar formulários e aplcar máscaras
   Efeitos especiais :)
   Interações
       Arrastar e soltar
       Selecionar
       Redimensionar
       Ordenar
   Componentes de interface
       Accordion e abas
       Calendário
       Barra de Progresso
       Slider
       Caixa de diálogo e grids.
JavaScript e jQuery



Mais um pouco de motivação
   Mapas
   Carousel
   Lightbox
   Aplicações complexas


Se achou pouco, aqui e aqui tem mais.
JavaScript e jQuery




    "Com grandes poderes vêm grandes responsabilidades"
                   Peter Benjamin Parker


O JavaScript deve ser usado para melhorar a experiência do
usuário, mas sempre devemos ficar atentos a outros dois
requisitos importantes: Acessibilidade e Performance.
JavaScript e jQuery



 Antigamente as páginas eram criadas assim:




 HTML, CSS, JavaScript e até PHP ou ASP tudo junto no
 mesmo arquivo. Por isso era mais fácil fazer tudo em Flash.
JavaScript e jQuery



 Agora trabalhamos desta forma




 Usando o HTML para o conteúdo (camada mais importante),
 CSS para a apresentação e JavaScript para o comportamento
 (camada mais divertida).
JavaScript e jQuery




Imagens by http://www.sitepoint.com/article/simply-
JavaScript e jQuery



Agora chegou a melhor hora, programar! Vamos precisar das
seguintes ferramentas:
   Firefox
       Extensão Firebug
       Extensão Web Developer
   Bloco de notas

Aqui neste link tem uma apostila de Introdução a Lógica de
Programação e neste aqui tem uma introdução usando o
JavaScript.
JavaScript e jQuery



Vamos sempre usar o JavaScript de modo não-intrusivo
através de um include na página html

   <script type="text/javascript" src="[ path_file_js ]"></script>

Desta forma se mantém o código separado facilitando na
manutenção e performance, pois assim como o CSS, o
JavaScript fica no cache do browser.
JavaScript e jQuery



Nosso primeiro script:

// Preenche a variável
var meu_nome = 'Harlley';

/* Mostra uma mensagem */
alert('Boa tarde ' + meu_nome + '!');

/* Toda string é um objeto e tem vários métodos e propriedades
para ajudar na manipulação, um exemplo */
alert(meu_nome.length);
JavaScript e jQuery



Vetores (Array)

// Cria um array com vários nomes
var nomes = [ 'Fulano', 'Cicrano', 'Beltrano' ];

/* Mostra a mensagem com um dos nomes indicador pelo
índice, que começa em zero */
alert('Boa tarde ' + nomes[0] + '!');

// O array também é um objeto com vários métodos e
propriedades, um deles
nomes.reverse();

alert('Boa tarde ' + nomes[0] + '!');
JavaScript e jQuery



Operadores matemáticos básicos

var resultado;
resultado = 3 + 2;
alert('3 + 2 = ' + resultado);

resultado = 3 - 2;
alert('3 - 2 = ' + resultado);

resultado = 3 * 2;
alert('3 * 2 = ' + resultado);
resultado = 3 / 2;
alert('3 / 2 = ' + resultado);
JavaScript e jQuery



Operadores básicos lógicos e de comparação

alert(3 == 3); /********** igual */
alert(3 != 3); /*********** diferente */
alert(3 > 3); /************ maior */
alert(3 >= 3); /********** maior ou igual */
alert(3 < 3); /************ menor*/
alert(3 <= 3); /********** menor ou igual */
alert(true && false); /** e */
alert(true || false); /**** ou */
JavaScript e jQuery



Comandos básicos - if ... else

var hora = 8;
// Se variável hora meno que 12 então diga Bom dia!
if ( hora < 12 ) {
    alert('Bom dia!');
}
// Senão se hora for maior que 12 e menor que 18, Boa tarde!
else if( (hora > 12) && (hora < 18) ) {
    alert('Boa tarde!');
}
//Senão for Bom dia e nem Boa tarde, só pode ser Boa noite!
else {
    alert('Boa noite!');
}
JavaScript e jQuery



Comandos básicos - for

// Preencho o array dias_uteis com os nomes dos dias
var dias_uteis = ['segunda', 'terça', 'quarta', 'quinta', 'sexta'];
/* Inicializo a variável de iteração, e executo o comando alert
enquanto a variável de iteração for menor que 5: 0, 1, 2, 3, 4 */
for ( i = 0; i < 5; i++ ) {
    // Acesso o array dias_uteis através do índice
    alert(dias_uteis[i]);
}
JavaScript e jQuery



Comandos básicos - for ... in

/* É similar ao for visto anteriormente, porém tem menos
opções de configuração e percorre todos os elementos do
objeto */
var dias_uteis = ['segunda', 'terça', 'quarta', 'quinta', 'sexta'];
for ( i in dias_uteis ) {
   alert(dias_uteis[i]);
}
JavaScript e jQuery



Funções

/* Função que recebe um vetor como parâmetro e imprime
através do alert todos os ítens */
function mostrarMensagem(vetor) {
   for ( i in vetor ) {
      alert(vetor[i]);
   }
}

var dias_uteis = ['segunda', 'terça', 'quarta', 'quinta', 'sexta'];
mostrarMensagem(dias_uteis);

var estacoes = ['primavera', 'verao', 'outono', 'inverno'];
mostrarMensagem(estacoes);
JavaScript e jQuery



Alguns métodos do objeto String

var conteudo = 'JavaScript';

alert( conteudo.length ); // tamalho da string
alert( conteudo.charAt(4) ); // acha o caractér pelo índice
alert( conteudo.toLowerCase() ); // minúsculo
alert( conteudo.toUpperCase() ); // minúsculo
alert( 'JavaScript não é ' + conteudo.substr(0, 4) );

var conteudo = 'JavaScript não é Java ';
alert( conteudo.split(' ')[0] ); // divide a string em vetores
alert( conteudo.replace('Java ', 'difícíl') ); /* Substitui valores
dentro da string */
JavaScript e jQuery



Vimos até agora somente os comandos básicos do JavaScript,
existem muito mais comandos, mas não precisamos aprender
todos, basta termos uma boa referência para consulta.

Pra quem quiser aprender um pouco mais sobre JavaScript,
deixo as seguintes sugestões:
http://aprendajs.klaus.pro.br/
http://eloquentjavascript.net/
Livro Simply JavaScript

Agora vamos aprender como manipular todo o DOM HTML de
uma forma bem simples e usando uma sintaxe bem conhecida
por todos, seletores CSS.
JavaScript e jQuery



DOM - Document Object Model

   DOM é um padrão da W3C pra manipular documentos
   HTML e XML
   O código HTML é interpretado pelo browser e transformado
   em uma árvore de objetos que pode ser completamente
   manipulado, no nosso caso usando JavaScript.
JavaScript e jQuery



O que é jQuery?

   É um framework JavaScript que simplifica a manipulação do
   DOM HTML, tratamento de eventos, efeitos visuais e Ajax.
   Suporta os seletores CSS 1-3
   Está em conformidade com os padrões web
   Cross-browser IE6+, FF2+, Safari3+, Opera9+, Chrome
   Está sendo usado por grandes empresas como Google,
   Dell, Globo, Digg e Mozilla
JavaScript e jQuery



Pra usar o jQuery basta baixar o arquivo e incluir no HTML o
include para o arquivo:

   <script type="text/javascript" src="[ path_file_js ]"></script>

 Em outro arquivo, vamos colocar o nosso script jQuery

 /* garante que o código vai ser executado depois do DOM ser
carregado. */
    $(function() {
       // Adiciona um elemento h1 ao DOM
        $('body').append('<h1>Olá Mundo!</h1>');
    });
JavaScript e jQuery



<span>Formulário</span>
<fieldset>
   <div class="item-form">
      <label class="obrigatorio" for="nome">Nome</label>
      <input type="text" id="nome" />
   </div>
   <div class="item-form">
      <label for="telefone">Telefone</label>
      <input type="text" id="telefone" />
   </div>
   <input id="gravar" type="button" value="Gravar" />
   <button id="cancelar" disabled="disabled"
>Cancelar</button>
   <input type="button" value="Excluir" />
</fieldset>
JavaScript e jQuery



Seletores                                            Mais...

$('#nome').val('Fulano');
$('.obrigatorio').css('color', '#F00');
$('#nome, #telefone').attr('disabled', 'disabled');
$('input:button').val('Gravado!!');
$('*', 'fieldset').css('border', '1px solid #F00');
$('fieldset label').css('background-color', 'blue');
$('fieldset > label').css('background-color', 'blue');
$('label + input').css('width', '400px');
$('.item-form ~ input').css('background-color', 'blue');
JavaScript e jQuery



Manipulação do DOM                               Mais...

$('#nome').val('Fulano');
$('fieldset').html('<input type="text"/>');
$('fieldset').append('<input type="text"/>');
$('fieldset').prepend('<input type="text"/>');
$('fieldset').after('<input type="text"/>');
$('fieldset').before('<input type="text"/>');
$('#cancelar').removeAttr('disabled');
$('span').wrap('<h1></h1>');
$('button').remove();
$('fieldset').empty();
$('fieldset').css('background-color', 'blue');
$('input:text:last').addClass('blue');
JavaScript e jQuery



Eventos                                              Mais...

$('#gravar').click(function() {
    $('#nome').css('background-color', 'red').fadeOut().fadeIn();
});

$('#nome').select( function () {
   $('#telefone').val( $(this).val() );
});

var contador = 0;
$('#telefone').keydown(function() {
    contador = contador + 1;
    $('span').html(contador);
});
JavaScript e jQuery


Efeitos                            Mais...

$('#gravar').click(function () {
  $('span').toggle();
});
$('fieldset').hide('slow');
$('div').slideUp('slow');
$('div').fadeOut('slow');
$('#gravar').click(function(){
    $('fieldset').animate({
       width: '70%',
       opacity: 0.4,
       fontSize: '3em',
       borderWidth: '10px'
    }, 1500 ); });
JavaScript e jQuery




AJAX (Asynchronous Javascript And XML) é o uso
metodológico de tecnologias como Javascript e XML, providas
por navegadores, para tornar páginas mais interativas com o
usuário, utilizando-se de solicitações assíncronas de
informações. mais...
JavaScript e jQuery


Ajax                                            Mais...

$('#gravar').click(function(){
    $('body').prepend('<img id="loading" src="images/ajax-
loader.gif" />');
    $.ajax({
      url: "http://localhost/jquery/ajax_content.php",
      cache: false,
      success: function(html){
        $("body").append(html);
        $('#loading').remove();
      }
    });
});
JavaScript e jQuery


Plugins

http://plugins.jquery.com/
http://jqueryui.com/
JavaScript e jQuery


Para saber mais sobre jQuery
  Referência completa
    http://api.jquery.com/

  Livros
     http://www.livrojquery.com.br/index.php
     http://www.packtpub.com/jQuery/book/mid/1004077zztq0
     http://www.manning.com/bibeault/
JavaScript e jQuery


Obrigado!

                         harlley@gmail.com
                      http://twitter.com/harlley

Mais conteúdo relacionado

Mais procurados

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
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
André Willik Valenti
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
Helton Marinho
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
Yuri Costa
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
Victor Adriel Oliveira
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
Alexandre Marreiros
 
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
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
Luciano Borges
 
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
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
Michel Ribeiro
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
ScrumHalf Tool
 
PHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object CalisthenicsPHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object Calisthenics
Guilherme Blanco
 
Workshop Django
Workshop DjangoWorkshop Django
Workshop Django
Sérgio Santos
 
Persistência de Dados no SQLite com Room
Persistência de Dados no SQLite com RoomPersistência de Dados no SQLite com Room
Persistência de Dados no SQLite com Room
Nelson Glauber Leal
 
Turbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com KotlinTurbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com Kotlin
Nelson Glauber Leal
 
Javascript + jQuery
Javascript + jQueryJavascript + jQuery
Javascript + jQuery
Guilherme Vinicius Moreira
 
Web 2.0 com Ajax: JQuery/PHP (Aula 02)
Web 2.0 com Ajax: JQuery/PHP (Aula 02)Web 2.0 com Ajax: JQuery/PHP (Aula 02)
Web 2.0 com Ajax: JQuery/PHP (Aula 02)
Wagner Silva
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
nobios
 
JavaScript ninja com jQuery
JavaScript ninja com jQueryJavaScript ninja com jQuery
JavaScript ninja com jQuery
Reinaldo Junior
 

Mais procurados (20)

Javascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQueryJavascript para CSharpers - Append B - jQuery
Javascript para CSharpers - Append B - jQuery
 
Minicurso de jQuery
Minicurso de jQueryMinicurso de jQuery
Minicurso de jQuery
 
Aprenda jQuery 1.3
Aprenda jQuery 1.3Aprenda jQuery 1.3
Aprenda jQuery 1.3
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Introdução ao jquery
Introdução ao jqueryIntrodução ao jquery
Introdução ao jquery
 
Programação Web com jQuery
Programação Web com jQueryProgramação Web com jQuery
Programação Web com jQuery
 
Jquery a technical overview
Jquery a technical overviewJquery a technical overview
Jquery a technical overview
 
Ecommerce, mais simples do que parece
Ecommerce, mais simples do que pareceEcommerce, mais simples do que parece
Ecommerce, mais simples do que parece
 
JQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEBJQuery Alagoinhas Dev Day - UNEB
JQuery Alagoinhas Dev Day - UNEB
 
Java script aula 05 - funções
Java script   aula 05 - funçõesJava script   aula 05 - funções
Java script aula 05 - funções
 
Evento Front End SP - Organizando o Javascript
 Evento Front End SP - Organizando o Javascript Evento Front End SP - Organizando o Javascript
Evento Front End SP - Organizando o Javascript
 
CSS & JQquery
CSS & JQqueryCSS & JQquery
CSS & JQquery
 
PHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object CalisthenicsPHP para Adultos: Clean Code e Object Calisthenics
PHP para Adultos: Clean Code e Object Calisthenics
 
Workshop Django
Workshop DjangoWorkshop Django
Workshop Django
 
Persistência de Dados no SQLite com Room
Persistência de Dados no SQLite com RoomPersistência de Dados no SQLite com Room
Persistência de Dados no SQLite com Room
 
Turbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com KotlinTurbinando o desenvolvimento Android com Kotlin
Turbinando o desenvolvimento Android com Kotlin
 
Javascript + jQuery
Javascript + jQueryJavascript + jQuery
Javascript + jQuery
 
Web 2.0 com Ajax: JQuery/PHP (Aula 02)
Web 2.0 com Ajax: JQuery/PHP (Aula 02)Web 2.0 com Ajax: JQuery/PHP (Aula 02)
Web 2.0 com Ajax: JQuery/PHP (Aula 02)
 
J query javascript para seres humanos
J query   javascript para seres humanosJ query   javascript para seres humanos
J query javascript para seres humanos
 
JavaScript ninja com jQuery
JavaScript ninja com jQueryJavaScript ninja com jQuery
JavaScript ninja com jQuery
 

Destaque

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
 
Php do início ao profissional
Php do início ao profissionalPhp do início ao profissional
Php do início ao profissional
André Pfeiffer
 
Jquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-brJquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-br
TrioBlack Trioblack
 
PHP versus Java
PHP versus JavaPHP versus Java
PHP versus Java
José Silva IV
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
Guto Xavier
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
Thiago Miranda
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
Eduardo Mendes
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTI
marcochella
 
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
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
Bruno Grange
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
Rodrigo Branas
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
Bruno Catão
 
JQUERY
JQUERY JQUERY
JQUERY
info_cimol
 
Curso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoCurso de PHP Básico ao Avançado
Curso de PHP Básico ao Avançado
Luiz Junior
 
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃOINTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
Edson Lima
 

Destaque (15)

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
 
Php do início ao profissional
Php do início ao profissionalPhp do início ao profissional
Php do início ao profissional
 
Jquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-brJquery fundamentals-book-pt-br
Jquery fundamentals-book-pt-br
 
PHP versus Java
PHP versus JavaPHP versus Java
PHP versus Java
 
Web design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptávelWeb design responsivo - Criando um site adaptável
Web design responsivo - Criando um site adaptável
 
MiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSisMiniCurso Jquery - IV SimSis
MiniCurso Jquery - IV SimSis
 
Jquery 2
Jquery 2Jquery 2
Jquery 2
 
Minicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTIMinicurso IOT com javascript - SBTI
Minicurso IOT com javascript - SBTI
 
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
 
Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)Minicurso de JavaScript (Portuguese)
Minicurso de JavaScript (Portuguese)
 
Desvendando a linguagem JavaScript
Desvendando a linguagem JavaScriptDesvendando a linguagem JavaScript
Desvendando a linguagem JavaScript
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
JQUERY
JQUERY JQUERY
JQUERY
 
Curso de PHP Básico ao Avançado
Curso de PHP Básico ao AvançadoCurso de PHP Básico ao Avançado
Curso de PHP Básico ao Avançado
 
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃOINTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
INTRODUÇÃO FUNDAMENTOS DE SISTEMAS DE INFORMAÇÃO
 

Semelhante a JavaScript e JQuery para Webdesigners

Ajax em java
Ajax em javaAjax em java
Ajax em java
Maurício Linhares
 
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Evandro Klimpel Balmant
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
Claudio Miranda
 
Java script1
Java script1Java script1
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
Mario Jorge Pereira
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
GabrielaMota46
 
PHP FrameWARks - FISL
PHP FrameWARks - FISLPHP FrameWARks - FISL
PHP FrameWARks - FISL
Marcio Albuquerque
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no Frontend
Henrique Gogó
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
Cezinha Anjos
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
Henrique Gogó
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
Michel Ribeiro
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
ponto hacker
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
Giovanni Bassi
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
Zeno Rocha
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
Alisson Agiani
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
Caio Ribeiro Pereira
 
Apostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfvApostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfv
erickrodrigo23
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
DaniloPereira341965
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6
Bruno Borges
 
JavaScript
JavaScriptJavaScript
JavaScript
Matheus Soares
 

Semelhante a JavaScript e JQuery para Webdesigners (20)

Ajax em java
Ajax em javaAjax em java
Ajax em java
 
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
Interfaces Ricas para WEB com jQuery e jQueryUI (User Interface)
 
Wicket 2008
Wicket 2008Wicket 2008
Wicket 2008
 
Java script1
Java script1Java script1
Java script1
 
Java e Cloud Computing
Java e Cloud ComputingJava e Cloud Computing
Java e Cloud Computing
 
LPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdfLPII_Aula_7-JQuery.pdf
LPII_Aula_7-JQuery.pdf
 
PHP FrameWARks - FISL
PHP FrameWARks - FISLPHP FrameWARks - FISL
PHP FrameWARks - FISL
 
JavaScript Model-View no Frontend
JavaScript Model-View no FrontendJavaScript Model-View no Frontend
JavaScript Model-View no Frontend
 
RubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direitoRubyConfBr 2015 - Rails & Javascript: faça isso direito
RubyConfBr 2015 - Rails & Javascript: faça isso direito
 
Backbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectadosBackbone.js + Rails - Front-end e back-end conectados
Backbone.js + Rails - Front-end e back-end conectados
 
Evento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de FrontEvento Front End SP - Arquitetura de Front
Evento Front End SP - Arquitetura de Front
 
Javascript truquesmagicos
Javascript truquesmagicosJavascript truquesmagicos
Javascript truquesmagicos
 
LambdaDay: Backbone.js
LambdaDay: Backbone.jsLambdaDay: Backbone.js
LambdaDay: Backbone.js
 
Como Perder Peso (no browser)
Como Perder Peso (no browser)Como Perder Peso (no browser)
Como Perder Peso (no browser)
 
Apresentação sobre MVVMC
Apresentação sobre MVVMCApresentação sobre MVVMC
Apresentação sobre MVVMC
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
 
Apostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfvApostila_JavaScript_pela_axademia_ardkgfv
Apostila_JavaScript_pela_axademia_ardkgfv
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6Apps Web em Wicket e Scala no GlassFish Java EE 6
Apps Web em Wicket e Scala no GlassFish Java EE 6
 
JavaScript
JavaScriptJavaScript
JavaScript
 

Mais de Harlley Oliveira

Curso de programação para iniciantes: Qual linguagem de programação escolher?
Curso de programação para iniciantes: Qual linguagem de programação escolher?Curso de programação para iniciantes: Qual linguagem de programação escolher?
Curso de programação para iniciantes: Qual linguagem de programação escolher?
Harlley Oliveira
 
Second project venturebrazil
Second project venturebrazilSecond project venturebrazil
Second project venturebrazil
Harlley Oliveira
 
Afinal, o que é uma linguagem de programação?
Afinal, o que é uma linguagem de programação?Afinal, o que é uma linguagem de programação?
Afinal, o que é uma linguagem de programação?
Harlley Oliveira
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programarSoftware fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programar
Harlley Oliveira
 
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Harlley Oliveira
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é  difícil de programarSoftware fácil de usar não é  difícil de programar
Software fácil de usar não é difícil de programar
Harlley Oliveira
 
Philips
PhilipsPhilips

Mais de Harlley Oliveira (7)

Curso de programação para iniciantes: Qual linguagem de programação escolher?
Curso de programação para iniciantes: Qual linguagem de programação escolher?Curso de programação para iniciantes: Qual linguagem de programação escolher?
Curso de programação para iniciantes: Qual linguagem de programação escolher?
 
Second project venturebrazil
Second project venturebrazilSecond project venturebrazil
Second project venturebrazil
 
Afinal, o que é uma linguagem de programação?
Afinal, o que é uma linguagem de programação?Afinal, o que é uma linguagem de programação?
Afinal, o que é uma linguagem de programação?
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programarSoftware fácil de usar não é difícil de programar
Software fácil de usar não é difícil de programar
 
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
Recomendações de usabilidade para TV Digital Interativa baseadas na experiênc...
 
Software fácil de usar não é difícil de programar
Software fácil de usar não é  difícil de programarSoftware fácil de usar não é  difícil de programar
Software fácil de usar não é difícil de programar
 
Philips
PhilipsPhilips
Philips
 

JavaScript e JQuery para Webdesigners

  • 1. JavaScript e jQuery JavaScript e jQuery para Webdesigners Harlley R. Oliveira
  • 2. JavaScript e jQuery O que é JavaScript? Não é Java Foi projetado para dar interatividade às páginas HTML É uma linguagem de script que é intepretada pelo browser É a linguagem mais popular da internet, principalmente agora com essa onda de Web 2.0 Os browsers estão se preparando para melhorar a performance para o uso intensivo de JavaScript: Chrome Firefox 3.1 Safari 4 Internet Explorer 8
  • 3. JavaScript e jQuery Além de páginas HTML Adobe Air Google Gears Jaxer Extensões para o Google Chrome Firefox Criando extensões Criando comandos para o Ubiquity Criando scripts para Greasemonkey Widgets para iGoogle, Netvibes, Open Social e até celular.
  • 4. JavaScript e jQuery Antes de programar, vamos nos motivar! Validar formulários e aplcar máscaras Efeitos especiais :) Interações Arrastar e soltar Selecionar Redimensionar Ordenar Componentes de interface Accordion e abas Calendário Barra de Progresso Slider Caixa de diálogo e grids.
  • 5. JavaScript e jQuery Mais um pouco de motivação Mapas Carousel Lightbox Aplicações complexas Se achou pouco, aqui e aqui tem mais.
  • 6. JavaScript e jQuery "Com grandes poderes vêm grandes responsabilidades" Peter Benjamin Parker O JavaScript deve ser usado para melhorar a experiência do usuário, mas sempre devemos ficar atentos a outros dois requisitos importantes: Acessibilidade e Performance.
  • 7. JavaScript e jQuery Antigamente as páginas eram criadas assim: HTML, CSS, JavaScript e até PHP ou ASP tudo junto no mesmo arquivo. Por isso era mais fácil fazer tudo em Flash.
  • 8. JavaScript e jQuery Agora trabalhamos desta forma Usando o HTML para o conteúdo (camada mais importante), CSS para a apresentação e JavaScript para o comportamento (camada mais divertida).
  • 9. JavaScript e jQuery Imagens by http://www.sitepoint.com/article/simply-
  • 10. JavaScript e jQuery Agora chegou a melhor hora, programar! Vamos precisar das seguintes ferramentas: Firefox Extensão Firebug Extensão Web Developer Bloco de notas Aqui neste link tem uma apostila de Introdução a Lógica de Programação e neste aqui tem uma introdução usando o JavaScript.
  • 11. JavaScript e jQuery Vamos sempre usar o JavaScript de modo não-intrusivo através de um include na página html <script type="text/javascript" src="[ path_file_js ]"></script> Desta forma se mantém o código separado facilitando na manutenção e performance, pois assim como o CSS, o JavaScript fica no cache do browser.
  • 12. JavaScript e jQuery Nosso primeiro script: // Preenche a variável var meu_nome = 'Harlley'; /* Mostra uma mensagem */ alert('Boa tarde ' + meu_nome + '!'); /* Toda string é um objeto e tem vários métodos e propriedades para ajudar na manipulação, um exemplo */ alert(meu_nome.length);
  • 13. JavaScript e jQuery Vetores (Array) // Cria um array com vários nomes var nomes = [ 'Fulano', 'Cicrano', 'Beltrano' ]; /* Mostra a mensagem com um dos nomes indicador pelo índice, que começa em zero */ alert('Boa tarde ' + nomes[0] + '!'); // O array também é um objeto com vários métodos e propriedades, um deles nomes.reverse(); alert('Boa tarde ' + nomes[0] + '!');
  • 14. JavaScript e jQuery Operadores matemáticos básicos var resultado; resultado = 3 + 2; alert('3 + 2 = ' + resultado); resultado = 3 - 2; alert('3 - 2 = ' + resultado); resultado = 3 * 2; alert('3 * 2 = ' + resultado); resultado = 3 / 2; alert('3 / 2 = ' + resultado);
  • 15. JavaScript e jQuery Operadores básicos lógicos e de comparação alert(3 == 3); /********** igual */ alert(3 != 3); /*********** diferente */ alert(3 > 3); /************ maior */ alert(3 >= 3); /********** maior ou igual */ alert(3 < 3); /************ menor*/ alert(3 <= 3); /********** menor ou igual */ alert(true && false); /** e */ alert(true || false); /**** ou */
  • 16. JavaScript e jQuery Comandos básicos - if ... else var hora = 8; // Se variável hora meno que 12 então diga Bom dia! if ( hora < 12 ) { alert('Bom dia!'); } // Senão se hora for maior que 12 e menor que 18, Boa tarde! else if( (hora > 12) && (hora < 18) ) { alert('Boa tarde!'); } //Senão for Bom dia e nem Boa tarde, só pode ser Boa noite! else { alert('Boa noite!'); }
  • 17. JavaScript e jQuery Comandos básicos - for // Preencho o array dias_uteis com os nomes dos dias var dias_uteis = ['segunda', 'terça', 'quarta', 'quinta', 'sexta']; /* Inicializo a variável de iteração, e executo o comando alert enquanto a variável de iteração for menor que 5: 0, 1, 2, 3, 4 */ for ( i = 0; i < 5; i++ ) { // Acesso o array dias_uteis através do índice alert(dias_uteis[i]); }
  • 18. JavaScript e jQuery Comandos básicos - for ... in /* É similar ao for visto anteriormente, porém tem menos opções de configuração e percorre todos os elementos do objeto */ var dias_uteis = ['segunda', 'terça', 'quarta', 'quinta', 'sexta']; for ( i in dias_uteis ) { alert(dias_uteis[i]); }
  • 19. JavaScript e jQuery Funções /* Função que recebe um vetor como parâmetro e imprime através do alert todos os ítens */ function mostrarMensagem(vetor) { for ( i in vetor ) { alert(vetor[i]); } } var dias_uteis = ['segunda', 'terça', 'quarta', 'quinta', 'sexta']; mostrarMensagem(dias_uteis); var estacoes = ['primavera', 'verao', 'outono', 'inverno']; mostrarMensagem(estacoes);
  • 20. JavaScript e jQuery Alguns métodos do objeto String var conteudo = 'JavaScript'; alert( conteudo.length ); // tamalho da string alert( conteudo.charAt(4) ); // acha o caractér pelo índice alert( conteudo.toLowerCase() ); // minúsculo alert( conteudo.toUpperCase() ); // minúsculo alert( 'JavaScript não é ' + conteudo.substr(0, 4) ); var conteudo = 'JavaScript não é Java '; alert( conteudo.split(' ')[0] ); // divide a string em vetores alert( conteudo.replace('Java ', 'difícíl') ); /* Substitui valores dentro da string */
  • 21. JavaScript e jQuery Vimos até agora somente os comandos básicos do JavaScript, existem muito mais comandos, mas não precisamos aprender todos, basta termos uma boa referência para consulta. Pra quem quiser aprender um pouco mais sobre JavaScript, deixo as seguintes sugestões: http://aprendajs.klaus.pro.br/ http://eloquentjavascript.net/ Livro Simply JavaScript Agora vamos aprender como manipular todo o DOM HTML de uma forma bem simples e usando uma sintaxe bem conhecida por todos, seletores CSS.
  • 22. JavaScript e jQuery DOM - Document Object Model DOM é um padrão da W3C pra manipular documentos HTML e XML O código HTML é interpretado pelo browser e transformado em uma árvore de objetos que pode ser completamente manipulado, no nosso caso usando JavaScript.
  • 23. JavaScript e jQuery O que é jQuery? É um framework JavaScript que simplifica a manipulação do DOM HTML, tratamento de eventos, efeitos visuais e Ajax. Suporta os seletores CSS 1-3 Está em conformidade com os padrões web Cross-browser IE6+, FF2+, Safari3+, Opera9+, Chrome Está sendo usado por grandes empresas como Google, Dell, Globo, Digg e Mozilla
  • 24. JavaScript e jQuery Pra usar o jQuery basta baixar o arquivo e incluir no HTML o include para o arquivo: <script type="text/javascript" src="[ path_file_js ]"></script> Em outro arquivo, vamos colocar o nosso script jQuery /* garante que o código vai ser executado depois do DOM ser carregado. */ $(function() { // Adiciona um elemento h1 ao DOM $('body').append('<h1>Olá Mundo!</h1>'); });
  • 25. JavaScript e jQuery <span>Formulário</span> <fieldset> <div class="item-form"> <label class="obrigatorio" for="nome">Nome</label> <input type="text" id="nome" /> </div> <div class="item-form"> <label for="telefone">Telefone</label> <input type="text" id="telefone" /> </div> <input id="gravar" type="button" value="Gravar" /> <button id="cancelar" disabled="disabled" >Cancelar</button> <input type="button" value="Excluir" /> </fieldset>
  • 26. JavaScript e jQuery Seletores Mais... $('#nome').val('Fulano'); $('.obrigatorio').css('color', '#F00'); $('#nome, #telefone').attr('disabled', 'disabled'); $('input:button').val('Gravado!!'); $('*', 'fieldset').css('border', '1px solid #F00'); $('fieldset label').css('background-color', 'blue'); $('fieldset > label').css('background-color', 'blue'); $('label + input').css('width', '400px'); $('.item-form ~ input').css('background-color', 'blue');
  • 27. JavaScript e jQuery Manipulação do DOM Mais... $('#nome').val('Fulano'); $('fieldset').html('<input type="text"/>'); $('fieldset').append('<input type="text"/>'); $('fieldset').prepend('<input type="text"/>'); $('fieldset').after('<input type="text"/>'); $('fieldset').before('<input type="text"/>'); $('#cancelar').removeAttr('disabled'); $('span').wrap('<h1></h1>'); $('button').remove(); $('fieldset').empty(); $('fieldset').css('background-color', 'blue'); $('input:text:last').addClass('blue');
  • 28. JavaScript e jQuery Eventos Mais... $('#gravar').click(function() { $('#nome').css('background-color', 'red').fadeOut().fadeIn(); }); $('#nome').select( function () { $('#telefone').val( $(this).val() ); }); var contador = 0; $('#telefone').keydown(function() { contador = contador + 1; $('span').html(contador); });
  • 29. JavaScript e jQuery Efeitos Mais... $('#gravar').click(function () { $('span').toggle(); }); $('fieldset').hide('slow'); $('div').slideUp('slow'); $('div').fadeOut('slow'); $('#gravar').click(function(){ $('fieldset').animate({ width: '70%', opacity: 0.4, fontSize: '3em', borderWidth: '10px' }, 1500 ); });
  • 30. JavaScript e jQuery AJAX (Asynchronous Javascript And XML) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores, para tornar páginas mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações. mais...
  • 31. JavaScript e jQuery Ajax Mais... $('#gravar').click(function(){ $('body').prepend('<img id="loading" src="images/ajax- loader.gif" />'); $.ajax({ url: "http://localhost/jquery/ajax_content.php", cache: false, success: function(html){ $("body").append(html); $('#loading').remove(); } }); });
  • 33. JavaScript e jQuery Para saber mais sobre jQuery Referência completa http://api.jquery.com/ Livros http://www.livrojquery.com.br/index.php http://www.packtpub.com/jQuery/book/mid/1004077zztq0 http://www.manning.com/bibeault/
  • 34. JavaScript e jQuery Obrigado! harlley@gmail.com http://twitter.com/harlley