Buscar

Aula 1 Introdução a JavaScript



Continue navegando


Prévia do material em texto

Prof. Ildo Ramos Vieira
Graduado em ciências de computação – UFC
Especialista em Segurança de Informação - IGTI
Mestre em ciências de computação - UFC
Doutorando em Engenharia de Teleinformática - UFC
Objetivos
 Apresentar os conceitos de programação client-side e server-
side;
 Apresentar as estruturas de programação em Javascript: 
sequência, repetição e decisão;
 Apresentar as formas de trabalhar com vetores em Javascript;
 Apresentar os conceitos e forma de trabalho com JSON.
Conteúdos
1. Linguagem JavaScript
2. Biblioteca JQuery
3. Criação de formulário HTML 5
4. Programação de páginas dinâmicas com PHP
5. Programação Orientada a objetos
6. Integração de PHP com Banco de dados classe PDO
Avaliação
1. Nota1 = AV1+trabalhos+listas
2. Nota1 = AV2+trabalhos+listas
3. AV3
Bibliografia Básica 
1. ALVES, William Pereira. Construindo uma Aplicação Web 
com PHP e MSQL. 1. ed. São Paulo: Novatec, 2017.
2. DALL`OGLIO, Pablo. PHP: Programando com orientação a 
objetos. 3. ed. Sâo Paulo: Novatec, 2015.
3. SEGURADO, Valquiria, S. Projeto de Interface com usuário 
(Biblioteca Virtual). 1. ed. São Paulo: Pearson, 2015 
Uma Introdução
 Também chamada de JS, é a linguagem de criação 
de scripts para a Web;
 É utilizado por bilhões de páginas para: 
 Adicionar funcionalidades;
 Verificar formulários;
 Comunicar com servidores;
 E muitos mais.
Node.js
Apache CoucDb
Adobe Acrobat
 O JavaScript é uma linguagem baseada em 
protótipos, multi-paradigma e dinâmica;
 suportando estilos como:
• Orientação a objetos
• Imperativos
• Declarativos
 (como por exemplo a programação funcional).
 Originalmente criada na Netscape por Brendan 
Eich em 1994;
 Disputa: Netscape vs Microsoft: 
◦ Microsoft -> Visual Basic;
 Visual Basic -> VB Script;
◦ Java da Sun surgia como potencial;
 Java para programadores não profissionais:
 Javascript!
 Java e JavaScript são “coisas” completamente distintas e 
desconexas;
 Compartilham apenas um passado de “disputa territorial” 
contra a Microsoft; 
 JavaScript não permite a criação de applets
nem de aplicativos; 
 JavaScript reside dentro de documentos HTML 
e pode prover diferentes níveis de 
interatividades não suportados pelo HTML 
sozinho;
 Diferenças chaves em relação ao Java:
◦ Java é uma linguagem de programação;
◦ JavaScript é uma linguagem de script;
◦ Aplicativos Java são executados pela máquina virtual Java;
◦ Scripts JavaScript são executados pelos browsers;
◦ Java é compilado;
◦ JavaScript é texto puro;
◦ Cada tecnologia requer um plug-in diferente. 
 Atualmente, o maior mantedor da linguagem 
é a Fundação Mozilla;
◦ Encontramos ótimos materiais e tutoriais sobre 
JavaScript na W3School, mas também encontramos 
referência completa do JavaScript no site do 
Mozilla:
 https://developer.mozilla.org/en/docs/JavaScript 
 Com o tempo, muitas funcionalidades foram 
criadas em forma de Script para os browser e 
foram “incorporadas” ao JavaScript:
◦ JavaScript hoje é um conjunto de funcionalidades e, 
até mesmo, diferentes padrões. 
 Os principais padrões a destacar são:
◦ A Linguagem Núcleo:
 ECMAScript (Versão 7, de Junho de 2016);
 Padrão mantido por ECMA International Associação 
Industrial de padronização de tecnologias da 
Informação e Comunicação;
◦ DOM:
 Document Object Model;
 Define a Interface da Linguagem com o Browser;
 Padrão mantido por W3C; 
 é um padrão estabelecido pelo W3C (World Wide Web 
Consortium) o qual defne um modo de acessar os elementos 
de uma página HTML ;
 DOM é “uma plataforma e uma interface neutra com relação a 
linguagens, a qual permite que programas e scripts acessem 
e atualizem dinamicamente o conteúdo, a estrutura e o estilo 
de um documento” 
 O DOM é importante porque com ele é possível 
manipular os elementos HTML e criar páginas mais 
interativas
 O DOM é dividido em 3 partes:
1. Core DOM: é o modelo padrão para todos os 
documentos;
2. XML DOM: padrão para documentos XML;
3. HTML DOM: padrão para documentos HTML 
 A inclusão de código Javascript em um documento HTML é 
muito simples.
 A inclusão é feita pela tag <script> e tudo que estiver dentro 
desta tag, até sua fnalização em </script> será considerado. 
 Podemos inserir o código Javascript em alguns lugares de 
um documento HTML. Lembre-se que é possível inserir 
várias vezes a tag <script> no documento.
 Os lugares que podem ser inseridos são:
◦ No cabeçalho ou no corpo do documento, ou seja, dentro da tag
<head> ou <body> ou nos dois simultaneamente. 
 Exemplo
 No exemplo anterior, perceba que a tag <script> pode ser 
usada tanto dentro do <head> ou dentro do <body> ou 
nos dois lugares, simultaneamente ou não.
 Em arquivos externos: os scripts também podem estar 
fora do documento HTML. Neste caso é criado um arquivo 
externo com a extensão .js e referenciado no documento 
HTML 
Exemplo:
Exemplo:
Algumas Considerações
1. quando usamos arquivos externos, o script será executado 
como se estivesse tomando lugar da sua referência.
2. o conteúdo do arquivo meuScript.js substituirá a referência 
contida na linha 4. Portanto, se a referência estivesse no 
<head>, seria executado lá, antes da montagem da página 
pela tag <body> 
Vantagens:
1. Separa o código HTML do Javascript
2. Como consequência da primeira vantagem, separar o 
código aumenta a facilidade de manutenção do projeto 
3. Quando separamos o arquivo Javascript, podemos usar um 
recurso chamado cache e isto faz com que as páginas 
carreguem mais rapidamente. 
Incluir vários arquivos simultaneamente
Usar referências externas com uma URL ou por meio de um 
caminho relativo:
Por meio de URL
Por meio de um caminho relativo
 Que implementações de JavaScript estão 
disponíveis?
◦ https://developer.mozilla.org/pt-
BR/docs/Web/JavaScript/About_JavaScript
 Recursos para JavaScript
◦ https://developer.mozilla.org/pt-
BR/docs/Web/JavaScript/About_JavaScript#Recursos
_para_JavaScript
 Iniciando com a Web
 Introdução ao HTML
 Introdução ao CSS
Mão na massa