Delve into practical JavaScript skills, from basic concepts to integration with HTML/CSS, and discover its history and evolution in software development through hands-on exercises.

You can expect some beginner-friendly content in this course, along with some learning paths.
I strongly believe in practical application. Therefore, I will not bore you with facts, long theories, or rants about which parts of JavaScript I consider good or bad. This course is all about getting our hands dirty and understanding how JavaScript works inside out.
This highly practical course will start off from covering basic programming concepts in Javascript to introducing JavaScript with HTML and CSS.  In addition, you will also get an insight into JavaScript history and its growth in the Software World.

JavaScript in Practice: Getting Started

When you create an HTML form, pressing a button submits the form by default. Submitting a form reloads the page. Once you reload the page, the data entered in the textfield is lost. This is what we will prevent now.

<!doctype html>
<html lang="en">
  <head>
    <title>Greetings</title>
  </head>
  <body>
    <form>
      <input type="text" 
             class="tf-large  js-name" 
             placeholder="name">
      <button class="btn-large  js-hello">Greet</button> 
    </form>
  </body>
</html>

function helloListener( event ) {
    event.preventDefault();
    console.log( 'button pressed' );
}
const helloButton = document.querySelector( '.js-hello' );
helloButton.addEventListener( 'click', helloListener );

codemirror

console

First, we created a `helloListener` function in JavaScript. This function prevents the default action of the event, which is the submission of the form.

The second line in the function creates a console log that appears in the developer tools of your browser. More on this later.

The last line attaches the `helloListener` function to the button. We tend to use `js-` prefixed classes to refer to elements in the Document Object Model, also known as the DOM. The `document.querySelector` function takes a selector string, in this case, a class name, and locates the node in the DOM that has this class. Check out the HTML tab; you can see the same class in the class list of the button.

Once we located the `.js-hello` button, we can add an event listener function to it. This function takes an event and can perform any JavaScript action ranging from manipulating the contents you can see on screen to calling a service or an API on the web, saving your data in persistent storage.

>If you work on your computer, you will face one problem: 
<br>You will not have access to Javascript code in the HTML file. You will have to add an HTML tag  
>```Javascript
><script src="yourjsfilename.js"> </script>
>``` 
>at the bottom of the body.

Learn how to add Javascript to build the functionality of the HTML form.

Introduction to JavaScript

DataTypes

All about Arrays

Functions and Operators

Executing Selective Instructions

Loops

Values and Reference Types

Cloning Objects

Using Strings in Javascript

JavaScript with HTML and CSS

The Modern Javascript

Adding JavaScript Code