Welcome to the Javascript Guide


Programming Languages

Latest in Tech

Zettonia Education

Javascript Quickstart

Javascript is supported by your browser and can be run as a HTML file.
Open the HTML file with your browser. We can write the JS script within the <script> tag.

<html>
<head></head>
<body>
<script>
console.log("Hello World");
</script>
</body>
</html>

Or you could download NodeJS, save your files as .js files, and run them using

node example.js

Follow the link below to download NodeJS.

Download NodeJS

The Javascript Syntax && Ecosystem

Jump to:

Data Types  Variables  Conditional Statements  Loops  Functions  NPM 

Javascript Basics

Data Types
  • Integer : Whole numbers
  • Float : Numbers with decimals
  • String : Text
  • Boolean : True or False
Data Structures
  • Arrays : []
  • Objects : {}

Output to browser console/ commandline

console.log("Hello World");

You can find the output of console.log() by right-click > Inspect Element > Console

Comments

// Single-line comments are denoted with the two slashed //. This line will be ignored by javascript.
/*
Multi-line comments
are denoted by /* and */
*/

Variables

Declaring constants: constants cannot be changed after it is declared

const my_const = "Hello";
const my_const2 = "World";
my_consst2 = "There";
// There will be an error here as constants cannot be reassigned once it is declared
console.log( my_const , my_const2 );

Declaring variables: It's kinda like Algebra

var my_var = "Hello";
var my_var2 = "World";
my_var2 = "There";
console.log( my_var , my_var2 );
// notice the output is now Hello There and not Hello World

Variables with math operations: Here comes to Algebra

var my_var = 20;
var my_var2 = 30;
var total = var_1 + var_2;
console.log()(total);

Variables with Arrays and Objects

// Try these codes. my_array[0] will return us the first value in the array
var my_array = [10,20,30];
console.log(my_array[0]);
console.log(my_array[1]);
// Try these for Objects
var my_cat = {
   "name":"Mr. Fluffy",
   "age":20,
};
console.log(my_cat["name"]);

If Else Conditional Statements:

Comparison Operators Meaning
== Is equal to
=== Is equal to and is of equal type
> More than
< Less than
>= More than or equal to
<= Less than or equal to
!= Not Equal to
!== Not Equal to or not of equal type
Boolean Operators Meaning
&& and
|| or
! not
If, Else If, Else:
var you_are = "hungry"
var food_type = "pizza"

// if you are not hungry, go home
// else if you are hungry and hungry for pizza, go to pizza restaurant
// else go look for other restaurants

if (you_are != "hungry"){
     console.log("Go Home")
} else if (you_are == "hungry and food_type=="pizza"){
     console.log("Go to Pizza Restaurant")
} else {
     console.log("Look for other restaurants");

// the {} will create a block of code, for example the if block, the else if block }
Switch Case:
var my_cat = {
   "name":"Mr. Fluffy",
   "age":20,
};
switch (my_cat["name"]){
case "Mr.Fluffy":
     console.log("hello mr fluffy");
     break;
case "Mr.Pinky":
     console.log("hello mr pinky");
     break;
// There may be more cases to add
/* break will break you out of this switch/case
and will continue with the next block of code
*/
}

Loops: do something over a range or while something is true

// Try these codes out
for ( i=0 ;<10 ; i++){
     console.log(i);
}

var my_array = ["Hello","There",10,20,30];
for (var item in my_array){
     console.log(item);
}

// Try these codes out
var hungry = True;
while (hungry == True){
     console.log("I will have some pizza.")
     console.log("Eating...")
     console.log("Done eating. Not hungry any more!")
     hungry = False
     // when we change hungry to False, we will exit the while loops
     // we can use break here too, to break out of the while loop
{
console.log("We are out of the while loop...")

Functions: Reusable blocks of codes

function are_you_hungry(a,b){
     // a is the parsed data. we can use "a" within this function. We will parse True or False
     if (a == False){
          return "Go Home";
     } else if (a == True and b =="pizza"){
          return "Go to Pizza Restaurant";
     } else{
          return "Find some other restaurant";
     }
}
// Calling the function with hugry,food_type
result = are_you_hungry(True,"pizza");
console.log(result);


Node Package Manager( NPM )

NPM is a package manager of NodeJS. You can use the following commands in your terminal, powershell or command line after you have installed NodeJS.
You can use it to install libraries/dependencies like Express.

npm install express

npm uninstall express

npm will generate packages.json file with the currently installed packages.
We call them "dependencies" because without these packages, the programs depending on these packages will not work.

If packages.json is not found, use

npm init

and run the installations again.

To install dependencies from the list of packages called packages.json

npm install

Ready to dig deeper into Javascript?

Zettonia Education Programmes