Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • 3 Web Javascript

    Enviado por

    Ricardo Maioli
    31 visualizações31 páginas

    Título original

    3 web Javascript

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    31 visualizações31 páginas

    3 Web Javascript

    Enviado por

    Ricardo Maioli

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 31

    Desenvolvimento de Aplicaes Web Parte 3 JavaScript Programao Client-Side

    Ato o in D g S b u r rig al: io o o ral A es:Ju oM sM s ltera lian arco artin

    JavaScript X Java JavaScript X Java Semelhana do nome Semelhanas na sintaxe Tudo mais diferente JavaScript uma linguagem interpretada Linguagem de Script. Programas em Java so compilados para um cdigo de mquina Linguagens de programao distintas

    JavaScript JavaScript
    HTML no linguagem de programao Javascript uma extenso do HTML
    HTML + CSS + Javascript = DHTML

    Faz parte da pgina e pode interagir com todos os seus componentes Suportada pelas principais verses de browser Linguagem de programao baseada em objetos Criao de pginas interativas e dinmicas

    JavaScript JavaScript
    Realizar operaes matemticas Gerar documentos com aparncia definida na hora da visualizao; Abrir janelas do browser, trocar informaes entre janelas, menus pop-up, help, troca de imagens,...; Manipular propriedades do browser como o histrico, barra de estado, documento,..;. Interagir com o contedo do documento; Tratar a pgina como uma estrutura de objetos; Interagir com o usurio atravs do tratamento de eventos; Checagem de formulrios antes do seu envio.

    JavaScript JavaScript
    <html> <body> Esta linha est escrita em HTML<br> <script type="text/javascript"> document.write("Aqui Java Script<br>"); </script> Voltamos para o HTML </body> </html>

    Sintaxe JavaScript Sintaxe JavaScript Similar a linguagem C Similar a linguagem C++ Similar a linguagem PHP Similar a linguagem Java

    Sintaxe JavaScript Sintaxe JavaScript Operadores matemticos


    + adio de valor e concatenao de strings - subtrao de valores * multiplicao de valores / diviso de valores % obtm o resto de uma diviso

    Sintaxe JavaScript Sintaxe JavaScript Operadores lgicos


    == Igual != Diferente > Maior >= Maior ou Igual < Menor <= Menor ou Igual && E || Ou
    = utilizado para atribuies var nome = Meu nome;

    Sintaxe JavaScript Sintaxe JavaScript


    Controles especiais
    \b - backspace \f - form feed \n - new line caracters \r - carriage return \t - tab characters // - Linha de comentrio /*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentrio.

    Os delimitadores naturais para uma string so " ou ' . Caso seja necessrio a utilizao destes caracteres como parte da string, utilize \ precedendo " ou '.

    Sintaxe JavaScript Sintaxe JavaScript Estruturas de controle


    if (condio) { // instrues caso condio == true } else if (condio 2) { // instrues caso condio 2 == true } else { // instrues caso ambas as condies sejam false }

    Sintaxe JavaScript Sintaxe JavaScript Loops


    for(inicializao; condio; incremento) { // instrues a serem realizadas enquanto condio for true } inicializao; while(condio) { // instrues a serem realizadas enquanto condio for true incremento; }

    Sintaxe JavaScript Sintaxe JavaScript


    Variveis
    A varivel criada automaticamente, pela simples associao de valores a mesma. Ex. novaVariavel = "Jose"; Ex.2: var novaVariavel2 = true; Global - Declaradas/criadas fora de uma funo. As variveis globais podem ser acessadas em qualquer parte do programa / pgina. Local - Declaradas/criadas dentro de uma funo. S podem ser utilizadas dentro da funo onde foram criadas e precisam ser definidas com a instruo Var.

    Sintaxe JavaScript Sintaxe JavaScript


    Funes
    Um conjunto de instrues, agrupadas para executar uma determinada tarefa. Para as funes podem ser passadas informaes, as quais so chamadas de parmetros. As funes podem ou no retornar alguma informao, o que feito com o comando Return. function NomeDaFuncao(parametros) { ... return (ValorDeRetorno) }

    Objetos JavaScript Objetos JavaScript

    Objetos JavaScript Objetos JavaScript


    Objeto Window
    Propriedades: defaultStatus - Contedo padro da barra de status do browser frames - Vetor que armazena as referncias para as frames da janela atual.
    parent - Refere-se a janela pai da frame atual. self - Refere-se a janela atual.

    status - Define uma mensagem que ir aparecer no rodap do browser, em substituio por exemplo, a URL de um link, quando estivermos com o mouse sobre o link. top - Refere-se a janela de nvel mais alto do esquema hierrquico do JavaScript. window - Refere-se a janela atual. Funciona de modo anlogo ao this. Ex: window.status='Qualquer coisa'

    Objetos JavaScript Objetos JavaScript


    Objeto Window
    Mtodos: alert - Mostra uma caixa de alerta, seguido de um sinal sonoro e o boto de OK. Ex: alert('Esta uma janela de alerta!') close - Termina a sesso atual do browser. Ex: top.close() confirm - Mostra uma caixa de dilogo, seguida de um sinal sonoro e os boto de OK e Cancel. Retorna um valor verdadeiro se o usurio escolher OK. Ex: retorno=confirm('Deseja prosseguir?') open - Abre uma nova sesso do browser, como se o usurio pressionasse <CTRL>+N

    Objetos JavaScript Objetos JavaScript


    window.open("URL", "Nome, ["caractersticas"]); URL - endereo para abertura da nova janela. Nome - nome da nova janela, definido pelo programador. Caractersticas - srie de opes de configurao da nova janela, se especificados devem estar na mesma string, separados por vrgulas e sem conter espaos.
    toolbar=0 ou 1 location=0 ou 1 directories=0 ou 1 status=0 ou 1 menubar=0 ou 1

    window.open("http://www.google.com","Nova","toolbar=1, location=1,directories=0,status=1,menubar=1,scrollbars =1,resizable=0,width=320,height=240");

    Objetos JavaScript Objetos JavaScript


    Mais um exemplo <html> <body> <script> window.location= http://www.tntedu.com.br; </script> Exemplo: redirecionar.html </body> </html>

    Objetos JavaScript Objetos JavaScript


    Outro exemplo
    <html> <body> <script> document.write(window.location.hostname + "<br>"); document.write(window.location.port + "<br>"); document.write(window.location.protocol + "<br>"); </script> </body> </html>
    Exemplo: location.html

    Objetos JavaScript Objetos JavaScript


    Objeto History Mtodos back()
    Retorna pgina anterior. Equivale a clicar o boto back do browser.

    forward()
    Passa para a prxima pgina. Equivale a clicar o boto forward do browser.

    go()
    Permite que qualquer URL que esteja presente na relao de pginas visitadas do objeto history, seja carregada. Ex: history.go(0) = reload

    Ver exemplo: history.html

    Objetos JavaScript Objetos JavaScript Obter dados do formulrio <html> <body> <form NAME="clientes">
    <input TYPE="text" NAME=nome" value="">

    </form> </body> </html>


    document.forms[0].elements[0].value; document.clientes.nome.value;

    Objetos JavaScript Objetos JavaScript Objeto Input TEXT Algumas propriedades:


    Ver exemplos: validarFormularioJuliano.html SelecionarCheck.html

    type, size, maxlength, name, value, style

    type=text : entrada de dados texto size : Especifica o tamanho do campo na tela. maxlength : Especifica a quantidade mxima de caracteres permitidos. name : Especifica o nome do objeto value : Armazena o contedo do campo. Style: Propriedades CSS

    Utilizando JavaScript Utilizando JavaScript 3 maneiras de definir Javascript:


    Inline
    descritores HTML sensveis a eventos

    No documento Arquivo Externo

    Utilizando JavaScript Utilizando JavaScript

    Inline - Exemplos
    <a href="javascript:alert('Tem Certeza?)"> link </a> <body onLoad='window.open(this.location);'> <form onSubmit=return validarCampos();>
    Ver exemplo: eventos.html

    Utilizando Javascript Utilizando Javascript Cdigo JavaScript pode ser acionado atravs de eventos nativos do HTML, como links e botes de submisso de formulrios usando uma URL javascript::

    <a href="javascript:alert('Tem Certeza?)"> link </a>

    Utilizando Javascript Utilizando Javascript


    onclick
    Atributo HTML Quando executado Quando um objeto clicado pelo mouse Quando um objeto selecionado Quando o contedo modificado Quando um componente de formulrio ou janela se torna ativa Quando um componente de formulrio ou janela se torna inativa Quando o mouse est sobre um link Quando o mouse deixa um link Antes de enviar um formulrio Antes de limpar um formulrio Aps carregar uma pgina, janela ou frame Ao deixar uma pgina, janela ou frame Quando um erro ocorre durante a carga Quando a carga de uma imagem abortada Descritores HTML onde suportado <a>, <input> <input type=text>, <textarea> <input type=text>, <textarea>, <select> <textarea>, <body>, <form>, <input>, <select>, <option> <textarea>, <body>, <form>, <input>, <select>, <option> <a>, <area> <a>, <area> <form> <form> <body> <body> <img>, <body> <img>

    onselect onchange onfocus onblur


    onmouseover

    onmouseout onsubmit onreset onload onunload onerror onabort

    Utilizando Javascript Utilizando Javascript Forma 2: No documento Bloco delimitado pelos descritores HTML <SCRIPT> e </SCRIPT>. Pode haver vrios blocos <SCRIPT> em em qualquer lugar da pgina. <script> Alert(Ola mundo); </script>

    Utilizando Javascript Utilizando Javascript Forma 2: No documento Possibilidade de definir funes. <script> function ola(mensagem){ alert(mensagem); } </script> Ver exemplo: mudarCor.html (...) <body onLoad=mensagem(Ola mundo!);>

    Utilizando Javascript Utilizando Javascript Forma 3: Arquivo externo Funes a serem utilizadas em vrios documentos <head> <script LANGUAGE=JavaScript SRC=scripts.js"></script> </head> <body onLoad=mensagem(Ola mundo!);>

    Por que no JavaScript? Por que no JavaScript? Cdigo fonte visvel para usurios do site Incompatibilidade com alguns navegadores Possibilidade de ser desabilitado

    Links de interesse Links de interesse JavaScript Tutorial


    http://www.w3schools.com/js/default.asp

    Você também pode gostar