Henrique

12/08/2020

Renderização condicional múltiplas com Administrador em HTML

<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>

<div id="app">
    <template v-if="logado">
        <p>Usuário Logado: {{ nome }}</p><!--se estiver logado-->
        <p>Perfil: Administrador</p>
    </template>
    
    <p v-else-if= "anonimo">Navegando como Anônimo</p>
    <p v-else="!logado">Nenhum usuário logado</p>
    <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}</button>
    <input type="checkbox" v-model="anonimo"><!--apontando para anônimo-->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nome: 'Henrique',//Nome do usuário
            logado: false,
            anonimo: false,//caso deseje entrar como anônimo
        }
    })
</script>

Renderização condicional múltipla em HTML

<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>

<div id="app">
    <p v-if= "logado">Usuário Logado: {{ nome }}</p><!--se estiver logado-->
    <p v-else-if= "anonimo">Navegando como Anônimo como Anônimo</p>
    <p v-else="!logado">Nenhum usuário logado</p>
    <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}</button>
    <input type="checkbox" v-model="anonimo"><!--apontando para anônimo-->
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nome: 'Henrique',//Nome do usuário
            logado: false,
            anonimo: false,//caso deseje entrar como anônimo
        }
    })
</script>

Renderização condicional com HTML

Objetivo: Mostrar na tela um(a) usuário(a) logado(a) através de um click

<meta charset="UTF-8">
<script src="https://unpkg.com/vue"></script>

<div id="app">
    <p v-if= "logado">Usuário Logado: {{ nome }}</p><!--se estiver logado-->
    <p v-else="!logado">Nenhum usuário logado</p>
    <button @click="logado = !logado">
    {{ logado ? 'Sair' : 'Entrar' }}</button>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            nome: 'Maria',//Nome do usuário
            logado: false

        }
    })
</script>

11/08/2020

2° programa em HTML

<!DOCTYPE html>
<html lang="pt-br">

<head>
    <meta charset="utf-8"/><!--resolver problemas de acentuação-->
    <title>Minha lembraça</title>
</head>

<body>
   <div id="interface">
     
    <header id= "cabeçalho"> <!--Delimitar o cabeçalho, inicio do cabeçalho-->
    
    <hgroup><!--tag de grupo-->
    <h1>Tempos bons</h1>
    <h2>Minha lembrança de tempos bons</h2>
    </hgroup>

    </header><!--Delimitar o fim do cabeçalho-->
    <img src="C:\Users\User\Pictures\karolehenrique.png"><!--tag para imagens-->

</div>

</body>
</html>

10/08/2020

Protocolo RS232 com PIC 16F628A

#include <16f628a.h>

#fuses intrc_io,nowdt,nomclr//diretiva fuses bits

#use delay(clock = 4M)

#use rs232(baud=9600,rcv=pin_b1,xmit=pin_b2,bits=8)

#use fast_io(a)

#use fast_io(b)

void main(void){

set_tris_a(0xff);//todo port a como entrada

set_tris_b(0b11111101);//todo pino b como entrada exceto o em 0

while(true){

if(input(pin_a0)){

delay_ms(500);

putc('B');

delay_ms(100);

}

Créditos para: https://alexsandrolima.com/

Listas Aninhadas 2 em HTML

<h1>Projeto</h1>
<ul class="tree">
    <li>
        <span wm-folder>backend</span>
        <ul>
            <li>
                <span wm-folder>app</span>
                <ul>
                    <li>produto.js</li>
                    <li>usuario.js</li>
                    <li>venda.js</li>
                </ul>
            </li>
            <li>
                <span wm-folder>config</span>
                <ul>
                    <li>banco.js</li>
                    <li>rotas.js</li>
                    <li>servidor.js</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <span wm-folder>frontend</span>
        <ul>
            <li>
                <span wm-folder>public</span>
                <ul>
                    <li>app.css</li>
                    <li>app.js</li>
                    <li>index.html</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

<link rel="stylesheet" href="http://files.cod3r.com.br/curso-web/tree.css">
<script>
    document.querySelectorAll('[wm-folder]').forEach(folder => {
        folder.onclick = function(e) {
            const ul = folder.nextElementSibling
            const d = ul.style.display
            ul.style.display = d === 'none' ? 'block' : 'none'
        }
    })
</script>

Listas Aninhadas 1 em HTML

<h1>Projeto</h1>

<ul class="tree"><!--class vai apontar para árvore-->
    <li>
        backend
        <ul>
            <li>
                app
                <ul>
                    <li>produto.js</li>
                    <li>usuario.js</li>
                    <li>venda.js</li>

                </ul>
            </li>
            <li>config</li>
            <ul>
                <li>banco.js</li>
                <li>rotas.js</li>
                <li>servidor.js</li>
            </ul>
        </ul>
    </li>
    <!--novo item da lista mais externa, vai ter 2 pastas-->
    <li>
        frontend
        <ul>
            <li>
                public
                <ul>
                    <li>app.css</li>
                    <li>app.js</li>
                    <li>index.html</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Palavras chave:

Lista anidada de JavaScript

JavaScript Nested List

ଜାଭାସ୍କ୍ରିପ୍ଟ ନେଷ୍ଟେଡ୍ ତାଲିକା |

JavaScriptネストリスト

JavaScript Nested List

Lista Nidificata JavaScript

Список вкладених JavaScript

Вложенный список JavaScript

רשימת קינון JavaScript

Lista em HTML

<h1>Lista de alunos</h1>

<!--Lista ordenada-->
<ol>
    <li>Bia</li>
    <li>Pedro</li>
    <li>Ana</li>
    <li>João</li>
</ol>

<!--Lista não ordenada-->
<h2>Lista de Compras</h2>
<ul>
    <li>Queijo</li>
    <li>Leite</li>
    <li>Arroz</li>
    <li>Pão</li>
</ul>

<!--Lista de definição-->
<h2>Principais termos do glossário de Could Computing</h2>
<dl>
    <dt>BaaS</dt>
    <dd>Backend Como serviço </dd>
    <dt>IaaS</dt>
    <dd>Infraestrutura Como Serviço</dd>
    <dt>PaaS</dt>
    <dd>Plataforma como serviço</dd>
    <dt>SSaS</dt>
    <dd>Software como serviço</dd>
    <dt>AEns</dt>
    <dd>Avant Engenharia e serviços</dd>
</dl>

09/08/2020

1° programa em html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1 programa</title>
    <!--stilo-->
    <style>
        h1{
            font-family: Arial;
            font-size: 30pt;
            color: blue;
            text-shadow: 3px 2px 1px orangered;
        }
    </style>
</head>
<body>
    <h1>Olá Mundo</h1><!--Titulo 1-->
    <h2>Me livrando da maldição</h2><!--subtitulo de h1-->
</body>
</html>

05/08/2020

Async/Await 01 em JavaScript

function esperarPor(tempo = 2000) {
    return new Promise(function (resolve){
        setTimeout(() => resolve(), tempo )
    })
}

esperarPor(2000)
    .then(() => console.log('Excecutando promise 1...'))
    .then(esperarPor)
    .then(() => console.log('Excecutando promise 2...'))
    .then(esperarPor)
    .then(() => console.log('Excecutando promise 3...'))

    //Assíncrono
//Substitindo o código acima, método 1
async function executar() {
    esperarPor(1500)
    console.log('Async/Await 1...');

    esperarPor(1500)
    console.log('Async/Await 2...');

    esperarPor(1500)
    console.log('Async/Await 3...');
}

executar()
console.log();

//Método 2, código síncrono
async function executarNovamente(){
    await esperarPor(1500);
    console.log('Async/Await 1... método 2 ');

    await esperarPor(1500)
    console.log('Async/Await 2... método 2');

    await esperarPor(1500)
    console.log('Async/Await 3... método 2');
}

//executarNovamente()

Promise 05 em JavaScript

function funcionarOuNao(valor, chanceErro) {

    return new Promise ((resolve , PromiseRejectionEvent) =>{
        try{
            con.log('temp')
            if(Math.random() < chanceErro){
                reject('Ocorreu um ERRO !')
            }else{
                resolve(valor)
            }
        }catch(e){
            reject(e)
        }
    })
}

//gerando uma promessa que não foi tratada
funcionarOuNao('Testando...', 0.9)
    .then(v => console.log(`Valor: ${v}`),
        err => console.log(`Erro esp.: ${err}`))
    
    //depois do cath não tem mais informação
    .catch(err => console.log(`Erro: ${err}`))//caso ocorra erro
    .then(() => console.log('Fim !'))

04/08/2020

Exemplo 1 com iframe em HTML

Objetivo: Inserir vários quadro usando iframe em HTML

Código:

<iframe src="/default.asp" width="200" height="200" style="border:1px solid black;"></iframe>&nbsp;
<iframe src="/default.asp" width="200" height= 200" style="border: 1px solid black;"></iframe>

<br>
<iframe src="/default.asp" width="200" height="200" style="border: 1px solid black;"></iframe>

<br><br>
<iframe src="/default.asp" width="200" height="200" style="border: 1px solid black;"></iframe>

Saída gerada

Interrupção com PIC 16F628A

Software: proteus 2010

Código feito em CCS C Compiler

#include <16f628a.h>

#fuses intrc_io, nowdt, mclr//fuses bits

#use delay(clock = 4MHz)

#use fast_io(a)//diretiva otimiza o programa e evita mudanças no decorrer

#use fast_io(b)

#INT_RB // interrupucao

//função de interrupção

void RB(void){

output_high(pin_a0);

delay_ms(500);

output_low(pin_a0);

delay_ms(500);

}

void main(void){

//tris_a tudo como saída

set_tris_a(0x00);

set_tris_b(0xf0);//metade como entrada e metade como saída

output_b(0x00);//para todo port

//senão colocar enable, nenhum tipo de interrupção irá acontecer

ENABLE_INTERRUPTS(INT_RB);//habilitando a interrupção RB

ENABLE_INTERRUPTS(GLOBAL);//HABILITANDO A INTERRUPÇÃO GERAL

while(true){

output_b(0xff);//vai colocar tudo como saída

delay_ms(500);

output_b(0x00);//

delay_ms(500);

}

Memória EPROM 3 com PIC 18F4550

Objetivo: Gravar na memória EPROM com a interrupção

Código feito em CCS C Compiler

#include <18f4550.h>

#device ADC=8

#FUSES xt, put, nowdt, nomclr//fuses bits

#use delay(crystal = 20M)

#use fast_io(a)//ports com as diretivas

#use fast_io(b)

#use fast_io(c)

#use fast_io(d)

#include <lcd.c>

#INT_EXT//interrupção externa gerada pelo pino a0

//função

void senha(void){

write_eeprom(1,2);//escreve no endereço 1 o número 2

write_eeprom(2,0);

write_eeprom(3,1);

write_eeprom(4,4);

output_b(0x00);//vai externa no port b tudo 0

delay_ms(1000);

output_high(pin_e0);//vai externar no pino e0 o nível logico alto

delay_ms(2000);

output_low(pin_e0);//vai externar em nível baixo nesse pino

delay_ms(2000);

output_low(pin_e0);

delay_ms(1000);

lcd_putc(" \f SENHA GRAVADA\n COM SUCESSO");

delay_ms(1000);

}

void main(void){

set_tris_a(0xff);//port como entrada

set_tris_b(0x01);//port como saída

output_b(0x00);//externando o port b como 0

enable_interrupts(int_ext);//habilitando a interrupção externa

enable_interrupts(global);//habilitando a chave geral

lcd_init();

lcd_putc(" FAVOR GRAVAR\nSENHA:");

while(true){

output_b(0xff);//externando tudo 1

delay_ms(500);

output_b(0x00);

delay_ms(500);

//quando houver 1 interrupção, irá chamar a função

}

Memória EPROM 2 com PIC 16F877A

Código feito em CCS C Compiller

#include <16f877a.h>

#device ADC=8

#FUSES NOWDT

#FUSES NOBROWNOUT

#FUSES NOLVP

#use delay(crystal = 20M)

#use fast_io(a)

#use fast_io(b)

#INT_EEPROM

//função

void eprom(void){

output_high(pin_b0);

delay_ms(500);

output_low(pin_b0);

delay_ms(500);

}

void main(void){

set_tris_a(0xff);//port como entrada

set_tris_b(0x00);//port como saída

output_b(0x00);

enable_interrupts(GLOBAL);

enable_interrupts(INT_EEPROM);

write_eeprom(1, 0xff);//escrevendo no endereço e atribuindo ao endereço ff

write_eeprom(2, 0x00);

while(true){

output_b(read_eeprom(1));//externando o port b no endereço 1

delay_ms(500);

output_b(read_eeprom(2));//externando o port b no endereço 2

delay_ms(500);

write_eeprom(1, 0xff);

write_eeprom(2, 0x00);

}

Iframe em HTML

Código:

Memória EPROM 1 com PIC 16F84A

Código feito em CCS C Compiler

#include <16f84a.h>

//xt= oscilador crystal , nowdt= desabilitando

#fuses xt, nowdt, put//put= habilitando o temporizador inicial

#use delay(clock = 20MHz)

#use fast_io(a)

#use fast_io(b)

void main(void){

set_tris_a(0xff);//port como entrada

set_tris_b(0x00);//port como saída

output_b(0x00);//

//tratamento de dados

write_eeprom(1, 0xff);//colocando no endereco 1 o valor ff em decimal

write_eeprom(2, 0x00);//escrevendo no endereco 2 tudo 0

while(1){

output_b(read_eeprom(1));//colocando como argumento para ler o endereco 1 da memória eeprom

delay_ms(500);

output_b(read_eeprom(2));//colocando como argumento para ler o endereco 2 da memória eeprom

delay_ms(500);

}

03/08/2020

Desafio Promise 1 em JavaScript

Objetivo: Encapsule dentro de uma promise a chamada do File System

const fs = require('fs')
const path = require('path')
const { resolve } = require('path')

function lerArquivo(caminho) {
    return new Promise(resolve =>{
        fs.readFile(caminho, function(_, conteudo) {//caminho como parâmetro
            resolve(conteudo.toString())//converte o conteúdo no formato String
        })
        console.log('Depois de ler');
    })
}

const caminho = path.join(__dirname, 'dados.txt')

lerArquivo(caminho)
    .then(conteudo => console.log(conteudo))
    //.then(conteudo => conteudo.split('\n'))
    //.then(linhas => console.log(linhas[1]))
    //.then(linhas => console.log(linhas.length));
    

Arquivo: dados.txt

Canal Analógico 4 com indicador de temperatura no PIC 16F877A

Código feito em CCS C Compiler

#include <16f877a.h>

#device ADC = 8 //RESOLUÇÃO DE 8 BITS

#use delay(clock= 20MHz)

#use fast_io(a)

#use fast_io(b)

#use fast_io(c)

#use fast_io(d)

#include <lcd.c>

void main(void){

float data, temperatura, tensao;//bits

SETUP_ADC_PORTS(AN0);

SETUP_ADC(ADC_CLOCK_INTERNAL);//SINAL INTERNO PARA CONVERSÃO

SET_ADC_CHANNEL(0);//SETANDO CANAL EM 0

lcd_init();

while(true){

data = (float) (read_adc());//converte o valor analogico

delay_ms(10);

tensao = (5000.0 / 1023) * data;//5000= tensao , 1023= canal analogico

temperatura = (tensao) / 10;//10= milivolts que é do LM35

//No datasheet a cada 10 milivolts corresponte a 2 graus

printf(lcd_putc,"\f TEMPERATURA: \n %1f Graus ",temperatura);

delay_ms(500);

}

Palavras chave:

Analog Channel 4 cu indicator de temperatură pe PIC 16F877A

Analog Channel 4 yokhala ndi chizindikiro cha kutentha pa PIC 16F877A

Analog Channel 4 พร้อมตัวบ่งชี้อุณหภูมิบน PIC 16F877A

ערוץ 4 אנלוגי עם מחוון טמפרטורה ב- PIC 16F877A

Kanał analogowy 4 ze wskaźnikiem temperatury na PIC 16F877A

ანალოგური არხი 4 ტემპერატურის მაჩვენებლით PIC 16F877A

Analog Channel 4 with temperature indicator on PIC 16F877A

Аналоговый канал 4 с индикатором температуры на PIC 16F877A

Аналогов канал 4 с индикатор за температура на PIC 16F877A

Canal analògic 4 amb indicador de temperatura a PIC 16F877A

02/08/2020

Canal Analógico 3 com PIC 16F877A

Objetivo: Exibir em um display LCD o valor real da tensão aplicada

Código feito em CCS C Compiler:

#include <16f877a.h>

#device ADC = 8 //RESOLUÇÃO DE 8 BITS

#use delay(clock= 4MHz)

#use fast_io(a)

#use fast_io(b)

#use fast_io(c)

#use fast_io(d)

#include <lcd.c>

void main(void){

float data, tensao;//bits

SETUP_ADC_PORTS(AN0);

SETUP_ADC(ADC_CLOCK_INTERNAL);//SINAL INTERNO PARA CONVERSÃO

SET_ADC_CHANNEL(0);//SETANDO CANAL EM 0

lcd_init();

while(true){

data = (float) (read_adc());//converte o valor analogico

delay_ms(50);

tensao = (5.0 / 255.0) * (data);//valor real da tensão

printf(lcd_putc,"\f TENSAO = %f ",tensao);

delay_ms(1000);

}

Canal Analógico 2 com PIC 18F4550

Código feito em CCS C Compiler

#include <18f4550.h>

#device ADC = 10//resolução de 10 bits

//#device ADC = 8 //RESOLUÇÃO DE 8 BITS

#fuses INTRC_IO, NOWDT, NOMCLR

#use delay(clock= 4MHz)

#use fast_io(a)

#use fast_io(b)

#use fast_io(c)

#include <lcd.c>

void main(){

long data;//bits

SETUP_ADC_PORTS(AN0_TO_AN1|VSS_VREF);//CANAL 1 | TENSÃO EXTERNA DE REFERÊNCIA

SETUP_ADC(ADC_CLOCK_INTERNAL);//SINAL INTERNO PARA CONVERSÃO

SET_ADC_CHANNEL(1);//SETANDO CANAL EM 1

lcd_init();

while(true){

data = read_adc();//converte o valor analogico em binario

delay_ms(50);

printf(lcd_putc,"\f VALOR = %Lu ",data);

delay_ms(500);

}

Promise 03 em JavaScript

//Objetivo: gerar numeros entre
function gerarNumerosEnte(min, max) {
    if(min > max){
        [max, min] = [min, max]
        const [x, y] = a
    }

    //valor aleatório
    return new Promise(resolve => {
        const fator = max - min + 1
        const aleatorio = parseInt(Math.random() * fator) +min
        resolve(aleatorio)
    })
}

gerarNumerosEnte(5, 20).then(console.log)

gerarNumerosEnte(7, 40)
    //composição de função
    .then(num => num * 10)//número multiplicado por 10
    .then(numX10 => `O número gerado foi ${numX10}`)
    .then(console.log)//imprimindo o valor

Pesquisar neste blog

12/08/2020

Renderização condicional múltiplas com Administrador em HTML

Renderização condicional múltipla em HTML

Renderização condicional com HTML

11/08/2020

2° programa em HTML

10/08/2020

Protocolo RS232 com PIC 16F628A

Listas Aninhadas 2 em HTML

Listas Aninhadas 1 em HTML

Lista em HTML

09/08/2020

1° programa em html

05/08/2020

Async/Await 01 em JavaScript

Promise 05 em JavaScript

04/08/2020

Exemplo 1 com iframe em HTML

Interrupção com PIC 16F628A

Memória EPROM 3 com PIC 18F4550

Memória EPROM 2 com PIC 16F877A

Iframe em HTML

Memória EPROM 1 com PIC 16F84A

03/08/2020

Desafio Promise 1 em JavaScript

Canal Analógico 4 com indicador de temperatura no PIC 16F877A

02/08/2020

Canal Analógico 3 com PIC 16F877A

Canal Analógico 2 com PIC 18F4550

Promise 03 em JavaScript

Total de visualizações de página

Marcadores

Translate