JS

Page 1

//---------------------------- Comentar linhas

//para comentar uma linha, digite barras duplas.

/*

para comentar diversas linhas utilize /*

*/

//---------------------------- operadores basicos

/*

//mostrar mensagens no alerta da pagina

var mensagem = "olá mundo!";

alert(mensagem);

//declarar variaveis

var a = 10;

var b = 5;

//executar operacoes matematicas simples

var soma = a + b;

var subtracao = a - b;

var mult = a * b;

var div = a / b;

var modulo = a % b;

alert("A soma de: " + a + " e " + b + " é: " + soma);

alert("A subtracao de: " + a + " e " + b + " é: " + subtracao);

alert("A multiplicação de: " + a + " e " + b + " é: " + mult);

alert("A divisão de: " + a + " e " + b + " é: " + div);

alert("O modulo de: " + a + " e " + b + " é: " + modulo);

*/

//---------------------------- tomada de decisao e lacos

/*

//if else ifelse

if(modulo == 1){

alert(a + " é um numero ímpar");

}else if(modulo == 0){

alert(a + " é um numero par");

} else{

alert("valor invalido: " + a);

}

//while

var i = 0

while(i<3){

alert(i)

i++;

}

//for

for(var i = 0; i < 3; i++){

alert(i)

}

//tipos de variaveis

var nuInteiro = 5;

var nuDecimal = 10.2;

var texto = "texto"

//array

var arrayDeLista = [nuInteiro, nuDecimal, texto];

alert("meu array de lista é: " + arrayDeLista);

alert(arrayDeLista[1]);

alert(arrayDeLista[0]);

//foreach ganbyarra

for(i in arrayDeLista){

alert(arrayDeLista[i]);

}

//foreach

arrayDeLista.forEach(element => {

alert("ForEach" + element);

});

*/

//---------------------------------- Funcoes

/*

//funoes

function soma(a,b){

return a + b;

}

alert("funcao soma: " + soma(5,3));

function mult(a,b){

return a * b;

}

alert(mult(soma(1,1),100));

*/

//---------------------------------- Arrays

/*

//array

var meuArray =["A","B","C","D","E"]

//foreach

meuArray.forEach(element =>{

alert(element)

});

//adicionar ao final do array

meuArray.push("F")

meuArray.forEach(element =>{

alert(element)

});

//remover um item do final

meuArray.pop();

//ForEach de Array Simples

meuArray.forEach(element =>{

alert(element)

});

//ForEach de Array de Arrays (booooommmmm !)

Object.entries(MeuArray).forEach(([key, value]) => {

alert(key + ' ' + value);

});

//remover um item do inicio

meuArray.shift();

meuArray.forEach(element =>{

alert(element)

});

//adicionar um item do inicio

meuArray.unshift("X");

meuArray.forEach(element =>{

alert(element)

});

//descobrir o numero do indice de um valor

var posicao = meuArray.indexOf("C");

alert(posicao);

//remover um item pelo valor

meuArray.splice(meuArray.indexOf("C"),1);

alert(meuArray);

*/

//---------------------------------- DOM

//verificar se o input esta vazio

//caso esteja vazio, vai pegar o numero do input e

//pintar o span de numero equivalente ao do input

// listar os inputs (class="caixas")

// var elementoHtml = document.getElementsByClassName("caixas");

// pegar o valor dos inputs (class="caixas")

// elementoHtml[i].value

// listar os elementos apan (Class="msgerro")

// var elementoHtml = document.getElementsByClassName("msgerro");

// alterar os "style" do elemento capturado

// elementoHtml[a].style.color = "red";

//*obs: os elementos que vierem por array precisam receber tratamentos

function verificarNaoInputVazio(){

var elementoHtml = document.getElementsByClassName("caixas");

for(i in elementoHtml){

if(elementoHtml[i].value == ""){

indentificarErros(i);

}else if(elementoHtml[i].value != ""){

limparErros(i);

}

}

}

function indentificarErros(posicao){

var elementoHtml = document.getElementsByClassName("msgerro");

elementoHtml[posicao].style.color = "red";

}

function limparErros(posicao){

var elementoHtml = document.getElementsByClassName("msgerro");

elementoHtml[posicao].style.color = "rgba(233, 21, 21,0)";

}

function autoPrenncher(){

var elementoHtml = document.getElementsByClassName("caixas");

for(i in elementoHtml){

elementoHtml[i].value = "Luiz";

}

}

Page 2

/* chamada jquery */

/*

Exemplo de chamada jquery

$(seletor).ação();

exemplo de verificacao se documento foi carregado:

$(document).ready(function(){

});

*/

$(document).ready(function(){

$("#botao1").click(function(){

$(".texto").hide()

});

$("#botao2").click(function(){

$(".texto").css({color:'red', backgroundColor: 'black'});

});

$("#botao3").click(function(){

$(".texto").delay(3000);

$(".texto").fadeOut("slow");

});

$("#botao4").click(function(){

$(".texto").delay(3000).fadeIn("fast");

});

$("button").click(function(){

$("#mensagem").text("esse texto aparece")

.fadeIn("slow")

.css("color", "blue")

.fadeOut("slow")

.addClass("borda");

$("header").removeClass("borda");

});

});

Page 3

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="style.css">

<script language="javascript" type="text/javascript" src="jquery/3.4.0/jquery.min.js"></script>

<script language="javascript" type="text/javascript" src="main_jquery.js"></script>

<script language="javascript" type="text/javascript" src="main.js"></script>

<title>Exercicio JS</title>

</head>

<body>

<div id="container">

<header class="headerfooter borda"><p>Exercicio JS !</p></header>

<div id="corpo">

<div class="metadecorpo">

<table class="borda">

<tr class="borda">

<td class="borda"><label for="primeiroimput">Entrada 1</label><br>

<input class="caixas" id="primeiroimput" type="text" value="">

<br><span name="msgerro001" class="msgerro">* Esta opcao nao esta correta</span>

</td>

<td class="borda"><label for="segundoimput">Entrada 2</label><br>

<input class="caixas" id="segundoimput" type="text" value="">

<br><span name="msgerro002" class="msgerro">* Esta opcao nao esta correta</span>

</td>

<td class="borda"><label for="terceiroimput">Entrada 3</label><br>

<input class="caixas" id="terceiroimput" type="text" value="">

<br><span name="msgerro003" class="msgerro">* Esta opcao nao esta correta</span>

</td>

</tr>

<tr class="borda">

<td class="borda"><label for="quartoimput">Entrada 3</label><br>

<input class="caixas" id="quartoimput" type="text" value="">

<br><span name="msgerro004" class="msgerro">* Esta opcao nao esta correta</span>

</td>

<td class="borda"><span name="msgerro005" class="msgerro" >ola mundo</span></td>

<td class="borda"><input type="submit" onclick="verificarNaoInputVazio()"></td>

</tr>

</table>

</div>

<div class="metadecorpo borda">

<h1 class="texto" >Texto 1</h1>

<h2 class="texto" >Texto 2</h2><br>

<span id="mensagem"></span>

<button id="botao1">Ensconder texto1 </button>

<button id="botao2">pintar texto2 </button>

<button id="botao3">fadeOut </button>

<button id="botao4">fadeIn </button>

</div>

</div>

<footer class="headerfooter borda"><p>Rodape</p></footer>

</div>

</body>

</html>

Page 4

index.php

<!DOCTYPE html>

<html lang="pt-br">

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="style.css">

<script language="javascript" type="text/javascript" src="main.js"></script>

<title>Exercicio JS</title>

</head>

<body>

<div id="container">

<header class="headerfooter borda"><p>Exercicio JS !</p></header>

<div id="corpo">

<table class="borda">

<tr class="borda">

<th class="borda">ChaveValor1</th>

<th class="borda">ChaveValor2</th>

<th class="borda">ChaveValor3</th>

</tr>

<?php $ArrayChaveValor = [

1 => "primeiro",

2 => "segundo",

3 => "terceiro",

4 => "quarto",

];

foreach($ArrayChaveValor as $chave => $valor){ ?>

<tr class="borda">

<td class="borda"><?php echo "$chave:$valor"; ?></td>

<td class="borda"><?php echo "$chave:$valor"; ?></td>

<td class="borda"><?php echo "$chave:$valor"; ?></td>

</tr>

<?php } ?>

</table>

<table class="borda">

<tr class="borda">

<th class="borda">Simples1</th>

<th class="borda">Simples2</th>

<th class="borda">Simples3</th>

</tr>

<?php $ArraySimples = [

"A",

"B",

"C",

"D",

];

foreach($ArraySimples as $individual){ ?>

<tr class="borda">

<td class="borda"><?php echo "$individual"; ?></td>

<td class="borda"><?php echo "$individual"; ?></td>

<td class="borda"><?php echo "$individual"; ?></td>

</tr>

<?php } ?>

</table>

</div>

<footer class="headerfooter borda"><p>Rodape</p></footer>

</div>

</body>

</html>

Page 5

main.js

//---------------------------- Comentar linhas

//para comentar uma linha, digite barras duplas.

/*

para comentar diversas linhas utilize /*

*/

//---------------------------- operadores basicos

/*

//mostrar mensagens no alerta da pagina

var mensagem = "olá mundo!";

alert(mensagem);

//declarar variaveis

var a = 10;

var b = 5;

//executar operacoes matematicas simples

var soma = a + b;

var subtracao = a - b;

var mult = a * b;

var div = a / b;

var modulo = a % b;

alert("A soma de: " + a + " e " + b + " é: " + soma);

alert("A subtracao de: " + a + " e " + b + " é: " + subtracao);

alert("A multiplicação de: " + a + " e " + b + " é: " + mult);

alert("A divisão de: " + a + " e " + b + " é: " + div);

alert("O modulo de: " + a + " e " + b + " é: " + modulo);

*/

//---------------------------- tomada de decisao e lacos

/*

//if else ifelse

if(modulo == 1){

alert(a + " é um numero ímpar");

}else if(modulo == 0){

alert(a + " é um numero par");

} else{

alert("valor invalido: " + a);

}

//while

var i = 0

while(i<3){

alert(i)

i++;

}

//for

for(var i = 0; i < 3; i++){

alert(i)

}

//tipos de variaveis

var nuInteiro = 5;

var nuDecimal = 10.2;

var texto = "texto"

//array

var arrayDeLista = [nuInteiro, nuDecimal, texto];

alert("meu array de lista é: " + arrayDeLista);

alert(arrayDeLista[1]);

alert(arrayDeLista[0]);

//foreach ganbyarra

for(i in arrayDeLista){

alert(arrayDeLista[i]);

}

//foreach

arrayDeLista.forEach(element => {

alert("ForEach" + element);

});

*/

//---------------------------------- Funcoes

/*

//funoes

function soma(a,b){

return a + b;

}

alert("funcao soma: " + soma(5,3));

function mult(a,b){

return a * b;

}

alert(mult(soma(1,1),100));

*/

//---------------------------------- Arrays

/*

//array

var meuArray =["A","B","C","D","E"]

//foreach

meuArray.forEach(element =>{

alert(element)

});

//adicionar ao final do array

meuArray.push("F")

meuArray.forEach(element =>{

alert(element)

});

//remover um item do final

meuArray.pop();

//ForEach de Array Simples

meuArray.forEach(element =>{

alert(element)

});

//ForEach de Array de Arrays (booooommmmm !)

Object.entries(MeuArray).forEach(([key, value]) => {

alert(key + ' ' + value);

});

//remover um item do inicio

meuArray.shift();

meuArray.forEach(element =>{

alert(element)

});

//adicionar um item do inicio

meuArray.unshift("X");

meuArray.forEach(element =>{

alert(element)

});

//descobrir o numero do indice de um valor

var posicao = meuArray.indexOf("C");

alert(posicao);

//remover um item pelo valor

meuArray.splice(meuArray.indexOf("C"),1);

alert(meuArray);

*/

//---------------------------------- DOM

//verificar se o input esta vazio

//caso esteja vazio, vai pegar o numero do input e

//pintar o span de numero equivalente ao do input

// listar os inputs (class="caixas")

// var elementoHtml = document.getElementsByClassName("caixas");

// pegar o valor dos inputs (class="caixas")

// elementoHtml[i].value

// listar os elementos apan (Class="msgerro")

// var elementoHtml = document.getElementsByClassName("msgerro");

// alterar os "style" do elemento capturado

// elementoHtml[a].style.color = "red";

//*obs: os elementos que vierem por array precisam receber tratamentos

function verificarNaoInputVazio(){

var elementoHtml = document.getElementsByClassName("caixas");

for(i in elementoHtml){

if(elementoHtml[i].value == ""){

indentificarErros(i);

}else if(elementoHtml[i].value != ""){

limparErros(i);

}

}

}

function indentificarErros(posicao){

var elementoHtml = document.getElementsByClassName("msgerro");

elementoHtml[posicao].style.color = "red";

}

function limparErros(posicao){

var elementoHtml = document.getElementsByClassName("msgerro");

elementoHtml[posicao].style.color = "rgba(233, 21, 21,0)";

}

function autoPrenncher(){

var elementoHtml = document.getElementsByClassName("caixas");

for(i in elementoHtml){

elementoHtml[i].value = "Luiz";

}

}

Page 6

style.css

/* CSS */

body{

color:white;

background-color:grey;

font-family: Arial, Helvetica, sans-serif;

font-size: 100%;

}

#container{

display:block;

width:1000px;

height:600px;

margin-left: auto;

margin-right: auto;

}

.headerfooter{

width:95%;

height:20%;

}

#corpo{

display: block;

width:95%;

height:58%;

margin-left: auto;

margin-right: auto;

}

.borda{

border:5px;

border-color:black;

border-style: dotted;

margin-left: auto;

margin-right: auto;

}

table{

width:98%;

height:60%;

/*centralizar objs na tabela*/

table-layout: fixed;

text-align: center;

}

td, th {

/*centralizar objs na tabela*/

padding: .7em;

margin: 0;

/*border: 1px solid #ccc;*/

text-align: center;

}

/*

button{

height:60px;

width:100px;

font-size: 200%;

border-radius:10px;

}

*/

.msgerro{

color: rgba(233, 21, 21,0);

}

.metadecorpo{

width:98%;

height:50%;

margin-left: auto;

margin-right: auto;

}

Page 7

main_jquery.js

/* chamada jquery */

/*

Exemplo de chamada jquery

$(seletor).ação();

exemplo de verificacao se documento foi carregado:

$(document).ready(function(){

});

*/

$(document).ready(function(){

$("#botao1").click(function(){

$(".texto").hide()

});

$("#botao2").click(function(){

$(".texto").css({color:'red', backgroundColor: 'black'});

});

$("#botao3").click(function(){

$(".texto").delay(3000);

$(".texto").fadeOut("slow");

});

$("#botao4").click(function(){

$(".texto").delay(3000).fadeIn("fast");

});

$("button").click(function(){

$("#mensagem").text("esse texto aparece")

.fadeIn("slow")

.css("color", "blue")

.fadeOut("slow")

.addClass("borda");

$("header").removeClass("borda");

});

});