Learn JavaScript from Scratch
Tags: tutorial, javascript
Published: 2022-02-21 13:44:52

<p id="mcetoc_1eu3nn47j0"><span style="font-size: 14pt; font-family: arial, helvetica, sans-serif;">In this post, we will learn the basics of the&nbsp;<a href="https://en.wikipedia.org/wiki/JavaScript" target="_blank" rel="noopener noreferrer">JavaScript</a>&nbsp;programming language. Today javascript has become one of the most popular programming languages on the web and the good part of javascript is easy to learn.</span></p>
<section class="content-body load-external-scripts" style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: var(--font-serif); font-size: 20px; vertical-align: baseline; display: flex; flex-direction: column; color: #3c484e;">
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;"><span style="font-size: 14pt;">In this tutorial, I will teach you some basics of javascript.</span></p>
<h1 id="mcetoc_1f23v513o0" style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; font-size: 14pt;">What is Javascript?</span></h1>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;"><span style="font-size: 14pt;">A&nbsp;<span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;">Programming language</span>&nbsp;that is used to make web pages interactive.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;"><span style="font-size: 14pt;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;">Javascript</span><em style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;">&nbsp;is an easy and lightweight programming language of HTML and web. It is open-source and cross-platform.</em></span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; font-size: 14pt;">What Can I do with Javascript?</span></p>
<ul style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px 1.5em 0px 1.3em; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; list-style-position: initial; list-style-image: initial; max-width: 100%;">
<li style="box-sizing: inherit; margin: 0.5em 0px; padding: 0px 0px 0px 0.3em; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.6em; font-family: inherit; vertical-align: baseline;"><span style="font-size: 14pt;">To make Responsive webpages</span></li>
<li style="box-sizing: inherit; margin: 0.5em 0px; padding: 0px 0px 0px 0.3em; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.6em; font-family: inherit; vertical-align: baseline;"><span style="font-size: 14pt;">Put content in an HTML page on the fly</span></li>
<li style="box-sizing: inherit; margin: 0.5em 0px; padding: 0px 0px 0px 0.3em; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.6em; font-family: inherit; vertical-align: baseline;"><span style="font-size: 14pt;">Validate forms</span></li>
<li style="box-sizing: inherit; margin: 0.5em 0px; padding: 0px 0px 0px 0.3em; border: 0px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: 1.6em; font-family: inherit; vertical-align: baseline;"><span style="font-size: 14pt;">Create Animations,Slideshows,Scrollers,etc</span></li>
</ul>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">In this tutorial, I will teach the basic functionality of javascript to build dynamic web pages and web applications.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">One thing always remembers Javascript must be written between starting and ending tag.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">Let&rsquo;s start.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">In the following example, we will make simple popup box using Javascript.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;"><strong><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;">Example:</span></strong></span></p>
<pre class="language-javascript"><code>&lt;head&gt;
    &lt;title&gt;Javascript Step by step&lt;/title&gt;
    &lt;script&gt;
       //In name variable we will store value recived by popupbox
        var name =prompt('Please Enter Your Name:','Name');
       
        //now it print the value on browser in text format
        document.write('Hello'+' '+name+' '+'To my website');

    &lt;/script&gt;

&lt;/head&gt;
&lt;/html&gt;</code></pre>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">&nbsp;so, in the above example, we created a simple popup box that receives value from the user and displays it on the browser in text format.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">This is the basic example of javascript uses.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">Now we will learn how to create functions in javascript.</span></p>
<h2 id="mcetoc_1f23v6ml51" style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-weight: bold; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline; font-size: 14pt;">How to Create Function In Javascript?</span></h2>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;"><strong><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;">Functions</span></strong>&nbsp;are a Very useful term of any programming language. It is the collection of code and it makes our code dynamic and reusable. so let&rsquo;s start making the function in javascript by the following example:</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;"><strong>Example:</strong></span></p>
<pre class="language-javascript"><code>&lt;html&gt;
&lt;head&gt;
&lt;script&gt;
        function sampleFunction(){
            var name = prompt('Please Enter Your Name:', 'Name');

            document.write('Hello' + 'name' + 'To my website');
        }
    &lt;/script&gt;
&lt;/head&gt;

&lt;input type="button" value="Sample Function" /&gt;
&lt;/html&gt;</code></pre>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">&nbsp;In the above example, we have created a function named &lsquo;sampleFunction&rsquo; and called on the click event of the button. So when the user will click on the button a popup will open and ask for a name and display on the browser. So isn&rsquo;t simple.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;"><strong><span style="box-sizing: inherit; margin: 0px; padding: 0px; border: 0px; font-style: inherit; font-variant: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; vertical-align: baseline;">Conclusion:</span></strong></span><br style="box-sizing: inherit;" /><span style="font-size: 14pt;">Do let me know If you face any difficulties please feel free to comment below we love to help you.if you have any feedback suggestion then please inform us by commenting.</span></p>
<p style="box-sizing: inherit; margin: 0px 0px 1.5em; padding: 0px; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-stretch: inherit; line-height: inherit; font-family: Georgia, Times, serif; vertical-align: baseline; background-color: #ffffff;"><span style="font-size: 14pt;">Don&rsquo;t forget to share this tutorial with your friends on <a title="Facebook" href="https://www.facebook.com/TutsCoder" target="_blank" rel="noopener noreferrer">Facebook</a> and <a title="Twitter" href="https://twitter.com/tutscoder" target="_blank" rel="noopener noreferrer">Twitter</a></span></p>
</section>