Mapa mental

JavaScript ou EcmaScript (versão padronizada do JS)

Paulo Tarsis Vitoriano da Silva Português

Conteúdo do mapa

Display
- Tela de código
  - Onde se digita o algoritmo
- Representação da Memória do computador, suas variáveis e o escopo
- Tela de terminal
  - Onde vai mostrar todas as saídas de dados
Estrutura do algoritmo
- <html> </html>
  - <head> </head>
    - <meta>
    - <title> Título </title>
    - <style> Área para editar o estilo do arquivo CSS </style>
  - <body> </body>
    - <h1> Título do texto </h1>
    - <p> texto do arquivo </p>
    - <script> Área para digitar os algoritmos JS </script>
- Endentação
  - Organização com comandos utilizando o TAB, dando um TAB nos comandos dentro de cada condição
  - Ctrl + g e a endentação é feita automaticamente
- Para limpar a tela: Ctrl + L
- Comentários
  - São importantes para documentar o código
    - //
      - Colocando no início da linha ele entende que toda a linha é um comentário
    - /* */
      - Mais de uma linha de código, é possível delimitar as linhas que serão consideradas comentários
Estruturas condicionais
- É uma condição delimitada
- Condicional Simples
  - Estrutura básica
    - Se (expressão) entao
    - Bloco
    - FimSe
  - Exemplos
    - Se (dinheiro >= 10000) entao
    - Escreva ("Partiu Disney")
    - FimSe
- Condicional Composta
  - Estrutura básica
    - Se (expressão) entao
    - Bloco A
    - Senao
    - Bloco B
    - FimSe
  - Exemplos
    - Se (dinheiro >= 10000) entao
    - Escreva ("Partiu Disney")
    - Senao
    - Escreva ("Chateado")
    - FimSe
- Condicional Aninhada
  - Duas estruturas, ou mais, condicionais, uma dentro da outra
  - Estrutura básica
    - Se (situação 1) entao
    - Bloco A
    - senao
    - Estrutura condicional composta
      - Se (situação 2) entao
      - Bloco B
      - senao
      - Bloco C
      - FimSe
    - FimSe
  - Exemplo
    - Se (dinheiro >= 10000) entao
    - Escreva ("Partiu Disney")
    - Senao
    - Se (dinheiro >= 5000) e (dinheiro < 10000) entao
    - Escreva ("Visitar família")
    - senao
    - Escreva ("#chateado")
    - FimSe
    - FimSe
- Escolha caso
  - Usado quando se tem muitos testes com valores numéricos SIMPLES
  - Estrutura básica
    - Escolha (variável)
    - Caso valor
    - Bloco A
    - Caso valor
    - Bloco B
    - Caso valor
    - Bloco C
    - OutroCaso
      - Caso opcional, usada quando nenhum dos valores acima sejam executados esse bloco será executado
    - Bloco D
    - FimEscolha
  - Muito mais simples que ficar aninhando várias condicionais. Porém essa estrutura não serve para testar faixas de valores (<, >, >= ou <=) e tb só serve para valores inteiros, em algumas linguagens aceita o tipo caractere.
Estruturas de repetição
- Enquanto
  - Exemplo
    - Enquanto (não arrumar o quarto) faca
    - castigo
    - FimEnquanto
    - Enquanto não arrumar o quarto vai ficar de castigo. Qd chegar no fimenquanto vai entrar repetir (looping) e verificar se arrumou o quarto, enquanto não arrumar continua de castigo. Qd o quarto for arrumado e verificado o looping acaba e os próximos comandos são executados.
  - Estrutura básica
    - Enquanto (expressão) faca
    - bloco
    - FimEnquanto
  - Não precisa necessariamente ter um limite expecificado
  - Exemplo
    - var
    - inicio
    - contador: inteiro
    - contador <- 0
    - Enquanto (contador <= 5) faca
    - Escreval (contador)
    - contador <- contador +1
    - FimEnquanto
- Repita
  - Estrutura básica
    - Repita
    - Bloco
    - Até (expressão)
      - Nessa estrutura a "expressão" esta no final, ou seja, "repita" é logicamente inversa comparada a "enquanto". Pois no teste lógico do "repita" é feito no final, já o teste lógico do "enquanto" é feito no final. E ainda, observando a expressão no "enquanto" e no "repita" é possível ver que em um tem a expressão lógica "não" invertendo a lógica.
  - Exemplo
    - Repita
    - Castigo
    - Ate arrumar o quarto
    - Ele esta de castigo, no "ate" é feito o teste lógico, caso ele tenha arrumado o quarto esta liberado, caso não ele volta para castigo.
  - Exemplo
    - var
    - contador: inteiro
    - contador <- 0
    - repita
    - escreval (contador)
    - contador <- contador + 1
    - ate (contador > 5)
  - É possível colocar uma estrutura repita dentro da outra.
- Para
  - Estrutura básica
    - Para variavel <- inicio ate fim passo [salto] faca
    - Bloco
    - fimpara
  - já vem com a atribuição e o incremento incluso
  - Exemplo
    - var
    - contador: inteiro
    - Para contador <- 1 ate 10 faca
    - Escreval (contador)
    - Fimpara
    - Se não colocar nada no "passo" um ele vai considerar 1
    - Na primeira passagem o "C" tá valendo 1, então vai escrever 1 na tela. Qd chegar no "fimpara" ele vai voltar para o "para" repetindo o processo. Na segunda passagem ele vai somar o "passo" que é 1, então "C" vale 1+1=2, sendo assim será escrito 2 na tela... até 10.
  - Para casos em que o usuário decide se quer continuar a repetição ou não, a estrutura "para" não é indicada pois ela delimita o final da repetição
Rotina
- Procedimentos
  - Qd há passos repetidos (rotina) dentro de um algoritmo, coloca-se isso dentro de um procedimento e chama ele qd necessário
    - Exemplo
      - Dentro de "var"
      - Procedimento Nome ( )
      - Inicio
      - Bloco de rotina
      - Fimprocedimento
      - Inicio
      - Desenvolvimento do algoritmo
      - Nome ( )
        Chamada do procedimento
      - Fimalgoritmo
    - Passagem de parâmetros
      - Por valor
        Exemplo
        algoritmo "Soma"
        var
        x, y: inteiro
        Procedimento Soma (A, B: inteiro)
        inicio
        Escreval ("Recebi o valor ", A)
        Escreval ("Recebi o valor ", B)
        Escreval ("A soma entre os dois é ", A+B)
        Fimprocedimento
        inicio
        X <- 5
        Y <- 3
        Soma (X, Y)
        Chamou o procedimento e passou os parâmetros x, y
        fimalgoritmo
      - Por referência
        A diferença na escrita do algoritmo esta no acréscimo do "var" na linha do procedimento: Procedimento Soma (var A, B: inteiro)
        Na passagem por valor apenas o valor é copiado para dentro do parâmetro. Na passagem por referência o parâmetro tem uma referência automática ao valor da variável original, qualquer alteração no parâmetro vai afetar na variável original.
- Funções
  - Principal diferença é que a "funcao" retorna um valor para o algoritmo. Nos "procedimentos" vc não pode retornar um valor, já na "funcao" tem um valor de retorno.
    - Exemplo
      - Algoritmo "Soma"
      - var
      - n1, n2: inteiro
      - funcao Soma (a, b: inteiro) : inteiro
        esta segunda indicação de inteiro indica o valor de retorno que a função dará
      - var
      - inicio
      - s: inteiro
      - s <- a+b
      - retorne s
        Aqui retorna o valor para "res"
      - fimfuncao
      - inicio
      - n1 <- 5
      - n2 <- 4
      - res <- soma (n1, n2)
        Aqui "res" recebe o resultado de retorno da soma de n1 e n2
      - escreval ("a soma é ", res)
      - fimalgoritmo
    - Funções internas prontas do Visualg
      - Para tratamento de valores caractere
        Exemplo
        Com a variável string (cadeia de caractere). site: caractere / site <- "Cursoemvideo"
        Compr(site)
        Aqui ele vai dizer o comprimento da variável, logo ele vai retornar 12.
        Copia(site, 6, 2)
        Aqui o "6" indica a posição que vai começar a contar, e o "2" indica quantas casas irá mostrar. logo ele vai retornar : em
        Maiusc(site)
        CURSOEMVIDEO
        Minusc(site)
        cursoemvideo
        Pos("video", site)
        8
        Mostra a posição da palavra "video" dentro da variável site
        Asc("c")
        67
        Código de cada letra, na hora de digitar é enviado um código para o computador
        Carac(67)
        c
        Inverso da "Asc"
        O valor esta entre aspas para mostrar que é um string ou cadeia de caracteres
      - Essas funções já estão definidas dentro da biblioteca do Visualg
Operadores
- Aritméticos
  - +
    - number + number para adição
    - String + String para concatenação
      - Operação de unir o conteúdo de duas strings
  - -
  - *
  - /
    - Divisão real, que leva números decimais
  - ** Exponenciação
    - 5**2 = 25
  - % Módulo
    - 5%2 = 1
      - É o resto da divisão inteira de 5 por 2
  - Arredondamento
  - Precisão
    - Exemplo
      - var n1 = 1543.5
        n1.toFixed(2)
        1543.50
        Exibir 2 casas após o ponto
- Relacionais
  - Criam relações entre variáveis, valores ou expressões, através da comparação entre elas, gerando sempre resultados lógicos (boolean) como true ou false.
  - <
  - >
  - <=
  - >=
  - == (igual)
    - Exemplo
      - 5==5
        true
      - 5=='5'
        true
        Aqui é true pois os valores possuem a mesma grandeza só que não são identicos
  - != (Diferente)
  - === (identidade)
    - Exemplo
      - 5==='5'
        false
        Aqui ele possui a mesma grandeza porém não é idêntico
      - 5===5
        true
  - !== (Desigual restrito)
- Lógicos
  - Criam relações entre outros resultados lógicos, através da comparação entre eles, gerando sempre resultados lógicos (boolean) como true ou false. Não comparam variáveis, valores ou expressões.
  - && (E - Conjunção)
    - p
      - q
        p && q
        true
        false
        false
        false
        true
        false
        true
        false
      - true
        true
        false
        false
  - || (OU - Disjunção)
    - p
      - true
        true
        false
        false
      - q
        true
        false
        true
        false
        p || q
        true
        true
        true
        false
  - ! (Negação)
    - p
      - ! p
        false
        true
      - true
        false
- Ordem de precedência Geral (entre operadores aritméticos, lógicos e relacionais)
  - 1º Aritméticos
    - 1º ( )
    - 2º **
    - 3º * / %
    - 4º + -
  - 2º Relacionais
    - Todos
      - Mesma ordem de precedência e serão executados sempre da esquerda para a direita
  - 3º Lógicos
    - 1º !
    - 2º &&
    - 3º ||
  - 4º Ternário
- Atribuição
  - =
    - var n n = 3
      - Aqui inicialmente foi declarado a variável 'n' e depois atribuído o valor '3'.
  - Tb é possível atribuir um valor nulo a variável: n = null. Dessa forma a variável fica nula/ nada dentro do espaço
  - Autoatribuição
    - Exemlos
      - n = n + 4
        Simplificaso: n += 4
      - n = n - 5
        Simplificaso: n-=5
      - n = n * 4
        Simplificaso: n*= 4
    - Qd uma variável se atribui a ela mesma
    - Incremento
      - Exemplo
        var x = 5
        x = x + 1
        x = x -1
        x--
        Pós-incremento
        --x
        Pré-incremento
        x++
        Pós-incremento
        ++x
        Pré-incremento
- Ternário
  - ?
  - :
  - Ternário pq ele testa 3 operandos
  - Exemplo
    - média >= 7 ? 'Aprovado' : 'Reprovado'
      - A média é maior ou igual a 7, se sim 'Aprovado' se não 'Reprovado'
    - var média = 6
    - 'Reprovado'
Comandos
- alert
  - Exibe na tela o que esta em aspas no parenteses e uma variável que esteja fora das aspas, para unir usar +
- confirm
  - Exibi uma mensagem pedindo a sua confirmação: ok ou cancel
- prompt
  - Exibe a mensagem pedindo para escrever algo
- window
  - Exibe uma janela
- document
  - Documento atual
- Write
  - Escreve na tela
- Writeln
  - Escreve na tela e pula para a linha de baixo. Tb é possível pular a linha usando o "<br/>" no final da string que quer dizer break
Variável
- Variáveis são espaços dentro da memória do computador, esses espaços são preenchidos por dados e etiquetados/ identificados.
  - Na criação da variável não é especificado o tipo
    - identificador identifica a variável
      - Regras:
        Podem começar com letra, $ ou _
        Não podem começar com números
        É possível usar letras ou números
        É possível usar acentos e símbolos
        Não podem conter espaços
        Não podem ser uma palavras reservadas, ex.: comandos, var...
      - Dicas
        Maiúscula e minúscula fazem diferença
        Tente escolher nomes coerentes para as variáveis
        Evite se tornar um 'programador alfabeto' ou um 'programador contador''
    - Tipos primitivos
      - number
        Real e Inteiro
        1, 3, -5, 198, 0, 0.5, 9.8, -77.3, 3.14...
        Infinity
        NaN
      - string
        Caractere
        "Gustavo" 'Algoritmo' `1-545423`
        Essas cadeias de caracteres podem ser colocados dessas 3 formas aspas, apóstrofo e crase.
        Apóstrofe e aspas são a mesma coisa e aspas é usada quanto se usa o método Template string
      - boolean
        Lógico
        True and false
      - null
        Considerado um object
      - undefined
      - Object
        Array (vetor)
      - Function (Função)
      - typeof
        Mostra o tipo da variável
        sendo, "var n = 200". Digitando "typeof n" ele irá mostrar "number" pois é o tipo da variável
    - Exemplo: "var n" ou "let n" ou ainda "const n". Foi criado a variável "n".
- Escopo
  - É o local onde uma determinada variável vai funcionar
    - Local
      - A variável funciona dentro de uma rotina/ atuação limitada
    - Global
      - A variável funciona dentro de uma algoritmo/ atuação ilimitada
    - Chamar uma variável local dentro do algoritmo não vai funcionar
- Tipos
  - Simples
    - n1, n2, n3, n4: inteiro
      - Os espaços são escolhidos aleatoriamente
  - Composta
    - Homogêneo
      - Unidimensionais
        Vetor
        n: vetor [1 .. 4] de inteiro
        "n" é um vetor de 1 a 4 de inteiro, são colocados apenas dois pontos
        Foram armazenados 4 espaços um ao lado do outro, dentro da memória do computador referente a variável "n"
        Na variável simples eram 4 espaços para 4 valores, já aqui é uma variável (espaço) para 4 valores
        Atribuições
        n[1] <- 3
        variável "n" na posição 1 recebe 3
        [1] é o índice que indica a posição/ endereço dentro da variável
        Unidimensional, pois é usada uma dimensão, sendo assim para identificar cada um dos espaços precisa apenas de 1 endereço
        Vantagem de armazenamento de vários valores dentro de uma variável
      - Multidimensionais
        Matriz
        m: vetor [1..3, 1..2] de inteiro
        Multidimensional, pois são usadas mais de uma dimensão, sendo assim para identificar cada um dos espaços precisa de 2 ou mais endereços
        Atribuições
        m [1, 2] <- 4
        a variável "m" tem duas dimensões: [1, 2] é o índice que indica a posição/ endereço dentro da variável
        variável "m" na dimensão linha posição 1 e na dimensão coluna 2 recebe 4
        Foram armazenados 6 espaços formando um retângulo de 3x2, dentro da memória do computador referente a variável "m"
      - Composta pq a variável é composta de vários espaços e homogênea pq o tipo é o mesmo (inteiro ou real...)
Website
- Composição básica
  - Tecnologias
    - Linguagem de marcação
      - HTML
        Conteúdo
    - Linguagem de estilo
      - CSS
        Designer
        Cascading Style Sheets (Folha de Estilo em Cascatas) é um mecanismo para adicionar estilo a um documento web.
  - Linguagem de programação
    - JS
      - Interações
Várias ferramentas surgiram com a evolução do JS
- Nodejs
  - É uma máquina (motor interno que roda a linguagem) que roda JS fora do navegador. Assim o JS pode ser rodado não apenas do lado do cliente, mas tb do lado do servidor.
- Framework/ Biblioteca
  - jQuerv
  - Angular
    - Criada pelo Google
  - React
    - Criada pelo Facebook. Com o ReactNative para aplicações em celular.
  - Vue
    - Criado por um ex-funcionário do Google
  - Electron
    - Mantido pela GitHub.
  - É um conjunto de bibliotecas de funções JS que interage com o HTML, desenvolvida para simplificar os scripts interpretados no navegador do cliente. Quando usada fora do navegador roda NodeJS.
  - Ionic
    - SDK ou devkit (fornecedor de um conjunto de ferramentas, exemplos de código, documentação relevante e processos ou guias para ajudar desenvolvedores) para a criar APP móveis
  - Cordova
    - Usado para criar App móveis
  - Games
    - Phaser
    - PixiJS
    - Impact
    - melon.js
    - CraftyJS
Tratamento de dados
- Guardando
  - var nome = window.prompt ('Qua é seu nome?')
    - A variável "nome" recebe o resultado do comando de entrada "prompt"
    - Atenção! Pois o comando "prompt" sempre retorna uma string mesmo que seja digitado um número
- Conversões de tipo
  - String para number
    - Number.parseInt (variável/ dados)
      - converte para número inteiro
        "parse" que significa converter/ parcia
    - Number.parseFloat (variável/ dados)
      - converte para número real
        "Float" pq aquele ponto do número (3.5) é um ponto flutuante (floating point)
    - Number (variável/ dados)
      - Aqui ele já faz a conversão automaticamente para inteiro ou real conforme o valor que precisamos
  - Number para string
    - String (variável/ dados)
    - "variável/ dados".toString ()
- Fromatação
  - String
    - Exemplo
      - var s = 'JavaScript'
        'Eu estou aprendendo' + s
        Esse método usa concatenação que torna mais complicado principalmente em strings grandes
        `Eu estou aprendendo ${s}`
        Esse método é o "Template string" que é mais fácil e menor
        ${} - placeholder - espaço reservado
    - "variável/ dados".length
      - Quantos caracteres a string tem
    - "variável/ dados".tiUpperCase ()
      - Tudo para 'MAIÚSCULAS'
    - "variável/ dados".toLowerCase ()
      - Tudo para 'minúsculas'
    - <strong> $(variável/ dados) </strong>
      - Escreve em negrito
  - Number
    - Exemplo
      - var n1 = 1543.5
        n1.toLocaleString('pt-BR', {style: 'currency', currency: 'BRL'})
        R$ 1,545.50
        n1.toLocaleString('pt-BR', {style: 'currency', currency: 'USD'})
        us$ 1,545.50
É Case-sensitive - sensível à caixa das letras maiúsculas e minúsculas
DOM (Document Object Model) - Modelo de Objetos para documentos
- Conjunto de objetos dentro do seu navegador que vai dar acesso aos seus componentes internos do seu Website. Ele não funciona dentro do NodeJS por exemplo, o DOM esta presente quando estou rodando JS dentro do navegador
- Árvore DOM (árvore de hierarquia)
  - Exemplo
    - window
      - location
        Objeto location que diz a localização do site, URL
      - document
        html
        head
        meta
        title
        body
        h1
        p
        p
        strong
        div
        head (cabeçalho) e body (corpo) são filhos de html
        Documento atual
      - history
        Mostra de onde veio e para onde vai
      - Começa da raiz. Tudo dentro do JS esta dentro de um objeto chamado window (janela). A janela do navegador é um objeto DOM
  - É possível navegar dentro desses elementos da árvore. Para navegar é preciso selecionar, e para isso existem vários métodos, alguns deles:
    - Por Marca ou TagName: é possível selecionar mais de um objeto, pois ele seleciona por Tag (tipo).
      - getElementsByTagName()
        Exemplo
        var p1 = window.document.getElementsByTagName('p')[0]
        Aqui ele selecionou a Tag 'p' (paragrafo), como o próprio nome diz 'Elements' no plural, ele seleciona mais de um por isso '[0]' significando a seleção do 1º p (0 - 1º, 1 - 2º, 2 - 3º). Ele selecionou a 1º Tag 'p' e atribuiu a variável 'p1'.
      - Exemplos de Tag: p (paragrafo), body (corpo), H1 , div, etc
    - Por Id
      - getElementById()
        Seleciona um elemento ou a família dele ('Element"). Id é a identificação
    - Por Nome
      - getElementsByName()
        Seleciona mais um elemento pelo seu nome ('Elements"), precisa especificar o elemento com "[ ]"
    - Por Classe
      - getElementsByClassName()
        Seleciona mais um elemento ('Elements"), precisa especificar o elemento com "[ ]"
    - Por Seletor
      - querySelector()
      - querySelectorAll()
        Quando se quer selecionar mais de um elemento
( ) - Parâmetros
{ } - Códigos
document.getElementById ("Luz")
- Pegar um elemento pelo Id, no caso "Luz"

Informações

Descrição: Mapa Mental sobre JavaScript ou EcmaScript (versão padronizada do JS), criado por Paulo Tarsis Vitoriano da Silva em 14-09-2019.
Criado por: Paulo Tarsis Vitoriano da Silva
Visualizações: 7
Histórico: Criado por Paulo Tarsis Vitoriano da Silva · 4 ago 2019

Copiado por Paulo Tarsis Vitoriano da Silva · 14 set 2019
Avaliação

JavaScript ou EcmaScript (versão padronizada do JS)

Conteúdo do mapa

Informações

Fale Conosco

O que você acha do novo visual?