Javascript Introduction By albro

JavaScript is the web programming language and to complement HTML, of course, on the client side!

Do you know what the client side is?

We have two very important parts in the world of web developers. The whole world of web development is communication and this problem can be divided into two parts; server side and client side.

Do you know the difference between the two?

In short, it can be said that the languages that are in the server side category are related to the server and the languages that are in the client side category are related to the user side (i.e. the browser and the user's computer).

What if I don't want to learn JavaScript?

It depends on your goal. Do you want to become a front-end developer (meaning a client-side developer) or a back-end developer (meaning a server-side developer)? You can choose one of these two items professionally.

But I must point out that even if you are interested in server-side topics, you should have at least a basic familiarity with most JavaScript topics because it is so easy to separate these things only on paper.

Some JavaScript topics, such as AJAX, are directly related to the server (sending a request to the server and not processing it). Also, a web page made only with HTML and CSS is extremely dry and inflexible.

For general information, it is good to know that someone who is in control of both the server side and the user side is called a full stack developer.

The thing that all newbies in JavaScript get confused is that Java and JavaScript languages have nothing to do with each other, except that they are both programming languages.

There is a famous quote among JavaScript programmers:

Java is to JavaScript as ham is to hamster.

If you hear the name ECMAScript somewhere, do not hesitate. ECMAScript is a programming standard that languages such as JavaScript follow.

Now what does this JavaScript do for us?

Answering this question is not so simple, because the world of JavaScript is much wider than these words that I can provide a complete answer, but if I am going to tell you briefly and usefully, it can be said: JavaScript was created to bring web pages to life and give them dynamism. In fact, wherever the information is not static and dry and fixed and has a little flexibility, you see the use of JavaScript! These days, you can hardly find a web page that does not use JavaScript. To understand what the world without javascript is like, let's disable javascript in your browser and visit some sites!

JavaScript is a good friend of HTML and CSS and is always with them and in this way it gives unique dynamism to web pages. Therefore, JavaScript should be next to HTML and CSS; This means that we should either write it directly in the HTML document or insert it into HTML like CSS files. For this, there are different methods that I will examine and explain the pros and cons of each.

Don't think that JavaScript is only for working with HTML and CSS. This language is very powerful and even today it can be used on the server side and for processing! Among the existing implementations in this field, Node.js is very famous.

Direct use of JavaScript in HTML

If you want to include your JavaScript code directly in the HTML document, you should put it between < script>< /script> tags. The following is a sample JavaScript code:

< script>document.getElementById("demo").innerHTML = "My First JavaScript";< /script>

Do not worry about the content of the codes for now, we will explain the codes in the future. What I want you to pay attention to is how to implement the codes in HTML. For example, the following code represents a simple HTML document + < script > tags inside it.

<! DOCTYPE html>
< html>
< body>

< p id="demo">Hi.< /p>

< script>
// JavaScript Codes Here
< /script> 

< /body>
< /html>

This method is suitable for short codes, but if your codes become messy or their volume increases (which will happen in 90% of the cases), this method is not a good method at all because the JavaScript codes are buried under the HTML codes and editing them is a messy process.

You may have seen tags in the form of < script type="text/javascript"> in older versions of JavaScript. Nowadays, there is no need to add the type attribute because JavaScript is the default scripting language for HTML.

Defining functions and events in JavaScript

Functions and events in JavaScript are sets of codes that are executed when called and do a specific job. I will give you an example; Consider an event such as clicking a certain button. We can tell the browser with JavaScript if the user clicks on a certain button, rotate the window, display a greeting message, close the page, etc.

The meaning of the script

It can have different meanings in different contexts but here when we say script, we mean your javascript file which contains javascript codes.

We know that if we intend to use the codes directly in HTML, we should put them in < script> tags, but where should we put the < script> tags themselves?

Your scripts can be loaded like CSS files in HTML and in the < head> tag, but not limited to that. You can also put your scripts in the < body> tag.

The following example shows an HTML document that includes a JavaScript function in its < head> tag. This function is called when the user clicks on a certain button.

<! DOCTYPE html>
< html>
< head>
< script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World! I'm @albro Hive Blog.";
}
< /script>
< /head>
< body>

< h1>Hive Blog< /h1>
< p id="demo">I'm Hive Blockchain!< /p>
< button type="button" onclick="myFunction()">Try it< /button>

< /body>
< /html>

In the next example, we can see that this code can also be placed inside the < body> tag:

<! DOCTYPE html>
< html>
< body> 

< h1>Hive Blog< /h1>
< p id="demo">I'm Hive Blockchain!< /p>
< button type="button" onclick="myFunction()">Try it< /button>

< script>
function myFunction() {
 document.getElementById("demo").innerHTML = "Hello World! I'm @albro Hive Blog.";
}
< /script>

< /body>
< /html>

Indirect (external) usage in HTML

You can put it in a separate file and then load that file in HTML for ease of work, better management and easier management of your JavaScript codes. The steps are as follows:

1. First, create an empty text file.
2. Choose a name for your text file and its extension .js put.
3. Write your codes in it

In the last step, put the address of your file in the src attribute of the < script > tags:

< script src="myCode.js">< /script>

This script, just like writing code directly in HTML, can be used in < head> and < body> tags.

You should not use the < script> tag in the codes inside the file. We have done this while loading. < script> tags are used only when JavaScript is to be placed inside HTML.

Benefits of using external scripts (writing codes in a separate file):

• Keep HTML and JavaScript separate
• Easier to edit and manage codes
• Cached JavaScript files can increase the speed of your website.

Remember that with this method you can add as many JavaScript files as you like to your HTML document.

With all that said, does it matter which tag we put our javascript files or code in?

The answer is yes! The place of loading JavaScript codes is very important!