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