javascript50.ppt

Upload: fabricio-moreira

Post on 10-Oct-2015

14 views

Category:

Documents


0 download

TRANSCRIPT

  • 7/13/2019 JavaScript50.ppt

    1/88

    Emanuel Barbosa [email protected]

    JavaScript

  • 7/13/2019 JavaScript50.ppt

    2/88

    Referncias

    Websites interativos com JavaScriptHelder da Rocha IBPINET

    HTML dinmico (Parte III)Ramalho Berkeley

    Netscape (documentao completa)http://developer.netscape.com/docs/manuals/js/client/jsguide/index.htmhttp://developer.netscape.com/docs/manuals/communicator/jsref/index.htmhttp://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html

    Tonys JavaScript (exemplos)http://www.geocities.com/ResearchTriangle/4084/js2.htm

    HTML (para reviso)http://www.nce.ufrj.br/cursos/html

  • 7/13/2019 JavaScript50.ppt

    3/88

    Introduo

    O que JavaScript? Para que serve JavaScript? Exemplos de JavaScript

    Onde escrever um JavaScript?

    1

  • 7/13/2019 JavaScript50.ppt

    4/88

    O que JavaScript?

    uma linguagem de programao Desenvolvida pela Netscape

    Microsofttem o VBScript no tanto utilizado quantoo JavaScript

    JavaScript tambm roda no Microsoft Internet Explorer

    O cdigo escrito dentro da pgina HTML(client-server)

    Simples e til (para fazer coisas simples)

    Obs.: JavaScript NO Java Java entra nas pginas HTML atravs de applets

    JavaScript escrito dentro da pgina HTML

    http://www.geocities.com/ResearchTriangle/4084/js2.htm

  • 7/13/2019 JavaScript50.ppt

    5/88

    Para que serve JavaScript?

    Efeitos visuais Efeitos interativos Gerao dinmica de contedo (on-the-fly)

    Adequaes para a resoluo do monitor

    Padronizao da apresentao Armazenamento de informaes (cookies) Personalizao do contedo

    Manipular objetos de interface Janelas, Barra de status, Formulrios etc.

    Operaes matemticas e textuais Validao de dados de um formulrio Animaes

    DHTML

  • 7/13/2019 JavaScript50.ppt

    6/88

    Exemplos de JavaScript:Ma

    maca1.gif maca2.gif maca3.gif maca4.gif maca5.gif

  • 7/13/2019 JavaScript50.ppt

    7/88

    Exerccio:Mestre-Cuca

    olhos0.gif

    olhos315.gif

    olhos45.gifolhos135.gif

    olhos90.gif

    olhos180.gif

    olhos225.gif

    olhos270.gif

    olhosani.gif

  • 7/13/2019 JavaScript50.ppt

    8/88

    Exemplos de JavaScript:Ol

    Ol

    Script que escreve "ol":

  • 7/13/2019 JavaScript50.ppt

    9/88

    Exemplos de JavaScript:Rodap, v1

    OBS1:nome uma varivel armazena uma informao

  • 7/13/2019 JavaScript50.ppt

    10/88

    OBS1:prompt uma funo faz alguma coisa:

    - Abre uma janela de dilogo para o usurio entrar com um texto- Retorna o texto digitado pelo usurio

    OBS2:Seja bem vindo"+nome+" !!!" uma expresso soma textos

    Exemplos de JavaScript:Contedo Personalizado

  • 7/13/2019 JavaScript50.ppt

    11/88

    Exemplos de JavaScript:Rodap, v2

    OBS1:document uma objeto

    OBS2:

    document.lastModified umapropriedadedo documento retornaa data (mm/dd/aa) e hora da ltima modificao do documento

  • 7/13/2019 JavaScript50.ppt

    12/88

    Exemplos de JavaScript:Rodap, v3

    Pgina com nome do leitor

    Aqui escrevo qualquer coisa

    Rodape();

    OBS:Rodape() uma funo(definida pelo programador) escreve o rodap

  • 7/13/2019 JavaScript50.ppt

    13/88

    Exemplos de JavaScript:Ttulo e Rodap, v1

    Pgina com nome do leitor

    Titulo();

    Aqui escrevo qualquer coisa

    Rodape();
  • 7/13/2019 JavaScript50.ppt

    14/88

    Exemplos de JavaScript:Ttulo e Rodap, v2

    function Titulo(){document.write("Curso de JavaScript");}

    function Rodape(){document.write("Autor: Mariano Gomes Pimentel
    ");document.write("ltima Modificao: "+document.lastModified);}

    geral.js

    1 - Introduo

    Titulo();Captulo 1 - Introduo

    Bl bl bl...

    Rodape();

    capitulo1.html

    2 - Fundamentos

    Titulo();Captulo 2 - Fundamentos

    Bl bl bl...

    Rodape();

    capitulo2.html

  • 7/13/2019 JavaScript50.ppt

    15/88

    Onde escrever um JavaScript?

    Soluo 1: Embutido na pgina HTML

    1.1 - Como evento de um elemento (IMG, A, INPUT etc): Ma Mestre-Cuca

    1.2 - Como elemento SCRIPT dentro de BODY: Ol Rodap, v1 Contedo Personalisado Rodap, v2

    1.3 - Como funo, dentro de HEAD Rodap, v3 Ttulo e Rodap, v1

    Soluo 2: Num arquivo a ser importado

    Ttulo e Rodap, v2

  • 7/13/2019 JavaScript50.ppt

    16/88

    Conceitos de programao Dados, Variveis, Expresses e Operadores Tomada de deciso, Repetio Funes, Eventos, Objetos

    O que preciso paraprogramar em JavaScript?

    Exerccios

    Programando2

  • 7/13/2019 JavaScript50.ppt

    17/88

    Conceitos de Programao

    JavaScript

    linguagem de programao

    processar informaes

    resolver um problema

    Processar informaes (ou seja, resolver um problema) exige umtipo de pensamento particular Lgica de Programao

  • 7/13/2019 JavaScript50.ppt

    18/88

    Conceitos de Programao

    Dado = informaoTipos de Dados: Mariano 75 1.57 true

    Varivel armazena dadonome = MarianoIdade = 25

    Expresso e Operador opera dados

    x = (y 5) / 7 diferente de x = y 5 / 7

    operadores

    operadores precedncia

    string inteiro real(ponto-flutuante)

    boleano(verdadeiro

    ou falso)

  • 7/13/2019 JavaScript50.ppt

    19/88

    Conceitos de Programao

    Tomada de deciso ( necessrio testar: if)if (x

  • 7/13/2019 JavaScript50.ppt

    20/88

    Conceitos de Programao

    Funo bloco de programa;quebra do problema em partes!

    function Par(x){

    resto = x % 2;alert(resto);if (resto==0) {return true}else {return false}

    }

    function Classifica(){numero = prompt("Entre com um nmero:","");if (Par(numero)) {alert("O nmero "+numero+" par.");}else {alert("O nmero "+numero+" impar.");}

    }

    function Par(x){

    return (x % 2)==0;}

  • 7/13/2019 JavaScript50.ppt

    21/88

    Conceitos de Programao

    Evento se alguma coisa acontece,ento faa algo...

    EVENTO

    O boto, ao se clicado,chama a funo Classifica()

  • 7/13/2019 JavaScript50.ppt

    22/88

    Conceitos de Programao

    Objetos elementos de uma pgina Web

    Propriedades (variveis)document.title; (contm o ttulo do documento)

    document.location; (contm a URL do documento)

    Mtodos (funes)document.write("Bom Dia!");

    window.open("http://www.ibpinet.com.br", "IBPI");

  • 7/13/2019 JavaScript50.ppt

    23/88

    O que preciso para programarem JavaScript?

    Saber programar

    Quebrar o problema em pedaos (funes) Resolver os pedaos do problemas utilizando:

    dados, variveis e operaes decises + repeties

    Conhecer os eventos e saber utiliz-los

    Conhecer os objetos e saber utiliz-los

    desenvolver aLgica de Programao !!!

    Algoritmo

  • 7/13/2019 JavaScript50.ppt

    24/88

    O que preciso para programarem JavaScript?

    3 passos para desenvolver aLgica de programao:

    1 Faa exerccios2 Faa mais exerccios3 - Continue fazendo !

    desenvolver aLgica de Programao !!!

  • 7/13/2019 JavaScript50.ppt

    25/88

    Exerccios

    Apostila, p 1.9 1.13 (Exerccio Resolvido)

    Reutilizar (adaptando) o cdigo de exemplos:http://www.geocities.com/ResearchTriangle/4084/js2.htm

  • 7/13/2019 JavaScript50.ppt

    26/88

    Eventos e Objetos3

    Eventos

    Objetos Window Location History Document

    Form TextArea, Text, Password Select

    Frame Image

  • 7/13/2019 JavaScript50.ppt

    27/88

    Eventos

    Testando alguns eventos...

  • 7/13/2019 JavaScript50.ppt

    28/88

    Eventos

    A, IMG*A, IMGA, IMG*A, IMGA, IMG

    A, IMG, Botes,SELECT

    Caixa de TextoCaixa de Texto

    Caixa de Texto

    Ponteiro do mouse entraPonteiro do mouse se movimenta

    Ponteiro do mouse sai

    Boto do mouse apertado

    Boto do mouse desapertado

    Clique (MouseDown + MouseUp)

    Tecla apertada

    Tecla desapertada

    Tecla clicada (KeyDown + KeyUp)

    onMouseOveronMouseMoveonMouseOutonMouseDownonMouseUp

    onClick

    onKeyDownonKeyUp

    onKeyPress

    * Funciona somente no Internet Explorer

  • 7/13/2019 JavaScript50.ppt

    29/88

    Eventos

    antes de enviar o formulrioantes de limpar o formulrio

    quando elemento recebe o foco

    quando elemento perde o foco

    quando modifica-se texto ou seleo

    aps carregar uma pgina BODY

    antes de sair da pgina BODY

    quando a janela redimensionadaquando a janela arrastada

    quando um erro ocorre ao carregar

    quando interrompe-se carregamento

    onSubmitonReset

    onFocusonBlur

    onChange

    onLoadonUnLoad

    onResizeonMove

    onErroronAbort

    FORMFORM

    compts. de FORM, BODYcompts. de FORM, BODY

    SELECT, TEXTAREA,INPUT:text, INPUT:passw.

    BODYBODY

    BODYBODY

    BODY, IMGIMG

  • 7/13/2019 JavaScript50.ppt

    30/88

    Objetos

    Window

    Frame

    Document

    Location

    History Link

    Image

    Area

    Anchor

    Applet

    Plugin

    FormOption

    TextArea

    Text

    Password

    Radio

    Select

    Reset

    Submit

    FileUpload

    Hidden

    Button

  • 7/13/2019 JavaScript50.ppt

    31/88

    Window(exemplo)

    Abrir Janela

    d

  • 7/13/2019 JavaScript50.ppt

    32/88

    Window(exemplo)

    window.open("http://www.ibpinet.com.br");Cada chamada funo AbrirJanela(),

    ir abrir uma nova janela

    window.open("http://www.ibpinet.com.br", "j1");

    Nome da Janelamesmo com vrias chamadas

    funo AbrirJanela(),somente uma janela ser aberta

    window.open("http://www.ibpinet.com.br", "");

    Nome no especificadoNetscape: Abre s 1 janela

    Internet Explorer: Abre vrias janelas

    d

  • 7/13/2019 JavaScript50.ppt

    33/88

    Window(exemplo)

    window.open("http://www.ibpinet.com.br","j1","width=400,height=400,resizable=no");

    Opes:

    width=nmero largura da janela height=nmero altura da janela left=nmero posio do canto esquerdo da janela top=nmero posio do topo da janela

    resizable=yes|no permite o usurio redimensionar a janela menubar=yes|no exibe a barra de menu toolbar=yes|no exibe a barra de ferramentas

    location=yes|no exibe a barra de endereo directories=yes|no exibe a barra de ferramentas status=yes|no exibe a barra de status scrollbars=yes|no exibe as barras de rolamento

    Obs.: Quando uma opo do tipo yes|no apenas declarada, seu valor yes.

    Caso contrrio, seu valor no. Ex.: "width=400, height=400, menubar, status

    Wi d

  • 7/13/2019 JavaScript50.ppt

    34/88

    Window(exemplo)

    function AbrirJanela(){janela=window.open("","wndPropaganda","width=300,height=100");janela.document.open();

    janela.document.write("

    Voc j conhece o curso IBPINET?

    ");janela.document.write('

    ');janela.document.write("Quero Conhecer

    ");janela.document.close();janela.focus();}

    Abrir uma janela e escrever o contedo dinamicamente:

    Wi d

  • 7/13/2019 JavaScript50.ppt

    35/88

    Window(exemplo)

    Fechar

    Abrir uma pgina bloqueadora:

    index.html

    ibpinet.html

    http://www.ibpinet.com.br/webdesigner/mariano/javascript/aula2/janelas.html

    Wi d

  • 7/13/2019 JavaScript50.ppt

    36/88

    Window(propriedades e mtodos)

    Propriedades frames[index] quadros filhos, indexados pela ordem de criao frames.length nmero de quadros existentes self janela atual parent janela pai

    top janela mais antiga opener janela que a abriu

    Mtodos alert("texto") exibe caixa de dilogo para exibir um aviso

    confirm("texto") exibe caixa de dilogo para exibir um aviso prompt("texto","inicial") exibe caixa de dilogo para entrada de texto

    open("URL", "nome", "opes") cria janela cliente close() fecha janela

    http://www.uol.com.br/chicobuarque/construcao/menu_alfabetica1.htmhttp://www.gilbertogil.com.br

    L ti

  • 7/13/2019 JavaScript50.ppt

    37/88

    Location(propriedades e mtodos)

    Propriedades href URL completo protocol protocolo utilizado host nomeeportdo host hostname nomedo host

    port port do host path diretrio e arquivo (exclui protocolo e host) hash URL aps sinal # search URL aps sinal ?

    Mtodos toString() retorna uma string assign("string") ajusta a localizao reload(true) recarrega a pgina atual incondicionalmente

    L ti

  • 7/13/2019 JavaScript50.ppt

    38/88

    Location(exemplo)

    Hi t

  • 7/13/2019 JavaScript50.ppt

    39/88

    History(propriedades e mtodos)

    Propriedades back penltimo URL acessado foward URL posterior da lista de URLs acessados current URL da pgina atual length tamanho da lista de histrico atual

    Mtodos back() volta uma posio no histrico foward() avana uma posio no histrico go(n) vai para o URL localizado em n posies em relao

    a posio atual (+n ou n)

    go("string") vai para a pgina mais recente cujo ttulo ou URLcontenha a string especificada. Obs.: o sistemadiferencia maisculas e minsculas.

    toString() retorna uma tabela HTML com ligaes para todasas entradas da lista de diretrio

    Ex.: Voltar

  • 7/13/2019 JavaScript50.ppt

    40/88

    Exerccio: BarraNavegacao()

    Escrever a funo BarraNavegacao()que insere imagens (atravs de document.write)para disponibilizar botes de navegao:

    back forward

    reload home

    Obs.: Esta funo poder ser utilizada na construo de um cabealho paratodas as pginas de seu site

    D t

  • 7/13/2019 JavaScript50.ppt

    41/88

    Document(propriedades e mtodos)

    Propriedades title location lastModified

    Mtodos write("textoHTML") escreve uma linha de texto HTML writeln("textoHTML") escreve e adiciona um avano de linha

    clear() limpa o texto do documento close() fecha o documento

    bgColor fgColor linkColor aLinkColor vLinkColor

    form[index] form.length links[index] links.length anchors[index]

    anchors.length

    Ex.: window.document.write("Ol");window.document.bgColor="silver";

    F

  • 7/13/2019 JavaScript50.ppt

    42/88

    Form(propriedades e mtodos)

    Propriedades elements Array. Vetor de elementos do formulrio elements.length Nmero de elementos do formulrio name contedo do atributo NAME action contedo do atributoACTION

    encoding contedo do atributo ENCTYPE method valor do atributo METHOD ("get"=0; "post"=1) target janela alvo usada para resposta aps envio do

    formulrio (atributo TARGET)

    Mtodos submit() envia o formulrio

    T tA T t P d

  • 7/13/2019 JavaScript50.ppt

    43/88

    Nome:
    Login:

    TextArea, Text, Password(exemplo)

    elements[0]=Caixa de texto txtNome;elements[1]=Caixa de texto txtLogin;elements[2]=Boto btnCadastrar;

    Select

  • 7/13/2019 JavaScript50.ppt

    44/88

    Sites:IBPINETHTMLMariano

    Select(exemplo)

    slcSites.options[0]=Sites;slcSites.options[1]=IBPINET;slcSites.options[2]=HTML;slcSites.options[3]=Mariano;

    Frame

  • 7/13/2019 JavaScript50.ppt

    45/88

    ...function Navegar(){

    var x = document.frmSites.slcSites.selectedIndex;if (x==0){}if (x==1){parent.principal.document.location.href="http://www.ibpinet.com.br"}if (x==2){parent.frames[1].document.location.href="http://www.nce.ufrj.br/cursos/html"}if (x==3){window.parent.principal.document.location.href=

    "http://www.ibpinet.com.br/webdesigner/mariano"}}

    ...

    Frame(exemplo)

    Menu de Navegao

    menuframes.html

    menu.html

  • 7/13/2019 JavaScript50.ppt

    46/88

    Exerccios

    Reutilizar (adaptando) cdigos de:http://www.geocities.com/ResearchTriangle/4084/js2.htm

    Ler captulos 5 a 10 da Apostila...

    e fazer os exerccios!!!

  • 7/13/2019 JavaScript50.ppt

    47/88

    Lgica de Programao4

    Variveis

    Tipos de Dados Operadores Tomada de Deciso (if...else) Repetio (while efor)

    Funes

    Exemplos e Exerccios

  • 7/13/2019 JavaScript50.ppt

    48/88

    Variveis

    Varivel armazena dado nome="Mariano"; idade=25;

    nome="Mariano"; /*no precisa declarar nem tipara varivel*/ var nome; /*declarao sem atribuio de valor*/ var nome="Mariano"; /*declarao com atribuio de valor*/

    Identificador de varivel letras, nmeros e "_" (underscore) tem que comear com um letra case sentive nome Nome NoMe

  • 7/13/2019 JavaScript50.ppt

    49/88

    Inteiro:5

    14509Ponto-flutuante

    14.0751.78e-45

    Tipos de Dados

    string (cadeia de letras) Mariano Gomes Pimentel;

    Qualquer texto, inclusive, toda uma pgina HTML.; 123

    number

    TIP

    O

    REPRESENTAO

    Indeterminado NaN (Not a Number) Infinito:

    Infinity -Infinity

    VALORES

    ESPECIAIS

    Decimal734.25

    Hexadecimal (Ex.: cores)0xFF87C1

    Octal0677

  • 7/13/2019 JavaScript50.ppt

    50/88

    Tipos de Dados

    true false

    undefinedvalor ainda no definidoEx.: var nome; /* nome=undefined */

    null

    valor nulo (invlido)

    object objetos: documento, janela, componente de formulrio etc.

    boolean

  • 7/13/2019 JavaScript50.ppt

    51/88

    Operadores

    Aritmticos * multiplicao/ diviso + soma

    - subtrao % resto

    String

    + concatenao

    x = 5 / 3;x = 5 % 3;x = 5 + (5 - 2) / 2;x = (5 + (5 2)) / 2;

    nome = "Mariano";sobreNome = "Pimentel";meioNome = "Gomes";nomeCompleto = nome + " " + meioNome + " " + sobreNome;

  • 7/13/2019 JavaScript50.ppt

    52/88

    Operadores

    Atribuio = (Ex.: x = 5) op= (atribuio com operao)

    Incrementais

    var++ ou ++var var-- ou --var

    x += y; x = x + y;x = y; x = x y;x /= y; x = x / y;x *= y; x = x * y;x %= y; x = x % y;

    x = 5;y = ++x;/* x=6; y=6; */

    x=5;y = x++;/* y=5; x=6; */

  • 7/13/2019 JavaScript50.ppt

    53/88

    Operadores

    Comparao > maior >= maior ou igual < menor

  • 7/13/2019 JavaScript50.ppt

    54/88

    Operadores

    Lgicos && e || ou ! not

    if ( (x

  • 7/13/2019 JavaScript50.ppt

    55/88

    Tomada de Deciso

    if ... elseif (condio) {

    // instrues caso condio==true}

    else {// instrues caso condio==false}

  • 7/13/2019 JavaScript50.ppt

    56/88

    Repetio

    for (inicializao; condio; incremento){...}

    while (condio) {...}

    for (i=1; i

  • 7/13/2019 JavaScript50.ppt

    57/88

    Funes

    function NomeFuncao(param1, param2) {...}

    function Soma(x, y) {return x + y;

    }

    Funes nativas

  • 7/13/2019 JavaScript50.ppt

    58/88

    Funes nativasp.3-2

    parseInt(string) Converte a stringnum nmero inteirotexto="7";x = parseInt(texto);x = numero + 5; //x==12 (7 + 5)texto = texto + 5; //texto=="75" ("7" +"5)x = parseInt("7.5"); //x==7x = parseInt("7a"); //x==7

    Converte a stringnum nmero realx = parseFloat("7.5"); //x==7.5

    Retorna truese a stringno nmerotexto = prompt("Entre com um nmero:","");if ( isNaN(texto) ) {

    alert("Voc no digitou um nmero vlido.")}

    Executa o contedo de uma stringresultado = eval(5 + 6 / 2); // resultado = 8

    escape = ("Joo"); // nome = "Jo%E3o"unescape("Jo%E3o"); // nome = "Joo"

    parseFloat(string)

    eval(string)

    isNaN(string)

    escape(string)

    unescape(string)

    Exemplo: d f l f

  • 7/13/2019 JavaScript50.ppt

    59/88

    Exemplo:Antes de enviar o formulrio, verificar se ocampo Nome foi preenchido

    S l

  • 7/13/2019 JavaScript50.ppt

    60/88

    Soluo

    Nome:

    Exemplo: Fazer uma funo para saber se um

  • 7/13/2019 JavaScript50.ppt

    61/88

    Exemplo: Fazer uma funo para saber se umtexto ou no um nmero inteiro

    Verificar se o texto um nmero Verificar se este nmero inteiro Se ambas as condies forem verdadeiras,

    ento retornar truecaso contrrio, retornar false.

    Passos:

    S l 1

  • 7/13/2019 JavaScript50.ppt

    62/88

    Soluo 1

    S l 2

  • 7/13/2019 JavaScript50.ppt

    63/88

    function isInt(texto){if ( isNaN(texto) ) {return false}else{ return ( parseInt(texto)==parseFloat(texto) ) }

    }

    Soluo 2

    function isInt(texto){bValido=true;if ( isNaN(texto) ) {bValido=false}else{

    if ( parseInt(texto)!=parseFloat(texto) ) {bValido=false}}

    return bValido;}

    Exerccio: Fazer um formulrio que seja

  • 7/13/2019 JavaScript50.ppt

    64/88

    Exerccio: Fazer um formulrio que sejavalidado antes de ser enviado

    Validar:

    preenchimento de Nome

    validade de Data

    Exerccio: Fazer uma funo para escrever um

  • 7/13/2019 JavaScript50.ppt

    65/88

    Exerccio:produto na pgina (passando como parmetro aimagem do produto, o nome e o preo).

    Exerccio: Fazer uma funo para escrever

  • 7/13/2019 JavaScript50.ppt

    66/88

    Exerccio:uma barra de navegao para pgina anterior,posterior e inicial

    Ex.: http://www.nce.ufrj.br/cursos/html

    Exerccio: Fazer um site que indica em que

  • 7/13/2019 JavaScript50.ppt

    67/88

    Exerccio: Fazer um siteque indica em queseo o cliente se encontra (indicao no frame)

    Objetos Nativos

  • 7/13/2019 JavaScript50.ppt

    68/88

    Objetos Nativos5

    Math

    String Date Array Novos Objetos

    Math

  • 7/13/2019 JavaScript50.ppt

    69/88

    Mathp. 4-13

    random() nmero pseudo-aleatrio entre 0 e 1min(a, b) min(5, 7) -> 5max(a,b) max(5, 7) -> 7abs(x) abs(-5.7) -> 5.7

    floor(x) floor(5.7) -> 5ceil(x) ceil(5.4) -> 6round(x) round(5.7) -> 6; round(5.4) -> 5

    Ex.:x = 1 + Math.floor(Math.random()*50);

    // x recebe um nmero entre 1 e 50

    String

  • 7/13/2019 JavaScript50.ppt

    70/88

    Stringp. 4-7

    txt = "Mariano"

    charAt(n) txt.charAt(2) "r"

    indexOf("sub-string") txt.indexOf("a") 1

    txt.indexOf("n")

    5txt.indexOf("k") -1

    split("separdor") txt="20/02/1975";data = txt.split("/");

    // data[0] = "20";// data[1] = "02";// data[2] = "1975";

    *length; txt = "Mariano";x = txt.length; // x = 7

    0 1 2 3 4 5 6

    Date

  • 7/13/2019 JavaScript50.ppt

    71/88

    Datep. 4-15

    dataHoje = new Date();

    dataHoje.getDay(); //dia da semana (0 a 6)dataHoje.getData(); //dia do ms (1 a 31)

    dataHoje.getMonth();dataHoje.getYear();dataHoje.getHour();

    dataHoje.getMinutes();dataHoje.getSeconds();

    Array

  • 7/13/2019 JavaScript50.ppt

    72/88

    Arrayp. 4-10

    Armazena dados indexadosdata = new Array(3);data[0] = 20;data[1] = 02;data[2] = 1975;

    data = new Array(20,02,1975);

    data = new Array(); //sem indexao prdefinidadata[0] = "20";

    data[2] = "1975";if (data[1]==null) {data[1]=prompt("Entre com o ms", "");}

    txt = "20/02/1975";data = txt.split("/");

    data.length 3 // length uma propriedade de Array

    Array

  • 7/13/2019 JavaScript50.ppt

    73/88

    produtos = "1:Porta retrato PHT:21.00;2:Abajur Rse:35.50;34:Cesta lixo valise:5.99";

    produtosArray = produtos.split(";");for (i=0; i < produtosArray.length; i++){

    prod = produtosArray[i].split(":");document.write(prod[0] + "
    ");document.write(prod[1] + "
    ");document.write(prod[2] + "
    ");

    }

    Array(continuao)

    Novos Objetos

  • 7/13/2019 JavaScript50.ppt

    74/88

    Novos Objetosp. 4-2

    function Produto(aCodigo, aNome, aPreco){this.codigo = aCodigo;this.nome =aNome;this.preco = aPreco;

    }

    ...p1 = new Produto(1, Porta retrato PHT, 21.00);

    P2 = new Produto(2, Abajur Rse, 35.50);P3 = new Produto (34, Cesta lixo valise, 5.99);

    ...

    document.write(p1.nome);

    Cookies

  • 7/13/2019 JavaScript50.ppt

    75/88

    Cookies6

    document.cookie =nomeCookie=texto_escape;expires=dataGMT;

    Ex.:document.cookies = "cliente=Mariano; expires= Monday, 22-Feb-99 00:00:00 GMT"document.cookies = "RG=123456789"

    alert(document.cookie); //cliente=Mariano; RG=123456789

    dataMorte = new Date(05,12,31);document.cookies ="nome="+escape("Joo Grando")+"; expires="+dataMorte.toGMTString();

    Criando funes para

  • 7/13/2019 JavaScript50.ppt

    76/88

    pComrcio-eletrnicocom Cookies

    function getConteudoCookie(nome){cookies = document.cookie.split("; ");for (i=0; i

  • 7/13/2019 JavaScript50.ppt

    77/88

    pComrcio-eletrnicocom Cookies

    function CancelarCookie(nome){diaHoje = new Date();diaOntem = new Date( diaHoje.getTime() - 1000*60*60*24 );diaOntemGMT = diaOntem.toGMTString();document.cookie = nome+"=; expires=" + diaOntemGMT;

    }

    function CancelarCompras(){

    CancelarCookie("compras");window.location.reload();

    }

    Criando funes para

  • 7/13/2019 JavaScript50.ppt

    78/88

    Comrcio-eletrnicocom Cookies

    function Comprar(codigo,produto,fabricante,preco,quantidade){if (!ehProdutoComprado(codigo)){sacola=getConteudoCookie("compras");if (sacola!=""){sacola+="*"}sacola+= codigo+"&"+produto+"&"+fabricante+"&"+

    preco+"&"+quantidade;document.cookie = "compras="+escape(sacola);}

    }

    21&Abajur&Modaluz&22.90&1*22&Castial&Modaluz&15.90&1

    Criando funes para

  • 7/13/2019 JavaScript50.ppt

    79/88

    Comrcio-eletrnicocom Cookies

    function ehProdutoComprado(codigo){sacola = getConteudoCookie("compras");if (sacola=="") {return false}else{

    produtos = sacola.split("*");

    for (i=0; i

  • 7/13/2019 JavaScript50.ppt

    80/88

    Comrcio-eletrnicocom Cookies

    function ExcluirProduto(codigo){if (ehProdutoComprado(codigo)){sacola=getConteudoCookie("compras");produtos = sacola.split("*");CancelarCookie("compras");

    for (i=0; i

  • 7/13/2019 JavaScript50.ppt

    81/88

    Comrcio-eletrnicocom Cookies

    function ListarCompras(){sacola=getConteudoCookie("compras");if (sacola!=""){

    produtos=sacola.split("*");for (i=0; i

  • 7/13/2019 JavaScript50.ppt

    82/88

    Relgios

    id = setTimeout("funcao()", 1000);Cria um relgio (id)para chamar uma funo aps n milisegundos

    clearTimeout(id)Cancela o relgio

    7

    Obs: setTimeout() e clearTimeout() so funes nativas

    Exemplo

  • 7/13/2019 JavaScript50.ppt

    83/88

    Exemplo

    Exemplo

  • 7/13/2019 JavaScript50.ppt

    84/88

    Exemplo

    Java Applets

  • 7/13/2019 JavaScript50.ppt

    85/88

    pp (NO JavaScript !)

    8

  • 7/13/2019 JavaScript50.ppt

    86/88

    Resumo

    JavaScript uma linguagem de programao

    Lgica deProgramao

    Eventos

    Objetos (propriedade e mtodos)

    Sintaxe (for, if...else, function, etc.)

    Funes nativas

    Objetos nativos (Date, Array etc.)

    Auto-avaliao

  • 7/13/2019 JavaScript50.ppt

    87/88

    Usurio1 Iniciante

    2 Bom

    Programador3 Iniciante4/5 Intermedirio6 - Profissional

    Em relao a JavaScript, voc :

    Leigo (0)

    0 No consegue copiar e colar cdigo JavaScript

    1 - Consegue usar o cdigo, mas no conseguir modificar parmetros2 Consegue modificar parmetros, mas no ler o cdigo3 Consegue ler o cdigo, mas no modific-lo4 Consegue adaptar o cdigo (poucas coisas)5 Desenvolver uma nova funo6 Desenvolver todo um novo programa

    Auto avaliao

    Avaliao

  • 7/13/2019 JavaScript50.ppt

    88/88

    Avaliao

    http://www.geocities.com/ResearchTriangle/4084/A) tjs_banner1.htmCopiar e modificar parmetros para mostrarnovos banners (0 - 2)

    B) tjs_resolucao2.htmAdaptar o cdigo para redirecionar a pgina em funoda resoluo do monitor (3 - 5)

    C) Contar (mostrando) quanto tempo o cliente est na pgina. Sedecorrido mais de um minuto, abrir janela Ajuda.

    6 No adaptar cdigo algum; somente consultar apostilas5 Adaptar cdigos (p. ex., ver timesp.htm)