JavaScript Tutorial - JavaScript Introduction

Posted by Ridwan Fadilah on Aug 29, 2020 - 11:16 pm

JavaScript Introduction

Beginners JavaScript Course! Introduction to JavaScript. The first steps to learn JavaScript and examples of how it works.

JavaScript is the world's most popular programming language. JavaScript is one of the programming languages used on a Web.

JavaScript was also easy to learn and often use for web-frontend development.

Now, let's learn it from the basics!

Table of Contents

What Is JavaScript?

JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc.

Source: MDN, https://developer.mozilla.org/

What Is JavaScript Can Do?

This list contains some examples of what JavaScript can do:

  • JavaScript Can Change HTML Content
  • JavaScript Can Change HTML Attribute Values
  • JavaScript Can Change HTML Styles (CSS)
  • JavaScript Can Show or Hide HTML Elements
Change HTML Content

One of the JavaScript use is using JavaScript to change the HTML content.

To change the HTML content, you need to use JavaScript method. One of many JavaScript HTML methods is getElementById().

In the example below, you will see how to change HTML element content (innerHTML) using JavaScript.

Example:


<!DOCTYPE html>
<html>
<body>

<h2>Change HTML Content</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

Here's the result of the code above:

See the Pen Change HTML content with JavaScript by Ridwan (@ridwan-the-bold) on CodePen.


Change HTML Attribute Values

In this JavaScript Introduction, you will also learn how to change HTML attribute values using JavaScript.

How to change HTML attribute values with JavaScript? See the example below. In this case, JavaScript changes the value of the src (source) attribute of an image.

Example:


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript change HTML attribute values.</h2>

<p>Try to click the button and see how it work.</p>

<button onclick="document.getElementById('myImage').src='worried.png'">Worried Emoji</button>

<img id="myImage" src="smile.png" style="width:100px">

<button onclick="document.getElementById('myImage').src='smile.png'">Smile Emoji</button>

</body>
</html>

Here's the result of the code above:

See the Pen Change HTML Attribute Values with JavaScript by Ridwan (@ridwan-the-bold) on CodePen.


Change HTML Styles (CSS)

This is a variant of changing an HTML attribute, JavaScript can change the HTML style or CSS.

Example:


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Introduction</h2>

<p id="demo">Change HTML Style (CSS) with JavaScript.</p>

<button type="button" onclick="document.getElementById('demo').style.fontSize='20px'">Click Me!</button>

</body>
</html>

Here's the result of the code above:

See the Pen Change HTML Style (CSS) with JavaScript by Ridwan (@ridwan-the-bold) on CodePen.


Show or Hide HTML Elements

See the example below to show or hide HTML elements with JavaScript.

Example:


<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Tutorial</h2>

<p id="demo">Show or Hide HTML Element with JavaScript.</p>

<button type="button" onclick="document.getElementById('demo').style.display='none'">Hide</button>

<button type="button" onclick="document.getElementById('demo').style.display='block'">Show</button>

</body>
</html>

Here's the result of the code above:

See the Pen Show or Hide HTML Element with JavaScript by Ridwan (@ridwan-the-bold) on CodePen.


JavaScript Tag

You can place the JavaScript code separately with the element that will use JavaScript.

In HTML, the JavaScript code can be inserted between the <script> and </script> tag, and then place it inside the body or head element.

In the example below, the content of the <p> element will display by JavaScript code.

Example:


<!DOCTYPE html>
<html>
<body>

  <h2>JavaScript Tutorial - JavaScript Tag In Body Element</h2>

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

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

</body>
</html>

Here's the result:

See the Pen JavaScript In The HTML Body Element by Ridwan (@ridwan-the-bold) on CodePen.


Here's the example of JavaScript tag inside the <head> element.

Example:


<!DOCTYPE html>
<html>

<head>

  <script>
    function myFunction() {
      document.getElementById("demo").innerHTML = "A paragraph.";
    }
  </script>

</head>

<body>

  <h2>JavaScript Tutorial - JavaScript Tag In Head Element</h2>

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

  <button type="button" onclick="myFunction()">Click me!</button>

</body>
</html>

Here's the result:

See the Pen JavaScript Tag Inside The HTML Head Element by Ridwan (@ridwan-the-bold) on CodePen.


External JavaScript

External scripts are practical when the same code is used in many different web pages.

The JavaScript file name must be saved with .js extension.

To use an external script, put the name of the script file in the src (source) attribute of a <script> tag:


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

In the example above, the JavaScript file is located in the same folder with the HTML document.

External JavaScript File Folder
External References

The last but not least of the JavaScript introduction is the external references.

External scripts can be referenced with a full URL or with a path relative to the current web page.

Here's the example:

- Full URL to link to a script


  <script src="https://somewhere/js/script.js"></script>

- The script located in a specified folder on the current web site:


  <script src="/js/script.js"></script>
The JavaScript located in a specified folder

Okay, that's a little JavaScript Introduction. Next, you will learn about the JavaScript Syntax.

You can read another JavaScript basics tutorial in the related article below. You can also find another tutorial on our YouTube Channel.

Thanks for reading.


Related Articles