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); } }
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!