Aula 2 – O que são eventos JavaScript: Exemplo onChange

Vamos seguir estudando.

Já conhecemos um pouco do que é o JavaScript, caso queira ler clique aqui. Vimos também uma primeira aula prática que mostra como exibir em página html a data atual do sistema através de uma função javascript. A ferramenta utilizada é o NotePad++ que esta neste post.

Neste post vamos um pouco mais da interatividade que o Javascript acrescenta entre as páginas web e o usuário. Esta interatividade é baseada em respostas a eventos, irei listar alguns eventos e posteriormente um código com a aplicação do evento onClick.

Usando JavaScrit somos capazes de criar páginas web dinâmicas. Os eventos são ações que podem ser detectadas pelo JavaScript. Todo elemento em uma página web certamente possui eventos que podem ser gatilhos para um JavaScript. Por exemplo, podemos utilizar
o evento onClick em um “botão” para indicar qual função será chamada quando o usuário clicar no “botão”. Os eventos são definidos nas tags HTML.

Exemplos de eventos:

* Um clique no mouse
* O carregamento de uma página ou imagem web
* Quando o mouse passa sobre um anúncio em uma página web
* Selecionar um campo de entrada em um formulário HTML
* Submeter um formulário HTML
* Pressionar uma tecla

Obs.: Eventos são normalmente utilizados combinados com funções, e a função não será executada enquanto o evento não ocorrer.

Segue a nomenclatura e uma descrição de alguns eventos:

onBlur
Este evento representa a perda de foco de um componente, por exemplo, o usuário está digitando o CEP em um formulário e tecla TAB ou clica em outro  campo do formulário, pode-se neste momento disparar uma função que valida o CEP.

onChange
Já este representa a mudança do valor de um componente. Por exemplo, o usuário seleciona numa lista o mês desejado para uma consulta, uma ação de filtro é disparada sobre uma tabela, que passa a listar os dados somente do mês selecionado.

onClick
Ao clicar o botão do mouse sobre um elemento da página, geralmente um botão ou um link.

onDragDrop
Refere-se a ação de arrastar e soltar algo sobre uma página web.

onFocus
Este evento onFocus, é exatamente o contrário de onBlur. Acontece quando um elemento da página recebe o focu da aplicação.

onLoad
Representa que a página ou as imagens acabaram de ser carregadas.

onMouseOver
Quando o mouse passa sobre um elemento da página.

onSubmit
Quando um formulário é submetito, precisamente antes do envio.

Segue um código exemplificando a utilização do evento onClick sobre um botão, chamando a função alerta(), esta exibe uma mensagem de alerta em tela.

Exemplo do evento onClick JavaScript

Espero que esteja bem fácil de entender, aos poucos aprofundaremos os estudos e veremos a aplicação de outros eventos.

Um grande abraço.

Download do Código

aula2javascript.zip

Parte do Post foi traduzido de em 18/07/2011 : http://www.w3schools.com/js/js_events.asp

Aula Teórica 1 – Conhecendo o Javascript

O JavaScript foi originalmente criado por Brendan Eich em 1995.

*O que é o Javascript?

O Javascript é uma linguagem de script orientada a objetos não vinculada a plataformas. É uma linguagem pequena e leve; não sendo útil como linguagem única ou independente, sendo desenvolvida para se acoplar facilmente a outros produtos e aplicações como web browsers. Adicionando funcionalidades aos programas que são executados nestes ambientes.

O núcleo do Javascript é composto por uma série de objetos como, Array, Date e Math, e um conjunto de elementos de linguagem como operadores, estruturas de controle, e expressões. O núcleo, chamado Core JavaScript pode ser estendido para uma diversidade de objetivos suplementando ele com objetos adicionais; por exemplo:

• Client-side JavaScript estende a linguagem core suplementando objetos para controlar um browser (Navigator ou outro web browser)  e seu Document Object Model (DOM) – Modelo de Documento de Objeto. Por exemplo extensões client-side permitirão a uma aplicação inserir elemento em um formulário HTML e responder a eventos do usuario assim como cliques de mouse, entradas de formulário, e navegação de páginas.
• Server-side JavaScript estende a linguagem core suplementando objetos pertinentes para rodar JavaScript no servidor. Por exemplo, estensões server-side permitirão a uma aplicação se comunicar com a base de dados relacional, prover continuidade de uma informação a partir de uma invocação de outra aplicação, ou  realizar manipulação de arquivos no servidor.

Através da funcionalidade LiveConnect do JavaScript, voce pode permitir a comunicação entre os códigos feitos em Java e JavaScript. Do JavaScript, você pode instanciar objetos Java e acessar seus métodos e campos. Do Java, você pode acessar objetos JavaScript, propriedades, e métodos.

O JavaScript foi criado pela Netscape, e foi utilizado pela primeira vez nos browsers Netscape.

*Este post é uma tradução de parte do JavaScript Guide da Mozilla acessado em 01/07/2011 neste link

Aula Prática 1 – Data Atual com Javascript e HTML

Teremos hoje a primeira aula prática após dois dias de aulas teóricas.
Veremos um código simples exemplificando o uso de javascript e html.
(Não se preocupe irei detalhar estas linguagens em outra aula)
Para acompanhar a aula com mais facilidade sugiro a instalação do Notepad++ v5.9.2
que pode ser encontrado em sua versão portável no site portableapps.com.

Este é o código de uma página HTML que faz uma consulta ao sistema e exibe a data atual (mais tarde ensinarei como tratar esta informação de forma que fique mais funcional).
Segue uma breve explicação do código. <HTML>, <SCRIPT>, <HEAD>, <TITLE> e <BODY> são as Tag Html utilizadas. Tudo que esta entre as tags <SCRIPT> e </SCRIPT> são o código Javascript.

Abra o Notepad++ e crie um novo arquivo, grave-o com a extensão .html, em nosso exemplo aula1javascript.html desta forma o browser entende que é uma página de internet.

Agora a explicação linha a linha.

1- Inicia o html
2- Cabeçalho onde fica o script e o título da página
3- Aqui indica que será utilizado o javascript
4- Declaração da função que criaremos chamada exibeDataAtual()
5- É criado o atributo data que recebe a data atual do sistema
6- Escreve na tela um texto e o valor do atributo data
7- Fim da função
8- Fim da Tag Script
9- Título da página
10- Fim do cabeçalho
11- Inicio do corpo do html e chama a função exibeDataAtual() ao carregar a pagina
12- Fim do corpo do html
13- Fim do html

Este é um pequeno exemplo do que o html e o javascript podem fazer. Grave o arquivo e execute ele pelo browser. Fácil demais.

Download do Código
aula1javascript.zip

Download Ferramenta
Notepad++ Portable Download

Ferramentas

Lista de Ferramentas Utilizadas nas Aulas.

Esta lista irá crescer.

– Notepad++ Portable Download

Aula Inaugural – Parte 2

O que é programação?

Podemos entender programação com o processo de elaboração, escrita, teste e manutenção de um programa de computador.

Um programa de computador é formado por uma série de comandos, anotações e configurações que conduzem o computador a realizar o que dele se espera.

Para que o computador entenda estes comando existem diversas linguagens de programação.

Exemplos de programas:

7-Zip
Access
Adobe Photoshop
Corel Draw
Daemon Tools
Notepad
Pacote Br Office
Pacote Microsoft Office
Publisher
Ubuntu
VLC Media Player
Windows

Exemplos de linguagens:

Assembly
C
C++
C#
Delphi
Groovy
Html
Java
JavaScript
PHP
Python
Ruby
Visual Basic

Referência: http://pt.wikipedia.org/wiki/Programação

Aula Inaugural – Parte 1

Porque aprender a programar?

“Segundo o levantamento, que ouviu 2.008 empresas de serviços de TI no País com 20 ou mais empregados, a receita bruta de serviços de TI em 2009 totalizou R$ 39,4 bilhões.”

A produção de software representa 33,1% desta receita, ou seja 13 bilhões.

A demanda por software cresce a medida em que crescem as vendas de celulares, smartphones, netbooks, notebooks e desktops.

Há também que se pensar no mercado internacional visto que a participação brasileira é considerada pequena pelo IBGE se comparado aos grandes exportadores: Índia, Alemanha e Estados Unidos.

http://blogs.estadao.com.br/link/o-tamanho-do-mercado-de-software/