Manual do Aluno JavaScript e PHP

Governador Cid Ferreira Gomes Vice Governador Domingos Gomes de Aguiar Filho Secretria da Educao Maria Izolda Cela
de Arruda Coelho Secretrio Adjunto Maurcio Holanda Maia Secretrio Executivo Antnio Idilvan de Lima Alencar Assessora Institucional do Gabinete da Seduc Cristiane Carvalho Holanda Coordenadora da Educao Profissional SEDUC Andra Arajo Rocha
JavaScript / PHP
MANUAL DO (A) ALUNO (A)
Janeiro / 2013 FORTALEZA/CEA
Escola Estadual de Educao Profissional
Ensino Mdio Integrado a Educao Profissional
Sumrio
Apresentao ........................................................................................................................................................ 6 Aula 1. 1.1. 1.2. 1.3. 1.3.1. 1.3.2. 1.3.3. 1.3.4. 1.4. 1.4.1. 1.4.2. 1.4.3. 1.4.4. 1.4.5. 1.5. 1.6. 1.7. 2. Entendendo o JavaScript. ............................................................................................................... 8 JavaScript -Introduo ......................................................................................................................... 8 JavaScript Variveis........................................................................................................................ 10 JavaScript Operadores ...................................................................................................................12 Operadores Matemticos ..............................................................................................................12 Operadores de Comparao.........................................................................................................13 Operadores Lgicos .......................................................................................................................13 Operadores (Clculo de IMC) .......................................................................................................14 JavaScript - Estruturas de Controle. ................................................................................................ 15 Estrutura Condicional (if/else ) ...................................................................................................... 15 Estrutura Condicional (switch ). .................................................................................................... 17 Estrutura de Loop (for ). .................................................................................................................18 Estrutura de Loop (for in )..............................................................................................................19 Estrutura de Loop (while ). ............................................................................................................19 JavaScript Funes......................................................................................................................... 20 JavaScript - Objeto Array. .................................................................................................................24 JavaScript Eventos. ........................................................................................................................ 25
Introduo ao PHP ..................................................................................................................................... 29 2.1. 2.2. 2.3. 2.4. 2.4.1. 2.4.2. 2.4.3. PHP Introduo................................................................................................................................. 29 Enviando Dados para o Servidor HTTP .......................................................................................... 30 PHP Variveis .................................................................................................................................. 35 PHP Operadores ............................................................................................................................. 36 Operadores Matemticos ..............................................................................................................36 Operadores de Comparao.........................................................................................................38 Operadores Lgicos .......................................................................................................................38
2.4.4. Operadores de Atribuio ..............................................................................................................38 Informtica - Java Script / PHP 3
2.4.5. 2.5. 2.5.1. 2.5.2. 2.5.3. 2.5.4. 2.6. 2.7. 3.
Operadores (Mdia Aritmtica). ................................................................................................... 40 PHP - Estruturas de Controle. ..........................................................................................................41 Estrutura Condicional (if ). .............................................................................................................41 Estrutura Condicional (switch ). .................................................................................................... 42 Estrutura de Loop (for ). .................................................................................................................43 Estrutura de Loop (while ). ............................................................................................................44 PHP Definio de Funes. ...........................................................................................................45 PHP - Arrays. ....................................................................................................................................... 48
Introduo a Framework JQuery ..............................................................................................................51 3.1. 3.2. 3.3. 3.4. 3.5. 3.6. 3.7. 3.8. 3.9. 3.10. Instalao. ............................................................................................................................................ 51 Colunas e clulas de tabelas. ...........................................................................................................52 Tooltips. ................................................................................................................................................ 55 Accordion. ............................................................................................................................................ 56 Datepicker. ........................................................................................................................................... 58 Auto-complete. .................................................................................................................................... 59 Janela de dialogo modal. ...................................................................................................................60 Menu. .................................................................................................................................................... 61 Abas. ..................................................................................................................................................... 62 jQuery Mobile na prtica ................................................................................................................64 Eventos..................................................................................................................................... 69 Mtodos e utilidades. .............................................................................................................72 Widgets..................................................................................................................................... 74 Twitter ....................................................................................................................................... 80 Geolocalizao. .......................................................................................................................81
3.10.1. 3.10.2. 3.10.3. 3.10.4. 3.10.5. 4.
Formulrios web. ........................................................................................................................................ 84 4.1. 4.2. Formulrio de cadastro de clientes. .................................................................................................84 Formulrio de Contato. ......................................................................................................................88
5.
Estudos de Caso ......................................................................................................................................... 90 4
Informtica - Java Script / PHP
5.1. 5.2.
Carrinho de compras. ......................................................................................................................... 91 Chat de atendimento. ......................................................................................................................... 91
Referncias Bibliogrficas .................................................................................................................................92 ndice de Ilustraes .......................................................................................................................................... 93
Apresentao
O manual apresenta aulas prticas e conceitos importantes para o entendimento na prtica, est distribudo em cinco captulos. Elaborado no intuito de qualificar o processo de formao, este Manual um instrumento pedaggico que se constitui como um mediador para facilitar o processo de ensino-aprendizagem em sala de aula. 1 Captulo Apresenta alguns fundamentos de JavaScript uma linguagem de programao para navegadores, onde ser muito importante os conhecimentos adiquido em lgica de programao para facilitar o entendimento, neste capitulo veremos operadores da linguagem, estruturas de controle, funes, eventos e objetos array. 2 Captulo Introduo a linguagem de programao PHP, conhecendo seus operadores, estruturas de controle, definio de funes e arrays, no prximo semestre veremos a integrao da linguagem com o banco de dados mysql. 3 Captulo Framework Jquery uma biblioteca JavaScript cross-browser desenvolvida para simplificar os scripts client side que interagem com o HTML, neste captulo tambm abordaremos JqueryUI e Jquery Mobile conhecendo alguns widgets. 4 Captulo Formulrios web, neste captulo iremos desenvolver alguns formulrios web, para aplicarmos os conhecimentos que estamos adquirindo no decorrer do processo de aprendizagem. 5 Captulo Neste captulo vamos trabalhar com estudos de caso, que so situaes em que precisamos reunir conhecimentos adquiridos para resolver situaes do cotidiano, os projetos que sero desenvolvidos neste captulo iremos continu-los no prximo semestre.
Esperamos contribuir com a consolidao do compromisso e envolvimento de todos (professores e alunos) na formao desses profissionais.
Aula 1.
1.1.
Entendendo o JavaScript.
JavaScript -Introduo
uma linguagem de programao que roda do lado cliente, ou seja, no navegador do usurio, nos permitindo realizar determinadas aes dentro de uma pgina web. Criada pela Netscape em 1995, se chamava LiveScript e visava atender necessidades de interao coma pgina web e validao de formulrios do lado cliente. O JavaScript tem sua sintaxe parecida com a linguagem Java que aprendemos na disciplina de lgica de programao, porem o JavaScript no descende e no tem nenhuma relao com a linguagem Java. A grande vantagem do JavaScript a capacidade de interagir com uma pgina web. uma linguagem com tipagem dinmica, os tipos de variveis no precisam ser definidos no inicio do programa, uma linguagem interpretada em vez de compilada, isso significa que os cdigos so interpretados em tempo real e executados pelo navegador no momento que o usurio acessa a pgina web. Escrevendo programas em JavaScript. Para escrevermos programas em JavaScript necessitamos basicamente de um editor de texto e um navegador compatvel com JavaScript, porem utilizando outros editores que nos oferecem mais facilidades na hora de escrever, como por exemplo marcar com cores diferentes as palavras reservadas, permitem que sejam abertos simultaneamente vrios documentos, recursos de auto completar e outros que facilitam a vida do programador proporcionando mais agilidade na escrita do cdigo Abaixo temos uma tabela com a relao de alguns editores Editor Descrio Link
um software para desenvolvimento web http://www.adobe.com/br desenvolvido pela empresa Macromedia e comprado pela Adobe, fornece uma interface visual intuitiva para criar e editar Dreamweaver sites em HTML e em linguagens de programao web. Nele possvel visualizar o designer da pgina antes da publicao com o recurso Visualizao multitela, onde o desenvolvedor pode trabalhar visualizando o cdigo e o
Informtica - Java Script / PHP 8
designer. UltraEdit um editor HTML e editor http://www.ultraedit.com/ avanado PHP, Perl, Java e JavaScript. UltraEdit tambm um editor XML, incluindo um parser XML rvore estilo. UltraEdit Bluefish um editor livre e de cdigo com http://bluefish.openoffice.nl uma variedade de ferramentas para /index.html programao em geral e para o desenvolvimento de sites dinmicos. Suporta desenvolvimento em HTML, XHTML, CSS, XML, PHP, C, C + +, JavaScript, Java, Go Google, Vala, Ada, D, SQL, Perl, ColdFusion, JSP, Python, Ruby e Shell. Bluefish est disponvel para vrias plataformas, incluindo Linux, Solaris e Mac OS X e Windows. O netbeans um ambiente de http://netbeans.org/ desenvolvimento integrado de cdigo-fonte aberto gratuito para desenvolvedores de software. Todas as ferramentas necessrias para criar aplicaes desktop profissionais, corporativas, Web e mveis com a plataforma Java, bem como C/C++, PHP, JavaScript e etc.
Bluefish
Agora que j conhecemos algumas IDEs para o desenvolvimento web, vamos comear a conhecer a sintaxe do JavaScript. Na disciplina de HTML/CSS aprendemos muitas coisas que sero utilizadas nesta disciplina, iremos iniciar com os documentos HTML onde sero inseridos a sintaxe da linguagem de programao JavaScript a utilizao da mesma se d sob forma de funes, onde so chamadas em determinadas situaes ou em resposta a determinados eventos, estas funes podem estar localizadas em qualquer parte do cdigo HTML, a nica restrio que devem iniciar com a declarao <SCRIPT> e termina com o respectivo </SCRIPT>, por conveno costuma-se colocar todas as funes no incio do documento (entre as TAGs <HEAD> e </HEAD>, isso para garantir que o cdigo JavaScript seja carregado antes que o usurio interaja com a Home Page), ou seja, antes do <BODY>.
Vamos ver o exemplo abaixo.
Figura 1 - Estrutura JavaScript
Neste exemplo temos a declarao JavaScript feita tambm na <BODY> para exemplificar que uma declarao JavaScript pode ser feita tanto nas TAGs <HEAD> e </HEAD> como na <BODY>. 1.2. JavaScript Variveis Aprendemos em lgica de programao que uma varivel pode assumir diferentes valores, porm ela s pode armazenar um valor a cada instante, aprendemos tambm que preciso definir um tipo de dados a esta varivel em algumas linguagens de programao isso ocorre porque a mesma fortemente tipada em JavaScript no necessrio declarar formalmente o tipo de dados o qual vai ser utilizado basta utilizar a instruo var e definir o nome da varivel. Existem dois tipos de abrangncia para as variveis: Global - Declaradas fora de uma funo. As variveis globais podem ser acessadas em qualquer parte do programa.
Local - Declaradas dentro de uma funo. S podem ser utilizadas dentro da
funo onde foram criadas e precisa ser definida com a instruo Var.
Com relao nomenclatura, as variveis devem comear por uma letra ou pelo caractere sublinhado _, o restante da definio do nome pode conter qualquer letra ou nmero. Outro ponto importante que as variveis so keysensitive h diferenciao entre maisculas e minsculas, caracteres de acentuao e especiais. Existem trs tipos de variveis: Numricas, Booleanas e Strings, que so utilizadas da mesma forma que em lgica de programao, como j vimos que a diferena que no precisamos declarar o tipo de dados, numricas para armazenar nmeros, booleanas para valores lgicos (True/False) e strings com sequncia de caracteres. As strings podem ser delimitadas por aspas simples ou duplas, a nica restrio que se a delimitao comear com as aspas simples, deve terminar com aspas simples, da mesma
forma para as aspas duplas. Podem ser includos dentro de uma string alguns caracteres especiais, como podemos ver na tabela abaixo; Caracteres Especiais \t \n \f \b \r Descrio Posiciona o texto a seguir, na prxima tabulao; Passa para outra linha; Insere um caractere de barra; back space; Insere um retorno.
O JavaScript reconhece ainda um outro tipo de contudo em variveis, que o NULL. Na prtica isso utilizado para a manipulao de variveis no inicializadas sem que ocorra um erro no seu programa. Quando uma varivel possui o valor NULL, significa dizer que ela possui um valor desconhecido ou nulo. A representao literal para NULL a string 'null' sem os delimitadores. Quando referenciado por uma funo ou comando de tela, ser assim que NULL ser representado. Observe que NULL uma palavra reservada. EXEMPLOS DE VARIVEIS
Figura 2 - Declarao de variveis
Entendendo o cdigo acima. Nas linhas 7 e 8 temos um exemplo da declarao de variveis globais, em JavaScript no necessariamente precisamos declarar com a palavra reservada var, como vemos no exemplo acima. Nas linhas 11 e 12 utilizo a palavra reservada var, observamos que ao declaramos no utilizamos o tipo de dados, pois como j vimos no necessrio.
Da linha 18 a 21 usamos o objeto document e o mtodo write( ) para escrever na pgina HTML, passando dentro dos parnteses a varivel declarada ou um texto.
1.3.
JavaScript Operadores
Os operadores so meios pelo qual incrementamos, decrementamos, comparamos e avaliamos dados dentro do computador realizamos atribuio e calculo com os valores das variveis. Temos os tipos de operadores abaixo: Operadores Matemticos Operadores de Comparao Operadores Lgicos
1.3.1. Operadores Matemticos

Operao Adio Subtrao Multiplicao Diviso Incremento Decremento Resto da diviso Operador + * / ++ -%
Exemplo 1: Neste exemplo declaramos os valores das operaes em variveis globais para serem utilizadas por todos os operadores, como vemos na imagem ao lado. Agora estamos realizando a soma do valor das variveis criados na tag <head>, este script foi criado na tag <body>, onde sero exibidos os valores das variveis valor1 e valor2. Na linha 24 declarada a varivel resultado onde a mesma recebe a soma das variveis valor1 e valor2. Exemplo 2: Neste exemplo fazemos as operaes sem o uso de variveis, utilizando os valores diretamente, na instruo document.write(), nas linhas 32 a 34 separamos os valores que so passados pelo mtodo por virgula, acrescentando tags HTML <b> e a <br>, desta forma posso passar estas tags HTML e outras dentro do mtodo junto com instrues JavaScript.
12
O operador de incremento representado pelo duplo sinal de adio ++, j o operador de decremento representado pelo duplo sinal de subtrao --". Veja a seguir alguns exemplos: Varivel++ ou ++varivel Varivel-- ou varivel
1.3.2. Operadores de Comparao

Os operadores na tabela abaixo comparam o contedo dos operandos e retornam um valor booleano TRUE ou FALSE, baseado no resultado da comparao. Abaixo a relao de operadores. Operao Operador Atribuio de valores = Maior que > Menor que < Maior ou igual a >= Menor ou igual a <= Igualdade == Igual e mesmo tipo === Diferente !=
Exemplos;
1.3.3. Operadores Lgicos

So exigidos valores booleanos, como operandos, e ser retornado um valor lgico, na tabela abaixo listamos a operao e o operador. Operao Operador E (AND) Uma expresso E (AND) verdadeira se && todas as condies forem Verdadeiras OU (OR) Uma expresso OR (OU) verdadeira se || pelo menos uma condio for verdadeira
NO (NOT) Expresso ou condio, se verdadeira inverte para falsa
Veremos exemplos de sua aplicao com as estruturas de controle, nas prximas aulas.
1.3.4. Operadores (Clculo de IMC)
O IMC (ndice de massa corporal) uma formula utilizada para verificar se um adulto ou criana esta acima do peso, obeso ou abaixo do peso ideal. Para tal, necessitamos aplicar a seguinte frmula IMC=peso/(altura)2. Um especialista da rea solicitou que fosse desenvolvido uma pgina que realizase este calculo.
Inicialmente vamos praticar a utilizao dos operadores em JavaScript, sem a interao com o usurio nas prximas aula iremos iniciar esta interao. Na imagem ao lado criamos um bloco de cdigo na tag <head> onde declaramos as variveis e usamos diversos operadores, a varivel calimc recebe o peso/(altura*altura), nesta linha 8 o que ser calculado primeiro ser o que esta nos parnteses igual como fazemos nos clculos na matemtica, e depois a diviso do peso pela altura.
Exerccio Prtico
Todo o exerccio deve ser feito cada um em uma pagina HTML, nesta etapa no utilizaremos interao com o usurio.
1) Crie um novo arquivo HTML e faa um script para calcular a mdia aritimetica de 3
notas, na exibio na pgina deve-se apresentar as 3 notas e informar qual a mdia.
14
2) Faa um script para saber a idade de uma pessoa, atravs do ano atual e ano de
nascimento, na pagina em HTML deve ser mostrado o nome de uma pessoa e sua idade.
3) Elabore um script para mostrar o consumo mdio de um automvel.
1.4.
JavaScript - Estruturas de Controle.
J sabemos a importncia das estruturas de controle que estudamos em lgica de programao, em JavaScript tambm iremos utiliz-las, para controlar o fluxo de execuo de blocos de instrues. Tambm temos a necessidade de controlar um fluxo, que pode se repetir ou em determinadas circunstncias nem mesmo precisar ser executado. Na maioria das linguagens de programao temos as estruturas de controle que podem nos dar repeties simples, repeties condicionais e desvio de fluxo, que sero descritas e exemplificadas nas subsees seguintes. Em JavaScript iremos conhecer alguns comandos para efetuar o controle de fluxo que so: if else Switch For for in While do while
1.4.1. Estrutura Condicional (if/else )

A estrutura de deciso IF normalmente vem acompanhada de um comando, ou seja, se determinada condio for satisfeita pelo comando IF ento execute determinado comando. Na sintaxe abaixo, temos um conjunto de instrues que deve ser delimitado por chaves, quando a condio for verdadeira ele ir executar o bloco de comandos.
if (condio){ bloco de comandos } Abaixo temos a sintaxe do IF se a condio no for verdadeira, ele ira executar o bloco de comando que esta no ELSE que esta delimitada por chaves.
if (condio){
bloco de comandos
}else{
bloco de comandos Informtica - Java Script / PHP 15
Quando temos mais de uma condio a ser avaliada pode-se fazer o uso da instruo ELSE IF. Observe sua sintaxe: if (condio) { comandos } else if (condio2) { comandos } else { comandos } Exemplo 1; Neste exemplo se o valor da varivel opc, tornar verdadeira alguma condio do bloco de cdigo, ele entra e escreve a opo escolhida.
Exemplo 2; Agora utilizamos o IF/ELSE onde se a condio no for verdadeira ele executa a instruo ELSE.
16
Exemplo 3; Neste exemplo usamos os operadores lgicos para avaliar as duas sentenas que so passadas no IF ELSE IF.
1.4.2. Estrutura Condicional (switch ).

Esta instruo bem semelhante com uma estrutura IF, porm mais eficiente em razo de ser mais simples sua utilizao e seu entendimento. Veja a sintaxe utilizada para o uso de instrues SWITCH: switch (expresso) { case 1: [bloco de comandos]; break; case 2: [bloco de comandos]; break; case 3: [bloco de comandos]; break; ............ default: [bloco de comandos];
17
Exemplo 1; Neste exemplo caso o valor da varivel opc seja igual h algum bloco do case ele entra e executa a instruo do bloco, caso no ele executa a instruo default.
1.4.3. Estrutura de Loop (for ).

A instruo for realiza uma ao at que determinada condio seja satisfeita, abaixo sua sintaxe bsica: for (varivel = valor inicial;condio;incremento) { Bloco de instrues } Na primeira sentena do for determina o valor inicial do lao. Normalmente 0 ou 1, porm poder ser especificado qualquer outro valor. O valor especificado atribudo em uma varivel, por exemplo, i=0, j=1. A condio determina a expresso que ir controlar o nmero de repeties do lao. Enquanto esta expresso for verdadeira, o lao continuar sendo executado, caso seja falso, o lao terminar. No exemplo abaixo: i<=10. Enquanto o valor de i for menor ou igual a 10, a condio verdadeira. O incremento determina como o lao ir contar, de um em um, dois em dois, cinco em cinco e assim por diante. No Exemplo: i++. Ser aumentado o valor da varivel i a cada repetio. Em JavaScript, a instruo for, utiliza ponto e vrgula para separar os argumentos igual a linguagem Java, como fazamos em lgica de programao. Abaixo temos exemplo prtico de utilizao do lao for que conta valores de 1 at 10, acrescentando um valor de cada vez: Exemplo 1:
18
1.4.4. Estrutura de Loop (for in ).

usado para saber os nomes de propriedades e contedos das propriedades de objetos no JavaScript. Esta instruo muito usada na depurao de cdigos. Por exemplo, caso uma parte do cdigo JavaScript no esteja funcionando corretamente e existe suspeita de que existe uma falha do objeto JavaScript, o usurio poder usar for...in para examinar as propriedades do objeto usado. Sua sintaxe mostrada abaixo: for (varivel in objeto) { bloco de comandos; }
Exemplo 1: Neste exemplo ser exibido as propriedades do arquivo HTML que ser exibindo pelo mtodo alert().
1.4.5. Estrutura de Loop (while ).

A instruo while realiza uma ao enquanto determinada condio for satisfeita. Sua sintaxe bsica : while (condio) { Bloco de comandos } Exemplo; No exemplo abaixo o lao while ira escrever de 1 at 10 enquanto a condio for verdadeira, e a cada passo na linha 17 vai incrementar 1 a varivel num.
A instruo do while vai repetir um bloco de comandos enquanto a condio for falsa, nesta estrutura ele inicia com os comandos e depois avalia a condio, abaixo temos a sintaxe bsica desta instruo. do { Bloco de comandos }while(condio)
Exemplo: Neste exemplo fazemos um contagem do maior para o menor, o bloco de comando executado enquanto a condio for falsa, e a cada passo decrementa um valor.
1.5.
JavaScript Funes.
Uma funo um grupo de linhas de cdigo de programao destinado uma tarefa bem especfica e que podemos se necessrio, utilizar vrias vezes. A utilizao de funes melhora bastante a leitura do script. Em Javascript, existem dois tipos de funes: As funes prprias do Javascript. Que chamamos de "mtodos". Elas so associadas a um objeto bem particular como o caso do mtodo Alert() com o objeto window. As funes escritas por ns para executar o nosso script. Declarando funes Para declarar ou definir uma funo, utiliza-se a palavra reservada function. A sintaxe bsica de uma de funo a seguinte: function nome_da_funo(argumentos) { ... cdigo de instrues ... } O nome da funo segue as mesmas regras que aprendemos na lgica e nesta disciplina, relembrando (nmero de caracteres indefinido, comeado por uma letra pode incluir nmeros...). Todos os nomes de funes num um script devem ser nicos. graas ao parntese que o interpretador Javascript distingue as variveis das funes, ao definir uma funo no quer dizer que ela ser executada e junto s instrues que nela contm. S executada quando chamamos a funo, abaixo veremos um exemplo.
20
Exemplo 1:
A invocao de uma funo se faz de forma simples, pelo nome da funo com parnteses ( ). No exemplo acima temos na linha 17 o nome da funo msn(), que esta sendo chamada na <body> pelo evento onload, que ser executado quando a pgina for carregada. aconselhado inserir todas as declaraes de funes no cabealho da pgina, isto entre as tags <HEAD>...</HEAD>. Assim tero a certeza que as funes j estaro interpretadas, caso haja necessidade de serem invocadas no <BODY>, s criar o script na mesma. Passando valor a uma funo Podem-se passar valores ou parmetros as funes Javascript. Assim as funes podem utilizar valores. Para passar um parmetro a uma funo, fornece-se um nome de uma varivel dentro da declarao da funo. Um exemplo simples para compreender. Est escrito abaixo uma funo que insere uma caixa de aviso em que o texto pode ser alterado.
Na declarao da funo, escreve-se: function Exemplo(Texto) { alert(Texto); } O nome da varivel Texto e definida como um parmetro da funo. Na invocao da funo, fornece-se o texto: Exemplo ("Bom dia a todos"), possvel passar vrios valores a uma funo e vrios parmetros, a lgica de funo em JavaScript e em outras linguagens a mesma.
21
Os parmetros so separados por vrgulas.
function nome_da_funo(arg1, arg2, arg3) { ... cdigo de instruo ... }
A sintaxe da declarao de funo: function Exemplo2(Texto1, Texto2){...} Invocao da funo: Exemplo2("Bem vindo a minha pgina", "Bom dia a todos");
Para retornar um valor, basta escrever a palavra chave return. Por exemplo:
function cubo(numero) { var cubo = numero*numero*numero return cubo; } A instruo return facultativa e podemos encontrar vrios returns na mesma funo. Para explorar este valor da varivel reenviada pela funo, utiliza-se uma formulao do tipo document.write(cubo(5)). Exemplo 1: Neste exemplo criaremos um script para calcular o IMC de uma pessoa.
Nessa primeira parte do script, iniciamos criando uma funo que ser chamada quando o usurio mandar calcular o IMC, na linha 16 e 17 temos a declarao da varivel altura e peso, e atribuio do valor da tag <input>, para acessar o valor do input temos que iniciar document(que o documento HTML).imcform(o nome do formulrio).altura( o nome
do input).value(atributo da tag input) dessa forma que acessamos objetos HTML em um formulrio. Na linha 23 realizado o calculo do IMC com base nas informaes passadas. Na imagem abaixo temos o restante do script, utilizando a instruo IF/else.
Na tag input usamos o evento onclick para chamar a funo imc( ).
Figura 3 - Visualizao da pgina para calcular IMC
Exerccio Prtico
1) Elaborar um programa no qual o sejam informados: o valor da compra e o valor pago. O programa deve calcular e apresentar o troco. Se o valor pago no for suficiente, deve-se emitir um aviso. 2) Elaborar um programa no qual seja informado o valor de um produto em dlar e o valor da cotao do dia. O programa deve converter e apresentar o valor em reais.
23
3) Elaborar um programa para ler uma temperatura em graus C, converter e apresentar seu valor em fahrenheit.
1.6.
JavaScript - Objeto Array.
Um ARRAY um grupo de itens que so tratados como uma nica varivel lembre-se dos vetores em lgica de programao tem o mesmo objetivo. Um exemplo que iremos tratar em JavaScript, o grupo de meses do ano estarem dentro de um array chamado meses. Os elementos de um array podem ser strings, nmeros, objetos ou outros tipos de dados. Para que se possa declarar um array, use a seguinte sintaxe: NomeArray = new Array(numElementos) Agora veremos como declarar um array chamado meses e seus elementos. Meses = new Array(12); Outra maneira, de atribuir os valores para um array. Vejamos a sintaxe abaixo: Meses = new Array(janeiro,fevereiro,maro,abril,maio, ...); Quando atribudo o nmero de elementos no array, necessrio declarar os elementos que faro parte do mesmo. Vejamos o exemplo abaixo:
Exemplo 1; O script abaixo apresenta a data atual no navegador.
Neste exemplo declaramos uma varivel chamada hoje para receber os valores de data, criamos dois arrays, um chamado semana e o outro chamado meses. Cada um dos arrays possui como contedo os dias da semana e os meses do ano, utilizamos o objeto document.write que apresentar a varivel hoje com o array, correspondente da varivel semana de acordo com seu mtodo getDay(), apresentando o valor especificado do dia da semana, ocorrendo o mesmo com a varivel meses para os meses do ano.
Exemplo 2; Neste outro exemplo de utilizao dos arrays, faremos que seja criado vrios campos de formulrio, o programa pergunta ao usurio a quantidade de campos do tipo input, e depois retorna a criao da quantidade de campos informado.
Na linha 16: Declaramos a varivel nome que vai receber o valor da entrada do usurio obtido pela funo prompt( ). Na linha 17: Foi criado um lao for que caso o valor da varivel i, for menor que a quantidade referenciada na varivel nome, ser incrementado o valor de nome dentro da varivel i. Para a execuo do lao foi definido que ser criado no documento atual um campo de formulrio, do tipo texto e a varivel de cada campo criado que aqui chamada de campo, receber cada uma o valor de i cada vez que o lao se repete. Com isto sero criados os campos cada um nomeado da seguinte forma: Se o usurio informar 5 campos, sero criados cinco campos cada um chamado de: campo0, campo1, campo2, campo3, campo4. Lembre-se que um array sempre se inicia a partir de 0. Na linha 22: Criamos fora do script um boto de formulrio que ao clicar sobre ele, ser exibido em um caixa de alerta o valor que o usurio digitou em um determinado campo.
1.7.
JavaScript Eventos.
Os eventos em JavaScript, so associados as funes, aos mtodos e aos formulrios, abrem uma grande porta para interatividade das pginas, EVENTOS so quaisquer aes iniciadas por parte do usurio. Sua utilizao se d como atributos da linguagem HTML, ou seja, dentro das prprias Tags HTML. Sua sintaxe tem a seguinte formao; <TAG nomeEvento="Instrues JavaScript"> Onde apresentado TAG uma instruo da linguagem HTML. Onde evento o nome do evento gerado da linguagem JavaScript. Onde Instrues JavaScript sero as instrues JavaScript serem executadas. Elas estaro sempre entre aspas.
Quando h mais de um comando JavaScript a ser executado para o mesmo evento estes devero estar separados por ponto e vrgula (;), conforme mostrado no exemplo abaixo: <TAG nomeEvento="JavaScript1;JavaScript2;JavaScript3"> Abaixo veremos diferentes eventos implementados em JavaScript. EVENTOS Clik Load Unload MouseOver MouseOut Focus Blur Change Select Submit keyDown keyPress keyUp MANIPULADOR onclik onload onunload onmouseover onmouseout onfocus onblur onchange onselect onsubmit onkeydown onkeypress onKeyUp DESCRIO Quando o usurio clica sobre um boto, um link ou outro elemento. Quando a pgina carregada pelo browser. Quando o usurio sair da pgina. Quando o usurio coloca o ponteiro do mouse sobre um link ou outro elemento. Quando o ponteiro do mouse no est sobre um link ou outro elemento. Quando um elemento de formulrio tem o foco, isto , est ativo. Quando um elemento de formulrio perde o foco, isto , quando deixa de estar ativo. Quando o valor de um campo de formulrio modificado. Quando o usurio selecionar um campo dentro de elemento de formulrio. Quando o utilizador clica sobre o boto Submit para enviar um formulrio. Ocorre quando uma tecla mantida pressionada. Ocorre quando uma tecla pressionada. Ocorre quando uma tecla solta.
Vejamos alguns exemplos de eventos. Neste exemplo vamos criar um script fora da pgina, abra o seu editor preferido para JavaScript, abaixo temos as trs funes que vamos fazer em JavaScript puro.
26
Figura 4 - Script em JavaScript
Acima temos trs funes, a funo eventoClique acessa um elemento de uma pgina HTML pelo id do elemento, para mudar a cor deste elemento. Abaixo temos a estrutura da pgina HTML, observe a linha 10, nesta atravs do elemento src referencio o local onde o script est, neste exemplo o mesmo encontra-se no diretrio aula_funcoes/ e js_eventos.js o nome do script.
Figura 5 - Estrutura HTML, chamando script.
onClick Este evento o mais clssico, o evento ser disparado no momento do clique do boto do mouse. Na linha 14 vemos a utilizao deste evento, aps referenciar o script na tag <head>, basta realizar a chamada do mtodo que esta no arquivo de script. onLoad e onUnload O evento Load aparece quando a pgina acaba de ser carregada. O inverso, Unload aparece quando o usurio sai da pgina. Os eventos onLoad e onUnload so utilizados sob forma de atributos da tags <BODY> ou <FRAMESET>. Pode-se assim escrever um script para desejar as boas vindas na abertura de uma pgina e uma mensagem de adeus ao sair desta, como vimos na imagem anterior. Onchange Neste exemplo quando o valor do campo fname que esta na linha 20, modificado atravs deste evento chama a funo alter_txt(), que vai alterar o valor do campo para letras maisculas.
Ao observar as linhas do nosso script, percebemos que na linha 13 declarado uma varivel chamada x, esta vai receber o elemento fname, depois na linha 14 vemos que a varivel x.value vai receber o valor de x.value.toUpperCase(), o mtodo toUpperCase() responsvel por passar o valor do elemento para maisculas. onmouseOver e onmouseOut
O evento onmouseOver executa-se quando o cursor passa por cima (sem clicar) de um link, de uma imagem ou de outros elementos. Este evento bastante prtico, por exemplo, na imagem acima vemos um exemplo deste evento, ao passar o cursor do mouse sobre a palavra Texto 1 (sem clicar no link), acionado a funo mouse_in() na linha 21, este evento foi criado nas linhas 11 a 13, como podemos ver bem simples, o elemento com id texto foi criado dentro da tag <h1>, atravs do id do elemento que aplicado o evento. No evento onmouseOut, geralmente associado um onmouseOver, executa-se quando o cursor sair da zona sensvel do elemento, a aplicao deste evento esta na imagem acima no elemento texto, o efeito neste exemplo foi, quando o cursor estiver na rea do objeto a cor ser mudada para azul, quando sair volta para a cor preta.
28
2.
Introduo ao PHP
2.1. PHP Introduo.
PHP uma sigla que significa PHP HyperText Preprocessor. O PHP uma linguagem de cdigo-fonte aberta, muito utilizada na Internet e especialmente criada para o desenvolvimento de aplicativos Web, possibilitando uma interao com o usurio atravs de formulrios, parmetros da URL e links. A diferena de scripts CGI escritos em outras linguagens como Perl ou C que ao invs de escrever um programa com um monte de instrues para imprimir HTML, voc escreve um arquivo HTML com algum cdigo inserido, por exemplo, imprimir um texto. O cdigo PHP delimitado por tags iniciais e finais que lhe permitem pular pra dentro e pra fora do modo PHP, como vemos abaixo:
<?php ?>
Figura 6 - Tag inicial do PHP
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <?php ?> </body> </html>
Figura 7 - Tag PHP dentro do HTML
Podemos escrever script em PHP dentro da estrutura HTML ou com as instrues do PHP puro, para escrevermos iremos utilizar um editor, mais qual? Podemos utilizar qualquer um dos editores que conhecemos no inicio da disciplina, ou outro de sua preferncia. Para testar scripts PHP necessrio um servidor com suporte a esta tecnologia, Normalmente, o mais utilizado o Apache. O banco de dados mais utilizado com os scripts PHP o MySQL, alem deste a linguagem tem suporte a um grande nmero de bancos de dados, como dBase, Interbase, MS-SQL Server, Oracle, Sybase, PostgreSQL e vrios outros, com relao a PHP e a banco de dados ser abordado no prximo semestre onde faremos a integrao da linguagem e o banco de dados. Alm do suporte a banco de dados
podemos trabalhar com outros servios atravs de protocolos tais como IMAP, SNMP, NNTP, POP3 e principalmente HTTP Ainda possvel abrir sockets e interagir com outros protocolos. Com relao ao ambiente para desenvolver script em PHP veremos mais adiante em ambiente de desenvolvimento em PHP. Histria da Linguagem PHP A linguagem PHP foi desenvolvida durante o outono de 1994 por Rasmus Lerdorf. As primeiras verses no foram disponibilizadas, tendo sido utilizadas em sua home-page apenas para que ele pudesse ter informaes sobre as visitas que estavam sendo feitas. A primeira verso utilizada por outras pessoas foi disponibilizada em 1995, e ficou conhecida como Personal Home Page Tools (ferramentas para pgina pessoa l). Era composta por um sistema bastante simples que interpretava alguns macros e alguns utilitrios que rodavam por trs das home-pages: um livro de visitas, um contador e algumas outras coisas. Em meados de 1995 o interpretador foi reescrito, e ganhou o nome de PHP/FI, o FI veio de outro pacote escrito por Rasmus que interpretava dados de formulrios HTML ( Form Interpreter). Ele combinou os scripts do pacote Personal Home Page Tools com o FI e adicionou suporte a mySQL, nascendo assim o PHP/FI, que cresceu bastante, e as pessoas passaram a contribuir com o projeto. O interpretador foi reescrito por Zeev Suraski e Andi Gutmans, e esse novo interpretador foi a base para a verso 3, chamada de PHP: Hypertext Preprocessor. O lanamento do PHP4, ocorrido no ano 2000, trouxe muitas novidades aos programadores de PHP. Uma das principais foi o suporte a sesses, bastante til pra identificar o cliente que solicitou determinada informao. A verso mais nova da linguagem PHP 5, que da suporte a orientao a objetos, o PHP no uma linguagem orientada a objetos e sim da suporte a orientao a objetos.
2.2.
Enviando Dados para o Servidor HTTP
Desenvolver para web consiste basicamente em receber dados de usurio process-los e enviar a resposta dinmica, aps ser enviada ao servidor onde ficam armazenadas as pginas em PHP e outras linguagens web encerrado o contato entre o servidor e o cliente. Vamos aprender um pouco mais de como funciona, o que precisaremos para montar nosso servidor e testar as pginas em PHP que iremos escrever.
30
Figura 8 - Enviando dados ao servidor
1. O protocolo HTTP/HTTPS prov dois principais mtodos para enviar informaes para o servidor web, alm da URL referente ao arquivo solicitado. Esses mtodos so o POST e o GET, o usurio atravs do formulrio faz a requisio ao servidor como vemos na imagem acima. 2. O servidor que tem suporte ao PHP vai neste ponto interpretar o script PHP que veio na requisio. 3. Aps o script PHP ser interpretado, o que foi solicitado na requisio vai ser processado, a requisio pode ser uma interao como o banco de dados, com um arquivo ou o envio de um email, ou ate mesmo estas operaes ao mesmo tempo. 4. O resultado em HTML ser enviado ao servidor. 5. O servidor por vez sua monta a resposta e apresenta ao usurio no navegador em HTML. O mtodo GET O protocolo HTTP utiliza a definio do mtodo GET, utilizado pelo browser para solicitar um documento especfico. Por exemplo: a seguinte requisio HTTP retornaria o documento "index.html", localizado no diretrio do servidor chamado meusite:
GET /meusite/index.html CRLF
Ao observar a requisio GET inicia com a palavra GET, inclui o documento solicitado e encerra com a combinao dos caracteres carriage return e line feed (CRLF). Vamos entender melhor, voc pode fazer uma requisio GET conectando diretamente em algum servidor WEB, conectando atravs de um programa chamado telnet, geralmente o
servidor HTTP utiliza a porta 80. A resposta ser o cdigo da pgina solicitada, como vemos abaixo.
telnet www.guia-aju.com.br 80 Trying 200.241.59.16... Connected to www.guia-aju.com.br. Escape character is '^]'. GET /index.php3 (... pgina solicitada ...) Connection closed by foreign host.
No caso do browser ele que trata as informaes recebidas e exibe a pgina j formatada. Com o mtodo GET tambm possvel passar parmetros da requisio ao servidor, que pode tratar esses valores e at alterar a resposta a depender deles, como no exemplo abaixo:
telnet www.guia-aju.com.br 80 Trying 200.241.59.16... Connected to www.guia-aju.com.br. Escape character is '^]'. GET /index.php3?id=0024horas&tipo=Taxi (... pgina solicitada ...) Connection closed by foreign host.
No exemplo so passados dois parmetros: id e tipo. Esses parmetros esto no formato conhecido por URLencode. Agora j sabemos que podemos passar parmetros utilizando o mtodo GET, e com isso gerar pginas dinamicamente, porem este mtodo tem pelo menos dois pontos que em determinadas circunstncias devem ser analisados conforme a aplicao web que se esta desenvolvendo: 1 O mtodo GET permite uma quantidade de dados passados limitada a 1024 caracteres, o que pode gerar perda de informaes em certos casos. 2 pelo fato de que as informaes fazem parte da URL, todos os dados podem ser vistos pelo usurio. Isso pode ser extremamente perigoso quando informaes sigilosas esto envolvidas, por exemplo, senhas. O mtodo POST usado quando queremos enviar dados a serem gravados em um banco de dados ou uma pesquisa cujos dados sejam grandes o suficiente para no caber na URL da pgina. Uma conexo ao servidor HTTP utilizando o mtodo POST seria algo semelhante ao que segue:
telnet www.guia-aju.com.br 80 Trying 200.241.59.16... Connected to www.guia-aju.com.br. Escape character is '^]'. POST /index.php3 Accept */* Content-type: application/x-www-form-urlencoded Content-length:22 id=0024horas&tipo=Taxi (... pgina solicitada ...) Connection closed by foreign host.
Ambiente de desenvolvimento em PHP. Agora que j sabemos como funciona a comunicao entre o servidor e o cliente, em um servidor web vamos implementar um servidor web para testar nossas aplicaes, abaixo temos nossas opes que podem ser utilizadas neste manual, apresentaremos trs porem existem outras que no sero abordadas. Pacotes prontos para execuo de um ambiente Apache + PHP + MySQL.
As pginas PHP devem ser salvas no diretrio raiz do servidor. Para testes locais deve-se abrir o browser de internet, acessar a URL com o endereo local (http://127.0.0.1) ou nome do domnio (http://localhost/), se na sua maquina possuir um servidor web instalado ser exibido uma pagina, caso contrario ser exibido um pgina de erro, informando que no conseguiu estabelecer uma conexo com o servidor. Abaixo vamos conhecer os pacotes prontos para execuo do ambiente.
EasyPHP
EasyPHP Ferramenta para web que simula um servidor um pacote pronto para execuo de um ambiente Apache + PHP + MySQL, pode ser baixado no link http://www.easyphp.org, o diretrio raiz para testar o seu projeto c:\Arquivos de programas\EasyPHP\www. Para acessar a pgina, deve-se abrir o browser de Internet e digitar-se o nome do domnio (http://127.0.0.1) e o nome da pgina com extenso *.php. Quando o EasyPHP est sendo executado, aparece um cone com uma letra e ao lado do relgio do Windows.
Wamp Server Wamp Server um ambiente de desenvolvimento web para Windows, permitindo que voc tenha um ambiente Apache + PHP + MySQL, para instalar primeiramente teremos que fazer o download no site http://www.wampserver.com/en/, o Diretrio raiz do servidor para testar as pginas encontra-se em c:\Arquivos de programas\wamp\www, este caminho utilizado na instalao padro.
No Linux podemos utilizar o Xampp que um pacote de instalao do ambiente Apache + PHP + MySQL, podendo fazer o download no link http://www.apachefriends.org/en/xampplinux.html. No Linux podemos instalar separadamente o apache, php e o mysql com o comando apt-get via terminal. Outra soluo em pacote de instalao o LAMP Linux- Apache MySql- PHP, para instalar basta abrir um terminal e digitar sudo apt-get install lamp-server^. No Linux o diretrio raiz do servidor apache em var/www, todos os seus diretrios de sites podem ser colocado neste diretrio, depois s chamar via navegador. Exemplo de Script PHP Para criar o primeiro exemplo, digite o cdigo-fonte abaixo no seu editor e salve com o nome de teste.php dentro do diretrio raiz do seu servidor.
<?php phpinfo(); ?>
A funo phpinfo(), exibe uma tabela contendo todas as constantes pr-definidas, assim como configuraes da mquina, sistema operacional, servidor http e verso do PHP instalada. Agora que j temos que organizar a nossa estrutura de diretrio dos nossos sites, ento vamos a uma dica muito importante, ao criar o diretrio do seu site aconselhvel criar alguns diretrios, abaixo temos um exemplo de uma estrutura de diretrios que iremos adotar.
meusite: Diretrio do seu site, este o raiz do seu site.
css: Neste vamos armazenar as nossas folhas de estilo.
images: Aqui iremos colocar as imagens que utilizaremos em nossos projetos. jquery: Neste diretrio vamos armazenar todos os scripts da biblioteca jquery, js: Este diretrio ser o local onde vamos guardar os script que iremos desenvolver na prximas aulas. que ser usado nas prximas aulas.
2.3.
PHP Variveis
Em PHP tambm utilizamos variveis, porem diferente de como fazamos em lgica de programao, onde aqui no precisamos declarar o tipo da varivel, vamos ver como declaramos uma varivel em PHP, na imagem abaixo.
Figura 9 - Declarao de Variveis
Na linha 20 usamos o echo para escrever em uma pgina, podendo ser passado texto e variveis como observaram separados por vrgulas, com ele tambm possvel atribuir tags HTML dentro das aspas simples. As variveis podem ser globais onde podemos ter acesso mesma em qualquer parte do cdigo, ou serem declaradas dentro de uma funo, sendo que se a varivel for declarada dentro de uma funo ela s estar disponvel dentro deste trecho de cdigo. Apesar de no precisarmos declarar o tipo de varivel o PHP suporta vrios tipos de dados: Inteiro Nmeros inteiros (isto , nmeros sem ponto decimal). Nmeros de dupla preciso Nmeros reais (isto , nmeros que contm um ponto decimal). String Texto entre aspas simples ( ) ou duplas ( ). Booleanos armazenam valores verdadeiros ou falsos, usados em testes de condies. Array Grupo de elementos do mesmo tipo. Objeto Grupo de atributos e mtodos.
Recurso Uma origem de dados externa. Nulo Nenhum valor. Constantes So identificadores para valores simples. O seu contedo no muda durante a execuo do cdigo. Para declararmos utilizamos a funo define e, por conveno, so escritas com letras maisculas e no usam o cifro no incio. Declarao de uma constante
Figura 10 - Exemplo de uma constante
As variveis no podem ter o mesmo nome de instrues do PHP, que so chamadas de palavras chaves, abaixo uma tabela com as palavras chaves. Palavras-chave do PHP and break case global or do else extends not while for foreach elseif switch this default list function xor include virtual new continue require return class false true var static if
2.4.

PHP Operadores
So usados para efetuarem operaes sobre as variveis e constantes. Os tipos de operadores do PHP so:
Operadores Matemticos ou aritmticos Operadores de Comparao Operadores Lgicos Operadores de Atribuio
2.4.1. Operadores Matemticos

So utilizados quando os operandos so nmeros (integer ou float). Caso sejam de outro tipo, tero seus valores convertidos antes da realizao da operao. Operador + * /
Nome Adio Subtrao Multiplicao Diviso

36
Mdulo ou resto da diviso
Exemplo:
Incremento e Decremento No caso de string s h um operador exclusivo:
++ --
Incremento Decremento
Podem ser utilizados: antes ou depois da varivel. Quando utilizado antes, retorna o valor da varivel antes de increment-la ou decrement-la. Quando utilizado depois, retorna o valor da varivel j incrementado ou decrementado.
Exemplo:
Concatenao:
No caso de string s h um operador exclusivo:
Concatenao
37
2.4.2. Operadores de Comparao

As comparaes so feitas entre os valores contidos nas variveis, observamos durante o curso que a lgica dos operadores a mesma, o que esta mudando medida que avanamos no curso o que muda em alguns casos a sintaxe da linguagem, os operadores de comparao sempre retornam um valor booleano. Operador == != <> === !== < > <= >= Nome Igual Diferente Diferente Idntico No idntico Menor que Maior que Menor ou igual Maior ou igual Exemplo $a == $b $a != $b $a <> $b $a === $b $a !== $b $a < $b $a > $b $a <= $b $a >= $b Resultado Verdadeiro se $a for igual a $b Verdadeiro se $a no for igual a $b Verdadeiro se $a no for igual a $b Verdadeiro se $a for igual a $b e for do mesmo tipo. Verdadeiro se $a no for igual a $b, ou eles no so do mesmo tipo. Verdadeiro se $a for menor que $b Verdadeiro se $a for maior que $b Verdadeiro se $a for menor ou igual a $b. Verdadeiro se $a for maior ou igual a $b.
2.4.3. Operadores Lgicos

Os operadores lgicos so utilizados para combinar expresses lgicas entre si, realizando testes condicionais. Operador Nome Exemplo Resultado AND E ( 10 > 7 ) AND ( 9 == 9 ) Verdadeiro se 10 for maior que 7 e 9 for igual a 9 OR Ou ( 10 > 7 ) OR ( 9 == 9 ) Verdadeiro se 10 for maior que 7 ou 9 for igual a 9 XOR Ou ( 10 > 7 ) XOR ( 9 == 9 ) Verdadeiro se 10 for maior que 7 ou 9 exclusivo for igual a 9, mais no se ambos forem verdadeiro ! Negao ! ( 10 > 7 ) Verdadeiro se 10 for menor que 7 && E ( 10 > 7 ) && ( 9 == 9 ) Verdadeiro se 10 for maior que 7 e 9 for igual a 9 || Ou ( 10 > 7 ) || ( 9 == 9 ) Verdadeiro se 10 for maior que 7 ou 9 for igual a 9
2.4.4. Operadores de Atribuio

Existe um operador bsico de atribuio (=) e diversos derivados. Sempre retornam o valor atribudo. No caso dos operadores derivados de atribuio, a operao feita entre os dois operandos, sendo atribudo o resultado para o primeiro. A atribuio sempre por valor, e no por referncia, abaixo tabela com os operadores.
Operador = += -= *= /= Descrio Atribuio simples Atribuio com adio Atribuio com subtrao Atribuio com multiplicao Atribuio com diviso
38
%= .=
Atribuio com mdulo Atribuio com concatenao
Precedncia de operadores A tabela seguinte mostra a precedncia dos operadores, da maior precedncia no comeo para os de menor precedncia de operadores. Operador - ! ++ -*/% +-. > < >= <= == != <> && || = += -= *= /= %= AND XOR OR Descrio Negativo, negao, incremento e decremento Multiplicao, diviso e resto da diviso Adio, subtrao e concatenao Maior que, menor que, maior ou igual e menor ou igual Igual e diferente E Ou Operadores de atribuio E com menor prioridade Ou exclusivo Ou com menor prioridade
Comentrios de cdigo muito importante documentar o cdigo, o cdigo bem documentado auxilia bastante na hora de uma manuteno, ou em um trabalho de equipe. Comentrios de uma linha: Marca como comentrio at o final da linha ou at o final do bloco de cdigo PHP o que vier antes. Pode ser delimitado pelo caractere # ou por duas barras //.
Exemplo 1:
Comentrios de mais de uma linha: Temos como delimitadores os caracteres /* para o incio do bloco e */ para o final do comentrio. Exemplo 2:
39
2.4.5. Operadores (Mdia Aritmtica).

Nesta aula vamos criar um script em PHP para calcular a mdia aritmtica, o mesmo vai receber duas notas recebidas do formulrio HTML e ir retornar a sua mdia. Para esta prtica crie uma pgina web com a extenso *.php, esta pgina deve conter os elementos iguais a pgina abaixo;
Observe que na linha 8 dentro da tag <form> definimos o mtodo post para enviar as informaes, e no action o script PHP que ser responsvel pelo calculo da mdia, ento temos 2 arquivos um responsvel pela apresentao ao usurio e outro para calcular. Agora vamos codificar o script calc_media.php. Entendo o Script: Na linha 3: usamos uma funo prpria do PHP o require, ele responsvel por requerer ou retornar um script, neste exemplo usamos para a mensagem que esta na linha 7 seja escrita no formulrio de apresentao, como mostrado na imagem seguinte, sem esta instruo quando o script fosse executado o retorno seria apenas a mensagem dentro do calc_media.php. Nas Linhas 4 e 5: Estamos declarando as variveis que vo receber os valores passados pelo formulrio, onde elas recebem atravs $_POST, np1 e np2 so os nomes dos inputs do formulrio, que os valores dos mesmos esto sendo passados para as variveis $np1 e $np2. Quando definimos $_POST estamos dizendo que os dados do formulrio esto sendo passados atravs deste mtodo, logo se no <form> do meu formulrio esta method="post" para receber o post no outro script uso $_POST.
40
Na linha 6: Realiza-se o calculo $media = ($np1 + $np2) / 2, que na linha 7 passado para ser devolvido a pgina que foi solicitada. Abaixo vemos o resultado final desta prtica.
Exerccio Prtico
Agora vamos praticar um pouco, abaixo temos duas situaes, para cada uma delas temos que criar formulrios web e scripts ao final exibir o resultado ao usurio. Obs.: Lembre-se que teremos um formulrio em PHP para receber os dados e um script em PHP para os clculos. 1) Crie um formulrio na web que leia o nome de um vendedor, o seu salrio fixo e o total de vendas efetuadas por ele no ms (em dinheiro). Sabendo que este vendedor ganha 15% de comisso sobre suas vendas efetuadas, depois de receber estes dados informar o seu nome, o salrio fixo e o salrio no final do ms. 2) O Sr. Joo necessita saber o consumo mdio de um automvel, e solicitou para voc desenvolver uma pgina web que sendo fornecida a distncia total percorrida pelo automvel e o total de combustvel gasto, mostrar o consumo do automvel. (formula Distncia /combustvel).
2.5.
PHP - Estruturas de Controle.
As estruturas que veremos a seguir so comuns para as linguagens de programao, iremos observar que a estrutura lgica a mesma que vimos em lgica de programao, bastando, portanto, descrever a sintaxe de cada uma delas, resumindo o funcionamento, abaixo tem alguns exemplos de cada uma dessas estruturas de controle. Um bloco consiste de vrios comandos agrupados com o objetivo de relacion-los com determinado comando ou funo. Em comandos como if, for, while, switch e em declaraes de funes os blocos podem ser utilizados para permitir que um comando faa parte do contexto desejado. Os blocos em PHP so delimitados pelos caracteres { e }, assim como na linguagem Java que iniciamos na disciplina de lgica de programao. A utilizao dos delimitadores de bloco em uma parte qualquer do cdigo no relacionada com os comandos citados ou funes no produzir efeito algum, e ser tratada normalmente pelo interpretador.
2.5.1. Estrutura Condicional (if ).

Ele testa a condio e executa o comando indicado se o resultado for verdadeiro (true). Abaixo veremos os exemplos em PHP:
Exemplo 1; Exemplo da instruo IF em PHP.
O else um complemento opcional para o if. Se utilizado, o comando ser executado se a expresso retornar o valor falso. Veja o exemplo abaixo: Exemplo 2; Exemplo da instruo IF /ELSE em PHP.
Exemplo 3; Exemplo da instruo ELSE IF encadeado.
ELSE IF. Ele tem a mesma funo de um ELSE e um IF usados sequencialmente, como no exemplo ao lado. Num mesmo IF podem ser utilizados diversos ELSEIFs, ficando essa utilizao a critrio do programador.
2.5.2. Estrutura Condicional (switch ).

A instruo switch atua de maneira semelhante a uma srie de comandos if na mesma expresso. utilizado quando se deseja comparar uma varivel com diversos valores, e executar um cdigo diferente dependendo de qual valor igual ao da varivel. Quando isso for necessrio, deve-se usar o comando switch. O exemplo abaixo mostra a sua utilizao. Em outras linguagens que implementam o comando switch, ou similar, os valores a serem testados s podem ser do tipo inteiro. Em PHP permitido usar valores do tipo string como elementos de teste do comando switch.
42
Exemplo 1; Neste exemplo declarado varivel $d que vai receber a data do navegador, na linha 16 passado somente o dia usando um array, com relao array iremos estudar sobre este assunto nas prximas aulas, aps obter o dia em formato numrico vai ser feita a comparao com os cases, o array o vetor que conhecemos em lgica de programao, ento como j sabemos ele inicia em 0. Por isso que o domingo tem o valor 0, pois domingo o primeiro dia da semana.
2.5.3. Estrutura de Loop (for ).

Esta estrutura de loop j uma velha conhecida nossa, basicamente composta de trs pontos principais ou sentenas separadas por ponto e vrgula. 1. Inicializao: Deve conter a varivel que inicia o lao. 2. Condio: Expresso booleana que define se os comandos que esto dentro do lao sero executados ou no. Enquanto a expresso for verdadeira os comandos sero executados. 3. Incremento: Executado ao final de cada execuo do lao.
Exemplo 01: Neste exemplo foi criado um contador simples de 1 a 10.
FOREACH um lao de repetio para interaes em arrays, um for de forma simplificado, ele decompe o vetor ou matriz em cada um de seus elementos por meio da clusula AS, veremos exemplos de sua aplicao na aula de arrays.
43
Sua sintaxe ; $array ser o nome do array. as $valor esta passando os valores do array para a varivel $valor, as instrues podem ser por exemplo, um echo ou print, para exibir na pgina o resultado. Tudo que esta entre as chaves as instrues sero repetidas o numero de vezes das posies do vetor.
foreach ($array) as $valor) { instrues }
2.5.4. Estrutura de Loop (while ).

o comando de repetio (lao) mais simples. Ele testa uma condio e executa um comando, ou um bloco de comandos, enquanto a condio for verdadeira. Exemplo: O exemplo abaixo mostra o uso do while para imprimir de 1 at 9.
do... while O lao do...while funciona de maneira bastante semelhante ao while, com a simples diferena que a expresso testada ao final do bloco de comandos. Abaixo temos um exemplo usando o do while. Exemplo: Neste exemplo abaixo usamos o do while para escrever de 9 a 10, decrementando a cada passo do lao.
Exerccio Prtico
1) Construir um programa em PHP que solicite que um valor inteiro seja digitado e
imprima o quadrado do valor digitado se este valor for maior do que 50.
2) Construir um programa em PHP que pea para que um valor inteiro e positivo seja
digitado e imprima/escreva uma mensagem informando se este nmero par ou no.

44
3) Construir um programa em PHP que leia cinco valores inteiros e calcule a mdia
aritmtica desses cinco valores. Imprimir a mdia calculada com a mensagem: A mdia calculada :
4) Construir um programa em PHP que leia as notas de AV1, AV2 e AV3 de um aluno e
imprima a mdia calculada, com a mensagem pertinente, ou seja, se o aluno foi aprovado, est em prova final ou foi reprovado. quatro operaes sobre os dois nmeros digitados.
5) Construir um programa em PHP que simule uma mquina de calcular e execute as
2.6.
PHP Definio de Funes.
Uma funo um bloco de cdigo reutilizvel que executado devido a um evento ou pela chamada de outra funo. Deve-se usar a declarao function para criar uma funo. Os parmetros usados pela funo so declarados entre parnteses. Os comandos a serem executados pela funo devem estar entre chaves. A sintaxe bsica para definir uma funo : function nome_da_funo() { Comandos; }
Figura 11 - Sintaxe de uma funo
Exemplo: No cdigo abaixo temos a declarao de uma funo chamada msn( ) que escreve um texto, na linha 21 esta funo chamada.
A declarao return A declarao return retorna um valor quando a funo chamada. Esta declarao no necessria se a funo no retorna nenhum valor. Para se chamar uma funo, deve-se escrever seu nome e indicar os parmetros entre parnteses, abaixo a sintaxe de uma funo com return que pode ter ou no argumentos.
45
function nome_da_funo([arg1, arg2, arg3]) { Comandos; [return <valor de retorno>]; } Toda funo pode opcionalmente retornar um valor, ou simplesmente executar os comandos e no retornar valor algum. Uma funo no pode retornar mais de um valor, mas permitido fazer com que uma funo retorne um valor composto, como listas ou arrays. Exemplo: Funo que retorna o resultado de uma soma, na linha 28 feita a chamada do mtodo para imprimir o resultado da soma.
Argumentos
possvel passar argumentos para uma funo. Eles devem ser declarados logo aps o nome da funo, entre parnteses, e tornam-se variveis pertencentes ao escopo local da funo. A declarao do tipo de cada argumento utilizada apenas para efeito de documentao.
function nome_da_funo([arg1,arg2,arg3]){ Comandos; } Exemplo: A funo imprime foi declarada, onde a mesma recebe como argumento a varivel $texto, na linha 7 feita a chamada da funo onde passado o texto para a funo imprimir.
46
Passagem de parmetros por referncia Normalmente, a passagem de parmetros em PHP feita por valor, ou seja, se o contedo da varivel for alterado, essa alterao no afeta a varivel original. Exemplo:
No exemplo, como a passagem de parmetros por valor, a funo mais5 intil, j que aps a execuo sai da funo o valor anterior da varivel recuperado. Se a passagem de valor fosse feita por referncia, a varivel $a teria 8 como valor. O que ocorre normalmente que ao ser chamada uma funo, o interpretador salva todo o escopo atual, ou seja, os contedos das variveis. Se uma dessas variveis for passada como parmetro, seu contedo fica preservado, pois a funo ir trabalhar na verdade com uma cpia da varivel. Porm, se a passagem de parmetros for feita por referncia, toda alterao que a funo realizar no valor passado como parmetro afetar a varivel que o contm. H duas formas de fazer com que uma funo tenha parmetros passados por referncia: indicando isso na declarao da funo, o que faz com que a passagem de parmetros sempre seja assim; e tambm na prpria chamada da funo. Nos dois casos utiliza-se o modificador "&". Vejamos um exemplo que ilustra os dois casos:
Argumentos com valores pr-definidos (default) Em PHP possvel ter valores default para argumentos de funes, ou seja, valores que sero assumidos em caso de nada ser passado no lugar do argumento. Quando algum parmetro declarado desta maneira, a passagem do mesmo na chamada da funo tornase opcional.
47
Quando a funo tem mais de um parmetro, o que tem valor default deve ser declarado por ltimo.
Contexto O contexto o conjunto de variveis e seus respectivos valores num determinado ponto do programa. Na chamada de uma funo, ao iniciar a execuo do bloco que contm a implementao da mesma criado um novo contexto, contendo as variveis declaradas dentro do bloco, ou seja, todas as variveis utilizadas dentro daquele bloco sero eliminadas ao trmino da execuo da funo. Escopo O escopo de uma varivel em PHP define a poro do programa onde ela pode ser utilizada. Na maioria dos casos todas as variveis tm escopo global. Entretanto, em funes definidas pelo usurio um escopo local criado. Uma varivel de escopo global no pode ser utilizada no interior de uma funo sem que haja uma declarao.
2.7.
PHP - Arrays.
Um array uma varivel que armazenam mais de um valor simultaneamente, so como contineres, servindo para armazenar nmeros, strings, objetos, dentre outros, de forma dinmica, alem disso oferece muitas funes para manipul-los. Os arrays so acessados por uma posio, como o ndice numrico, para criar um array, pode-se utilizar a funo array, abaixo a sintaxe de criao do array.
array([chave=>] valor, ...)
Exemplo 1: neste exemplo na linha 14, estamos criando um array usando a funo array, criamos a varivel $cores onde ela recebe a funo array e dentro dos parnteses passando os valores. Nas linhas 15 a 21, exibimos os valores do array o que esta dentro de [ ] o ndice do array, ento neste array temos 4 posies iniciando em 0 e vai at 3, de 0 a 3 temos 4 elementos.
48
Exemplo 2: Agora neste exemplo criamos um array, mais j especificando o ndice que ser usado, desta forma podemos criar um array que no inicia em zero, diferente da linguagem Java em que o ndice sempre vai iniciar em 0.
Arrays associativos So chamados assim por possurem uma chave de acesso para cada posio, abaixo iremos criar um array associativo, para exemplificar sua utilizao. Exemplo 1: Neste exemplo estamos criando um array, definindo qual ser sua chave de acesso, isso mesmo em PHP ao invs de ter como acesso ao array um numero inteiro, posso definir o nome da chave de acesso, nas linhas 15 a 18 crio a varivel $frutas agora sem usar a funo array, entre [ ] com aspas simples determino o nome da chave de acesso, e depois atribudo o valor para aquela chave. Na linha 20: Estou usando uma estrutura de repetio chamada foreach, ele responsvel por decompor o array em cada posio (ndice), no caso como o que esta dentro das chaves do foreach uma instruo para imprimir na pgina, isso vai fazer com que todas as posies do vetor ( array) seja mostrado na pgina(linha 22). Exemplo 2: Neste exemplo estamos fazendo um acesso ao array, os mesmos podem ser acessados a qualquer momento e podem ser realizadas operaes, como no exemplo abaixo. A funo var_dump gera uma sada do array, exibindo tamanho, ndices, valores do array, como mostrado na imagem.
Figura 12 - resultado gerado pela funo var_dump
49
Array multidimensional So arrays que podem em algumas de suas posies conterem outro array de forma recursiva, ele tambm pode ser criado pela funo array(). No exemplo a seguir vamos criar um array multidimensional da tabela abaixo; Modelo do carro ($carros) Palio Corsa Gol Cor Potncia Opcionais
Azul Cinza Branco
1.0 1.3 1.0
Ar condicionado MP3 Metlica
O nosso array vai se chamar $carros onde temos os modelos e suas caractersticas, duas dimenses [ ] [ ]. Exemplo: Neste exemplo temos um array multidimensional, onde a varivel $carros o nosso array, nele como podemos observar temos trs chaves (palio,Corsa,Gol) e em cada chave adiciono outras que so relacionadas as caractersticas do carro como cor,potncia e opcionais e a cada uma atribudo um valor. Para facilitar o entendimento o array multidimensional nada mais que uma tabela com linhas e colunas, uma matriz Na linha 24: Geramos uma sada porem o que vai ser mostrado na pgina ser o valor Ar condicionado. Na linha 28 a 35: Temos um novo bloco PHP, onde usamos o foreach encadeado, ou seja, um dentro do outro para exibir os modelos ($modelo) de carros e suas caractersticas ($caracteristicas) e seus valores ($valor), gerando a sada abaixo no navegador;
50
3.
Introduo a Framework JQuery
jQuery uma poderosa biblioteca JavaScript criada para simplificar a criao de efeitos visuais e de interatividade em web sites. jQuery propicia a criao de scripts de uma forma to simples e intuitiva que consegue com meia dzia de linhas os mesmos efeitos de um script de 30 a 40 linhas desenvolvido com JavaScript tradicional. Simplicidade foi diretriz que norteou John Resig na criao da biblioteca. (Silva) Nesta etapa da disciplina, iremos trabalhar apresentando a biblioteca e um estudo da sintaxe usando os seletores e comandos jQuery, iremos trabalhar desenvolvendo praticas que chamaremos de laboratrios empregando vrios scripts, que podero ser utilizados no desenvolvimento de web sites.
3.1.
Instalao.
A instalao bem simples basta fazer o download no site http://jquery.com/ e depois fazer o download, voc ira baixar um arquivo compactado descompacte-o no diretrio raiz do seu site.
Figura 13 - Site Jquery
51
Para utilizar a biblioteca basta chamarmos o script na tag <head>, como vemos na imagem abaixo:
Iniciamos a tag <script> usamos o elemento src e passamos o caminho do script Jquery que tem a extenso *.js, agora podemos acessar funes da biblioteca. jQuery UI (User Interface) um conjunto de funes em um script e estilos CSS com de interaes de interface de usurio, efeitos, widgets, temas construdos em cima da Biblioteca JavaScript jQuery, para baixar acesse o link http://jqueryui.com/, coloque-o no mesmo diretrio que o jquery, nas prximas aulas desenvolveremos alguns exemplos com ele. No link http://code.jquery.com/ podemos fazer o download de vrios script de projetos jquery.
Agora vamos a pratica o lema do Jquery que escreva menos e faa mais, por isso os temas das aulas a seguir so bem prticos.
3.2.
Colunas e clulas de tabelas.
Nesta aula vamos trabalhar com tabelas, as pginas que vamos criar usando o Jquery tero a extenso *.php, abaixo temos o resultado final desta prtica.
1 passo: criar uma pgina com web com a extenso *.php, nela poderemos trabalhar com HTML e PHP. 2 passo: Agora vamos criar a nossa folha de estilo, criaremos um novo arquivo css chamado tabela.css para depois fazer um link com a pgina, abaixo temos a imagem do arquivo *.css Nesta parte do css, temos as marcaes das tag que sero usadas no HTML. Continuaes do css, na linha 37 tm a cor de fundo que ser aplicada na tabela, para obter o efeito cor sim cor no.
3 passo: Neste passo vamos chamar o css e o script Jquery na pgina web.
Na tag <head> estamos chamado a folha de estilo na linha 10 que tem o nome de tabela.css. Na linha: 11 chamamos o script Jquery, que esta no diretrio jquery. 4 passo: Escrever o script JavaScript que ser executado quando o documento for lido.
53
Linha 14: Nesta linha quando o documento for lido ($(document).ready) vai ser acionado uma funo que tem como objetivo adicionar a formatao do atributo css table, que criamos anteriormente, na tabela chamada horario. De forma a adicionar a class impar que vai aplicar o background:#add6ef, criado no css, fazendo com que as linhas impares sejam adicionadas o background definido. 5 passo: Estrutura HTML de nossa pgina, na tag <body> criamos a nossa tabela, o id da tabela chama-se horario que faz referncia ao script criado anteriormente.
Na linha 26: Temos a tag <tr> com o id horizontal para identificar que esta a linha horizontal, o restante do cdigo apenas a estrutura da tabela em HTML a qual j conhecemos.
Laboratrio Tabela 2 Neste exemplo vamos adicionar um efeito de cores uma para cada linha, e um evento hover para destacar a linha onde o mouse passar, o resultado desta prtica podemos visualizar na imagem abaixo.
54
1 passo: Vamos voltar em nosso arquivo css onde temos o estilo da tabela anterior e adicionar a class .par com o background da linha par, a class .destacar que mudar a cor quando o mouse passar na linha da tabela.
2 passo: Para este exemplo podemos apenas editar o script anterior acrescentando, a class par, o evento hover como na linha 18.
Na linha 19 a 24: temos a funo responsvel por adicionar e remover a class css, que ser mostrado quando o ponteiro do mouse estiver sobre uma linha ou sair da linha. A estrutura HTML a mesma do exemplo anterior, podendo apenas adicionar este efeito.
3.3.
Tooltips.
como so chamadas as legendas, neste laboratrio vamos aprender como criar o efeito abaixo na legenda.
55
1 passo: Criar uma pgina em PHP como mostrado acima, com o campo CPF e Data. 2 passo: Criar o script responsvel por apresentar a legenda com o efeito.
Como estamos trabalhando com Jquery sempre temos que adicionar o script Jquery. Na linha 14: Como no exemplo anterior Iniciamos o script com o mtodo ready do documento carregando a funo. Na linha 15 a 20: criamos a class .dica com os atributos do css para formatao do texto que ser mostrado, onde o texto encontra-se na tag <span>. Na linha 22: Aciono o mtodo focus e o blur chamando a funo para aplicar o efeito fadein e fadeout com o valor 1500, que vai gerar um esmaecimento na entrada do foco no campo e na sada do campo. 3 passo: Na estrutura HTML da pgina na tag <span>, colocaremos o texto da dica, na tag <input> vamos adicionar a class dica que foi criada no script acima.
3.4.
Accordion.
Neste laboratrio vamos cria um accordion, que este efeito sanfona entre uma aba e outras, abaixo temos a imagem de como ficar este exemplo.
56
1 passo: Criar a folha de estilo com o nome accordion.css, nela vamos colocar alguns efeitos personalizados.
Na linha 11: Colocamos um cone chamado seta.png, voc pode baixar algum na internet com as dimenses 11x 7, porem o cdigo pode ficar sem o cone. Abaixo temos a continuao da folha de estilo.
2 passo: Criar o script para o accordion, o script abaixo vai fazer a interao com a folha de estilo aplicando os efeitos.
3 passo: Adicionar o estilo css e o script na pgina, no se esquea de incluir tambm o script do Jquery.
4 passo: Abaixo temos a estrutura HTML de nossa pgina na linha 18 adicionamos a class accordion2, que vem da folha de estilo criada no inicio desta aula.
3.5.
Datepicker.
Este widget apresenta um calendrio quando o usurio coloca o foco no campo de data, abaixo o resultado do nosso calendrio. Este exemplo bem simples e pode ser personalizado acessando o script JqueryUI, nesta aula vamos utilizar o JqueryUI que um complemento do Jquery, trata especialmente da interface com o usurio, e para o programador deixa o trabalho bem mais simplificado.
1 passo: Adicionar scripts do Jquery e JqueryUI na linha 13 chamamos a folha de estilo que vem com o JqueryUI quando feito o donwload.
58
2 passo: Agora temos a penas que criar um script, para chamar o mtodo datepicker atravs do elemento #datepicker que ser o id do elemento HTML.
3 passo: Na estrutura HTML, precisamos apenas definir a partir de que elemento vai ser chamado o calendrio, bastando informar o id com o mesmo nome do elemento criado no script anterior.
3.6.
Auto-complete.
Neste laboratrio vamos criar um campo com auto-complete nesta aula tambm vamos utilizar o JqueryUI.
1 passo: Adicionar os scripts jquery.js e jqueryUI.js e a folha de estilo jquery-ui.css.
2 passo: Criar o script para as palavras chaves, vamos criar uma funo e dentro dela criar um arrays com as palavras chaves, na linha 15 declaramos a varivel e atribumos os valores. Na linha 35 ainda dentro da funo criamos o elemento #tags e chamamos a funo autocomplete passando para o source a varivel criada na linha 15.
59
3 passo: A estrutura HTML, nesta definimos a class da div ui-widget a mesma vem da jqueryUI. Depois na linha 46 definimos o id do input como tags referenciando com #tags criado no cdigo JavaScript acima.
3.7.
Janela de dialogo modal.
Neste laboratrio vamos aprender a criar uma janela de dialogo modal, este tipo de janela abre sobre o contedo da sua pgina como um popup, o resultado desta prtica apresentado abaixo.
1 passo: Adicionar script Jquery, JqueryUI e folha de estilo em nossa pgina.
2 passo: Escrever o script responsvel pela animao e estilo da janela.
Linha 16: Defini a velocidade da animao em ms. Linha 17: Funo que aplica o estilo #dialog e o efeito de abertura show e o de fechamento hide.
Linha 24: definio de que evento vai dispara a janela, e em que elemento #opener que o id da tag <Button>. 3 passo: Na estrutura da pgina, linha 33 referenciou o id da div ao atributo criado no script anterior.
Linha 35: Inserimos um trecho de cdigo PHP com uma mensagem, s para demonstrar que podemos entrar com instrues PHP. Linha 39: referencio o id do button ao atributo #opener criado no JavaScript acima.
3.8.
Menu.
Nesta aula vamos criar um menu para o nosso site, na biblioteca JqueryUI, podemos fazer um menu em pouco tempo j com um estilo predefinido, mais podemos criar menus com outros estilos, em alguns sites oferecem vrios modelos de menu para download, para conferir acesse o site http://apycom.com/. Este exemplo vamos usar alguns estilos prprios do JqueryUI, o resultado desta prtica mostrado abaixo.
1 passo: Adicionar os scripts e o estilo da JqueryUI
2 passo: Agora vamos criar o script para chamar o mtodo menu(), criamos o atributo #menu para ser aplicado a lista da estrutura HTML.
61
3 passo: Alterar uma propriedade do estilo jqueryui, para o menu ficar projetado como a imagem acima.
4 passo: Estrutura HTML, definimos na tag <ul> o id=menu para referenciar ao atributo #menu criado no JavaScript. Na linha 25: Adicionamos a class ui-state-disable, para desabilitar este item do menu, s para fins didticos.
3.9.
Abas.
Nesta aula vamos aprender a criar um painel tabulado, como o que vemos abaixo.
1 passo: Adicionar scripts e estilo css da biblioteca Jquery.
62
2 passo: Script que cria o painel com as abas, criou-se uma funo e definimos um atributo #tabs que esta vinculado ao mtodo tabs() do jquery, o atributo vai ser usado na estrutura da pgina.
3 passo: Estrutura da pgina, nesta criado uma div que representa o painel onde estaro as abas. Depois criamos uma <ul> onde cada lista vai chamar um atributo #tab-1, #tab-2 e #tab-3, este que representa as divs criadas da linha 26 a 43 , dessa forma junto com o JavaScript vai mostrar todos os ttulos das abas, e quando um for escolhida mostrar seu contedo.
63
3.10. jQuery Mobile na prtica
Introduo O jQuery Mobile uma biblioteca JavaScript para criar aplicativos da web mveis. Baseado no jQuery e em sua interface com o usurio (UI), com ela possvel garantir aparncia e comportamento consistentes em plataformas de dispositivos mveis diferentes. Os recursos bsicos do jQuery Mobile so:
Simplicidade e flexibilidade gerais. O uso da estrutura simples. possvel:
Desenvolver pginas usando marcao acionada com pouco ou nenhum JavaScript. Usar eventos e JavaScript avanado. Usar um nico documento HTML com vrias pginas integradas. Dividir o aplicativo em vrias pginas.
Aprimoramento progressivo e degradao suave. Embora o jQuery Mobile utilize o HTML5, CSS 3 e JavaScript mais recentes, nem todos os dispositivos mveis fornecem esse suporte. A filosofia do jQuery Mobile suportar tanto os dispositivos de alto nvel quanto os com menos recursos como os que no suportam JavaScript.
Suporte para toque e outros mtodos de entrada. Fornece suporte para diversos mtodos de entrada e eventos: toque, mouse e mtodos de entrada do usurio baseados em foco.
Acessibilidade O jQuery Mobile foi projetado tendo em mente a acessibilidade. Tem suporte para Accessible Rich Internet Applications (WAI-ARIA) para ajudar a tornar as pginas da web acessveis para visitantes portadores de deficincia por meio de tecnologias assistidas. Leve e modular. A estrutura leve, e dividida em biblioteca JavaScript, CSS, alm de alguns cones.
64
Para fazer o download acesse o link http://jquerymobile.com, o arquivo baixado compactado, para usar descompacte no diretrio do seu site, para iniciar a utilizar e desenvolver suas pginas nas aulas seguintes.
Para acessar a documentao da biblioteca e exemplos acesse: http://jquerymobile.com/demos/1.2.0/ Estrutura bsica de uma pgina no JqueryMobile
65
1 2
Figura 14 - Estrutura bsica de uma pgina no JqueryMobile
1 Aqui temos o cabealho de nossa pgina, onde na linha 9 definimos a codificao de caracteres. 2 Para utilizarmos a biblioteca precisamos chamar o script do jquery e do jquery.mobile, alm dos script precisamos chamar a folha de estilos, sempre que formos desenvolver uma pgina usando o jquery mbile, precisamos usar estes arquivos. 3 Esta a estrutura da pgina com jquery mobile, usando divs e ad icionando os atributos. Layout de uma pgina bsica no JqueryMobile Este o layout bsico da nossa pgina, no sendo obrigatrio mais uma estrutura recomendvel, em nossas aulas vamos utilizar sempre este layout.
Cabealho (header) - data-role="header" rea de Contedo (content) - data-role="content"
Rodap (footer) - data-role="footer" Informtica - Java Script / PHP 66
Abaixo vemos como nossa pgina baseado no layout acima apresentada, observe que com poucas linhas j criamos o designer atraente.
Um site jQuery Mobile que inicia com "doctype" o HTML5 pode tirar o mximo proveito de todos os recursos do framework. Porem dispositivos mais antigos com navegadores que no entendem HTML5 vai ignorar o "doctype", mais apresentara a pgina algumas funcionalidades que podero no ser reconhecidas. Dentro da tag <body>, cada exibio ou "pgina" no dispositivo mvel identificado com um elemento (geralmente uma div), com o atributo data-role="page" Agora vamos conhecer os atributos mais comuns para utilizarmos em nossas pginas. Atributos JqueryMobile. Atributo data-role="page" data-role="header" data-role="content" data-role="footer" data-icon data-role Descrio Define os estilos do css para pgina, com o papel de pgina. Define os estilos do css para cabealho da pgina, com o papel de cabealho. Define os estilos do css para o contedo da pgina, com o papel de contedo. Define os estilos do css para o rodap da pgina, com o papel de rodap. Define um cone para o elemento. Atributo usado para definir vrios widgets, como botes, pginas, barras de navegao, listas de visualizao e outros. Define o tipo de transio ser usado. Atributo para o link de ncora de uma pgina, podendo
67
data-transition= data-rel=
ser popups e dialog. data-inset="true" data-theme Exibi um elemento listview com cantos arredondados quando true. Define um tema para o elemento.
Tema Com o jQuery Mobile, possvel usar o atributo data-theme para aplicar um tema padro ou cinco amostras adicionais, com os nomes de A at E, como vemos na tabela abaixo;
Tema Estilo
Tema Pado
Tema A - datatheme="a"
Tema B - datatheme="b"
Tema C- data-theme="c"
68
Tema D - datatheme="d"
Tema E - data-theme="e"
Alm destes temas podemos utilizar o ThemeRoller, no link http://jquerymobile.com/themeroller/ onde podemos criar customizar um estilo para as nossas pginas, na imagem abaixo vemos a ferramenta do link anterior.
Figura 15 - Ferramenta ThemeRoller
3.10.1. Eventos.
No JavaScript, ao usar o jQuery, possvel fazer referncia ao objeto jQuery em si como $ e obter acesso aos recursos do jQuery. A estrutura jQuery Mobile, que amplia o ncleo do jQuery, est disponvel por meio do $.mobile, que tambm d acesso aos eventos e mtodos especficos do jQuery Mobile.
69
Assim como acontece com outros eventos do jQuery, os eventos do jQuery Mobile so ligados usando as funes live() e bind() . Por exemplo, os eventos de toque incluem dar um toque, dar um toque e manter e vrios eventos de deslizar os dedos e de mouse virtual. possvel ligar a mudanas de orientao e eventos de rolagem, como scrollstart e scrollstop. Os eventos de pgina permitem receber notificaes:

Antes da criao de uma pgina Quando uma pgina criada Logo antes de mostrar ou ocultar uma pgina Quando uma pgina mostrada e ocultada Abaixo tipos de eventos: tap/clica taphold/clica-segura swipe/clica-arrasta swipeleft/clica-arrasta-esquerda swiperight/clica-arrasta-direita
Mais exemplos e informaes disponveis na documentao da biblioteca, no link http://jquerymobile.com/demos/1.0rc1/docs/api/events.html. Exemplo: Criamos uma pgina para simular alguns eventos, abaixo passo para o desenvolvimento deste exemplo. 1 passo: Cria uma pgina na estrutura JqueryMobile, como foi feito na aula inicial deste contedo.
2 passo: Adicionar os scripts jquery e jquery.mobile e o estilo css, caso no tenha feito ainda, lembre-se que o caminho dos scripts no diretrio raiz do seu site.
3 passo: Criar alguns atributos css personalizados para aplicar no texto que ser exibido, este estilo criado na tag <head>, como feito em aulas anteriores.
70
4 passo: Criar script para os eventos utilizados, este ser um script externo em JavaScript, tambm pode ser feito na prpria pgina, mais optei por fazer uma chamada externa para ficar mais organizado.
Linha 1: os eventos sero aplicados no atributo #home, que dever ser o mesmo nome do id da <div data-role=Page , carregados par a funo no evento live("pageinit" ). Linha 2: declarar uma varivel texto contendo o texto e algumas tag HTML, para serem inseridos dentro da div eventos. Nas outras linhas, quando os eventos especificados ocorrerem ser mostrado o contedo da varivel texto referente ao evento usado, no se esquea de depois do script feito adicion-lo na pagina.
5 passo: Estrutura da pgina, a diferena desta para a da estrutura inicial ; A identificao da div Page com o id=home, e a criao da div com o id=eventos, onde ocorrera os eventos.
3.10.2. Mtodos e utilidades.

No Jquery mobile podemos utilizar alguns mtodos da prpria API, ou criar funes prprias com base em eventos e mtodos da API jquery, abaixo temos uma tabela com alguns mtodos da API JqueryMobile.
Tabela 1 - Mtodos do jQuery Mobile
Mtodo $.mobile.changePage
Uso Para passar por meio de programao de uma pgina a outra. Por exemplo, para acessar a pgina teste.php usando uma transio de slide, use $.mobile.changePage("teste.php", "slide"). $.mobile.loadPage Para carregar uma pgina externa. $.mobile.showPageLoadingMsg Para mostrar a mensagem de carregamento de pgina. $.mobile.hidePageLoadingMsg Para ocultar a mensagem de carregamento de pgina. $.mobile.path.isSameDomain Um mtodo utilitrio para comparar o domnio de duas URLs. $.mobile.activePage Uma referncia pgina que est em visualizao no momento. Mais informaes e outros exemplos podem ser consultados no link: http://api.jquery.com/
72
Exemplo: Neste exemplo vamos passar de uma pgina para outra usando o mtodo $.mobile.changePage, passando um tipo de transio.
1 passo: Criar a pgina principal, uma segunda e a terceira pgina, depois adicionar os scripts e o estilo css do jquery.mobile.
2 passo: Script dentro da tag <head> na pgina principal.
Linha 16: Definimos que o evento ser aplicado no atributo #um, que ser o id da div page da pgina principal. O evento usado o pageinit, na inicializao da pgina. Linha 18: Usamos o mtodo changePage e passamos como argumento a pgina que ser chamada, na linha 19 o efeito de transio usado. 3 passo: Estrutura da pgina principal, as tags <a> recebem o id p2 e p3, correspondente aos atributos criados no script no inicio da pgina, o passo anterior.
73
Transies baseadas em CSS No exemplo anterior usamos algumas transies na chamada de algumas pginas, na tabela abaixo temos outros efeitos de transio. As transies podem ser utilizadas na passagem de pgina dentro dos atributos de pgina, nas prximas aulas usaremos algumas. Transio fade pop flip turn flow slide slideup slidedown none Uso Efeito de transio fade in/fade out Efeito de transio pop Efeito de transio de inverso Efeito de transio de giro Efeito de transio de fluxo (semelhante ao slide) Efeito de transio de slide (horizontal) Mostra a pgina ou dilogo deslizando de baixo para cima na pgina Mostra a pgina ou dilogo deslizando de cima para baixo na pgina Sem efeito de transio
Tabela 2- Transies baseadas em CSS
3.10.3. Widgets.
O atributo data-role usado para definir os diversos widgets. Entretanto, nem todos os widgets da UI so acionados pelo atributo data-role, abaixo vamos conhecer alguns widgets. Boto (button) Este widget um boto bsico, iniciado na tag <a> e passados os atributos do Jquery Mobile, podendo usar cones e temas da biblioteca.
Figura 16 - Widget button
74
O atributo data-icon pode ser referenciado para criar os cones mostrados abaixo:
Entrada de texto (input) Para usar este widget basta usar a tag<input> normalmente assim como no HTML, bastando os scripts e o estilo terem sido adicionados na pgina.
Dialogo (dialog) Este widget exibe uma caixa de dialogo, como mostrado na imagem abaixo.
75
Vamos criar uma pgina na estrutura bsica do JqueryMobile, na linha 22 adicionamos a tag <a> nela passamos a pgina que ser chamada dentro do dialogo, para este exemplo crie uma pgina chamada teste.html com uma estrutura bsica JqueryMobile e digite uma mensagem de boas vindas.
Nesta mesma linha adicionado o atributo data-rel, onde pode ser passado o valor dialog ou popup, em outro atributo o data transition ser responsvel pelo efeito de transio. Lista (listview) As listas de visualizao(ListView) utilizam o atributo data-role, elas podem ter o formato quadrado como na imagem abaixo, para tornar cantos arredondados utiliza o atributo datainset="true.
Figura 18 - ListView com data-inset=false
Figura 17 - ListView com data-inset=true
Exemplo: Listview. Linha 29: Adicionar o atributo data-role=listview.
76
Lista redutvel Este widget usamos o atributo data-role=collapsible, para utiliz-lo devemos criar uma div e nela aplicar o atributo, para definir o que ser o ttulo da lista use a tag <h3>
CheckBox Este widget no precisa do atributo data-role, basta ser inserido na pgina de contedo, como mostrado no cdigo abaixo.
Boto de opes Neste exemplo criamos inputs do tipo radio, como feito em HTML, e colocamos o atributo data-role=controlgroup, o restante do cdigo so tags em HTML.
77
Abaixo cdigo da estrutura da pgina.
Fomulrios (form) Vamos agora criar um formulrio de contato, nesta aula vamos utilizar a linguagem PHP junto com o JqueryMobile, o resultado final desta aula mostrado na imagem abaixo.
1 passo: Criar duas pginas uma vai ser o formulrio de contato form_contatos.php, outra para apresentar os dados dados_contato.php, inicialmente criaremos duas pginas com a estrutura bsica para JqueryMobile. No formulrio de contato podemse adicionar os elementos como na imagem abaixo, no outro sero enviadas as informaes via cdigo PHP.
78
2 passo: Formulrios de contato, nesta pgina deveram dar uma ateno especial para o nome dos elementos. Linha 22: Na tag <form> estamos definindo qual ser o action do formulrio, ou seja sua ao, o arquivo dados_contato.php ser responsvel por exibir em uma nova pgina os dados digitados no formulrio. Depois definimos o mtodo post, onde os dados que esto sendo enviados sero mostrados na pgina.
3 passo: A pgina que receber os dados do contato.
Este trecho de cdigo do arquivo dados_contato.php, ser responsvel por pegar o valor dos inputs do formulrio atravs do mtodo post. Nesta pgina o trecho em PHP foi inserido na tag de contedo como apresentada na imagem acima. Na linha 26 temos a instruo echo que gera a escrita na pgina com o contedo que esta sendo passado, dentro das aspas simples passo tags HTML para estruturar a pgina e apresentar o resultado como na imagem abaixo. Definimos a varivel $nome que vai receber $_POST[nome], onde $_POST representa obviamente o mtodo que esta sendo passado, o qual foi definido no formulrio, o valor nome representa o nome do input que esta no formulrio.
79
A seguir temos alguns exemplos de pginas usando o JqueryMobile.
Exerccio Prtico
1) Criar um formulrio aplicando os widgets aprendidos, com a transio de pginas. 2) Criar um formulrio de cadastro de contatos. 3) Formulrio de cadastro de cliente.
3.10.4. Twitter
Nesta aula iremos desenvolver uma pagina para receber as atualizaes do Twitter, utilizaremos Jquery plugin twitter que se encontra no link http://coda.co.za/content/projects/jquery.twitter/ Desenvolvido por Damien du Toit, clique no link download para baixar o arquivo compactado com os scripts que iremos utilizar, depois descompacte-o e coloque em um diretrio do raiz do seu site ou em um diretrio, neste exemplo criamos o diretrio tw.
80
Na imagem abaixo vemos os scripts que utilizaremos nesta prtica, nas linhas 17 e 18 temos o script do plugin para Twitter e a folha de estilo, os outros scripts j so utilizados na estrutura bsica de nossas pginas em aulas anteriores.
Na <head> vamos criar a funo carregar_tw(), neste script defino na linha 25 a marcao #twitter vai pegar as atualizaes do twitter, a propriedade username na linha 26 recebe o nome do twitter, neste exemplo usamos o do g1. As linhas 28 e 31 definem o texto que ser apresentado quando estiver carregando as atualizaes do twitter, e o texto do cabealho da rea onde sero mostradas as atualizaes. Estrutura da pgina Em nossa pgina na estrutura HTML s precisamos na tag <body> usar o evento onload e chamar a funo carregar_tw(), que criamos anteriormente.
3.10.5. Geolocalizao.
Nesta aula vamos fazer uma pgina usando a API do Google para geolocalizao, no link https://code.google.com/p/jquery-ui-map/, podemos obter vrios outros exemplos e baixar os arquivos que sero utilizados neste exemplo, este plugin pode ser usado para Jquery e JqueryMobile. Na imagem ao lado temos o resultado final desta prtica, este exemplo bem simples e especialmente utilizado para iniciantes, no site do projeto obtemos toda a documentao do plugin, ento vamos iniciar.
81
Clique em Download the plugin with examples, para baixar o plugin, conforme a imagem abaixo.
Neste exemplo vamos baixar o arquivo zip da verso 3 (jquery-ui-map-3.0rc.zip). Aps o download descompacte o arquivo no raiz do seu projeto, ou onde preferir.
Agora vamos chamar os arquivos baixados do site. Na linha 12 estou chamando o script responsvel pela API bsica e passo como parmetro a ativao do sensor, neste caso esta ativado, pois nossa pgina ser acessada tanto em desktops como em dispositivos mveis, este exemplo precisa de internet para carregar o Google Maps. Na linha 19 estou chamando o script responsvel pelas funes que o plugin implementa, como localizar por coordenadas, nvel de zoom e outras.
82
Script Este script foi escrito dentro da tag <head>, nele declaramos a varivel LatLng onde ser armazenada as informaes de latitude e longitude, atravs dela que na imagem abaixo encontra-se na linha 26, a API retorna o mapa baseado nas coordenadas, o formato de coordenadas esta decimal,mas podem ser convertidas em varias formas de apresentao no site http://www.sunearthtools.com/dp/tools/conversion.php?lang=pt, encontra-se uma ferramenta que alem de pegar as coordenadas ainda apresenta a converso em vrios formatos. Na linha 27 criamos a marcao #map_canvas que ser usado para mostrar o mapa.
Estrutura da pgina Como vemos na imagem abaixo para carregar o mapa em nossa pgina, neste exemplo criamos uma div onde ser carregado o mapa na linha 42 fazemos a referncia ao atributo map-canvas que foi criado na <head> no script anterior, e com a propriedade style passamos o tamanho da rea do mapa.
83
No site esta disponvel a documentao completa do plugin http://code.google.com/p/jquery-uimap/wiki/jquery_ui_map_v_3_api Outros exemplos podem ser encontrados no link http://jquery-uimap.googlecode.com/svn/trunk/demos/jquery-google-maps-mobile.html
4.
Formulrios web.
Nesta aula vamos desenvolver formulrios para aplicarmos os efeitos aprendidos em aulas anteriores. Para criamos formulrios usamos a tag <form></form>, nela podemos usar alguns atributos, por exemplo, action, method e id, no atributo method vo ser passados o mtodo get ou post, no action uma ao que ser executada pelo formulrio quando o mesmo enviar as informaes para o servidor, este dois pontos abordamos no inicio da aula 2 Introduo ao PHP e ser aprofundado no prximo semestre como o PHP, e nesta aula iremos criar formulrios que sero utilizados no prximo semestre com diversas funcionalidades.
4.1.
Formulrio de cadastro de clientes.
Nesta aula vamos criar um formulrio de cadastro e enviar os dados via mtodo post, abaixo imagem de como ficara o nosso formulrio.
84
Para este formulrio criaremos um arquivo form_cli com a extenso *.php, quando o usurio preencher os campos neste formulrio e salvar ser chamado um outro arquivo, dados_cli.php, ser neste arquivo onde enviaremos os dados do form_cli para serem exibidos. Folha de estilo Nesta etapa do curso j sabemos manipular bem a folha de estilo css, ento criaremos o arquivo css separado e faremos o link dentro da tag <head> para que quando a pagina for carregada seja carregada a formatao do formulrio.
85
Desta forma iremos chamar a nossa folha de estilo dentro da <head>. <linkhref="../css/estilo_form.css" rel="stylesheet"> Estrutura da pgina Como j temos conhecimento sobre as tag HTML, vamos aborda apenas alguns pontos importantes da estrutura da pgina.
Linha 15: Na tag <form> estamos definindo qual ser o action do formulrio, o arquivo dados_cli.php ser responsvel por exibir em uma nova pgina os dados digitados no formulrio. Depois definimos o mtodo post, responsvel por enviar os dados. Como utilizamos o post os dados no sero mostrados na URL. E por ltimo definimos o id do formulrio que a identificao do mesmo. Linha 18: Na tag <span> adicionamos a propriedade form_cli que foi criada em nossa folha de estilo. Linha 23: Na tag <div> fazemos a formatao do cabealho do formulrio que tambm vem da nossa folha de estilo criado anteriormente.
86
Arquivo dados_cli.php
Este trecho de cdigo do arquivo dados_cli.php, ser responsvel por pegar o valor dos inputs do formulrio pelo mtodo post. Neste arquivo a nica coisa que foi digitada nela esta apresentada na imagem acima. Na linha 3: Temos a instruo echo que gera a escrita na pgina com o contedo que esta sendo passado, dentro das aspas simples passo tags HTML para estruturar a pgina e apresentar o resultado como na imagem abaixo. Definimos a varivel $nome que vai receber $_POST[nome], onde $_POST representa obviamente o mtodo que esta sendo passado, o qual foi definido no formulrio, o valor nome representa o nome do input que esta no formulrio, logo se quisermos passar valores por meio dos mtodos get ou post utilizo $_POST[nome do objeto do formulrio] ou $_GET[nome do objeto do formulrio].
Este ser o resultado final do nosso formulrio.
Exerccio Prtico
1) Criar um efeito zebrado em uma tabela, com os dados de modelo do carro e suas caractersticas, usando a biblioteca Jquery. 2) Criar um formulrio de cadastro de notas, para ler 3 notas e apresentar a mdia.
87
4.2.
Formulrio de Contato.
Nesta aula iremos desenvolver um formulrio de contato, usado para o internauta entrar em contato com o administrador do site, iremos utilizar PHP para validao do email, JavaScript e folha de estilos. Para isso iremos construir este formulrio com algumas funes so estas; Campo formatado, adicionado uma mascara no campo de telefone. Incluir folha de estilo CSS. Validando o campo email para que o usurio informe o email de forma correta.
O resultado final desta pratica ser como na imagem abaixo;
Figura 19 - Formulrio de Contatos
A folha de estilo ser a mesma utilizada na aula anterior, nesta aula o principal objetivo ser trabalhar com validao de campos e mascara de formato, por exemplo, o formato do telefone. Iremos iniciar com o script em JavaScript criado na tag <head>, observe que usamos uma estrutura de deciso em JavaScript que aprendemos em aulas anteriores, temos uma funo chamada Mascara que recebe um objeto, depois testa a igualdade do valor do objeto, este objeto ser o campo que receber o formato.
88
Abaixo na estrutura html iremos aplicar o nosso script, no evento onKeypress fao a chamada da funo Mascara(this), o this indica que ser aplicado neste objeto no caso o input.
Agora vamos fazer a validao do email, para evitar que o usurio informe um email errado. Na tag <form> definimos o action o arquivo valida_email.php que ser chamado na ao deste formulrio, agora no method usamos o mtodo get, e a identificao do nosso formulrio na propriedade id.
Escrevendo o valida_email.php Neste exemplo usamos uma funo nativa do php a filter_var, que pode ser usada para validar diversas coisas, nela adcionamos o filtro de email atraves da propriedade FILTER_VALIDATE_EMAIL.
Nas linhas 5 e 8 usamos funo require que far uma requisio de pgina, em nosso exemplo chamar o form_contato.php que o formulario de onde vieram o email para validar, fazendo com que seja exibido a mensagem de email valido ou invalido abaixo do formulario, como mostrado na imagem seguinte.
89
Exerccio Prtico
1) No formulrio de contato desenvolvido em sala de aula adicione as legendas tooltips com jquery, para os campos. 2) Desenvolver uma pgina de contatos com JqueryMobile.
3) Crie outra pgina para enviar os dados cadastrados no formulrio de contatos.
4) Crie um formulrio em PHP que receba a altura e o sexo de uma pessoa, calcule e imprima o seu peso ideal, utilizando as seguintes frmulas: para homens: (72.7 * H) - 58 para mulheres: (62.1 * H) 44.7
5.
Estudos de Caso
Caro Aluno (a),
Nesta aula iremos praticar usando os conhecimentos aprendidos, o objetivo de trabalhar com estudos de caso, trazer aos alunos vivncia de uma situao real no desenvolvimento web. Os dois estudos apresentados sero continuados na disciplina de PHP/MySql no prximo semestre, nesta etapa iremos trabalhar a leitura e a discusso de como resolver uma situao problema. Sero desenvolvidos nesta fase projetos grficos com algumas interaes, para que na prxima disciplina iremos utilizar estes exemplos para realizar a integrao com o banco de dados e outras prticas.
90
5.1.
Carrinho de compras.
Um empresrio observando o crescimento da internet e a possibilidade de fechar negcios convocou uma equipe para desenvolver um prottipo de uma loja virtual, aps a aprovao do empresrio a equipe ter acesso ao servidor da empresa para implantar o banco de dados e hospedar o site. Em uma reunio foram discutidos alguns pontos; A loja virtual em sua pgina inicial dever apresentar uma vitrine com as principais ofertas, de onde o usurio poderia visualizar e ao selecionar algum produto mostrar o produto e outras ofertas. Os produtos desta empresa so divididos por categoria, quando o cliente selecionar alguma categoria ser exibido todos os produtos referentes quela categoria. Quando o cliente visualizar na pgina um produto o mesmo poder compr-lo ou adicion-lo em um carrinho de compras para depois escolher o que ira comprar ou descartar, ao adicionar no seu carrinho de compras o produto no ser dada baixa no estoque, somente quando a compra for efetivada que ser dada baixa no estoque. Para melhor conhecer o cliente e melhor controle o cliente deve se cadastrar na loja virtual, para o mesmo visualizar os seus pedidos e ofertas especiais para o cliente. A loja virtual oferece vrios meios de pagamento para o cliente.
O tipo de produto que ser vendido na loja virtual depende da equipe, o empresrio ir investir na melhor proposta.
5.2.
Chat de atendimento.
Um empresrio sentindo a necessidade de uma melhor comunicao com seus clientes para tirar dvidas. Requisitou a uma equipe de desenvolvedores a criao de um prottipo de um chat de atendimento a clientes dentro de um site, para o prprio cliente tirar duvidas com relao aos produtos ou servios oferecidos pela empresa. Para este contado com um atendente o cliente necessrio um cadastro para ser direcionado ao ambiente do chat. Com relao ao horrio de funcionamento do atendimento ficou estabelecido que fosse de 7:00 horas da manh at as 12:00h e de 13:00h as 18:00h, quando o chat estiver fora do horrio de atendimento dever ser exibido um cone que o mesmo esta off-line.
91
O empresrio pediu que fosse apresentada tambm uma verso para dispositivos moveis do site para uma aprovao do site em uma nova plataforma.
Referncias Bibliogrficas
Niederauer, J. Web Interativa com Ajax e PHP. Novatec. Silva, M. S. JQuery A Biblioteca Almeida, R. S. Php Para Iniciantes. CIENCIA MODERNA. Bibeault, B., & Katz, Y. Jquery em Ao. Alta Books . Dalloglio, P. Php - Programando com Orientao a Objetos - 2 Ed. 2009. NOVATEC. http://jquerymobile.com/demos/1.0rc1/docs/api/events.html. (s.d.). Acesso em 13 de 11 de 2012, disponvel em jquerymobile: http://jquerymobile.com/demos/1.0rc1/docs/api/events.html. http://jquerymobile.com/demos/1.2.0/docs/pages/index.html. (s.d.). Acesso em 20 de 11 de 2012, disponvel em jquerymobile: http://jquerymobile.com Legnstorf, J. Pro Php e Jquery. Php Para Iniciantes. Morrison, M. Use a Cabea Javascript. Alta Books . Powers, S. Aprendendo Javascript. Novatec. Rutter, J. Smashing Jquery - Interatividade Avanada Com Javascript Simples. Bookman. Silva, M. S. Javascript - Guia do Programador. Novatec. Silva, M. S. jQuery Mobile Desenvolva aplicaes web para dispositivos mveis. Novatec. Silva, M. S. Jquery Ui - Componentes de Interface Rica Para Suas Aplicaes Web. Novatec . do Programador JavaScript. Novatec.
92
ndice de Ilustraes
Figura 1 - Estrutura JavaScript ......................................................................................................................... 10 Figura 2 - Declarao de variveis ..................................................................................................................11 Figura 3 - Visualizao da pgina para calcular IMC .............................................................................................. 23 Figura 4 - Script em JavaScript ........................................................................................................................ 27 Figura 5 - Estrutura HTML, chamando script. ................................................................................................ 27 Figura 6 - Tag inicial do PHP .................................................................................................................................. 29 Figura 7 - Tag PHP dentro do HTML ......................................................................................................................29 Figura 8 - Enviando dados ao servidor ...........................................................................................................31 Figura 9 - Declarao de Variveis ..................................................................................................................35 Figura 10 - Exemplo de uma constante ..........................................................................................................36 Figura 11 - Sintaxe de uma funo ..................................................................................................................45 Figura 12 - resultado gerado pela funo var_dump .................................................................................... 49 Figura 13 - Site Jquery....................................................................................................................................... 51 Figura 14 - Estrutura bsica de uma pgina no JqueryMobile .............................................................................. 66 Figura 15 - Ferramenta ThemeRoller ..............................................................................................................69 Figura 16 - Widget button .................................................................................................................................. 74 Figura 17 - ListView com data-inset=true..............................................................................................................76 Figura 18 - ListView com data-inset=false .............................................................................................................76 Figura 19 - Formulrio de Contatos .................................................................................................................88
93
Hino Nacional
Ouviram do Ipiranga as margens plcidas De um povo herico o brado retumbante, E o sol da liberdade, em raios flgidos, Brilhou no cu da ptria nesse instante. Se o penhor dessa igualdade Conseguimos conquistar com brao forte, Em teu seio, liberdade, Desafia o nosso peito a prpria morte! Ptria amada, Idolatrada, Salve! Salve! Brasil, um sonho intenso, um raio vvido De amor e de esperana terra desce, Se em teu formoso cu, risonho e lmpido, A imagem do Cruzeiro resplandece. Gigante pela prpria natureza, s belo, s forte, impvido colosso, E o teu futuro espelha essa grandeza. Terra adorada, Entre outras mil, s tu, Brasil, Ptria amada! Dos filhos deste solo s me gentil, Ptria amada,Brasil! Deitado eternamente em bero esplndido, Ao som do mar e luz do cu profundo, Fulguras, Brasil, floro da Amrica, Iluminado ao sol do Novo Mundo! Do que a terra, mais garrida, Teus risonhos, lindos campos tm mais flores; "Nossos bosques tm mais vida", "Nossa vida" no teu seio "mais amores." Ptria amada, Idolatrada, Salve! Salve! Brasil, de amor eterno seja smbolo O lbaro que ostentas estrelado, E diga o verde-louro dessa flmula - "Paz no futuro e glria no passado." Mas, se ergues da justia a clava forte, Vers que um filho teu no foge luta, Nem teme, quem te adora, a prpria morte. Terra adorada, Entre outras mil, s tu, Brasil, Ptria amada! Dos filhos deste solo s me gentil, Ptria amada, Brasil!
Hino do Estado do Cear

Poesia de Thomaz Lopes Msica de Alberto Nepomuceno Terra do sol, do amor, terra da luz! Soa o clarim que tua glria conta! Terra, o teu nome a fama aos cus remonta Em claro que seduz! Nome que brilha esplndido luzeiro Nos fulvos braos de ouro do cruzeiro! Mudem-se em flor as pedras dos caminhos! Chuvas de prata rolem das estrelas... E despertando, deslumbrada, ao v-las Ressoa a voz dos ninhos... H de florar nas rosas e nos cravos Rubros o sangue ardente dos escravos. Seja teu verbo a voz do corao, Verbo de paz e amor do Sul ao Norte! Ruja teu peito em luta contra a morte, Acordando a amplido. Peito que deu alvio a quem sofria E foi o sol iluminando o dia! Tua jangada afoita enfune o pano! Vento feliz conduza a vela ousada! Que importa que no seu barco seja um nada Na vastido do oceano, Se proa vo heris e marinheiros E vo no peito coraes guerreiros? Se, ns te amamos, em aventuras e mgoas! Porque esse cho que embebe a gua dos rios H de florar em meses, nos estios E bosques, pelas guas! Selvas e rios, serras e florestas Brotem no solo em rumorosas festas! Abra-se ao vento o teu pendo natal Sobre as revoltas guas dos teus mares! E desfraldado diga aos cus e aos mares A vitria imortal! Que foi de sangue, em guerras leais e francas, E foi na paz da cor das hstias brancas!

Manual do Aluno JavaScript e PHP

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Manual do Aluno JavaScript e PHP

Enviado por

Direitos autorais:

Formatos disponíveis

Governador Cid Ferreira Gomes Vice Governador Domingos Gomes de Aguiar Filho Secretria da Educao Maria Izolda Cela

MANUAL DO (A) ALUNO (A)

Janeiro / 2013 FORTALEZA/CEA

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

2.4.4. Operadores de Atribuio ..............................................................................................................38 Informtica - Java Script / PHP 3

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

2.4.5. 2.5. 2.5.1. 2.5.2. 2.5.3. 2.5.4. 2.6. 2.7. 3.

3.10.1. 3.10.2. 3.10.3. 3.10.4. 3.10.5. 4.

Estudos de Caso ......................................................................................................................................... 90 4

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Carrinho de compras. ......................................................................................................................... 91 Chat de atendimento. ......................................................................................................................... 91

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Vamos ver o exemplo abaixo.

Figura 1 - Estrutura JavaScript

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Figura 2 - Declarao de variveis

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

1.3.1. Operadores Matemticos

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

1.3.2. Operadores de Comparao

1.3.3. Operadores Lgicos

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

NO (NOT) Expresso ou condio, se verdadeira inverte para falsa

1.3.4. Operadores (Clculo de IMC)

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

3) Elabore um script para mostrar o consumo mdio de um automvel.

JavaScript - Estruturas de Controle.

1.4.1. Estrutura Condicional (if/else )

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

1.4.2. Estrutura Condicional (switch ).

Informtica - Java Script / PHP

Escola Estadual de Educao Profissional

Ensino Mdio Integrado a Educao Profissional

1.4.3. Estrutura de Loop (for ).

Informtica - Java Script / PHP