What Do You Know About Javascript - Gudio Tutorial

    Social Items


All About Javascript

Hello blogger, wherever you are. Meet again with me in this Gudio Blog. For those of you who have just visited this blog for the first time, this Gudio Blog is a blog that discusses programming, both web, desktop and mobile, tips and tricks about blogs, android and more about technology. I always try to provide something useful for all of you, which I wrote in each article on this blog.

Okay, that's my brief introduction to this blog. In this article, now I will discuss about "What Do You Know About Javascript". Have you ever heard of javascript or have you used javascript often? In this article, I will not discuss javascript tutorials, I will discuss later after I made an introduction to this javascript article.


What Is Javascript

Javascript is a programming language on the web. If you look at the source code of a web, you will definitely see some javascript code in it. Almost all websites today, definitely use javascript. Because by using javascript, the website becomes more interactive and dynamic.


Javascript is a client-side programming language. Javascript doesn't always have to be on a website but without javascript, a website will feel bland.

With this javascript, you can do many things on your website like, determine the layout of the website, give a response when a button is clicked on by the user, gallery of images and more. This JavaScript is supported by almost all existing web browsers.


History of Javascript

This Javascript was first developed by "Brendan Eich" where it used to be, this Javascript is called LiveScript before now we are familiar with Javascript, although this language has nothing to do with the Java and Javascript programming languages ​​this is a language that is also used for AJAX.

In 1996, JavaScript was officially referred to as ECMAScript, then ECMAScript 2 was launched in 1998 and ECMAScript 3 was introduced in 1999. ECMAScript was developed to eventually become JavaScript as we know it today. Not only in the browser, JavaScript can also be used on various devices, including mobile devices and computers.

Since then, JavaScript has continued to grow and develop. And in 2016, 92% of websites were known to use JavaScript. Within twenty years, JavaScript has switched from a very limited and 'primitive' programming language to one of the most important tools for web developers. If most of the time is spent surfing the internet, then you must be very familiar with JavaScript.

Brendan Eich, the Javascript developer, used to be someone who worked at the Netscape Company, a company that developed web browsers. And now this javascript developer "Brenda Eich" is a Co-Founder at the Mozilla-Foundation. I am sure you have often heard the name Mozilla. Right?

The following below is a version of ECMAScript until now:
ECMAScript version Year of Release
ES 1 June 1997
ES 2 June 1997
ES 3 December 1999
ES 4 -
ES 5 December 2009
ES 5.1 Juni 2011
ES 6 Juni 2015
ES 7 Juni 2016
ES 8 Juni 2017



Disadvantages And Advantages of Javascript

Advantages of Javascript
This JavaScript has several advantages in terms of making the website more dynamic and interactive. Here are some of the advantages of the javascript that I am trying to summarize:

  1. Easy to learn compared to other programming languages.
  2. Can be used in various browsers as well as various devices, whether desktop or mobile.
  3. In terms of, fixing code problems, javascript is easier to handle.
  4. Faster and lighter when compared to other programming languages.
  5. Does not require an IDE like other programming languages, even if only using notepad on windows, you can still make this javascript code.

Disadvantages of Javascript:
In every existing programming language, of course there must be things that are lacking. The following are the shortcomings of Javascript (in my opinion, and do not represent the opinions of many people):

  1. Can be used to activate malicious codes on a user's computer.
  2. Lots of JavaScript code snippets
do you want to add more? once again, the advantages and disadvantages of the javascript above are in my opinion and do not represent the opinions of others.
As mentioned above, javascript is used to make a web page more interactive and dynamic. In the use of javascript code, it is needed for websites that are oriented to user-experience. However, using this javascript code will not be maximized if it is not accompanied by the use of CSS because javascript will not be separated from HTML.

The three programming languages ​​are very closely related. And in my personal opinion, HTML without CSS won't be interesting, HTML without Javascript won't be dynamic, HTML + CSS without Javascript won't be an attractive website. And HTML + Javascript without CSS won't make an attractive website. If one of the three is not in a Wesbite, the website will feel bland.

For example: Without javascript, when performing certain actions, for example, clicking on a web page, the results or responses from the results of those clicks must be loaded on another page. This is of course very troublesome because not every click action produces large / large results. Sometimes the result of an action is only a sentence "You have successfully entered data", for example.


How JavaScript Works

This JavaScript is not a compiled language, it means to run this javascript code does not require a compiler, where the javascript code is directly processed by the web browser. And of course, so that this javascript can run perfectly, the browser used by the user must already support javascript. But take it easy, almost most browsers currently support javascript.

Usually this javascript is embed directly into HTML or it can also use an external link. External javascript link is javascript hosted differently from HTML. So that later, what is written in HTML is a link from the javascript. As I wrote above, this javascript is client-side based. That is, javascript on a website will be downloaded to the device used by the user to access a website, and after that javascript will be processed after the javascript has been downloaded completely. Unlike other programming languages ​​that use server-side, the file or code will be processed on the server, after the server has finished the process, the file or code is sent to the user.



Javascript Console

We can use the tool provided in the browser to see the java script console. In this console we can see if an error occurs in the javascript code created.

Each browser is usually included with the console. So we don't need to use another application to test the javascript code.
The way to open your web is the javascript code, then right click on the browser, select "inspect." And select "Console" in the menu above.
You can also write commands on the console. For example, type the command on the console as follows:

console.log("Hello World");

You can also create an Alert on the console, for example you can type the command below on the console.

alert("Thank you for visiting my blog at Gudio Blog");

And when you hit enter on the keyboard, an alert will appear, as shown below:

Browser Console

By using this media console, some of the benefits we can get, such as:

  1. The console can be used to test functions or javascript code.
  2. We can quickly find out whether there is a problem with the function or javascript code that we created. If a problem occurs, we can fix it right away.
  3. Enough to use a browser, we can already do this trial, we no longer need to install additional applications




Data Type In Javascript

In every programming language that exists, of course it will definitely have a data type, as well as javascript. The following below is a javascript data type:
  1. Number
  2. String
  3. Boolean
  4. Array
  5. Object
I will discuss one by one the data types above and with a simple example.

Data Number Type
The numerical data type in Javascript or what is called an integer. In every programming language there must be this integer data type. For how to write this integer with javascript like this:

<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
    <p style="font-size:30px;">
        Gudio Blog : Tutorial Integer Javascript
    </p>
    <div id="result"></div><br />
    <button onclick="clickMy()";>Click Me To Show Variable Number</button>
    <script>
    var num=120;
    document.getElementById("result").innerHTML="This Is The Variable       Number = " +  num;
        function clickMy(){
         alert("This Is The Variable Number : " + num);
        }
  </script>
</body>
</html>


in the code example above is to display integers which are variables. And if you click the button, it will display an alert in the browser that contains integer variables.

String Data Type
This data type is in the form of a word or sentence that will be displayed by Javascript. I am sure, you already know what a String Data Type is because in every programming language there must be a data type like this.

Below is a simple example, how to use this string data type in javascript.

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
    <p style="font-size:30px;">
        Gudio Blog : Tutorial String Javascript
    </p>
    <div id="clr"></div><br />
    <button onclick="clickMy()";>Click Me To Show Variable String</button>
    <script>
    var tks="I'm studying string data types in javascript";
    document.getElementById("clr").innerHTML="This Is The Variable       String = " +  tks;
        document.getElementById("clr").style.color="red";
        function clickMy(){
         alert("This Is The Variable String : " + tks);
        }
  </script>
</body>
</html>


just like the example in the previous javascript integer, for example the following string data type to display the word or sentence we have specified in the variable part.

Boolean Javascript Data Type
This data type is to compare between 2 variables and this boolean data type will produce data "True" and "False". Only those two data will be generated by this Boolean Data Type.

Below is a simple example in javascript:

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<p style="font-size:30px;font-weight:bold;">Gudio Blog : Tutorial Boolean Javascript</p>
<p>is 10 greater than 8? (10> 8) <span id="ansV1"></span></p>
<p>is 3 greater than 7? (3> 7) <span id="ansV2"></span></p>
<button onclick="checkV1();">Check The Answer</button>

<script>
  function checkV1() {
     document.getElementById("ansV1").innerHTML = Boolean(10>8);
      document.getElementById("ansV2").innerHTML = Boolean (3>7);
    }
</script>
</body>
</html>


Array Data Type
Data Types Arrays are data types that are capable of storing more than one data in one variable. We can save by using variables with type strings or integers.

The following below I include a simple example of an array data type:

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<p style="font-size:30px;font-weight:bold;">Gudio Blog Tutorial : Array Javascript</p>
<p>Check Lowest and Highest Numbers:</p>
<ul>
<li>25</li>
<li>8</li>
<li>100</li>
<li>45</li>
<li>78</li>
<li>30</li>
</ul>

<button onclick="checkLow();">Check Lowest Number</button>
<button onclick="checkHigh();">Check Highest Number</button>
<br/>
<p id="result" style="font-weight:bold;color:red;"></p>

<script>
  function checkLow() {
     var points = [25,8,100,45,78,30];
     points.sort(function(a, b){return a-b});
   document.getElementById("result").innerHTML = points[0];
    }
    function checkHigh() {
     var points = [25,8,100,45,78,30];
     points.sort(function(a, b){return a-b});
   document.getElementById("result").innerHTML = points[5];
    }
  
</script>
</body>
</html>


In the example above, how to determine the lowest number and the highest number are:

  • to find the lowest number, set points [0]
  • to find the highest number, set points [length - 1]


Data Object Type
This Data Object Type contains more than one data in a variable. The data can be a word or it can be a number.

For more details, please see the simple example below:

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<p style="font-size:30px;font-weight:bold;">Gudio Blog : Object Types Javascript</p>

<p style="font-size:20px;">Form User Registration:</p>
<div style="font-size:13px;padding-bottom:30px;">
    <div>
      <span>Input Your Name:</span>
      <input type="teks" id="nameUs">
    </div>
    <div style="padding-top:5px;">
      <span>Input Your Username:</span>
      <input type="teks" id="usr">
    </div>
    <div style="padding-top:5px;">
      <span>How Old Are You:</span>
      <input type="number" id="old">
    </div>
    <div style="padding-top:5px;">
      <span>What Do You Do:</span>
      <select id="select1" name="select1">
        <option value="Programmer">Programmer</option>
        <option value="Blogger">Blogger</option>
        <option value="Freelancer">Freelancer</option>
        <option value="Give">Please Give Me A Job</option>
      </select>
    </div>
</div>
<div style="padding-bottom:10px;"><p id="result"></p></div>
<button onclick="UserData();">Show Data From User</button>

<script>
  
  function UserData(){
      var nameUsr = document.getElementById("nameUs").value;
        var username = document.getElementById("usr").value;
        var oldYou = document.getElementById("old").value;
        var job = document.getElementById("select1").value;
        
      document.getElementById("result").innerHTML = "The following is the data that the user enters. Your Name is :"+nameUsr +" and "+username+ " is your username. Your Age Is : " + oldYou+ " and your job is : "+ job;
    }
  
</script>
</body>
</html>





Writing Javascript Code in HTML

To write javascript code in HTML, so that the HTML we make becomes more dynamic, there are actually several ways that we can use, such as:
  1. Embed: i.e. the javascript code directly attached to HTML (usually placed between the tags <head> with </ head> or between <body> with </ body>.
  2. Inline: i.e. javascript code that we create directly in the HTML attribute.
  3. External Link: the javascript code that we create with a location that is different from HTML and that needs to be added to HTML is a link from the javascript where we upload it.
Writing Javascript Code With the Embed Method
Using this method, we will use the <script> tag to embed the Javascript code in HTML. This tag can be written in the <head> and <body> tags.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Gudio Blog Tutorial</title>
        <script>
            console.log("Hello Word from tag Head");
        </script>
    </head>
    <body>
        <p>Javascript Tutorial : Embed Javascript</p>
        <script>
            console.log("Hello World from tag body");
        </script>
    </body>
</html>

When you run the code in the browser, only the text that appears in the browser "Javascript Tutorial: Embed Javascript". Maybe you will ask, what about the words "Hello word from tag head" and "Hellow word from tag body"? because the text is in the console command. So, the text will only appear on the console, if you open the console in the browser, the text will be visible.


Writing Javascript Code With the Inline Method
Writing javascript code with the inline method here means to insert javascript code in HTML attributes or elements. Usually writing with this inline method is used to call a function at a particular event.

Example :

<!DOCTYPE html>
<html>
    <head>
        <title>Gudio Blog Tutorial</title>
    </head>
    <body>
        <p>Javascript Tutorial : Inlin Javascript</p>
        <button onclick="alert('This Is Tutorial Inline Javascript From Gudio Blog')">Click Me</button>
    </body>
</html>


in the code above, the javascript code is placed inside the element button. If you want to know the results, please click the demo button above.

Below, it is still an inline javascript code, but the inline javascript code below contains a function.


<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<button onclick="myFunction()">Click me to change text color bellow.</button>
<h1 id="demo">This Is Tutorial Inline Javascript With Function</h1>
<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>


The code above is a very simple code in Javascript. And now you should be able to make inline javascript in HTML.

Writing Javascript Code With External Link Method
And now we will practice how to use external javascript links for HTML. So we will create one javascript file and one HTML (separately), for this demo we don't need to upload the javascript file online, enough to create a folder on your computer and create the javascript file below, you can use notepad or text other editors.

function myFunction() {
  document.getElementById("demo").style.color = "red";
}

If you have created it, save the file in the notepad that you created in the folder you created earlier. Remember when saving files with notepad, make sure the file extension is * .js.

Now create the HTML file, you can also use notepad or other text editor that you have and make sure when saving it, the file extension is * .html

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<button onclick="myFunction()">Click me to change text color bellow.</button>
<h1 id="demo">This Is Tutorial Inline Javascript With Function</h1>
<script type="text/javascript" src="exlink.js"></script>
</body>
</html>


Conclusion

Learning Javascript if you already know the basics will be easy and certainly fun. When discussing Javascript, certainly not enough with this one article, but with the discussion of the basics of javascript as I wrote in this article, I hope you understand and can make a simple javascript code for your HTML.

Hopefully this article can be useful for all of you and please share my article on your social media if you think this article is worth sharing. And don't forget to follow me on social media to get the latest information. We meet again next time and with another interesting article.

Regards
Gudio Blog

What Do You Know About Javascript


All About Javascript

Hello blogger, wherever you are. Meet again with me in this Gudio Blog. For those of you who have just visited this blog for the first time, this Gudio Blog is a blog that discusses programming, both web, desktop and mobile, tips and tricks about blogs, android and more about technology. I always try to provide something useful for all of you, which I wrote in each article on this blog.

Okay, that's my brief introduction to this blog. In this article, now I will discuss about "What Do You Know About Javascript". Have you ever heard of javascript or have you used javascript often? In this article, I will not discuss javascript tutorials, I will discuss later after I made an introduction to this javascript article.


What Is Javascript

Javascript is a programming language on the web. If you look at the source code of a web, you will definitely see some javascript code in it. Almost all websites today, definitely use javascript. Because by using javascript, the website becomes more interactive and dynamic.


Javascript is a client-side programming language. Javascript doesn't always have to be on a website but without javascript, a website will feel bland.

With this javascript, you can do many things on your website like, determine the layout of the website, give a response when a button is clicked on by the user, gallery of images and more. This JavaScript is supported by almost all existing web browsers.


History of Javascript

This Javascript was first developed by "Brendan Eich" where it used to be, this Javascript is called LiveScript before now we are familiar with Javascript, although this language has nothing to do with the Java and Javascript programming languages ​​this is a language that is also used for AJAX.

In 1996, JavaScript was officially referred to as ECMAScript, then ECMAScript 2 was launched in 1998 and ECMAScript 3 was introduced in 1999. ECMAScript was developed to eventually become JavaScript as we know it today. Not only in the browser, JavaScript can also be used on various devices, including mobile devices and computers.

Since then, JavaScript has continued to grow and develop. And in 2016, 92% of websites were known to use JavaScript. Within twenty years, JavaScript has switched from a very limited and 'primitive' programming language to one of the most important tools for web developers. If most of the time is spent surfing the internet, then you must be very familiar with JavaScript.

Brendan Eich, the Javascript developer, used to be someone who worked at the Netscape Company, a company that developed web browsers. And now this javascript developer "Brenda Eich" is a Co-Founder at the Mozilla-Foundation. I am sure you have often heard the name Mozilla. Right?

The following below is a version of ECMAScript until now:
ECMAScript version Year of Release
ES 1 June 1997
ES 2 June 1997
ES 3 December 1999
ES 4 -
ES 5 December 2009
ES 5.1 Juni 2011
ES 6 Juni 2015
ES 7 Juni 2016
ES 8 Juni 2017



Disadvantages And Advantages of Javascript

Advantages of Javascript
This JavaScript has several advantages in terms of making the website more dynamic and interactive. Here are some of the advantages of the javascript that I am trying to summarize:

  1. Easy to learn compared to other programming languages.
  2. Can be used in various browsers as well as various devices, whether desktop or mobile.
  3. In terms of, fixing code problems, javascript is easier to handle.
  4. Faster and lighter when compared to other programming languages.
  5. Does not require an IDE like other programming languages, even if only using notepad on windows, you can still make this javascript code.

Disadvantages of Javascript:
In every existing programming language, of course there must be things that are lacking. The following are the shortcomings of Javascript (in my opinion, and do not represent the opinions of many people):

  1. Can be used to activate malicious codes on a user's computer.
  2. Lots of JavaScript code snippets
do you want to add more? once again, the advantages and disadvantages of the javascript above are in my opinion and do not represent the opinions of others.
As mentioned above, javascript is used to make a web page more interactive and dynamic. In the use of javascript code, it is needed for websites that are oriented to user-experience. However, using this javascript code will not be maximized if it is not accompanied by the use of CSS because javascript will not be separated from HTML.

The three programming languages ​​are very closely related. And in my personal opinion, HTML without CSS won't be interesting, HTML without Javascript won't be dynamic, HTML + CSS without Javascript won't be an attractive website. And HTML + Javascript without CSS won't make an attractive website. If one of the three is not in a Wesbite, the website will feel bland.

For example: Without javascript, when performing certain actions, for example, clicking on a web page, the results or responses from the results of those clicks must be loaded on another page. This is of course very troublesome because not every click action produces large / large results. Sometimes the result of an action is only a sentence "You have successfully entered data", for example.


How JavaScript Works

This JavaScript is not a compiled language, it means to run this javascript code does not require a compiler, where the javascript code is directly processed by the web browser. And of course, so that this javascript can run perfectly, the browser used by the user must already support javascript. But take it easy, almost most browsers currently support javascript.

Usually this javascript is embed directly into HTML or it can also use an external link. External javascript link is javascript hosted differently from HTML. So that later, what is written in HTML is a link from the javascript. As I wrote above, this javascript is client-side based. That is, javascript on a website will be downloaded to the device used by the user to access a website, and after that javascript will be processed after the javascript has been downloaded completely. Unlike other programming languages ​​that use server-side, the file or code will be processed on the server, after the server has finished the process, the file or code is sent to the user.



Javascript Console

We can use the tool provided in the browser to see the java script console. In this console we can see if an error occurs in the javascript code created.

Each browser is usually included with the console. So we don't need to use another application to test the javascript code.
The way to open your web is the javascript code, then right click on the browser, select "inspect." And select "Console" in the menu above.
You can also write commands on the console. For example, type the command on the console as follows:

console.log("Hello World");

You can also create an Alert on the console, for example you can type the command below on the console.

alert("Thank you for visiting my blog at Gudio Blog");

And when you hit enter on the keyboard, an alert will appear, as shown below:

Browser Console

By using this media console, some of the benefits we can get, such as:

  1. The console can be used to test functions or javascript code.
  2. We can quickly find out whether there is a problem with the function or javascript code that we created. If a problem occurs, we can fix it right away.
  3. Enough to use a browser, we can already do this trial, we no longer need to install additional applications




Data Type In Javascript

In every programming language that exists, of course it will definitely have a data type, as well as javascript. The following below is a javascript data type:
  1. Number
  2. String
  3. Boolean
  4. Array
  5. Object
I will discuss one by one the data types above and with a simple example.

Data Number Type
The numerical data type in Javascript or what is called an integer. In every programming language there must be this integer data type. For how to write this integer with javascript like this:

<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
    <p style="font-size:30px;">
        Gudio Blog : Tutorial Integer Javascript
    </p>
    <div id="result"></div><br />
    <button onclick="clickMy()";>Click Me To Show Variable Number</button>
    <script>
    var num=120;
    document.getElementById("result").innerHTML="This Is The Variable       Number = " +  num;
        function clickMy(){
         alert("This Is The Variable Number : " + num);
        }
  </script>
</body>
</html>


in the code example above is to display integers which are variables. And if you click the button, it will display an alert in the browser that contains integer variables.

String Data Type
This data type is in the form of a word or sentence that will be displayed by Javascript. I am sure, you already know what a String Data Type is because in every programming language there must be a data type like this.

Below is a simple example, how to use this string data type in javascript.

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
    <p style="font-size:30px;">
        Gudio Blog : Tutorial String Javascript
    </p>
    <div id="clr"></div><br />
    <button onclick="clickMy()";>Click Me To Show Variable String</button>
    <script>
    var tks="I'm studying string data types in javascript";
    document.getElementById("clr").innerHTML="This Is The Variable       String = " +  tks;
        document.getElementById("clr").style.color="red";
        function clickMy(){
         alert("This Is The Variable String : " + tks);
        }
  </script>
</body>
</html>


just like the example in the previous javascript integer, for example the following string data type to display the word or sentence we have specified in the variable part.

Boolean Javascript Data Type
This data type is to compare between 2 variables and this boolean data type will produce data "True" and "False". Only those two data will be generated by this Boolean Data Type.

Below is a simple example in javascript:

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<p style="font-size:30px;font-weight:bold;">Gudio Blog : Tutorial Boolean Javascript</p>
<p>is 10 greater than 8? (10> 8) <span id="ansV1"></span></p>
<p>is 3 greater than 7? (3> 7) <span id="ansV2"></span></p>
<button onclick="checkV1();">Check The Answer</button>

<script>
  function checkV1() {
     document.getElementById("ansV1").innerHTML = Boolean(10>8);
      document.getElementById("ansV2").innerHTML = Boolean (3>7);
    }
</script>
</body>
</html>


Array Data Type
Data Types Arrays are data types that are capable of storing more than one data in one variable. We can save by using variables with type strings or integers.

The following below I include a simple example of an array data type:

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<p style="font-size:30px;font-weight:bold;">Gudio Blog Tutorial : Array Javascript</p>
<p>Check Lowest and Highest Numbers:</p>
<ul>
<li>25</li>
<li>8</li>
<li>100</li>
<li>45</li>
<li>78</li>
<li>30</li>
</ul>

<button onclick="checkLow();">Check Lowest Number</button>
<button onclick="checkHigh();">Check Highest Number</button>
<br/>
<p id="result" style="font-weight:bold;color:red;"></p>

<script>
  function checkLow() {
     var points = [25,8,100,45,78,30];
     points.sort(function(a, b){return a-b});
   document.getElementById("result").innerHTML = points[0];
    }
    function checkHigh() {
     var points = [25,8,100,45,78,30];
     points.sort(function(a, b){return a-b});
   document.getElementById("result").innerHTML = points[5];
    }
  
</script>
</body>
</html>


In the example above, how to determine the lowest number and the highest number are:

  • to find the lowest number, set points [0]
  • to find the highest number, set points [length - 1]


Data Object Type
This Data Object Type contains more than one data in a variable. The data can be a word or it can be a number.

For more details, please see the simple example below:

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<p style="font-size:30px;font-weight:bold;">Gudio Blog : Object Types Javascript</p>

<p style="font-size:20px;">Form User Registration:</p>
<div style="font-size:13px;padding-bottom:30px;">
    <div>
      <span>Input Your Name:</span>
      <input type="teks" id="nameUs">
    </div>
    <div style="padding-top:5px;">
      <span>Input Your Username:</span>
      <input type="teks" id="usr">
    </div>
    <div style="padding-top:5px;">
      <span>How Old Are You:</span>
      <input type="number" id="old">
    </div>
    <div style="padding-top:5px;">
      <span>What Do You Do:</span>
      <select id="select1" name="select1">
        <option value="Programmer">Programmer</option>
        <option value="Blogger">Blogger</option>
        <option value="Freelancer">Freelancer</option>
        <option value="Give">Please Give Me A Job</option>
      </select>
    </div>
</div>
<div style="padding-bottom:10px;"><p id="result"></p></div>
<button onclick="UserData();">Show Data From User</button>

<script>
  
  function UserData(){
      var nameUsr = document.getElementById("nameUs").value;
        var username = document.getElementById("usr").value;
        var oldYou = document.getElementById("old").value;
        var job = document.getElementById("select1").value;
        
      document.getElementById("result").innerHTML = "The following is the data that the user enters. Your Name is :"+nameUsr +" and "+username+ " is your username. Your Age Is : " + oldYou+ " and your job is : "+ job;
    }
  
</script>
</body>
</html>





Writing Javascript Code in HTML

To write javascript code in HTML, so that the HTML we make becomes more dynamic, there are actually several ways that we can use, such as:
  1. Embed: i.e. the javascript code directly attached to HTML (usually placed between the tags <head> with </ head> or between <body> with </ body>.
  2. Inline: i.e. javascript code that we create directly in the HTML attribute.
  3. External Link: the javascript code that we create with a location that is different from HTML and that needs to be added to HTML is a link from the javascript where we upload it.
Writing Javascript Code With the Embed Method
Using this method, we will use the <script> tag to embed the Javascript code in HTML. This tag can be written in the <head> and <body> tags.
Example:

<!DOCTYPE html>
<html>
    <head>
        <title>Gudio Blog Tutorial</title>
        <script>
            console.log("Hello Word from tag Head");
        </script>
    </head>
    <body>
        <p>Javascript Tutorial : Embed Javascript</p>
        <script>
            console.log("Hello World from tag body");
        </script>
    </body>
</html>

When you run the code in the browser, only the text that appears in the browser "Javascript Tutorial: Embed Javascript". Maybe you will ask, what about the words "Hello word from tag head" and "Hellow word from tag body"? because the text is in the console command. So, the text will only appear on the console, if you open the console in the browser, the text will be visible.


Writing Javascript Code With the Inline Method
Writing javascript code with the inline method here means to insert javascript code in HTML attributes or elements. Usually writing with this inline method is used to call a function at a particular event.

Example :

<!DOCTYPE html>
<html>
    <head>
        <title>Gudio Blog Tutorial</title>
    </head>
    <body>
        <p>Javascript Tutorial : Inlin Javascript</p>
        <button onclick="alert('This Is Tutorial Inline Javascript From Gudio Blog')">Click Me</button>
    </body>
</html>


in the code above, the javascript code is placed inside the element button. If you want to know the results, please click the demo button above.

Below, it is still an inline javascript code, but the inline javascript code below contains a function.


<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<button onclick="myFunction()">Click me to change text color bellow.</button>
<h1 id="demo">This Is Tutorial Inline Javascript With Function</h1>
<script>
function myFunction() {
  document.getElementById("demo").style.color = "red";
}
</script>
</body>
</html>


The code above is a very simple code in Javascript. And now you should be able to make inline javascript in HTML.

Writing Javascript Code With External Link Method
And now we will practice how to use external javascript links for HTML. So we will create one javascript file and one HTML (separately), for this demo we don't need to upload the javascript file online, enough to create a folder on your computer and create the javascript file below, you can use notepad or text other editors.

function myFunction() {
  document.getElementById("demo").style.color = "red";
}

If you have created it, save the file in the notepad that you created in the folder you created earlier. Remember when saving files with notepad, make sure the file extension is * .js.

Now create the HTML file, you can also use notepad or other text editor that you have and make sure when saving it, the file extension is * .html

<!DOCTYPE html>
<html>
<head>
<title>Gudio Blog Tutorial</title>
</head>
<body>
<button onclick="myFunction()">Click me to change text color bellow.</button>
<h1 id="demo">This Is Tutorial Inline Javascript With Function</h1>
<script type="text/javascript" src="exlink.js"></script>
</body>
</html>


Conclusion

Learning Javascript if you already know the basics will be easy and certainly fun. When discussing Javascript, certainly not enough with this one article, but with the discussion of the basics of javascript as I wrote in this article, I hope you understand and can make a simple javascript code for your HTML.

Hopefully this article can be useful for all of you and please share my article on your social media if you think this article is worth sharing. And don't forget to follow me on social media to get the latest information. We meet again next time and with another interesting article.

Regards
Gudio Blog
iklan related post
Load comments