---
myst:
html_meta:
"description": ""
"property=og:description": ""
"property=og:title": ""
"keywords": ""
---
# Exercise 2: Include JavaScript In Browser View
```{warning}
This exercise requires a working buildout using a fork of the `collective.jstraining` package.
```
For this exercise, we are simply including JavaScript in a browser view.
You will be working in the `exercise2` directory of the `collective.jstraining` package.
## Add Your JavaScript File
In your `exercise2/static` directory, add a file named `script.js`.
This exercise is open ended as to what you do with JavaScript on the page.
We will stay very simple for the sake of brevity, using [jQuery](https://jquery.com/) to do an animation effect on the title of the page:
```javascript
require([
'jquery'
], function($){
var cycle = function(){
$('h1').animate({
left: '250px',
opacity: '0.5',
'font-size': '30px'
}, function(){
$('h1').animate({
left: '0',
opacity: '1',
'font-size': '20px'
}, function(){
setTimeout(function(){
cycle();
}, 2000);
});
});
};
$(document).ready(function(){
cycle();
});
});
```
Feel free to customize the script to do whatever you like.
## Register Static Resource Directory
Next, let us register the static directory we just placed our script into.
To register it, you need to add {term}`ZCML` registration for the static directory your script is in.
Add this to the `exercise2/configure.zcml` file
```xml
```
## Register JavaScript Resource
Let us register our script as a JavaScript resource with Plone.
In the `exercise2/profiles/default/registry.xml` file, add configuration to register your script:
```xml
++plone++exercise2/script.js
```
## Create Your Browser View
```{warning}
This might be redundant with other documentation.
Skip ahead if you know how to create browser views.
```
Let us load our JavaScript file to only load on a specific page you need it on.
In our case, let us add a basic new page view.
The page template does not need to implement any logic and we can use the main template to bring in the content of the page we are using in the JavaScript(h1).
Add this into your `exercise2/page.pt` file:
```xml
```
## Load Your JavaScript Resource
Add in view Python code to tell Plone to render the script in the `exercise2/browser.py` file:
```python
from Products.CMFPlone.resources import add_resource_on_request
from Products.Five import BrowserView
class Exercise2View(BrowserView):
def __call__(self):
# utility function to add resource to rendered page
add_resource_on_request(self.request, 'exercise2')
return super(Exercise2View, self).__call__()
```
The most interesting part here is to look at `add_resource_on_request`.
Wire it up with {term}`ZCML` registration in the `exercise2/configure.zcml` file:
```xml
```
## Installation
1. Start up your Plone instance
2. Install the `Exercise 2` add-on
Then, visit the URL: `http://localhost:8080/Plone/front-page/@@exercise2`.
This is assuming your Plone is located at the URL `http://localhost:8080/Plone`.
## Production
In this exercise, there is no special distinction between development and production builds.
The JavaScript is developed without any build process.