View
1.025
Download
6
Category
Preview:
DESCRIPTION
Visão geral sobre JavaScript e jQuery.
Citation preview
jQueryIniciando (PARTE I)
Objetivos
Nivelar conhecimentos sobre JavascriptApresentar o jQueryNão apenas utilizar, mas saber (de forma
geral) como o jQuery funciona
Agenda
Javascript◦Escopo◦Tipos◦OOP◦Eventos
jQuery◦Introdução◦Vantagens◦Como funciona?◦Utilizando
ATENÇÃO
Javascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É JavaJavascript NÃO É Java
Javascript
Linguagem de script dinâmica e orientada à objetos
Implementação da especificação ECMA-262 (ECMAScript)
Utilizada primeiramente para dinamizar os elementos de uma página HTML
É case sensitive
Javascript - escopo
Podemos declarar variáveis e funções no contexto global ou no contexto local (privado)
Caso não utilizarmos var na declaração, será levado em consideração o contexto global referente ao contexto local
var i = 0; // global
function teste(){
var i = 0; // local
return function() // closure{
// aqui será utilizado o i do contexto da função teste()++i; alert(i);
}}
var testando = teste();testando();alert(i);testando();alert(i);testando();alert(i);
Javascript - tipos
Object◦Tudo em javascript é objeto◦Podem ser alterados em runtime◦Todos objetos possuem prototype (não deve-se
alterar Object.prototype) onde podemos adicionar/alterar métodos e atributos
◦Dados podem ser acessados utilizando “.” (obj.identificador) ou como índice de um array (obj[“identificador”])
Javascript - tipos
Strings◦Objetos IMUTÁVEIS que contém um ou mais
caracteres◦Métodos comuns: charAt(), indexOf(),
toUpperCase(), toLowerCase(), replace(), split()
Javascript - tipos
Number◦Objeto que representa valores numéricos◦Caso valor não puder ser representado
numericamente é um NaN (not a number)◦Podem ser manipulados através de Math
(Objeto para operações matemáticas)
Javascript - tipos
Boolean◦Objeto que representa valores lógicos (true ou
false)◦Permite converter objetos não booleanos
através do construtor
Javascript - tipos
Array◦Armazena mais de um valor em uma única
variável◦Possui apenas índices NUMÉRICOS (a partir de
ZERO)◦Métodos comuns: join(), push(), unshift(),
reverse(), pop(), shift(), sort()
Javascript - tipos
Functions◦Podem ser nomeadas ou anônimas (Lambda e
Closures)◦Qualquer função pode ser atribuída a uma
variável (atenção em relação ao escopo)
Javascript - oop
Definimos classes usando prototype e function
Podemos criar métodos públicos, privados e privilegiados
Podemos criar atributos públicos e privadosMétodos e atributos privados apenas podem
ser acessados por métodos privilegiadosPodemos criar também dados estáticos
function Pessoa(nome, idade){
var nome = nome; // privatevar idade = idade; // privatefunction ficaMaisVelho(inc) { idade += inc} // private
this.toString = this.getNome = function() { return nome; }this.getIdade = function() { return idade; }
this.come = function(qualidade) {if (qualidade < 4) {
ficaMaisVelho(Math.abs(qualidade));} else {
ficaMaisVelho(qualidade/10);}
}++Pessoa.populacao;
}
Pessoa.populacao = 0;
Pessoa.prototype.comePorcaria = function(){
this.come(-2);}
Pessoa.prototype.comeFruta = function(){
this.come(10);}
var fulano = new Pessoa(“Fulano”, 5);fulano.comePorcaria();fulano.comeFruta();alert(fulano + “ tem “ + fulano.getIdade() + “ anos”);alert(“existem “ + Pessoa.populacao + “ pessoa(s)”);
Javascript - eventos
Através do javascript podemos manipular os eventos dos objetos
Eventos comuns: onload, onclick, onfocus, onblur
jQuery
“jQuery is a fast and concise JavaScript Library that simplifies HTML document
traversing, event handling, animating, and Ajax interactions for rapid web
development. jQuery is designed to change the way that you write
JavaScript.”
jQuery - vantagens
Simplifica a forma de trabalhar com Javascript
É extensívelÉ leve (31 kb a versão de produção)É cross-browser (como os plugins podem
ser criados por qualquer pessoa, podem não manter a compatibilidade)
jQuery – como funciona?
Basicamente é criada uma função jQuery() que retorna um objeto
É criado um alias $ para esta funçãoQuando você acessa $(document) você está
chamando a função jQuery() passando o objeto document por parâmetro
Quando acessa $.ajax() está chamando o método ajax() do objeto criado pela função jQuery
jQuery – utilizando
Para manipular um ou mais elementos apenas utilizamos $(SELETOR)
Existem vários valores para o SELETOR os mais comuns são: seletor de tag, seletor de id e seletor de class
<script type=“text/javascript”>$(document).ready(function() {
$(“a”).css(“border”, “9px solid red”);});</script><a href=“#”>teste1</a><a href=“#”>teste2</a><a href=“#”>teste3</a>
<script type=“text/javascript”>$(document).ready(function() {
alert($(“#minhaDiv”).html());});</script><div id=“minhaDiv”>
<h1>Teste</h1><p>Testando os dados!</p>
</div>
<script type=“text/javascript”>$(document).ready(function() {
$(“.teste”).css(“border”, “9px solid red”);});</script><a href=“#” class=“teste”>teste1</a><a href=“#” class=“teste”>teste2</a><a href=“#”>teste3</a>
Mais informações
http://phrogz.net/js/classes/OOPinJS.htmlhttp://phrogz.net/js/classes/OOPinJS2.htmlhttp://www.w3schools.com/jshttp://docs.jquery.com
Recommended