Tutorial JavaScript. Índice: Por: Izaias Lisboa ultima revisão: 13/02/2001
|
|
|
- Mauro Rijo Benevides
- 10 Há anos
- Visualizações:
Transcrição
1 Tutorial JavaScript Por: Izaias Lisboa ultima revisão: 13/02/ Índice: Tópico Página O que é JavaScript 2 Quais browsers suportam JavaScript 2 Iniciando 2 A tag Script 4 Introdução ao ECMAScript 4 Escrevendo no documento - Seu primeiro script 5 Operadores Operadores lógicos 6 Operadores matemáticos 6 Expressões simples com operadores 6 Variáveis & constantes 7 Usando Constantes de Strings 8 Conversões de tipos de dados 8 ParseInt e ParseFloat 9 Comandos estruturados Comando if 9 Comando for 10 Comando while 11 Comando switch 11 Objetos 12 Propriedades 13 Métodos 13 Juntado as peças 13 Eventos 14 Manipulando Strings Substring 15 Substr 15 Length 16 charart 16 indexof 16 lastindexof 16 touppercase 17 tolowercase 17 escape 17 unescape 17
2 Janelas Abrindo uma nova janela 17 Usando a função moveto com janelas 18 A propriedade opener 18 Fechando uma janela 19 Arrays (básico) 20 Improvisando Arrays de 2 dimensões 21 Sort com Arrays 22 Opções de uso de expressões condicionais 22 Opções de uso do comando for (avançado) 23 O que é JavaScript? O JavaScript é uma linguagem de programação baseada na linguagem JAVA. É destinada para o uso em páginas Web(client-side) ou em servidores web (server-side). Neste tutorial irei falar somente sobre o JavaScript em client-side, ou seja, irei falar sobre os códigos que são inseridos nas páginas HTML sendo executadas pelo browser do cliente. Esta linguagem permite ao programador ter acesso à elementos de uma página web, como imagens, elementos de um formulário links etc. Este objetos podem ser manipulados ou mudados via programação, pois o JavaScript permite também ao programador capturar eventos, como um click do mouse ou uma tecla pressionada de seu teclado. Isto lhe dá a capacidade de poder criar ações baseadas nas ações do usuário. JavaScript é em si, uma grande linguagem de programação, que oferece ao programador web muitas recursos, os quais podem ser executados facilmente. Que browsers suportam JavaScript? A Netscape foi a primeira a introduzir o JavaScript em seu browser na versão 2.0. Já a Microsoft passou a incorporar algumas recursos apenas no Internet Explorer 3.0. Ao decorrer dos tempos outros browsers também incorporaram o JavaScript, e esta linguagem foi crescendo cada vez mais e estendendo seu suporte. logo os fabricantes de browsers também deveriam ir se atualizando, mas a Microsoft para não ficar para trás inventou um tal de JScript ( que na verdade é a mesma linguagem que o JavaScript, porém com alguns recursos adicionais, o que gerou incompatibilidade da linguagem entre os browsers, como por exemplo a propriedade document.all, que traz grandes problemas para programadores em JavaScript, porque ela não existe no Netscape, somente no Internet Explorer...coisa do JScript e da Microsoft. Iniciando... Neste passo vamos inserir os códigos JavaScript em um documento HTML. Antes de você começar a mexer nos códigos do JavaScript, você precisa saber algumas regras e sintaxes básicas sobre a linguagem. Para usar JavaScript em suas páginas, você precisa saber primeiro onde coloca-los. Para inserir seus scripts em um documento HTML você precisará coloca-los entre as tags <Script> e
3 , ficando mais ou menos assim: <Script> comandos... Mas você pode também usar seus códigos em arquivos externos e usar o atributo SRC=, mas lembre-se que sempre que você colocar seus códigos em arquivos externos você precisará nomea-los com a extensão.js exemplo : <SCRIPT SRC= meucodigo.js ></SCRIPT> E onde colocar estas tags <Script>? Bem, estas tags podem ser colocadas em qualquer lugar de seu documento HTML, ou, de acordo com sua necessidade. Se você necessita que seu código JavaScript seja interpretado antes que seu código HTML, você deve colocar as tags <Script> dentro do cabeçalho das páginas HTML que são as tags <HEAD> e </HEAD>. Mas em apenas alguns casos isso é necessário, no começo de seu aprendizado, com certeza não será necessário colocar as tags dentro dos cabeçalhos HTML, mas é bom saber desde o início, que quando seu código JavaScript ali está(<head></head>), será lido antes que tudo. A tag SCRIPT A tag <Script> pode também especificar qual é a versão do JavaScript a ser usada, através do atributo LANGUAGE=. O que vai neste atributo pode ser apenas o comum JavaScript, JavaScript1.1, JavaScript1.2. A maioria dos browsers irão ignorar qualquer Script que ele não reconheça ou não suporte. Isto permite à você separar os scripts para diferentes versões de browsers. esta lista abaixo irá mostrar as versões do JavaScript suportadas por diferentes versões do Netscape. JavaScript - Netscape 2.0 JavaScript1.1 - Netscape 3.0 JavaScript1.2 - Netscape JavaScript1.3 - Netscape x JavaScript A Netscape não referencia nenhum navegador para esta versão. JavaScript Netscape Mozilla (open source browser) Então quando um browser do Netscape em sua versão 2.0 ler o código <SCRIPT LANGUAGE= JavaScript1.2 > comandos... </SCRIPT> ele irá ignorara tudo, pois não entenderá nem suportará aquela versão do JavaScript, portanto o Netscape 4.0 ou superior irá executar o código normalmente. Para ver mais sobre este detalhe, use o Netscapes JavaScript Reference < (documentação em idioma inglês).. A sintaxe do JavaScript, é similar a sintaxe do C/C++ e do JAVA, para uma referência maior sobre as sintaxes visite Netscapes JavaScript Reference < ou Microsoft s JScript Reference < Lá você poderá encontrar um artigo muito extenso e rico para leitura, cheio de coisas que você poderá utilizar muito, e você pode também fazer o download desses artigos no formato.exe, que eu disponibilizo também em < Introdução ao ECMAScript ECMAScript provêm de: European Computer Manufacturers Association. Em 1996 os desenvolvedores web começaram a reclamar que a Netscape estava indo em uma direção com o JavaScript e a Microsoft se encaminhava em uma direção de certa forma compatível, mas diferente com o JScript. Ninguém gosta de ter que codificar páginas que manipulem dialetos diferentes do JavaScript, ou que
4 tenham seu código funcionando em um navegador, mas não em outro. Em resumo, os desenvolvedores queriam um padrão. Assim a Netscape foi até um corpo internacional de padrões chamado ECMA e submeteu a eles a especificação da linguagem JavaScript, enquanto a Microsoft apresentava seus próprios comentários e sugestões. A ECMA fez o que costumam fazer os corpos de padrões e, em junho de 1997, produziu um padrão chamado ECMA-262 (também conhecido como ECMAScript). Veja abaixo uma pequena tabela com versões e suas compatibilidades no JavaScript. Versão do JavaScript Relacionamento com a versão do ECMA JavaScript 1.1 ECMA-262, Edição 1 é baseada no JavaScript 1.1. JavaScript 1.2 O JavaScript 1.2 não é completamente compatível com o ECMA-262, Edição 1,e uma das razões disso, se dá ao fato de que a Netscape desenvolveu recursos adicionais no JavaScript 1.2 que não foram considerados pelo ECMA-262. JavaScript 1.3 JavaScript 1.3 é completamente compatível com o ECMA-262, Edição 1. JavaScript 1.4 JavaScript 1. 4 é completamente compatível com o ECMA-262, Edição 1. JavaScript 1.5 JavaScript 1.5 é completamente compatível com o ECMA-262, Edição 3. Se estiver interessado em ler a especificação completa do ECMAScript, poderá fazer o download no formato PDF, usando este link < ( O fato é que, desde que você escreva seu código compatível como ECMAScript, ele deverá funcionar muito bem no Internet Explorer, e provavelmente no Netscape Navigator versões 4.0 e superiores, porém é recomendável testar o código em diferentes navegadores e plataformas. Escrevendo no documento - Seu primeiro script (document.write) A função Document.Write do Java Script, é muito importante para nossa programação, sendo muito simples de usar. A sintaxe básica é: <Script> document.write ( Hello world ); O ideal, durante este tutorial, é estar testando todos os scripts mostrados, para que assim, você entenda o que irá acontecer quando usarmos cada função. Apesar da simples facilidade de escrever no documento, há alguns pequenos enganos que não devemos cometer para que a programação funcione perfeitamente. Para detalhar este comentário vamos fazer o seguinte exemplo : Teste o código abaixo em seu browser : <!-- ** código 1 ** - - > <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN > <html> <head> <title>untitled</title> </head> <body> <Script Language=JavaScript> var browsername browsername = navigator.appname; document.write seu browser é + browsername; </body> </html> Não funcionou nada não é mesmo? tudo bem, agora teste este outro código abaixo : <!-- ** código 2 ** - - >
5 <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN > <html> <head> <title>untitled</title> </head> <body> <Script Language=JavaScript> var browsername browsername = navigator.appname; document.write ( seu browser é + browsername); </body> </html> Bom, como podemos observar no código 1 nossa string (texto) e nossa variável, estão fora de um parênteses, ao contrário do código 2, uma diferença de código tão simples que faz com que um Script funcione e o outro não, então é sempre bom lembrar desta pequena dica, use sempre parênteses em seu document.write do Java Script, mesmo se o conteúdo à ser exibido for uma string ou uma variável, sempre use os parênteses! Outra coisa que é bom ser lembrada, é que o ponto e vírgula deve ser fora de seu parênteses, ou seja, indicando que é um final de uma instrução. Para Ter melhores noções, e uma breve dica sobre o ponto e vírgula no JavaScript clique aqui. Operadores Operadores lógicos São operadores que normalmente são utilizados em comandos condicionais, assim como: IF, FOR e WHILE. Estes comandos condicionais serão vistos mais adiante em nosso tutorial. = = Igual!= Diferente > Maior >= Maior ou Igual < Menor <= Menor ou Igual && E Ou Operadores Matemáticos + este operador serve para adição de valores e ao mesmo tempo, no JavaScript, este operador pode ser usado na concatenação de strings. (concatenação = junção ou união) exemplo: Izaias + Lisboa //retornaria Izaias Lisboa - utilizado na subtração de valores * utilizado em multiplicação de valores / utilizado para divisão de valores
6 % obtém o resto de uma divisão: Exemplo: 150 % 13 retornará 7 7 % 3 retornará 1 Expressões Simples com operadores += concatena /adiciona ao string/valor já existente. Ou seja: x += y é o mesmo que x = x + y, da mesma forma podem ser utilizados: -=, *=, /= ou %= A maioria das sintaxes e expressões usadas em C/C++ e JAVA, são suportadas pelo JavaScript para exemplificar vou descrever expressões válidas: total += 4; i++; Na primeira linha do exemplo acima, significa que quando temos numa variável já declarada com um var um valor, podemos usar += para adicionar um valor à esta variável, ou seja, quando dizemos: total +=4; Estaríamos dizendo para o compilador: Tome o valor de total e acrescente mais quatro à este valor. Logo se total for igual à 3, então total passará a valer 7, pois três acrescido de 4 resultam em 7. O mesmo é válido para outras expressões assim como: <Script> subtotal = 10; total += subtotal; // tome o valor de total a acrescente á ele subtotal Na segunda linha do exemplo acima usamos i++; o que significa que estamos pedindo para que tome o valor de i e acrescente um (1) à ele. Se usarmos sempre esta dica de dizer tome o valor de X e acrescente Y à ele, iremos intender qualquer código perfeitamente. È realmente uma dica muito útil, sempre que você ler estas expressões, leia-as desta maneira, e compreenderás muito facilmente. Variáveis & Constantes Esta é uma importante parte para se aprender. No JavaScript use a palavra var para declarar suas variáveis, podendo ela ser de qualquer tamanho, conter números, dígitos e underscores/underlines ( _ ). Uma variável pode ser chamada de um identificador. Um identificador JavaScript deve iniciar com uma letra, underscore (_), ou sinal de dólar ($); caracteres subseqüentes podem ser também dígitos de zero à nove (0-9). Por causa do JavaScript ser case sensitive, letras incluindo os caracteres "A" até "Z" (maiúsculo) e caracteres "a" até "z" (minúsculo), também pode ser um identificador. Inciando no JavaScript com JavaScript 1.5, você pode usar letras ISO ou letras Unicode assim como å e ü, para serem um identificador. Você pode também usar as \uxxxx seqüências de Unicode escape listadas na página 34 de caracteres e identificadores do documento oficial do JavaScript versão 1.5 Exemplo de declaração de um identificador: var calculo_diferencial; Note que o JavaScript é case-sensitive nomes como conta_total e Conta_total referem-se à diferentes variáveis. Variáveis declaradas fora de uma função, ficam sendo como globais, podendo estas serem acessadas por qualquer lugar do Script ou por qualquer função. Observe que a palavra var é opcional fora das funções, mas é requerida se você quer atribuir um valor ao uma variável que não está definida, portanto, é recomendável, para que não se obtenha erros estranhos, declarar-se sempre todas as variáveis. Por exemplo:
7 Se a variável que não teve um valor atribuído á ela foi declarada sem o var, a avaliação dela retorna em um runtime error (erro de execução). Se a variável não atribuída, foi declarada com um var, a avaliação dela resulta em um valor, ou NaN em contexto numérico, portanto não mostra nenhuma mensagem de erro. O seguinte código mostra um exemplo de variáveis que não tiveram nenhum valor atribuído à elas e foram ou não declaradas com um var. function f1() { return y - 2; f1() //Causa um runtime error function f2() { return var y - 2; f2() //retorna NaN, e não cause um runtime error As constantes, têm a mesma função das variáveis, porém um valore de uma constante não pode ser alterado, apenas isso que diferencia-a de uma variável. Para se declarar constantes usa-se : const maximo=10; Nota: Você não pode declarar uma constante dentro do escopo de uma função, e também não pode declarar uma constante com o nome de uma variável. Tendo isso em mente veja os códigos abaixo que resultarão em erro: //ISTO IRÁ CAUSAR UM ERRO! function f{; const f = 5; //ISTO IRÁ CAUSAR UM ERRO TAMBÉM! function f{ const g=5; var g; ATENÇÂO: você só poderá usar constantes no JavaScript 1.5, pois isso é uma inovação desta versão do JavaScript. Caso tente usar o comando const para declarar uma constante usando JavaScript 1.4 e anteriores, ocorrerá uma mensagem de erro de sintaxe. Usando Constantes de Strings: As constantes de strings podem ser usadas tanto com o nosso genérico aspas( ) quanto com o apóstrofo( ). Você também pode usar as barras invertidas para separar os aspas para que o JavaScript não entenda bobagens...como por exemplo : <Script> var Izaias = \ texto\ document.write(izaias); // o resultado seria texto
8 Este Script acima nos dá um exemplo de como atribuir um valor para uma variável, sendo que esse valor contém caracteres que são reservados, assim como o aspas no exemplo acima, ou mesmo com um apóstrofo no exemplo abaixo: <Script> var Izaias = \ texto\ document.write(izaias); // o resultado seria texto Esta sintaxe, como disse anteriormente é semelhante à sintaxe do Java, C/C++, programadores que migram desta linguagem, não encontrarão maiores dificuldades. Conversões de tipos de dados JavaScript é uma linguagem de tipos dinâmicos. Isso quer dizer que você não têm que especificar o tipo de dado de uma variável quando você a declara, além disso tipos de dados podem ser convertidos automaticamente como necessário durante a axecução do script. Assim, por exemplo, você pode definir variáveis como segue: var answer = 42 E mais tarde, você pode atribuir à mesma variável um valor de uma string, por exemplo: answer = "Thanks for all the fish..." Pelo motivo do JavaScript ser uma linguagem de tipos dinâmico, esta atribuição não causa uma mensagem de erro. Em expressões envolvendo valores numéricos e strings com o operador +, o JavaScript converte valores numéricos para strings. Por exemplo, considere as seguintes expressões. x = "The answer is " + 42 // retona "The answer is 42" y = 42 + " is the answer" // retorna "42 is the answer" Em expressões envolvendo outros operadores, o JavaScript não converte valores numéricospara strings. Por exemplo: "37" - 7 // retorna 30 "37" + 7 // retorna 377 parseint e parsefloat Ambos Servem para converter strings, o parseint para converter strings para Inteira e o Float como o nome já diz, serve para converter para números de Ponto Flutuante. <Script Language= JavaScript > var isnav, isie if (parseint(navigator.appversion) >= 4){ if (navigator.appname == Netscape ) { isnav = true else { isie = true else { document.write ( Desculpe, mas seu browser é muito antigo!, )
9 + ( faça download de uma versão atualizada ); if (isnav) document.write( netscape ); if (isie) document.write( internet explorer ); No exemplo acima convertemos a String da versão do browser para um número inteiro comparando se a versão é maior ou igual a 4. Caso você queira testar o código sem usar a função parseint o código não funcionará. Comandos estruturados Comando IF O comando IF todo mundo deve saber, mas vou falar para os leigos que ele é usado simplesmente para testar uma condição. Exemplo : <Script> var i=10 if (i==10) { Document.Write( é dez ); else{ Document.Write( não é dez ); Acima o comando IF avaliou a condição, se a variável i fosse igual a dez ele escreveria no documento que é dez, senão ele escreveria que não é dez. O mais importante neste exemplo, é observar como é feita a regra das chaves (em azul) que indicam o inicio e o término do comando estruturado. È importante dizer que no comando IF (no JavaScript) a condição deve sempre estar entre parênteses seguindo a sintaxe abaixo : if ( condição_vai_aqui ) As chaves indicam o início do comando estruturado, assim como nos comandos for e while. Elas são necessárias apenas quando temos mais de um comando dentro de uma condição, exemplo: If(a==b)document.write A é igual à B ; Este exemplo acima é válido pois só têm um comando, ou só uma ação, que é o document.write, agora observe o código abaixo: If(a==b)document.write A é igual a B ; document.write você acertou! ; Este exemplo está incorreto e não deve funcionar como desejado, pois têm dois comandos dentro de um if que não têm chaves. Se quiséssemos fazer esta verificação acima com as mesmas ações deveríamos usar as chaves como no exemplo abaixo: If(a==b){ document.write A é igual a B ; document.write você acertou! ;
10 E assim funcionará perfeitamente como desejado. Também podemos usar outro modo que funciona semelhantemente ao if. É um pouco mais complexo para se entender, e ao início de aprendizado é recomendável usar somente o if sózinho, mas para que voc~e conheça essa sintaxe vamos vê-la agora: var teste = (a==b)? A é igual à B : A não é igual à B ; A variável teste retornará uma string A é igual à B se for verdadeira a condição entre parênteses, e retornará uma string A não é igual à B se a condição entre parênteses for falsa. Comando FOR O comando para no JavaScript é, como em todas as outras linguagens indispensável, pois ele é quem faz um trabalho simples que se fosse feito manualmente daria um grande trabalho. Para exemplificar vamos supor que você tenha tenha que escrever em seu código HTML os números de 1 até 20. Para que você vai escreve-los um a um se você pode usar um simples comando em JavaScript para fazer isto? A sintaxe para isso é a seguinte : for ( sua_variavel = inicio_do_laço ; sua_variavel <= fim_do_laço ; sua_variavel++) Sintaxe em uso : <!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.0 Transitional//EN > <html> <head> <title>titulo</title> </head> <body> <Script Language= JavaScript > for (i=1;i<=20;i++) document.write (i + <BR> ); </body> </html> Explicação passo-à-passo do código acima: for Este é o comando formalmente nomeado de Para i=1; quando fazemos esta atribuição, estamos dizendo que nossa contagem deve começar do 1(um). i<=20; Isto é ATÉ onde vai sua contagem, ou seja, o fim da contagem, o número de voltas que o laço vai dar. i++ Isto significa que ao final do laço (volta) será incrementado 1 (um) para i no final de cada volta. Lendo este código pela lógica de programação, ficaria assim : Para i começando por 1 até 20 incrementando 1 Escreva i + <BR> Fim Para Sendo que, tudo isso vai entre parênteses, e não devemos jamais esquecer que no Java Script é tudo CaSe
11 SeNSeTiVe, ou seja, tudo que é minúsculo é minúsculo e não há exceções, portanto se você quiser escrever FOR (em maiúsculo) em vez de for (em minúsculo, o correto), é 100 % de chances de um código não funcional. Comando While O comando while é semelhante ao comando for, porém na maioria das vezes o while é aplicado quando não podemos determinar a quantidade de voltas que nosso laço vai ter, um bom exemplo que desenvolvi migrando do PHP está aí em baixo: <Script Language= JavaScript > var i=1; while(i <= 10){ document.write(i++ + <br> ); //escrevendo e ao mesmo tempo adicionando um para a variável i O comando switch O comando switch do JavaScript1.2 nada mais é do que um case, assim como no C ou no PHP, ou até podendo se comparar com um simples case do VB. Caso você trabalhe com C, PHP ou outras linguagens, você provavelmente já sabe o que o comando faz. Mas lembre-se que este comando no JavaScript serve apenas para o JavaScript1.2, ou seja, serve apenas para Netscape e Internet Explorer nas suas versões 4.X. Sintaxe: switch (variavel_de_controle) { opção1 : comandos ; break; opção2 : comandos ; break; default : comandos; vamos para um exemplo prático mas primeiramente veja o código abaixo: <Script Language=JavaScript1.2> var teste = prompt( digite um valor de 1 até 5 ); switch(teste){ case 1 : alert( seu valor foi 1 );break; case 2 : alert( seu valor foi 2 ); break; case 3 : alert( seu valor foi 3 ); break; case 4 : alert( seu valor foi 4 ); break; case 5 : alert( seu valor foi 5 ); break; default: alert( seu valor nao foi nenhum valor entre 1 e 5 ); Objetos Primeiro, vamos pensar nos objetos. Um objeto é alguma coisa. Um gato um carro, uma bicicleta são todos objetos no mundo físico. Para o JavaScript, existem objetos com que ele lida em navegadores da Web, como janelas, formulários e os elementos do formulário, como botões e caixas de seleção. Como é possível haver mais de um gato, ou mais de uma janela, faz sentido dar nomes aos objetos.
12 Embora você pudesse se referir a seus bichinhos como Gato1 e Gato2. No JavaScript você também pode fazer isso!. Como por exemplo window[0], forms[1]. Uma pequena dica que gostaria de mencionar é que você sempre utilize o nome real dos objetos em vez de utilizar o exemplo acima de window[0], forms[1]...gato1, Gato2 (no mundo real), pois assim facilitará mais sua vida como um programador em JavaScript. Para não complicar o que eu estou dizendo aqui vou fazer dois exemplos. O primeiro utilizando seus apelidos e o segundo utilizando os nomes reais dos objetos. <form name= preenchimento method= post > <input type= text name= nome > <input type= button name= botaoenvia > </form> <Script Language= JavaScript > minhavar = document.forms[0].nome.value ; Neste exemplo utilizamos o objeto forms em vez do nome do objeto que criamos agora veremos o exemplo abaixo, desta vez utilizando o nome real dos objetos <form name= preenchimento method= post > <input type= text name= nome > <input type= button name= botaoenvia > </form> <Script Language= JavaScript > minhavar = document.preenchimento.nome.value; Agora sabemos que há duas formas de se tratar objetos. Uma delas é chamando por um nome ordenado de uma propriedade do documento e a outra é, chamando pelo próprio nome como no segundo exemplo, o que é mais fácil e recomendado, não somente por mim, mas por livros e outros programadores. Propriedades Os objetos têm propriedades. Um gato tem pele, o carro têm uma porta, e a bicicleta têm rodas. No mundo do JavaScript, uma janela tem título, e um formulário têm uma caixa de seleção. As propriedades podem modificar os objetos, e a mesma propriedade pode se aplicar a objetos completamente diferentes. Digamos que você tem uma propriedade chamada vazia. É certo usar vazia onde ela for aplicável; assim, você poderia dizer que a barriga do gato está vazia. Observe que a roda da bicicleta e a porta do carro são apenas propriedades; elas mesmas também são objetos, os quais podem ter suas próprias propriedades. Portanto objetos podem ser subobjetos. Métodos As ações que os objetos podem realizar são chamadas de métodos. Gatos miam, carros se correm e bicicletas andam...os Objetos do JavaScript também tem métodos: botões: click(), janelas open(), e texto pode ser selected(),. Os parênteses significam que estamos fazendo referência à um método, e não a uma propriedade. Dica: talvez ajuda a imaginar os objetos e as propriedades como nomes (substantivos) e seus métodos como verbos. os primeiros são coisas, enquanto os métodos são ações que essas coisas podem realizar, ou então que podem ser realizadas sobre eles.
13 Juntando as peças É possível reunir objetos, propriedades e métodos para conseguir uma descrição melhor de um objeto, ou ainda para descrever um processo. Em JavaScript estes itens são separados por pontos. Isso denomina-se sintaxe de ponto. Aqui estão alguns exemplos de objetos e suas propriedades, representados dessa maneira: bicicleta.rodas gato.pata.dianteira.esquerda computador.disco.flexivel documento.imagens.nome janela.status E aqui estão alguns exemplos de objetos e métodos escritos em sintaxe de ponto: gato.miar() documento.escrever() formulários.elementos.rádio.clique() Abaixo, segue uma tabela que demonstra os principais eventos Eventos O browser interpreta o JavaScript esperando que eventos aconteçam, eles podem vir quando a página termina de ser lida ou quando o usuário move o mouse sobre um link ou clica em um botão, e são inseridos dentro de nossas tags HTML. A maioria dos eventos é precedido da palavra ON, como por exemplo onmouseover. Mas os eventos do JavaScript nem sempre permitem que você possa trabalhar com qualquer tag do HTML, como por exemplo você não pode colocar um evento OnClick em uma tag <IMG do HTML...isto nem sempre é observado pelo programadores JavaScript, bom para ficar claro vou colocar abaixo alguns dos eventos mais usados no JavaScript e citar o que eles fazem e também em que tag HTML que podemos usa-lo. Para ter uma referência ainda melhor use o site da Netscape A Tag Possui o evento Que é chamado quando... <A> OnClick O usuário clica no link. OnMouseOver O ponteiro do mouse é colocado em cima do link. onmouseout Quando o mouse sai fora do link. <AREA> onmouseover O ponteiro do mouse é colocado em cima da área de mapeamento da imagem. onmouseout O ponteiro do mouse sai fora da área de mapeamento da imagem. <BODY> onblur A janela ou frame contendo esta página perde o fócus. onfocus Ao contrário do onblur a página recebe o fócus. onload Quando a página foi onunload terminada de ler... Quando o usuário sai da página. <FORM> onreset Quando o botão RESET é pressionado.
14 onsubmit Quando o Botão submit é pressionado. <IMG> onabort A leitura da imagem tem sido parada por uma ação do usuário. onload Quando a leitura da imagem é terminada. onerror Quando um erro ocorreu <INPUT> com TYPE="BUTTON" ou "CHECKBOX" ou "RADIO" ou "RESET" <INPUT> com TYPE="TEXT" ou <TEXTAREA> <INPUT> com TYPE="SELECT" onclick onblur onchange onfocus onselect onblur onchange onclick onfocus enquanto a imagem foi lida. Quando é dado um clique de mouse em um elemento do formulário. Quando um elemento do formulário perde o fócus. Quando um texto de um elemento do formulário é atualizado. Quando um elemento do formulário recebe o fócus. Quando o usuário seleciona tudo ou apenas uma parte de um texto de um elemento do formulário. Quando o elemento do formulário perde o fócus Quando o usuário muda o item selecionado. Quando um usuário clica em um item Quando um elemento do formulário recebe o fócus Manipulando strings substring Esta é uma função de manipulação de strings, e serve para que você possa obter um trecho ou uma pequena parte de uma grande string, isto sendo informado por intervalos de números, os quais você pode contar os caracteres. veja meu exemplo : <Script> var frase = Alface é bom para saúde ; var parte = frase.substring(0,2); document.write(parte); Como podemos ver a função substring arrancou uma parte da minha frase, esse é o objetivo desta função, como vimos onde eu tinha Alface é bom para saúde eu fiquei apenas com a palavra Al. Isso aconteceu porque eu mandei que o Script começasse a contar à partir do zero, ou seja, contar à partir da primeira string encontrada (da esquerda para a direita), e terminar quando chegar o total da conta em 2 caracteres. Não entendeu?...vamos para mais uma explicação como outro exemplo.
15 <Script> var frase = Alface é bom para saúde ; var parte = frase.substring(1,2); document.write(parte); //retornará L Agora, depois de testarmos este Script, vimos que foi retornado apenas o caracter l (L), pois agora mandamos o Script começar a contar depois que ele visse o primeiro caracter (da esquerda para a direita), e terminar sua contagem, assim que visse o segundo caracter. Acho que agora deu para entender e ter uma noção básica desta função. substr Idêntico à função substring. Função: Retorna o conteúdo de uma string dentro de um intervalo dado. Sintaxe: string.substr(inicio_contagem, fim_contagem); Exemplo: <script Language= JavaScript Type= text/javascript > astring = Izaias ; document.write ( astring.substr(0,1) ); //retornará I length Função: Retorna o número de caracteres que um string têm. Sintaxe: string.length; Exemplo: <script Language= JavaScript Type= text/javascript > astring = Izaias ; document.write ( astring.length ); //retornará 6, pois o nome Izaias contém 6 caracteres charat Função: Retorna o caracter da posição especificada. Sintaxe: string.charat(numero_da_posicao); Exemplo: <script Language="JavaScript" Type="text/javaScript"> astring = "Lisboa"; document.write ( astring.charat(4) ); //retornará 'o' indexof Função: Retorna a posição do primeiro caracter encontrado em uma string. Sintaxe: string.indexof( parte_da_string ); Exemplo: <script Language= JavaScript Type= text/javascript > astring = Izaias ; document.write (astring.indexof( z )); //retornará 1, pois I = 0 e z = 1, ou seja, começa do zero Exemplo 2: <script Language= JavaScript Type= text/javascript > astring = Izaias ; document.write (astring.indexof( x )); //retornará -1 pois x não existe no nome Izaias Exemplo 3:
16 <script Language= JavaScript Type= text/javascript > astring = Izaias ; document.write (astring.indexof( a )); //retornará 2, pois I=0, z=1, e a=2, //e o primeiro a encontrado será o 2º caracter //encontrado iniciando pelo zero... lastindexof Função: Quase igual ao indexof, porém com o objetivo de trazer a posição do último caracter encontrado, e não do primeiro assim como no indexof. Sintaxe: string.lastindexof( parte_da_string ); Exemplo: <script Language= JavaScript Type= text/javascript > astring = Izaias ; document.write (astring. lastindexof ( a )); //retornará 4, pois estará retornando a posição do //do último caracter encontrado. touppercase Função: Muda a string para maiúsculo Sintaxe: string.touppercase(); Exemplo: <script language= JavaScript Type= Text/JavaScript > minhastring= Izaias ; document.write ( minhastring.touppercase()); tolowercase Função: Muda a string para minúsculo. Sintaxe: string.toloewrcase(); Exemplo: <script language= JavaScript Type= Text/JavaScript > minhastring= Izaias ; document.write ( minhastring.tolowercase()); escape Função: Retorna o valor ASCII da string. Pode ser usado como uma função de codificação de URL (URLEncode). Sintaxe: escape( string ); Exemplo: <script language= JavaScript Type= Text/JavaScript > document.write ( escape("iza i & as")); //Retornará Iza%20i%20%26%20as unescape Função: Retorna um caracter á partir de seu código ASCII. Ao contrário do escape Sintaxe: unescape( string ); Exemplo: <script language= JavaScript Type= Text/JavaScript >
17 document.write ( unescape("iza%20i%20%26%20as ")); //Retornará Iza i & as Janelas O JavaScript oferece muitas rotinas para se manipular janelas. Vamos ver algumas abaixo: Abrindo uma nova Janela Abrir uma nova janela no JavaScript é extremamente fácil. Veja o exemplo abaixo: <Script Language= JavaScript > window.open( Janela_nome, target, opções ); Onde: janela_nome é o nome da página que você deseja abrir em uma nova janela. target é o alvo desta janela, ou seu nome, caso use o target poderá ser: _blank _parent _self _top Um detalhe interessante sobre janelas no JavaScript, e ainda pouco divulgado é o uso do _self, pois ele abrirá um pop-up na mesma janela, ou seja, ele transformará sua janela comum em um pop-up. Por exemplo, se quiséssemos abrir a página inicial de nosso site já em um pop-up, e não em uma janela padrão, poderíamos usar esta opção de target, porém é importante informar que isso só funciona no JavaScript, ou seja, só funciona no Netscape até as versões Se usarmos esse método de target no IE, a página até se abrirá na mesma janela, porém você verá que as opções de toolbar, location etc. não farão efeito, ou seja, a página se abrirá na mesma janela porém não ficará em formato físico de um pop-up. Já os outros métodos são suportados normalmente pelo IE, assim como: o _top (para se abrir a janela no topo do documento), o _blank (para se abrir numa outra página), e assim os restantes. Continuando... opções são os atributos da janela, alguns deles podem ser: toolbar - Quando setado para yes ativa a barra de ferramentas que contém os botos Back, Stop, entre outros location - Quando setado para yes ativa Abre a barra de location do browser directories - Quando setado para yes ativa os botões What's New, Handbook, etc. status - Quando setado para yes ativa status do browser no rodapé da janela scrollbars - Quando setado para yes ativa o scroll do browser, na vertical e horizontal menubar - Quando setado para yes ativa os menus de aplicativo, por exemplo: File, Edit, Help, etc. resizable - Quando setado para yes permite o usuário alterar o tamanho da janela. fullscreen - Quando setado para yes abre a tela cheia (somente IE). width - Atribui a largura da janela que será aberta, usando coordenadas em pixels height - Atribui a altura da janela que será aberta, usando coordenadas em pixels top - Atribui a distância da nova janela em relação ao topo da tela usando pixels como coordenadas. left - Atribui a distância da nova janela em relação ao lado esquerdo da tela em pixels. Usando a função moveto para mover janelas Quando abrimos uma janela, nas opções de abertura, podemos determinar a distância que nossa nova janela terá em relação ao topo da tela e a distância que a nova janela terá em relação ao lado esquerdo da
18 tela. Contudo ainda temos mais uma opção, que é usar a função moveto() para mover esta janela para um lugar específico da tela, usando as coordenadas de pixels. Sintaxe: objeto.moveto ( distancia_do_canto_esquerdo-da_tela, distancia_do_canto_direito-da_tela, ); Exemplo: <script> cyberpunk = window.open( minhapagina.htm, _blank, width=290,height=250 ); cyberpunk.moveto(0,0); A propriedade opener A propriedade opener pode ser usada quando desejarmos referenciar a janela pai, depois que o pop-up (ou janela) foi aberto. Sintaxe: opener.comandos... Exemplo: Este exemplo será demonstrado usando-se 2 páginas. Código da primeira página: 1.htm <html> <head> <title>untitled</title> </head> <body> <script> remote = window.open('2.htm','promocao','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars =yes,resizable=no,menubar=no,width=290,height=250') </body> </html> Código da segunda página: 2.htm <html> <head> <title>untitled</title> </head> <body> <script> function linkar(){ opener.document.location.href=" <a href="" onclick="linkar(); return false;">link Teste</a> </body> </html> Como percebemos olhando os códigos acima, a página 1.htm através de seu script, abre uma outra janela, chamada 2.htm. A página 2.htm contém um link que chamamos de link teste, que chama a função linkar, e lá vemos finalmente o uso da propriedae opener, que indica a a bertura de uma outra url dentro da primeira janela (página 1.htm). Isso demonstra como usarmos comandos de uma janela para outra, assim desta maneira, poderíamos manipular muitos outros dados assim como formulários e diversos outros dados que estão dentro da página pai - que no nosso exemplo foi a página 1.htm - através da propriedade opener.
19 Fechando uma janela Para fechar uma janela pode-se usar o método close(), atribuindo-se à propriedade window. Exemplo: <script> window.close(); Se a janela que possuir esse comando, for um pop-up, ou seja, se for uma janela filha de outra, então quando chamar-mos a função de algum modo, a janela se fechará automaticamente. Caso a janela que conter este comando for uma janela comum, não aberta através de outra, por motivos de segurança, aparecerá uma alerta interna do browser perguntando A novidade neste método é que nos navegadores mais recentes (IE 5.5 e Netscape 6), pode-se fechar uma janela pai automaticamente, sem que seja exibida uma mensagem de alerta interna do navegador. Há ainda algumas propriedades nestes navegadores mais recentes que permitem manipular muitas propriedades de uma janela, como cores do título da janela, cores do sistema da janela, mudar botões de maximizar e minimizar de uma janela e enfim fazer muita coisa diferente, mas isso é possível somente aos navegadores com suporte a tecnologia DOM. Se quiser obter mais informações sobre o DOM use este link < Arrays Array, são também chamadas de vetores. Um vetor é usado em situações quando precisamos de que uma única variável possua vários valores diferentes e que estes valores estejam preservados, guardados dentro da variável, e quando precisamos de usar isto pegamos desta variável, de uma forma simples. Vou citar um exemplo: <Script Type= text/javascript Language= JavaScript > var nome = new Array() //declarando as arrays var sobrenome = new Array() var link = new Array() var descricao = new Array() /* Cuidado! a palavra "Array" é mais uma das Case sensitive do JavaScript */ /* Atribuindo os valores */ nome[0] = "Izaias" nome[1] = "Linus" nome[2] = "Patrick" sobrenome[0] = "Lisboa" sobrenome[1] = "Tourvals" sobrenome[2] = "Volkerding" link[0] = " link[1] = " link[2] = " descricao[0] = "Site para programadores Web de Izaias Lisboa" descricao[1] = "Site oficial do sistema de Linus Tourvals 'o inventor do linux' " descricao[2] = "Site oficial da distribuição mais usada por 'NERDS Linuxers' " /* pronto agora as variáveis nome, sobrenome, link, descrição contem todos os valores */ /* Escrevendo todos os links e descrições, através o comando PARA */ for(i=0;i<=descricao.length -1;i++){ document.write ('Nome do Autor :' + ' ' + nome[i] + ' ' + sobrenome[i] + '<br><a href=' +
20 link[i] + '>' + link[i] + '</a><br>' + descricao[i] + '<br><br><br>'); Testando-se este exemplo teríamos nome do autor, url e descrição escritas no documento, de uma forma dinâmica. Ou seja, primeiramente atribuímos valores às arrays depois usamos um comando for para lê-las uma por vez, e em seguida escrevê-las no documento. Como vimos, para se atribuir um valor a uma variável podemos usar: minhavariavel[0]=1; minhavariavel[1]=5; e assim sucessivamente. Mas também podemos atribuir os valores às arrays de diferentes modos, veja abaixo: var minhaarray= new Array( ae, io, uao ); e assim seria o mesmo que se tivéssemos atribuído da seguinte forma: minhaarray[0]= ae ; minhaarray[1]= io ; minhaarray[2]= uao ; E também poderíamos usar o seguinte: fish = ["Lion",, "Angel"]; alert (fish[1]); //o resultado será uma string vazia, ou seja será alertado um espaço em branco No exemplo acima atribuímos no primeiro elemento(primeiro pois as arrays começam com zero), um valor nulo. Arrays de 2 dimensões Criar arrays de 2 dimensões não é uma tarefa tão difícil. Vamos primeiro relembrar como criamos um Array simples. var myarray = new Array(3); Este código acima cria uma Array com três compartimentos. Felizmente isto é um artigo velho para você que está na parte avançada. Graficamente isto é representado da seguinte maneira:
![Como vimos, para se atribuir um valor a uma variável podemos usar: minhavariavel[0]=1; minhavariavel[1]=5; e assim sucessivamente.](/docs-images/46/3733716/images/page_20.jpg "Mas também podemos atribuir os valores às arrays de diferentes modos, veja abaixo: var minhaarray= new Array( ae, io, uao ); e assim seria o mesmo que se tivéssemos atribuído da seguinte forma:")
21 Agora que você tem representado graficamente o que é um Array simples, veremos agora o que é um Array de duas dimensões: Como você pode perceber, a diferença entre a Array comum e a de duas dimensões é que na segunda, temos que criar um novo Array, no topo de cada Array comum. A tradução desta idéia esta sendo exemplificada no código abaixo: <Script Language= JavaScript > var myarray = new Array(3) for (i=0; i<3; i++) myarray[i]=new Array(2); myarray[0][0]= teste esta é 0-0 ; myarray[0][1]= teste esta é 0-1 ; myarray[0][2]= teste esta é 0-2 ; myarray[0][3]= teste esta é 0-3 ; myarray[1][0]= teste esta é 1-0 ; myarray[1][1]= teste esta é 1-1 ; myarray[1][2]= teste esta é 1-2 ; myarray[1][3]= teste esta é 1-3 ; for(i=0;i<myarray.length-1;i++){ for(j=0;j<=myarray.length;j++){ document.write(myarray[i][j]+ <br> ); Sort Supondo que queremos escrever alguns nomes de mulheres, sendo que estes nomes estão dentro de uma Array. Faríamos um Array com cada nome e depois usaríamos um for para escrever todas. Mas e se fosse necessário ordenar os nomes em ordem alfabética? Para fazer isto de uma forma dinâmica, usamos o comando sort(), veja os seguintes códigos: <Script> var minharray =new Array( Patricia, Beatriz, Amanda, Solange ); minharray.sort(); //agora minharray[0]= Amanda... for(i=0;i<=minharray.length-1;i++) document.write(minharray[i]+ <br> ); Ou podíamos fazer a mesma coisa da seguinte forma: <Script> var minharray =new Array(); minharray[0]= Patricia ; minharray[1]= Beatriz ; minharray[2] Amanda ; minharray[3]= Solange ; minharray.sort(); //agora minharray[0]= amanda... for(i=0;i<=minharray.length-1;i++) document.write(minharray[i]+ <br> ); Ambos códigos resultariam nisso < Bem, esta função apenas ordena, tanto os textos, quanto números, colocando-os em ordem alfabética ou
22 ordem numérica. Opção de uso de expressão condicional Além do comando if para avaliar uma expressõ, no JavaScript, assim como no Java e no C/C++ temos uma expressão que também checa condições. Sintaxe: variável = (condição)? x : y ; a expressão acima retorna x se a condição entre parênteses for verdadeira e retorna y se a condição entre parênteses for falsa. Exemplos: <script> var navegador = ( navigator.appname.indexof( Netscape )>=0 )? Netscape : Não Netscape ; document.write (navegador); A variável navegador terá uma condição avaliada, se o browser do cliente for Netscape então a variável navegador recebe Netscape caso contrário recebe Não Netscape.
23 Comando FOR(avançado) É claro que você que programa em JavaScript não prescisa saber este comando for avançado, pois da primeira forma que escrevi em meu tutorial, também funciona do mesmo jeito, mas, para os viciados em JavaScript...isso pode ajudar a entender o funcionamento do comando break. Bom então vamos lá escrever o comando for de umas 3 maneiras diferentes. 1 - Em apenas uma linha... <script> for(i=0;i<10;document.write(i+ <br> ),i++); 2 - Usando o comando break como auxílio (repare nos pontos e vírgulas dentro do for) <Script> i = 1; for (;;) { if (i > 10) { break; document.write(i); i++; ; 3 - Usando o comando break como auxílio (repare dentro do for, como a expressão mudou) <Script> for (i = 1;;i++) { if (i > 10) { break; document.write(i); Este tutorial foi totalmente escrito por Izaias Lisboa autor da CodeFactory - para ver mais artigos sobre JavaScript e sobre DHTML em geral, por favor visite este web site.
24 This document was created with Win2PDF available at The unregistered version of Win2PDF is for evaluation or non-commercial use only.
O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.
1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente
Utilizando Janelas e Frames
Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já
Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!
Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder
JavaScript (Funções, Eventos e Manipulação de Formulários)
Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos
Tecnologias para Web Design
Tecnologias para Javascript e DOM Introdução à Scripts Um script do lado cliente é um programa que acompanha um documento HTML Pode estar incluído no próprio documento embutido ou acompanha-lo num arquivo
JavaScript. JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos.
JavaScript JavaScript é uma linguagem de script usada em navegadores web. É uma linguagem dinâmica, estruturada e orientada em objetos. Pode ser usada dentro do próprio arquivo HTML ou estruturada em um
Criando um script simples
Criando um script simples As ferramentas de script Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript. A primeira coisa
JavaScript: Validação de Formulários. Prof. Ivanilton Polato [email protected] [email protected]
JavaScript: Validação de Formulários Prof. Ivanilton Polato [email protected] [email protected] Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir
O que é o JavaScript?
JavaScript Introdução O JavaScript é utilizado por milhões de páginas na web para melhorar o design, validar forms, e muito mais O JavaScript foi inicialmente desenvolvido pela Netscape e é a linguagem
WEBDESIGN. Professor: Paulo Marcos Trentin - [email protected] http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Marcos Trentin - [email protected] http://www.paulotrentin.com.br Escola CDI de Videira Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para
Algoritmos em Javascript
Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays
Introdução ao Javascript
Programação WEB I Introdução ao Javascript Apresentação da Disciplina,Introdução a linguagem Javascript Objetivos da Disciplina Apresentar os principais conceitos da linguagem Javascript referente à programação
Informática I. Aula 6. http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1
Informática I Aula 6 http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1 Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e
Dicas para Javascript (parte1) <style TYPE="text/css"><!--a.menu {color:000000;}a.menu:hover {color:cc0000;}-- ></style>
Dicas para Javascript (parte1) 1 - DETECTANDO A RESOLUÇÃO DO USUÁRIO
Scriptlets e Formulários
2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,
2 echo "PHP e outros.";
PHP (Hypertext Preprocessor) Antes de qualquer coisa, precisamos entender o que é o PHP: O PHP(Hypertext Preprocessor) é uma linguagem interpretada gratuita, usada originalmente apenas para o desenvolvimento
PHP: Formulários e upload de múltiplos arquivos Por Alfred Reinold Baudisch 28 de fevereiro de 2006.
PHP: Formulários e upload de múltiplos arquivos Por Alfred Reinold Baudisch 28 de fevereiro de 2006. Veja como montar um formulário para upload de múltiplos arquivos e como processá-lo com o PHP, usando
Aula de JavaScript 05/03/10
Objetos Sabe-se que variável são contêiners que podem armazenar um número, uma string de texto ou outro valor. O JavaScript também suporta objetos. Objetos são contêiners que podem armazenar dados e inclusive
Resumo da Matéria de Linguagem de Programação. Linguagem C
Resumo da Matéria de Linguagem de Programação Linguagem C Vitor H. Migoto de Gouvêa 2011 Sumário Como instalar um programa para executar o C...3 Sintaxe inicial da Linguagem de Programação C...4 Variáveis
Primeiro contato com JavaScript
Primeiro contato com JavaScript Visão Geral JavaScript É uma linguagem em formato script; Permite dinamizar funções do site e criar interatividade em páginas web. O JavaScript permite: Coletar dados dos
1) Ao ser executado o código abaixo, em PHP, qual será o resultado impresso em tela?
Exercícios sobre Linguagem PHP: 1) Ao ser executado o código abaixo, em PHP, qual será o resultado impresso em tela? 2) Considere a linguagem de programação PHP e seus operadores. A execução da sentença:
Tecnologias para apresentação de dados - Java Script. Aécio Costa
Tecnologias para apresentação de dados - Java Script Aécio Costa Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem
Prof Evandro Manara Miletto. parte 2
Prof Evandro Manara Miletto parte 2 Sumário Estruturas de Controle Eventos Estruturas de controle características Estruturas de controle (ou condicionais) são executadas caso um teste seja atendido Permite
Dicas para usar melhor o Word 2007
Dicas para usar melhor o Word 2007 Quem está acostumado (ou não) a trabalhar com o Word, não costuma ter todo o tempo do mundo disponível para descobrir as funcionalidades de versões recentemente lançadas.
OPERADORES E ESTRUTURAS DE CONTROLE
OPERADORES E ESTRUTURAS DE CONTROLE 3.1 Operadores Os operadores indicam o tipo de operação matemática que será executada gerando novos valores a partir de um ou mais operadores. São muito utilizados em
FERRAMENTAS DE COLABORAÇÃO CORPORATIVA
FERRAMENTAS DE COLABORAÇÃO CORPORATIVA Compartilhamento de Arquivos no Google Drive Sumário (Clique sobre a opção desejada para ir direto à página correspondente) Utilização do Google Grupos Introdução...
Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004
DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis
MANUAL DO ANIMAIL 1.0.0.1142 Terti Software
O Animail é um software para criar campanhas de envio de email (email Marketing). Você pode criar diversas campanhas para públicos diferenciados. Tela Principal do sistema Para melhor apresentar o sistema,
O que é o Javascript?
O que é o Javascript? JavaScript é uma linguagem para criação de Home-Pages. Funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript você tem muitas possibilidades
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2
Curso Superior de Tecnologia em Análise e Desenvolvimento de Sistemas Prof. Felippe Scheidt IFPR Campus Foz do Iguaçu 2014/2 Objetivo. O objetivo da disciplina é conhecer os princípios da programação de
Prática 6 ActionScript
Prática 6 ActionScript 1. Objetivos Se familiarizar com o ActionScript. Usar comandos e funções básicas. 2. Recursos Necessários Computador com o programa Macromedia Flash MX ou superior. 3. Conceitos
Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo.
Manual de Instruções ECO Editor de Conteúdo Bem- Vindo ao manual de instruções do ECO Editor de COnteúdo. O ECO é um sistema amigável e intui?vo, mas abaixo você pode?rar eventuais dúvidas e aproveitar
Banner Flutuante. Dreamweaver
Banner Flutuante Dreamweaver Começamos com um arquivo em branco no Dreamweaver MX. Para que o banner apareça sobre a página, precisamos inserir uma camada a mais no arquivo HTML. Selecione o menu Inserir
Desenvolvendo Websites com PHP
Desenvolvendo Websites com PHP Aprenda a criar Websites dinâmicos e interativos com PHP e bancos de dados Juliano Niederauer 19 Capítulo 1 O que é o PHP? O PHP é uma das linguagens mais utilizadas na Web.
Logo abaixo temos a Barra de Menus que é onde podemos acessar todos os recursos do PHP Editor.
Nessa aula iremos estudar: A anatomia da janela do PHP Editor Iniciando o servidor Web O primeiro exemplo de PHP Anatomia da janela do PHP Editor Barra de Títulos: É a barra azul que se encontra na parte
Microsoft Access: Criar relações para um novo banco de dados. Vitor Valerio de Souza Campos
Microsoft Access: Criar relações para um novo banco de Vitor Valerio de Souza Campos Conteúdo do curso Visão geral: relações são essenciais Lição: inclui oito seções Tarefas práticas sugeridas Teste Cartão
Características do PHP. Começando a programar
PHP Introdução Olá pessoal. Desculpe o atraso na publicação da aula. Pude perceber pelas respostas (poucas) ao fórum que a realização da atividade do módulo I foi relativamente tranquila. Assistam ao vídeo
Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5.
Esse manual é um conjunto de perguntas e respostas para usuários(as) do Joomla! 1.5. Ele considera que você já tem o Joomla! instalado no seu computador. Caso você queira utilizá lo em um servidor na web,
Lição 1 - Criação de campos calculados em consultas
1 de 5 21-08-2011 22:15 Lição 1 - Criação de campos calculados em consultas Adição de Colunas com Valores Calculados: Vamos, inicialmente, relembrar, rapidamente alguns conceitos básicos sobre Consultas
Mais sobre uso de formulários Site sem Ajax
Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher
Os objetivos indicados aplicam-se a duas linguagens de programação: C e PHP
AGRUPAMENTO DE ESCOLAS DE SANTA COMBA DÃO CURSO PROFISSIONAL DE TÉCNICO DE GESTÃO E PROGRAMAÇÃO DE SISTEMAS INFORMÁTICOS 2012-2015 PROGRAMAÇÃO E SISTEMAS DE INFORMAÇÃO MÓDULO 2 Mecanismos de Controlo de
Tutorial de Matlab Francesco Franco
Tutorial de Matlab Francesco Franco Matlab é um pacote de software que facilita a inserção de matrizes e vetores, além de facilitar a manipulação deles. A interface segue uma linguagem que é projetada
Portal do Projeto Tempo de Ser
Sumário Portal do Projeto Tempo de Ser O que é um Wiki?...2 Documentos...2 Localizando documentos...3 Links...3 Criando um Documento...4 Criando um link...4 Editando um Documento...5 Sintaxe Básica...5
Como incluir artigos:
Como incluir artigos: O WordPress é uma ferramenta muito flexível, com muitas variações e ajustes que podem torná-lo algo muito simples e também muito sofisticado conforme os recursos que são configurados
INTRODUÇÃO AO WINDOWS
INTRODUÇÃO AO WINDOWS Paulo José De Fazzio Júnior 1 Noções de Windows INICIANDO O WINDOWS...3 ÍCONES...4 BARRA DE TAREFAS...5 BOTÃO...5 ÁREA DE NOTIFICAÇÃO...5 BOTÃO INICIAR...6 INICIANDO PROGRAMAS...7
PHP Material de aula prof. Toninho (8º Ano)
Na aula anterior entendemos como se faz o acesso aos nossos arquivos PHP; Como construir um script em php. Nesta aula (3) vamos entender: Como roda o PHP Inserindo comentários Visualizando páginas a partir
Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript
Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação Universidade Federal do Espírito Santo CCA UFES JavaScript Desenvolvimento de Sistemas para WEB Site:
CAPÍTULO 3 - TIPOS DE DADOS E IDENTIFICADORES
CAPÍTULO 3 - TIPOS DE DADOS E IDENTIFICADORES 3.1 - IDENTIFICADORES Os objetos que usamos no nosso algoritmo são uma representação simbólica de um valor de dado. Assim, quando executamos a seguinte instrução:
HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a
Curso de Programação Computadores
3 O Primeiro Programa em C Unesp Campus de Guaratinguetá Curso de Programação Computadores Prof. Aníbal Tavares Profa. Cassilda Ribeiro 3 O Primeiro Programa em C 3.1 - Introdução Depois dos conceitos
Web Design. Prof. Felippe
Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre
Passa a passo para construir uma página pessoal - Parte 1
Passa a passo para construir uma página pessoal - Parte 1 Quais ferramentas são necessárias? - Editor de texto básico (sem formatações): use o Bloco de Notas (não use o MS Word e WordPad) - Navegador (browser):
3. No painel da direita, dê um clique com o botão direito do mouse em qualquer espaço livre (área em branco).
Permissões de compartilhamento e NTFS - Parte 2 Criando e compartilhando uma pasta - Prática Autor: Júlio Battisti - Site: www.juliobattisti.com.br Neste tópico vamos criar e compartilhar uma pasta chamada
Guia de Início Rápido
Guia de Início Rápido O Microsoft Word 2013 parece diferente das versões anteriores, por isso criamos este guia para ajudar você a minimizar a curva de aprendizado. Barra de Ferramentas de Acesso Rápido
WEBDESIGN. Professor: Paulo Trentin [email protected] http://www.paulotrentin.com.br Escola CDI de Videira
WEBDESIGN Professor: Paulo Trentin [email protected] http://www.paulotrentin.com.br Escola CDI de Videira 1 CDI - Curso de Webdesign - Prof. Paulo Trentin Objetivos para esta aula Debater sobre
Como-Funciona-Banco-Damus-Excel-Com-VBNet-Em-3-Idiomas
Como-Funciona-Banco-Damus-Excel-Com-VBNet-Em-3-Idiomas O objetivo desta revisão no Banco-Damus, foi acrescentar no software Excel existente o Visual Basic Net. Assim o usuário passa a ter mais facilidade
Manual da Administração do site Abrasel 2.0
Manual da Administração do site Abrasel 2.0 Caro usuário, Você está recebendo o manual que lhe dará acesso ao administrador do site 2.0 onde será possível fazer as seguintes alterações: Inserir notícias
02 - Usando o SiteMaster - Informações importantes
01 - Apresentação do SiteMaster - News Edition O SiteMaster foi desenvolvido para ser um sistema simples de gerenciamento de notícias, instalado em seu próprio computador e com configuração simplificada,
Trecho retirando do Manual do esocial Versão 1.1
Trecho retirando do Manual do esocial Versão 1.1 A rotina de acesso direto ao XML do S-1000, o usuário pode encontrar na opção de cadastro de Empresas do SIP. Sempre que o usuário localizar a figura ao
Programação WEB I Estruturas de controle e repetição
Programação WEB I Estruturas de controle e repetição Operadores de Incremento Operadores de incremento servem como expressões de atalho para realizar incrementos em variáveis Operadores de Incremento Vamos
Introdução à Linguagem
Introdução à Linguagem Curso de Nivelamento do PPGMNE Janeiro / 2011 Juliano J. Scremin [email protected] Um pouco de história Um pouco de história: Nascimento do Python Um pouco de história:
TUTORIAL DO ACCESS PASSO A PASSO. I. Criar um Novo Banco de Dados. Passos: 1. Abrir o Access 2. Clicar em Criar um novo arquivo
TUTORIAL DO ACCESS PASSO A PASSO I. Criar um Novo Banco de Dados Passos: 1. Abrir o Access 2. Clicar em Criar um novo arquivo 3. Clicar em Banco de Dados em Branco 4. Escrever um nome na caixa de diálogo
Memória Flash. PdP. Autor: Tiago Lone Nível: Básico Criação: 11/12/2005 Última versão: 18/12/2006. Pesquisa e Desenvolvimento de Produtos
TUTORIAL Memória Flash Autor: Tiago Lone Nível: Básico Criação: 11/12/2005 Última versão: 18/12/2006 PdP Pesquisa e Desenvolvimento de Produtos http://www.maxwellbohr.com.br [email protected]
Prefeitura Municipal de São Luís Manual de uso dos serviços da SEMFAZ. Prefeitura Municipal de São Luís Manual de uso dos serviços da SEMFAZ
Prefeitura Municipal de São Luís Manual de uso dos serviços da SEMFAZ 1 Sumário 1. Introdução 2. Emissão de Certidões 3. Autenticação de Certidões 4. Cadastro de Imóveis/Empresa 5. Acessando meu cadastro
mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos
Programando em PHP www.guilhermepontes.eti.br [email protected] Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.
Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização
Tema UFPel 2.0 WP Institucional Guia de Opções de Personalização Sumário 1. Configurações Iniciais...2 1.1. Configurando o Menu Personalizado...2 1.2. Configurando os Widgets...3 2. Localize o nome de
Guia Site Empresarial
Guia Site Empresarial Índice 1 - Fazer Fatura... 2 1.1 - Fazer uma nova fatura por valores de crédito... 2 1.2 - Fazer fatura alterando limites dos cartões... 6 1.3 - Fazer fatura repetindo última solicitação
Poder Judiciário Tribunal Regional Federal da Terceira Região
Poder Judiciário Tribunal Regional Federal da Terceira Região DIMI - Divisão de Microinformática e Redes Índice: O que é a Internet? 3 O que são Intranets? 3 Sobre o Nestcape Navigator 3 Para iniciar o
Barra de ferramentas padrão. Barra de formatação. Barra de desenho Painel de Tarefas
Microsoft Power Point 2003 No Microsoft PowerPoint 2003, você cria sua apresentação usando apenas um arquivo, ele contém tudo o que você precisa uma estrutura para sua apresentação, os slides, o material
A lógica de programação ajuda a facilitar o desenvolvimento dos futuros programas que você desenvolverá.
INTRODUÇÃO A lógica de programação é extremamente necessária para as pessoas que queiram trabalhar na área de programação, seja em qualquer linguagem de programação, como por exemplo: Pascal, Visual Basic,
Fluxo de trabalho do Capture Pro Software: Indexação de OCR e separação de documentos de código de correção
Este procedimento corresponde ao fluxo de trabalho de Indexação de OCR com separação de código de correção no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se na
jquery Apostila Básica
jquery Apostila Básica INTRODUÇÃO 3 CAPÍTULO 1 POR ONDE INICIAR 3 CAPÍTULO 2 MEU PRIMEIRO SCRIPT! 4 EXERCÍCIOS...5 CAPÍTULO 3 ADICIONANDO CSS 6 EXERCÍCIOS...7 CAPÍTULO 4 MODIFICANDO APENAS PARTE DO DOCUMENTO
Melhor do que driblar os vírus de pendrive, é não pegá-los! Mas como fazer isto?
Melhor do que driblar os vírus de pendrive, é não pegá-los! Mas como fazer isto? Por padrão, a maioria dos pendrives vêm formatados com o padrão conhecido como FAT32. Este padrão já meio antigo, é muito
Tutorial do Usuário para utilização do Magento e commerce
Tutorial do Usuário para utilização do Magento e commerce Sumário Introdução...3 Página inicial (Home Page)...3 Criar uma conta ou Entrar (Login)...4 Criar uma Conta...5 Entrar (Login)...6 Minha Conta...7
Internet e Programação Web
COLÉGIO ESTADUAL PEDRO MACEDO Ensino Profissionalizante Internet e Programação Web 3 Técnico Prof. Cesar 2014 1 SUMÁRIO Criar sites dinâmicos em PHP --------------------------------------------------------
15. OLHA QUEM ESTÁ NA WEB!
7 a e 8 a SÉRIES / ENSINO MÉDIO 15. OLHA QUEM ESTÁ NA WEB! Sua home page para publicar na Internet SOFTWARES NECESSÁRIOS: MICROSOFT WORD 2000 MICROSOFT PUBLISHER 2000 SOFTWARE OPCIONAL: INTERNET EXPLORER
PROGRAMAÇÃO ESTRUTURADA. CC 2º Período
PROGRAMAÇÃO ESTRUTURADA CC 2º Período PROGRAMAÇÃO ESTRUTURADA Aula 07: Funções O comando return Protótipo de funções O tipo void Arquivos-cabeçalho Escopo de variáveis Passagem de parâmetros por valor
Fluxo de trabalho do Capture Pro Software: Indexação de código de barras e separação de documentos
Este procedimento corresponde ao fluxo de trabalho de Indexação de código de barras e de separação de documentos no programa de treinamento do Capture Pro Software. As etapas do procedimento encontram-se
CURSO DE PROGRAMAÇÃO EM JAVA
CURSO DE PROGRAMAÇÃO EM JAVA Introdução para Iniciantes Prof. M.Sc. Daniel Calife Índice 1 - A programação e a Linguagem Java. 1.1 1.2 1.3 1.4 Linguagens de Programação Java JDK IDE 2 - Criando o primeiro
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0
DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando
CRIANDO TEMPLATES E LEGENDAS
CRIANDO TEMPLATES E LEGENDAS Este tutorial tem como objetivo instruir passo à passo como criar templates de peças, utilizar os novos recursos de cadastro de propriedade de peças e criação de legenda. 1-
ALGORITMOS PARTE 01. Fabricio de Sousa Pinto
ALGORITMOS PARTE 01 Fabricio de Sousa Pinto Algoritmos: Definição 2 É uma sequência de instruções finita e ordenada de forma lógica para a resolução de uma determinada tarefa ou problema. Algoritmos 3
www.coldfusionbrasil.com.br
www.coldfusionbrasil.com.br 2000 PASSANDO VARIÁVEIS ATRAVÉS DE FORM E URL 3 ALTERA.CFM 3 FORMALTERA.CFM 4 ALTERA.CFM 4 FORMALTERA.CFM 4 CRIANDO E MANIPULANDO VARIÁVEIS COM CFSET 4 VALORES ESTÁTICOS 5 PARÂMETROS
PHP() é uma linguagem de integração de servidor que permite a criação de paginas dinâmicas. Como todas
O que é PHP? Acrônimo de PHP: Hipertext Language PostProcessor Inicialmente escrita para o desenvolvimento de aplicações Web Facilidade para iniciantes e recursos poderosos para programadores profissionais
Tutorial do Iniciante. Excel Básico 2010
Tutorial do Iniciante Excel Básico 2010 O QUE HÁ DE NOVO O Microsoft Excel 2010 é um programa de edição de planilhas eletrônicas muito usado no mercado de trabalho para realizar diversas funções como;
Follow-Up Acompanhamento Eletrônico de Processos (versão 3.0) Manual do Sistema. 1. Como acessar o sistema Requisitos mínimos e compatibilidade
do Sistema Índice Página 1. Como acessar o sistema 1.1 Requisitos mínimos e compatibilidade 03 2. Como configurar o Sistema 2.1 Painel de Controle 2.2 Informando o nome da Comissária 2.3 Escolhendo a Cor
Curso: Ciência da Computação Disciplina: Construção de Compiladores Período: 2010-1 Prof. Dr. Raimundo Moura
UFPI CCN DIE Curso: Ciência da Computação Disciplina: Construção de Compiladores Período: 2010-1 Prof. Dr. Raimundo Moura O projeto Desenvolver um compilador de um subconjunto básico da linguagem PORTUGOL.
UNIVERSIDADE FEDERAL DO AMAPÁ NÚCLEO DE TECNOLOGIA DA INFORMAÇÃO. Manual de Avaliação de Desempenho Cadastro
UNIVERSIDADE FEDERAL DO AMAPÁ NÚCLEO DE TECNOLOGIA DA INFORMAÇÃO Manual de Avaliação de Desempenho Cadastro UNIFAP MACAPÁ-AP 2013 S U M Á R I O 1 Tela de Login...2 2 Acessando ao submenu cadastro de avaliação
OFICINA BLOG DAS ESCOLAS
OFICINA BLOG DAS ESCOLAS Créditos: Márcio Corrente Gonçalves Mônica Norris Ribeiro Março 2010 1 ACESSANDO O BLOG Blog das Escolas MANUAL DO ADMINISTRADOR Para acessar o blog da sua escola, acesse o endereço
9 Comandos condicionais
9 Comandos condicionais Um comando condicional é uma instrução empregada quando se deseja criar um desvio, isto é, a opção de executar-se ou não um determinado trecho de código, segundo uma condição. Em
Javascript 101. Parte 2
Javascript 101 Parte 2 Recapitulando O Javascript é uma linguagem de programação funcional Os nossos scripts são executados linha a linha à medida que são carregados. O código que está dentro de uma função
Componentes da linguagem C++
Componentes da linguagem C++ C++ é uma linguagem de programação orientada a objetos (OO) que oferece suporte às características OO, além de permitir você realizar outras tarefas, similarmente a outras
1. Introdução pág.3 2. Apresentação do sistema Joomla! pág.4 3. Acessando a administração do site pág.4 4. Artigos 4.1. Criando um Artigo 4.2.
1. Introdução pág.3 2. Apresentação do sistema Joomla! pág.4 3. Acessando a administração do site pág.4 4. Artigos 4.1. Criando um Artigo 4.2. Editando um Artigo 4.3. Excluindo um Artigo 4.4. Publicar
Manual de configuração do sistema
Manual de configuração do sistema (v.1.5.x Beta) Rua México, 119 Sala 2004 Centro Rio de Janeiro, RJ www.doctors-solution.com.br www.simdoctor.com.br [email protected] Sumário 1. Fazendo seu primeiro
Google Drive: Acesse e organize seus arquivos
Google Drive: Acesse e organize seus arquivos Use o Google Drive para armazenar e acessar arquivos, pastas e documentos do Google Docs onde quer que você esteja. Quando você altera um arquivo na web, no
Para testar seu primeiro código utilizando PHP, abra um editor de texto (bloco de notas no Windows) e digite o código abaixo:
Disciplina: Tópicos Especiais em TI PHP Este material foi produzido com base nos livros e documentos citados abaixo, que possuem direitos autorais sobre o conteúdo. Favor adquiri-los para dar continuidade
Display de 7. PdP. Autor: Tiago Lone Nível: Básico Criação: 16/12/2005 Última versão: 18/12/2006. Pesquisa e Desenvolvimento de Produtos
TUTORIAL Display de 7 Segmentos Autor: Tiago Lone Nível: Básico Criação: 16/12/2005 Última versão: 18/12/2006 PdP Pesquisa e Desenvolvimento de Produtos http://www.maxwellbohr.com.br [email protected]
Parte I. Demoiselle Mail
Parte I. Demoiselle Mail Para o envio e recebimento de e-s em aplicativos Java, a solução mais natural é usar a API JavaMail [http:// www.oracle.com/technetwork/java/java/index.html]. Ela provê um framework