Aula 6 – Programação web utilizando Javascript PDF

Introdução às tecnologias Web - ITW Aula 6 – Programação web utilizando Javascript Sumário Linguagens de programação O que são e para que servem? Quais as linguagens mais utilizadas e para quê? Como funcionam? Breves noções A linguagem Javascript Introdução Sintaxe JavaScript Interacção com...

Introdução às tecnologias Web - ITW Aula 6 – Programação web utilizando Javascript Sumário Linguagens de programação O que são e para que servem? Quais as linguagens mais utilizadas e para quê? Como funcionam? Breves noções A linguagem Javascript Introdução Sintaxe JavaScript Interacção com o DOM Eventos Como se programam os dispositivos? Os diversos dispositivos – computadores, tablets, telemóveis, relógios, … – executam sempre código binário (101001010001001… ) ajustado à linguagem interna do seu processador. A linguagem interna de um processador, ou seja, o conjunto de instruções que é capaz de processar, varia de dispositivo para dispositivo. Pergunta: … mas se a linguagem de programação de cada dispositivo é distinta das demais, temos de desenvolver um programa para cada tipo de dispositivo? Resposta: Não! De modo a faciltar o processo de criação de código máquina – e evitar que tenhamos de saber a linguagem máquina dos diversos processadores – foram desenvolvidas as “linguagens de programação”. Linguagens de programação O que são? Uma “linguagem de programação” é uma linguagem que possui uma sintaxe (formato – com chavetas, com tabuladores, …) e uma semântica (instruções para a prossecução de tarefas – if’s, for’s, …). É usada para expressar uma sequência de ações computacionais que formam um “programa” que, por sua vez, é executado num dispositivo. Existem centenas de linguagens de programação e novas linguagens surgem frequentemente, trazendo novos paradigmas e estabelecendo novos padrões para os programadores. Por isso, é importante conhecer as diferenças principais entre as linguagens e quando é que o uso de cada uma delas é mais adequado. Quais são as linguagens de programação mais utilizadas? The State of Developer Ecosystem 2023 This report has been created based on the responses of 26,348 developers from around the world. Within the State of Developer Ecosystem Report, you'll find information covering a wide range of topics, from programming languages, tools, and technologies to demographics and fun facts. We'll also take a look at the unique lifestyle of developers, shedding light on their passions and interests. This year, we've also extended our inquiry to AI. We've examined developers’ views on AI, their concerns, the commonly used features of AI assistants, and the current adoption of AI-enhanced tools. https://www.jetbrains.com/lp/devecosystem-2023/ Javascript Utilização da IA Os entrevistados parecem ter uma visão positiva da IA em geral. Menos de um quinto deles está preocupado que se torne hostil aos humanos. No entanto, 6 em cada 10 entrevistados têm preocupações de segurança sobre o uso da IA. Os desenvolvedores usam ferramentas gerais de geração de texto de IA com mais frequência do que ferramentas especializadas de geração de código de IA. No entanto, como as mais recentes ferramentas de geração de texto de IA, como ChatGPT, também são capazes de escrever código, os desenvolvedores podem estar a utilizá-las para esse propósito. As ferramentas especializadas mencionadas parecem estar atraindo interesse, mas seja por causa da integração imperfeita com os fluxos de trabalho ou abordagens genéricas, poucos desenvolvedores estão aderindo a elas neste momento. Notem que o Gemini da Google “ainda” não aparece nesta figura Linguagens de programação Conceitos básicos Pergunta: mas se escrevemos o programa em texto, como é feita a tradução do texto para o código binário – sequência de 1’s 0’s – percebida pelo processador do dispositivo? A tradução é tipicamente feita em várias fases, sendo as mais comuns a análise léxica, a análise sintática (ou parsing), a geração de código e a otimização. Esse processo é conhecido como compilação ou interpretação do programa. Linguagens de programação Conceitos básicos Numa linguagem compilada, o compilador verifica a sintaxe do código escrito para garantir que esta está de acordo com a semântica adequada e, caso tudo esteja correto, gera um código executável a partir do código fonte escrito pelo programador. O código executável não possui o conteúdo do código fonte, portanto programas de linguagens compiladas são melhores de distribuir quando o programador não quer que o seu código seja público. A versão compilada do programa tipicamente é armazenada, de forma que o programa pode ser executado um número indefinido de vezes sem que seja necessária nova compilação, o que compensa o tempo gasto na compilação Linguagens de programação Conceitos básicos Se o texto do programa for executado à medida que vai sendo traduzido,linha a linha, comando a comando, como por exemplo em linguagens como o JavaScript, Basic, Python ou Perl, então diz-se que o programa está a ser interpretado e que o mecanismo utilizado para a tradução da linguagem em código máquina é um interpretador. Programas interpretados são geralmente mais lentos do que os compilados, mas são também geralmente mais flexíveis, já que podem interagir com o ambiente mais facilmente – tipicamente, em programação web, basta alterar a página, guardá-la e atualizá-la, tudo isto sem ser necessário parar a execução da aplicaçao. Muitos de vós, infelizmente, já viram o verificador semântico de HTML a funcionar em tempo real … Quando escrevem código HTML e aparecem uns sublinhados a verde ou vermelho, … isso significa que o interpretador sintático detetou uma anomalia (falta fechar uma aspa ou um marcador html, …) que é necessário corrigir para que seja obtido o resultado desejado. Noutras linguagens de programação é necessário executar um programa para obter o mesmo resultado. Linguagens de programação Linguagens “tipadas” (do inglês typed): Nas linguagens tipadas, com tipos de dados, as operações são realizadas sobre estruturas de dados bem definidas e cada operação define o tipo de dados que espera receber. Nas linguagens fracamente tipadas, as operações são aplicadas para qualquer estrutura de dados; porém, essas operações podem falhar em tempo de execução caso a estrutura não suporte a operação. Java (typed) Ruby (untyped) Javascript (untyped) float soma(float a, int b) function soma (a, b) def soma (a, b) { { return a + b return a + b; return a + b end } } Numa função em Java, os tipos de dados para a Numa função em Ruby ou Javascript, a função soma pode receber quaisquer tipos de dados função soma estão bem definidos (a é float e b é para a e b, e a operação será aplicada sobre esses tipos, devolvendo um resultado de tipo int) e o tipo de dado que a função devolve desconhecido à partida: também (resultado é float). se a e b forem String, o resultado será uma String concatenada de a e b; se a e b forem inteiros, o resultado será um inteiro que representa a soma a+b; se a for um float e b um inteiro, o resultado será um float que representa a soma a+b. A linguagem Javascript Porquê JavaScript? O JavaScript é uma das três linguagens (interpretadas) que todos os que desenvolvem páginas web têm de aprender: 1. HTML para definir o conteúdo das páginas da web; 2. CSS para especificar o layout das páginas da web; e 3. JavaScript para programar o comportamento das páginas da web! A linguagem Javascript Introdução O JavaScript é uma linguagem de script (interpretada) orientada a objetos e que funciona em múltiplas plataformas – tanto do lado do cliente como do lado do servidor. Tanto pode ser executada num browser (o mais habitual, como vimos nos gráficos do questionário inicial) como no sistema operativo (mais raro). O código JavaScript pode estar ligado a objetos do ambiente (janel do browser, a um botão numa página, …) e fornece a possibilidade de controlo programático sobre os mesmos. De acordo com a definição anterior, o Javascript é uma linguagem fracamente tipada. A linguagem Javascript Para que serve? Possui uma biblioteca padrão de objetos, tais como Array, Date, Math, e um conjunto fundamental de elementos da linguagem tais como operadores, estruturas de controle, e statements. O JavaScript pode ser aumentado com objetos adicionais (incorporando bibliotecas) para uma variedade de propósitos. Por exemplo: Um programa em JavaScript executado num servidor fornece objetos relevantes para aceder a funcionalidades diversas – ambiente, bases de dados, sensores, etc.. Por exemplo: extensões do lado do servidor permitem que uma aplicação comunique com uma base de dados, garanta continuidade de informação entre invocações da aplicação, ou realize manipulações de ficheiros no servidor. A linguagem Javascript Para que serve? Um programa em JavaScript executado no browser fornece objetos para controlar o browser e o seu Document Object Model (DOM). Por exemplo, extensões de cliente permitem a uma aplicação adicionar elementos num formulário HTML e responder a eventos do utilizador tais como cliques, texto adicionado, e navegação na página. Vantagens e desvantagens do Javascript Como é uma linguagem interpretada, é processada aos blocos e interpretada à medida que é necessário converter as diversas estruturas para uma representação capaz de ser executada. A vantagem clara desta aproximação é que aparentemente basta executar diretamente o código escrito pelo programador. A desvantagem é que muitos erros só são detectados quando o fluxo de execução atinge a linha onde o erro está presente – o que, normalmente, provoca paragens na execução do código nas linhas subsequentes ao erro. Para que serve o javascript A linguagem Javascript foi originalmente implementada como parte dos web browsers para que estes pudessem executar programas (que em javascript se denominam scripts) do lado do cliente e interagissem com o utilizador sem a necessidade deste recorrer ao servidor. Um script javascript permite: * controlar o web browser, * realizar comunicações assíncronas, * alterar o conteúdo do documento exibido de modo dinâmico. Inclusão de script javascript numa página html O processo de inclusão numa página html é semelhante à da inclusão dos estilos CSS (que utilizam o marcador ). Utilizam o marcador , normalmente, colocado no cabeçalho da página html ou no final do corpo do documento , de modo a não interefrir com a normal apresentação do documento. O código Javascript pode ser incluído diretamente na página html ou pode ser obtido de uma fonte externa – em ficheiros, normalmente, com a extensão “.js”. Inclusão direta na página fim do Inclusão direta na página fim do Versatilidade vs segurança Conforme referido, a linguagem Javascript é bastante poderosa e o facto poder ser executada em qualquer browser de qualquer sistema operativo / dispositivo, permite desenvolver aplicações que podem ser distribuídas de forma muito eficaz – elevada versatilidade. No entanto, o código Javascript é sempre enviado ao cliente na sua forma textual, podendo, por isso, ser rapidamente copiado – segurança reduzida. Para dificultar a leitura do código, protegendo a autoria do mesmo, e para poupar no espaço ocupado pelo ficheiro, de modo a não prejudicar o carregamento e posterior apresentação da página, este código é muitas vezes “minimizado” (tradução livre de minified). Exemplos de minimização de ficheiros: bootstrap.min.css, bootstrap.min.js, … A linguagem Javascript A linguagem Javascript A sintaxe da linguagem Javascript é inspirada na linguagem C e algo semelhante à linguagem Java. Não iremos explorar com detalhe todos os aspetos de sintaxe, ou todas as propriedades da linguagem, mas iremos possibilitar uma utilização básica da mesma – o que não impede aos estudantes de fazerem a sua própria aprendizagem. A sintaxe básica da linguagem Javascript é baseada em instruções, devendo cada uma das instruções ser terminada com o carater ; (ponto-e-vírgula). A linguagem Javascript é case-sensitive, o que significa que se deve ter cuidado na escrita (Sim ≠ sim ≠ SIM). A linguagem Javascript Programação web Se modo a ser possível executar os programas (script’s) numa página web, estes devem ser colocados dentro do marcador () Se as instruções não estiverem colocadas dentro do marcador (), o browser interpretará o código como HTML e mostrará o texto na página… function soma(x, y) { return x + y; } var resultado = soma(3, 4); console.log(resultado); Sintaxe da linguagem Javascript Declaração e atribuição de variáveis A declaração de variáveis é feita através da utilização da palavra reservada var ;. A atribuição de valores a uma variável faz-se de modo convencional: = ; Javascript test file var x; x = 3; Sintaxe da linguagem Javascript Funções De forma a melhor organizar o código, e evitar a duplicação desnecessária de código, é possível organizar um programa em funções. Assim, uma função pode ser entendida como uma “caixa negra” com um conjunto de parâmetros de entrada e um valor de saída. No seu interior possui conjunto de comandos que realizam uma tarefa específica. Pode ser utilizada por outras funções. function nome_da_funcao(arg1, arg2, arg3) { } Sintaxe da linguagem Javascript Funções function nome_da_funcao(arg1, arg2, arg3) { } A declaração de funções faz uso da palavra reservada function, tal como descrito no exemplo. Estes elementos são seguidos por um nome_da_funcao, uma lista de argumentos e um corpo. A lista de argumentos é opcional. Funciona como a interface de comunicação (passagem de valores/dados) entre o programa (chamador) e a função. Caso precise declarar mais de um parâmetro, deve separá-los por vírgulas. O corpo possui as linhas de código que permitirão a execução da ação. A função é delimitada por chavetas ({}). Sintaxe da linguagem Javascript Função de sistema console.log() A instrução console.log() permite a apresentação de valores na Consola da janela de deputação (F12). Exemplo de apresentação do conteúdo da variável x na consola do navegador. Javascript test file var x; Nota: Neste exemplo invocamos a função x = 3; console.log() que tem como argumento console.log(x); (ou parâmentro de entrada) a variável x. Os resultados são apresentados na janela de depuração (F12) Sintaxe da linguagem Javascript Operações Podem ser aplicados operadores aritméticos às variáveis, tais como a soma, ou a subtração, multiplicação, divisão, módulo (%), incremento (++), decremento (--). O significado da operação irá variar de acordo com o tipo de variável (que depende do seu conteúdo atual). Um bom exemplo é o operador +, que no caso de números irá calcular a soma, mas no caso de sequências de caracteres irá concatená-los. Sintaxe da linguagem Javascript Exemplo com operações O exemplo seguinte demonstra a aplicação do operador +: Javascript test file var s = "3"; No caso da variável x, inteiro, calculou a soma; var x = 3; console.log(s + 1); No caso da variável s, string, fez uma concatenação. console.log(x + 1); Sintaxe da linguagem Javascript Função de sistema document.write() A função document.write(…) “escreve” o resultado da operação na janela de visualização do browse, ao invés da consola da janela de depuração (F12). Analisemos o resultado do código seguinte: Javascript test file Quando uma operação aritmética não é válida, a linguagem Javascript faz uso do termo NaN que significa Not a Number. Isto pode ser obtido, facilmente, se subtrairmos um inteiro a uma String não numérica! var s = "texto"; var x = "3"; document.write(s - 2); document.write(""); document.write(x - 2); document.write(""); document.write(x + 2); Sintaxe da linguagem Javascript Exemplo de utilização de funções Utilizando como exemplo uma função que realize a soma de dois números, pode ser declarada e invocada da seguinte forma: Javascript test file function soma(x,y){ return x+y; } var resultado = soma(3,4); console.log(resultado); Como o código é interpretado sequencialmente, a declaração de funções deve ser feita antes da sua utilização. Sintaxe da linguagem Javascript Condições (if … else) A execução condicional é implementada através das palavras reservadas if … else, no seguinte formato: if (comparação) { } else { } Os operadores de comparação são: <  Menor >  Maior >=  Maior !=  Diferente ==  Igual, etc… Sintaxe da linguagem Javascript Exemplo de utilização de instruções condicionais (if … else) Considere o seguinte excerto: O operador igual (==) permite comparar tipos diferentes, convertendo os seus valores. Javascript test file Por vezes é necessário comparar quer o “valor” quer o “tipo” de uma variável. var a = "3"; Para isso, existe o operador === e a sua negação, o operador !==. var b = 3; if (a == b) alert("Iguais"); Na linguagem Javascript diz-se que estes comparadores else alert("Diferentes"); verificam se o valor é igual e o tipo idêntico. No caso anterior, o valor de a é igual ao de b mas as variáveis não são idênticas. Neste exemplo, as variáveis a e b possuem o mesmo “valor”, 3, mas são de tipos diferentes. Uma é uma string (cadeia de carateres) a outra um número inteiro. Caso tivesse sido utilizado o operador ===, o resultado seria distinto. Sintaxe da linguagem Javascript Condições (switch … case) Quando há mais que uma condição para testar, é possível a utilização de um conjunto de instruções if... else encadeadas ou, em alternativa, a utilização da instrução switch … case. Para cada comparação há uma instrução case. Cada instrução case deve ser separada por uma Document instrução break. Caso contrário, o programa continuará a fazer as comparações seguintes. var a = "abc"; A instrução default será executada caso nenhuma das switch (a) { instruções de comparação tenha sido válida. case "abc": alert("string abc"); Esta instrução não precisa do separador break por ser a break; case 3: instrução final. alert("inteiro 3"); break; default: alert("outro"); } Sintaxe da linguagem Javascript Ciclos Para implementar ciclos, a linguagem JS suporta as instruções while, do-while, e for: Diferenças entre os diversos tipos de ciclos: do { do-while – as instruções do ciclo são executadas pelo menos uma vez porque a condição de comparação é } while (condição); executada no fim do ciclo; while (condição) { while – as instruções do ciclo são executadas 0 ou mais } vezes, pois o ciclo só se realiza se a condição se verificar for (inicio; comparação; incremento) { à partida; } for – as instruções do ciclo são executadas um número fixo de vezes – desde o início até à comparação com um incremento. Interação com o DOM (Document Object Model) Document Object Model (DOM) O grande potencial da linguagem Javascript quando é executado no browser advém da possibilidade de aceder a qualquer elemento da página HTML. Isso permite manipular, em tempo real, o conteúdo da página, os estilos e as marcas após a página ter sido carregada sem necessidade de a recarregar novamente. Quem possibilita esta interação é o Document Object Model (DOM). Tal como o nome indica, o “modelo de objetos do documento (HTML)” permite que estes sejam utilizados / acedidos / manipulados através de Javascript. Como aceder aos objetos do DOM? No HTML DOM, tudo são nós: O documento em si é um nó do tipo document; Todos os elementos HTML são nós do tipo element; Todos os atributos HTML são nós de tipo attribute; O texto dentro dos elementos HTML é um nó do tipo texto ; Comentários são nós do tipo comment; Exemplo da estrutura DOM de uma página html My title My header My link O objeto document Quando um documento HTML é aberto por um browser, ele passa a ser um objeto do tipo document. Assim, o objeto document é o nó raiz do documento HTML e o “dono" de todos os outros nós: element’s, text’s, atribute’s, comment’s. O objeto document fornece as propriedades e os métodos que permitem aceder a todos os nós, através do JavaScript. Interação com o Document Object Model Noção de objeto – propriedades, métodos e eventos Estendendo o conceito, podemos considerar que cada nó de um documento html é, ele próprio, um objeto… Exemplo: Universidade de Aveiro Cada objeto (ainda (?) não foi abordado nas disciplinas de programação) possui um conjunto de propriedades, métodos e eventos. Assim, um elemento … é um objeto; um elemento … também é um objeto; … Para aceder programaticamente a este objeto, cujo id="URL_UA" faremos: var x = document.getElementById("URL_UA"); Interação com o Document Object Model Elementos inexistentes / função de sistema alert(message) Caso se procure por um elemento com ID inexistente, o valor devolvido pelo método getElementById será null. Exemplo: Note a utilização de uma nova função: alert(message): Esta função exibe uma caixa de Javascript test file alerta com a mensagem especificada e um botão OK. As caixas de alerta são usadas quando se deseja garantir que a informação chega ao utilizador. A caixa é aberta e a execução do programa fica suspensa até o botão [Ok] ser carregado. var x = document.getElementById("nao-existe"); if (x == null) alert("Elemento não encontrado"); else alert(x.value); Interação com o Document Object Model Neste exemplo, o elemento é incluído no final do depois de todos os outros elementos. Javascript test file PORQUÊ? Como pretendemos atuar por Javascript sobre elementos html representados no DOM (op1 e op2) e como a página é construída de modo sequencial, à medida que o documento vai sendo lido pelo browser, é imprescindível que os elementos HTML já estejam representados na DOM quando o código JavaScript que os referencia for executado. var x = document.getElementById("op1"); var y = document.getElementById("op2"); console.log(parseFloat(x.value)); console.log(parseFloat(y.value));  Javascript test file var x = document.getElementById("op1"); var y = document.getElementById("op2"); console.log(parseFloat(x.value)); console.log(parseFloat(y.value)); Utilização de uma função: document.getElementById: Procura por um elemento (getElementById) no DOM (document) que tenha o atributo ID especicado no parâmetro (neste caso, "op1" ou "op2"). Utilização de uma função dentro de outra função: parseFloat: Converte uma String (ex, x.value), num valor real (float); Acesso à propriedade value de cada um dos objetos devolvidos. No caso de x, o valor será “2”, enquanto o que no caso de y o valor será “3” – que são strings; A propriedade value é de escrita e leitura, o que significa que se pode facilmente alterar o texto apresentado num dado campo apenas modificando a propriedade value. Sintaxe da linguagem Javascript Eventos Neste exemplo, o código que se encontra fora de funções é executado automaticamente – logo que o browser interpreta a linha, ou seja, antes de o documento html, que está dentro do ser representado. Este não é o comportamento habitual – porque os elementos do documento html ainda não foram Javascript test file desenhados. Neste caso, em particular, não há qualquer problema function soma(x,y){ porque o script não está a interagir com nenhum } return x+y; elemento do DOM. var resultado = soma(3, 4); Se estivesse, o resultado estaria comprometido (porque console.log(resultado); os elementos do DOM ainda não foram representados. Sintaxe da linguagem Javascript Eventos – window.onload No caso de se pretender interagir com elementos do DOM será necessário invocar o evento window.onload. function calculadora() { var x = document.getElementById("op1"); var y = document.getElementById("op2"); console.log(parseFloat(x.value)); console.log(parseFloat(y.value)); } window.onload = calculadora; O evento window.onload é executado só “quando a janela (window) estiver completamente carregada”. Como nessa altura o DOM está completo, todos os objetos da página já foram criados e, portanto, é possível executar qualquer operação sem limitações. Sintaxe da linguagem Javascript Eventos – window.onload Neste procedimento, como é utilizado o evento window.onload() é indiferente a localização do ; tanto pode estar no como no , conforme function calculadora() { dom.js se pode ver nos exempos. var x = document.getElementById("op1"); var y = document.getElementById("op2"); console.log(parseFloat(x.value)); console.log(parseFloat(y.value)); } window.onload = calculadora; Sintaxe da linguagem Javascript Glossário de Eventos Mouse Events Frame/Object Events Event Description Event Description onclick The event occurs when the user clicks on an element onabort The event occurs when the loading of a resource has been aborted oncontextmenu The event occurs when the user right-clicks on an element to open a context menu onbeforeunload The event occurs before the document is about to be unloaded ondblclick The event occurs when the user double-clicks on an element onerror The event occurs when an error occurs while loading an external file onmousedown The event occurs when the user presses a mouse button over an element onhashchange The event occurs when there has been changes to the anchor part of a URL onmouseenter The event occurs when the pointer is moved onto an element onload The event occurs when an object has loaded onmouseleave The event occurs when the pointer is moved out of an element onpageshow The event occurs when the user navigates to a webpage onmousemove The event occurs when the pointer is moving while it is over an element onpagehide The event occurs when the user navigates away from a webpage onmouseover The event occurs when the pointer is moved onto an element, or onto one of its children onresize The event occurs when the document view is resized onmouseout The event occurs when a user moves the mouse pointer out of an element, or out onscroll The event occurs when an element's scrollbar is being scrolled of one of its children onunload The event occurs once a page has unloaded (for ) onmouseup The event occurs when a user releases a mouse button over an element Keyboard Events Event Description onkeydown The event occurs when the user is pressing a key onkeypress The event occurs when the user presses a key onkeyup The event occurs when the user releases a key Sintaxe da linguagem Javascript Eventos - onclick Considere o seguinte excerto de HTML: Repare como o elemento possui um evento onclick que está programado Javascript test file para executar a função "calcula()". function calcula() { Isto significa que quando o utilizador carregar no var x = document.getElementById("op1"); var y = document.getElementById("op2"); botão, o evento onclick será disparado e a console.log(parseFloat(x.value)); função calcular() será executada. console.log(parseFloat(y.value)); } Nota importante: Neste exemplo, como o javascript só será executado quando se carregar no botão, também é indiferente a localização do ; tanto pode estar no como no , pois + o utilizador só carregará no botão depois dele estar visível. Calcular Sintaxe da linguagem Javascript Eventos - onclick Exemplos: Javascript onclick event Javascript onclick event function myFunction() { document.getElementById("demo").innerHTML = "Muito bem"; Carregar } Neste exemplo o evento onclick atua sobre o conteúdo do elemento. O código javascript está inline e fará com que o texto Click Me do botão seja alterado depois de carregado pela primeira vez. Neste exemplo o evento onclick chama a função myFunction() que, por sua vez, altera o conteúdo do parágrafo cujo identificador (id) é “demo”. Sintaxe da linguagem Javascript Eventos – onmouseover / onmouseout Mudança de estilo inline Javascript onmouseover event span { width:120px; line-height:120px; border-radius:60px; display:inline-block; text-align:center; border:solid 1px black; } Mouse over me! Neste exemplo quando o rato passar sobre o elemento, o evento onmouseover será ativado mudando a cor de fundo do elemento , que passará a red. Quando o rato sair de cima do elemento, evento onmouseout será ativado, mudando a cor de fundo do elemento que passará à cor white. Notem ainda que não é necessário que o script esteja dentro do marcador. O código pode estar inline. Sintaxe da linguagem Javascript Eventos – onmouseover / onmouseout Mudança de classe inline Javascript onmouseover event span { width:120px; line-height:120px; border-radius:60px; display:inline-block; text-align:center; border:solid 1px black; }.mouseOver { background-color:red; } Mouse over me! Neste exemplo quando o rato passar sobre o elemento o evento onmouseover será ativado, e será adicionada a classe “mouseOver”. Quando o rato sair de cima do elemento através da ativação do evento onmouseout, será removida a classe “mouseOver”. Sintaxe da linguagem Javascript Eventos - onchange Podemos generalizar este exemplo de forma a que se possa especificar a operação a executar através de campos de selecção: myScript.js var operacao; function getOperacao() { var e = document.getElementById("operacao"); operacao = e.options[e.selectedIndex].value; Javascript test file } function calcula() { } Soma Subtração Multiplicação Divisão Calcular Sintaxe da linguagem Javascript Propriedade event.target A propriedade de event.target devolve o objeto que despoletou um evento / trigger. Esta propriedade é muito útil quando temos código comum a vários objetos e apenas variamos o seu nome. Jogo javascript function scramble() {} function setCurrentDiv() {} Baralhar Funções e contantes matemáticas Glossário Method Description Math.E // returns Euler's number Math.PI // returns PI abs(x) Returns the absolute value of x Math.SQRT2 // returns the square root of 2 acos(x) Returns the arccosine of x, in radians Math.SQRT1_2 // returns the square root of 1/2 Math.LN2 // returns the natural logarithm of 2 asin(x) Returns the arcsine of x, in radians Math.LN10 // returns the natural logarithm of 10 Math.LOG2E // returns base 2 logarithm of E atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians Math.LOG10E // returns base 10 logarithm of E atan2(y,x) Returns the arctangent of the quotient of its arguments ceil(x) Returns the value of x rounded up to its nearest integer Fonte: http://www.w3schools.com/js/js_math.asp cos(x) Returns the cosine of x (x is in radians) x exp(x) Returns the value of E floor(x) Returns the value of x rounded down to its nearest integer log(x) Returns the natural logarithm (base E) of x max(x,y,z,...,n) Returns the number with the highest value min(x,y,z,...,n) Returns the number with the lowest value pow(x,y) Returns the value of x to the power of y random() Returns a random number between 0 and 1 round(x) Returns the value of x rounded to its nearest integer sin(x) Returns the sine of x (x is in radians) sqrt(x) Returns the square root of x tan(x) Returns the tangent of an angle Funções e constantes numéricas Glossário JavaScript Global Functions Number Functions Method Description Method Description eval() Evaluates a string and executes it as if it was script code isFinite() Checks whether a value is a finite number isNaN() Determines whether a value is an illegal number isInteger() Checks whether a value is an integer Number() Returns a number, converted from its argument. isNaN() Checks whether a value is Number.NaN parseFloat() Parses its argument and returns a floating point number isSafeInteger() Checks whether a value is a safe integer parseInt() Parses its argument and returns an integer toExponential(x) Converts a number into an exponential notation toFixed(x) Formats a number with x numbers of digits after the decimal point toPrecision(x) Formats a number to x length Number Properties toString() Converts a number to a string Property Description valueOf() Returns the primitive value of a number MAX_VALUE Returns the largest number possible in JavaScript MIN_VALUE Returns the smallest number possible in JavaScript NEGATIVE_INFINITY Represents negative infinity (returned on overflow) NaN Represents a "Not-a-Number" value POSITIVE_INFINITY Represents infinity (returned on overflow) Funções e contantes para manipulação de strings Glossário Method Description Method Description charAt() Returns the character at the specified index (position) search() Searches a string for a specified value, or regular expression, and returns the charCodeAt() Returns the Unicode of the character at the specified index position of the match concat() Joins two or more strings, and returns a new joined strings slice() Extracts a part of a string and returns a new string endsWith() Checks whether a string ends with specified string/characters split() Splits a string into an array of substrings fromCharCode() Converts Unicode values to characters startsWith() Checks whether a string begins with specified characters includes() Checks whether a string contains the specified string/characters substr() Extracts the characters from a string, beginning at a specified start position, and through the specified number of character indexOf() Returns the position of the first found occurrence of a specified value in a string substring() Extracts the characters from a string, between two specified indices lastIndexOf() Returns the position of the last found occurrence of a specified value in a string toLocaleLowerCase() Converts a string to lowercase letters, according to the host's locale localeCompare() Compares two strings in the current locale toLocaleUpperCase() Converts a string to uppercase letters, according to the host's locale match() Searches a string for a match against a regular expression, and returns the matches toLowerCase() Converts a string to lowercase letters repeat() Returns a new string with a specified number of copies of an existing string toString() Returns the value of a String object replace() Searches a string for a specified value, or a regular expression, and returns a new toUpperCase() Converts a string to uppercase letters string where the specified values are replaced trim() Removes whitespace from both ends of a string valueOf() Returns the primitive value of a String object Property Description length Returns the length of a string