cefet_web

JavaScript parte 1

História e Características da linguagem

Hoje veremos…

História e características
Tipos de dados, Variáveis e Funções
Condicionais, Vetores e Estruturas de Repetição
Mais sobre funções e Métodos úteis

História e características

Introdução a JavaScript

História
O que é JavaScript
Como incluir na página

História (1/2)

1989 - 1993 ~ Tim Berners-Lee cria a WWW em CERN (European Organization for Nuclear Research) e a deixa aberta ao público

1994 ~ Håkon propõe uma linguagem para dar conta da responsabilidade de alterar a aparência de páginas web chamada CSS

1995 (maio) ~ Foto de Brendan Eich Brendan Eich, funcionário do Netscape, criou (em 10 dias!!) uma linguagem para alterar páginas dinamicamente - o Mocha

1995 (setembro) ~ LiveScript (novo nome) é lançado com a versão beta do Netscape 2.0

História (2/2)

1995 (dezembro) ~ Nome virou JavaScript para aproveitar a fama do Java

1996 (agosto) ~ Microsoft adota o JavaScript sob o nome de JScript

1996 (novembro) ~ A Netscape submeteu o JavaScript para a Ecma international para padronização. A especificação recebeu o nome de ECMAScript

1997 ~ A Ecma International publicou a primeira versão

1998 ~ Versão 2 do ECMAScript

1999 ~ Versão 3 do ECMAScript

2009 ~ Versão 5 do ECMAScript

2013 - hoje ~ Versões 6-9+ do ECMAScript, que mudaram de nome para ES2015, ES2016, ES2017, ES2018…

O que é JavaScript?

Linguagem imperativa com tipagem dinâmica
Suporta os paradigmas: procedural, orientado a objetos e funcional
Thread única: usa um loop de eventos
Sintaxe parecida com C, C++, C# e Java, mas baseada em Scheme
Memória auto-gerenciada (garbage collector)
Há um interpretador embutido em cada navegador:
- Chrome → V8
- Firefox → SpiderMonkey
- Opera → Carakan → V8 (2013)
- Safari → ~~JavaScriptCore~~ Nitro
- Internet Explorer → Chakra
- Edge → ~~Charka~~ V8 (2019)

Como usar em uma página Web

Três formas de inclusão

O navegador executa o código assim que vê o elemento <script></script> e faz download do arquivo apontado

Há 3 formas para incluir (tipo CSS):

Externa :thumbsup:

  ...  <!-- dentro do HEAD -->
  <script src="executa-no-inicio.js"></script>
</head>
<body>
  ...
  <!-- última coisa antes de fechar /BODY -->
  <script src="executa-no-fim-da-pagina.js"></script>
</body>

Inclusão em páginas

Embutida :thumbsdown:
```
<script>
  // código javascript aqui
</script>
```
- Não reaproveita entre arquivos, mistura com HTML
Inline :thumbsdown::thumbsdown::thumbsdown:
```
<button onclick="javascript: alert();">Mensagem</button>
```
- Nenhum reaproveitamento, mistura uma mesma linha

Onde incluir?

O navegador precisa baixar o arquivo JS e executá-lo , enquanto faz parsing do HTML
Durante a execução os navegadores podem interromper o parsing do HTML
Regra geral: adiar a execução (para bloquear a página depois que já tiver sido desenhada)

```
<script src="..."></script>
```
```
<script src="..." async></script>
```
- Não garante a ordem
```
<script src="..." defer></script>
```

hello-world.js e imprimindo no console

Um arquivo HTML pode incluir um arquivo .js

<!DOCTYPE html>
<html>
<head>
  <title>...</title>
</head>
<body>
  <!-- ... -->
  <script src="hello-world.js"></script>
</body>
</html>

// imprime no console do navegador
console.log('Hello world');

// abre uma janelinha infernal
window.alert('Sou das trevas');

Um arquivo JavaScript incluído por um HTML é baixado e executado linha a linha
Para testar escrevemos no console do navegador com
```
console.log('.......');
```
Também pode abrir uma janelinha
```
window.alert('......');
```
- …mas não faça isto, jovem, porque essa janelinha é muito chata ;)

Tipos de Dados, Variáveis e Funções

Elementos da Linguagem JavaScript

Tipos de dados
Declarando variáveis
Criando funções

Declarando variáveis (com `let`)

Usamos a palavra-chave let para criar variáveis:

let alunosMatriculados = 20;    // isto aqui é um comentário
let qtdeHorasAula = 66.5;       /* aqui também (de bloco) */
let nomeAula = 'js0';

Não é necessário (nem possível) informar o seu tipo de dado
- Em JavaScript o tipo é inferido automaticamente
let pode ser lido como “seja”, tipo assim:

seja uma variável ‘nomeAula’ com o valor ‘js0’

Outras formas de declarar variáveis `(const/var)`

Usamos a palavra-chave const para criar variáveis que sempre apontam para o mesmo valor
```
const fruta = 'abacate';
fruta = 'pera';
// Uncaught TypeError:
//   Assignment to constant variable.
```
- É uma boa prática usar const sempre que se sabe que a variável não receberá um novo valor

Usávamos (passado, old, não use) a palavra-chave var:
```
var vegetal = 'batata';
```
- Similar ao let mas tem alguns problemas:
  - Não possui escopo de bloco, mas de função
  - Pode ser usada até mesmo antes da declaração
- Era a única forma até ~2012
- Encontra-se códigos antigos na Web usando var

Fracamente tipada e dinâmica

Em JavaScript, não é necessário declarar o tipo das variáveis:
```
let nota = 10;            // tipo numérico
let aluno = 'Adamastor';  // tipo string
```
- Dizemos que JavaScript é fracamente tipada

Em JavaScript podemos mudar o tipo de uma variável no meio do caminho (exceto se usando const):

let nota = 10;            // nota é númerico
nota = 'Dó';              // agora virou string

Dizemos que JavaScript é dinâmica

Tipos de dados

Há seis tipos primitivos de dados:
- 1. Boolean
- 2. Number
- 3. String
- 4. Null
- 5. Undefined
- 6. Symbol
Um tipo composto de dados: 7. Object
- Há outros derivados de Object…
- Veremos Object e seus tipos derivados em próximas aulas

Para verificar o tipo de uma variável, usamos typeof

let vacinou = true;
console.log(typeof vacinou);
// imprime "boolean"

let nota = 10;
console.log(typeof nota);
// imprime "number"

let aluno = 'Adamastor';
console.log(typeof aluno);
// imprime "string"

let inimigo = {
  vida: 100,
  nome: 'Slime'
};
console.log(typeof inimigo); // impr. "object"

O tipo 1. Boolean O tipo 2. Number

O tipo Boolean armazena um valor verdadeiro ou falso. Exemplo:

let abelhinhaEstaVoando = true;
let modoEscuro = false;
let maioridade = idade >= 18;

Apenas 1 tipo numérico 64bits
- (equivalente ao double de C/Java)
- Não há um tipo específico para números inteiros

Exemplos de variáveis com números:

let a = 5;
let b = 5.674;            // 5 vírgula 674
let c = a + b;            // 10.674
let d = 2 ** 4;           // 16 (2 elevado a 4)
let e = Math.sqrt(25);    // 5 (raiz quadrada de 25)
let f = Math.random();    // [0,1] - algo entre 0 e 1

O tipo 3. String

Representa um texto codificado em UTF-8
Não existe o tipo char como em C/C++ e Java, apenas string :wink:

Usamos aspas simples ou duplas

"Abc" === 'Abc'   // simples é mais legal!! mas basta ser consistente

Possui uma propriedade chamada length com o seu comprimento:
```
console.log('Cachorro'.length); // 8
```

Exemplos:

let aranhas = 'fofofauna';
const caminhoVideo = 'videos/a.mp4';
const nomeCompleto = primeiro + ' ' + ultimo;

Manipulando Strings

É possível concatenar (juntar, colar) para criar novas strings:
```
console.log('c' + 'a' + 't');   // imprime 'cat'
```

Podemos acessar cada caractere usando colchetes:

const capitalDeMG = 'Betim';
console.log(capitalDeMG[0]);    // imprime 'B'

Strings possuem métodos, vários deles (veremos mais). Exemplos:

'barba negra'.toUpperCase() === 'BARBA NEGRA'
'Mississippi'.indexOf('ss') === 2
'Orinoco'.replace('noco', '') === 'Ori'
'$'.repeat(3) === '$$$'

O tipo `4. Null`

Tecnicamente um tipo, mas na prática contém apenas 1 valor: null
```
let x = null;
console.log(typeof x);    // imprime null¹
```
Usamos quando uma variável não tem um valor aplicável naquele momento ¹: bug typeof null

O tipo `5. Undefined`

Parecido com Null, possui apenas 1 valor: undefined
```
let x;
console.log(typeof x);    // imprime undefined
```
É o tipo padrão de variáveis que não foram associadas a nenhum valor

O tipo `7. Object`

É um “saquinho” de propriedades:
```
let jogador = {
  pontos: 1420,
  vidas: 2
};
console.log(jogador.pontos);
// imprime 1420
```
- Propriedade: (nome → valor)
  - Nome: uma String
  - Valor: qualquer coisa, exceto undefined
No exemplo, o objeto tem 2 propriedades:
1. Nome: pontos, valor: 1420
2. Nome: vidas, valor: 2

Para acessar as propriedades, há 2 formas:

// notação ponto
console.log(jogador.vidas);

// notação colchete
console.log(jogador['vidas']);

Objetos conhecidos

::: did-you-know .push-right width: 250px; Quando um objeto tem uma propriedade que é uma função, chamamos ela de método. ::: Há vários objetos comuns que usamos no dia a dia: Math, console, window. Exemplos:
- O objeto Math possui uma propriedade:
  - Math.PI
    (PI → 3.14159) (cujo valor é Number)
- O objeto console possui uma propriedade
  - console.log
    (log → function() {…})
- O objeto window possui uma propriedade
  - window.alert
    (alert → function() {…})
E se quisermos criar nossos próprios objetos? #mcfaz?

Criando um objeto (2 formas)

Na forma literal:

let jogador = {             // forma mais expressiva, curta e sexy 😎
  pontos: 1420,             // propriedades separadas por vírgula
  vidas: 2
};

let jogador = {};           // um objeto vazio: { }
jogador.pontos = 1420;      // criou jogador.pontos com valor 1420
jogador.vidas = 2;          // criou jogador.vidas

Novas propriedades podem ser atribuídas mesmo após sua criação!

Na forma do operador new:
- ```
let jogador = new Object();
jogador.pontos = 1420;
jogador.vidas = 2;
```
  - Contudo, desta forma sempre cria-se um objeto vazio e deve-se preenchê-lo

Objetos dentro de objetos

let voo = {
    companhia: 'Gol',
    numero: 815,
    decolagem: {
        IATA: 'SYD',
        horario: '2004-09-22 14:55',
        cidade: 'Sydney'
    },
    chegada: {
        IATA: 'LAX',
        horario: '2004-09-23 10:42',
        cidade: 'Los Angeles'
    }
};

Aqui existem 3 objetos:
- O voo, com as propriedades:
  - companhia
  - numero
  - decolagem
  - chegada
- decolagem e chegada são objetos por si mesmos

Métodos de objetos

const loja = {
  livros: [       // prop. é um vetor
    'macunaíma',
    'torre negra'
  ],
  dinheiro: 500,  // propri. é number
  
  // método vender
  vender: function() { // p. é função
    this.dinheiro += 15;
  } 
};

loja.vender(); // loja.dinheiro = 515
loja.vender(); // loja.dinheiro = 530

O valor de uma propriedade pode ser uma função
- Nesse caso, chamamos ela de método
- Todo método tem acesso ao próprio objeto com o ponteiro this
- Objetos com métodos formam o princípio do conceito de Orientação a Objetos

Outros tipos, baseados em `Object`

Existem outros tipos complexos, que são baseados em Object:

Date ~ Por exemplo, para imprimir o horário atual no console: js let agora = new Date(); console.log(agora); //Sun Jan 17 2021 18:11:46...

Function ~ (sim! funções são objetos em JavaScript)

Array ~ (vetores também são objetos)

SeuProprioTipo™ ~ (é possível criar novos tipos também)

Operadores

Aritméticos
- + soma - subtração
- * multiplicação
- ** exponenciação
- / divisão
- % resto da divisão
- ++ incremento -- decremento
Atribuição
- = simples += /= %= composta
Relacionais (comparação)
- == igualdade
- === igualdade forte (!!)
- != desigualdade
- !== desigualdade forte (!!)
- < <= menor/menor igual
- > >= maior/maior igual
Lógicos
- ! não && e || ou

O que significa `===` (igualdade forte)?

Se compararmos ‘1’ com 1 (uma string com um number ) usando ==:
```
console.log('1' == 1);    // imprime true
```
- A comparação == tenta converter um elemento no tipo do outro e depois compara
- Neste caso, converte 1 em '1' e só então compara
Para que essa conversão não aconteça, usamos === :thumbsup::
```
console.log('1' === 1);   // imprime false
```
- Mais rápido para o computador, porque ele não faz a conversão
- Prefira esta forma!! :wink:

O objeto `Math` (ver na 🌐 MDN)

Além dos operadores matemáticos (e.g., +, -, /, *), existem outras funções matemáticas acessíveis via o objeto Math:

const pi = Math.PI;           // a constante pi
let a = Math.sin(1);          // seno de 1 radiano
let b = Math.cos(pi);         // cosseno de pi radianos
let c = Math.pow(5, 2);       // 5 elevado a 2 (= 5**2)
let d = Math.sqrt(100);       // raiz quadrada de 100
let e = Math.random();        // nº aleatório entre [0, 1]
let f = Math.round(0.5);      // arredonda p/ inteiro mais próximo (1)
let g = Math.floor(0.5);      // arredonda p/ baixo ("chão": 0)
let h = Math.ceil(0.5);       // arredonda p/ cima ("teto": 1)

Declarando e invocando funções

Funções são declaradas usando a palavra-chave function + nome + parâmetros + corpo ➜
- Há outras formas, como funções anônimas (veremos depois) e funções seta

// DECLARA a função dizOla()
function dizOla() {
  console.log('olá queridão');
}

// INVOCA a função dizOla()
dizOla();  

Funções são invocadas (chamadas) por seu nome, seguido de parênteses

Declarando parâmetros para funções

Os parâmetros ficam entre os parênteses e separados por vírgula:
- Não é necessário declarar o tipo do parâmetro - apenas o nome

function dizOla(nome, pronome) {
  console.log('olá ' + pronome + ' ' + nome);
}

dizOla('enfermeira', 'srta.');
// imprime 'olá srta. enfermeira'
dizOla('jujuba', '');
// imprime 'olá  jujuba'
dizOla();
// imprime 'olá undefined undefined'

Para invocar a função ←
- Dá pra chamar uma função sem passar valores para os argumentos. Nesse caso, o parâmetro tem valor undefined

Valor de retorno de funções

A função pode retornar um valor explicitamente:

function elevaAoCubo(numero) {            
  return numero ** 3;             
}
elevaAoCubo(2);     // retorna 8
elevaAoCubo(3);     // retorna 27

function hipotenusa(cateto1, cateto2) {
  let somaQuadrados = cateto1 ** 2 + cateto2 ** 2;
  return Math.sqrt(somaQuadrados);
}
hipotenusa(3, 4);   // retorna 5

Toda função sempre retorna um valor, mesmo sem return. Se não houver a palavra-chave, a função tem um return undefined implícito

function imprimeNome(primeiro, ultimo) {
  console.log(primeiro + ' ' + ultimo);
}
// retorna undefined

function imprimeNome(primeiro, ultimo) {
  console.log(primeiro + ' ' + ultimo);
  return undefined;
}

São idênticas ↑ ⬈

Condicionais, Vetores e Repetição

Arrays, for, while e variações

Condicionais
Vetores
For
- Tradicional
- For of
- forEach
While/Do while

if/else (condicionais)

if (hora < 12) {
  manha = true;
} else {
  manha = false;
}

if (nome === 'Robervaldo') { 
  conceito = 'A';
} else if (nome === 'Ana') {
  conceito = 'B';
} else {
  conceito = 'C';
}

if (estouComSono)
  dormir(); // mas evite omitir { }

Dentro dos parênteses colocamos uma expressão que avalia para true ou false. Ex:
- nome === 'Ana'
- ano < 2000 ano % 4 === 0
- !jaEstudei
- hp > 0 && (balas || granada)
Com apenas 1 comando no if/else, é possível omitir as chaves (como em C/C++, Java)
- Contudo, é uma má ideia

Operador ternário (condicionais)

Quando temos um if/else “simples”, pode ser mais legível fazer a verificação em 1 linha com o operador ternário ?:

if (armaduraForte) {
  hp -= 10;
} else {
  hp -= 50;
}

// mesmo código, em 1 linha
hp -= armaduraForte ? 10 : 50;

Formato:

CONDICAO_TESTE ? VALOR_SE_TRUE : VALOR_SE_FALSE;

switch (condicionais)

let corDoSite = 'black';
switch (climaAgora) {
    case 'ensolarado':
      corDoSite = 'yellow';
      break;
    
    case 'nublado':
    case 'chuvoso':
      corDoSite = 'gray';
      break;

    default:
      corDoSite = 'white';
      break;
}

switch + (expressão)
Um ou mais case + valor para a expressão
Sequência de comandos
Palavra-chave break para sair
- (pode ser omitida para continuar)
Caso default para pegar outros valores (equivalente ao else)

Vetores

Vetores (ou arrays) armazenam uma sequência de valores:

let notas = [10, 4, 7, 8, 8];
let cores = ['azul', 'verde'];
let animais = []; // <- vetor vazio

console.log(notas.length);  // impr. 5
console.log(cores.length);  // impr. 2

Assim como string, um vetor tem um comprimento (propriedade length ):

Em JavaScript, vetores são heterogêneos
- Os itens dos vetores não precisam ter o mesmo tipo
```
let listaDeCoisas = ['Aew', 35, true, [], 'outra string'];
```

Usando vetores

let listaDeCoisas = ['Aew', 35, true, [], 'outra string'];

Indexação: usa-se os símbolos [ e ] para acessar um item do array

console.log(listaDeCoisas[1]);      // imprime 35
listaDeCoisas[0] = '';              // altera primeiro elemento
console.log(listaDeCoisas[0]);      // imprime string vazia

Arrays possuem métodos, vários (veremos outros mais adiante):

let frutas = [];                    // cria um array vazio
frutas.push('kiwi');                // coloca 'kiwi' no array
console.log(frutas);                // imprime ['kiwi']

for (forma tradicional)

Forma tradicional com for (inicio; condicao; incremento):

for (let i = 0; i < 10; i++) {
  console.log(i);               // 0, 1, 2 ... 9
}

Percorrendo items de um array:

let cores = ['azul', 'rosa'];
for (let i = 0; i < cores.length; i++) {
  console.log(cores[i]);        // azul, rosa
}

for (formas mais legais)

For of: for (let item of array)

let cores = ['azul', 'rosa'];
for (let cor of cores) {
  console.log(cor);
  // azul, rosa
}

For each: array.forEach

let cores = ['azul', 'rosa'];
cores.forEach(function(cor) {
 console.log(cor);
 // azul, rosa
});

while/do..while

Condição primeiro

let i = 1;
while (i !== 10) {
  console.log(i);
  i++;
}

Condição depois

 let i = 0;
 do {
i++;
console.log(i);
 } while (i !== 10);

Mais sobre funções, Métodos úteis

Mais coisas legais

Função atribuída a variável
Função como parâmetro
Métodos comuns de strings
Métodos comuns de vetores

Mais sobre funções

Em JavaScript as funções são super flexíveis
1. Função “tradicional” (já vimos)
2. Função anônima (próximo slide)
3. Função seta (próximas aulas)
Variáveis podem apontar para funções
Podemos passar funções como parâmetro para outra função

Função anônima (atribuída a variável)

Declaração de função “tradicional”:

function dizOla(nome) {
  console.log('olá ' + nome);
}
dizOla('submundo');

function + nome + (params)

Criar uma função anônima e atribuí-la a uma variável:

let dizOla = function(nome) {
  console.log('olá ' + nome);
};
dizOla('submundo');          

Funciona da mesma forma

Passando função como parâmetro

function estudar(aluno, fnAprender) {
  console.log(aluno + ' aprendeu ' + fnAprender()); 
}

Vamos criar uma função que recebe outra como parâmetro →→→

Ao chamar estudar(...) devemos passar uma função no segundo argumento

Neste exemplo, dependendo do que foi estudado, o aluno aprende coisas diferentes:

function lerHarryPotter() {                       function lerOlavoCarvalho() {
  return 'criatividade';                            return '?'; 
}                                                 }
let lerDarcyRibeiro = function() {
  return 'sociologia';
}

Agora vamos invocar a função estudar(...):

estudar('André', lerHarryPotter);   // 'André aprendeu criatividade'
estudar('Luiz', lerDarcyRibeiro);   // 'Luiz aprendeu sociologia'
estudar('Jair', lerOlavoCarvalho);  // 'Jair aprendeu ?'

Função vs Método

Função ~ sozinha no mundo, ninguém é dono dela ~ exemplo: todas as que vimos

Método ~ nasceu de algum objeto, ele tem dono ~ acesso ao ponteiro this (próximas aulas) ~ ex: as funções das strings, dos vetores (e outros)

// 'dobra' é uma função
function dobra(n) {
  return 2 * n;
}
let nota = 5;
dobra(nota);

// sqrt() é método de Math
nota = Math.sqrt(25);

// toLowerCase() é método
// das strings
'HaNa MonTAna'.toLowerCase();

Métodos comuns de strings (1/3)

Toda string possui vários métodos diferentes que podemos invocar

texto.length ~ não é um método, mas retorna quantos caracteres ~ 'trem'.length === 4

texto[i] ~ não é um método, mas retorna o i-ésimo caractere ~ 'trem'[3] === 'm'

texto.toLowerCase() ~ método que retorna tudo em minúsculas ~ 'Doug'.toLowerCase() === 'doug'

texto.toUpperCase() ~ método que retorna tudo em maiúsculas ~ 'Doug'.toUpperCase() === 'DOUG'

Métodos comuns de strings (2/3)

texto.trim() ~ método que remove espaços em branco ao redor ~ ' mosca '.trim() === 'mosca'

t.indexOf(trecho) ~ método que retorna a posição do trecho no texto (ou -1) ~ 'Thanos'.indexOf('os') === 4

t.substr(ini, tam) ~ método que retorna um trecho dado início e tamanho ~ 'Pronto'.substr(0, 2) === 'Pr'

t.includes(trecho) ~ método que verifica se texto contém o trecho ~ 'Hakuna'.includes('ku') === true

t.split(separad) ~ método que retorna um vetor de trechos ~ 'Banana'.split('a') === ['B', 'n', 'n']

Métodos comuns de strings (3/3)

t.startsWith(trech) ~ método que verifica se começa com o trecho ~ 'Hakuna'.startsWith('Ha') === true

t.endsWith(trecho) ~ método que verifica se termina com o trecho ~ 'Hakuna'.endsWith('na') === true

t.replace(tr, novo) ~ método que substitui um trecho por algo novo ~ (apenas primeira ocorrência) ~ 'ana'.replace('a', 'e') === 'ena'

t.replaceAll(tr, n) ~ método que substitui um trecho por algo novo ~ (todas as ocorrências) ~ 'ana'.replaceAll('a', 'e') === 'ene'

Lista de métodos de string na MDN

Métodos comuns de vetores (1/3)

Assim como as strings, os vetores também possuem vários métodos úteis

vetor.length ~ não é método, mas retorna tamanho do vetor ~ [5].length === 1

vetor[i] ~ não é método, mas retorna i-ésimo elemento ~ [3, 10][0] === 3 ~ js let letras = ['x']; letras[0] = 'y';

Métodos comuns de vetores (2/3)

vetor.push(elem) ~ método que insere elem ao final do vetor ~ ['a'].push('b') === ['a', 'b']

vetor.pop() ~ método que remove último elemento ~ ['a', 'b'].pop() === ['a']

vetor.indexOf(elem) ~ método que retorna o índice do elemento no vetor (ou -1) ~ [5,6,7].indexOf(5) === 0 ~ [5,6,7].indexOf(2) === -1

Métodos comuns de vetores (3/3)

vetor.reverse() ~ método que inverte a ordem dos elementos ~ [1,2,3].reverse() === [3,2,1]

vetor.sort() ~ método que coloca os elementos em ordem ~ [8,1,-6].sort() === [-6,1,8] ~ ['f', 'b'].sort() === ['b', 'f']

vetor.join(spacer) ~ método que retorna uma string juntando os elementos ~ ['fl', 'rb'].join(' ') === 'fl rb' ~ ['fl', 'rb'].join('+') === 'fl+rb'

Lista de métodos comuns de vetores na MDN

Referências

Capítulo 2 do livro “JavaScript: The Good Parts”
Mozilla Developer Network (MDN)