0% acharam este documento útil (0 voto)

6 visualizações

Python Tema4 Parte8 BR v1

Python 8

Enviado por

biblioteamo

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

6 visualizações

Python Tema4 Parte8 BR v1

Python 8

Enviado por

biblioteamo

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 46

IBM SkillsBuild | Introducción a Python

Desenvolvimento Web
JavaScript para desenvolvimento web

1
IBM SkillsBuild | Introducción a Python

Índice
Introdução 4
Características do Javascript 5
Onde vai o Javascript? 5
Na head 5
Em uma etiqueta 5
Linkar uma página Javascript ao nosso HTML 5
Entrada e saída de dados 5
Prompts() 6
Alert() 6
Alerta normal 6
Alertas de confirmação 6
console.log() 6
Document.write() 7
Estruturas básicas 7
Declarações 7
Funções pré-definidas 8
Comentários 8
Tipos de dados 8
Modo estrito 8
Declaração variável 8
Casting do variável 10
Constantes 10
Exemplos de operações com variáveis 10
Strings 12
Funções de strings 12
Modelos de strings 14
Operadores 14
Operadores de Atribuição 14
Operadores de Incremento e Decremento 15
Operadores Lógicos 16
Negação 16
AND 17
OR 17
Operadores Matemáticos 18
Operadores Relacionais 18
Condições e loops em JavaScript 20
Condicionais 21
Comparadores 21
IF…ELSE 22
SWITCH…CASE 23
2
IBM SkillsBuild | Introducción a Python

Loops 24
O loop dado para FOR 24
WHILE. DO…WHILE 26
Break 28
Arrays 28
Funções da arrays 29
Travessar arrays com for 30
Travessar arrays com for each 31
Travessar arrays com for in 31
Buscando em um array 31
Arrays multidimensionais 32
POO 32
Funções 33
Parâmetros de rest y spread 36
Parâmetros de spread 36
Funções anónimas 36
Callback 36
Funções das setas 39
Eventos 40
Manipuladores de eventos especificados no código HTML 40
Manipuladores de eventos associados ao addEventListener 42
Apêndice do evento Javascript 43
DOM 44
Seleção de clases e etiquetas 45
BOM 46

3
IBM SkillsBuild | Introducción a Python

Introdução

Começamos neste tópico com a terceira parte do

padrão HTML5, javascript.

Uma página web HTML5 será composta de três

partes bem definidas:

• O código HTML: Composto de tags HTML que

formarão o esqueleto de nossa página WEB.
• O código CSS: Com o qual daremos um aspecto
gráfico à nossa página WEB.
• O código Javascript: Com o qual forneceremos
animação e interatividade à nossa página WEB.

4
IBM SkillsBuild | Introducción a Python

Características do Em uma etiqueta

Javascript <p onClick="alert('Hola

mundo');">Página de prueba Javascript</p>

• Funciona localmente.
• Ela é interpretada, não compilada. Com o comando acima, emitimos uma mensagem de
• Ela é responsiva. alerta dizendo "Hola mundo".
• Adiciona interatividade aos websites.
• Proporciona efeitos visuais dinâmicos. Linkar uma página Javascript ao nosso
HTML
Onde vai o Javascript? Neste caso, criamos a página Javascript e no head
de nossa página HTML colocamos:

Para "linkar" uma página javascript a html, você

<head>
pode colocá-la na head, em qualquer tag ou "linkar"
<meta charset="UTF-8" />
a página inteira (similar a como fizemos com o CSS);
<title>Ejemplo de página con
Javascript externo</title>
Na head <script
src="nombre_de_la_página_Javascript.js"><
Entre <script></script> tags. /script>
</head>

<head>
<meta charset="UTF-8"> Dessa forma, o conteúdo do arquivo .js será anexado
<title>Ejemplo de HEAD con à nossa página web.
javascript</title>
<script>
alert("Hola mundo");
</script> Entrada e saída de dados
</head>

Para a entrada de dados, o javascript tem duas

Nota: Se nossa página vai ter tanto CSS quanto
ferramentas:
Javascript na head, é comum colocar o código CSS
em primeiro lugar, pois é muito comum que o script - O comando prompt()
se refira a elementos CSS e eles já devem ser
carregados na memória quando a execução atinge a - Entrada de formulário HTML
parte javascript.

5
IBM SkillsBuild | Introducción a Python

Prompts() Alerta normal

alert("Esto es una alerta");

Com prompt, inserimos a variável através de uma
janela.

O seguinte aparecerá no navegador:

var nombre=prompt("Introduce nombre "
, "nombre por defecto");

Neste exemplo, o que o usuário entrar na janela que

será aberta será armazenado da variável nombre. Alertas de confirmação
Eu posso passar dois parâmetros para a função
prompt(). O primeiro parâmetro é o texto a ser var confirmacion = confirm("Estas
exibido e o segundo é o valor padrão. seguro de continuar?");

var edad = prompt("Que edad tienes?:

", 18);

Importante: Tudo o que for inserido por prompt()

será sempre considerado como string, mesmo que Na confirmacion variável eu guardo a resposta do
sejam números. Se eu quiser poder operar com esses usuário, que será true ou false, dependendo se ele
números, tenho que fazer a conversão com parseint, aceita ou cancela.
parsefloat... etc.

Para a saída de dados, temos três opções: console.log()

• O comando alert()
• O comando console.log() Este comando exibirá uma mensagem no console do
• O comando document.write() navegador. Ele não será visível a menos que abramos
o console. Na maioria dos navegadores, isto é feito

Alert() com F12.

console.log("Esto es un mensaje
O comando alert() abrirá uma janela pop-up com um
escrito por consola");
aviso. Há dois tipos de alert():

6
IBM SkillsBuild | Introducción a Python

O console nos permite trabalhar com JavaScript Exemplos de entrada e saída de dados
instantaneamente, corrigir erros, ver quais variáveis
estão dentro, ver o que está acontecendo em nosso //Salida por ventana emergente
alert("Esto es una ventana
código, ver para onde o fluxo do programa está indo e
emergente.");
assim por diante.

//Entrada de datos
var edad = prompt("Introduzca edad:
");

// Salida de datos leyendo desde una

variable
alert("La edad introducida es: " +
Document.write() edad);

// Salida de datos por consola

Com document.write(), podemos escrever console.log("Ha terminado el
diretamente no código HTML de nossa página. programa");

Um String é retornado se o usuário clicar em "OK", o // Salida de datos al BODY de mi

valor de entrada é retornado. Se o usuário clicar em página
"cancelar", o NULL é devolvido. Se o usuário clicar em document.write("<h1>Esto es un H1
"aceitar" sem inserir nenhum texto, uma cadeia vazia puesto desde javascript</h1>");
é devolvida.

<head>
<meta charset="utf-8">
<title>Documento sin título</title> Estruturas básicas
<script>
var nombre = "Angel";
var apellido = "García";
Declarações
document.write("<h1>Tu nombre
es</h1>" + nombre + " " + apellido); Chamamos cada "comando" que programamos em
</script> Javascript de uma declaração. Eles terminam com
</head> ";".

alert("Esto es una sentencia ");

document.write("Esta es otra ");

7
IBM SkillsBuild | Introducción a Python

Funções pré-definidas Modo estrito

Estes são comandos que vêm por padrão em
Javascript prontos para serem usados. Eles sempre
Em javascript temos um modo que, quando ativado,
têm parênteses.
nos permite ser mais restritivos em nosso modo de
programação, para isso, no início de nossa página,
alert(); colocaremos:
document.write();
‘use strict’

Por exemplo, sem este modo ativo, poderíamos

Além dessas funções predefinidas, podemos criar definir uma variável com a seguinte sintaxe:
nossas próprias funções.

num=5;

Comentários
Com o modo estrito ativo, teríamos que definir:

var num=5;
Em Javascript temos dois tipos de comentários, uma
e várias linhas:

// Comentário de uma linha. Além disso, existem certas funcionalidades que só

/*…*/ Comentário de várias linhas.
funcionam com o modo estrito ativado.

// Comentario de una sola línea.

/* Comentario de varias líneas. Declaração variável

Siempre va entre
los signos de asterisco y barra
invertida */ Por definição, uma variável é um espaço na memória
do computador onde um valor será armazenado, que
pode mudar durante a execução do programa.

As variáveis podem ser declaradas de duas maneiras,

Tipos de dados com let e com var:

• Let: permite declarar variáveis limitando seu

O Javascript tem apenas três tipos básicos: escopo ao bloco ou declaração onde elas estão
sendo utilizadas. Ou seja, as variáveis declaradas
• Valores numéricos: números inteiros ou
com let só podem ser utilizadas a partir de
números em ponto flutuante (com casas
funções, condicionantes ou loops.
decimais).
• Var: define uma variável global ou local (em uma
• Strings: caracteres alfanuméricos, ou seja,
função), independentemente do escopo do bloco.
palavras ou frases.
As variáveis declaradas com var estarão
• Booleans: Com dois valores possíveis, True ou
disponíveis para todos os elementos de código.
False.
8
IBM SkillsBuild | Introducción a Python

As variáveis têm dois escopos possíveis: let o que realmente faz é criar uma nova variável
local no nível do bloco, neste caso dentro do if. Fora
• Global: Podemos acessá-los de qualquer lugar
dela não tem validade.
em nosso código.
• Local: Podemos acessá-los apenas dentro do
escopo em que foram definidos. Normalmente var puntuación;
funciona. Eles serão acessíveis a partir da própria puntuación=500;
função ou de funções aninhadas em níveis mais
altos do que a função anterior. Ou seja, variáveis var puntuación=500, record=1000,
jugador= "Angel";
locais podem ser vistas de dentro para fora, mas
nunca de fora para dentro da função.
Se declararmos uma variável entre aspas, javascript
entende que se trata de uma string, mesmo que seja
var num = 5;
um número:
document.write(num); //num vale 5

if (true) {
var num1=5; //Aquí num1 es un
var num = 10;
número (int).
document.write(num); //num
var num2= "5"; //Aquí num2 es un
vale 10
string.
}

document.write(num); //num vale 10

Para modificar uma variável já declarada, não
colocamos var, apenas o nome e o valor:

Com let:
var num=5; //Declaracion y
asignación
let num = 5;
num=10; //Reasignación
document.write(num); //num vale 5

if (true) { O comando typeof() nos diz o tipo de uma variável.

let num = 10;
document.write(num); //num Podemos colocar typeof num; o typeof(num);
vale 10
}

document.write(num); //num vale 5

9
IBM SkillsBuild | Introducción a Python

Casting do variável Exemplos de operações

com variáveis
Se precisarmos converter um string para um number,
temos duas opções:

1- Usando a função Number():

//Podemos trabajar con números, strings y
booleans
var num1=45; // Declaración de variables:
Resultado= num1+Number(num2); // No puede empezar por un número
// Esto de error: var 2_cliente;
// Evitar tildes y Ñ

2-Usando parseInt:
//Variable correctamente declarada
let _numero;

alert(parseInt(num2)+23);
// Inicialización de la variable
_numero = 63;

A função parseFloat() também está disponível para //Variable declara e inicializada

converter strings em números decimais. var numero4 = 647;

// Sepueden declara e inicializar varias

variables a la vez.

Constantes var a=3, b=4, c=5;

//Sería lo mismo que poner:

/*
Por definição, uma variável é um espaço na memória
var a=3;
do computador onde um valor será armazenado, que let b=4;
pode mudar durante a execução do programa. No var c=5;
caso de uma constante, ela é definida como um */
espaço na memória do computador onde um valor
será armazenado, que NÃO pode ser alterado // Javascript es Case sensitive.
durante a execução do programa. Ou seja, se Distingue entre mayúsculas/minúsculas
declaramos uma constante e armazenamos um valor var numero = 10;
dentro dela, este valor não pode ser modificado. var Numero = 20;

Sintaxe: console.log("La variable 'numero' vale:"

+ numero);
console.log("La variable 'Numero' vale:"
const nombre="Antonio"; + Numero);

//Con variable numéricas podemos operar

matemáticamente

var sumando1 = 35;

10
IBM SkillsBuild | Introducción a Python

var sumando2 = 45; //Constantes. Como las variables pero no

se puede cambiar su valor
var resultado = sumando1+sumando2; // Se declaran en mayúsculas
const MICONSTANTE = 4765;
console.log("El resultado de sumar " + //MICONSTANTE = 345; Esto daría error
sumando1 + " + "
+ sumando2 + " es " + // Hay que declararlas e inicializarlas
resultado); obligatoriamente.
//const MICONSTANTE2; Esto daría error

// Operador modulo o resto de la

división
var resto = 46 % 5;
console.log("El resto de 46/5 es " +
resto);

//Operador incremento
var numeroInicial = 10;
let numeroIncrementado =
++numeroInicial;

//Sería como poner que

numeroIncrementado = numeroInicial +1;
console.log("El operador incremento
sobre numeroInicial daría " +
numeroIncrementado);

//IMPORTANTE: No es lo mismo ++variable

que variable++
var numero5 = 5;

document.write("El número antes del

incremento vale " + numero5++);
document.write("<br>");
document.write("El número después del
incremento vale " + numero5);

document.write("<br>");
document.write("<br>");

// Ahora al revés
let numero6 = 5;

document.write("El número antes del

incremento vale " + ++numero6);
document.write("<br>");
document.write("El número después del
incremento vale " + numero6);

11
IBM SkillsBuild | Introducción a Python

Strings Funções de strings

Javascript tem funções predefinidas que nos
facilitam o trabalho com strings. As mais comumente
As strings são definidas como variáveis cujo
utilizadas são:
conteúdo são caracteres alfanuméricos, ou seja,
texto. Eles estão sempre entre aspas. Parseint(): Converte um STRING a um número. Outra
opção é usar o Number().
//Declarión de strings
//------------------------ toString: Converte um número para string:
//------------------------
let nombre = "Mi nombre es Angel";
let nombre2 = 'Mi nombre es Angel'; var num=3;
var num2=num.toString();
/* Aunque declaremos números, si lo
hacemos entre comillas,
nos lo tratará como strings */
let edad2 = "43"; toUppercase: Converter um string em maiúsculas.
console.log(edad2+20);
toLowercase: Converte um String para minúscula.

//Las comillas anidadas siempre alternas, Length: Calcula a extensão de um texto. Se usado
let nombre3 = 'Mi nombre es "Angel" ';
com arrays me diz o número de elementos no array.
let nombre4 = "Mi nombre es 'Angel' ";
Concat: Para concatenar o texto. Como o +
/* Cuando declaremos numeros con los que
no vamos a operar
matemáticamente lo haremos como strings var texto=texto1.concat(" "+texto2);
*/
let telefono = "666666666";

//Los strings no se suman, se concatenan: indexOF(): Para procurar um texto dentro de outro
let nombre5 = "Angel"; texto. Ele me diz se há um texto dentro de outro texto
let espacio = " "; e em que posição ele se encontra. Procura a primeira
let apellido = "García"; partida.
let nombreCompleto =
nombre+espacio+apellido; Temos também um LastIndexOf() que traz à tona a
última coincidência.
console.log(nombreCompleto);

//Otra forma de hacerlo

var texto="Esto es el texto";
console.log(nombre5 + " " +apellido);
var busqueda= texto.indexOf("texto");
document.write(busqueda);
console.log(nombre5 + " " +edad2);

12
IBM SkillsBuild | Introducción a Python

Neste caso, eu imprimiria 11. Ou seja, se o texto começa com os caracteres com os
quais dizemos para começar.
O método search() funciona da mesma maneira:

var texto="Hola mundo";

var busqueda= texto.search("texto"); var busqueda= texto.StarWith("Hola");

Se não encontrar o texto, ele retornará -1. Neste caso, daria true.

Match(): Funciona como indexOF o search, mas,

neste caso, ele devolve um array com os resultados. var busqueda=
Em princípio, ele retorna a primeira partida. Se eu texto.StarWith("mundo");
quiser obter todos os fósforos, tenho que usar a
expressão regular:

Neste caso, daria false.

var busqueda= texto.match(/texto/gi);
endsWith(); Como o anterior, mas olhando se o texto
termina com os caracteres que dizemos para ele.

Substr(): Leve-me do personagem 14, 5 caracteres includes(); Procura por uma palavra em um texto. É
para cima: case sensitive.

replace(); Permite-nos substituir um texto por outro.

var busqueda= texto.substr(14,5);

var busqueda= texto.replace("Hola",

"Adios");
CharAt(): Para selecionar uma determinada carta de
um string.

Procura por "Hola" e o substitui por "Adios".

var busqueda= texto.CharAt(44);
slice(); Eu separo um string do personagem que
dizemos que seja.

Isso me mostraria a carta na posição 44.

var texto= "Hola mundo";
StartWith(): Para procurar texto no início do string. var busqueda= texto.slice(5);
Retorna true ou false, dependendo se você o
encontrou ou não.

O string é cortado a partir do personagem 5, ou seja,

ele me deixa apenas com "mundo".

13
IBM SkillsBuild | Introducción a Python

Também posso lhe dizer a posição inicial e final: Com modelo:

var busqueda= texto.slice(5,7); var texto= `

<h3>Tu nombre es $(nombre)</h3>
split(); Eu tenho o string em um array. <h3> y tus apellidos
$(apellidos)</h3>
`;
var busqueda= texto.split();

Podemos dar-lhe um separador e ele insere as Operadores

palavras entre os espaços, por exemplo:

As variáveis por si só são de pouca utilidade. Até

var busqueda= texto.split(" "); agora, só vimos como criar variáveis de diferentes
tipos e como exibir seu valor usando a função de
alert(). Para fazer programas realmente úteis, são
necessários outros tipos de ferramentas.
trim(): Ele remove os espaços na frente e atrás da
string. Os operadores permitem manipular o valor das
variáveis, realizar operações matemáticas sobre seus
valores e comparar diferentes variáveis. Desta forma,
os operadores permitem que os programas realizem
Modelos de strings cálculos complexos e tomem decisões lógicas com
base em comparações e outros tipos de condições.
Podemos substituir valores dentro de um string sem
concatená-los, usando um modelo. Para isso, utilizo
aspas invertidas e interpolação variável com $().

Modo normal: Operadores de Atribuição

var nombre=prompt("Introduce tu O operador de atribuição é o operador mais utilizado

nombre: "); e mais simples. Este operador é utilizado para
var apellidos=prompt("Introduce tus armazenar um valor específico em uma variável. O
apellidos: "); símbolo utilizado é = (não confundir com
var texto="Tu nombre es "+nombre+" y o == operador, que será discutido mais tarde):
tus apellidos"+apellidos;

var numero1 = 3;

14
IBM SkillsBuild | Introducción a Python

À esquerda do operador, o nome de uma variável Portanto, o exemplo acima é equivalente a:

deve ser sempre indicado. À direita do operador,
podem ser indicadas variáveis, valores, condições
lógicas, etc.: var numero = 5;
numero = numero + 1;
alert(numero); // numero = 6
var numero1 = 3;
var numero2 = 4;

/* Error, la asignación siempre se Equivalentemente, o operador de decremento

realiza a una variable, (indicado como um prefixo -- no nome da variável) é
por lo que en la izquierda no se usado para diminuir o valor da variável:
puede indicar un número */
5 = numero1;
var numero = 5;
// Ahora, la variable numero1 vale 5 --numero;
numero1 = 5; alert(numero); // numero = 4

// Ahora, la variable numero1 vale 4

numero1 = numero2;
O exemplo acima é equivalente a:

Operadores de Incremento
var numero = 5;
numero = numero - 1;

e Decremento
alert(numero); // numero = 4

Estes dois operadores são válidos somente para Os operadores de incremento e decremento não só
variáveis numéricas e são usados para incrementar podem ser especificados como um prefixo para o
ou diminuir o valor de uma variável por uma unidade. nome da variável, mas também podem ser usados
como um sufixo. Neste caso, seu comportamento é
semelhante, mas muito diferente. No exemplo a
var numero = 5; seguir:
++numero;
alert(numero); // numero = 6
var numero = 5;
numero++;
alert(numero); // numero = 6
O operador de incremento é indicado pelo prefixo
++ no nome da variável.

O resultado é que o valor dessa variável é aumentado

em uma unidade.

15
IBM SkillsBuild | Introducción a Python

O resultado da execução do script acima é o mesmo

que quando se usa o operador ++numero, por isso
Operadores Lógicos
pode parecer que é equivalente a indicar o operador
++ antes ou depois do identificador da variável.
Os operadores lógicos são essenciais para aplicações
Entretanto, o exemplo a seguir mostra suas
complexas, pois são usados para tomar decisões
diferenças:
sobre quais instruções o programa deve executar
com base em certas condições.

var numero1 = 5;
O resultado de qualquer operação utilizando
var numero2 = 2;
operadores lógicos é sempre um valor lógico ou
numero3 = numero1++ + numero2;
booleano.
// numero3 = 7, numero1 = 6

var numero1 = 5; Negação

var numero2 = 2;
numero3 = ++numero1 + numero2; Um dos operadores lógicos mais comumente
// numero3 = 8, numero1 = 6 utilizados é o operador de negação. É utilizado para
obter o valor oposto ao valor da variável:

Se o operador ++ é especificado como um prefixo

var visible = true;
para o identificador da variável, seu valor é alert(!visible); // Muestra "false"
incrementado antes que qualquer outra operação y no "true"
seja realizada. Se o operador ++ é dado como sufixo
ao identificador da variável, seu valor é incrementado
após a execução da declaração em que aparece.
A negação lógica é obtida através da prefixação do
Portanto, na instrução numero3 = numero1++ + símbolo ! ao identificador da variável. A operação
numero2;, o valor de numero1 é incrementada após deste operador está resumida na seguinte tabela:
a realização da operação (primeiro a soma
variable !variable
e numero3 é 7, então aumente o valor de numero1 e
vale 6). No entanto, na instrução numero3 =
true false
++numero1 + numero2;, antes de tudo, o valor
de numero1 e então a adição é realizada (primeiro o false true
numero1 e é 6, então a soma é realizada
e numero3 é 8).

Isto é, embora as duas expressões sejam muito Se a variável original é uma variável booleana, é
semelhantes, o operador de adição e incremento não muito fácil obter sua negação. Entretanto, o que
é o mesmo (numero++) que aumenta e soma acontece quando a variável é um número ou uma
(++numero). cadeia de texto?

16
IBM SkillsBuild | Introducción a Python

Para obter a negação neste tipo de variável, ela é

primeiramente convertida para um valor booleano: var valor1 = true;
var valor2 = false;
• - Se a variável contém um número, ela se torna resultado = valor1 && valor2; //
false se vale 0 e em true para qualquer outro resultado = false
número (positivo ou negativo, decimal ou inteiro).
• - Se a variável contém uma cadeia de texto, ela é valor1 = true;
transformada em false se o fio estiver vazio ("") valor2 = true;
e em true em qualquer outro caso. resultado = valor1 && valor2; //
resultado = true

var cantidad = 0;
vacio = !cantidad; // vacio = true

cantidad = 2;
OR
vacio = !cantidad; // vacio = false A operação lógica OR também combina dois valores
booleanos. O operador é indicado pelo símbolo || e
var mensaje = ""; seu resultado é verdadeiro se um dos dois operandos
mensajeVacio = !mensaje; // forem true:
mensajeVacio = true
variable1 variable2 variable1 || variable2
mensaje = "Bienvenido";
mensajeVacio = !mensaje; // true true true
mensajeVacio = false
true false true

false true true

AND false false false

A operação lógica AND obtém seu resultado através

da combinação de dois valores booleanos. O
operador é indicado pelo símbolo && e seu resultado
é apenas true se os dois operandos são true: var valor1 = true;
var valor2 = false;
variable1 variable2 variable1 && variable2
resultado = valor1 || valor2; //
resultado = true
true true true

valor1 = false;
true false false
valor2 = false;
resultado = valor1 || valor2; //
false true false
resultado = false
false false false

17
IBM SkillsBuild | Introducción a Python

Operadores Matemáticos
O operador do módulo em JavaScript é indicado pelo
símbolo %, que não deve ser confundido com o
cálculo da porcentagem:

O JavaScript permite manipulações matemáticas

sobre o valor das variáveis numéricas. Os operadores var numero1 = 10;
definidos são: adição (+), subtração (-), multiplicação var numero2 = 5;
(*) e divisão (/). Exemplo: resultado = numero1 % numero2; //
resultado = 0

var numero1 = 10; numero1 = 9;

var numero2 = 5; numero2 = 5;
resultado = numero1 % numero2; //
resultado = numero1 / numero2; // resultado = 4
resultado = 2
resultado = 3 + numero1; //
resultado = 13
resultado = numero2 - 4; // Os operadores matemáticos também podem ser
resultado = 1 combinados com o operador de atribuição para
resultado = numero1 * numero2; // abreviar sua notação.:
resultado = 50

var numero1 = 5;
numero1 += 3; // numero1 = numero1 +
Além dos quatro operadores básicos, o Javascript 3 = 8
define outro operador matemático que não é fácil de numero1 -= 1; // numero1 = numero1 -
entender ao estudá-lo pela primeira vez, mas que é 1 = 4
muito útil em algumas ocasiões. numero1 *= 2; // numero1 = numero1
* 2 = 10
Este é o operador do "módulo" (ou o restante da numero1 /= 5; // numero1 = numero1
divisão), que calcula o restante da divisão inteira de / 5 = 1
dois números. Se você dividir por exemplo 10 e 5, a numero1 %= 4; // numero1 = numero1
divisão é exata e dá um resultado de 2. O restante % 4 = 1
dessa divisão é 0, então o módulo de 10 e 5 é igual a
0.

Entretanto, se você dividir 9 e 5, a divisão não é

exata, o resultado é 1 e o restante é 4, então o
Operadores Relacionais
módulo de 9 e 5 é igual a 4.
Os operadores relacionais definidos pelo JavaScript
são idênticos aos definidos pela matemática: maiores
que (>), menores que (<), maiores ou iguais a (>=),
menores ou iguais a (<=), iguais a (==) e não iguais a
(!=).

18
IBM SkillsBuild | Introducción a Python

Os operadores que relacionam as variáveis são Os operadores relacionais também podem ser
essenciais para realizar qualquer aplicação usados com variáveis de corda de texto:
complexa, como veremos no próximo capítulo de
programação avançada. O resultado de todos esses
var texto1 = "hola";
operadores é sempre um valor booleano:
var texto2 = "hola";
var texto3 = "adios";
var numero1 = 3;
var numero2 = 5; resultado = texto1 == texto3; //
resultado = numero1 > numero2; // resultado = false
resultado = false resultado = texto1 != texto2; //
resultado = numero1 < numero2; // resultado = false
resultado = true resultado = texto3 >= texto2; //
resultado = false
numero1 = 5;
numero2 = 5;
resultado = numero1 >= numero2; //
Ao utilizar cadeias de texto, os operadores "maior
resultado = true que" (>) e "menor que" (<) seguem um raciocínio
resultado = numero1 <= numero2; // não-intuitivo: letra por letra é comparada a partir da
resultado = true esquerda até que uma diferença seja encontrada
resultado = numero1 == numero2; // entre as duas cadeias de texto. Para determinar se
resultado = true uma letra é maior ou menor que outra, letras
resultado = numero1 != numero2; // maiúsculas são consideradas menos que letras
resultado = false minúsculas e as primeiras letras do alfabeto são
menores que as últimas letras (a é menor que b, b é
menor que c, A é menor que a, etc.)

Um cuidado especial deve ser tomado com o

operador de igualdade (==), pois ele é a fonte da
maioria dos erros de programação, mesmo para os
usuários que já têm alguma experiência no
desenvolvimento de scripts. O == operador é usado
para comparar o valor de duas variáveis, portanto é
muito diferente do = operador, que é usado para
atribuir um valor a uma variável:

// El operador "=" asigna valores

var numero1 = 5;
resultado = numero1 = 3; // numero1
= 3 y resultado = 3

// El operador "==" compara variables

var numero1 = 5;
resultado = numero1 == 3; // numero1
= 5 y resultado = false

19
IBM SkillsBuild | Introducción a Python

Condições e loops em
Com os condicionais, modificaremos o fluxo de
execução como acharmos conveniente, dependendo

JavaScript se uma condição é cumprida.

O diagrama a seguir representa o fluxo de execução

de um simples condicional. A nota variável é avaliada
Em linguagens de programação, as instruções que
e se for igual ou maior que 5, uma série de instruções
permitem controlar decisões e loops de execução
será executada, caso contrário outras serão
são chamadas de "Estruturas de Controle". Uma
executadas, mas nunca as duas, ou uma ou a outra.
estrutura de controle dirige o fluxo da execução
através de uma seqüência de instruções, baseada em
decisões simples e outros fatores. Introduce nota

Uma parte muito importante de uma estrutura de

controle é a "condição". Cada condição é uma
expressão que se avalia como true ou false. Nota >=5?

O JavaScript oferece um total de quatro instruções

para processar o código de acordo com as condições
determinadas pelo programador: if, switch, for e
Nota >=5 Nota <5
while.

Até agora, temos feito a execução de roteiros

lineares. Ou seja, executar instruções uma após a
Aprobado Suspenso
outra. Até que uma instrução fosse concluída, a
próxima não foi executada:

Instrucción 1

Instrucción 2

Instrucción 3

Instrucción 4

20
IBM SkillsBuild | Introducción a Python

Dependendo das necessidades de nosso código, o

condicional pode ser tornado tão complicado quanto
Comparadores
necessário:

A fim de poder tomar decisões, é preciso fazer

comparações.

Estas comparações são realizadas utilizando

Introduce
edad operadores de comparação e operadores lógicos:

OPERADOR DE DESCRIPCIÓN EJEMPLO

Edad >18 Edad <18 Edad >100 COMPARACIÓN

== Igual que… x==y

Mayor de Menor de Comprueba valor.
Edad errónea
edad edad === Estrictamente igual. x===y
Comprueba valor y
tipo.
!= Diferente. Es igual x!=y x<>y
que poner <>
Condicionais < Menor que… x<y
> Mayor que… x>y
<= Menor o igual que… x<=y
A tomada de decisão na programação é semelhante à
>= Mayor o igual que… x>=y
tomada de decisão na vida real. Na programação
também enfrentamos algumas situações em que
queremos que um determinado bloco de código seja OPERADOR DESCRIPCIÓN EJEMPLO
executado quando alguma condição é atendida. LÓGICO
&& Y lógico a>b && b<c
As linguagens de programação utilizam declarações
condicionais para controlar o fluxo da execução do
|| O lógico a=b || a=c
programa com base em certas condições. Estes são
usados para fazer o fluxo de execução avançar e ! NO lógico x!=y
ramificar-se com base em mudanças no estado de
um programa.
Javascript funciona com dois tipos de
condicionadores, IF...ELSE e SWITCH...CASE. A
seguir, veremos o uso de ambos.

21
IBM SkillsBuild | Introducción a Python

IF…ELSE
Opção 2. Mais de uma condição a ser verificada
Esta declaração é a condição mais simples para a
If( Condição a ser cumprida){
tomada de decisões. É usado para decidir se uma
Instruções a serem executadas caso a condição seja
determinada declaração ou bloco de instruções será cumprida
executado ou não, ou seja, se uma determinada }else IF( Segunda condição a ser cumprida){
condição for verdadeira, então um bloco de Instruções a serem executadas caso a segunda
instruções é executado, caso contrário, outras condição seja cumprida
}else{
instruções em código serão executadas.
Instruções a serem executadas caso nenhuma
condição seja cumprida
A sintaxe pode assumir várias formas:
}
Opção 1. Uma única condição a ser verificada:
Você pode colocar quantos else...if quiser.
If( Condição a ser cumprida){
Instruções a serem executadas caso a condição seja
O else final não é obrigatório, mas é útil executar
cumprida
}else{ instruções no caso de nenhuma das condições
Instruções a serem executadas caso a condição não anteriores ser atendida.
seja cumprida
} Vamos acrescentar uma segunda condição ao
exemplo anterior. Além de ter o dinheiro, para
comprar o carro você deve ter idade legal:

Por exemplo, um carro custa 30.000€. Pergunte ao

usuário quanto dinheiro ele tem. Compare os dois
var precio = 30000;
valores e emita uma mensagem de alerta dizendo se var dinero = prompt("Introduce cuánto
ele pode ou não comprar o carro. dinero tienes: ");
var edad = prompt("Introduce tu edad:
");
if ((precio < dinero) && (edad >=
var precio=30000;
18)) {
var dinero=prompt("Introduce cuanto
alert("Te puedes comprar el
dinero tienes: ");
coche");
} else if ((precio < dinero) && (edad
if(dinero>precio){
< 18)) {
alert("Te puedes comprar el
alert("Tienes el dinero pero no
coche");
la edad");
}else{
}
alert("Te vas en autobus");
else if ((precio > dinero) && (edad
}
>= 18)) {
alert("Tienes la edad pero no el
Neste exemplo, avaliamos como condição que o dinero");
dinheiro que você tem deve ser igual ou maior do que }
else if ((precio > dinero) && (edad <
o preço do carro para poder comprá-lo.
18)) {
alert("Ni dinero ni edad");
}

22
IBM SkillsBuild | Introducción a Python

Se o usuário inserir um valor na janela que não seja default :

um número, teremos um problema, pois devemos
instrucciones;}
lembrar que tudo o que o usuário inserir por prompt é
considerado uma string e, para verificar se Vamos analisar mais de perto a sintaxe deste código,
edad>=18, precisamos que a edad seja um número. que inclui as palabras-
chave: switch, case, break y default:
Para descobrir se um valor é um valor numérico,
usamos a função isNaN(). • Ao lado da palavra-chave 'switch' colocaremos
entre parênteses o nome da variável cujo valor
desejamos verificar. Dependendo do valor, uma
var num1=prompt("Introduce numero");
var num2=prompt("Introduce numero2"); série de instruções deve ser executada.
if(!isNaN(num1)&&!isNaN(num2)){ • Cada valor contra o qual vamos comparar é
alert(parseInt(num1)+parseInt(num2)); incluído após a palavra-chave 'case' separada
}else{ por dois pontos ( : ) e o valor entre aspas.
alert("No has introducido números"); • Por exemplo, se nosso programa pedisse um
} número de 1 a 10, e dependendo da escolha do
usuário, o programa daria um resultado
específico, escreveríamos um ‘case’ para cada
número: 1, 2, .... 10.
SWITCH…CASE • Incluímos um ‘break’ em cada cláusula de ‘case’
para que o programa não pare aí, mas deixe esse
Outra opção fornecida pelo Javascript para o uso de
ponto e continue após o final da instrução switch
condicionadores é switch…case.
com as seguintes instruções contidas no

Qualquer avaliação que possa ser feita com programa.

switch…case também pode ser feito com IF... else. • A última cláusula ‘default’ realiza a mesma
tarefa que a última cláusula ‘else’ que colocamos
A sintaxe do switch...case condicional é: depois de uma série de ‘else if’. Ou seja, se
nenhuma das condições foi cumprida e
switch(Variable_a_comprobar) {
queremos que algo específico seja executado,
case "opcion1" : colocamos isso nessa cláusula ‘defaul’.

instrucciones;
Em resumo, a instrução 'switch' atua como um switch
break; em conjunto com os diferentes 'case' (a tradução da
palavra 'switch' é exatamente isso: interruptor).
case "opcion2" :
Imagine uma linha de trem que em um ponto se
instrucciones; divide em vários trilhos que vão em diferentes
direções. Assim como um mecanismo foi acionado
break; para que o trem continuasse ao longo de um desses
trilhos, dependendo de seu destino, a switch…case
......................
atinge esse efeito, fazendo com que o programa
case "opcionN" : prossiga ao longo do case que atende à condição, e
portanto, o programa executa as instruções que
instrucciones; foram definidas ali.

break;
23
IBM SkillsBuild | Introducción a Python

A partir de uma variável de edad, crie um programa Os loops são uma estrutura de programação que nos
que imprima mensagens diferentes, dependendo do permite executar instruções de forma repetitiva
valor de edad. dentro de um bloco de programação.

Além disso, os loops são executados através de uma

var edad = 18; condição.
var imprime = "";
Existem dois tipos de loops:
switch (edad) {
• Loops determinados: Aqueles em que se sabe
case 18:
imprime = "Acabas de cumplir antecipadamente quantas vezes um código vai
la mayoría de edad"; ser repetido. Um loop deste tipo é um loop "For".
break; • Loops indeterminados: Aqueles em que não se
case 25: sabe a priori quantas vezes o código será
imprime = "Eres un adulto"; repetido. Dependerá do cumprimento ou não de
break; uma condição. Dois loops deste tipo são "While"
case 50: e "Do while".
imprime = "Eres maduro";
break;
default: O loop dado para FOR
imprime = "Otra edad no
contemplada" Um tipo de loop cuja execução dura um determinado
número de vezes ou até que sua condição seja
break; avaliada como falsa (false).
document.write(imprime);
} Sua sintaxe é:

for(inicio ; condición ;
incremento/decremento){
É importante observar que switch...case avalia as
código a repetir}
condições concretas de igualdade. Ou seja, em nosso
exemplo, verificamos se edad = 18 ou se edad = 25
ou edad = 50.
A estrutura é descrita da seguinte forma:
Mas não seríamos capazes de fazer verificações do
tipo edad >= 18, por exemplo. Para este tipo de • inicio: Esta expressão indica a condição para o
verificações, é necessário utilizar um if…else. início do ciclo. Geralmente é a declaração de uma
variável numérica. Uma variável é geralmente
criada com o nome i, j, k... etc.
• condición: Esta expressão é a condição que deve
Loops ser mantida a fim de continuar a execução do
ciclo.
• incremento/decremento: Esta expressão muda o
Los bucles, son una estructura de programación que valor da variável numérica indicada no inicio.
nos permite ejecutar instrucciones de forma • código a repetir : Corpo em loop. O conjunto de
repetitiva dentro de un bloque de programación. instruções que são executadas durante cada
iteração do laço (em cada laço).

24
IBM SkillsBuild | Introducción a Python

Outro exemplo. Crie um loop for que executa 10

for(var i=0;i<10;i++){ vezes e imprime na tela o valor da variável local em
document.write("Hola"+"<br>"); cada uma das curvas.
}

document.write("Ejecución for (i=0 ; i<10 ; i++){

terminada."); document.write("En esta vuelta de
bucle I vale " + i);
document.write("<br>");
}

Neste loop for criamos uma variável local chamada i document.write("Ejecución terminada.");
que inicializamos a zero. A condição é que o loop se
repita por tanto tempo quanto i<10. A cada volta de
loop i será incrementado por uma unidade (de modo
que na décima volta a condição não será mais
cumprida). E a cada volta a palavra hola deve ser
impressa.

Após o décimo loop, a condição não será mais

cumprida, pois i me tornarei 10 e nosso programa
sairá do loop e continuará com a próxima linha de
execução, neste caso, imprimir

Ejecución terminada.

O principal uso do for loop é fazer loop através de

arrays, com a condição de que o loop se repita tantas
vezes quantas tivermos elementos em nosso array:

var meses = ["Enero", "Febrero",

"Marzo", "Abril", "Mayo", "Junio",
"Julio", "Agosto", "Septiembre",
"Octubre", "Noviembre", "Diciembre"];
for (var i = 0; i < meses.length; i++)
{
document.write(meses[i] + "<br/>");
}

25
IBM SkillsBuild | Introducción a Python

Vejamos um exemplo de while.

Repita o exemplo dos meses do ano que vimos no

for, mas implementando-o com um loop de while:

var contador = 0;
var meses = ["Enero", "Febrero",
"Marzo", "Abril", "Mayo", "Junio",
"Julio", "Agosto", "Septiembre",
"Octubre", "Novienbre", "Diciembre"];
while (contador < meses.length) {
document.write(meses[contador] +
"<br>");
contador++;
}

WHILE. DO…WHILE
É semelhante ao ciclo for explicado acima. Ela é
executada até que a condição seja falsa (false). A
diferença é que a avaliação é feita no final de cada
iteração.

Se usarmos while podemos descobrir que a condição

não é atendida mesmo na primeira verificação, então
o código nunca seria executado.

No caso de do...while nós nos certificamos de que o

código seja executado pelo menos uma vez.

Sintaxe:

While( Condición a cumplir){

Código a ejecutar mientras se cumpla la condición}

do{ Código a ejecutar mientras se cumpla la

condición }

While(Condición a cumplir)

26
IBM SkillsBuild | Introducción a Python

Outro exemplo seria a criação de um programa que Um exemplo de do...while é criar um número
pede ao usuário o número de execuções e imprime aleatório entre 0-100 e pedir ao usuário que tente
no console quanto vale uma contra-variável, que é adivinhá-lo.
incrementada em cada ciclo do loop:
Cada tentativa incrementará um contador.

let contador = 0;
let ciclos = Number(prompt("Introduce //Creamos un número aleatorio entre 0
número de ejecuciones")); y 1.
// Despues lo multiplicamos por 100
para que esté entre 0-100
while(contador < ciclos){ //Lo redondeamos para que sea entero
console.log("Contador vale ahora var numero =
" + contador); parseInt(Math.random()*100);
contador++;
} var numero_introducido;
var contador = 0;

while (numero != numero_introducido)

{
numero_introducido =
Number(prompt("Introduce número: "));
contador++;

if (numero_introducido > numero) {

alert("Demasiado alto");
}

if (numero_introducido < numero) {

alert("Demasiado bajo");
}
}

alert("CORRECTO¡¡¡, el número era el

" + numero + ". Has acertado en " +
contador + " intentos.");

27
IBM SkillsBuild | Introducción a Python

Break
Em Javascript, os valores de array NÃO têm que ser
do mesmo tipo.

• var
Permite-nos sair de um loop de execução quando Articulos=[“zapatilla”,”camiseta”,”pantalon”,”cal
uma condição é cumprida. cetines”];
• var Articulos=new array
No exemplo a seguir, temos um loop que imprimirá
[“zapatilla”,”camiseta”,”pantalon”,”calcetines”];
os anos de 2000 a 2010. Mas introduzimos uma
pausa quando o año = 2005:
Artigos: sapatos, camiseta, calça e meias.
var year = 2000;
while (year < 2010) {
Em Javascript, um array é declarada das seguintes
document.write(year + "<br>");
formas:
if (year == 2005) {
break;
}
year++; var
} Articulos=["zapatilla","camiseta","pantal
ón","calcetines"];

Ou:

var Articulos =new

array("zapatilla","camiseta","pantalón","ca
lcetines");

Em ambos os exemplos, criamos um array (ou seja,

uma coleção de elementos) que denominamos
Neste caso, quando o ano é igual a 2005, ele sai do Artículos e dentro nós armazenamos os valores:
loop e não executa o resto das instruções do laço. zapatilla, camiseta, pantalón y calcetines.

Para trabalhar com os dados contidos em um array,

devemos nos referir a eles de acordo com sua
Arrays posição no array.

Este é um exemplo de acesso a um array:

Até agora, vimos como colocamos um único valor
dentro de uma variável, seja ela numérica, de texto
ou booleana. alert(Articulos[1]); Resultado
: camiseta
Os arrays nos permitem trabalhar com conjuntos de
valores e armazená-los em um único endereço de A posição dos elementos começa a contar a partir de
memória. zero, ou seja, em nosso array Artículos, o elemento
na posição zero é zapatilla, na posição 1, temos

28
IBM SkillsBuild | Introducción a Python

camiseta, na posição 2, temos pantalón calças e na Aqui está um exemplo destas funções:
posição 3 temos calcetines.

Como em nosso exemplo pedimos que fosse exibida <html>

uma mensagem de alerta com o elemento na posição
<head>
1, receberemos camiseta.
<meta charset="utf-8">
Se quisermos mudar ou inserir um elemento em um <title>Documento sin título</title>
array, o faremos da mesma forma, referindo-nos a <script>
var articulos = ["balon", "botas",
sua posição dentro do array:
"camiseta", "pantalon"];
No exemplo a seguir, vamos criar um array de três </script>
elementos e vamos pedir ao usuário que insira um </head>
valor por meio do comando prompt. Este valor deve
<body>
ser armazenado na posição 4.
<script>
document.write("<p>El primer articulo
es < strong > "+articulos[0]+"</strong
var
array1=["objeto1","objeto2","objeto3"]; ></p > ");
document.write("<P>La longitud del
array1[3]="objeto4";
array1[4]=prompt("Introduce array es " + articulos.length + "</p>");
document.write("<p>El último articulo
objeto4");
es <strong>" + articulos[articulos.length
alert(array1[4]);
- 1] + "</strong></p>");
articulos.unshift("pelota");
articulos.push("canasta");
document.write("<p>Añadimos el

Funções da arrays artículo <strong>" + articulos[0] +

"</strong></p>");
document.write("<p>El primer articulo
ahora es <strong>" + articulos[0] +
O Javascript nos fornece uma série de funções
"</strong></p>");
predefinidas prontas para facilitar o trabalho com
document.write("<p>El último articulo
arrays.: ahora es <strong>" +
articulos[articulos.length - 1] +
• Length: Retorna o comprimento do array. "</strong></p>");
document.write("<P>La longitud del
• push: Adiciona elementos ao final do array.
array ahora es " + articulos.length +
• unshift: Adiciona elementos ao início do array.
"</p>");
• pop: Remove elementos no final do array.
document.write(articulos);
• shift: Remove elementos no início do array. articulos.push(prompt("introduce
nuevo articulo"));
document.write("<br>");
document.write(articulos);

</script>
</body>
</html>

29
IBM SkillsBuild | Introducción a Python

Podemos colocar um elemento como undefined,

para que seu valor seja indefinido (ou desconhecido);
Travessar arrays com for

articulos[0]= undefined; Às vezes, precisaremos percorrer todos os elementos

de uma matriz em busca de um elemento ou
elementos específicos.

Para descobrir a posição de um elemento: Para atravessar um array, use o loop FOR:

var
posicion=articulos.indexof("pantalones"); document.write("<ul>");
var nombres = ["Angel", "Sara",
"Manolo", "Ana"];
for (var i = 0; i < nombres.length;
Converter um array em texto: i++) {
document.write("<li>" +
nombres[i] + "</li>");
};
var miString=artículos.join(); document.write("</ul>");

Converte-o em um string separada por vírgula. Exemplo, encher um array e depois atravessar por

Para fazer o contrário, ou seja, para converter um ela:

string em um array, o faremos com o método split().

Dentro dos parâmetros, colocaremos o personagem var trabajadores = new Array();
que atuará como um separador. var contador = 0;
var persona;

var cadena="nombre1,nombre2,nombre3"; while (persona != "salir") {

persona = prompt("Introduce nombre");
var miArray=cadena.split(“,”);
trabajadores[contador] = persona;
contador++;
}
Para ordenar um array, usaremos o método o método trabajadores.pop();
o método short(). Para ordenar em ordem inversa o for (var i = 0; i <
método reverse(); trabajadores.length; i++) {
document.write(trabajadores[i] +
"<br>");
cadena.short(); }
cadena.reverse();

Isto classifica alfabeticamente um array.

30
IBM SkillsBuild | Introducción a Python

Travessar arrays com for Travessar arrays com for in

each
Outra maneira de atravessar um array é com o loop
for in.
Há uma modificação do loop FOR criado
especificamente para facilitar o trabalho com arrays,
é o loop foreach. for( let nombre in nombres){
document.write("<li>"+nombres[nom
Utilizamos a função foreach que vai receber o bre]+"</li>");
elemento por parâmetro. };

document.write("<ul>"); Neste caso, nombre é o índice.

var nombres=["Angel", "Sara",
"Manolo", "Ana"];
nombres.forEach((elemento)=>{

");
document.write("<li>"+elemento+"</li>
Buscando em um array
});
document.write("</ul>"); Para pesquisar um array, podemos usar o método
find() que tem dentro de si uma função de carga.

Opcionalmente, a função foreach pode receber mais

var
parâmetros.
busqueda=nombres.find(function(nombre){
Um segundo parâmetro pode ser o índice. return nombre==nombre1;
});

nombres.forEach(elemento, index) => {

document.write("<li>" + index + " - "
busqueda armazena o texto que estamos
+ elemento + "</li>");}
procurando.

Isto pode ser simplificado colocando da seguinte

forma:

var busqueda=nombres.find(nombre =>

nombre==nombre1;);

Da mesma forma, podemos pesquisar o índice com o

método findIndex().

31
IBM SkillsBuild | Introducción a Python

var busqueda=nombres.findIndex(nombre var peliculas=['Batman', 'Cars',

=> nombre==nombre1); 'It'];
var categoria=['Acción',
Outro método interessante é some() o que nos 'infantil', 'Terror'];
permite verificar se algum dos elementos da matriz var cine=[ películas, categoria];
atende a uma determinada condição. Por exemplo, console.log(cine);
para verificar se há elementos maiores que 40:

Para acessar um elemento, por exemplo, uma

var numeros=[3,45,33,65,776];
var categoria de criança, devemos indicar a posição que
busqueda=numeros.some(numero=>numero>40); esse elemento ocupa na primeiro array (no array de
containers) seguido pela posição que ocupa no
segundo array (o array contido):

Loja true ou false.

console.log(cine[0][1]);

Arrays multidimensionais Neste exemplo, ele imprimiria Cars.

Os arrays multidimensionais não são uma ferramenta

Eles não são nada mais do que um array composto de
muito utilizada, mas é útil para que o estudante
outros arrays. Ou seja, um array que, em vez de ter
esteja familiarizado com elas.
números ou strings dentro dela, tem outros arrays.
Coloquialmente, poderíamos dizer que se trata de um
array de arrays.

Cine
POO

Películas Categoría Já vimos em tópicos anteriores os princípios da

programação orientada a objetos. Bem, o Javascript
é uma linguagem de programação orientada a
objetos, por isso compartilha os conceitos-chave
Batman Acción
deste paradigma de programação. Entretanto, o POO
em Javascript não é normalmente usado, uma vez
que o POO é projetado para outros tipos de
Cars Infantil programas diferentes das páginas da web. Na
programação web, o uso de classes, objetos,
atributos, métodos, etc., não faz muito sentido. Mas
It Terror vale a pena para o estudante se familiarizar com
estes conceitos.

32
IBM SkillsBuild | Introducción a Python

Em Javascript, os objetos têm propriedades e

métodos.
Funções
As propriedades são modificadas com a
nomenclatura do ponto e o valor em vírgulas As funções são definidas como um conjunto de

invertidas: instruções prontas para serem chamadas a qualquer

momento. Eles só serão executados se nós os
chamarmos. Seu objetivo é, portanto, a reutilização
do código.
nombreDelObjeto.propiedad= "valor ";
Renault.ancho= "2000 "; Sintaxe:
Botton.style.width= "500px ";
Document.write(); Para utilizar uma função, é necessário primeiro
Windows.alert(); defini-la:

function nombre_funcion(){
Para chamar os métodos:
nombreDelObjeto.metodo(); //Código a ejecutar

}
Renault.acelera();

Exemplo: E então, em outro ponto da página HTML, chamamos

a função:

<body> nombre_funcion();
<input type="button" id="boton">
<input type="button" id="boton2">
<script>
var Com exceção das funções predefinidas do Javascript,
miBoton=document.getElementById("boton"); é indispensável chamar uma função para que ela
miBoton.style.width="300px"; funcione.
miBoton.style.height="300px";

var
miBoton2=document.getElementById("boton2"
);
miBoton2.style.width="300px";
miBoton2.style.height="300px"
;
miBoton2.focus();
</script>
</body>

33
IBM SkillsBuild | Introducción a Python

Este é um exemplo para declarar uma função Na declaração da função, colocamos que nossa
denominada suma. Esta função lerá o valor de duas função, quando chamada, receberá dois parâmetros,
variáveis e emitirá o valor da soma das duas num1 e num2. Portanto, na chamada para a função
variáveis. somos obrigados a passar estes parâmetros ou
receberemos um erro.

//Declaración de la función Ao chamar a função, passamos o valor de 3 para o

//Llamada a la función
suma(3, 7);

Não tomamos mais o valor de num1 e num2 de duas

variáveis pré-existentes. Nós os passamos como um
parâmetro para nossa função.

34
IBM SkillsBuild | Introducción a Python

Escreva uma função que pede o nome do usuário e Criar uma função que acrescenta dois números
compõe uma mensagem de boas-vindas com esse inseridos pelo usuário:
nome:

<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Documento sin título</title> <title>Documento sin título</title>
<script> <script>
var nombre; var num1;
function pedir_nombre() { var num2;
nombre = prompt("Introduce function suma(num1, num2) {
nombre"); num1 = prompt("Introduce número
document.write(nombre); 1: ");
} num2 = prompt("Introduce número 1
</script> :");
</head> document.write("La suma de " +
num1 + " y " + num2 + " es= " +
<body> (Number(num1) + Number(num2)));
<p>Hola }
<script>pedir_nombre();</script> , </script>
cómo estás? </head>
</p>
</body> <body>
</html> <script>
suma(num1, num2);
</script>
</body>
</html>

35
IBM SkillsBuild | Introducción a Python

Parâmetros de rest y Funções anónimas

spread
As funções anônimas são aquelas que não têm nome
e podem ser armazenadas em uma variável.
Quando não soubermos exatamente o número de
parâmetros que podem atingir nossa função,
var miFuncion=function(nombre);
colocaremos três pontos para nos referirmos ao
return "El nombre es " + nombre;
restante dos parâmetros possíveis. Estes parâmetros
serão armazenados em um array com o nome do
meu parâmetro.
Para chamá-la:

function numeros(num1,
num2,...otros){ miFuncion("Angel");
document.write(num1 +" , "+
num2+"<br>");
document.write(otros);
}

numeros(2,3,4,54,332); Callback

Os Callbacks em JavaScript são, como seu nome

Neste exemplo otros vale 4,54,332. É um array.
indica, chamadas de retorno, significa que quando eu
Se não tivesse os três pontos, valeria 4. invoco uma função passando-a como parâmetro
outra função (a callback) esta função de parâmetro é
executada quando a função principal tiver terminado
Parâmetros de spread de ser executada. Ou quando estamos interessados
Similarmente, no exemplo a seguir, criamos um array em…
com dois elementos e a passamos para a função
Este conceito, que parece muito complicado, é na
como parâmetro. Se não usarmos os três pontos, o
verdade muito simples de entender se utilizarmos
que estamos dizendo é que num1=[1,10] e num2=3 e
exemplos práticos, por exemplo:
otros =[4,54,332]. Mas se colocarmos os três pontos
nele, o que eu recebo é num1=1, num2=10 y
otros=[3,4,54,332] function funcionPrincipal(callback){
alert('hago algo y llamo al
function numeros(num1, callback avisando que terminé');
num2,...otros){ callback();
document.write(num1 +" , "+ }
num2+"<br>");
document.write(otros); funcionPrincipal(function(){
} alert('termino de hacer algo');
var arrayNumeros=[1,10]; });
numeros(…arrayNumeros,3,4,54,332);

36
IBM SkillsBuild | Introducción a Python

Aqui vemos como a função funcionPrincipal é Com isto podemos ver o poder que esta forma de
executada ao receber um argumento que é outra programação pode ter, mas agora vamos imaginar
função e que é executado após ter terminado seu que queremos encadear diferentes funções com
trabalho chamando a callback. callbacks, o que é muito simples, seguindo a mesma
lógica:
Mas não se preocupe se você não tiver entendido,
vamos fazer mais alguns exemplos para ajudá-lo a
tomar o jeito, é realmente muito simples. function funcionPrincipal(callback1,
callback2, callback3){
Seguindo o caso anterior, podemos até fazer o //código de la función principal
função callback receber argumentos enviado da callback1();
função principal… //más código de la función
principal
callback2();
function funcionPrincipal(callback){ //más código de la función
alert('hago algo y llamo al principal
callback avisando que terminé'); callback3();
callback('Miguel'); //más código si fuera necesario
} }

funcionPrincipal(function(nombre){ funcionPrincipal(
alert('me llamo ' + nombre); function(){
}); alert('primer callback');
},
function(){
alert('segundo callback');
},
function(){
alert('tercer callback');
}
);

Aqui vemos como ao invocar a função principal, as

três funções são passadas como argumentos, que
são executados, que poderiam receber parâmetros...
como vimos acima, mas desta forma o código é um
pouco sujo, pois não podemos ver claramente as
funções.

37
IBM SkillsBuild | Introducción a Python

Assim, podemos declarar as funções a serem Isto parece uma bagunça, vamos vê-lo em um código
enviadas como argumentos separados, o que nos onde mostraremos um alert, um relógio e um texto, e
permite utilizá-las também em outras partes do onde o relógio será modificado a cada segundo e o
código, como vemos no exemplo a seguir: texto levará 3 segundos para aparecer:

function funcionPrincipal(callback1, <html>

callback2, callback3){ <head>
//código de la función principal <meta charset="utf-8">
callback1(); <title>Documento sin título</title>
//más código de la función </head>
principal
callback2(); <body>
//más código de la función <h3 id="demo"></h3>
principal <h3 id="demo2"></h3>
callback3(); <script>
//más código si fuera necesario function funcionPrincipal(callback1,
} callback2, callback3){
//código de la función principal
function callback1(){ callback1();
alert('primer callback'); //más código de la función
} principal
var miVar =
function callback2(){ setInterval(function(){ callback2() },
alert('segundo callback'); 1000);
} //más código de la función
principal
function callback3(){ var miVar2 =
alert('tercer callback'); setInterval(function(){ callback3() },
} 3000);
//más código si fuera necesario
funcionPrincipal(callback1, }
callback2, callback3);
function callback1(){
alert('primer callback');
}
Podemos ver como todas as funções são declaradas
e depois passadas como argumentos para a função function callback2(){
principal, a fim de usá-las dentro da função principal. var d = new Date();
Mas embora isso seja suficiente para outra entrada, var t =
vamos dar uma olhada no uso de outra função d.toLocaleTimeString();
javaScript chamada setInterval(), esta função é document.getElementById("demo
usada para retardar ações e necessita de dois ").innerHTML = t;
}
parâmetros para funções; uma função que invoca a
função que vamos usar e um valor numérico que diz
function callback3(){
em milissegundos o atraso e a atualização da função
document.getElementById("demo
invocada. 2").innerHTML = 'Esto es el callback3';
}
38
IBM SkillsBuild | Introducción a Python

funcionPrincipal(callback1, Funções das setas

callback2, callback3);
</script>
As funções de setas são uma maneira de definir as
</body>
funções de callback de uma forma muito mais clara e
</html>
limpa. Basta substituir a palavra function por uma
seta. Se você tem um parâmetro, não precisa colocar
o parêntese, se você tem dois você tem.
O exemplo é essencialmente o mesmo, mudando as
funcionalidades das funções de callback, mas
function sumame(num1, num2,
adicionamos a função setInterval() para que sejam
sumaYmuestra, sumaPorDos) {
adiados e até atualizados, aproveitando a forma de var suma = num1 + num2;
fazer um relógio em javascript…
sumaYmuestra(suma);
Há uma sintaxe para as funções de callback
sumaPorDos(suma);
chamadas funções de seta, onde a palavra function é
omitida e substituída por uma seta colocada após o return suma;
nome da função: }

sumame(5, 7, dato => {

funcionPrincipal(function(nombre){ console.log('La suma es ', dato);
alert('me llamo ' + nombre); },
}); dato => {
console.log('La suma de dos
es ', (dato * 2));

Ficaria assim:
});

funcionPrincipal(nombre =>{
alert('me llamo ' + nombre);
});

39
IBM SkillsBuild | Introducción a Python

Eventos
Para definir as ações que queremos realizar quando
um evento ocorre, utilizamos manipuladores de
eventos. Há muitos tipos de eventos nos quais
podemos associar manipuladores de eventos, para
Os eventos são a forma que temos em Javascript
muitos tipos de ações de usuários.
para controlar as ações dos visitantes e definir o
comportamento da página quando eles ocorrem. Em Javascript, podemos definir eventos de duas
Quando um usuário visita uma página web e interage maneiras diferentes. Uma forma está no próprio
com ela, são produzidos eventos e com Javascript código HTML, usando atributos dos elementos (tags)
podemos definir o que queremos que aconteça aos quais queremos associar os manipuladores de
quando os eventos ocorrem. eventos. Outra maneira, um pouco mais avançada, é
usar os próprios objetos DOM. Vamos dar uma olhada
Para entender os eventos, precisamos conhecer
nos dois sentidos abaixo.
alguns conceitos básicos:

• Evento: Algo que acontece. Geralmente os

eventos ocorrem quando o usuário interage com
o documento, mas podem ser causados por
situações fora do controle do usuário, tais como
uma imagem que não pode ser carregada porque
Manipuladores de eventos
•
não está disponível.
Tipo de evento: Este é o tipo de evento que
especificados no código
ocorreu, por exemplo, um clique em um botão ou HTML
a apresentação de um formulário. Cada tipo de
elemento de página oferece diferentes tipos de
eventos Javascript. O manipulador de eventos pode ser colocado na tag
• Manipulador de eventos: é o comportamento HTML do elemento da página que queremos
que podemos atribuir em resposta a um evento. responder às ações do usuário. Para isso, usamos
Ela é especificada por meio de uma função atributos especiais nas tags HTML, que são
Javascript, que está associada a um tipo prefixadas com "on" seguido do tipo de evento. Por
específico de evento. Uma vez que o manipulador exemplo, o manipulador associado com o atributo
estiver associado a um tipo de evento em um "onclick" é executado quando ocorre um clique em
elemento da página, toda vez que esse tipo de uma tag.
evento ocorrer naquele elemento específico, o
Vamos dar um exemplo do manipulador de eventos
manipulador do evento associado será
onclick. Já sabemos que ele é usado para descrever
executado..
ações que queremos executar quando um clique é
Com o javascript podemos definir o que acontece feito. Então, se quisermos que uma função seja
quando um evento ocorre, como um usuário clicando executada quando um botão é clicado, escrevemos o
em um botão, editando um campo de texto ou saindo manipulador onclick na etiqueta <INPUT
da página. type=button> desse botã.

A manipulação de eventos é o cavalo de batalha para

fazer páginas interativas, pois com elas podemos
responder às ações dos usuários.

40
IBM SkillsBuild | Introducción a Python

Algo como isto: É comum colocar apenas uma instrução, e se você

quiser colocar mais de uma, você geralmente cria
uma função com todas as instruções e dentro do
<INPUT type="button" value="pulsame"
manipulador você coloca apenas uma instrução, que
onclick="miFunción()"></INPUT>
é a chamada de função.

Vamos ver como várias instruções seriam colocadas

em um manipulador.
Um novo atributo é colocado na etiqueta que tem o
mesmo nome do evento, neste caso, onclick. O
atributo é compatível com as declarações JavaScript <input type=button value=Pulsar
que queremos que sejam executadas quando o onclick="x=30; window.alert(x);
evento ocorrer. window.document.bgColor = 'red'">

<INPUT type="button" value="pulsar"

onclick="alert('Botón pulsado')"> São instruções muito simples como atribuir x o valor
</INPUT> 30, fazer uma janela de alerta com o valor x e mudar
a cor do fundo para vermelho.

No entanto, tantas instruções colocadas em um

Dado o código acima, clicar no botão resultará em
manipulador são um pouco confusas, teria sido
uma mensagem de alerta com o texto "Botón
melhor criar uma função:
pulsado".

Cada elemento de página tem sua própria lista de

<FORM>
<SELECT <input type="button" value="Pulsar"
onchange="window.alert('Cambiaste la onclick="ejecutaEventoOnclick()">
selección')"> </FORM>
<OPTION value="opcion1">Opcion 1
<OPTION value="opcion2">Opcion 2
</SELECT>
É sempre uma boa idéia fazer com que um código
possa ser mantido e colocar várias instruções em um
atributo onclick não é uma boa idéia.
Dentro dos manipuladores de eventos podemos
colocar quantas instruções desejarmos, mas sempre
separadas por ponto-e-vírgula.

41
IBM SkillsBuild | Introducción a Python

Manipuladores de eventos
A maneira mais conveniente de acessar um elemento
de página e recuperar o objeto DOM associado a essa

associados ao tag é usar o identificador (atributo "id"). Neste caso, o

identificador é "miBoton". Para acessar esse
addEventListener elemento, usamos o método getElementById() do
objeto document, enviando o identificador.

A segunda maneira de associar os manipuladores de

eventos aos elementos da página é através do var miBoton =
document.getElementById('miBoton');
método addEventListener(). Esta é uma forma
ligeiramente mais avançada, mas ainda melhora a
capacidade de manutenção do código, pois permite
uma melhor separação entre o código de
Agora temos o objeto DOM associado a esse botão na
funcionalidade e o código de conteúdo.
variável "miBoton". Sobre este objeto, podemos
O código HTML deve ser usado simplesmente para agora invocar o método addEventListener(). Dois
definir o conteúdo de nossa página. Se tivermos parâmetros devem ser passados para este método. O
instruções Javascript dentro de tags, colocando primeiro é o tipo de evento que queremos detectar e
atributos tais como "onclick" ou "onchange" o que o segundo é a função do manipulador de eventos que
estamos fazendo é colocar código a partir da queremos executar quando o evento ocorrer.
funcionalidade dentro do código HTMLo que não é
recomendado. Portanto, a técnica que vamos
miBoton.addEventListener('click',
conhecer agora é ainda mais apropriada, pois nos
function() {
permitirá escrever o código da funcionalidade (os alert('Has hecho clic!!')
eventos javascript) sem bagunçar o código HTML. })

Para associar um evento a um elemento da página,

precisamos fazer duas etapas:

• - Acesse o objeto sobre o qual queremos definir o Clicando no botão, será exibida a mensagem de
evento. Para isso, temos que acessar o DOM para alerta.
localizar o objeto apropriado, que representa a
Vamos ver um segundo exemplo, em uma imagem na
etiqueta na qual queremos associar o
qmanipulador para o tipo de evento ual vamos
manipulador do evento.
associar um "mouseover", que é produzido quando o
• - Sobre o objeto DOM, aplicamos
usuário coloca o ponteiro do mouse sobre um
addEventListener(), indicando o tipo de evento e
elemento.
a função do manipulador.
Temos uma imagem, na qual colocamos um atributo
Por exemplo, temos este elemento de página:
de id para chegar a ela.

<input type="button" id="'miBoton'"

<img
value="Pulsa click">
src="https://picsum.photos/200/300"
id="imagen">

42
IBM SkillsBuild | Introducción a Python

Agora associamos o manipulador do evento do tipo

"mouseover" com este código Javascript.
Apêndice do evento
Javascript
var miImagen =
document.getElementById('imagen');
A tabela a seguir resume os eventos mais
miImagen.addEventListener('mouseover'
, function() { importantes definidos pelo JavaScript:
alert('Has pasado el ratón encima de
la imagen')
Evento Descrição Elementos
}) para os quais é
definido

onblur Desmarque o <button>, <inp

elemento ut>, <label>, <s
elect>, <textare
a>, <body>

oncha Desmarque <input>, <selec

nge um item que t>, <textarea>
tenha sido
modificado

onclic Clique e solte Todos os

k o mouse elementos

ondblc Clique duas Todos os

lick vezes elementos
sucessivamen
te com o
mouse

onfocu Selecione um <button>, <inp

s item ut>, <label>, <s
elect>, <textare
a>, <body>

onkey Pressione Elementos do

down uma tecla formulário e
(sem soltar) <body>

onkey Pressione Elementos do

press uma tecla formulário e
<body>

43
IBM SkillsBuild | Introducción a Python

onkey Solte uma Elementos do onresi O tamanho da <body>

up tecla formulário e ze janela do
pressionada <body> navegador foi
modificado

onload A página foi <body>

completamen onsele Selecione um <input>, <texta
te carregada ct texto rea>

onmou Pressione Todos os onsub Enviar o <form>

sedow (sem soltar) elementos mit formulário
n um botão do
mouse
onunlo A página é <body>
ad abandonada
onmou Movendo o Todos os (por exemplo,
semov mouse elementos ao fechar o
e navegador)

onmou O mouse Todos os

seout "deixa" o elementos
elemento
(paira sobre
outro DOM
elemento)

O objetivo do Javascript é interagir com o código

onmou O mouse Todos os HTML, para isso temos que ser muito claros sobre o
seover "entra" no elementos
que é o DOM. (Document Object Model). Ou seja, a
elemento
(paira sobre o árvore de tags que compõe nosso HTML.
elemento)
Assumindo que temos um elemento HTML com um
id=caja podemos nos referir a ela como:
onmou Solte o botão Todos os
seup que foi elementos
pressionado var
sobre o cajas=document.getElementById("caja").inn
mouse erHTML;

onrese Inicialize o <form>

t formulário
Desta forma, carregamos na variável cajas o valor do
(apague todos
os seus elemento com id=caja.
dados)

44
IBM SkillsBuild | Introducción a Python

Também podemos modificar as propriedades ou o e com um ponto para se referir a sua classe.
valor do elemento com id=caja.

var
var cajas=document.querySelector(".caja");
cajas=document.getElementById("caja");
cajas.innerHTML;
cajas.style.background="red";

Outra maneira de selecionar um elemento de nossa

página é com querySelector. Seleção de clases e
etiquetas
var
cajas=document.querySelector("#caja");
Acabamos de ver como selecionar elementos
específicos por seu rótulo, nome ou classe.

Desta forma, também seleciono o elemento com Para selecionar todos os elementos de um tipo:
id=caja.

Se eu quiser selecionar um item cujo class=caja: var

todos_los_div=document.getElementsByTagNa
me('div');
var
cajas=document.querySelector(".caja");

Com isso selecionei todos os elementos do tipo div e

os coloquei em um array. Agora podíamos extrair o
Podemos, portanto, ver como podemos, a partir de
Javascript, para selecionar e modificar elementos de conteúdo de um elemento deste array:
HTML através do uso do DOM.

var
contenido=todos_los_div[2].textContent();
Desta forma, se eu selecionar o elemento, é apenas console.log(contenido);
para selecionar o nome da etiqueta,

var Isso me mostraria o que está no elemento [2] de

cajas=document.querySelector("caja"); array.

Poderíamos também ter usado o innerHTML:

com # para se referir a seu ID

var
contenido=todos_los_div[2].innerHTML();
var
cajas=document.querySelector("#caja");

45
IBM SkillsBuild | Introducción a Python

A única diferença é que com innerHTML(), se eu

quiser, posso agregar um novo valor ao conteúdo.

Também podemos selecionar elementos por sua

.class tag com:

document.getElemenByClassname();

BOM

O BOM (Browser Object Model) contém uma

infinidade de propriedades que nos permitem
trabalhar com o navegador.

Da mesma forma que no DOM podemos selecionar

objetos do documento, com o BOM podemos
selecionar objetos do navegador e modificá-los. Por
exemplo, podemos selecionar o:

console.log(window.innerHeight);
console.log(window.innerWidth);

Não existem padrões oficiais para o modelo de objeto

do navegador (BOM), por isso não é amplamente
utilizado, mas é interessante para o estudante ao
menos saber sobre sua existência e funcionamento.

Mais coisas que podemos fazer:

console.log(screen.Width); Semelhante ao
acima
Puxe para cima o URL carregado e mais
dados:
console.log(window.location);

Remova o Href:

console.log(window.location.href);

Abra uma nova aba no navegador:

window.open(URL_de_destino);
46