SW20210326

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>img, figure, figcaption, map, area</title>
</head>
<body>
    <figure>
        <!-- legenda / texto descritivo da figure -->
        <figcaption>3 very important women : Angela Merkel, Gina Haspel, Theresa May</figcaption>
        <img
                usemap="#nameMapAngelaGinaTheresa"
                alt="left to right: Angela Merkel, Gina Haspel, Theresa May"
                width="50%"
                src="./angela_merkel_gina_haspel_theresa_may.jpg"
        >
    </figure>

    <!--
        elemento organizado em áreas que permite fazer corresponder a tais áreas, informações
        um conjunto de áreas
    -->

    <!--
    coordenada (horizontal crescem da esq para a dta, vertical crescem de cima para baixo)
    coordenada (0,0) é o canto superior esquerdo da imagem

    - para shapes "rect" há que fornecer as coordenadas do CSE e do CID
    - para shapes "circ" há que fornecer as coordenadas do centro e do raio

    O mapeamento pode falhar, ou aparecer em coordenada estranhas, se o utilizador
    forçar operações de escala / zoom in / zoom out sobre a imagem
    essa ops podem ser feitas, tipicamente, via keyboard via CTRL+ CTRL-
    e/ou pelo dispositivo apontador, via mouse-wheel+UP mouse-wheel+down
    NÃO FAZER
    para fazer reset ao zoom , fazer CTRL+0 (zero)
    -->

    <hr><!-- quebra semântica -->

    <section>
        <header>
            <h1>Biografias referidas neste documento</h1>
        </header>
        <nav>
            <ul>
                <li><a href="https://en.wikipedia.org/wiki/Angela_Merkel"><mark>Angela Merkel</mark></a></li>
                <li><a href="https://en.wikipedia.org/wiki/Gina_Haspel">Gina Haspel</a></li>
                <li><a href="https://en.wikipedia.org/wiki/Theresa_May">Theresa May</a></li>
            </ul>
        </nav>
    </section>

    <map
        name="nameMapAngelaGinaTheresa"
    >
        <area
            alt="Angela Merkel, german politician who would serve as the chancellor of Germany"
            title="Angela Merkel"
            shape="rect"
            coords="110, 50, 250, 250"
            href="https://en.wikipedia.org/wiki/Angela_Merkel"
        >
        <area
            alt="Gina Haspel, future Director of CIA"
            title="Gina Haspel"
            shape="circle"
            coords="370, 160, 120"
            href="https://en.wikipedia.org/wiki/Gina_Haspel"
        >
        <area
            alt="Theresa May, future UK prime-minister"
            title="Theresa May"
            shape="poly"
            coords="515, 30, 670, 30, 670, 220, 515, 220"
            href="https://en.wikipedia.org/wiki/Theresa_May"
        >
    </map>

    <hr>

    <section><!-- um doc pode ter várias section e vários article -->
        <article><!-- article pode ter várias sections, também -->
            <header>
                <h1>Angela Merkel</h1>
                <h2>Chancellor of Germany</h2>
                <h3>Still in this day, 2021-03-26</h3>
            </header>

            <section>
                <article>
                    <!-- infância -->
                    <p>Bla bla bla.</p>
                </article>
            </section>

            <section>
                <!-- primeiros anos políticos -->
            </section>
        </article>

        <hr>
        <article></article>

        <hr>
        <article></article>
    </section>

</body>
</html>

*********

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Introdução ao JS</title>
</head>
<body>
<!-- -->
    <script>
        //single line

        /*
        JS = linguagem "fracamente tipificada" => as entidades têm SEMPRE um tipo, mas esse tipo pode mudar
        Java = linguagem "fortemente tipificada" => as entidades têm SEMPRE um tipo, que nunca pode mudar

        3 formas de entidade diferentes = const , var , function

        procedimental
        orientada a objetos = por prototipagem
         */

        const PI = 3.1415; //fim de instrução (operação de atribuição) simples
        var i= undefined; //declaração de um identificador de nome i
        ;
        ; //notação do camelo / camel-notation para identificadores
        //hungarian postfix notation
        ;
        ; //instrução vazia "NOP" = No Operation
        var tipoDoPI = typeof (PI);
        var tipoDoI = typeof (i);
        var tipo_do_i = typeof(i); //operando-esquerdo ; operador (binário = 2 operandos = aridade 2) ; operando-direito
        var soma = 2+3; //a sintaxe / a notação + faz de operador aritmético de soma
        //var soma = /* n-ária */ +(1 2 3 4 5 6); //em LISP

        var fraseParaPI = "O tipo do identificador PI é "+tipoDoPI+"<br>";
        var fraseParaI="O tipo do identificador i é "+tipoDoI+"<br>"; // + operador concatenação
        document.write (fraseParaPI);
        document.write (fraseParaI);

        //undefined = {undefined}
        // boolean = {true, false}
        // number = {23.0, 1.2}
        // int 16 bits 2^16 = 65536 = {2, 65537} = {-32768, 32767} LISP
        document.write ("<h1>Tipos de dados nativos em JS</h1>");
        var souUmUndefined;
        var tipoDeSouUmUndefined = typeof(souUmUndefined);

        var souUmNumberInteiro = 3;
        var tipoDeSouUmNumberInteiro = typeof(souUmNumberInteiro);

        var souUmNumberReal = 3.3;
        var tipoDeSouUmNumberReal = typeof(souUmNumberReal);

        var souUmaString = "Artur";
        var tipoDeSouUmaString = typeof(souUmaString);

        var souUmBoolean = true;
        var tipoDeSouUmBoolean = typeof(souUmBoolean);

        //JavaScript Object Notation = JSON
        var souUmObjecto = {"idade":999};
        var tipoDeSouUmObjecto = typeof(souUmObjecto);

        var souUmaFunction = function soma1 (valor){return valor+1;};
        var tipoDeSouUmaFunction = typeof(souUmaFunction);

        document.write(tipoDeSouUmUndefined); document.write("<br>");
        document.write(tipoDeSouUmNumberInteiro);  document.write("<br>");
        document.write(tipoDeSouUmNumberReal); document.write("<br>");
        document.write(tipoDeSouUmaString); document.write("<br>");
        document.write(tipoDeSouUmBoolean); document.write("<br>");
        document.write(tipoDeSouUmObjecto); document.write("<br>");
        document.write(tipoDeSouUmaFunction); document.write("<br>");


    </script>
</body>
</html>