Using JavaScript inside Visualforce pages gives you access to a large range of existing JavaScript functionality, such as JavaScript libraries, and other ways to customize your pages. Action tags, like <apex:actionFunction> and <apex:actionSupport>, support Ajax requests.
The best way for including JavaScript inside a Visualforce page is placing the JavaScript in a static resource, then calling it from there. For e.g.

<apex:includeScript value="{!$Resource.MyJavascriptFile}"/>

You can then utilize the functions defined within that JavaScript file within your page using <script> tags.

onclick="{!IF(false, 'javascript_call(\"js_string_parameter\")', 'else case')}" 

Reference Components from JavaScript using $Component
Use the $Component global variable to ease referencing the DOM ID which is generated for a Visualforce component, and reduce some of the dependency on the overall page structure.
Every Visualforce tag has an id attribute. The id attribute of a tag can be used by another tag to bind the two tags together. For example, the <apex:outputLabel> tag’s for attribute can be used with the <apex:inputField> tag’s id attribute. The status and reRender attributes on <apex:actionSupport>, <apex:actionFunction> and other action-oriented components also use the value of the id attribute from other components.
In addition to being used to bind Visualforce components together, this ID attribute is also used to form part of the document object model (DOM) ID for the component when the page is rendered.
In order to refer to a Visualforce component inside JavaScript or another Web-enabled language, you must provide a value for the id attribute for that component. A DOM ID is constructed from a combination of the id attribute of the component and the id attributes of all components that contain the element.
How to access a component with Example?
The following example utilizes the DOM ID for an <apex:outputPanel> tag. The page contains two panels: the first panel holds a checkbox that fires a DOM event, and the second panel contains some text that’s changed in response to the event.
The top of the page includes JavaScript contained within the <script> HTML tag. It takes two argument, the first argument is the element that triggered the event and the second argument is the DOM ID (textid) of the target panel which contains the text to be affected.

<apex:page id="thePage">
    <!-- A simple function to change the font of a text. -->
    <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20function%20changeFont(input%2C%20textid)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20if(input.checked)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(textid).style.fontWeight%20%3D%20%22bold%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20else%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20document.getElementById(textid).style.fontWeight%20%3D%20%22normal%22%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
    <!-- This outputPanel calls the function, passing in the checkbox itself, and the DOM ID of the target component. -->
    <apex:outputPanel layout="block">
        <label for="checkbox">Click this box to change text font:</label>
        <input id="checkbox" type="checkbox" onclick="changeFont(this,'{!$Component.thePanel}');"/>
    </apex:outputPanel>
    <!-- This outputPanel is the target, and contains text that will be changed. -->
    <apex:outputPanel id="thePanel" layout="block">
        Change my font weight!
    </apex:outputPanel>
</apex:page>

The {!$Component.thePanel} expression is used to obtain the DOM ID of the HTML element generated by the <apex:outputPanel id=”thePanel”> component.