Javascript with Visualforce pages

Javascript with Visualforce pages

Javascript is one of key browser technology on Visualforce pages. Javascript provides the framework for communication between other Javascript objects, HTML elements and visualforce controller. This example will explain how can we use javascripts in visualforce pages.

view plaincopy to clipboardprint?

1. <apex:page>  
2.   
3. <script>  
4. function changeFont(input, textid) {  
5. if(input.checked) document.getElementById(textid).style.fontWeight = "bold";  
6. else document.getElementById(textid).style.fontWeight = "normal";  
7. }  
8. </script>  
9.   
10.   
11. <apex:outputPanel layout="block">  
12. <label for="checkbox">Click this box to change text font: </label>  
13. <input id="checkbox" type="checkbox"  
14. onclick="changeFont(this,'{!$Component.thePanel}');"/>  
15. </apex:outputPanel>  
16.   
17. <apex:outputPanel id="thePanel" layout="block">Change me!  
18. </apex:outputPanel>  
19. </apex:page>  

'{!$Component.idName}' : This is the way of passing particular visualforce component id into the javascript.