Pesquisar neste blog

28/06/2021

Eventos #02 com jQuery em HTML

 Arquivo: estilo.css

@font-face {
    font-family'Oswald';
    srcurl('../fonts/Oswald-Regular.ttf'format('truetype');
}

*{
    font-family'Oswald'sans-serif;
}

html {
    height100%;
}

body {
    margin0;
    background-color#0D262D;
    color#fff;
    height100%;
}

table {
    border-collapsecollapse;
}

tr {
    border-bottomsolid 1px white;
}

td {
    font-size1.6em;
    padding10px;
}

li {
    font-size1.6em;
}

.conteudo {
    displayflex;
    flex-directioncolumn;
    align-itemscenter;
    min-height100%;
}

.exercicio div {
    font-size1.8em;
    bordersolid 5px #fff;
    padding0px 40px;
    margin10px;
}

.exercicio div:nth-of-type(1) {
    background-colordarkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-colorcrimson;
}

.exercicio div:nth-of-type(3) {
    background-colordarkcyan;
}

.exercicio div:nth-of-type(4) {
    background-colordarkorchid;
}

.exercicio div:nth-of-type(5) {
    background-colordodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-colorsalmon;
}

.exercicio .destaque {
    bordersolid 10px greenyellow;
    colorgreenyellow;
    font-weightbold;
}

Arquivo: jquery.js  clique aqui para fazer o download

Arquivo: eventos2.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Eventos #02</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        input {
            font-size2em;
        }
    </style>
</head>

<body class='conteudo exercicio'>
    <h1>Eventos #02</h1>
    <div id='div1'>1</div>
    <div id="resultado1">?</div>
    <br>
    <input type="text" placeholder="Digite e Selecione">
    <div id="resultado2">?</div>
    <script>
        // ...seleciona a borda do ponteiro na div1 '1'
        const alternarDestaque = () => $('#div1').toggleClass('destaque')
        //$('#div1').hover(alternarDestaque, alternarDestaque)//ou , e => {}
        //ou 2° metodo
        //$('#div1').on('mouseenter mouseleave', alternarDestaque)

        //evento só vai acontecer 1 única vez
        $('#div1').on('mouseenter'e => alert('AVISO IMPORTANTE:\nObrigado'))
        $('#div1').dblclick(e => $('#div1')).fadeOut(1000).fadeIn(1000)//aparece e reaparece

        //função para sempre que a tela for redimencionada
        $(window).resize(function (e) {
            const l = $(window).width() // captura a largura da tela
            const a = $(window).height()//captura a altura da tela
            $('#resultado1').html(`Largura: ${l} e Altura: ${a}`)//imprimi a largura e altura
        })

        //evento que seleciona uma parte de um texto
        $(':input').select(e => {
            const inicio = e.target.selectionStart
            const fim = e.target.selectionEnd
            $('#resultado2').html(e.target.value.substring(iniciofim))
        })
        </script>
</body>

Saída gerada








21/06/2021

Reversão de partidas elétricas

Reversão de partidas nos motores elétricos usando Controle Lógico Programável.

RT =     Relé térmico (Reversão térmica)
B0 =     Botão de desligar
BH =    Botão no sentido horário
BAH = Botão de acionamento no sentido horário
CH =    Contactora no sentido horário
CAH = Contactora no sentido anti -horário

Software: Atos A1 Soft




Eventos #01 com jQuery em HTML

Arquivo: estilo.css

@font-face {
    font-family'Oswald';
    srcurl('../fonts/Oswald-Regular.ttf'format('truetype');
}

*{
    font-family'Oswald'sans-serif;
}

html {
    height100%;
}

body {
    margin0;
    background-color#0D262D;
    color#fff;
    height100%;
}

table {
    border-collapsecollapse;
}

tr {
    border-bottomsolid 1px white;
}

td {
    font-size1.6em;
    padding10px;
}

li {
    font-size1.6em;
}

.conteudo {
    displayflex;
    flex-directioncolumn;
    align-itemscenter;
    min-height100%;
}

.exercicio div {
    font-size1.8em;
    bordersolid 5px #fff;
    padding0px 40px;
    margin10px;
}

.exercicio div:nth-of-type(1) {
    background-colordarkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-colorcrimson;
}

.exercicio div:nth-of-type(3) {
    background-colordarkcyan;
}

.exercicio div:nth-of-type(4) {
    background-colordarkorchid;
}

.exercicio div:nth-of-type(5) {
    background-colordodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-colorsalmon;
}

.exercicio .destaque {
    bordersolid 10px greenyellow;
    colorgreenyellow;
    font-weightbold;
}


Arquivo: jquery.js clique aqui para fazer o download do arquivo

Arquivo: eventos1.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Eventos #01</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
    <style>
        input {
            font-size2em;
        }
    </style>
</head>

<body class='conteudo exercicio'>
    <h1>Eventos #01</h1>
    <div id='posicao'></div>
    <div id='cliques'>Cliques: 0</div>
    <input type="text" placeholder="Cor de Background">

    <script>
        // função para mostrar os movimentos do mouse
        function mostrarPosicaoMouse(e){
            $('#posicao').html(`x: ${e.clientX} y: ${e.clientY}`)
        }
        //registra os eventos jQuery
        $('body').on('mousemove'mostrarPosicaoMouse)

        //seleciona o elemento e para o mouse no quadro
        $('#posicao').mouseover(e => {
            $('body').off('mousemove'mostrarPosicaoMouse)// para a posição no quadro
        })

        //começa novamente a mostar a posição do mouse
        $('#posicao').mouseleave(e => {
            $('body').on('mousemove',mostrarPosicaoMouse)
            //$('#body').mousemove(mostrarPosicaoMouse)
        }) 

        let cliques = 0
        $('body').click(e => {
            $('#cliques').html(`Cliques: ${++cliques}`)
        })

        const Background = $('body').css('background-color')

        $('input').keyup(function (e) {
            const valor = $(this).val()
            //pode ter de um dígito, de a até um  f (minusculo), //e A até F (maíusculo), de 3 á 6 dígitos
            if (valor.match(/#[\da-fA-F]{3,6}/)) {
                $('body').css('background-color'valor)
            }else{
                $('body').css('background-color'BackgroundOriginal)
            }
        })
    </script>
</body>












20/06/2021

Contador de 0 a 99 com PIC 16F876

PIC 16F876A






























Código feito no CCS Compiler

#include <main.h>
#fuses XT, NOWDT,
#use delay(clock = 4MHz)
#use fast_io(a)
#use fast_io(b)

//MULTIPLEXADO
byte display[10] = {0x3f,0x06, 0x5b, 0x4f, 0x66, 0x6d, 0x7d, 0x07, 0x7f, 0x6f};

void main(void){
   byte ud = 0, dec = 0;
   set_tris_b(0x00);
   set_tris_a(0x00);
   output_b(0x00);// atribui aos ports tudo 0
   
   while(TRUE){
      
      for(dec = 0; dec < 10; dec++){//controla as dezenas
         for(ud = 0; ud < 10; ud++){// controla as unidades
            output_a(0b00000010);
            output_b(display[ud]);
            delay_ms(100);
            
            if(dec == 0){
               output_a(0b00000011);
            }else{
               output_a(0b000000001);
               output_b(display[dec]);
               delay_ms(100);
            }
         }
      }
      //TODO: User Code
   }

}


23/05/2021

Manipulando CSS em HTML

Arquivo: estilo.css

@font-face {
    font-family'Oswald';
    srcurl('../fonts/Oswald-Regular.ttf'format('truetype');
}

*{
    font-family'Oswald'sans-serif;
}

html {
    height100%;
}

body {
    margin0;
    background-color#0D262D;
    color#fff;
    height100%;
}

table {
    border-collapsecollapse;
}

tr {
    border-bottomsolid 1px white;
}

td {
    font-size1.6em;
    padding10px;
}

li {
    font-size1.6em;
}

.conteudo {
    displayflex;
    flex-directioncolumn;
    align-itemscenter;
    min-height100%;
}

.exercicio div {
    font-size1.8em;
    bordersolid 5px #fff;
    padding0px 40px;
    margin10px;
}

.exercicio div:nth-of-type(1) {
    background-colordarkgoldenrod;
}

.exercicio div:nth-of-type(2) {
    background-colorcrimson;
}

.exercicio div:nth-of-type(3) {
    background-colordarkcyan;
}

.exercicio div:nth-of-type(4) {
    background-colordarkorchid;
}

.exercicio div:nth-of-type(5) {
    background-colordodgerblue;
}

.exercicio div:nth-of-type(6) {
    background-colorsalmon;
}

.exercicio .destaque {
    bordersolid 10px greenyellow;
    colorgreenyellow;
    font-weightbold;
}


Arquivo: manipulandoCSS.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Manipulando CSS</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
</head>

<body class='conteudo exercicio'>
    <h1>Manipulando CSS</h1>
    <div id='div1'>1</div>
    <div id='div2'>2</div>
    <div id='div3'>3</div>
    <div id='resultado'></div>
    <script>
       
    </script>
</body>

Saída anterior

Arquivo atualizado: manipulandoCSS.html

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Manipulando CSS</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
</head>

<body class='conteudo exercicio'>
    <h1>Manipulando CSS</h1>
    <div id='div1'>1</div>
    <div id='div2'>2</div>
    <div id='div3'>3</div>
    <div id='resultado'></div>
    <script>
        // selecionar a fonte atual
        const fonte = $('#div1').css('font-family')
        $('#resultado').append(`Fonte é ${fonte}`)

        $('#div1').css('font-size''3em')//alterando a propriedade
        $('#div1').css({'font-size':'3.5em''color': 'yellow'})//alterando 2 propriedades
        $('#divi1').css('font-size'function(){
            return `${2*2}em`
        })

        $('#div2').addClass('destaque')//adiciona a classe destaque

        //verificando se tem uma determinada classe
        const temClasse = $('#div2').hasClass('destaque')
        $('#resultado').append(`<br>Tem class ? = ${temClasse}`)

        $('#div2').removeClass('destaque')//remove classe destaque
        $('#div2').toggleClass('destaque')
        $('#div2').toggleClass('destaque')
    </script>
</body>

Saída atualizada








01/05/2021

Semáforo com PIC 16F877A

 Desafio1: construir um semáforo para carros e pedestre

Descrição do funcionamento.

O semáforo deve ficar sempre verde para os carros e vermelho para os pedestres. Entretanto
quando um pedestre acionar um dos botões colocados em ambos os lados da rua, o semáforo
inicia a sequência de liberação da passagem para ele. Essa sequência e descrita a seguir:

1. Em funcionamento sem pedestre o sinal é sempre verde para os carros e vermelho
para a passagem de pedestre

2. Após um pedestre pressionar o botão os sistema espera 10 segundo mantendo o
verde para os carros e vermelho para o pedestre.

3. Então, sinal muda amarelo para os carros e continua vermelho para os pedestre por 2
segundos.

4. Após o tempo com amarelo ligado, o sinal dos carros muda para vermelho, espera um
segundo e o sinal do pedestre vai para verde;

5. Depois de 10 segundos dando passagem para os pedestres, o sinal (do pedestre)
começa a piscar e fica assim por mais 5 segundos;

6. Então o sinal do pedestres fica vermelho.

7. Após um segundo o sinal para os carros muda para verde, mantendo assim até um
pedestre pressionar o botão novamente.


Figura 1 - Semáforo de pedestre
















Resolução:

Código feito em CCS Compiler

#include <16F877A.h>
#device adc = 8
#use delay(crystal = 20MHz)
#fuses HS, NOWDT, NOPROTECT, NOLVP
#define D1 1000
#define D2 2000
#define D3 3000
#define D4 100

//0b00000001 // vermelho carros
//0b00000010 // amarelo  carros
//0b00000100 // verde    carros
//0b00000001 // vermelho para carros e vermelho para pedestres
//0b01000100 // verde para carros e vermelho para pedestres
//0b01000010 // amarelo para carros e vermelho para pedestres

boolean flag = false;
int cont = 0;

void main(){

   while(TRUE){
      //TODO: User Code
      
      if(input(PIN_B0) == TRUE){
         flag = true;
         output_high(PIN_B1);
      }
      
      cont++;
      delay_ms(10);
      
      
      
      switch(cont){
         
         case 1:
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
            
            output_d(0b01000100);
            delay_ms(D3);
            
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
         break;
         
         case 2:
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
         
           output_d(0b01000010);
           delay_ms(D2);
                                            
           if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
           }
           
         break;
         
         case 3:
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
                  
            output_d(0b01000001);
            delay_ms(D3);
            
            if(input(PIN_B0) == true){
               flag = true;
               output_high(PIN_B1);
            }
            
            delay_ms(D4);
            
            if(flag == true){
               output_d(0b10000001);
               delay_ms(D3);
               
               for(int i = 0; i < 10; i++){
                  output_high(PIN_D7);
                  delay_ms(200);
                  output_low(PIN_D7);
                  delay_ms(200);
               }
               
               output_low(PIN_B1);
               flag = false;
               cont = 0 ;
            }
            cont = 0;
         break;   
         
      }
         
   }

}



14/04/2021

Modificando HTML com jQuery #01

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Modificando HTML #01</title>
    <link rel='stylesheet' href='css/estilo.css'>
    <script src='js/jquery.js'></script>
</head>

<body class='conteudo exercicio'>
    <h1>Modificando HTML #01</h1>
    <div id='conteudo1'></div>
    <div id='conteudo2'></div>
    <div id='conteudo3'></div>
    <div>Sem ID!</div>

    <script>
        // Conteúdo 1
        $('#conteudo1').append('<p1>1<p/>')//selecionando a partir do id, foi adicionado um parágrafo 1
        
        //Conteúdo 2, dentro de array é gerado 3 li (itens de 1 lista)
        const elementos = [
            $('<li>').append('Feijão'), $('<li>').append('Carne')
        ]
        
        //adiciona 1 intem sorvete e depois os 3 li do array dentro da lista 
        const lista = $('<ul><li>Sorvete</li><ul>').append(elementos)
        $('#conteudo2').append(lista)

        // Conteúdo 3 (append via anexando)
        $('#conteudo3').append(['<h1>1</h1>''<h1>2</h1>']).prepend('<h1>0</h1>')//coloca o 0 antes do 1 e 2
        //$('#conteudo3').html('<h1>1 2 3</h1>')// substitui o conteúdo acima por esse
        //$('#conteudo3').text('<h1>123</h1>')

        //alterando todos
        //$('div').html('<strong>Todos !</strong>')
    </script>
</body>

Saída 1



Saída 2


Saída 3


13/04/2021

QUESTIONÁRIO: ENDEREÇO - IP

1) Associe o valor decimal com o respectivo valor binário.

























2) Associe o valor decimal com o respectivo valor binário.
























3) Associe o valor decimal com o respectivo valor binário.


























4) Associe o valor decimal com o respectivo valor binário.


























5) Com base no endereço IP: 10.1.1.10 / 255.0.0.0, assinale as alternativas corretas:























6) Com base no endereço IP: 10.1.1.10 / 255.0.0.0, assinale as alternativas corretas :
























7) Com base no endereço IP: 172.16.32.64 / 255.255.0.0, assinale as alternativas corretas :























8) Com base no endereço IP: 172.16.32.64 / 255.255.0.0, assinale as alternativas corretas :























9) Com base no endereço IP: 192.168.92.124 / 255.255.255.0, assinale as alternativas corretas :























10) Com base no endereço IP: 192.168.92.124 / 255.255.255.0, assinale as alternativas corretas :
























11) Converta o endereço IP 10.20.30.40 do formato decimal para o formato binário. (Obs.: Escreva os oito bits de cada octeto separados por pontos, por exemplo: 10101010.1000000.10011001.00001001)














12) Converta o endereço IP 10.20.30.40 do formato decimal para o formato binário. (Obs.: Escreva os oito bits de cada octeto separados por pontos, por exemplo: 10101010.1000000.10011001.00001001)













13) Converta o endereço IP 172.16.32.64 do formato decimal para o formato binário. (Obs.: Escreva os oito bits de cada octeto separados por pontos, por exemplo: 10101010.1000000.10011001.00001001)














14) Converta o endereço IP 172.16.32.64 do formato decimal para o formato binário. (Obs.: Escreva os oito bits de cada octeto separados por pontos, por exemplo: 10101010.1000000.10011001.00001001)













15) Converta o endereço IP 192.168.92.124 do formato decimal para o formato binário. (Obs.: Escreva os oito bits de cada octeto separados por pontos, por exemplo: 10101010.1000000.10011001.00001001)















16) Converta o endereço IP 192.168.92.124 do formato decimal para o formato binário. (Obs.: Escreva os oito bits de cada octeto separados por pontos, por exemplo: 10101010.1000000.10011001.00001001)