Eu queria saber como combinar meu código javaScript em html mais não sei como class tú { constructor(elemento) { this._elemento = elemento] } update(model) { this._elemento.innerHTML = this._template(model); } }
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Eu queria saber como combinar meu código javaScript em html mais não sei como class tú { constructor(elemento) { this._elemento = elemento] } update(model) { this._elemento.innerHTML = this._template(model); } }
Olá, Jorge! Como vai?
Para combinar seu código JavaScript com HTML, você pode incluir o script JavaScript diretamente em um arquivo HTML ou referenciar um arquivo JavaScript externo. Vou te mostrar como fazer isso de ambas as maneiras:
Incorporando JavaScript diretamente no HTML: você pode colocar o seu código JavaScript dentro de uma tag <script> no próprio arquivo HTML. Aqui está um exemplo:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo</title>
</head>
<body>
<div id="app"></div>
<script>
class Tu {
constructor(elemento) {
this._elemento = elemento;
}
update(model) {
this._elemento.innerHTML = this._template(model);
}
_template(model) {
return `<p>${model}</p>`;
}
}
const elemento = document.getElementById('app');
const tu = new Tu(elemento);
tu.update('Olá, mundo!');
</script>
</body>
</html>
Usando um arquivo JavaScript externo: se preferir manter o código JavaScript separado, você pode criar um arquivo .js e referenciá-lo no HTML. Veja como:
Arquivo HTML (index.html):
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo</title>
</head>
<body>
<div id="app"></div>
<script src="script.js"></script>
</body>
</html>
Arquivo JavaScript (script.js):
class Tu {
constructor(elemento) {
this._elemento = elemento;
}
update(model) {
this._elemento.innerHTML = this._template(model);
}
_template(model) {
return `<p>${model}</p>`;
}
}
const elemento = document.getElementById('app');
const tu = new Tu(elemento);
tu.update('Olá, mundo!');
Lembre-se de corrigir o colchete ] no seu código original para uma chave } no construtor da sua classe.
Espero ter ajudado e bons estudos!