Eu tenho um código javaScript eu queria saber como aplica-lo junto com outros códigos como html e css? class data { this._data = new Date(data.getTime()); } { new data(this._data.getTime()); }
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!
Solucionado
Eu tenho um código javaScript eu queria saber como aplica-lo junto com outros códigos como html e css? class data { this._data = new Date(data.getTime()); } { new data(this._data.getTime()); }
Olá, Jorge! Tudo bem?
Integrar JavaScript com HTML e CSS é uma prática comum no desenvolvimento web, e é ótimo que você esteja explorando isso! Vou te dar um exemplo básico de como você pode fazer isso.
Vamos começar com um arquivo HTML simples. O HTML é a estrutura básica da sua página:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exemplo de Integração</title>
<link rel="stylesheet" href="styles.css"> <!-- Link para o CSS -->
</head>
<body>
<h1 id="titulo">Olá, Mundo!</h1>
<button onclick="mostrarData()">Mostrar Data</button>
<script src="script.js"></script> <!-- Link para o JavaScript -->
</body>
</html>
No exemplo acima, temos um título e um botão. Quando o botão for clicado, ele chamará uma função JavaScript chamada mostrarData().
Agora, vamos criar o arquivo CSS (styles.css) para adicionar um pouco de estilo:
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
button {
padding: 10px 20px;
font-size: 16px;
}
Por fim, vamos adicionar o JavaScript no arquivo script.js:
class Data {
constructor() {
this._data = new Date();
}
getDataFormatada() {
return this._data.toLocaleDateString('pt-BR');
}
}
function mostrarData() {
const dataAtual = new Data();
document.getElementById('titulo').innerText = `Data Atual: ${dataAtual.getDataFormatada()}`;
}
No código JavaScript, criamos uma classe Data que obtém a data atual e tem um método para formatá-la. A função mostrarData() é chamada quando o botão é clicado, e ela atualiza o texto do título com a data formatada.
Esse é um exemplo básico, mas já te dá uma ideia de como HTML, CSS e JavaScript podem trabalhar juntos para criar uma página web interativa.
Espero ter ajudado e bons estudos!