Ticker

6/recent/ticker-posts

How to get started javaScript (for beginners)

 Before JavaScript, we need to know A little bit about HTML and CSS

First, we need some knowledge of HTML and CSS, because any web page will contain those to finish the job and get the final product. It is so easy to learn. There are many tags in HTML to build a web page. I will provide below examples to get an idea. 

HTML - (HyperText Markup Language)

It has a Head and a Body. To understand it. look at this picture.

<head>...........</head>



<body>...........</body>


The final product of HTML as below


<html>
        <head>
                ...................................
        </head>
        <body>
                ...................................
        </body>
   </html>

We use many tags like <title>,<h1>, <p>,<form>,<input>,<button>, and so on. After adding all tags according to your need for the web page, You will see the basic output like the above picture. There I no styling and it just pretty basic appearance.

CSS - (Cascading Style Sheets)

After building the web page using HTML, we have to style it using CSS. Then we can give a perfect beautiful appearance to the web page. CSS can be used in three ways. They are inline, internal, and external options.

The tags will build specific elements in the web page. So we can use ids or classes to identify them uniquely. 

The final product as below, after styling using CSS


<html>
        <head>
                          ...................................
        <style>
           boby{
               background-color:orange; 
            }
        </style>
        </head>
        <body>
                ...................................
        </body>
 </html>


Let's move to JavaScript

Where we can run JavaScript? yeah. It can be done in several ways. I will show you a few examples to run JavaScript.

The first one is the browser's console

we can use edge or chrome browsers to run JavaScript. To do that, go to one of the browser and press "ctrl+shift+i " as a short cut or right-click on any space of the browser's window and click on "Inspect". In both ways, you will be able to see some awesome things on your screen. Then select the console tab. You will see it below.

Step one:



Step two:



Write the command "console.log('Hello World');" and hit enter. If you are a beginner, you will see the first "Hello World" output below from the console by generating with JavaScript.




The second one, use <script></script> tags inside of HTML

We can use the above example in this way also.

<html>
        <head>
             <title>Learn javaScript</title>
        <style>
           body{
                 background-color: orange; 
           }
     </style>
        </head>
        <body>
            <script>
console.log('Hello World');
</script>
        </body>
</html>

The output only can see inside the console, because of "console.log('Hello World');" line. To get a better understanding I will provide the below result of the above full code usage.




Post a Comment

0 Comments