0% acharam este documento útil (0 voto)

27 visualizações10 páginas

Codigos Da Pratica3

O documento apresenta 3 exemplos de códigos JavaScript para: 1) Criar tabelas dinâmicas a partir de arrays de produtos; 2) Obter lista de clientes a partir de um campo específico de um array de objetos; 3) Criar uma janela modal com opções de radio button e tratar eventos de clique.

Enviado por

jfoliveira

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

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

0% acharam este documento útil (0 voto)

27 visualizações10 páginas

Codigos Da Pratica3

Enviado por

jfoliveira

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

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

Você está na página 1/ 10

FERRAMENTAS DE

DESENVOLVIMENTO
WEB

AULA PRÁTICA 3 – Java script

Aqui basta criar um arquivo para praticar:

Exemplo 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="width=d
evice-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
table, td{
border: 1px solid brown;
}
</style>
<body>
<script>
var lista_carrinho=[
["Fralda", 45.4],
["Leite em Pó", 19.5]
];

var outro_carrinho=[
["Frango", 30.0],
["Guaraná", 9.5],
["Batata frita", 20.0]
];

function cria_tab(AR_PROD){
let str_tabela="<table>";
for(let produto of AR_PROD){
str_tabela+="<tr>" ;
str_tabela+="<td>" +produt
o[0]+"</td>";
str_tabela+="<td>" +produt
o[1]+"</td>";
str_tabela+="</tr>";
}
str_tabela+="</table>";
return str_tabela;
}
document.write(cria_tab(lista_carr
inho));
document.write("<br>");
document.write(cria_tab(outro_carr
inho));
</script>
</body>
</html>

Exemplo 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="width=d
evice-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function lista_clientes(campo,cad)
{
let lista_cli=[];
for(cliente of cad){
lista_cli.push(cliente[cam
po]);
}
return lista_cli
}
// CHAMA a função
var total_clientes=lista_clientes("emp
resa",[
{
cod:1,
empresa:"Empresa de Alcool Gel
Ltda",
valor: 2560,
dt_vencto: "21/06/2020",
dt_pgto: "22/06/2020",
nf: 145
},
{
cod:2,
empresa:"Transportes SA",
valor: 1680,
dt_vencto: "16/11/2020",
dt_pgto: "16/11/2020",
nf: 1024
},
{
cod:3,
empresa:"Industria de Cimentos
SA",
valor: 8150,
dt_vencto: "14/03/2021",
dt_pgto: "",
nf: 32
}
]);

console.log(total_clientes)

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

Exemplo 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="width=d
evice-width, initial-scale=1.0">
<title>Document</title>
<style>
.opcao{
position: absolute;
top: 100px;
left: 100px;
width: 200px;
height: 150px;
padding: 10px;
background-color: slategray;
border: 1px solid gray;
}
.tipo{
font-weight: bold;
text-shadow: 1px 1px 1px black;
color: white;
}
</style>
</head>
<body>
<script>
function cria_janela(CONF){

var lista =CONF.lista

if(" CONF.processa"){
alert("Nenhuma função será cha
mada! Verifique.")
};
var janela=document.createElement(
"div");
janela.className="opcao";

var executa=function(){
valor=document.querySelector('
input[name="tipo"]:checked').value;
CONF.processa(valor);
document.body.removeChild(jane
la);
};
var fim=function(){
document.body.removeChild(jane
la);

};
for(let i=0, tam=CONF.lista.length
; i<tam;i++){
var input=document.createEleme
nt("input");
input.id="tipo";
input.type="radio";
input.name="tipo";
input.value=CONF.lista[i][0];
janela.appendChild(input);

var label=document.createEleme
nt("label");
label.textContent=CONF.lista[i
][1];
label.className="tipo";
label.htmlFor="tipo";
janela.appendChild(label);

var br=document.createElement("br"
);
janela.appendChild(br);
}
var br=document.createElement("br"
);
janela.appendChild(br);

var cancela = document.createEleme

nt("button");
cancela.textContent="Cancela";
cancela.addEventListener("click",
fim, false);
janela.appendChild(cancela);

var button = document.createElemen

t("button");
button.textContent="Executa";
button.addEventListener("click", e
xecuta, false);
janela.appendChild(button);

document.body.appendChild(janela);
}

// chama a função
cria_janela( {
lista: [
["op1","Opcao 1"],
["op2","Opcao 2"],
["op3","Opcao 3"],
["op4","Opcao 4"]
],
tipo: "radio",
processa: function(opcao){
switch(opcao) {

case "op1":
alert("Primeira opcao"
);
break;
case "op2":
alert("Segunda opcao")
;
break;
case "op3":
alert("Terceira opcao"
);
break;
case "op4":
alert("Nova opcao");
break;
default:
alert("Nenhuma opcao")
;
}
}

});

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

Codigos Da Pratica3

Enviado por

Codigos Da Pratica3

Enviado por

FERRAMENTAS DE

AULA PRÁTICA 3 – Java script

var lista =CONF.lista

var cancela = document.createEleme

var button = document.createElemen

Você também pode gostar

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.