Hey @iwanttobedev,
Whenever you are writing JavaScript for a website, within the browser the window.document object should be available. The window.document can be used to select elements on the page, then to add behaviours to them. Such as click.
Adding JavaScript to a web page can be done in many ways in AEM, but the best practice when adding JavaScript on an AEM website is via client libraries.
Client libraries in AEM are one of the most popularly used features provided by AEM. It allows us to not only manage our client-side resources like (JavaScript, CSS, images, fonts etc...) but also provide options to debug, minify, merge and gzip the client-side code.
First things first, you need to understand the items listed below:
- What are client libraries in AEM - https://www.youtube.com/watch?v=8i2Uy_99_TU
- How to create a client library in AEM. - https://www.youtube.com/watch?v=caJa4i35UPI
- How to call a client library on AEM from a page component. - https://www.youtube.com/watch?v=mFeieUsaMDY
Understanding how to what are client libraries, how to create client libraries, and how to call client libraries from your page will the best place to start.
Sometimes if you want to run a small script in your AEM web page, and creating a new client library is not required, you can add inline JavaScript to the bottom of your web page (it's best practice to run JavaScript as close to the closing </body> tag as possible).
Inline JavaScript example:
<script type="text/javascript">
document.getElementsByTagName('body')[0].style.display = 'none';
</script>
I hope this helps.
