JavaScript is one of the most widely used programming languages in the world. It is the backbone of modern web development, and knowledge of this language is essential for anyone who wants to build web applications or add interactivity to their websites.

In order to learn something, you have to start learning one basic concept at a time, understand it, and move to the next one.

Prerequisites

  • JavaScript is a client-side programming language, which means it's executed in the user's web browser. This means you don't need to install anything to start writing JavaScript - just Chrome, Firefox, Safari, or whatever you usually browse in.
  • I would recommend going to CodePen and creating new pens to practice with. There are other options as well, like JSFiddle.

Where to put code

  • Inline javascript by event attributes (ex. onload, onclick)
  • Inside <script> tag.
  • In external .js file. Include it using src attribute in <script> tag.

<button onclick="alert('Inline Javascript')">Click Me</button>

<script type="text/javascript">
  alert('In page Javascript');
</script>

<script type="text/javascript" src="external-script.js"></script>

Comments

  • A comment is a note written in the code source with the purpose of explaining the code.
  • A single line comment is written in JavaScript as two slashes // followed by the comment itself.
  • A multi line comment is written with a slash and asterisk /*, */, as start and finish tags with the comment in between.
  • Comments can also be used to prevent certain code from running, which is known as commenting out the code. This is useful for testing purposes.

// This is a single line comment.

/* This comment
can span multiple lines. */

// var firstName; this code has no function, because it has been "commented out".

Variables

  • A variable is a container used for storing data values.
  • Variables are created by typing var followed by your unique variable name. A variable that has been created but not assigned a value is undefined.
  • Values that can be assigned to variables include data types such as numbers, strings, objects, and Booleans. * Variable names can contain letters, the dollar sign character $, the underscore _, and numbers (but cannot begin with a number).

  • The convention in JavaScript variable naming is camelCase, which means the first word is lowercase and each following word is uppercase.

  • A variable cannot be any of the words already used as functions in the JS language. List of reserved JavaScript names.
  • Syntax: A single equals sign = is used to assign a value. In the above example, the value "Jack" is assigned to the variable firstName. A semi-colon ; ends a JavaScript statement, like a period ends a sentence.

var firstName; // Variable is declared, but not assigned a value.
var firstName = 'Jack'; // Variable is declared and assigned a value.

Printing the Output

  • You can see the result of a statement or function, or the contents of a variable. This are 3 methods for it. They can be useful for debugging. Don't use them in project/work.
  • JavaScript doesn't have a built in "print" or "echo" keyword like other languages
  • You can see the result of your JavaScript statement is by using console.log().
  • You can see console.log output in Developer Tools (F12 key in windows).
  • You can also use alert() function to view your output as dialoge box.
  • You can use document.write() to view output.
  • You can put output directly in html tag using tagname or tag id. Only this method you should in project/work

console.log("Hello World");

alert("Hello World");

document.write("Hello World");

document.getElementById("txt").textContent = "Hello World";