LAB3 Resumo PDF

JavaScript: linguagem de programação para a Web (inicialemente como LiveScript no Netscape Navigator 2, 1995). Todos os browsers atuais têm interpretadores de JS. Não é Java. Oficialmente é ECMAScript. Interpretada e não compilada. Segura: não permite escrever/ler no computador do cliente/servidor,...

JavaScript: linguagem de programação para a Web (inicialemente como LiveScript no Netscape Navigator 2, 1995). Todos os browsers atuais têm interpretadores de JS. Não é Java. Oficialmente é ECMAScript. Interpretada e não compilada. Segura: não permite escrever/ler no computador do cliente/servidor, exceto cookies/local storage. Insegura: acesso ao código fonte. Requisitos: editor de texto (notepad) e um browser. Client-side vantagens: envio mais rápido de informação por parte do servidor, informação pode ser apresentada ao utilizador logo que processada, permite resposta rápida às interações do utilizador, liberta o servidor de processamento. desvantagens: depende do browser do cliente, pode implicar interpretações diferenciadas do código, “exposição” do código fonte, tecnologias server-side são interpretadas e executadas no servidor Web. Server-side vantagens: proteção do código fonte, é enviado para o cliente apenas código HTML, CSS e Javascript, execução segura de algoritmos, permite interação com elementos do servidor (bases de dados, ficheiros, API), não há dependência do cliente (computador do cliente, browser utilizado ou plug-in). desvantagens: maior carga de processamento no servidor, dependência de ligação permanente ao servidor. Fluxo de informação quando se acede a um sítio Web: User>Browser>HTTP Request>Web Server>HTTP Response>Browser>User Com server-side o servidor executa scripts ou códigos antes de enviar a resposta, permite gerar conteúdos dinâmico e personalizado antes da resposta final. Qual o fluxo de informação quando se acede a um sítio Web? O browser efetua um pedido por HTTP ao servidor web, o servidor devolve um ficheiro HTML (o HTML devolvido pode conter JavaScript), o browser interpreta o HTML e constrói o DOM, a página é “renderizada” no browser, são enviados novos pedidos HTTP para os outros elementos da página, no browser o JavaScript permite, a qualquer momento, alterar o HTML através da manipulação do DOM. O JavaScript adiciona comportamento e funcionalidades dinâmicas à página, permitindo manipular o HTML e o CSS, criando interações como animações, validações de formulários, carregamento assíncrono de dados… Entrada de dados: o JavaScript captura dados de entrada, geralmente por meios de elementos de formulário, como campos de texto e botões ou eventos de usuários (cliques e teclas pressionadas). Através do Document Object Model (DOM), ele pode acessar e manipular esses elementos para receber dados. Saída de dados: o JavaScript pode exibir dados de saída de várias maneiras: atualizar o conteúdo de elementos HTML dinamicamente, exibindo mensagens usando alert() ou no console do navegador com console.log(), manipulando o DOM para adicionar, remover ou modificar elementos na página conforme necessário. Localização do JavaScript numa página HTML: Inline, Embedded, Ficheiro Externo. Vantagens da utilização de ficheiros externos: reutilização, manutenção, cache. DOM: tree model: representação hierárquica do DOM, elementos (nós) principais [elemento, atributo, texto]. Como se acede aos elementos do DOM getElementByID(“valor do atributo id”) O identificador é case-sensitive e retorna ao null se o elemento não for encontrado. Porquê é importante? O acesso ao DOM é essencial para manipular o conteúdo e o estilo de uma página em tempo real. Se houver 2 elementos com o mesmo ID, o getElementByID só retorna o primeiro encontrado. Operação de Escrita: quando alteramos o conteúdo de um elemento no DOM, usamos uma operação de escrita. Document.getElementById(“intro”).innerHTML=”erro”. Operação de Leitura: quando obtemos o conteúdo de um elemento no DOM, estamos a realizar uma operação de leitura. Txt_info=document.getElementById(“intro”).innerHTML. Linguagem Weakly Typed: não é obrigatória a declaração de variáveis, não é possível especificar o tipo de dados de uma variável, os tipos de dados podem ser convertidos automaticamente durante a execução, mais simples de utilizar, mas mais suscetível a erros de programação. Variáveis: case sensitive, não podem ter o nome de palavras-chave e palavras reservadas (todas as que fazem parte da linguagem), caracteres proibidos (menos “_” e “$”), nomes têm que começar com: letra, “_” ou “$”, ser consistente nos nomes e na forma (lower case ou camel caps, nomes com significado, prefixos). Declaração de variável var minha_variavel, $mais_outra Atribuição de variável minha_variavel=30 Variável não declarada/não inicializada=undefined Eventos podem ocorrer por ações do utilizador (rato, teclado, forms, browser), ou automaticamente/temporalmente (timers). Eventos declarados embedded ou externos. Evitar eventos declarados inline. Linhas de código terminadas por “;” na mesma linha ou em linhas diferentes. Comentários no código (“//” comentário numa linha única, “”. Para criar uma janela de alerta no browser (x=3; window.alert(x); alert(“olá mundo”);). Útil no debug do código. Permite mostrar o conteúdo de variáveis. Ainda no âmbito do debug do código Consola (x=3; y=2; z=x+y; console.log (“z= “+z);) Para criar uma janela de confirmação no browser (x=3; r=window.confirm(x); z=confirm(“olá mundo”);) Clicando no OK devolve true Clicando no Cancel devolve false Para criar uma janela para a introdução de dados (prompt (texto, valor_por_omissão); idade=window.prompt(“qual a sua idade?”, 18);) Clicando no OK devolve o valor por omissão ou o valor introduzido Clicando no Cancel devolve null Em operações de adição os operandos numéricos podem ser convertidos em strings, o operador + pode efetuar operação de adição ou concatenação, de acordo com o tipo de dados. Valores lidos de campos de formulários/promp são sempre do tipo texto, se necessário, devem ser contidos para número. Qual a diferença entre os atributos innerHTML e value? O atributo innerHTML representa o conteúdo HTML interno de um elemento, permite acessar e modificar todo o conteúdo. O atributo value representa o valor de um elemento de entrada como , ou. É utilizado principalmente com elementos de formulários que contêm dados que podem ser inseridos ou manipulados, como caixas, botões e áreas de texto. Em resumo, o innerHTML existe para atualizar o conteúdo dos elementos de exibição, o value para lidar com dados inseridos em elementos de formulário. Conversão de dados – explicita parseInt()