JavaScript Tutorial (Beginner) – Learn JavaScript fast by example

JavaScript

0 Comments

HTML helped us create the basic structure of the page, and CSS let us style it. It's now time to make our pages more interactive with JavaScript.

This guide is designed to help you actually learn JavaScript (it's not a reference manual). Learn JavaScript through a series of interesting projects and examples. There are also practice problems (with solutions) throughout the tutorial.

What should you know before reading this guide?

This tutorial assumes that you already know HTML and CSS. If you don't, please read our HTML and CSS tutorials. No other programming experience is required.

Need a place to host your website? Get your first month of HostGator web hosting for only 1 cent (or save up to 60%). Visit the previous link for the latest deals (updated daily).

So, what does JavaScript code look like?

What is JavaScript?

JavaScript lets us write code that is run directly from the web browser (not the server). It allows us to respond to events (like a button click), and we can change basically anything on the page (usually without any additional contact with the server).

Showing an alert when a button is pressed

In JavaScript, it's common to do some action when a button or link is clicked. If you click the button shown below, you'll see an alert displayed.

HTML & JavaScript Code

Take a look at the code below, and see if you can figure out how it's working to display the alert. If it doesn't make sense, don't worry. In the next sections, we'll explain this code in detail.

<input type="button" id="myButton" value="Click me">

<script>
    /* This is a comment in JavaScript */
    // This is also a comment (for 1 line only)

    /* Create a new function called setupButton */
    function setupButton() {

        /* Create a new variable called myButton */
        var myButton;

        /* Get the HTML element with id="myButton", and save it to our new myButton variable */
        myButton = document.querySelector( '#myButton' );

        /* When the button is clicked, run our new showAlert function */
        myButton.addEventListener( 'click', showAlert );
    }

    /* Create a new function called showAlert */
    function showAlert() {

        /* Show an alert to the user */
        alert( 'This is an alert' );
    }

    /* Run our setupButton function */
    setupButton();
</script>

The HTML <script> tag

<script>
    YOUR JAVASCRIPT CODE GOES HERE
</script>

The <script> tag is used whenever you want to include JavaScript directly inside an HTML file.

It's usually best to place your JavaScript at the bottom of your HTML file (right before </body>). Why? Well, JavaScript code is executed as soon as it's seen, so if you put it at the top, it will delay the loading of your page. However, it can technically be placed anywhere (even inside <head>).

Like CSS, JavaScript code can also be placed in its own external file

Example

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

Leave a Comment