AEM website can include & run front-end JavaScript logic like all other websites. Note, There’s nothing special about an AEM web page, as an AEM page rendered output is nothing but a standard HTML document; there’s no magic or surprises.
In this article, we will explore the 4 techniques of how we can include JavaScript within a webpage.
Including JavaScript By:
1. HTML Event Attributes
HTML possesses the capability to let events trigger actions in a browser, for example, executing JavaScript logic when a user clicks, hovers, drags, or keypress an element on a page. These events include onclick, onmouseout, ondrag, oncopy, etc…
Use Case:
Quickly way to add interactions to a unique HTML element on the page, as a proof of concept. Then later implement the same functionality with a front-end JavaScript application with tests.
Examples:
<div class="back-to-top" onclick="window.scrollTo(0,0);"> // Execute a JavaScript when this button is clicked
<a href="#" onmouseover="window.alert('mouse over')">Test</a> // Execute a JavaScript when moving the mouse pointer over the <a> tag
<a href="#" onmouseout="window.alert('mouse out')">Test</a> //Execute a JavaScript when moving the mouse pointer out of the <a> tag
<input type="text" name="fullname" onkeydown="window.alert('key down')"> // Execute a JavaScript when a user presses a key
<input type="text" name="fullname" onkeyup="window.alert('key released')"> // Execute a JavaScript when a user releases a key
<input type="text" name="fullname" onfocus="window.alert('focused')"> // Execute a JavaScript when the input field is focused (selected)
<input type="text" name="fullname" onblur="window.alert('blurred')"> // Execute a JavaScript when the input field is blurred (unselected)
2.Inline JavaScript
Inline JavaScript can be executed by using <script> tag inside the <head> or <body> of the HTML document object model (DOM). Instead of specifying the source(src=”…”) of the JavaScript file in the <script> tag, JavaScript code can be written within the Script tag.
Use Case:
Supporting Adobe Analytics’s Data Layer JSON schema configuration values, based on the context of the page.
Examples:
3. Internal Client Libraries JavaScript
This is the HTML document that references the internal JavaScript file (compiled from client libraries).
The most common way to declare CSS styles and JavaScript behavior to an AEM website is the use of AEM client libraries. A Client library is very specific to AEM where it is simply a configuration declaring which CSS, JS, Resource files to be bundled; a client library can also bundle other client library configurations, and it has the capability to minify and debug. It is by choice and the preferred way that all AEM sites utilize client libraries to define a website.
Use Case:
Example – Result of Rendered Page:
4. External JavaScript
This is the HTML document that references the external JavaScript file.
Use Case:
1. HTML Event Attributes
HTML possesses the capability to let events trigger actions in a browser, for example, executing JavaScript logic when a user clicks, hovers, drags, or keypress an element on a page. These events include onclick, onmouseout, ondrag, oncopy, etc…
Use Case:
Quickly way to add interactions to a unique HTML element on the page, as a proof of concept. Then later implement the same functionality with a front-end JavaScript application with tests.
Examples:
<div class="back-to-top" onclick="window.scrollTo(0,0);"> // Execute a JavaScript when this button is clicked
<a href="#" onmouseover="window.alert('mouse over')">Test</a> // Execute a JavaScript when moving the mouse pointer over the <a> tag
<a href="#" onmouseout="window.alert('mouse out')">Test</a> //Execute a JavaScript when moving the mouse pointer out of the <a> tag
<input type="text" name="fullname" onkeydown="window.alert('key down')"> // Execute a JavaScript when a user presses a key
<input type="text" name="fullname" onkeyup="window.alert('key released')"> // Execute a JavaScript when a user releases a key
<input type="text" name="fullname" onfocus="window.alert('focused')"> // Execute a JavaScript when the input field is focused (selected)
<input type="text" name="fullname" onblur="window.alert('blurred')"> // Execute a JavaScript when the input field is blurred (unselected)
2.Inline JavaScript
Inline JavaScript can be executed by using <script> tag inside the <head> or <body> of the HTML document object model (DOM). Instead of specifying the source(src=”…”) of the JavaScript file in the <script> tag, JavaScript code can be written within the Script tag.
Use Case:
Supporting Adobe Analytics’s Data Layer JSON schema configuration values, based on the context of the page.
Examples:
<!DOCTYPE html>
<html>
<head>
<title>Inline JavaScript Example</title>
</head>
<body>
<h1 id="intro">Hello World</div>
<script type="text/javascript">
var digitalDataLayer = {
environment: {
environmentVersion: "6.0.5.1",
environmentName: "production",
siteName: "SourcedCode.com",
statusCode: 200
},
target: {},
page: {
pageInfo: {
pageName: "home",
pageReferrer: document.referrer,
pageSiteSection: "homepage",
pageSiteSubsection: "",
pageType: "homepage",
pageURL: "https://www.sourcedcode.com"
}
}
}
</script>
</body>
</html>
3. Internal Client Libraries JavaScript
This is the HTML document that references the internal JavaScript file (compiled from client libraries).
The most common way to declare CSS styles and JavaScript behavior to an AEM website is the use of AEM client libraries. A Client library is very specific to AEM where it is simply a configuration declaring which CSS, JS, Resource files to be bundled; a client library can also bundle other client library configurations, and it has the capability to minify and debug. It is by choice and the preferred way that all AEM sites utilize client libraries to define a website.
Use Case:
- Serving JS and CSS from source files in AEM.
- Serving organized JS and CSS from different client libraries in AEM.
- Stitching multiple client libraries to be served in a single CSS or JS file.
<!DOCTYPE html>
<html>
<head>
<title>Client Librbary JavaScript file</title>
<!--/* Load sourcedcode libraries, css */-->
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
<sly data-sly-call="${clientlib.css @ categories='sourcedcode.utils,sourcedcode.site'}"/>
</head>
<body>
...
...
<!--/* Load sourcedcode libraries, js */-->
<sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html"/>
<sly data-sly-call="${clientlib.js @ categories='sourcedcode.utils,sourcedcode.site'}"/>
</body>
</html>
Example – Result of Rendered Page:
<!DOCTYPE html>
<html>
<head>
<title>Client Librbary JavaScript file</title>
<script src="/etc.clientlibs/my-site/clientlibs/clientlibs-utils.css"></script>
<script src="/etc.clientlibs/my-site/clientlibs/clientlibs-site.css"></script>
</head>
<body>
...
...
<script src="/etc.clientlibs/my-site/clientlibs/clientlibs-utils.js"></script>
<script src="/etc.clientlibs/my-site/clientlibs/clientlibs-site.js"></script>
</body>
</html>
4. External JavaScript
This is the HTML document that references the external JavaScript file.
Use Case:
- Referencing the Adobe Dynamic Tag Manager (DTM) library to support Adobe DTM features.
- Referencing to the Adobe Analytics library, to support Adobe Analytics features.
- Referencing third-party libraries, to support libraries features.
<!DOCTYPE html>
<html>
<head>
<title>External Librbary JavaScript file</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
...
...
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>
No comments:
Post a Comment
If you have any doubts or questions, please let us know.