1
Material de suporte às aulas de Programação Cliente em Sistemas Web
Javascript Exemplos práticos Márcio Brasil www.marciobrasil.net.br
2
Javascript - Exemplos Prรกticos
3
Javascript Exemplos prรกticos Mรกrcio Brasil
4
Javascript - Exemplos Práticos
Variáveis // Números // Não tem aspas var valor1 = 10; var valor2 = 3.14; document.writeln(valor1 + “ é um valor inteiro, já “ + valor2 + “ é um ponto flutuante!<br/>”); // Caracteres // Usa aspas var nome = “Márcio”; var cidade = “São Paulo”; document.writeln(“Meu nome é <strong>” + nome + “</strong> e sou de <strong>” + cidade + “</strong><br/>”); // Valores booleanos - true / false var nome = false; if (nome == false) { document.writeln(“A variável booleana está <strong>FALSA</strong>.<br/>”); } else { document.writeln(“A variável booleana está <strong>VERDADEIRA</strong>.<br/>”); } // Valores nulos var valor = ‘’; document.write(“O valor é nulo: “ + valor + “<br/>”); var valor = 10; document.write(“O valor era nulo agora é: “ + valor + “<br/>”); // Valores ARRAY var nome = new Array(3); nome[0] = “Márcio “; nome[1] = “Brasil “; nome[2] = “de “; nome[3] = “Oliveira”; document.write(“Meu nome é <strong>” + nome[0] + nome[1] + nome[2] + nome[3] + “</strong><br/>”);
Resultado 10 é um valor inteiro, já 3.14 é um ponto flutuante! Meu nome é Márcio e sou de São Paulo A variável booleana está FALSA. O valor é nulo: O valor era nulo agora é: 10 Meu nome é Márcio Brasil de Oliveira Meu nome é Gabriela
5
Variáveis <script> // Variavel Global var nome = “Gabriela”; document.writeln(“<p>Meu nome é “ + nome + “</p>”); function exemplo1() { // Variavel Local var nome = “Giselli”; document.writeln(“<p>Meu nome é “ + nome + “</p>”); } function exemplo2(nome) { document.write(“<p>Meu nome é: “ + nome + “</p>”); } </script>
<body> <hr/> <script> exemplo1(); document.write(nome); exemplo2(“Patrícia”); </script> </body>
Resultado Meu nome é Giselli Gabriela Meu nome é: Patrícia
6
Javascript - Exemplos Práticos
Estruturas de decisão // Na estrutura If, é realizado um teste e realizado uma instrução de saída caso verdadeiro, e outra instrução de saída caso falso, essa estrutura só tem 2 saídas. var a = 3; var b = 5; if(a < b) { document.writeln(“a é menor que b” + “<br/>”); } //esse laço também pode ter uma saída para quando o teste for falso, para isso usaremos o else: var a = 5; var b = 3; if(a < b) { document.writeln(“a menor que b” + “<br/>”) } else { document.writeln(“b menor que a” + “<br/>”); } // O operador de negação é usado para inverter o teste: var a = 5; var b = 3; if(!a < b) { document.write(“b menor que a” + “<br/>”); } else { document.write(“a menor que b” + “<br/>”); } // Já na estrutura Switch, não é realizado um teste lógico, mas indicado uma variável e apresentado saídas que só serão executadas se o valor for igual a mesma. var a = 2; switch(a) { case 1: document.write(“1” + “<br/>”); break; case 2: document.write(“2” + “<br/>”); break; case 3: document.write(“3” + “<br/>”); break; case 4: document.write(“4” + “<br/>”); break; }
7
Estruturas de decisão // Sem o break var a = 2; switch(a) { case 1: document.write(“1”); case 2: document.write(“2”); case 3: document.write(“3”); case 4: document.write(“4”); } document.write(“</br>”) // Saída default var a = 7; switch(a) { case 1: document.write(“1”); break; case 2: document.write(“2”); break; case 3: document.write(“3”); break; case 4: document.write(“4”); break; default: document.write(“não encontrado”); break; } // Caixa de dialogo: confirm var questao = confirm(“mil é menor que 1 milhão?”); if(questao) { alert(“resposta correta”); } else { alert(“resposta errada”); } // Teste invertido var questao = confirm(“mil é menor que 1 milhão?”); if(!questao) { alert(“resposta errada”); } else { alert(“resposta correta”); }
8
Javascript - Exemplos Práticos
Operadores Lógicos // Operadores Aritméticos (+,-,*,/,%) a=7; b=2; x = a + b; document.write(a +”+”+ b +”=”+ x + ‘</br>’); x = a - b; document.write(a +”-”+ b +”=”+ x + ‘</br>’); x = a * b; document.write(a +”*”+ b +”=”+ x + ‘</br>’); x = a / b; document.write(a +”/”+ b +”=”+ x + ‘</br>’); x = a % b; document.write(a +”%”+ b +”=”+ x + ‘</br>’); document.write(‘====================’+ ‘</br>’); // Operadores de atribuição (+=, -=, *=, /=, %=) x = 5; y = 5; document.write(‘Valor inicial de ( x = ‘+x+’ )</br>’); document.write(‘Valor inicial de ( y = ‘+y+’ )</br>’); x += y; document.write(‘ ( x += y ou x = x + ‘+y+’ ) x agora vale ‘+x+’</br>’); x -= y; document.write(‘ ( x -= y ou x = x - ‘+y+’ ) x voltou a valer ‘+x+’</br>’); x *= y; document.write(‘ ( x *= y ou x = x * ‘+y+’ ) x agora vale ‘+x+’</br>’); x /= y; document.write(‘ ( x /= y ou x = x / ‘+y+’ ) x voltou a valer ‘+x+’</br>’); x %= y; document.write(‘ ( x %= y ou x = x % ‘+y+’ )</br>’); document.write(‘====================’+ ‘</br>’); // Operadores lógicos x = (true && false); // false // logical and document.write(x+ ‘</br>’); x = (true || false); // true // logical or document.write(x+ ‘</br>’); x = !(true); // false // logical not document.write(x+ ‘</br>’); document.write(‘====================’+ ‘</br>’);
9
Operadores Lógicos // Concatenação de strings x = “Hello”; // assina document.write(x+ ‘</br>’); x = x + “ World”; // concatena document.write(x+ ‘</br>’); x += “ World”; // concatena e assina document.write(x+ ‘</br>’);
Resultado 7+2=9 7-2=5 7*2=14 7/2=3.5 7%2=1 ==================== Valor inicial de ( x = 5 ) Valor inicial de ( y = 5 ) ( x += y ou x = x + 5 ) x agora vale 10 ( x -= y ou x = x - 5 ) x voltou a valer 5 ( x *= y ou x = x * 5 ) x agora vale 25 ( x /= y ou x = x / 5 ) x voltou a valer 5 ( x %= y ou x = x % 5 ) ==================== false true false ==================== Hello Hello World Hello World World
10
Javascript - Exemplos Prรกticos
11
12
Javascript - Exemplos Prรกticos