Depois de preparar-me para lidar com as várias ferramentas que a cozinha disponibiliza, está na altura de entender os termos do manual de instruções.
Parece-me uma boa ideia entendender os termos antes de os usar, pois fará mais sentido usa-los depois de saber para que servem. ( faz sentido )
Creio que no post anterior, disse que teria de instalar o Babel para usar a versão mais actual do JavaScript, mas na verdade para fazer o que estou a pensar fazer ( refazer o site odicforcesounds.com ) não tenho necessidade.
Talvez quando começar a programar a aplicação, tenha essa necessidade para lidar com a base de dados, mas para já, não há qualquer ponto que indique a necessidade vertical de usar essas librarias. Ainda bem porque na verdade só por instalar essas librarias todas, tenho de usar mais de 300MB.
Tenho de focar-me somente no que realmente preciso, pois não há a necessidade de aprender profundamente a dominar todos os recursos da língua para fazer algo relativamente básico.
Para me facilitar a vida, vou usar o Google Chrome DevTools que permite programar directamento na consola / local WorkSpace sem necessidade de usar um editor. Mesmo assim, para testar as funcionalidades da língua, a consola é o primeiro passo para estruturar objectivos. Mas um editor de texto preparado para o desenvolvimento da língua com os parametros coloridos, é mais fácil de ler e escrever código.
O JavaScript supera por completo a primeira ideia que tinha da língua. Serve primariamente para adicionar e remover conteúdo de forma dinâmica, isto é, a partir do JavaScript e não a partir do HTML.
Considere-se o seguinte exemplo:
<html>
<head><title>Olá Mundo</title></head>
<body>
<div id="main">
<ul id="#itemList>
<li></li>
</ul>
<li>
</div>
</body>
</html>
Para seleccionar a Tag <ul> podia simplesmente usar a função: document.getElementByTagName('<ul>');
Sendo que estou a usar um ID (id=#itemList) posso usar a função:
document.getElementById('#itemList');
Assim já posso atribuir um valor à primeira tag <li>.
const itemsList = document.querySelector('#itemList'); <<< Declaração de variavel não mutável:
itemsList.innerHTML = '<p> This is a test </p>'; <<< substituição do conteúdo da tag <li>
Para adicionar conteúdo em vez de substituir, usa-se o operador +=
Para adicionar conteúdo em vez de substituir, usa-se o operador +=
O JavaScript pode ser usado para imensas coisas, mas para já irei focar-me no método de converter objectos de JSON em strings. Posso fazer essa conversão via Parse ou via JSON.stringify().
Ainda não domino essa técnica, mas será parte da segunda parte deste post.
Talvez possa criar todos os elementos usados na página, a partir de um ficheiro.json
A documentação do site: MDN é extenso e tem muitos exemplos práticos. É a partir desta forte que tenho estudado JavaScript, HTML e CSS. Existem muitas fontes para o mesmo efeito, mas esta é uma das mais recomendadas!
Espero trazer algo de novo amanhã e adicionar novo conteúdo à conta do github.
Quem quiser seguir o desenvolvimento do blog / projecto, basta se inscrever como seguidor do meu perfil e\ou subscrever a minha actividade no Github.
Até à próxima e obrigado pela atenção!
Comentários
Enviar um comentário