060 - Write a document describing how to add JavaScript to a Joomla template

Google's Highly Open Participation Program tries to get young students into Open Source and Joomla! specifically. Everyone is welcome, there are not limits. You can be a coder, documenter, tester, translator to help out. Jump in and start helping!
willwill
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sat Dec 01, 2007 3:28 pm

060 - Write a document describing how to add JavaScript to a Joomla template

Postby willwill » Sat Dec 01, 2007 3:31 pm

I have already wrote the docs but chris.da...@joomla.org posted that I need to use API call.
Where to put that command to? The template? Some component? or where?

Thank you.

Google Task
[me=AmyStephen]Changed subject slightly for sorting all threads to match against Google resource  :)[/me]
Last edited by AmyStephen on Mon Dec 10, 2007 3:12 am, edited 1 time in total.

User avatar
jlleblanc
Joomla! Guru
Joomla! Guru
Posts: 963
Joined: Fri Aug 19, 2005 12:37 am
Location: Washington, DC / NoVA
Contact:

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby jlleblanc » Sat Dec 01, 2007 3:45 pm

Yes, there are API calls you can use to put Javascript and CSS files in the head section of the document. These can be called from components, modules, or plugins. I do this very frequently for projects where I want to add styles and scripts to my components, but I still want to maintain valid HTML by keeping all CSS and JS references in the header.
Joseph L. LeBlanc: http://www.jlleblanc.com
Frontend components start here: /components/com_[name]/[name].php
Backend components start here: /administrator/components/com_[name]/admin.[name].php

willwill
Joomla! Fledgling
Joomla! Fledgling
Posts: 4
Joined: Sat Dec 01, 2007 3:28 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby willwill » Sat Dec 01, 2007 4:26 pm

And in the tutorial, where I should put it?
I remembered it said that who that don't know PHP/JS can understand this howto so I think they must don't edit the component without PHP knowledge.

User avatar
jlleblanc
Joomla! Guru
Joomla! Guru
Posts: 963
Joined: Fri Aug 19, 2005 12:37 am
Location: Washington, DC / NoVA
Contact:

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby jlleblanc » Sat Dec 01, 2007 9:40 pm

The audience will need some very basic PHP knowledge, probably at the level where they could echo "Hello World!" within an if() statement. However, they won't need knowledge of object-oriented programming or complex array structures to accomplish this.
Joseph L. LeBlanc: http://www.jlleblanc.com
Frontend components start here: /components/com_[name]/[name].php
Backend components start here: /administrator/components/com_[name]/admin.[name].php

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Sun Dec 02, 2007 3:28 am

are you the same guy that claimed this task on the google webpage? because i only see another person that unclaimed it and after him i clamied the task. anyway i have a draft already going to upload to the google issue tracker. going to upload as html but i am not sure in what format to upload the file. heres the draft as a attachtment and the image that should go at the botton of the file. would like some feedback guys  :DImage
You do not have the required permissions to view the files attached to this post.
Last edited by annerajb on Sun Dec 02, 2007 3:40 am, edited 1 time in total.


annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Sun Dec 02, 2007 2:01 pm

i would like to call for a final review as i dont see anything else that i could improve unless anyone has some feedback on things to add to it.

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Tue Dec 04, 2007 12:18 am

i fixed some stuff hopefully its better now i removed the image because i fell it wasnt needed but if somebody things its ok with a screenshot i will put it back :D. BTW: joomla is a great community :D
You do not have the required permissions to view the files attached to this post.
Last edited by annerajb on Tue Dec 04, 2007 12:24 am, edited 1 time in total.

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby AmyStephen » Tue Dec 04, 2007 3:57 am

annerajb wrote:BTW: joomla is a great community :D


That makes me -->  :)

Feedback:

- API - all caps
- Never forget the ! on Joomla! (don't ask, just do it!  ;))
- Get rid of "we"
- remove extra words, too. For example, you can change this:
Requirements: You will need some basic knowledge of PHP programming language

To:
Requirements: Basic knowledge of PHP


Geeks don't like to read.  ;)

- perfom should be perform

- exampe if we are putting -- For example, if we are putting

In general - try to format your code with a Courier New 10 (something fixed).

In the addScript function - consider printing all of the lines together, either before or after each individual line is explained.

++++

This is an example of a plugin I wrote that uses the addScript. That might be a better format since it uses the JURI::base().
global $mainframe;

// Load the Mootools library
JHTML::_('behavior.mootools');
     
// Add Javascript
$document =& JFactory::getDocument();
$document->addScript( JURI::base() . 'plugins/content/mootoolsaccordion.js' );


It's getting there - and this will be useful - so thanks for your efforts!
Amy :)

PS - White space is very helpful with technical documents.

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Tue Dec 04, 2007 1:49 pm

sorry my native language is not English thats why i have so many typos.
In general - try to format your code with a Courier New 10 (something fixed).

you mean change the font of the document? if yes i don't have that font in openoffice
Last edited by annerajb on Tue Dec 04, 2007 1:55 pm, edited 1 time in total.

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby AmyStephen » Tue Dec 04, 2007 1:59 pm

Don't worry - we all have typo's!

I would use Courier New (size 10) for the code examples - not the entire document. It is a very standard font - I wonder if you looked in the font drop down list box for Open Office, if you would find it? Check it out and see.

Thanks!
Amy :)

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Tue Dec 04, 2007 3:00 pm

i checked only have courier i am using fedora so maybe thats why is not there. also i remember reading somewhere that complete path ie. http://www.joomla.org/hello.js are more resource intensive on the server or the other way around. does JURI:base() returns the complete path as webadress or just the folder that joomla is in?

AmyStephen
Joomla! Champion
Joomla! Champion
Posts: 7056
Joined: Wed Nov 22, 2006 3:35 pm
Location: Nebraska
Contact:

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby AmyStephen » Tue Dec 04, 2007 3:08 pm

JURI:base() returns the folder.

Courier is fine! :)

Doing good! Thanks!
Amy :)

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Tue Dec 04, 2007 3:55 pm

well done for today need to head to school. heres my latest revision. enjoy :D
You do not have the required permissions to view the files attached to this post.

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Thu Dec 06, 2007 6:04 am

anybody has any feedback on the latest revision of my doc?

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1383
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby Chris Davenport » Fri Dec 07, 2007 9:06 am

Good work Chalet.  I can see that you have listened to the feedback and taken it on board.  Here are some suggestions to make it even better:

The code samples are not particularly readable, mostly because of long lines getting wrapped.  I would suggest you remove the comment blocks containing the @copyright and @license tags as these are not really adding anything useful to the samples.  I think you can also drop the code samples down to 10pt instead of 12pt so they are less likely to wrap.

Code samples in the official documentation get copied and pasted a lot so we try to make sure they show best practice ways of doing things.  So with that in mind, all references to external files should be prefixed with JURI::base().

The second piece of example code can, I think, be stripped down to the single line:

Code: Select all

$document =& JFactory::getDocument();

leaving the third example to set it in context.

Always have a single line of white space above and below each code fragment.

There are numerous grammatical errors, but as you are not a native English-speaker I won't criticise you for that.  Contributions to the official documentation from native and non-native English-speakers are equally welcome as the Doc Team will always apply the final "translation" and polish.  However, these are a few things to watch out for:-
  • Always spell Joomla! with a capital "J" and with a final "!".
  • Be careful with the word "Joomla!" in the middle of a sentence as most word processors will automatically capitalise the first letter of the next word.
  • "Api" should be capitalised so it becomes "API".

Keep on it; you're nearly there.  :)

Regards,
Chris.
Chris Davenport - Joomla Production Leadership Team

Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Fri Dec 07, 2007 2:27 pm

yeah i am focusing first on the actual content after that i will ask for somebody to help me find gramatical errors. thanks for your feedback guys ;)

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Fri Dec 07, 2007 3:18 pm

woot i took a look and there are some awesome task ;) to do.

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Fri Dec 07, 2007 3:35 pm

where here it is latest version of my document as always any feedback will be welcome ;) if it's ok tell me to send it to somebody for grammar checking.
You do not have the required permissions to view the files attached to this post.

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1383
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby Chris Davenport » Fri Dec 07, 2007 10:18 pm

Yep, that's a step closer.  :)

In the first code sample: you still have a problem with line wrapping.  This is a common issue that we face in the Doc Team all the time and we have developed some simple strategies for getting round such problems.  The obvious one is to reduce the font size, which you have done, but you still have a problem.  So then we might try shortening the code lines, perhaps by giving some variables shorter names or using shorter pathnames, but there doesn't seem to be much scope for that here.  So the next idea is to try re-phrasing the code to achieve the same effect but maybe use more, shorter lines, instead of a single, long line.  So try this..... try replacing this:

Code: Select all

$this->addScript(JURI::base()."templates/".$this->template."/hello.js");


with this:

Code: Select all

$js = 'templates/' . $this->template . '/hello.js';
$this->addScript( JURI::base() . $js );


Incidentally, are you sure that JURI::base() returns '/' when the Joomla! root is in the web server document root?  If it just returns an empty string then your code must supply the '/' itself, so it would become:

Code: Select all

$js = '/templates/' . $this->template . '/hello.js';
$this->addScript( JURI::base() . $js );


Still on the first code sample, I like the way you put the line(s) of interest to the reader into bold on your other code samples.  Perhaps you could do the same with this one.

On the third code sample, you seem to have included a call to addScript just before the call to addScriptDeclaration.  I think that should be removed (probably a cut-and-paste error).

Nearly there.  Keep up the good work. :)

Regards,
Chris.
Chris Davenport - Joomla Production Leadership Team

Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Sat Dec 08, 2007 5:32 am

fixed a bug in the code
also deleted the xhtml dtd line because theres now way to stop if from wrapping and added a js variable as instructed in case that line of code wraps too i use the highest resolution on my pc's so i am not sure if its my end or yours so just to be sure ;). comments as always wanna get started coding :D
You do not have the required permissions to view the files attached to this post.

User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1383
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby Chris Davenport » Sat Dec 08, 2007 9:29 am

Hi annerajb,

This looks really good now.  Well done.  :)

If you want to ask someone to correct grammatical errors that's up to you.  It won't affect your chances of winning any prize as we will make allowances for your being a non-native English-speaker.

When you are happy with your entry please call for a Final Review.

Good work!  :)
Chris.
Chris Davenport - Joomla Production Leadership Team

Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/

annerajb
Joomla! Intern
Joomla! Intern
Posts: 62
Joined: Tue Sep 04, 2007 8:59 pm

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby annerajb » Sat Dec 08, 2007 2:14 pm

wuju going to upload to google later today let me send it to somebody for prof reading.


User avatar
Chris Davenport
Joomla! Ace
Joomla! Ace
Posts: 1383
Joined: Thu Aug 18, 2005 8:57 am
Location: Shrewsbury, Shropshire, United Kingdom

Re: 060 - Write a document describing how to add JavaScript to a Joomla template

Postby Chris Davenport » Sat Dec 08, 2007 7:07 pm

Task closed.

Thanks annerjb. :)

Chris.
Chris Davenport - Joomla Production Leadership Team

Lion Coppice http://www.lioncoppice.org/
Davenport Technology Services http://www.davenporttechnology.com/


Return to “Google's Highly Open Participation Contest”

Who is online

Users browsing this forum: No registered users and 0 guests