Henrique

26/08/2020

19/08/2020

Função para verificar CPF em Javascript

Objetivo: Averiguar se os dados digitados corresponde a um formato de CPF ( xxx.xxx.xxx-xx ):

Exemplo: 111.222.333-44, Ok !

Caso contrário está incorreto

function verificar(cpf) {
    //1° condição para verificar os dígitos e tamanho
    if (cpf.charAt(3) == '.' && cpf.charAt(7) == '.' && cpf.charAt(11) == '-' && cpf.length == 14) {
        var aux = '';
        aux += cpf.charAt(0);
        aux += cpf.charAt(1);
        aux += cpf.charAt(2);
        aux += cpf.charAt(4);
        aux += cpf.charAt(5);
        aux += cpf.charAt(6);
        aux += cpf.charAt(8);
        aux += cpf.charAt(9);
        aux += cpf.charAt(10);

        return checarNumero(aux);//verifica se o resto é apenas número inteiro
    }
    //caso contrário é falso
    return false;
}

//Método1 para chegar se todos os valores são apenas números: 
//exemplo: 22)8999/*,,,
function checarNumero(valor) {
    var regra = /^[0-9]+$/;
    if (valor.match(regra)) {
        return true;
    }

    return false;
}
//Método2 para chegar se todos os valores são apenas números: 
//exemplo: 22)8999/*,,,
function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}

console.log(verificar('112.456.777-99'));//ok
console.log(verificar('112.45.6.777-9,9'));//falso
console.log(verificar('555.777.077-12'));//ok
console.log(verificar('555.777-12'));//falso
console.log(verificar('555.777.077-12.780.777'));//falso

14/08/2020

Overflow em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Overflow</title>
    <style>
        div{
            font-size: 40px;
            height: 100px;
            width: 260px;
            border: solid 3px;
            overflow: hidden;
            /*overflow: scroll;overflow nos 2 sentidos*/
            overflow-x: scroll;/*só faz a rolagem na horizontal*/
            overflow-y: scroll;/*só faz a rolagem na vertical*/
            
        }
    </style>
</head>
<body>
    <div>
        TudoFuncionouMuitoBemEmCSS!!!
        Texto muito grande para caber nessa div.
        Já pensou qual será o comportamento padrão ?
    </div>
</body>
</html>

Propriedade Display em HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Display</title>
    <style>
        body {
            font-size: 40px;
            color: #fff;/*cor do texto*/
            background-color: coral;/*cor do plano de fundo*/
        }

        ul{padding: 0;}
        div{background-color: seagreen;}/*cor de fundo da div*/
        span{ background-color: red;}
        li{ background-color: purple;}

        div, span, li{ 
            width: 50%; /*largura*/
            width: 200px;
            height: 80px;/*altura*/
            padding-top: 30px;
            text-align: center;/*texto centralizado*/
            /*display: block;/*blocos*/
            /*display: inline;/*linhas*/
            display: inline-block;

        }
    </style>
</head>

<body>
    <div>Texto 1</div>
    <span>Texto 2</span>
    <span>Texto 3</span>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>

</html>

Modelo de box 02 em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <style>
        /*  */
        body{ font-size: 80px; margin: 0;}
        .c1{background-color: orange;}
        .c2{background-color: yellow;}
        .c3{background-color: tomato;}

        div{
            float: left;/*elementos à esquerda*/
            padding-top: 100px;
            padding: 10px 50px 100px 150px;/*largura*/
            padding: 100px 50px;/*comprimento*/
            padding: 50px;
            margin: 0px 20px;/*margem apenas na horizontal*/
            border: solid 15px black;/*borda tamanho 15 cor preta*/
        }

    </style>
</head>
<body>
    <div class="c1">1</div>
    <div class="c2">2</div>
    <div class="c3">3</div>
</body>
</html>

Modelo de box 01 em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Herança</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <style>
        body{
            font-family: 'Oswald', sans-serif;
            font-size: 20px;/* tamanho da fonte*/
            border: solid 3px red;
            margin: 10px 100x 150px;/*10 em cima/baixo e 100 nas laterais*/
        }

        div{
            border: inherit;
            padding: inherit;
        }
    </style>
</head>
<body>
    <h1 style="font-size: 3em">Herança</h1>
    <div>Estou herdando
        <span><p>
            teste
        </p></span>
    </div>
</body>
</html>

Herança em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Herança</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <style>
        body{
            font-family: 'Oswald', sans-serif;
            font-size: 20px;/* tamanho da fonte*/
            border: solid 3px red;
        }

        div{
            border: inherit;
            padding: inherit;
        }
    </style>
</head>
<body>
    <h1 style="font-size: 3em">Herança</h1>
    <div>Estou herdando
        <span><p>
            teste
        </p></span>
    </div>
</body>
</html>

Espeficidade 2 em HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Especificidade CSS</title>
    <!-- https://specificity.keegan.st -->
    <style>
        body{
            font-size: 40px;
        }
        /* selecionando todas as div */
        div{
            background-color: blue;
        }
        /* selecionando as div wm-cor */
        div[wm-cor]{
            background-color: darksalmon;
        }

        /* só vai funcionar antes do div:hover */
        div.estilo{ background-color: purple; }

        /* ao passar o mouse irá mostrar a cor */
        div:hover{ background-color: #00b; color: orangered; }

        /*  */
        #unico1, #unico2{background-color:yellow;}

    </style>
</head>
<body>
    <div id = "unicol" class="estilo" style="background-color: red;"><!--esse style irá passar por cima dos outros-->
        #unico1 vs .estilo vs inline
    </div>
    <div id="unico2" class="estilo"> #unico2 vs .estilo</div>
    <div class="estilo" wm-cor>.estilo vs wb-cor</div>
    <div wm-cor>wm-cor</div>
    <div class="estilo">.estilo</div>
    <div>elemento</div>
</body>
</html>

Especificidade 1 em HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Especificidade CSS</title>
    <style>
        /* https://developer.mozilla.org/pt-BR/docs/Web/CSS/Specificity */
        /*
            Em linhas gerais...
            1. regra com !important
            2. seletores mais específicos
            3. última regra processada (empate)
        */

        /* definindo a propriedade do paragráfo */
        p {
            background-color: orange;
        }
        /* definindo propriedade da classe observação */
        .observacao{
            background-color: #5f5;
            border: dashed 5px;
            padding: 20px;
            font-size: 40px;
            width: 300px;/*comprimento*/
        }
        
        p.observacao{
            padding: 2px;
            background: linear-gradient(to right, red, yellow);
        }

        
    </style>
</head>

<body>
    <p class='observacao'>Olha essa observação!!!!</p>
</body>

</html>

13/08/2020

Construindo uma tabela em HTML

<table border="1"><!--borda da tabela-->
    <caption>Produtos</caption>
    <thead><!--cabeçalho-->
        <tr>
            <!-- table read -->
            <th>Produto</th>
            <th>Preco</th>
            <th>Quantidade</th>
            <th>Total</th>
        </tr>
    </thead>
    <tbody>
        <tr><!--table rool , 4 colunas-->
            <!-- table data -->
            <td>iPad</td>
            <td>3200,25</td>
            <td>5</td>
            <td>16455,00</td>
        </tr>

        <tr>
            <td>Sansung S9</td>
            <td>2649,99</td>
            <td>8</td>
            <td>21550,99</td>
        </tr> 
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total</td><!--linha total está ocupando 3 colunas, <td colspan="3" rowspan='2'>Total</td>-->
            <td>5x5x,0x</td>
        </tr>

        <!-- <tr>
            <td>teste</td>
        </tr>-->
    </tfoot>

    <table>
        <style>
            table{
                border-collapse: collapse;
            }
            /* faz com fique + espasada */
            th, td{
                padding: 10px; 
            }
            /* linha do cabeçalho */
            thead tr{
                border-bottom: solid 3px #444;
            }

            /* sobreamento ao passar o mouse */
            tr:hover {
                background-color: #dedede;
            }
            /* aqui não vai sombrear a última linha
            tbody tr:hover {
                background-color: #dedede;
            }
             */

            /* chamando a atenção da última linha */ 
            tfoot{
                background-color: #444;
                color: #fff;
                font-weight: bold;
            }
        </style>
    </table>
</table>

12/08/2020

Prova 1 2020/1

Prova aplicada em 25/06/2020

1) Pisca LEDs

matrícula = 4230948754 LED1 --> Ex: 7 + 5 + 4 + 50 = 66 Hz

LED1 --> piscar com frequência U + P + A + 50 Hz

LED2 --> piscar com frequência U + P + 50 Hz

LED3 --> piscar com frequência U + 50 Hz

U - Último número da matricula

P - Penúltimo número da matrícula

A - Antepenúltimo número da matrícula

Resolução:

Código feito em CCS C Compiler

#include <main1.h>

#use delay(clock = 20MHz)

//Matricula = 2013178440488

int U = 4 + 8 + 8 + 50;

int P = 8 + 8 + 50;

int A = 8 + 50;

void main(){

while(TRUE){

output_high(pin_b0);

delay_ms(1000/U);

output_low(pin_b0);

delay_ms(1000/U);

output_high(pin_b1);

delay_ms(1000/P);

output_low(pin_b1);

delay_ms(1000/P);

output_high(pin_b2);

delay_ms(1000/A);

output_low(pin_b2);

delay_ms(1000/A);

}

2) Fazer um programa para bord3 que quando o botão S3 conectado a B1 o PIC grava em sua memória interna seu (aluno) primeiro nome e ao precionar o botão S3 conectado ao B2 O PIC lê o que foi escrito na memória e escreve no LCD com a sequência invertida das letras.

Ex:

HENRIQUE

EUQIRNEH

Resolução:

Código feito em CCS C Compiler

#include <main.h>

#include <LCD.C>

#include <lcd.c>

#use delay(clock=20MHz)

const char vetor[]= "HENRIQUE";

int i, cont = 0;

void crescente(){

printf(lcd_putc,"\f");//Limpa tela

for(i = 0; i < sizeof(vetor)/sizeof(int); i++){

lcd_gotoxy(i+1, 1);

lcd_putc(vetor[i]);

delay_ms(200);

}

void decrescente(){

printf(lcd_putc,"\f");

for(i = sizeof(vetor)/sizeof(int) -2; i >= 0; i--){

//lcd_gotoxy(i+1, 2);

lcd_putc(vetor[i]);

delay_ms(200);

}

void main(){

lcd_init();

while(TRUE){

if(input(PIN_B0) == true){

if(cont %2 == 0){//em par, crescente

crescente();

cont++;

}else{//em ímpar, decrescente

decrescente();

cont++;

}

//TODO: User Code

}

3) Fazer um programa para board3 que lê os valores (inteiro de oito bits) de tensão do potenciômetro, numa frequência de 10 Hz durante 5 segundos. Guarda esses valores na memória 24C04 que esta nessa placa. Quando o botão S3 é pressionado, o PIC envia esses valores via serial. A sequência de valores deve ser precedida pelo seu primeiro nome.

Ex: ......., 28, 50, 58, 55, 'N', 'A', 'I, 'R', 'I', 'M' --> PORTA SERIAL

Resolução:

Código feito em CCS C Compiler

#include <main.h>

#include <LCD.C>

#include <lcd.c>

#FUSES HS //High speed Osc (> 4mhz for PCM/PCH) (>1 )

#FUSES NOPUT //No Power Up Timer

#FUSES NOPROTECT //Code not protected from readin

#FUSES NODEBUG //No Debug mode for LCD

#FUSES NOBROWNOUT //No brownout reset

#FUSES NOLVP //No low voltage prging, B3(PIC16) or B5

#FUSES NOCPD //No EE protection

#FUSES NOWRT //Program memory not write protected

#define lcd_d/ pin_d/d

#use delay(clock = 20MHz)

#use rs232(baud=9600, xmit = PIN_C6, rcv = PIN_C7, parity = N, bits = 8, errors)

#include "2404.C"

void main(){

unsigned int i, j, aux = 0;

setup_adc_ports(AN0_AN1_AN3), (ADC_CLOCK_DIV_16);

setup_psp(PSP_DISABLED);

setup_timer_0(RTCC_INTERNAL|RTCC_DIV_1);

setup_timer_1(T1_DISABLED);

setup_timer_2(T2_DISABLED, 0, 1);

setup_comparator(NC_NC_NC_NC);

setup_vref(FALSE);

lcd_init();

delay_ms(10);

init_ext_eeprom();

delay_ms(10);

printf(lcd_putc,"\f iniciando...");

delay_ms(2000);

set_adc_channel(1);

delay_us(50);

while(TRUE){

if(!input(PIN_B0)){

printf(lcd_putc,"\fLeitura do Potenciometro\n\rEscrevendo em Menor");

write_ext_eeprom(1, 'H');

write_ext_eeprom(2, 'E');

write_ext_eeprom(3, 'N');

write_ext_eeprom(4, 'R');

write_ext_eeprom(5, 'I');

write_ext_eeprom(6, 'Q');

write_ext_eeprom(7, 'U');

write_ext_eeprom(8, 'E');

for(j = 0; j <= 58; j++){

aux = read_adc();

write_ext_eeprom(j, aux);

delay_ms(100);

}

delay_ms(3000);

printf(lcd_putc,"\f");//limpa tela

}

if(!input(PIN_B2)){

printf(lcd_putc,"\fExpedindo informação...");

for(i = 1; i <= 8; i++){

printf(lcd_putc, "%c, ", read_ext_eeprom(i));

delay_ms(100);

}

for(i = 9; i <= 58; i++){

printf(lcd_putc, "%u, ", read_ext_eeprom(i));

delay_ms(100);

}

printf(lcd_putc, "\f");

//TODO: User Code

}

Pesquisar neste blog

26/08/2020

Organização de divs em HTML

19/08/2020

Função para verificar CPF em Javascript

14/08/2020

Overflow em HTML

Propriedade Display em HTML

Modelo de box 02 em HTML

Modelo de box 01 em HTML

Herança em HTML

Espeficidade 2 em HTML

Especificidade 1 em HTML

13/08/2020

Construindo uma tabela em HTML

12/08/2020

Prova 1 2020/1

Total de visualizações de página

Marcadores

Translate