Learn how to work with JavaScript

JavaScript is a scripting language based upon Java and it is an Interpreted Language. You require only Notepad and a browser to program using JavaScript. There are two types of scripts.

They are Internal and external. While Internal scripts are written within the header of an HTML file, external scripts are saved in a separate file with extension js. They are then linked in an HTML document with the <script> tag’s src attribute. For example, if the file Myscript.js contains your codes, then it can be linked as follows:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">script</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">&quot;Javascript&quot;</span> <span style="color: #ff0000">src</span> = <span style="color: #0000ff">&quot;Myscript.js&quot;</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;/</span><span style="color: #800000">script</span><span style="color: #0000ff">&gt;</span> 

Hello World program

You can output to the browser document by using the statement given below:

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px">document.write(&quot;Put your text here&quot;) 

Copy the code given below and save the file as Hello.html. Then fire up your browser and open Hello.html file to execute the program.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">HTML</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">HEAD</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>My first JavaScript program<span style="color: #0000ff">&lt;/</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Script</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">&quot;JavaScript&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">document</span>.write (&quot;<span style="color: #8b0000">Hello World</span>&quot;)
&lt;/Script&gt;
&lt;/HEAD&gt; 
&lt;BODY&gt;&lt;/BODY&gt;
&lt;/HTML&gt; 

Using Prompt() and Alert() dialog boxes

Let’s now examine how to add two numbers using JavaScript. The program makes use of Prompt() dialog for accepting the values and Alert() dialog for displaying their sum. Follow the steps in the previous example to save and execute the program.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">HTML</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">HEAD</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>Adding numbers using JavaScript<span style="color: #0000ff">&lt;/</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Script</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">&quot;JavaScript&quot;</span><span style="color: #0000ff">&gt;</span>
&lt;!-- Variable declaration --&gt;
<span style="color: #0000ff">var</span> x, y, z
x = <span style="color: #0000ff">prompt</span>(&quot;<span style="color: #8b0000">Enter first number</span>&quot;)
y = <span style="color: #0000ff">prompt</span>(&quot;<span style="color: #8b0000">Enter second number</span>&quot;)
z = <span style="color: #0000ff">eval</span>(x+y)
<span style="color: #0000ff">alert</span>(&quot;<span style="color: #8b0000">The sum of </span>&quot; +x+ &quot;<span style="color: #8b0000"> and</span>&quot; +y+ &quot;<span style="color: #8b0000">is</span>&quot; +z)
&lt;/Script&gt;
&lt;/HEAD&gt; 
&lt;BODY&gt;&lt;/BODY&gt;
&lt;/HTML&gt; 

Closing the current window using JavaScript

You can design a Web page, so that your users can exit (by clicking a button) from the current window without pressing the close button or by selecting File | Exit menu. Listing 3 illustrates this technique. The program makes use of functions. When a button or a link is clicked, the execution takes place by triggering appropriate event.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">HTML</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">HEAD</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>Adding numbers using JavaScript<span style="color: #0000ff">&lt;/</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Script</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">&quot;JavaScript&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">function</span> ok() { 
Window.<span style="color: #0000ff">close</span>()
}
&lt;/Script&gt;
&lt;/HEAD&gt; 
&lt;BODY&gt;
<p>&lt;input type = &quot;<span style="color: #8b0000">submit</span>&quot; value = &quot;<span style="color: #8b0000">Click here to close</span>&quot; </p><p>onClick = &quot;<span style="color: #8b0000">ok()</span>&quot;&gt;
</p>
&lt;/BODY&gt;
&lt;/HTML&gt;

Likewise, if you apply window.print() the current page will be printed provided user’s printer is not idle.

READ  Learn more about E-mail

Form validation

Validation means checking the correctness of the HTML form fields. It will check whether the user had entered the required information. If not, the script will prompt the user to enter the relevant information to proceed further. Listing 4 explains this concept clearly. As usual try out the code below and observe the results.

<pre style="background-color: #ffffff; margin: 0em; width: 100%; font-family: consolas,&#39;Courier New&#39;,courier,monospace; font-size: 12px"><span style="color: #0000ff">&lt;</span><span style="color: #800000">HTML</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">HEAD</span><span style="color: #0000ff">&gt;</span><span style="color: #0000ff">&lt;</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>Adding numbers using JavaScript<span style="color: #0000ff">&lt;/</span><span style="color: #800000">TITLE</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">&lt;</span><span style="color: #800000">Script</span> <span style="color: #ff0000">language</span> = <span style="color: #0000ff">&quot;JavaScript&quot;</span><span style="color: #0000ff">&gt;</span>
<span style="color: #0000ff">function</span> validate() {
<span style="color: #0000ff">if</span>(f1.tname.value == &quot;<span style="color: #8b0000"></span>&quot;) {
<span style="color: #0000ff">alert</span>(&quot;<span style="color: #8b0000">Please enter your name</span>&quot;)
tname.<span style="color: #0000ff">focus</span>()
} <span style="color: #0000ff">if</span>(f1.tage.value == &quot;<span style="color: #8b0000"></span>&quot;) {
<span style="color: #0000ff">alert</span>(&quot;<span style="color: #8b0000">please enter your age</span>&quot;)
tage.<span style="color: #0000ff">focus</span>()
}
}
&lt;/Script&gt;
&lt;/HEAD&gt; 
&lt;BODY&gt;
&lt;Form <span style="color: #0000ff">name</span> = &quot;<span style="color: #8b0000">f1</span>&quot;&gt;
&lt;input type = &quot;<span style="color: #8b0000">text</span>&quot; <span style="color: #0000ff">name</span> = &quot;<span style="color: #8b0000">tname</span>&quot; &gt;&lt;br&gt;
&lt;input type = &quot;<span style="color: #8b0000">text</span>&quot; <span style="color: #0000ff">name</span> = &quot;<span style="color: #8b0000">tage</span>&quot;&gt;&lt;br&gt;
&lt;input type = &quot;<span style="color: #8b0000">submit</span>&quot; onClick = &quot;<span style="color: #8b0000">validate()</span>&quot;&gt;
&lt;/Form&gt;
&lt;/BODY&gt;
&lt;/HTML&gt;

One Response to "Learn how to work with JavaScript"

  1. gsa search engine ranker tutorial   August 17, 2014 at 10:46 am

    Superb whip! I’m going to newbie at the same time just like you fix your web site, the best way could possibly i personally signed up for just a blog page web page? This accounts served us a appropriate offer. I had been a little bit acquainted in this your transmitted provided brilliant obvious strategy

    Reply

Leave a Reply

Your email address will not be published.