Pesquisar neste blog

15/11/2020

Acessando os atributos #01 em HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8'>
    <title>Acessando Atributos #01</title>
    <link rel='stylesheet' href='css/estilo.css'>
</head>

<body class='conteudo exercicio'>
    <div>
        <a href='https://www.cod3r.com.br'>Cod3r</a>
    </div>
    <div id='primeiro'>
        <img src='http://files.cod3r.com.br/curso-web/logo-estreita.png' alt='logo'>
    </div>
    <script>
        const img = document.querySelector('img')
        //acessando os atributos de img através de uma string
        console.log('getAttribute'img.getAttribute('src'))
        //acessando os atributos através do nome 
        console.log('src'img.src)
        console.log('["src"]'img['src'])//
        console.log('alt'img.alt)

        console.log('Elemento "img"...............')
        console.log('NodeType'img.nodeType)
        console.log('NodeName'img.nodeName)

        const src = img.getAttributeNode('src')
        console.log('Atributo "src"...............')
        console.log('NodeType'src.nodeType)
        console.log('NodeName'src.nodeName)
        console.log('NodeValue'src.nodeValue)

        const link = document.querySelector('a')
        console.log('Elemento "a"...............')
        console.log('href'link.href)
        console.log('firstChild.nodeType'link.firstChild.nodeType)
        link.firstChild.nodeValue = 'Novo Texto'
    </script>
</body>

</html>

Saída gerada




Sintetizador de voz com Macro em Excel VBA

Excel 2010



























Private Sub UserForm_Activate()

Dim hora As String
Dim qtprodutosnv As Long

qtprodutosnv = WorksheetFunction.CountIf(Plan1.Columns(3), "NÃO")

'Irá capturar a data atual
hora = Format(Now, "hh:mm")

'sintetizador de voz
Application.Speech.Speak ("OLÁ MUNDO !")

'Avisa a hora atual em voz
Application.Speech.Speak ("AGORA SÃO " & hora)

'Emite a voz dizendo a quantidade de produtos para vender
Application.Speech.Speak ("VOCE POSSUI " & qtprodutosnv & "PRODUTOS PARA VENDER EM SEU ESTOQUE !")

'fechando o formulário


End Sub

Mensagem com box em Excel VBA

Excel 2010























Sub testes()

MsgBox "OPERAÇÃO REALIZADA COM SUCESSO !", vbInformation
MsgBox "ERRO !", vbCritical
MsgBox "ALERTA !", vbExclamation

'2° parte superior da caixa
MsgBox "CUIDADO !", vbExclamation, "SISTEMA DE GESTÃO 4.0"

End Sub

Loop para remover formulas no Excel VBA

Excel 2010


















Sub retirar()

Plan1.Range("E2:F31").Select

For Each x In Selection
    x.Value = x.Value
Next

MsgBox "OPERAÇÃO REALIZADA !"

End Sub

Impressão, atalhos, ocultar e esconder planilha no Excel VBA

Excel 2016


























Sub imprimir()

'imprimindo os conteúdos da planilha 3
Plan3.PrintOut

MsgBox "PLANILHAS IMPRIMIDAS COM SUCESSO !"

End Sub


'Método para ocultar
Sub ocultar()

Plan1.Visible = False

End Sub

'Método para exibir
Sub desocultar()

Plan1.Visible = True

End Sub

14/11/2020

Estrutura Condicional em Excel VBA

Excel 2016


























Sub relatorio()

Dim vtotal As Long
Dim ltotal As Long

For contlinhas = 2 To 20

vtotal = Cells(contlinhas, 2).Value
ltotal = Cells(contlinhas, 3).Value

Cells(contlinhas, 4).Value = vtotal - ltotal

Next

For contlinhas = 2 To 20

vtotal = Cells(contlinhas, 2).Value
ltotal = Cells(contlinhas, 3).Value

Cells(contlinhas, 4).Value = vtotal - ltotal
Cells(contlinhas, 5).Value = ltotal / vtotal

If ltotal / vtotal > 0.55 Then

Cells(contlinhas, 6).Value = "SIM"

Else

Cells(contlinhas, 6).Value = "NÃO"

End If
Next

End Sub

13/11/2020

Estrutura de repetição FOR em Excel VBA

Excel 2010



























Sub relatorio()

Dim vtotal As Long
Dim ltotal As Long

For contlinhas = 2 To 20

vtotal = Cells(contlinhas, 2).Value
ltotal = Cells(contlinhas, 3).Value

Cells(contlinhas, 4).Value = vtotal - ltotal

Next

For contlinhas = 2 To 20

vtotal = Cells(contlinhas, 2).Value
ltotal = Cells(contlinhas, 3).Value

Cells(contlinhas, 4).Value = vtotal - ltotal
Cells(contlinhas, 5).Value = ltotal / vtotal

Next

End Sub

10/11/2020

Variáveis em Excel VBA

Excel 2010




Sub testarVariaveis()

Dim nome As String
Dim idade As Integer

nome = "Henrique"
idade = 34

MsgBox ("seu nome é: " & nome & " Sua idade = " & idade & " anos")

End Sub

05/11/2020

Método End em Excel VBA




























Private Sub Worksheet_SelectionChange(ByVal Target As Range)

ActiveCell.End(xlDown).Select

End Sub

________//________

Private Sub Worksheet_SelectionChange(ByVal Target As Range)

ActiveCell.End(xlUp).Select

End Sub

04/11/2020

Método Offset em Excel VBA
































Private Sub Worksheet_SelectionChange(ByVal Target As Range)

ActiveCell.Offset(1, 0).Value = "Abaixo"

ActiveCell.Offset(-2, 1).Value = "Abaixo"

End Sub

03/11/2020

Selecionar elementos em HTML #02

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Selecionar Elementos #02</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body class="conteudo exercicio">
    <div id="primeiro">#primeiro</div>
    <div wb-attrib>Segundo</div>
    <div class="ultimo terceiro"><span wb-attrib>.terceiro .ultimo</span></div>
    <script>              
        document.querySelector('#primeiro').classList.add('destaque')//esperar selecionar um seletor
        //selecionar vários
        const selecionar = seletor => 
            document.querySelectorAll(seletor).forEach(e => e.classList.add('destaque'))//retorna uma classe de lista

            //função para deselecinar
            const descelecionar = seletor => 
                document.querySelectorAll(seletor).forEach(e => e.classList.remove('destaque'))

            selecionar('div')//selecionar tudo que tem div
            
            descelecionar('*')//deseleciona tudo o que foi selecionado
            selecionar('.terceiro.ultimo')//seleciona esse elemento
            descelecionar('*')
            selecionar(':not(#primeiro)')//tudo que não e primeiro será selecionado

            descelecionar('*')
            selecionar(':nth-child(1)')//seleciona o primeiro filho de algum elemento

            descelecionar('*')
            selecionar('div:nth-of-type(1)')//seleciona o primeiro elemento do tipo div
    </script>
</body>
</html>

















Eventos da planilha com Excel VBA #01

Excel 2010

























Private Sub Worksheet_SelectionChange(ByVal Target As Range)

ActiveCell.Value = "ALTERADO"

End Sub

Excel 2010



























Private Sub Worksheet_SelectionChange(ByVal Target As Range)

MsgBox Target.Address
MsgBox Target.Row
MsgBox Target.Column

End Sub

Funções na planilha com Excel VBA #02

Excel 2010



























Sub total()

Range("f3").Value = WorksheetFunction.CountA(Plan1.Columns("a")) - 1
Range("g3").Value = WorksheetFunction.Sum(Plan1.Columns("b"))
Range("h3").Value = WorksheetFunction.Sum(Plan1.Columns("c"))

End Sub

01/11/2020

Selecionar elementos em HTML #01

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Selecionar Elementos #01</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body class="conteudo exercicio">
    <div id="primeiro">#primeiro</div>
    <div>Segundo</div>
    <div class="terceiro ultimo">.terceiro .ultimo</div>
    <script>
        document.getElementById('primeiro').classList.add('destaque');/*passa um id*/
    
        const divs = document.getElementsByTagName('div')//vai pegar 1 único elemento div

        Array.from(divs).forEach(e => e.classList.remove('destaque'))
        // tranforma um HTML em 1 array de coleção
        const divsArray = [...divs]
        divsArray.forEach(e => e.classList.add('destaque'))

        const ultimosElementos = document.getElementsByClassName('ultimo');
        // 
        for(let e of ultimosElementos){
            e.classList.remove('destaque')//remove destaque
        }
    </script>
</body>
</html>



Gerador de código































(a + b) * (c + d) -e

MÉTODO 1

1- Movido a em R0, e o resultado é armazenado em R0
2- Adicionado b a R0 (como R0 contém a) e o resultado é armazenado em R0
3- Agora vamos armazenar R0 (a + b) em T1 e R0 se tornará livre
4- Aqui nós movemos c em R0
5- Vamos adicionar d a R0 (como R0 agora contém c) e o resultado é armazenado em Ro
6- Agora multiplicamos T1 (a + b) por Ro (agora contém c + d) e o resultado é armazenado em Ro
7- Aqui nós nutrimos e de Ro
8- O resultado é armazenado em T4 de R0

MÉTODO 2

1- Movido a em R0, e o resultado é armazenado em R0
2- Adicionado b a R0 (como R0 contém a) e o resultado é armazenado em R0
3- Aqui nós movemos c em R1
4- Vamos adicionar d a R1 (como R1 agora contém c) e o resultado é armazenado em Ro
5- Agora multiplicamos Ro (a + b) por R1 (já que Ro agora contém c + d) e o resultado é armazenado em R0 (Ro + Ro)
6- Aqui subtraímos e de R1
7- O resultado é armazenado em T4 de R1

CSS com grid em HTML 03

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS Grid #03</title>
    <link rel="stylesheet" href="css/tag.css">
    <style>
        *{
            padding0;
            margin0;/*margem*/
        }

        header{
            grid-area: cabecalho;
        }

        nav{
            grid-area: navegacao;
        }

        main{
            grid-area: conteudo;
        }

        footer{
            grid-area: rodape;
        }

        body{
            displaygrid;
            min-height100vh;/*ocupa a altura iteira*/
            grid-template-columns300px 1fr;/* 1° coluna vai ser 300px e a 2° vai ocupar o espaço inteiro da tela*/
            grid-template-rows100px 1fr 100px;
            /*organização dos elementos na tela*/
            grid-template-areas:
            'cabecalho cabecalho'
            'navegacao conteudo'
            'rodape rodape'
            ;
        }
        /*  */
        @media(max-width700px){
            body{
                grid-template-columns1fr;
                grid-template-rows80px 1fr 100px;/*1fr= 1 frame, 100px= o máximo possível da tela*/
                grid-template-areas:
                
                'navegacao'
                'conteudo'
                'rodape';
            }

            header{/* cabecalho*/
                displaynone;
            }
        }

        header{
            displaynone;
        }
    </style>
</head>

<body>
    <main class="tag">CONTEÚDO</main>
    <header class="tag">CABEÇALHO</header>
    <footer class="tag">RODAPÉ</footer>
    <nav class="tag">NAVEGAÇÃO</nav>

    <script src="js/tag.js"></script>
</body>

</html>


Software: Visual Studio Code


CSS com grid em HTML 02

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS Grid #02</title>
    <style>
        html,
        body {
            margin20px;
            heightcalc(100% - 40px);/*calcula a altura para 100%*/
            background-colorlightgray;/*cor de fundo cinza*/
        }
        
        div {
            displayflex;
            align-itemscenter;
            justify-contentcenter;/*quando a div aumentar ela ficará no meio*/
            font-size30px;
            bordersolid 5px dodgerblue;/*borda azul*/
            background#fff;
        }

        body{
            displaygrid;/*ocupa a tela inteira*/
            /* nome das linhas 'só irá aparecer o nome das linhas no navegador FireFox' */
            /*repete 3 colunas e 3 linhas com 1 fragmento*/           
            grid-template-columns
            [linha1] 1fr
            [metade-1 meio-1]
            1fr [metade-2 meio2]
            1fr [fim];
            grid-template-rowsrepeat(31fr);
            
            grid-column-gap20px;/*espaço de 20px no eixo da coluna*/
            grid-row-gap20px;/*espaço de 20px no eixo da linha*/
            grid-gap50px 10px;/*espaço de 50px na linha e 10px na coluna*/
            grid-gap10px;/*espaço geral para linha e coluna de 10px*/
        }

        .d1{
            grid-column-start: metade-2;
            grid-column-end: fim;
            grid-column: meio-1 / fim;/*entre meio 1 e o final*/
            grid-area1 / meio-1 / span 3 / fim;
        }
    </style>
</head>

<body>
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
</body>

</html>

Software: Visual Studio Code


27/10/2020

CSS com grid em HTML 01

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>CSS Grid #01</title>
    <style>
        /* https://caniuse.com/#feat=css-grid */
        
        html,
        body {
            margin20px;
            heightcalc(100% - 40px);/*largura em 100% subtraido com a margem*/
            background-colorlightgray;
        }
        
        div {
            displayflex;
            align-itemscenter;
            justify-contentcenter;
            font-size30px;
            bordersolid 5px dodgerblue;
            background#fff;
        }

        
        body {
            displaygrid;/*linhas e colunas ativamente*/
            grid-template-columns50% 50%;
            grid-template-columnsrepeat(48.33% 8.33% 8.33%);/*repetir determinados valores*/
            grid-template-columnsrepeat(48.33%);/*4 colunas repetidas de 8.33*/
            grid-template-columnsrepeat(11100px)100px;
            grid-template-columns200px 20% 1fr;/*3 colunas, 1° coluna 100px, 2° 20%, 3° vai pegar 1 fragmento que está sobrando*/
            grid-template-columns3fr 6fr 3fr;
            grid-template-rows50% 25% 12.5% 12.5%;
            grid-template-rows100px 1fr;
            grid-template-rows100px auto;
        }

        .d8{
            grid-column-start2;/*inicia na coluna 2*/
            grid-column-end4;/*termina na linha 4 das colunas*/
            grid-column-end: span 2;
            grid-row-start3;/*inicia na linha 3*/
            grid-row-end5;
            grid-row-end: span 2;
        }

        .d10.d11{
            /* podem se sobrepor */
            grid-column-start1;
            grid-column-start3;
            grid-row-start5;
            grid-row-end: span 1;
        }

        .d10{
            z-index17;/*Profundidade dos elementos, fica na frente de quem*/

        }
    </style>
</head>

<body>
    <div class="d1">1</div>
    <div class="d2">2</div>
    <div class="d3">3</div>
    <div class="d4">4</div>
    <div class="d5">5</div>
    <div class="d6">6</div>
    <div class="d7">7</div>
    <div class="d8">8</div>
    <div class="d9">9</div>
    <div class="d10">10</div>
    <div class="d11">11</div>
    <div class="d12">12</div>
</body>

</html>

Saída gerada




10/10/2020

Menu com HTML/CSS

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Desafio Menu</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        body {
            margin0;
            font-family'Oswald'sans-serif;
            background-colorlightgray;
        }
        
        .cabecalho {
            background#333;
            color#fff;
            border-bottomsolid 5px #4faddb;
            height80px;
        }
        
        .logo img {
            height50px;
        }
        
        .menu ul {
            list-stylenone;
            margin0;
            padding0;
        }
        
        .cabecalho a {
            text-decorationnone;
            color#eee;
            font-size1.3em;
            padding10px 15px;
        }
        
        .menu a:hover {
            background-color#4faddb;
            color#000;
        }
        
        .cabecalho .botao {
            border-radius30px;
            padding10px 25px;
            margin-right10px;
        }
        
        .destaque {
            background#f50a31;
            color#fff;
        }
        /* ==================== */
        /* Solução com Flex Box */
        /* ==================== */
        .cabecalho {
            displayflex;
            align-itemscenter;
            justify-contentspace-between;/*espaço*/
        }

        .menu{
            flex-grow10;
        }
        
        .menu ul{
            displayflex;
            /* justify-content: space-around; */
        }

        .menu li{
            margin0px 10px;/*margem 0px na vertical e 10pixel na horizontal*/
        }

    </style>
</head>

<body>
    <header class="cabecalho">
        <div class="logo">
            <a href="#inicio">
                <img src="http://files.cod3r.com.br/curso-web/logo.png" alt="Logo" />
            </a>
        </div>
        <nav class="menu">
            <ul>
                <li>
                    <a href="#inicio">Início</a>
                </li>
                <li>
                    <a href="#cursos">Cursos</a>
                </li>
                <li>
                    <a href="#sobre">Sobre</a>
                </li>
                <li>
                    <a href="#contato">Contato</a>
                </li>
            </ul>
        </nav>
        <aside class="autenticacao">
            <a href="#login">Login</a>
            <a href="#registar" class="botao destaque">Registrar</a>
        </aside>
    </header>
</body>

</html>