Baixe o app para aproveitar ainda mais
Prévia do material em texto
1 Obtendo entrada de usuários com diálogos rápidos (prompt) • Palavras-chave são palavras com significado especial em JavaScript • var é uma palavra-chave • Usado para declarar os nomes das variáveis • Uma variável é uma localização na memória do computador, onde um valor pode ser armazenado para uso por um programa • Todas as variáveis têm um nome, tipo e valor, e deve ser declarado com uma declaração var antes de serem usados em um programa • Um nome de variável pode ser qualquer identificador válido consistindo de letras, dígitos, sublinhados (_) e sinais de cifrão ($) que não comecem com um dígito 2 Boa prática de programação Escolher nomes de variáveis significativos ajudam um script para ser "auto-documentado" (ou seja, fácil de entender, basta ler o roteiro, ao invés de ter que ler manuais ou comentários estendidos). 3 Boa prática de programação Por convenção, os identificadores de nomes de variáveis começam com uma primeira letra minúscula. Cada palavra subsequente deve começar com uma primeira letra maiúscula. Por exemplo, o identificador itemprice tem um capital P em sua segunda palavra, Price. 4 Boa prática de programação Alguns programadores preferem declarar cada variável em uma linha separada. Este formato permite a fácil inserção de um comentário descritivo ao lado de cada declaração. Este é um padrão de codificação profissional amplamente seguido. 5 Obtendo entrada de usuários com diálogos rápidos (prompt) • As declarações terminam com um ponto e vírgula (;) e pode ser dividida em várias linhas, com cada variável na declaração separada por uma vírgula (formando uma lista de nomes de variáveis separados por vírgulas) • Diversas variáveis podem ser declaradas em uma declaração ou em múltiplas declarações. Comentários – Um comentário de uma única linha inicia-se com os caracteres / / e termina na extremidade da linha – Comentários de várias linhas começam com delimitador / * e terminar com delimitador * / – Todo o texto entre os delimitadores do comentário é ignorado pelo interpretador. 6 Obtendo entrada de usuários com diálogos rápidos (prompt) • O método prompt do objeto window exibe uma caixa de diálogo na qual o usuário pode digitar um valor. – O primeiro argumento é uma mensagem (chamada de prompt) que direciona o usuário a tomar uma ação específica. – O segundo argumento opcional é a sequência de caracteres padrão para exibir no campo de texto. • Script pode, então, usar o valor que as entradas do usuário 7 Obtendo entrada de usuários com diálogos rápidos (prompt) • Uma variável é atribuída um valor com uma declaração de atribuição, usando o operador de atribuição, =. • O operador = é chamado de operador binário, uma vez que possui dois operandos. 8 Boa prática de programação Colocar os espaços em ambos os lados de um operador binário. Este formato faz com que o operador se destacar e torna o programa mais legível. 9 Obtendo entrada de usuários com diálogos rápidos (prompt) •nullnullnullnull keyword – Significa que uma variável não tem valor – null não é uma string literal, mas sim um prazo pré-definido que indica a ausência de valor – Escrevendo um valor nulo para o documento, no entanto, mostra a palavra "null" • Function parseIntparseIntparseIntparseInt – converte seu argumento string para um inteiro – JavaScript tem uma versão do operador + para concatenação que permite que uma string e um valor de outro tipo de dados (incluindo outro string) a ser concatenado 10 Caixa Prompt usado em uma tela de boas- vindas (Parte 1 de 2). 1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?> 2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>> 4 5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 6.7: welcome5.html 6.7: welcome5.html 6.7: welcome5.html 6.7: welcome5.html -------->>>> 6 <!<!<!<!-------- Prompt box used on a welcome screen. Prompt box used on a welcome screen. Prompt box used on a welcome screen. Prompt box used on a welcome screen. -------->>>> 7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>> 8 <head> <head> <head> <head> 9 <title><title><title><title>Using Prompt and Alert BoxesUsing Prompt and Alert BoxesUsing Prompt and Alert BoxesUsing Prompt and Alert Boxes</title></title></title></title> 10 <script type = <script type = <script type = <script type = "text/javascript""text/javascript""text/javascript""text/javascript">>>> 11 <!<!<!<!-------- 12 varvarvarvar name; name; name; name; // string entered by the user// string entered by the user// string entered by the user// string entered by the user 13 14 // read the name from the prompt box as a string// read the name from the prompt box as a string// read the name from the prompt box as a string// read the name from the prompt box as a string 15 name = window.prompt( name = window.prompt( name = window.prompt( name = window.prompt( "Please enter your name""Please enter your name""Please enter your name""Please enter your name" );););); 16 17 document.writeln( document.writeln( document.writeln( document.writeln( "<h1>Hello, ""<h1>Hello, ""<h1>Hello, ""<h1>Hello, " + name + + name + + name + + name + 18 ", welcome to JavaScript programming!</h1>"", welcome to JavaScript programming!</h1>"", welcome to JavaScript programming!</h1>"", welcome to JavaScript programming!</h1>" );););); 19 // // // // -------->>>> 20 </script></script></script></script> 21 </head></head></head></head> 22 <body> <body> <body> <body> 23 <p><p><p><p>Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.</p> </p> </p> </p> 24 </body></body></body></body> 25 </html></html></html></html> Declara uma nova variável Define o identificador da variável como name Atribui a string digitada pelo usuário para a variável name Insere o valor dado para a variável name no texto XHTML 11 caixa Prompt usada em uma tela de boas-vindas (Parte 2 de 2). 12 Prompt exibido pelo objeto windowwindowwindowwindow 13 Adição de Script (Parte 1 de 2). 1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?> 2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>>4 5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 6.9: addition.html 6.9: addition.html 6.9: addition.html 6.9: addition.html -------->>>> 6 <!<!<!<!-------- Addition script. Addition script. Addition script. Addition script. -------->>>> 7 <html xmlns =<html xmlns =<html xmlns =<html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>> 8 <head><head><head><head> 9 <title><title><title><title>An Addition ProgramAn Addition ProgramAn Addition ProgramAn Addition Program</title></title></title></title> 10 <script type = <script type = <script type = <script type = "text/javascript""text/javascript""text/javascript""text/javascript">>>> 11 <!<!<!<!-------- 12 varvarvarvar firstNumber; firstNumber; firstNumber; firstNumber; // first string entered by user // first string entered by user // first string entered by user // first string entered by user 13 varvarvarvar secondNumber; secondNumber; secondNumber; secondNumber; // s// s// s// second string entered by userecond string entered by userecond string entered by userecond string entered by user 14 varvarvarvar number1; number1; number1; number1; // first number to add // first number to add // first number to add // first number to add 15 varvarvarvar number2; number2; number2; number2; // second number to add // second number to add // second number to add // second number to add 16 varvarvarvar sum; sum; sum; sum; // sum of number1 and number2 // sum of number1 and number2 // sum of number1 and number2 // sum of number1 and number2 17 18 // read in first number from us// read in first number from us// read in first number from us// read in first number from user as a stringer as a stringer as a stringer as a string 19 firstNumber = window.prompt( firstNumber = window.prompt( firstNumber = window.prompt( firstNumber = window.prompt( "Enter first integer""Enter first integer""Enter first integer""Enter first integer" );););); 20 21 // read in second number from user as a string// read in second number from user as a string// read in second number from user as a string// read in second number from user as a string 22 secondNumber = window.prompt( secondNumber = window.prompt( secondNumber = window.prompt( secondNumber = window.prompt( "Enter second integer""Enter second integer""Enter second integer""Enter second integer" );););); 23 24 // convert numbe// convert numbe// convert numbe// convert numbers from strings to integersrs from strings to integersrs from strings to integersrs from strings to integers 25 number1 = parseInt( firstNumber );number1 = parseInt( firstNumber );number1 = parseInt( firstNumber );number1 = parseInt( firstNumber ); 26 number2 = parseInt( secondNumber );number2 = parseInt( secondNumber );number2 = parseInt( secondNumber );number2 = parseInt( secondNumber ); 27 28 sum = number1 + number2; sum = number1 + number2; sum = number1 + number2; sum = number1 + number2; // add the numbers// add the numbers// add the numbers// add the numbers 29 Atribui a primeira entrada do usuário para a variável firstNumber Atribui a segunda entrada do usuário para a variável secondNumber Converte as strings inseridas pelo usuário em números inteiros 14 Adição de Script (Parte 2 de 2). 30 // display the results// display the results// display the results// display the results 31 document.writeln( document.writeln( document.writeln( document.writeln( "<h1>The sum is ""<h1>The sum is ""<h1>The sum is ""<h1>The sum is " + sum + + sum + + sum + + sum + "</h1>""</h1>""</h1>""</h1>" ); ); ); ); 32 // // // // -------->>>> 33 </script> </script> </script> </script> 34 </head> </head> </head> </head> 35 <body> <body> <body> <body> 36 <p> <p> <p> <p>Click Refresh (or Reload) to run the script againClick Refresh (or Reload) to run the script againClick Refresh (or Reload) to run the script againClick Refresh (or Reload) to run the script again</p></p></p></p> 37 </ </ </ </body>body>body>body> 38 </html></html></html></html> 15 Conceitos da Memória • Os nomes das variáveis correspondem a locais na memória do computador. • Cada variável tem um nome, um tipo e um valor. • Quando um valor é colocado num local de memória, o substitui o valor anterior no local. • Quando um valor é lido a partir de um local de memória, o processo é não destrutivo. 16 Localização de memória mostrando o nome e o valor da variável number1number1number1number1. 17 Posições de memória depois de introduzir valores para as variáveis number1number1number1number1 e number2number2number2number2. 18 Posições de memória depois de calcular sumsumsumsum de number1number1number1number1 e number2number2number2number2 . 19 Conceitos da Memória (Cont.) • JavaScript não requer que variáveis tenham um tipo antes de ser usada num programa • Uma variável em JavaScript pode conter um valor de qualquer tipo de dados, e em muitas situações, o JavaScript converte automaticamente valores de diferentes tipos • Quando uma variável é declarada em JavaScript, mas não é dado um valor, ela tem um valor indefinido. • A tentativa de usar o valor de tal variável é normalmente um erro de lógica. • Quando as variáveis são declaradas, não são atribuídos valores padrão, salvo indicação em contrário pelo programador. – Para indicar que uma variável não contiver um valor, você pode atribuir o valor null para ela. 20 Operadores Aritméticos • Os operadores aritméticos (+, -, *, / e %) são operadores binários, porque cada um deles operam em dois operandos • JavaScript proporciona ao operador resto,%, o que produz o resto da divisão • As expressões aritméticas em JavaScript devem ser escritas em forma linear para facilitar programas 21 Operadores aritméticos. JavaScript operation Arithmetic operator Algebraic expression JavaScript expression Addition + f + 7 F + 7 Subtraction - p – c P - c Multiplication * bm b * m Division / x / y or x ÷ y or x � y x / y Remainder % r mod s r % s 22 Operadores Aritméticos (Cont.) • Parênteses podem ser usados para agrupar expressões como na álgebra. • Operadores em expressões aritméticas são aplicados em uma sequência precisa determinada pelas regras de precedência do operador: – Operações de multiplicação, divisão e resto são aplicados primeiro. – Se uma expressão contém várias dessas operações, os operadores são aplicados da esquerda para a direita. – Operações de multiplicação, divisão e resto dizem ter o mesmo nível de precedência. – Operações de adição e subtração são aplicadas em seguida. – Se uma expressão contém várias dessas operações, os operadores são aplicados da esquerda para a direita. – Operações de adição e subtração têm o mesmo nível de precedência. • Quando dizemos que os operadores são aplicados da esquerdapara a direita, estamos nos referindo à associatividade dos operadores. Alguns operadores associam da direita para a esquerda. 23 Boa prática de programação Use parênteses para expressões aritméticas complexas, mesmo quando os parênteses não são necessários, pode-se fazer as expressões aritméticas mais fáceis de ler. 24 Ordem na qual um polinômio de segundo grau é avaliado. 25 Operadores Relacionais e de Igualdade • Declaração ifififif permite a um programa tomar uma decisão com base na verdade ou falsidade de uma condição – se se se se a condição é satisfeita (ou seja, a condição é truetruetruetrue (verdadeira)), a declaração no corpo da instrução ifififif é executada – SeSeSeSe a condição não for atendida (ou seja, a condição é falsefalsefalsefalse (falsa)), a declaração no corpo da instrução ifififif não é executada • As condições nas declarações ifififif podem ser formadas usando os operadores de igualdade e relacionais 26 Operadores de Igualdade e relacionais. Standard algebraic equality operator or relational operator JavaScript equality or relational operator Sample JavaScript condition Meaning of JavaScript condition Equality operators = == x == y x is equal to y != x != y x is not equal to y Relational operators > > x > y x is greater than y < < x < y x is less than y ≥ >= x >= y x is greater than or equal to y < <= x <= y x is less than or equal to y 27 Erro comum de programação É um erro de sintaxe se os operadores ==, !=, >= e <= conter espaços entre os seus símbolos, como em = =, ! =, > = e < =, respectivamente. 28 Erro comum de programação Invertendo os operadores !=, >= e <=, como em =!, => e = <, respectivamente, é um erro de sintaxe. 29 Erro comum de programação Confundir o operador de igualdade, ==, com o operador de atribuição, =, é um erro de lógica. O operador de igualdade deve ser lido como "é igual a", e o operador de atribuição deve ser lido como “recebe" ou "obtém o valor." 30 Operadores Relacionais e de Igualdade • Se mais de uma variável é declarada em uma única declaração, os nomes são separados por vírgulas (,) – Esta lista de nomes é referido como uma lista separada por vírgula 31 Operadores Relacionais e de Igualdade •DateDateDateDate object – Usado para adquirir a hora local atual – Cria uma nova instância de um objeto usando o operador newnewnewnew seguido do tipo do objeto, datedatedatedate, e um par de parênteses 32 Usando operadores de igualdade e relacionais (Parte 1 de 3). 1 <?xml version = <?xml version = <?xml version = <?xml version = "1.0""1.0""1.0""1.0" encoding = encoding = encoding = encoding = "utf"utf"utf"utf----8"8"8"8"?>?>?>?> 2 <!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC<!DOCTYPE html PUBLIC """"----//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN"//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1"http://www.w3.org/TR/xhtml1/DTD/xhtml1----strict.dtd"strict.dtd"strict.dtd"strict.dtd">>>> 4 5 <!<!<!<!-------- Fig.Fig.Fig.Fig. 6.17: welcome6.html 6.17: welcome6.html 6.17: welcome6.html 6.17: welcome6.html -------->>>> 6 <!<!<!<!-------- Using equality and relational operatoUsing equality and relational operatoUsing equality and relational operatoUsing equality and relational operators. rs. rs. rs. -------->>>> 7 <html xmlns = <html xmlns = <html xmlns = <html xmlns = "http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml""http://www.w3.org/1999/xhtml">>>> 8 <head><head><head><head> 9 <title><title><title><title>Using Relational OperatorsUsing Relational OperatorsUsing Relational OperatorsUsing Relational Operators</title></title></title></title> 10 <script type = <script type = <script type = <script type = "text/javascript""text/javascript""text/javascript""text/javascript">>>> 11 <!<!<!<!-------- 12 varvarvarvar name; name; name; name; // string entered by the user// string entered by the user// string entered by the user// string entered by the user 13 varvarvarvar now = now = now = now = newnewnewnew Date();Date();Date();Date(); // current date and time// current date and time// current date and time// current date and time 14 varvarvarvar hour = now.getHours();hour = now.getHours();hour = now.getHours();hour = now.getHours(); // current hour (0// current hour (0// current hour (0// current hour (0----23)23)23)23) 15 16 // read the name from the prompt box as a string// read the name from the prompt box as a string// read the name from the prompt box as a string// read the name from the prompt box as a string 17 name = window.promptname = window.promptname = window.promptname = window.prompt( "Please enter your name""Please enter your name""Please enter your name""Please enter your name" ); 18 19 // determine whether it is morning// determine whether it is morning// determine whether it is morning// determine whether it is morning 20 ifififif ( hour < ( hour < ( hour < ( hour < 12121212 )))) 21 document.write( document.write( document.write( document.write( "<h1>Good Morning, " "<h1>Good Morning, " "<h1>Good Morning, " "<h1>Good Morning, " );););); 22 Define a variável now para um new objeto Date Atribui hora para o valor retornado pelo método getHours do objeto Date Declaração condicional: verifica se o valor atual de hour é inferior a 12 Esta declaração será executada apenas se a condição anterior era verdade 33 Usando operadores de igualdade e relacionais (Parte 2 de 3). 23 // determine whether the time is PM// determine whether the time is PM// determine whether the time is PM// determine whether the time is PM 24 ifififif ( hour >= ( hour >= ( hour >= ( hour >= 12121212 )))) 25 {{{{ 26 // convert to a 12// convert to a 12// convert to a 12// convert to a 12----hour clockhour clockhour clockhour clock 27 hour = hour hour = hour hour = hour hour = hour ---- 12121212;;;; 28 29 // determine whether it is before 6 PM// determine whether it is before 6 PM// determine whether it is before 6 PM// determine whether it is before 6 PM 30 ifififif ( hour < ( hour < ( hour < ( hour < 6666 )))) 31 document.write( document.write( document.write( document.write( "<h1>Good Afternoon, ""<h1>Good Afternoon, ""<h1>Good Afternoon, ""<h1>Good Afternoon, " );););); 32 33 // determine whether it is after 6 PM// determine whether it is after 6 PM// determine whether it is after 6 PM// determine whether it is after 6 PM 34 ifififif ( hour >= ( hour >= ( hour >= ( hour >= 6666 )))) 35 document.write(document.write(document.write(document.write("<h1>Good Evening, " "<h1>Good Evening, " "<h1>Good Evening, " "<h1>Good Evening, " );););); 36 } } } } // en// en// en// end ifd ifd ifd if 37 38 document.writeln( name +document.writeln( name +document.writeln( name +document.writeln( name + 39 ", welcome to JavaScript programming!</h1>"", welcome to JavaScript programming!</h1>"", welcome to JavaScript programming!</h1>"", welcome to JavaScript programming!</h1>" );););); 40 // // // // -------->>>> 41 </script></script></script></script> 42 </head></head></head></head> 43 <body><body><body><body> 44 <p><p><p><p>Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.Click Refresh (or Reload) to run this script again.</p></p></p></p> 45 </body></body></body></body> 46 </html></html></html></html> Declaração condicional: verifica se o valor atual da hour é maior ou igual a 12 Se hour for 12 ou superior (a condição anterior era verdade), subtrair 12 do valor e atribuí-la a hour Declaração condicional: verifica se o valor atual de hour é inferior a 6 Declaração condicional: verifica se o valor atual da hour é maior ou igual a 6 34 Usando operadores de igualdade e relacionais (Parte 3 de 3). 35 Boa prática de programação Inclua comentários após a chave de fechamento das declarações de controle para indicar onde as terminam as declarações finais 36 Boa prática de programação Recue (indent) a instrução no corpo de uma instrução ifififif para fazer o corpo da declaração se destacar além de melhorar a legibilidade do programa. 37 Boa prática de programação Coloque apenas uma instrução por linha em um programa. Isso melhora a legibilidade do programa. 38 Erro comum de programação Esquecer à esquerda e/ou a direita os parênteses para a condição em uma declaração ifififif é um erro de sintaxe. Os parênteses são necessários. 39 Erro comum de programação Colocar um ponto-e-vírgula imediatamente após o parêntese direito da condição em uma declaração ifififif é normalmente um erro de lógica. O ponto e vírgula faria com que o corpo do ifififif ficasse vazio, então a declaração em si iria se realizar sem nenhuma ação, independentemente de sua condição. Pior ainda, a afirmação do corpo a que se destina a instrução ifififif que agora se tornou uma declaração em sequência após a instrução ifififif e seria sempre executado. 40 Erro comum de programação Deixando de fora a condição de uma série de instruções IF é normalmente um erro de lógica. Por exemplo, verificar se hora é maior do que 12 ou menos de 12, mas não se hora é igual a 12, significa que o script não toma nenhuma providência quando hora é igual a 12. Sempre certifique-se de lidar com todas as condições possíveis. 41 Boa prática de programação Uma longa declaração pode ser repartida por várias linhas. Se uma única instrução deve ser dividida em linhas, escolha pontos de quebra que fazem sentido, como depois de uma vírgula em uma lista separada por vírgulas ou depois de um operador em uma expressão longa. Se uma instrução é dividida em duas ou mais linhas, recue todas as linhas subsequentes. 42 Boa prática de programação Consulte a tabela de precedência de operadores ao escrever expressões que contêm muitos operadores. Confirme que as operações são executadas na ordem em que você espera que eles sejam executados. Se não tiver certeza sobre a ordem de avaliação de uma expressão complexa, use parênteses para forçar a ordem, exatamente como você faria em expressões algébricas. Não deixe de observar que alguns operadores, como de atribuição (=), associam da direita para a esquerda e não da esquerda para a direita. 43 Precedência e associatividade dos operadores discutidos até agora. Operators Associativity Type * / % left to right multiplicative + - left to right additive < <= > >= left to right relational == != left to right equality = right to left assignment
Compartilhar