Desenvolvimento Web. Versão 2 Jan/2019. Professor Emiliano S. Monteiro

Tamanho: px

Começar a partir da página:

Download "Desenvolvimento Web. Versão 2 Jan/2019. Professor Emiliano S. Monteiro"

Sonia Natal
5 Há anos
Visualizações:

1 Desenvolvimento Web Versão 2 Jan/2019 Professor Emiliano S. Monteiro

2 Alinhamento, figuras, tabelas, elementos do formulário, div e iframes Professor Emiliano S. Monteiro

3 Exercício Continua

4 Exercício

5 Exercício Mude o valor da border gradativamente para ver a diferença

6 Exercício

7 Carregar aqui uma figura de um site da internet.

8 Exercício

9 Exercício

10 Exercício

11 Exercício

12 Exercício

13 Exercício Continua

14 Exercício

15 Exercício

16 Exercício height="300" width="100%" height="300" width="20%" height="300" width="79%" Sem borda! height="300px" width="100%"

17 Exercício

18 Exercício

19 CSS Interno, CSS inline e CSS Externo Cascading style Sheet Professor Emiliano S. Monteiro

20 Neste exemplo temos CSS interno. O CSS interno é definido na <head> CSS Elementos que serão formatados, para posterior uso dentro da body Cor em hexa Família são todas as fontes do mesmo tipo. Comentário em CSS Continua

21 CSS Inline Estes elementos (h1, h2, p e div) estão sendo formatados pelo que foi definido anteriormente na <head>

23 CSS externo

24 CSS externo

25 Algumas propriedades CSS background-color background-imagem border-width border-style border-color font line-height margin text

26 Fontes serifadas A A A A A I J

27 Introdução ao Javascript Professor Emiliano S. Monteiro

28 Javascript 1. Desenvolvido por: Brendan Eich na Netscape. 2. Não é Java! 3. É um linguagem interpretada. Com ela é possível tratar strings, números, boleanos, operadores, variáveis, funções, condicionais, vetores e objetos. O código Javascript fica entre as tags <script> e </script> Evolução ao longo dos anos, em 1996 a Netscape submeteu o padrão à ECMA para obter a padronização internacional.

29 Saídas do resultado Javascript e eventos Saídas dos Javascript: 1. innerhtml ---> Dentro do código HTML. 2. document.write() ---> Dentro do HTML em outra página. 3. window.alert() ---> Usando uma janela de alerta. 4. console.log() ---> Usando a área de console do Browser. Quando são acionados os eventos: 1. Quando um página HTML terminar de carregar 2. Alteração de dados em campos HTML 3. Um botão HTML for clicado

30 JSON - JavaScript Object Notation. JSON var pessoa = { nome": ana", idade": 20 }; { "ana" : {"endereco":"rua a", "idade":20 }, "carlos" : {"endereco":"rua b", "idade":25 }, "joao" : {"nome": rua c", "idade":30 } } XML <?xml version="1.0"?> <pessoa> <pessoa id="ana"> <endereco>rua a</endereco> <idade>20</idade> </pessoa> <pessoa id="carlos"> <endereco>rua b</endereco> <idade>25</idade> </pessoa> <pessoa id="joao"> <endereco>rua c</endereco> <idade>30</idade> </pessoa> </pessoa>

31 A janela Console Log do Browser

32 A janela Console Log do Browser

33 A janela de alerta do Browser

Variáveis, Operadores, Tipos de dados e Funções var Nome = Professor; var Matricula = 123; var Soma = Valor1 + Valor2; var Cargo = "Professor"; // String var Altura = 170; //

34 Variáveis, Operadores, Tipos de dados e Funções var Nome = Professor; var Matricula = 123; var Soma = Valor1 + Valor2; var Cargo = "Professor"; // String var Altura = 170; // Number var Objeto123 = {Nome:"Emiliano", SobreNome:"Monteiro"}; // Object function Soma(valor1, valor2) { return valor1+valor2; } document.getelementbyid("exemplo").innerhtml = Soma(2,2);

35 Lista de métodos Javascript

36 Tipos de declarações de variáveis e constantes let const var (estilo antigo!)

37 Testes e condicionais Laço for: var Semana = ["Domingo", "Segunda", "Terca", "Quarta", "Quinta", "Sexta", "Sabado"]; var texto = ""; var incremento; for (i = 0; i < Semana.length; i++) { texto += cars[incremento] + "<br>"; Laço While... Do: do { texto += "O incremento foi... " + incremento; incremento++; } while (incremento < 10); For e incremento: for (incremento = 0; incremento < 10; incremento++) { if (incremento === 3) { continue; } texto += "O incremento foi... " + incremento + "<br>"; } Break: for (incremento = 0; iincremento < 10; incremento++) { if (incremento === 3) { break; } texto += "O incremento foi... " + incremento + "<br>"; } Condicional IF: if (nota > 7) { Resultado = "Aprovado"; } else { Resultado = "PF"; } Switch Case: switch (new Date().getDay()) { case 0: day = "Domingo"; break; case 1: day = "Segunda"; break; case 2: day = "Terca"; break; case 3: day = "Quarta"; break; case 4: day = "Quinta"; break; case 5: day = "Sexta"; break; case 6: day = "Sabado"; }

Sem o modo estrito, atribuir um valor a uma variável não declarada cria automaticamente uma variável global com esse nome. 5.

38 Strict Mode Modo estrito Modo estrito 1. O ECMAScript versão 5 introduziu o modo estrito no JavaScript. 2. A intenção é permitir que os desenvolvedores optem por uma versão melhor do JavaScript. 3. Os objetivos do modo estrito são permitir a depuração mais rápida dos problemas. 4. Sem o modo estrito, atribuir um valor a uma variável não declarada cria automaticamente uma variável global com esse nome. 5. Com o modo estrito não se pode, por exemplo, usar variáveis não declaradas. 6. O modo estrito de atinge vários elementos da linguagem... var Todo o código a partir da linha 9 esta em modo estrito, haverá erro na linha 16! Todo o código dentro da função esta em modo estrito, haverá erro apenas na linha 24!

39 Exemplos de algoritmos em Javascript

40 Bancos de dados

41 Bancos de dados

42 Bancos de dados

43 Onde vai o código Javascript? Head Javascript Pode estar em um arquivo externo! Body Javascript

44 Javascript externo, variáveis e alertas

45 Prompt e confirm

46 Formulários

47 Exemplo Continua

50 Console Output

51 PHP Hipertext preprocessor Professor Emiliano S. Monteiro

52 Introdução ao PHP É uma linguagem server-side. É baseada e, Perl, Java e C. É independente de plataforma. Boa para criação de conteúdo dinâmico. Seu criador foi Rasmus Lerdorf em Zeev Suraski e Andi Gutmans introduziram um novo interpretador em 1997 e entraram no projeto. No final da década de 90 a Zend reescreveram o PHP. Em 2000 foi adicionado um novo parser ao projeto chamado de motor Zend (o parser realizar análise sintática da linguagem). Em 2004 surge o modelo OO suportado pelo Zend II. A versão 5 esteve em uso entre 2004 até A versão atual do PHP é a de 01/mar/2018.

53 Atenção Os arquivos nesta parte do curso devem ter extensão.php!! Não se esqueça!!

54 PHP Web Server Módulos LDAP MySQL Oracle ODBC Java IMAP Outros... Banco de dados Zend engine Browser Web Server Interface (SAPI) Zend módulos funcionais Executor Run time compiler Páginas HTML e PHP

55 Tipos de dados & Operadores String Integer Float (ou double) Boolean Array Object NULL Resource + soma - subtração * multiplicação / divisão % modulo ++ incremento -- decremento

56 Variáveis e atribuição, concatenação

58 Formatação de data e hora, concatenação, echo

59 Exemplo

60 Exemplos

62 Exemplo

63 Exemplo

64 Exemplo

65 Exemplo

66 Exemplos

67 Exemplos

70 Exemplo

71 Funções para operações em arquivos fgetc() fgets() fgetcsv() filetype() feof() is_file() is_dir() is_executable() realpath() rmdir() Lê um único caractere de cada vez. Lê uma única linha por vez. Lê uma linha de valores separados por vírgulas. Retorna o tipo do arquivo. Verifica se o final do arquivo foi atingido. Verifica se o arquivo é um arquivo normal. Verifica se o arquivo é um diretório. Verifica se o arquivo é executável. Retorna o caminho absoluto canonicalizado. Remove um diretório vazio.

Documentos relacionados

Java: Linguagem de programação (OOP) JavaScipt: Linguagem de scripts (OOP)

Java: Linguagem de programação (OOP) JavaScipt: Linguagem de scripts (OOP) Executado do lado do cliente, interage com o usuário sem a necessidade do script passar pelo servidor. Desenvolvida por Brendan Eich, da Netscape Communications Corporation em 1995 (LiveScript). 1ª linguagem