MinicursoJavascript Dia4

Minicurso de

JavaScript
PET Sistemas de Informação

Quarto Dia 11.06.2015

Everson Feltrin . Lucas de Oliveira . Otávio Cassel . Romeu Casarotto

O que será visto hoje?
▪
▪
▪
▪
▪

Métodos
Eventos
Exemplos de Aplicações
Introdução a JQuery
Exercícios

Métodos
▪ Sub Rotinas;
▪ Determinam elemento; o

comportamento

▪ JavaScript possui implementados; diversos

de

métodos

um já Métodos
▪ Seletores
▪ innerHTML
○

Troca/Insere o conteúdo em uma tag HTML

▪ value
○ Recebe o valor de uma tag HTML
■

Pode setar valores também

Métodos
●

Sintaxe innerHTML

●

Sintaxe value

Métodos
❏

length
○

Retorna o número de caracteres de uma string

▪ focus
○ “Foca” um elemento selecionado.
■

focus

■

blur

Métodos
➔

focus

➔

blur

Métodos
❏

color / fontcolor
❏

❏

Define a cor de um elemento

fontsize
❏

Define o tamanho de um elemento

Métodos
❏

fontcolor / fontsize

Eventos
❏

Ações do usuário
❏ Darão origem à uma interatividade

❏

São os gerenciadores de eventos que permitem associar uma ação a um evento

❏

Mouse, teclado pressionada, entrar ou sair de um campo de um formulário...

❏

Problema: diferença entre os navegadores.

Eventos
❏

onchange
❏

Executa ação ao alterar valor de um elemento
❏

❏

(form, dropdown)

onclick
❏

Executa ação ao clicar em um elemento
❏

botões

Eventos
❏

onchange

❏

onclick

Eventos
❏

onKeyPress
❏

Executa ação ao selecionar um elemento
❏

❏

(input)

onSubmit
❏

Executa evento ao enviar um formulário
❏

(form)

❏

Pode retornar um falso e cancelar a ação

Eventos
❏

onKeyPress

❏

onSubmit

Lembre-se!
❏

Atributos
❏

Name utilizado por php

❏

Id utilizado por JavaScript/JQuery

JQuery
▪ Biblioteca/Framework JavaScript
●

A mais popular

▪ “Escreva menos, faça mais”
▪ Arquivo único
● Uncompressed
● Compressed

▪ https://jquery.com/

JQuery
Principais funcionalidades:
● Compatibilidade entre os navegadores.
● Redução de código.
● Reutilização do código através de plugins.
● Vasta quantidade de plugins criados por