• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Java script1
 

Java script1

on

  • 726 views

Slide de aula introdutorio de JavaScript

Slide de aula introdutorio de JavaScript

Statistics

Views

Total Views
726
Views on SlideShare
684
Embed Views
42

Actions

Likes
0
Downloads
18
Comments
0

2 Embeds 42

http://www.inf.poa.ifrs.edu.br 41
http://evandromanara.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Java script1 Java script1 Presentation Transcript

    • parte 1Prof Evandro Manara Miletto
    • Sum√°rioIntrodu√ß√£oVari√°veis e tipos de dadosOperadores
    • O que √© JavaScript?JavaScript √© uma linguagem de programa√ß√£o criada pelaNetscape para adicionar interatividade √°s p√°ginas HTMLO c√≥digo em JavaScript √© colocado dentro das p√°ginas HTML, ouseja, √© uma linguagem que roda no navegador do cliente (clientside)JavaScript √© uma linguagem interpretada, ou seja, o c√≥digoexecuta sem uma compila√ß√£o preliminar Curiosidades: 1a vers√£o criada em 1995 e implementada em 1996 no Netscape Navigator Ja foi chamado de Mocha, LiveScript, JavaScript e atualmente o nome oficial √© ECMA Script ( ver ECMA International) que o mant√©m http://www.ecma-international.org/
    • Onde atua o JavaScript?Tecnologia capaz de proverinteratividade do site com ointernauta, seguindo os padr√Ķesdo W3C
    • O que n√£o √© JavaScript?JavaJava n√£o tem nenhuma rela√ß√£o com JavaScript!
    • O que voc√™ pode fazer com JS?Por ser uma linguagem de programa√ß√£o, JavaScript permitecriar conte√ļdo din√Ęmico para o usu√°rioJavaScript √© capaz de ler e modificar o HTML de uma p√°gina.Isto permite criar ou eliminar partes de uma p√°ginaJavaScript pode reagir a eventos, ou seja, pode ser executadoquando alguma coisa acontecer Por exemplo, um evento pode ser disparado quando um usu√°rio clicar num elemento em HTML ou uma p√°gina terminar de carregar, etc
    • O que + voc√™ pode fazer com JS?JavaScript pode ser utilizado para validar dados dos formul√°riosantes do envio para o servidorJavaScript tamb√©m √© utilizado na cria√ß√£o de m√°scaras para oscampos. Por exemplo, o usu√°rio digita 5130234567 e este texto √©formatado automaticamente para: (51) 3023-4567JavaScript √© a base para o desenvolvimento de interfacesinterativas com AJAX(Asynchronous Javascript And XML)
    • exemplos de uso de JS:http://netscape.aol.com/ (change canvas)http://www.clicrbs.com.br/rs/ (personalizar capa)http://maps.google.com.br/ (drag and drop, visualiza√ß√£o,fechamento de div, etc.)http://www.google.com.br (autocompletar)http://www.facebook.com/ (jenela de chat, mouseover fotos,etc.)http://jqueryui.com/demos/ (drag, acordeon, etc.)http://dojotoolkit.org/widgets (guias, calend√°rios, etc.)Valida√ß√£o de campos de formul√°rio
    • Primeiro programa JavaScript JavaScript dentro da tag body <html> <head> </head> <body> <script type="text/javascript"> document.write("Hello World"); </script> </body> </html>
    • Pop Up JavaScript ‚ÄúHello World!‚ÄĚJavaScript dentroda tag head Declarando uma fun√ß√£o em JavaScript <html> <head> <script type="text/javascript"> function message(){ alert("Function: Hello World"); } </script> </head> <body onload="message()"> </body> </html>
    • JavaScript nas tags Head e Body <html> <head> <script type="text/javascript"> function hello(){ alert("Function: Hello World"); } </script> </head> <body onload="hello()"> <script type="text/javascript"> <!-- document.write("Hello World"); --> </script> </body> </html>
    • ‚ÄúLinked JavaScript‚ÄĚ na tag Head <html> <head> <script type="text/javascript" src="script.js"></script> </head> <body> </body> </html> script.js function hello(){ alert("Function: Hello World"); }
    • Vari√°veis e tipos de dados
    • Regras para vari√°veis em JSJavaScript √© uma linguagem case-sensitive ( a e A s√£o vari√°veis diferentes )Vari√°veis necessitam iniciar com uma letra ou um underscoreUtilize a palavra-chave var para declarar (criar) uma vari√°vel var usuario; var _resultado; var 2valor;
    • Vari√°vel Local x GlobalLocal ¬† Uma vari√°vel declarada dentro de uma fun√ß√£o JavaScript torna-se LOCAL e pode ser acessada apenas dentro dessa fun√ß√£o (vari√°vel de escopo local). Pode-se ter vari√°veis locais como o mesmo nome em fun√ß√Ķes diferentes S√£o destru√≠das ao sair da fun√ß√£oGlobal Vari√°veis declaradas fora de uma fun√ß√£o torna-se GLOBAL e todos os scripts e fun√ß√Ķes na p√°gina Web podem acess√°-las S√£o destru√≠das quando se fecha a p√°gina do navegador. Vari√°veis declaradas sem o var, sempre se tornam GLOBAIS
    • Declarando vari√°veis em JS O exemplo abaixo apresenta a declara√ß√£o de duas vari√°veis: x e carname. var x; var carname; Tamb√©m √© poss√≠vel inicializar uma vari√°vel no momento da declara√ß√£o var x=5; x=5; var carname=‚ÄĚfusca‚ÄĚ; = carname=‚ÄĚfusca‚ÄĚ; √Č poss√≠vel tamb√©m redeclarar uma vari√°vel. Neste caso, o valor original √© perdido x=5; x;
    • Tipos de dados JavaScriptNumbers ¬† qualquer valor que possa ser calculado (positivo ou negativo).Strings ¬† uma seq√ľ√™ncia de caracteresBoolean verdade ou falso (true e false). ¬†Null um valor vazio (aus√™ncia de valor). Aten√ß√£o: null √© diferente de 0 (zero).
    • NumbersOs n√ļmeros podem ser escritos em tr√™s bases: Base 10 (decimal) exemplo: 56 (sem o zero) Base 8 ¬†(octal) Exemplo: 056 o zero na frente representa um n√ļmero em octal Base 16 (hexadecimal) exemplo: ox5F ou OX5F O zero x (ox) define um n√ļmero em hexadecimal.
    • Numbers - ponto flutuante 7.2945 -34.2 2e3 =>2x103 => 2000 2e-3 => 2 x 10-3 => 0.002
    • StringsUma String √© uma seq√ľ√™ncia de caracteres: "Hello!" // String declarada com aspas duplas ‚Äė245‚Äė // String declarada com aspas simples "" // String vazia Nota: Uma String vazia √© diferente de Null ¬†
    • BooleanDiferente de outras linguagens de programa√ß√£o o valor deum boolean √© apenas true ou falseEm JavaScript, o valor zero (0) e um (1) n√£o s√£o consideradoscomo true ou false ¬†
    • NullO null √© um tipo de dado que indica que uma vari√°vel n√£o possuivalorO valor null √© retornado se voc√™ tentar utilizar uma vari√°vel quen√£o foi definida e sem valorUm exemplo, se o usu√°rio escolher cancelar, o null √© retornadona fun√ß√£o prompt: ¬† function nome(){ alert(prompt("Nome","digite o seu nome")); }
    • NaN (not a number)Algumas fun√ß√Ķes retornam um valor especial chamado NaN√Č poss√≠vel fazer um teste para verificar se um valor √© um n√ļmeroou n√£o: function notANumber(){ alert(isNaN("Hello")); }
    • Operadores
    • Operadores artim√©ticos‚Äú=‚ÄĚ atribui valores a uma vari√°vel e ‚Äú+‚ÄĚ soma valores y=5; z=2; x=y+z; valor de x?considerando Y=5
    • Operadores de atribui√ß√£oconsiderando x=10 e Y=5Operador + faz adi√ß√£o e concatena√ß√£o (usado em string)
    • Operadores de compara√ß√£oconsiderando x=5
    • Operadores l√≥gicosusados para determinar a l√≥gica entre vari√°veis e valores
    • Coment√°rios em JScoment√°rios em linha simples come√ßam com //em m√ļltiplas linhas come√ßam com /* e terminam com */
    • Exerc√≠cio 1 Criar um formul√°rio Web com apenas 1 bot√£o com o valor ‚ÄúMostrar o Alert box‚ÄĚ que abra uma janela com a mensagem: ‚ÄúOl√° Mundo! eu sou um Alert Box‚ÄĚ, conforme exemplo abaixo:
    • Exerc√≠cio 2 Procurar na Web uma solu√ß√£o para mostrar uma caixa de prompt e ap√≥s a inser√ß√£o do nome, dar as boas vindas!
    • Refer√™ncias Tutorial de JavaScript do W3C http://www.w3schools.com/js JavaScript Datatypes http://www.sislands.com/coin70/week1/datatype.htm Baseado no material do Prof Rodrigo Prestes Machado