--- html_meta: "description": "" "property=og:description": "" "property=og:title": "" "keywords": "" --- # Exercise 1: Include a JavaScript resource TTW ```{warning} This exercise requires a working buildout using a fork of the `collective.jstraining` package. ``` For this exercise, we are going to include a JavaScript using the resource registry through the web. You will be working in the `exercise1` directory of the `collective.jstraining` package. ## Create your browser view ```{warning} This might be redundant with other documentation. Skip ahead if you know how to create browser views. ``` Let us add a basic new page view. This is only needed for calling our Javascript file. Add this into your `exercise1/page.pt` file: ```xml ``` And wire it up with {term}`ZCML` registration in the `exercise1/configure.zcml` file: ```xml ``` ## Add your JavaScript file Go to the Site Setup, then to the Resource Registries. Under the `Overrides` tab, click `Add file` When it asks to give it a name, enter `++plone++static/exercise1.js` Inside the new editor that comes up, enter the following: ```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(); }); }); ``` Click `Save` You can verify that the resource works by going to `http://localhost:8080/Plone/++plone++static/exercise1.js` ### Use the Javascript in your template Now, you just need to edit your `exercise1/page.pt` file, so it would look like this: ```xml ``` ### Installation 1. Start up your Plone instance Then, visit the URL: `http://localhost:8080/Plone/front-page/@@exercise1`. 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.