How to Implement Java script in VF Page Step by step

                What is the JavaScript & How to use in                                 Visualforce Pages

JavaScript is the programming language of HTML and the Web.

Below is the Link. In which you can read briefly.

https://www.w3schools.com/js/default.asp

How to define Java script in Vf page: Through Sript tag we can define Javascript in Vf Pages.

Example:

<apex:page >

    <apex:outputLabel>FirstName</apex:outputLabel>

    <script>

      alert("This is script");

    </script>

    <apex:outputLabel>LastName</apex:outputLabel>

</apex:page>

STEP - 1

Script is Executing in sequence order and we are not invoking the script from any where.

 You get a alert then click on ok , LastName will show because it's flow in sequence.

FirstName
Script
LastName












STEP - 2

I don't want to script executed itself. I want to invoke my script on my requirement.

Whenever any event is occurring Like - Onclick, Onchange, Onblur, Onfocus. Whenever event occur, I want to invoke script.

So for this we will use function in script.

Syntax: Function functionname(){}

Example: 

<apex:page >

    <script>
       function show()
           {
      alert("This is script");
           }
    </script>
        <apex:form>
    <apex:inputText onchange="show()"/>
    </apex:form>

</apex:page>

Example 2:

<apex:page >
    <script>
       function show()
           {
      alert("This is script");
           }
    </script>
        <apex:form>
    <apex:commandButton value="ClickJavascript" onclick="show()"/>
    </apex:form>

</apex:page>

When we will click on button then javascript function will call.

STEP - 3

Requirment is I want to my name in javascript pop up, So how we can do that.

For this we need syntax like that:

Document.getElementByid('{!$Component.id}').value
Document.getElementByName('{!$Component.name}').value

How to define the way:

Var name = Dcoument.getElementById('{!$Component.id}').value

Any type of variable we can store in var like: String , Double , Integer. 

Don't define any string , Integer , Double. Please define var, it's denote everything which variable you want to use.

var is commmon variable.

Example:

<apex:page id="pg">
  <apex:form id="fm">
      <apex:inputText id="name" onchange="show()"/>   
      <script>
               function show(){
               var myname = document.getElementById('{!$Component.name}').value;
               alert(myname);
              }
      </script>
  </apex:form>

</apex:page>

Whenever data will change in input text then in popup your text will display.

If you are not comfortable with Component. You think that it's difficult so you can define from another way.

Var myname = document.getElementById('page:form:id').value

Means that , Suppose you have declare ids.

<apex:page id="pg">
<apex:form id="fm">  

<apex:inputtext id="name"/>

// there is another way you can define

Var myname = document.getElementById('pg:fm:name').value;

Example:

<apex:page id="pg">

  <apex:form id="fm">

      <apex:inputText id="name" onchange="show()"/>   

      <script>

               function show(){

               var myname = document.getElementById('pg:fm:name').value;

               alert(myname);

              }

      </script>

  </apex:form>

</apex:page>

Full Architecture of running:

 var myname = document.getElementById('pg:fm:name').value;

Take the reference of page id after Take reference of form id after Take reference of input text id.

It fetch the ids and print the value in the popup which you will change in input text.

STEP - 4 

REQUIREMENT is I want to age along with name , How?

<apex:page id="pg">
  <apex:form id="fm">
      <apex:inputText id="name" onchange="show()"/>   
      <script>
               function show(){
               var myname = document.getElementById('pg:fm:name').value;
               var myage = document.getElementById('pg:fm:pb:age').value;
               alert(myname+'==='+myage);
              }
      </script>
      <apex:pageBlock id="pb">
          <apex:inputText id="age" onchange="show()"/>
      </apex:pageBlock>
  </apex:form>

</apex:page>

STEP - 5

Another Example is , I want to read the value and display the values in our component.

Read the value from the component and display the another component.

Example:

<apex:page id="pg">
  <apex:form id="fm">
      <apex:pageBlock id="pb">
          <apex:pageBlockSection id="pbs1">
              <apex:inputText id="one"/>
          </apex:pageBlockSection>
          <apex:pageBlockSection id="pbs2">
              <apex:inputText id="two"/>
              <apex:outputLabel id="three"/>
          </apex:pageBlockSection>
          <apex:commandButton value="Click" onclick="show()"/>
      </apex:pageBlock>
  </apex:form>    
  <script>
    function show(){
     
      // that get the value which we will give in input text
       var myname= document.getElementById('pg:fm:pb:pbs1:one').value;

     //in this we will set the value which we have get into input text
        document.getElementById('pg:fm:pb:pbs2:two').value = myname;

   // And print that value using innerHTML
        document.getElementById('pg:fm:pb:pbs2:three').innerHTML= myname;
    
    
    }
  </script>      
</apex:page>


innerHTML : The innerHTML property is used to get or set the HTML content of an element node.