JavaScript Tutorial for Beginners #2-Write your First Code


In this tutorial we are going to learn where
in the HTML page you should place your JavaScript files and how to write the first
code in JavaScript. Stay tuned. [music..] Hello and welcome to another new episode of
learning simplified. In this tutorial we are
going to cover three main things that we are going to categorize into the following
orders.. In the first position we are going to know
about the text editor that we are going to choose. In the 2nd phase we are going to learn about
where in the HTML page we should place our JavaScript file and in the
last category we are going to understand how to write our first code in JavaScript. Now in choosing the text editor, you can choose
any kind of text editor you want. You
may use notepad, you may use Notepad++, or you may use Atom as I am using here. Now
selecting Atom as my text editor have some certain definite causes, but the most
important of it is it is an open source software. That means we are able to create our
project with using Atom software and we can commercialize them; there’s no problem with
it and this is the link of Atom, it is given in the description below. No this is in the 2nd phase that we are going
to know about where to place our JavaScript files. In this particular case you may have observed
that we have created an index.HTML, that means this is practically
an HTML page. Now inside this HTML page I can
create JavaScript files in two places – the first one is just below this title tag, that
means in the head part; if we have to place our JavaScript files inside this body tag
then the most obvious thing is after a long term coding of your HTML page you have to
create your JavaScript files just above this closing body tag. So these are the two
places where you may put your JavaScript files. The first one is into the head tag and
the second one is into the body tag. This is how you will have to create your JavaScript. No this is the syntax that you can use to
create your JavaScript code and another thing that you need to mention over here is, the
type. You have to write here… Ok. In this particular location I would like to
mention that that if you have created a separate JavaScript file, if you have created
a separate JavaScript folder then all you need to do you need to link it over here and
we have to provide the folder name, as we did in our previous occasion. So this will be your prototype coding. But in this
particular case we are not using any kind of source file so that is why I will be
discarding it off. There’s no need of it. Now we have created this script type. This is the primary coding that you need to
know and inside this script file here comes the third Emphasis of this tutorial and it
is how to write our first JavaScript. Inside
this one, suppose I am typing here ” document.write();”. Now document.write(); is a
special instruction that is provided to write something into your HTML page. Suppose
instead of this I am writing here ” hello cruel world” without typing any
document.write(); or this kind of thing. Now if we just get back to our project and
reload and we can see that there is no output practically as your HTML page cannot
understand what is written inside this JavaScript Syntax and that is why it is not
returning anything as an output of this webpage. And that is why it is executing a
blank display. But if we now write here.. This is the instruction, this particular
instruction is saying this to HTML page that you have to write something into your page,
it is practically sending and instruction to the Browser that you have to write this
particular string that is being written over here and after that all we need to do you
need to create an opening first bracket and closing first bracket. And another thing,
you are practically writing a string here; you are presenting a string. String is a
collection of words or alphabets and sometimes you can use a numeral. If you use a
numeral, such as instead of using these words if I place here 12 then 12 number or
numeral it will be practically interpreted as a string as you have written It Inside
an inverted comma. And that is why anything that is written inside
this inverted comma, it will be treated as a string. So this time it is being treated as a string,
it is not being used as a numeral. We are now writing here hello cruel world
and we are ending this instruction with a semi-colon at the end. Now if we press control + s and get back to
our project and reload we can see that is hello cruel world,
this string is practically being executed into your web page. Now another thing, suppose I want to create
another new line – ” how beautiful you are”. This should be coming under a new line just
beneath this hello cruel world text. Writing another string here, for say, I am
writing it in this way. Now if we press Control + s and get back to
our project and reload then we can see that both of them are coming as a single line. Both of them are coming side by side. But this
was not our true intention. We wanted the second text “how beautiful you
are”, that should be coming vertically down. So what to do? That is why all we need to do we need
to create here this one. You know this tag very well. This is a
tag, that means
this is a line break tag and its operation is to bring anything down and make it into
a new line. So the objective of using this empty Tagore
this line break tag into this part is to bring this thing down into a new line
and we can use any kind of HTML tag inside this particular character as we have told
you previously that all of these things those will be treated as a string. In this particular case whenever you placing
any kind of tag inside this particular inverted comma,
then it will be interpreted by the machine as
an HTML document or an HTML tag. Now Press control +s and get back to your
project and reload and now you can see that hello cruel world and how beautiful you are,
both of them are maintaining a very separate line. Now in a particular case one of the most important
thing is if you need to comment out this particular segment if
you do not wish to keep it anymore, then all you can do you can do here, you can use this
kind of commenting system and if you just come back to your project and reload then
you can see that all the things are now disappeared. But what happens if we use multiple lines
for say, document.write(); and then comes… This one and another thing something is written
over here.. And another
thing something is written over here and all of them are working well but you do not
wish to keep them anymore; you want to comment them out, so what is the only way that
you can do? If you wish to comment it out as we have seen
in our previous case then in every cases all you have to do you have to
maintain this constant thing. But this is not
the exact dessert thing. So this is why we do not wish to comment our
multi-line JavaScript code in this way. The basic thing in that particular case should
be, just use the common css comment out technique. Sooner if we get back and reload then we can
see that nothing is being executed. And inside this thing you can write anything
you want; you may write your company name you may write
your own name, you made right why it was built and the exact time stamp creating this
JavaScript code and then you may start your java scripting. So this is the exact purpose of commenting
a particular JavaScript, a particular scripting code inside your main
HTML page. In case of singular line you can
use a double slash in case of a multiple line you may use commenting as we have seen in
case of a CSS file. So hope you guys have like this tutorial. In the next tutorial we are going to learn
about escape sequence. Subscribe us. If you liked our video then share us, like
us, comment on us. Hope to see you guys in our next tutorial. Till then, bye.

Add a Comment

Your email address will not be published. Required fields are marked *