JAVASCRIPT MANIPULAÇÃO DO DOM E EVENTOS

https://academy.especializati.com.br/curso/javascript-manipulacao-dom-eventos

APRENDA EXPLORAR AO MÁXIMOS OS RECURSOS NATIVOS DO JAVASCRIPT PARA MANIPULAR DE FORMA MUITO SIMPLES OS RECURSOS DO DOM DE UMA PÁGINA HTML, E AINDA TRABALHE COM OS EVENTOS JS.

Índice

Introdução ao DOM
DOM na Prática
Formulários
DOM CSS
Events

1 - Introdução ao DOM

01 - O que é DOM

02 - Preparando o Projeto e document JavaScript

console.log(document.title = "Novo título da página");
console.log(document);

Voltar ao Índice

2 - DOM na Prática

01 - document.write JavaScript

document.write('<h1>Impressão Via JS</h1>');
document.write('<p>Impressão Via JS</p>');

02 - getElementById JavaScript

setTimeout(function () {
    //document.getElementById('parag').innerHTML = "SOU O TEXTO DO JS";
    document.getElementById('parag').innerText  = "SOU O TEXTO DO JS";
    document.getElementById('texto2').innerHTML  = "<strong>SOU O TEXTO DO JS</strong>";
}, 3000);

03 - getElementsByName JavaScript

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName

setTimeout(function () {
    console.log(document.getElementsByName("div-name"));
    console.log(document.getElementsByName("div-name")[1].innerText = "Alterando o segundo");

    var nameTag = document.getElementsByName("div-name");
    nameTag[0].innerText = "Ajustando o primeiro name;";

}, 1000);

04 - getElementsByTagName JavaScript

setTimeout(function () {

    var tagsName = document.getElementsByTagName('div');

    tagsName[0].innerHTML = '<h1>add H1</h1>';
    tagsName[1].innerHTML = '<h2>add H2</h2>';

    if (tagsName[2]) {
        tagsName[2].innerHTML = '<h3>add H3</h3>';
    } else {
        console.log("Não exite tag h3")
    }


}, 1000);

05 - getElementsByClassName JavaScript

setTimeout(function () {

   //console.log(document.getElementsByClassName('haga5'))
    document.getElementsByClassName('haga5')[0].innerHTML = "<h5>ALTERADO PELO JS - ClassName</h5>";

}, 1000);

06 - querySelector JavaScript

setTimeout(function () {
    console.log(document.querySelector('div'));
    document.querySelector('div').innerHTML = '<strong>Primeira DIv qUERY sELECTOR</strong>';
}, 1000);

07 - querySelectorAll JavaScript

setTimeout(function () {
    console.log(document.querySelectorAll('div'));
    document.querySelectorAll('div')[1].innerHTML = "<strong>DIv 2 </strong>"
}, 1000);

08 - parentNode JavaScript

setTimeout(function () {
    console.log(document.querySelector('li').parentNode);
    document.querySelector('li').parentNode.setAttribute('style', 'background: red');
}, 1000);

09 - children, firstElementChild, lastElementChild JavaScript

setTimeout(function () {
    console.log(document.querySelector('ul').children); // HTMLCollection(5) [li, li, li, li, li]
    var ul = document.querySelector('ul');
    var li = ul.children;

    li[0].innerHTML = "Alterado pelo JS";

    console.log(ul.firstElementChild);
    console.log(ul.lastElementChild);

}, 1000);

10 - hasAttribute, getAttribute, setAttribute JavaScript

setTimeout(function () {

    console.log(document.getElementById('teste-id'));
    console.log(document.getElementById('teste-id').hasAttribute('id')); // true
    console.log(document.getElementById('teste-id').hasAttribute('class')); // false

    console.log(document.getElementById('teste-id').getAttribute('attr-value')); // false

    document.getElementById('teste-id').setAttribute('style', 'display:none');

}, 1000);

11 - insertAdjacentHTML JavaScript

setTimeout(function () {

    var ul = document.querySelector('ul');
    ul.insertAdjacentHTML('beforebegin', '<hr>');
    ul.insertAdjacentHTML('afterend', '<hr>');
    ul.insertAdjacentHTML('afterbegin', '<li>AFTER BEGIN</li>');
    ul.insertAdjacentHTML('beforeend', '<li>Before END</li>');

}, 1000);

12 - srollTo e scroll (topo e footer) com JavaScript

function footer() {
    var altura = document.body.scrollHeight
    //window.scrollTo(0, altura);
    window.scroll({
        top: altura,
        left: 0,
        behavior: 'smooth'
    });

}
function topo() {
    //window.scrollTo(0, 0);
    window.scroll({
        top: 0,
        left: 0,
        behavior: 'smooth'
    });
}

Voltar ao Índice

3 - Formulários

01 - Criar Formulários HTML5

02 - Capiturar Valores Formulários com JavaScript (text, email, password)

<form action="#" method="post" class="form" onsubmit="return onSubmitFunc()">
        <div class="form-group">
            <label for="nome">Nome</label>
            <input type="text" class="form-control" id="nome" name="name" placeholder="Enter Nome">
            <small id="result_name" class="form-text text-muted"></small>
        </div>

function onSubmitFunc(event) {
    var nome = document.getElementsByName('name')[0].value;
    document.getElementById('result_name').innerText = "Olá " + nome;


    return false;
}

03 - Capiturar Valores Formulários com JavaScript (checkbox, select, radio, textarea)

function onSubmitFunc(event) {
    var nome = document.getElementsByName('name')[0].value;
    document.getElementById('result_name').innerText = "Olá " + nome;


    var state = document.getElementById('inputState').value;
    if (state == '') {
        document.getElementById('result_state').innerHTML = "<strong style='color: red '>Selecione o Estado</strong>"
    }else{
        document.getElementById('result_state').innerText = state;
    }
    console.log(state);

    console.log(document.querySelector('input[name="sexo"]:checked').value);

    console.log(document.getElementById('exampleFormControlTextarea1').value);

    console.log(document.getElementById('exampleInputEmail1').value);
    console.log(document.getElementById('exampleCheck1').checked);

    return false;
}

Voltar ao Índice

4 - DOM CSS

01 - JavaScript Alterar CSS Página

<!doctype html>
<html lang="pt_BR">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
    <title>04-DOM_CSS</title>
</head>
<body>
<h1 id="haga1">Modelo CSS -> JS -> CSS</h1>
<h2 id="haga2">Modelo CSS -> JS -> CSS</h2>
<hr>
<p>Parágrafo</p>
<hr>
<script src="app.js"></script>
</body>
</html>

var bodys = document.body.style;

setTimeout(function () {

    bodys.backgroundColor = "#000";
    bodys.color = "#FFF";
    var titulo = document.getElementById("haga1");
    titulo.style.border  = "2px solid #999";
    titulo.style.padding = "10px";

}, 2000);

02 - Mudar Cor Página Dinâmicamente com JavaScript

<button type="submit" onclick="setBackGround('black')">BLACK</button>
<button type="submit" onclick="setBackGround('red')">RED</button>

var bodys = document.body.style;

function setBackGround(color) {
    bodys.color = "#FFF"
    bodys.backgroundColor = color;
}

03 - Criando um pisca-pisca com JavaScript

var piscaPisca = document.getElementById("haga2");

function pisca() {
    piscaPisca.style.backgroundColor = "red";
    setTimeout(pisca2, 1000);
}

function pisca2() {
    piscaPisca.style.backgroundColor = "blue";
    setTimeout(pisca, 1000);
}

pisca();

Voltar ao Índice

5 - Events

01 - Propagação de Eventos com JavaScript

document.addEventListener("click", eventClick);

function eventClick() {
   alert("clicou");
}

02 - Cancelar a Propagação Padrão de Eventos com JavaScript

<a href="https://josemalcher.net" onclick="changeCor(event, 'yellow')">Link com outra função, alterar COR</a>

function changeCor(event, cor) {
    event = event || window.event; // IE

    if (event.preventDefault()) {
        event.preventDefault();
    }
    if (event.returnValue) {
        event.returnValue;
    }
    document.body.style.background = cor;
    return false;
}

03 - Eventos de Mouse com JavaScript

<ul>
    <li onclick="alert('on click')">ON CLICK</li>
    <li ondblclick="alert('Souble CLICK')">on dbl click</li>
    <li oncontextmenu="alert('OnContextMenu'); return false;">On Context menu </li>
    <li onmousedown="alert('On Mouse Down')">On MOuse Down</li>
    <li onmouseenter="console.log('on mouse Enter')" >On Mouse Enter - Console</li>
    <li onmouseleave="console.log('on mouse Leaver')">On mouse Leaver - console</li>
    <li onmousemove="console.log('Om Mouser Move');">
        Om MOuser Move <p>Paragrafo</p>
    </li>
    <li onmouseover="console.log('Om Mouser OVER');">
        Om MOuser OVER <p>Paragrafo</p>
    </li>
    <li onmouseout="console.log('Om Mouser OUT');">
        Om MOuser OUT <p>Paragrafo</p>
    </li>
    <li onmouseup="console.log('Om Mouser UP');">
        Om MOuser up <p>Paragrafo</p>
    </li>
</ul>

04 - Usando o SweetAlert

https://sweetalert.js.org/

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

swal ( "Oops" ,  "Something went wrong!" ,  "error" )

05 - Eventos de carga no JavaScript

<body onload="loadPage()" onresize="resizePage(event)">

function loadPage() {
    swal("Página carregou com sucesso", '', 'success');

}

function resizePage(event) {
    //console.log(event);
    //console.log(window.innerHeight);
    var largura = window.innerWidth;
    console.log(largura);
    if (largura <= 700) {
        document.body.style.background = "#000";
    }else{
        document.body.style.background = "#fff";
    }
}

06 - Eventos de scroll com JavaScript

<!doctype html>
<html lang="pt_BR">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="style.css">
    <title>05 - Events</title>
</head>
<body>

<header id="header" class="header">
    <h1>Topo</h1>
</header>

<section class="content">
    <h2>conteudo qualquer</h2>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
    <p>Outro texto 1</p>
</section>

<footer>
    <p>Footer</p>
</footer>
<script src="scroll.js"></script>
</body>
</html>

function changeScroll(event) {
    var doc = document.documentElement;
    var top = window.pageYOffset || doc.scrollTo;
    var header = document.getElementById('header');

    if (top >= 200) {
        header.classList.add('top');
    } else {
        header.classList.remove('top');
    }
}

addEventListener('scroll', changeScroll);

07 - Eventos de Teclado com o JavaScript

<input type="text" placeholder="Nome" onkeypress="keyPress(event)">
<input type="text" placeholder="Nome" onkeydown="keyDown(event)">
<input type="text" placeholder="Nome" onkeyup="keyUp(event)">

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="teclado.js"></script>

function keyPress(event) {
    console.log(event);
}

function keyDown(event) {
    console.log(event);
}

function keyUp(event) {
    console.log(event);
}

document.onkeydown = applyKey;

function applyKey(event) {
    console.log(event);

    if (event.ctrlKey && event.keyCode == 85) {
        event = event || window.event // IE
        if (event.preventDefault) event.preventDefault();
        if (event.returnValue) event.returnValue();

        return false;

    }
    swal("Não permitido", "Vericar código Fonte", "error")
}

08 - Eventos de Formulário com JavaScript

<div class="container">
    <form action="#" method="post" class="form" onreset="return false" onsubmit="register(event)">
        <div class="form-group">
            <label for="formGroupExampleInput">Example label - ONBLUR</label>
            <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input" onblur="swal('ONBLUR')">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput2">Example label - ONCHANGE</label>
            <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Example input" onchange="swal('ONCHANGE')">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput3">Example label - ONFOCUS</label>
            <input type="text" class="form-control" id="formGroupExampleInput3" placeholder="Example input" onfocus="swal('ONFOCUS')">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput4">Example label - ONSELECT</label>
            <input type="text" class="form-control" id="formGroupExampleInput4" placeholder="Example input" onselect="swal('ONSELECT')">
        </div>
        <div class="form-group">
            <label for="formGroupExampleInput5">Example label</label>
            <input type="text" class="form-control" id="formGroupExampleInput5" placeholder="Example input">
        </div>
        <button type="reset" class="btn btn-primary">RESETAR FORM</button>
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>

function register(event) {

    event = event || window.event // IE
    if (event.preventDefault) event.preventDefault();
    if (event.returnValue) event.returnValue();

    swal("Usuário cadastrado", "", "success")
    return false;

}

Voltar ao Índice

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
01-Introducao_ao_DOM		01-Introducao_ao_DOM
02-DOM_na_Pratica		02-DOM_na_Pratica
03-Formularios		03-Formularios
04-DOM_CSS		04-DOM_CSS
05-Events		05-Events
.gitignore		.gitignore
README.md		README.md

josemalcher/CARREIRA-JS-JavaScript_Manipulacao_do_DOM_e_Eventos

Folders and files

Latest commit

History

Repository files navigation

JAVASCRIPT MANIPULAÇÃO DO DOM E EVENTOS

01 - O que é DOM

02 - Preparando o Projeto e document JavaScript

01 - document.write JavaScript

02 - getElementById JavaScript

03 - getElementsByName JavaScript

04 - getElementsByTagName JavaScript

05 - getElementsByClassName JavaScript

06 - querySelector JavaScript

07 - querySelectorAll JavaScript

08 - parentNode JavaScript

09 - children, firstElementChild, lastElementChild JavaScript

10 - hasAttribute, getAttribute, setAttribute JavaScript

11 - insertAdjacentHTML JavaScript

12 - srollTo e scroll (topo e footer) com JavaScript

01 - Criar Formulários HTML5

02 - Capiturar Valores Formulários com JavaScript (text, email, password)

03 - Capiturar Valores Formulários com JavaScript (checkbox, select, radio, textarea)

01 - JavaScript Alterar CSS Página

02 - Mudar Cor Página Dinâmicamente com JavaScript

03 - Criando um pisca-pisca com JavaScript

01 - Propagação de Eventos com JavaScript

02 - Cancelar a Propagação Padrão de Eventos com JavaScript

03 - Eventos de Mouse com JavaScript

04 - Usando o SweetAlert

05 - Eventos de carga no JavaScript

06 - Eventos de scroll com JavaScript

07 - Eventos de Teclado com o JavaScript

08 - Eventos de Formulário com JavaScript

About

Resources

Stars

Watchers

Forks

Languages