DEV Community: Code The Web

JavaScript Objects

Ethan — Sat, 09 Jun 2018 00:00:00 +0000

This was originally published on my blog, Code The Web

Objects are ways of storing data in JavaScript and are a key part of Object Oriented Programming. Learn the syntax and more about them in this article...

While it's not completely necessary, a basic understanding of JavaScript arrays may help you understand objects.

What is an object?

An object in JavaScript is quite similar to an array — it is a data type which stores lots of values. These values can be any data type — numbers, strings, booleans, functions, and even arrays and objects!

The difference between an array and an object is how the values are referenced. In an array, you reference a value with a number (its position in the array) — for example:

myArray[3]

When referencing a value in an object, you do so using a name instead of a number. For example:

myObject['superFlashyName']

That's it! Name instead of number.

How to declare an object

The syntax for declaring an object is different to the syntax for an array. Here's what it looks like:

var myFriend = {firstName: 'John', lastName: 'Smith', age: 27, nationality: 'British'};

As you can see, it's kind of similar to the array syntax, but it has curly brackets instead of square brackets. The items are still comma-separated. However, the items now have a 'name' as well as a value. For example:

age: 27

Here, age is the name (aka 'key') of the item and 27 is the item's value. They are separated by a colon.

We call this a key-value pair. It has a key and a value... (really? 😜)

key: value

So an object is made of key-value pairs separated by commas, and the whole thing is wrapped in a set of curly brackets.

Here's our object again:

var myFriend = {firstName: 'John', lastName: 'Smith', age: 27, nationality: 'British'};

It is perfectly acceptable to write it this way:

var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British'
};

Some people prefer the first option, while some prefer the second. It's up to you — choose the one that makes the most sense in your head.

How to get/set a value in an object

As I mentioned near the beginning, this is how you reference an item in an object:

myObject['key']

You can express it this way as well:

myObject.key

With the second option, you can't have variables or special characters (including spaces) as the key. For example, these wouldn't work:

myObject[someVarContainingTheKey]
myObject['I have spaces and special characters ;)']

As you can see, they don't turn out so well!

myObject.someVarContainingTheKey // No longer a variable - equivalent to myObject['someVarContainingTheKey']
myObject.I have spaces and special characters ;) // \0_0/ The syntax errors are killing me

It's worth saying that it is bad programming practice to use special characters in variable names or object keys. The exception would be if you were using a form of user input (which might include spaces) as your key.

Unless you have special characters or a variable as your key, it is best to use the second option (myObject.key). Why? It just looks nicer (it also makes more sense for functions, which you'll see soon). But it's up to you.

Functions in objects

I told you at the start that objects can have any types of data inside them. This includes functions! But how would you actually put one inside an object?

Let's use our friend example from earlier:

var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British'
};

Now let's say we had this function:

function sayHi() {
    alert('Hi!');
}

And we want to add it to our object. This means that we could call it like so:

myFriend.sayHi()

Look familiar? This is why console.log() is console.log()! console is an object with a log function inside of it!

Anyway, here's how we'd put sayHi() into our function:

var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British',
    sayHi: function() {
        alert('Hi!');
    }
};

What?! Let's take a look at what's going on here. When you say:

function sayHi() {
    alert('Hi!');
}

, it is actually just shorthand for:

var sayHi = function() {
    alert('Hi!');
}

So, just like var age = 27 becomes age: 27, this:

var sayHi = function() {
    alert('Hi!');
}

becomes this:

sayHi: function() {
    alert('Hi!');
}

As you can see, it makes sense to use the object.key syntax as supposed to the object['key'] syntax when it comes to functions. Imagine having to write this!

myFriend['sayHi']()

Eugh, ugly 🙈

`this` in objects

Let's say we wanted to give our friend another function: an introduce() function. It would alert this:

My name is John Smith. I'm British and I'm 27 years old.

However, we can't just alert this as a simple string! We'll want to use the object values. So if we changed the age to 30, it would say that instead.

It is bad programming practice to say myFriend.age. This is because if the function was put into another object instead (let's say myEnemy), it would still alert the age of myFriend instead of myEnemy.

Instead, we use this.age. this simply refers to the object that the function is in. See if you can work the function and put it in the object. Remember that you can merge strings and variables together with this syntax:

'Here is a variable: ' + myVar + ' ...yay!'

Good luck!

NOTE: Use double quotes so you don't interfere with the apostrophe in the word I'm

var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British',
    sayHi: function() {
        alert('Hi!');
    },
    introduce: function() {
        alert('My name is ' + this.firstName + ' ' + this.lastName + ". I'm " + this.nationality + " and I'm " + this.age + ' years old.');
    }
};

{:.reveal}

Awesome! That's how this works!

Converting between objects and strings

In this section, you're going to need to open up the JavaScript console. Do that by right-clicking, clicking on 'Inspect Element', and going to the 'Console' tab.

To convert an array to a string, you can use .join() or .toString():

var myArray = [1,2,3,4];
console.log(myArray.join());
// logs '1,2,3,4'
console.log(myArray.toString());
// logs '1,2,3,4'

How would we do this with an object? Let's try .toString() (.join() is for arrays only):

var myObject = {favoriteFood: 'Pizza', hobby: 'Coding'};
console.log(myObject.toString());
// logs '[object Object]'

Ewww! That's not what we want! 💩

Instead, there's a special function that we use just for objects:

var myObject = {favoriteFood: "Pizza", hobby: "Coding"};
console.log(JSON.stringify(myObject));
// logs '{"favoriteFood":"Pizza","hobby":"Coding"}'

That's better! Note that it's JSON.stringify(myObject), not myObject.stringify() like with .toString() and .join().

JSON stands for JavaScript Object Notation. I'll go into that a bit further down.

In JavaScript, you can also make an array from a string with the split function like so:

var myString = 'how,are,you';
console.log(myString.split(','));
// logs ["how", "are", "you"]

The equivalent of this for objects is JSON.parse:

var myString = '{"favoriteFood":"Pizza","hobby":"Coding"}';
console.log(JSON.parse(myString));
// logs {favoriteFood: "Pizza", hobby: "Coding"}

Note that it logs the array without the single quotes around it, meaning it is now an object and no longer a string. To see it yourself, paste the above code snippet into your console. It will display it like an object, not a string!

Try these two new functions out further! Make up some objects and objects as strings, then convert between them.

So, what's that JSON thingo?

JSON simply stands for JavaScript Object Notation. In other words, simply the object syntax you have been learning about in this article!

People liked this syntax so much that they thought it would be a good idea to use it to store data, so now JSON is used in many ways outside of JavaScript. That's why we have things like JSON.parse: we're simply parsing (interpreting) a JavaScript object.

You can find out more about JSON at json.org (but don't overload your brain, it's not that relevant to this tutorial).

Object.keys()

With an array, if you know its size then you know how to find all the values. For example — in an array with a length of 4, you know that to find all the values you could reference array[0], array[1], array[2], and array[3]. However, we can't do this with an object because we don't know what all the keys are — they don't follow a pattern like 0,1,2,3 because we can set them to whatever we like.

Luckily, there is a function we can use to get all the keys:

var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British',
    sayHi: function() {
        alert('Hi!');
    },
    introduce: function() {
        alert('My name is ' + this.firstName + ' ' + this.lastName + ". I'm " + this.nationality + " and I'm " + this.age + ' years old.');
    }
};

console.log( Object.keys(myFriend) );
// logs ["firstName", "lastName", "age", "nationality", "sayHi", "introduce"]

As you can see, it returns an array with all the keys! Remember that the syntax is this:

Object.keys(myFriend) // RIGHT :)

NOT this:

myFriend.keys() // WRONG!!!

Object.values() simply makes an array of all the keys in an object.

Object.values()

As well as finding all the keys in an object, we can also find all the values! This sort of turns an object into an array, except all the keys will obviously be lost. Here is how it works:

var myFriend = {
    firstName: 'John',
    lastName: 'Smith',
    age: 27,
    nationality: 'British',
    sayHi: function() {
        alert('Hi!');
    },
    introduce: function() {
        alert('My name is ' + this.firstName + ' ' + this.lastName + ". I'm " + this.nationality + " and I'm " + this.age + ' years old.');
    }
};

console.log( Object.values(myFriend) );
// logs ["John", "Smith", 27, "British", function() { alert('Hi!'); }, function() { alert('My name is ' + this.firstName + ' ' + this.lastName + ". I'm " + this.nationality + " and I'm " + this.age + ' years old.'); }]

Note that the console may abbreviate the functions with an ƒ symbol like so:

["John", "Smith", 27, "British", ƒ, ƒ]

This is how Object.values() works — it simply makes an array of all the values in an object.

Conclusion

That's it for today! Hopefully, this article has given you a good understanding of objects. If so, I'd really appreciate it if you shared this article on social media (click here to do so) to help spread the word and help others like you.

Once you have played around with objects for a bit longer and have gotten all your initial confusion out of the way, it's worth looking into some weird behavior with objects (called 'mutability'), and why it can be scary — I highly recommend reading this article on it by Zell Liew. It is more advanced, which is why I recommend playing around a bit with objects first.

If you need help understanding these concepts, with web development in general or want to give feedback, head to the comments below... (or type in that live chat thingo)

If you want more quality articles like this, sign up to get my weekly email of curated content from Code The Web and around the internet (no spam).

If you happen to be a real-life superhero who appreciates my work, go ahead and buy me a coffee or two or three or become my patron.

See you next time, where I'll be talking all about how to modify HTML and CSS in JavaScript. This is one of the most important parts of JavaScript and is the intersection between all three web languages.

Want more great tutorials like this? Sign up to Code The Web Weekly!

It's weekly email packed with the best resources to learn web development from Code The Web and around the internet

(Learn more...)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

The complete guide to JavaScript functions

Ethan — Thu, 05 Apr 2018 00:00:00 +0000

Getting started!

First of all, I encourage you to follow along in this article. It will help you learn better, and also help you to remember what you have done. Let's start by making a new HTML file with a <script> tag in it:

<!DOCTYPE html>
<html>
    <head>
        <title>If statements are awesome!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            // Our script will go here!
        </script>
    </body>
</html>

Once that's done, open it up in your web browser and you're ready to go! (don't forget to save and reload the page every time you make a change)

What is a function?

A function is simply a bit of JavaScript code which you can run again and again. You can even give it with different inputs and outputs!

The syntax

For the moment, let's look at the simplest type of function:

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

First, we're declaring the function. We do this by saying the word function and then the name of your function. This is similar to how we declare variable (var variableName is similar to function functionName). After the name, there is an empty set of brackets / parentheses / whatever you call these things: ().

What's the point of them if they're empty though? Well, this is where we put inputs for the function. At the moment, our function doesn't have any inputs so we leave it empty. I'll get onto inputs a bit further on in this article (get excited 😉).

After that, we have a set of curly brackets (the ending one is on the fourth line). Inside these curly brackets goes all the code in the function.

Running (aka 'calling') a function

Now you know how it works, let's run it! Put it in your <script> tag, save, and reload the page...

What!?? Nothing happened! Well, here's the thing — we've only declared the function, not actually run it. We've just said "hey magical computer, here's this bit of code and it's called myFirstFunction". However, we haven't told the computer to run the code inside the function! Here's how we do it:

myFirstFunction();

As you can see, we run it by referring to its name. We then have an empty set of brackets. This is where the inputs for the function would go, but we don't have any inputs just yet so again we leave them empty. Time to run your function! See if you can work out where to put it in the code:

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

myFirstFunction();

In this bit of code, it's at the end. However, it can be before the function too! This is very different to variables, where you have to declare the variable before using it. This wouldn't work:

alert(myVariable);

var myVariable = "Hello";

However, this would:

myFirstFunction();

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

It is common practice to put all your function definitions at the bottom of your script, but it doesn't really matter that much.

Ooookay, here's the moment that you've probably been waiting for — time to try it out! Make sure that your script looks like the code above (although remember that it doesn't matter if you run the function before or after declaring it). Save, reload and Ta-da! Our code inside the function has now been run!

At first, this may seem like overkill — why not just run the code? Well, imagine if you wanted to make this particular bit of code run at many different points inside your script — inside loops, if statements, and more. Well, then only having to say myFirstFunction(); would come in handy! Especially if your function was 30 lines long 😅

Functions with inputs

In the function myFirstFunction, we set a variable (x) to 5 and then alerted that (10). What if we were to make a function called alertDouble which alerted double any number?

In this case, we'd have one input — let's call it num. Here's how the function declaration would look with num as our input:

function alertDouble(num) {

}

Now inside the curly brackets, we can use num as a variable! (only inside the curly brackets)

See if you can work out how the finished function would look...

function alertDouble(num) {
    alert(num * 2);
}

Did you get it right? If so, great! If not, don't worry — hopefully, you'll start to get it by the end of this article 🙏

Running functions with inputs

Time to run our function! Let's try doubling a few different numbers:

2
70
1024

First of all, you can leave this part of your existing code if you want:

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

However, we're done with it and don't want to run it anymore. So, delete or comment out this line:

myFirstFunction();

Instead, we want to call our new function alertDouble! First, we need to add the function declaration to the end of the code:

//myFirstFunction();

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

Time to run our function! If it didn't have any inputs, we would simply say alertDouble(). However, we need to put the input for num inside the brackets! So, let's try doubling 2 — see if you can guess the code!

alertDouble(2);

The 2 inside the brackets then becomes num inside the function when it is run! Try it out...

//myFirstFunction();

alertDouble(2);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

Woo! It alerted 4! 🎉
Let's try with the other values...

//myFirstFunction();

alertDouble(2);
alertDouble(70);
alertDouble(1024);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

Yay! Now it alerts 4, 140 and then 2048. Time to move on...

Functions with multiple inputs

In the function alertDouble, we multiplied num by 2. What if we wanted to make a function called alertMultiplied where we alerted one input multiplied by another input? Here we'd need two inputs: let's say num1 and num2.

First of all, we need to declare the function! When functions have multiple inputs, they are separated by commas — see if you can work it out!

function alertMultiplied(num1, num2) {

}

Then, it's just a simple matter of alerting num1 multiplied by num2!

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

Running functions with multiple inputs

First of all, comment out (or delete) all the doubleMe function calls like so:

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

Now, let's add the alertMultiplied function declaration to the end of the code!

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

Finally, it's time to run the function. Let's try multiplying 5 by 3 and 8 by 21. See if you can work out the code (hint: the inputs are separated by commas just like in the declaration 😉)

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

alertMultiplied(5, 3);
alertMultiplied(8, 21);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

Save, reload and see what happens! It should alert 15 followed by 168.

Functions with an output (functions that 'return' something)

As well as having inputs, functions can also have outputs! However, a function can only have one output (unlike inputs).

Let's make a function called triple. However, unlike alertDouble, it won't alert the result. It will output it!

To output the result, we simply say inside the function return and then whatever we want to output. Here's an example:

function introduce() {
    return 'Hello, I'm Johnny.';
}

Note that it doesn't require brackets! However, you can put them in because they're optional. I prefer to put them in because it makes it easier to understand, but it's up to you. It would look like this with brackets:

function introduce() {
    return('Hello, I'm Johnny.');
}

Obviously, the value returned doesn't have to be a string.

Let's try making our triple function! It will need one input, num. And it will need to output triple that number. See if you can work out how the function would look!

function triple(num) {
    return(num * 3);
}

Running functions with an output (getting the output)

That's all fine and well, but how do we actually get the output of this function? We do that by running it!

The actual function call will become equal to the output, just like a variable is equal to a value. We can then use the function just like a variable. For example, we could say the following:

alert( triple(10) );

function triple(num) {
    return(num * 3);
}

Here, we are alerting the output of triple(10). Try it out! Don't forget to add the declaration and comment out the calls of alertMultiplied:

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

//alertMultiplied(5, 3);
//alertMultiplied(8, 21);

alert( triple(10) );

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

function triple(num) {
    return(num * 3);
}

Woo! The code will alert 30! We can also use the triple function just like any other number:

var x = (triple(6) + 3) * 2;
alert(x);

This is simply like saying (18 + 3) * 2, which is equal to 42 (the meaning of life of course 😉). Try it out!

//myFirstFunction();

//alertDouble(2);
//alertDouble(70);
//alertDouble(1024);

//alertMultiplied(5, 3);
//alertMultiplied(8, 21);

alert( triple(10) );
var x = (triple(6) + 3) * 2;
alert(x);

function myFirstFunction() {
    var x = 5;
    alert(x * 2);
}

function alertDouble(num) {
    alert(num * 2);
}

function alertMultiplied(num1, num2) {
    alert(num1 * num2);
}

function triple(num) {
    return(num * 3);
}

Now after alerting 30, our code will also alert 42! 🎉

Variable scopes within functions

We're nearly done now! 😅
However, there's one more important thing that you need to know about functions — Variables declared inside functions do not work outside of functions. Whaaat? Here's an example — try it out!

function myFunc() {
    var myVar = 3;
}

myFunc();
alert(myVar);

It should alert 3, right? Nope! Because myVar was declared inside the function, it does not exist outside the function. The code will not work and give you the following error:

Uncaught ReferenceError: myVar is not defined

However, this does work!

var myVar = 1;

function myFunc() {
    myVar = 3;
}

myFunc();
alert(myVar);

The code will alert 3! Because myVar has already been declared outside the function, the code knows that it exists. It will be changed inside the function, and then the code can still alert it because it was defined outside the function.

This is known as the global scope. It means that for the rest of the code, myVar will be defined. In the first example where myVar was declared inside the function, it declared in the function scope. It means that the variable will only be defined inside the curly brackets of the function.

This might take a while to wrap your head around, but you'll get it eventually. The main thing that you need to remember is that if you want to use a variable outside a function, declare it outside the function first. You don't even have to say var myVar = 1; — you can literally just say var myVar; and that is enough. I may do an article focusing more on variable scopes in future.

Conclusion

Whew! 😅
That was a lot to cover, so good job making it all the way through! As always, keep practicing and you will eventually get it. If you need any help, feel free to shoot me an email or hit the comments.

If you learned something from this article, I'd really appreciate it if you bought me a coffee. I've written 53,000 words and counting all for free, to help people like you learn web development. It would be really awesome if you could give me a small tip in return 😉. While it may not seem like a lot, it all adds up. If every person who read an article on this site gave $1, I'd probably be earning close to the minimum hourly wage by now!

If you know someone who this article or this blog would benefit, go ahead an share it with them — they'll thank you later 😜

Finally, if you want to receive some web-dev goodness in your inbox each week to help you learn JavaScript, enter your email and I'll do just that 😜

Click here to sign up :D

Okay, that's it for today! Have fun coding and I'll see you next time, where I'll be talking all about arrays (aka. lists) in JavaScript. See you then! 👊

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

For loops and while loops in JavaScript

Ethan — Sun, 25 Mar 2018 00:00:00 +0000

Loops let you run code as many times as you want! They are really powerful, and a great thing to know. Learn them once and for all in this article from Code The Web!

Getting started!

Welcome to another post on Code The Web! First of all, I want to encourage you to follow along in this article. It will help you learn better, and also help you to remember what you have done. Let's start by making a new HTML file with a <script> tag in it:

<!DOCTYPE html>
<html>
    <head>
        <title>If statements are awesome!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            // Our script will go here!
        </script>
    </body>
</html>

Once that's done, open it up in your web browser and you're ready to go! (don't forget to save and reload the page every time you make a change)

What are loops in JavaScript?

Loops simply run a chunk of code multiple times. For example, take a look at this code:

alert('Hi!');

If we wanted to repeat this five times, we could do this:

alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');

However, this is very bad programming and can get very unwieldy if you need to repeat large chunks of code hundreds of times. Also, it is not very useful. For example, what if wanted it to repeat x times? This is where loops come in handy. The amount of times is often determined by variables, but can also be determined by actual numbers. Loops can be especially useful for doing something to each element in an array (each item in a list) but come in handy in many of situations.

While loops

Wait, if we're doing while loops first then why did the title start with "for"? I don't know really, it just sounds better that way.

A while loop keeps repeating code over and over again while a certain statement is true (i.e. until it is false). Here is the syntax:

while ( /* something that's true or false */ ) {
    // Do some stuff
}

It's that simple! Here's an example which keeps finding a random number from 0-1 until it is over 0.2.

while(Math.random() > 0.2) {
    alert('hi');
}

But what if we wanted it to alert the number? We can't write alert(Math.random()) because then it would find a new random number to alert. So, we'd have to make a variable and then set it to the random number at the end of each loop. It would then compare this number, and would have it stored in a variable so we can alert it later:

var randomNum = Math.random();

while(randomNum > 0.2) {
    alert(randomNum);
    randomNum = Math.random();
}

Take a moment to look at that code. First, we set the variable randomNum to a random number. We then see if it is greater than 0.2. If it is, we run the stuff inside the curly brackets. This alerts the number and then changes randomNum to a new number. We then check to see if this number is greater than 0.2. If it is, we run the stuff inside the curly brackets again, and it goes on and on...

If the number is not greater than 0.2, the stuff in the brackets doesn't run, and the program continues. It does not then keep running until the number is greater than 0.2 again.

☢☢ A word of warning... AVOID INFINITE LOOPS! ☢☢

Infinite loops are loops that will keep running forever. They can happen with both for loops and while loops. Here is a very basic example — DON'T TRY IT UNLESS YOU'RE FINE TO LOSE ALL YOUR TABS

while(true) {
    // some code
}

It will freeze the page, and even entire browser depending on your computer. You will usually not be able to close the tab, and will probably need to quit and reopen the entire browser! So, always be on the lookout for infinite loops. They might not always be as obvious as while(true). It could be any statement that will always evaluate to true.

For loops

Let's say you wanted to alert "Hi" five times. As I said earlier, this is a very bad way to do things:

alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');
alert('Hi!');

However, how would we do this with a while loop? We'd have to set a counter variable, and then add one to it each time:

var counter = 1;

while(counter <= 5) {
    alert('Hi!');
    counter = counter + 1;
}

First, let's make this code follow better programming conventions. Instead of using the counter variable, we should name it i. This is simply a convention and stands for 'iteration'. You don't have to use i, but it is a good idea to do so. It will make your code more easily integrated with other developers' codes, and make everything much more consistent.

Also, we're starting the counter on 1. In programming, it is a convention to start counter variables on 0. Why not 1? Well, in most programming languages, the first element in an array (list) is item 0, not item 1. Seeing as loops are often with arrays, it is good programming convention to start all for loops at 0. While it may seem confusing at first, it will make your code a lot less confusing as you progress in learning JavaScript. Because i is now one less, we'd say counter < 5 instead of counter <= 5.

Finally, there's the line where we increment i by 1. Instead of saying i = i + 1, there's a better way to do this! You can simply say i++;.

So, here's what our while loop looks like after getting it to follow good programming conventions ('best practices'):

var i = 0;

while(i < 5) {
    alert('Hi!');
    i++;
}

Believe it or not, there is a much faster, better and easier way to do this using JavaScript! It's by using a for loop:

for(var i = 0; i < 5; i++) {
    alert('Hi!');
}

Let's take a look at this code. It's quite similar to a while loop, except all the different parts have been moved around. Again, we're using i as our counter variable.

So first, we're setting i to 0. Instead of doing this before the loop, we do it inside the brackets of the for loop, right at the start.

After the semicolon, we have a boolean expression (something that evaluates to true or false). This is like the part from the while loop, and operates in the same way! The stuff inside the curly brackets will run while that statement is equivalent to true (in this case, i < 5).

After the second semicolon, we have our final bit of code inside the brackets: i++. This is just our last line inside the curly brackets from the while loop! In short, the code after the second semicolon will run at the end of each repetition of the loop.

Here's a summary of the for loop syntax to make it easier to understand:

for( /* Set your counter variable */ ; /* Repeat while this is true */ ; /* Run this at the end of each repetition */ ) {
    // Your code!
}

(hover over the code and scroll sideways to see it all, or drag sideways on a touchscreen)

Try to make a for loop that alerts "Yay" three times. Don't use the code for repeating five times to help! See if you can do it using just the syntax code to help you.

for( /* Set your counter variable */ ; /* Repeat while this is true */ ; /* Run this at the end of each repetition */ ) {
    // Your code!
}

See if you got it right!

for(var i = 0; i < 3; i++) {
    alert('Yay');
}

Also, you can use i inside your code in the curly brackets! While this mostly comes in handy for iterating through arrays, it can be used however you want. For example, alerting the numbers from 0 - 4:

for(var i = 0; i < 5; i++) {
    alert(i);
}

Note that it is from 0 - 4 not 1 - 5, because all loops should start at 0! If you wanted to alert the numbers from 1 - 5, I would do the following:

for(var i = 0; i < 5; i++) {
    alert(i + 1);
}

Conclusion

Congrats on learning all about for loops and while loops! I know that when I was learning, I found the concept of for loops especially confusing. Remembering what the three parts inside the brackets went was quite hard, and the only way that I finally got it was through practice. So try making a few different things with for (and while) loops! It is the best way to learn it.

If you got something out of this article, I'd really appreciate if you shared it or bought me a coffee. It's $4 that would go a long way, and make the rest of my day awesome.

If I'd spent the time on Code The Web working at the minimum wage instead, I would have earned $1,770 by now! But instead I've dedicated my time to you guys and to helping people learn, and only earned $16. So it would be great if you could give a little thanks in return, I'd really appreciate it! 😘

If you want to receive more articles like this on web development as well as awesome web development articles from around the web, be sure to sign up for the weekly newsletter! I only send an email once a week with a roundup of awesome articles. I'll leave this handy little form below...

Click here to sign up :D

See you next time, where I'll be talking about functions in JavaScript! They are one of the most integral parts of JavaScript (I know I've been saying that for like 4 articles now, but it's true 😉). See you then!

P.S. In this post, I officially passed 50,000 words! 🎉😁 It's been an awesome time writing this blog (nearly 6 months!), and I will definitely continue into the future! I want to thank all the fans, newsletter subscribers and readers for actually coming and reading what I have to say. I really didn't think that Code The Web would have so many visitors, and really appreciate every single one of you all. 💖

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

JavaScript Maths functions and operators

Ethan — Sun, 18 Mar 2018 00:00:00 +0000

Learn how to use addition, subtraction, multiplication, division, powers, rounding, modulo and more in this article...

Getting started!

<!DOCTYPE html>
<html>
    <head>
        <title>If statements are awesome!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            // Our script will go here!
        </script>
    </body>
</html>

Once that's done, open it up in your web browser and you're ready to go! (don't forget to save and reload the page every time you make a change)

Types of numbers

There are two main types of numbers in JavaScript: floats and integers. Integers are whole numbers without decimals. Here are a few examples:

3
0
156

Floats are numbers which contain a decimal. It is important to note that floats can be whole numbers. Wait whaaat? I thought you said that integers were whole numbers? Well, stuff like 5.0 is still considered a float, because it has a decimal and could be 5.1.

2.225345
0.0
42.0

For the most part, you won't have to worry about these different types because JavaScript will automatically convert them for you (😍). However, in some programming languages, you will have to do it yourself. There are also some cases in JavaScript where you will have to work with converting stuff between floats and integers.

Basic operators

Let's start right from the beginning - with the basic operations!

Addition

Addition in JavaScript is really simple - all you need to do is put a plus sign between two numbers, just like in real life. Try it out! Add the following to your script, save, then reload the page:

alert(1 + 2);
// Equal to 3
alert(2.5 + 3.5);
// Equal to 6
alert(-2 + -3);
// Equal to -5

You can also add floats and integers in the one expression:

alert(7 + 1.25);
// Equal to 8.25

Obviously, the number that is returned will be a float. Moving on!

Subtraction

Subtraction also works just as it does in real life. Easy, huh? Here are some examples - you can try them out if you want:

alert(5 - 3);
// Equal to 2
alert(33 - 42);
// Equal to -9
alert(-3.3 - 1.1);
// Equal to -4.4

Multiplication

Multiplication is slightly different to how you would do it on paper. Normally, we would just use a cross symbol - the letter x on a keyboard. However, we can't use that! In programming, we try to give each character only one meaning. Since x is already a letter, we have to use something else. In JavaScript, we use the asterisk (*) symbol. Here are some examples of multiplication in JavaScript:

alert(1 * 3);
// Equal to 3
alert(9 * 8);
// Equal to 72
alert(-2.23 * 7.92);
// Equal to -17.6616
alert(-4 * -3);
// Equal to 12

Division

Division also works differently to on paper. While there is a Unicode symbol for division (÷), it is not something that you can type easily on your keyboard and is not that commonly used. Instead, we use the slash (/) sign to mean 'divided by'. Here are some examples:

alert(1 / 2);
// Equal to 0.5
alert(20 / -4);
// Equal to -5
alert(0 / 5);
// Equal to 0
alert(64 / 0);
// Equal to Infinity

I just want to highlight the last one on that list:

alert(64 / 0);
// Equal to Infinity

In maths, anything divided by 0 is equal to infinity (explanation here). However, in JavaScript it can't equal to "infinity" - otherwise JavaScript would think it was a variable! So, we need to capitalize it to make it Infinity. This is a special value in JavaScript (not a variable). It doesn't really have many use cases but is the outcome of statements like the one above.

Fun fact: Infinity - Infinity in JavaScript does not equal 0!

Modulo

Modulo is something that you may not have heard of before, unlike the four operations above. Put simply, modulo is the remainder when dividing two numbers. It is done by putting a % sign between the two numbers. For example:

alert(24 % 5);
// Equal to 4

Let's break it down a bit further. We have the numbers 24 and 5, separated by the modulo (%) sign. This means that to calculate the answer in our heads, we'd first need to divide 24 by 5 (into groups of five). Here, we can make four groups of five. However, we'd still have an extra 4 left over as a remainder. So, the answer is 4. Here are some other examples - if you still don't get it, try and do the process above on these:

alert(10 % 4);
// Equal to 2
alert(30 % 3);
// Equal to 0, 3 goes into 30 ten times without a remainder
alert(6 % 5);
// Equal to 1

`Math` functions

As well as the operators above, there are also some functions that we can use to carry out slightly more advanced tasks. These functions generally follow the form of Math.whateverTheFunctionIs(). This is because Math is an object containing lots of different math-related functions. I'll talk more about objects in a later article, but you don't really have to worry about how it works for the moment. Just use the syntax that I put here and you'll be fine.

To the power of

We do this using the Math.pow(number,power) function. For example, let's say we wanted to square the number 5:

alert(Math.pow(5,2));
// Equal to 25

Wait whaaat? A function inside the alert function? Yup. This is because Math.pow is a function that returns something. You can think of it just like a variable. So instead of x being equal to 25, Math.pow(5,2) is equal to 25.

You can also go to higher powers if you want (pun intended 🙏 *sigh*):

alert(Math.pow(3,3)); // 3 to the power of 3
// Equal to 27
alert(Math.pow(2,10)); // 2 to the power of 10
// Equal to 1024

Square root & Cube root

You can calculate square an cube roots in JavaScript using the Math.sqrt() and Math.cbrt() functions. Here are some examples which you can try out:

alert(Math.sqrt(25));
// Equal to 5
alert(Math.cbrt(8));
// Equal to 2

Rounding

We can round a number to a whole number using the Math.round() function. Here are some examples:

alert(Math.round(35.82562));
// Equal to 36
alert(Math.round(35.22353));
// Equal to 35
alert(Math.round(4));
// Equal to 4 (already rounded)
alert(Math.round(6.5));
// Equal to 7 (.5 rounds up)

It will round up if the decimal part of the number is greater than or equal to 0.5. Otherwise it will round down.

Specifically rounding up or down

But what if we want to specifically round up or down? For example, what if before we wanted to round 35.82562 downwards? This is where floor and ceiling come in handy. Math.floor() rounds the number down no matter what, while Math.ceil() rounds the number up no matter what. Note that Math.ceil(6) or even Math.ceil(6.0) would not round up to 7. Here are some examples:

alert(Math.floor(35.82562));
// Equal to 35
alert(Math.ceil(35.82562));
// Equal to 36
alert(Math.ceil(4.0));
// Equal to 4
alert(Math.ceil(4.01));
// Equal to 5
alert(Math.floor(0.99999));
// Equal to 0

Conclusion

That's it for today! This just covered some basic math operations, but there are many more. Click here for a list of all the functions in the Math object (the ones that start with Math.). As well as having functions, the Math object also has some static values such as Math.PI - they are listed on that page as well.

Hopefully, you learned a lot from this article! If you did, I'd be stoked if you shared it on social media.

Also, it takes me a lot of time to write these articles. So far I've spent 1 hour and 45 minutes on this article, and I spend over 3 hours on some articles! At the time of writing, I currently don't have any ads on here, so the only way that I can get support for all this content is via donations.

If you want to give me a little thanks and make my entire day feel awesome, I'd really appreciate if you'd buy me a coffee ☕. It's only $4, and it makes a big difference. In fact, at the moment I'm only 49 cents short of covering my costs for Code The Web, and it would be really cool if you were the one to help me reach that milestone. Okie, enough about that 😉

If you need any help with the topics covered in this article or want to give feedback (I love myself some scrumptious feedback), please do so in the comments below or via the cool live chat widget that is probably in the bottom-right corner of your screen right now.

Also, if you want the latest web development articles from Code The Web and around the internet in your inbox about once a week, enter your email below! You can unsubscribe at any time.

Click here to sign up :D

That's it for today! Next time, I'll be writing about for loops and while loops in JavaScript - they are really cool, because you can tell the browser to repeat bits of your code over and over again (even with different values each time)! See you then 🚀

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

All about IF statements and booleans in JavaScript!

Ethan — Wed, 28 Feb 2018 00:00:00 +0000

If statements are another core part of JavaScript: they let you control what code is actually executed, based on comparing values and/or variables. I'll also teach you about all the cool stuff that you can do with booleans! Read on below...

Getting started!

First of all, I want to encourage you to follow along in this article! Let's start by making a new HTML file with a <script> tag in it:

<!DOCTYPE html>
<html>
    <head>
        <title>If statements are awesome!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            // Our script will go here!
        </script>
    </body>
</html>

Once that's done, open it up in your web browser and you're ready to go! (don't forget to save and reload the page every time you make a change)

What is an if statement?

In essence, an if statement simply executes some code if a value is equivalent to true.

Terminology

In this article, I'll be using the terms 'brackets' and 'curly brackets'. When I say brackets I mean these: ( ) And when I say curly brackets I mean these: { }. The only reason that I am saying this is because I know that depending on which part of the world you come from, you may have different names for your square, curly and normal brackets (eg. parentheses).

The if statement syntax

Here's what a simple if statement looks like:

if (true) {
    alert('Yay!');
}

Let's have a look at what's going on here. In essence, we're simply saying if the stuff inside the brackets is equivalent to true, execute the code inside the curly brackets. Note here that I said equivalent to true. This doesn't mean that the text between the brackets literally has to say true. It just means that it needs to be a statement that is true. For example: 1 + 3 == 4 is true.

Don't worry, I'll get into how this works later (I'll be speaking more about JavaScript math in a later article). It's basically just 1 + 3 = 4. 1 + 3 does equal 4, so it is equivalent to true. Therefore, if we put this inside the brackets our code will run! Let's try it out. Put the following code in your <script> tag, then reload the page:

if (1 + 3 == 4) {
    alert('Yay!');
}

Now, let's try and make it so that the alert doesn't run. We would do this by making the statement inside the brackets equivalent to false:

if (1 + 3 == 5) {
    alert('Yay!');
}

(your high school math teacher wouldn't be proud)

Now, because the statement in the brackets is false, the code inside the curly brackets will not run! Try it out yourself... It will no longer alert "Yay!"

You have now learned the basic if statement syntax!

Boolean operators

It's time to take a bit of a closer look at what gives us true and what gives us false.

Let's use the statement from above as an example:

1 + 3 == 4 /* Returns true */

Here, we're using the double equals sign (==) to compare the two sides: 1 + 3 and 4. This comparison sign says is saying "if they are equal, then return true". But we can compare in other ways as well! For example:

1 + 3 != 4 /* Returns false */

Here, we're telling the computer to return true if 1 + 3 is not equal to 4. 1 + 3 is obviously equal to 4, so it returns false.

There are a few other comparisons that we can use - here is a list of the basic comparison signs:

Sign	Returns `true` if...
`==`	Both sides are equal
`!=`	Both sides are not equal
`<`	The left side is less than the right side
`>`	The left side is greater than the right side
`<=`	The left side is less than or equal to the right side
`>=`	The left side is greater than or equal to the right side

Let's try a few of them out... Challenge Time!

Question 1: Alert "Not fake news!" if 4 is less than 410.

if (4 < 410) {
    alert('Not fake news!');
}

Question 2: Alert "5 is the greatest!" if 5 is greater 6.

if (5 > 6) {
    alert('5 is the greatest!');
}

Question 3: Alert "JavaScript is awesome!" if 3 is less than or equal to 3.

if (3 <= 3) {
    alert('JavaScript is awesome!');
}

Multiple true/false statements

What if we want to combine multiple statements? For example, what if we want to say if 3 + 5 equals 8 and 2 + 2 equals 4? We have two main ways of combining statements like the one above: and and or. And is simply &&, and or is simply || (that's 2x the key with the vertical line on it, usually it will be SHIFT + backslash).

Here's how && (and) works:

true && true /* Returns true */

true && false /* Returns false */

false && false /* Returns false */

And here's how || (or) works:

true || true /* Returns true */

true || false /* Returns true */

false || false /* Returns false */

It's important to not here that true || true is equal to true, not false. This is because in JavaScript, or actually means and or. Don't ask me why, programming languages sometimes have weird things like that.

Now, let's substitute in a few real statements instead of just true and false. Here's an example:

(65 > 25) || (5 + 1 == 5) /* Returns true */

You don't need to have the brackets, but I've put them in brackets just to make it a bit clearer (you are allowed to do that in JavaScript). As you can see, the code above is simply this:

true || false /* Returns true */

The only difference is that true has been replaced with 65 > 25 which is equivalent to true, and similarly false has been replaced with 5 + 1 == 5 which is equivalent to false.

Your turn to try! See if you can complete the following tasks:

Question 1: Alert "The Universe is not broken" if 5 is equal to 5 and 3 is equal to 3.

if (5 == 5 && 3 == 3) {
    alert('The Universe is not broken');
}

Question 2: Alert "At least one of the statements is correct" if 1 plus 2 equals 4 or 1 plus 2 equals 3.

if (1 + 2 == 4 || 1 + 2 == 3) {
    alert('At least one of the statements is correct');
}

Question 3: Alert "I am such a rebel" if 5 plus 5 is not equal to 10 or 2 plus 4 is greater than or equal to 7.

if (5 + 5 != 10 || 2 + 4 >= 7) {
    alert('I am such a rebel');
}

Question 4: Alert "42 is between 21 and 47" if 42 is greater than 21 and 42 is less than 47.

if (42 > 21 && 42 < 47) {
    alert('42 is between 21 and 47');
}

Woo! Hopefully, you did okay 😉

One more thing on boolean operators...

There's one final super-handy trick that you should know about booleans in JavaScript... By putting a single exclamation mark before a statement, you reverse the boolean. For example, !true would equal false and !false will equal true.

If putting the exclamation before a statement with spaces or symbols in between (eg. 1 + 2 == 3 as supposed to true), don't forget to surround it with brackets! This ensures that the exclamation mark works for the whole statement. Here's an example:

if( !(5 + 2 < 3) && 5 + 6 == 11) {
    alert('Woo!');
}

As you can see, the 5 + 2 < 3 gets wrapped in brackets so that the exclamation mark applies to all of it.

It's worth noting that in the example above, we didn't really need the exclamation mark in the first place - !(5 + 2 < 3) is the same as 5 + 2 >= 3. However, it is still useful to know about this feature and can come in handy when making more complex statements.

...Else?

We can also give our if statement an else, which will run if the code inside the first set of curly brackets doesn't run - in other words, if the statement inside the normal brackets is false. Here's what it looks like:

if ( /* some statement... */ ) {
    /* some code to be run if that statement is true */
} else {
    /* some code to be run if that statement is not true */
}

Try it out! Write some code that will alert "2 is less than 1" if 2 is less than 1 and will alert "2 is not less than 1" otherwise...

if (2 < 1) {
    alert('2 is less than 1');
} else {
    alert('2 is not less than 1');
}

There we go! Else statements are that simple! They simply run if the first set of curly brackets doesn't run.

NOTE: It is very important that the else comes straight after the end of the if, with no other code in between.

Else if

Wait, it could get even more confusing? Sort of. Here's what an if statement looks like with both an else if and an else:

if ( /* some statement... */ ) {
    /* some code to be run if that statement is true */
} else if ( /* another statement... */ ) {
    /* some code to be run if the first statement is false and the else if statement is true */
} else {
    /* some code to be run if nothing has been run yet */
}

This may look confusing at first. However, let's pretend we're the computer and look at it from the computer's point of view.

First of all, we have an if statement. If the stuff inside the brackets is true, we execute the stuff in its set of curly and stop. If it is not true, we move on to the else if. If the stuff inside that set of brackets is true, we run the stuff in its set of curly brackets and stop. Finally, if we are still going and nothing has been true yet, we execute the stuff in the else's pair of curly brackets.

Okay, you can stop being a computer now.

Try doing one of these yourself - we'll use the example from before:

if (2 < 1) {
    alert('2 is less than 1');
} else {
    alert('2 is not less than 1');
}

Now, we want it to alert "2 is equal to 1" if 2 == 1, otherwise alert "2 is less than 1" if 2 < 1 and alert "2 is greater than 1" if none of the others are true. Have a go!

if(2 == 1) {
    alert('2 is equal to 1');
} else if (2 < 1) {
    alert('2 is less than 1');
} else {
    alert('2 is greater than 1');
}

Here, the computer would evaluate 2 == 1 - this is false, so we move on to the next statement - our else if, 2 < 1. This is again false, so we move on to the else and execute the code inside of that set of curly brackets: alert('2 is greater than 1').

Extension:

Make a script where the if code runs, one where the else if code runs and one where the else code runs.
You can have multiple else if's in an if / else if / else statement!! Try making one like the example below:

if (1 == 5) {
    alert('1 is 5');
} else if (1 == 4) {
    alert('1 is 4');
} else if (1 == 3) {
    alert('1 is 3');
} else {
    alert('None of those were correct!');
}

Why does any of this matter?

In this article, I mainly used numbers to illustrate how if statements work more clearly. However, once we put variables in our if statements instead of just set values, they become a super-useful tool and one of the core parts of JavaScript!

Conclusion

Woo! That was intense 🔥 🔥

I hope you learned a lot today, and it helped you in your quest to learn JavaScript! If it was helpful, I'd really appreciate it if you shared this article or signed up to the newsletter to receive new posts fresh in your inbox!

Also, I'd really appreciate it if you bought me a coffee ☕ - this article is over 2,500 words and has taken over 2.5 hours to write! And c'mon, it's only a few bucks. That said, I don't want you to feel like you have to. In fact, go ahead and don't. Be a rebel. I won't get offended and will love you all the same. I'm perfectly happy giving my content away free - otherwise, you would be paying to read this right now! 😉 🤑

Okay, so that's it for today! Don't forget to head to the comments if you have any questions or feedback.

Next time, I'll be writing about some basic math in JavaScript. I'll be talking about stuff like multiplication, rounding, square roots and more - way beyond the simple 1 + 2 that we learned today! See you next time 😉

P.S. Tomorrow marks 5 months since my first article on Code The Web! 🎉 🎉 In that time, I've written nearly 50,000 words and 30 articles. I'm still really enjoying blogging, creating content and sharing my knowledge with Y'all, and love the chats that I have with subscribers and other members of the community. Keep on being awesome, and if you wanna chat then feel free to contact me!

(and if ya wanna say thanks, I wouldn't mind a coffee 😉 ☕)

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

Variables in JavaScript

Ethan — Mon, 19 Feb 2018 00:00:00 +0000

Variables are a core part of JavaScript - in fact, they are a core part of almost any programming language. They let you store information, and are the basis of what makes JavaScript so powerful. Learn all about them in this article...

What is a variable?

A variable is simply a place to store something. In fact, you can think of a variable like a cupboard. First, we need to create the cupboard to store stuff in. Next, we'll want to put something in the cupboard. Then later, we'll want to retrieve the item and use it. We might also want to replace the item with another item.

Time to see it in use! Let's say we wanted to alert the number 25. Normally, we'd do it like so:

alert(25);

But what about doing this using a variable? Here's how:

var x = 25;
alert(x);

Let's take a look at what's going on here- first of all, we're creating (aka declaring) our variable called x by saying var x. On this same line, we're also giving the variable an initial value to store by saying = 25.

Now, when we run this code it will alert 25! This is because x is now just a placeholder for the number 25. It is just like if you were editing a document and wanted to replace all instances of the word "banana" - in this case, the browser goes through our code and replaces all instances of the variable x with 25.

PS: Follow along! Create a new file called index.html and add the following code:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello world in JavaScript!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            var x = 25;
            alert(x);
        </script>
    </body>
</html>

You can now put all of your JavaScript inside the <script> tag! 🎉

But why does any of this matter? Well, the true power of variables is the fact that you can change them. For example:

var x = 25;
x = 85;
alert(x);

As you can see, setting a variable that had already been declared is as simple as saying x = 85. You don't need the var bit, as it's already declared.

Now, we can alert 85 without even changing the line where it says alert! This might seem weird now, but variables are one of the core parts of JavaScript and will come in handy more as you write more complicated code.

Types of variables

In JavaScript, there are different variable types. This is because it needs to know what type of data we are giving the variable, because, well, computers are dumber than you are. Note that you can change a variable to a different type after it has been declared, it doesn't need to stay the same type. Here are some of the basic data types in JavaScript:

Strings

A string is another way of saying some text. We have to surround it in quotes because otherwise it would be considered a variable. Here is an example:

var x = "I am a string!";

It doesn't matter if you have single or double quotes:

var x = 'I am a string!';

Numbers

Obviously, we can also set a variable to a number - like we did before! It can be a whole number:

var x = 16;

Or a decimal:

var x = 3.14;

Booleans

Booleans are simply true or false values:

var x = true;
var y = false;

This may sound very simple, but they can come in handy when using if statements - which let you execute bits of your code based on whether statements equal true or false.

Conclusion

Yay! You now know all about variables! Let's go through what we've learned today.

First of all, we learned how to declare, set and change variables:

var x = 12; /* Declared and set a variable */

x = "Helloooo!"; /* Change a variable (you can change it to a different type) */

We also learned about some of the basic types of data:

var x = 2.71; /* Number */

var y = 'I <3 JavaScript!'; /* String */

var z = false; /* Boolean */

I'm honored to be part of your coding journey, and I hope you found this useful! If so, why don't you join the newsletter and receive more articles like this in your inbox? Plus, I'll love you in return <3

Also, if you are really nice and have $4 to spare, I'd really appreciate it if you buy me a coffee ☕. Thanks!

And if there's anyone who you think this article would really help out, don't forget to share it with them! Finally, if you wanna chat with me (or other people), head down to the comments below.

See you next time, when I'll be talking about if statements in JavaScript, as well as how we can compare variables to create true and false values. See you then!

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

Getting started with JavaScript!

Ethan — Mon, 12 Feb 2018 00:00:00 +0000

JavaScript is a programming language that makes websites do stuff. It can store variables, do certain actions based on logic and more. You can even change the HTML of a page and add CSS using JavaScript! It is a language that every web developer must learn at some point because it is just so useful.

Many programming languages require you to download compilers to run the code on your computer, but JavaScript doesn't! One of the main advantages of JavaScript is that it works in any browser, on any computer. This makes it very accessible and extremely easy to get started - by the end of this article, you will already have run your first line of JavaScript.

There's not really much point in continuing to convince you to learn JavaScript, because if you didn't already want to learn it then you wouldn't be on this page! 😜

How to run JavaScript

Because JavaScript runs as part of websites, we execute it by having it in our HTML - there are two ways to do this.

The first way is to stick our JavaScript inside a script tag. Here's an example:

<script>
    // Your JavaScript code here!
</script>

You might be wondering about the second line:

// Your JavaScript code here!

The // in front of the text makes the entire line (after the //) a comment. This means that it won't be run as JavaScript, and is simply a message for us human (or half-human anyway) coders to read.

By now you're probably itching to write some code, and I don't blame you! First of all, create a new folder on your computer with an index.html file inside. Next, let's add some boilerplate HTML code:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello world in JavaScript!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
    </body>
</html>

Time to add our <script> tag! It can be put in either the <head> or <body> tags. Note that it executes at its position in the HTML. This means that if we're modifying an <h1> but then <h1> is after the <script> tag then it won't have been loaded yet, and the code will not work. Because of this, <script> tags are usually placed just before the ending </body> tag, so everything has loaded first.

Let's add it in!

<!DOCTYPE html>
<html>
    <head>
        <title>Hello world in JavaScript!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            // Your JavaScript code here!
        </script>
    </body>
</html>

If you save and reload the page, nothing will have changed - this is because our script doesn't do anything yet!

Writing some JavaScript!

Get ready for it - you're just about to write your very first line of JavaScript (not including the comment of course 😜 )

We're going to be creating a popup saying "Hello World!" - This is a classic message that programmers often use when they first try using a new technology or language.

Here's the code:

alert('Hello World!');

WAIT! Don't copy the code into your editor yet! Before we try out this code, we need to understand what's going on here first. Do I see your mouse slowly moving over to your code editor? Just stay with me here a bit.

This line is made up of a word, some brackets, some quotes with text inside them and a semicolon. The alert(...) bit is called a function. A function is basically a specific action that you tell the computer to do. A function can have inputs, which are the bits in the brackets. If a function doesn't have inputs, we just leave the brackets empty (eg. myFuction()). A function can also have outputs, which I will go into in a later article. Here our alert function doesn't have an output because it does something (in this case creates a popup) instead of returning a value. I'll go more into functions in a later article.

Now let's have a look at what is inside the brackets - the input for the alert function. As you can see, we have our message, Hello World!, inside some quotes. This signifies that the stuff inside the quotes is text. Well isn't that obvious? Not really. Computers are dumb, and can't tell what is what. This is why we need to specifically tell it that this is text (a "String" in programmer-lingo) by putting it in quotes. In JavaScript, it doesn't really matter if you use single or double quotes as long as the one at the start is the same as the one at the end.

Finally, there is a semicolon at the end of the line. Technically they are not always needed, but you should always put a semicolon at the end of each line. This can be quite hard to remember at first - that's why every JavaScripter wishes that one of these actually existed:

Source: Reddit

Anyway, that's it! Now when you type your first line of JavaScript, you'll actually know what it does! Sorry for the wait 😂

So, here's the moment you've been waiting for - go type the line inside your <script>, under the comment...

<!DOCTYPE html>
<html>
    <head>
        <title>Hello world in JavaScript!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script>
            // Your JavaScript code here!
            alert('Hello World!');
        </script>
    </body>
</html>

If you're feeling super-inspired, type it yourself instead of being a copy-paste wizard 😉

Reload the page, and see what happens...

Woo! You're now officially a JavaScripter! 🎉 🎉

We're nearly done, I just want to tell you about another way of putting JavaScript in your HTML...

An alternate way to run your JavaScript

You know how you can link .css files for your CSS? Well, you can do a similar thing with JavaScript! However, instead of using a <link> tag we use a <script> tag. Here's an example:

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

As you can see, we use the same <script> tag as before but leave it empty. Instead, we give the opening tag and src attribute with the URL of the JavaScript file. Let's try it out! In the folder with your index.html, create a script.js file. Inside the file, add our JavaScript from earlier on:

// Your JavaScript code here!
alert('Hello World!');

Next in the HTML, update the <script> tag:

<!DOCTYPE html>
<html>
    <head>
        <title>Hello world in JavaScript!</title>
    </head>
    <body>
        <h1>JavaScript :)</h1>
        <script src="script.js"></script>
    </body>
</html>

Now if you reload the page, the script will still work! This is just an alternate way of writing our JavaScript, and can be especially good to prevent cluttering our HTML with a lot of JavaScript.

Conclusion

Well done, you made it! You now know how to write some JavaScript, link it to our HTML and call a basic function!

It is really awesome to have been able to help you write your first line of JavaScript, who knows where you'll be in a few years' time! If you liked this article and want to continue learning JavaScript, I will be releasing one JavaScript tutorial each week, which you can find here.

Also, these articles take time and effort, so I'd really appreciate it if you shared it :)

If you want to stay up to date and get these articles in your inbox as I write them (a great way to stay motivated to keep learning JavaScript), enter your email here! - I'd really appreciate it 😉

Finally, if you have any questions or feedback, tell me about it in the comments.

See you next time, where I'll be talking about variables - one of the most important parts of JavaScript. See you then!

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

A beginner’s guide to getting your website online with GitHub Pages

Ethan — Sun, 04 Feb 2018 00:00:00 +0000

Do you have an awesome website that is finally ready to share with the world? Are you finally ready to stop running it on your local server or opening up your files in the browser, and ready to launch it onto the great and powerful internet?

I know I was in this situation at one stage. Going from a something running on your computer to something that anyone on the internet can access can be very intimidating.

I wrote more about how the internet works in a previous article, but I'll briefly go over how your site is going to get to people.

First, your site needs to be hosted somewhere. What this means is that there needs to be a computer that will send the HTML files to someone when they load the website. This is commonly known as a server, but any computer can be used (the internet is just a massive network of computers).

However, hosting a website can be very scary for multiple reasons. First of all, you have to leave the server running and connected to the internet 24/7. This means that either you're going to have to install a big server in your basement or never turn your computer off. Because of this, using your computer as a server is not a practical idea (unless you have an old computer that you never use).

That's not the only problem. Even if you do buy a server, you will have to continually maintain it and make sure that it has enough processing power to serve your website. Ever heard of Google's data centers? Here's a pic:

Photo credit: Google

See all those things on racks? They're all servers. Google needs this many servers (they have centers like these all over the world) because of the sheer amount of people who access Google.

Obviously you won't have as many users as Google, but my point is that the more people view your site, the better your server needs to be. Also, bad servers can make your page load reeaaaally slowly.

The final and most scary problem with hosting your own site is security. You will have to connect your server up to your Wi-Fi router, meaning that people from anywhere in the world will be able to access your home network. While there are security measures in place, it does leave you very vulnerable to hacking.

The alternative?

Because of all these complications, people usually don't host their websites themselves - instead they pay for hosting. This means that you pay to put your HTML files on a server somewhere in the world in a data center similar to the one above, and they will take care and maintain the servers for you.

This can cost anywhere from about $4 a month to about $100 a month, depending on the speed and features of the server. (According to this great infographic)

Okay, so you can get hosting for relatively cheap if you want, but still - why pay for stuff when you don't have to?

The free alternative?

Let me introduce you to something called GitHub Pages.

GitHub Pages hosts your website 100% for free. The single drawback is that other people can view all the files in your site, although often this can be a good thing. It means that anyone visiting your page on GitHub can see the work that went into making your site. In fact, often employers even select people due to their projects on GitHub (don't worry, you can always delete them later if you feel they're not your best work).

NOTE: I know that it sounds like I'm paid to promote GitHub or something, but I'm really not. I just really like using GitHub pages, and think that you should too 😉

In this tutorial, I'm going to show you how to host your site on GitHub pages and sync GitHub to your computer so that you can make edits easily!

Note that this tutorial assumes you already have a folder with a website in it. If not, create a new folder and add basic index.html and style.css files.

Getting started

First of all, you're going to need to sign up for an account at Github.com. I'll be right here when you get back!

Next, you need to install GitHub Desktop on your computer - I'll give you a sec to do that too (not really, I'm not writing this live as you're reading it 😜)

Once you have installed GitHub Desktop, sign into your account (as detailed here). First, you need to create your repository. A repository is the place where you store all the files for your website, similar to the folder on your computer that contains your website.

Each repository has a URL where the hosted site ends up. There are two types of repositories: user repositories and project repositories.

For this example, let's say your username was 'example'. Your user repository would be hosted at example.github.io. Now let's say you did a random number generator and called the repository randomnumber - then it would be hosted at example.github.io/randomnumber.

In this case, let's say we've coded our main website - so we want it to be our user site. This means that instead of naming our repository something like randomnumber we need to name it example.github.io. For example, my GitHub repository name is booligoosh.github.io.

Creating a repository

Okay, let's create our repository now! Click the left option (Create new repository):

When you click it, a dialogue will come up. Enter in your repository name (whateveryourusernameis.github.io) and choose where to save the repository folder on your computer. Leave all the other options as they are, then click "Create Repository":

Adding your code

Now, it's time to add our code! Move all of your website files into the repository folder on your computer, then go back to GitHub Desktop - it should now look something along the lines of this:

Fill out the summary saying what you did, then click "Commit to master". This is just tech-lingo for "save my changes to the repository".

Publishing to GitHub

Next, click "Publish Repository" in the top right-hand corner - this will send your code to the GitHub servers to be hosted!

Leave all the fields as they are, but untick "Keep this code private" (you have to pay for that). Click "Publish Repository":

Next, we need to configure the settings for our website to be hosted! Go to github.com/yourusername/yourusername.github.io (eg. github.com/Booligoosh/booligoosh.github.io for me) and click on the 'Settings' tab.

Scroll down to where it says GitHub Pages, then click on the dropdown. Select "master branch", then click "Save".

Yay! Now click on the link to take you to your new site!

You now have a website!

Making changes

We're nearly done! The last thing to do is to make a change to our website, from our computer! First, slightly modify your code in some way.

Now, go back to GitHub Desktop - it will even show you a summary of what you changed! Fill out your commit summary and hit the commit button!

Now, click "Push origin" in the top right-hand corner (where the publish button used to be). This is just tech-lingo for "Upload my changes to GitHub's servers".

Now, wait for a few minutes. The time may vary, but often your site could take ~5mins to update (keep reloading the page to check). Eventually the changes will load!

Conclusion

I hope you learned a lot today! You now know how to take your site from files on your computer to a real website on the internet! My goal is to teach people like you who are learning web development how to do so, and I'd really appreciate if you supported me in my mission either by sharing this or signing up to my newsletter. (you will get new articles in your inbox! 🎉 )

Next week I'll be talking about how to use GitHub pages to host your website on a custom domain (so instead of your website being at username.github.io it could be at example.com or example.io or example.blog). You do have to pay a (small) fee for the domain name, but this way you still get free hosting! Stay tuned for that :)

Oh! And if you have any feedback, need any help or just wanna say howdy, do so in the comments below. Don't forget to share, subscribe, and I'll see you next time!

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

CSS text properties, and how to use Google Fonts on your website

Ethan — Wed, 17 Jan 2018 00:00:00 +0000

Learn how to change the way text appears on a website, and learn how to use the most extensive and powerful free font database in the world!

Hey everyone! Welcome back to another year of Code The Web! Hopefully, you had a good New Year's, and have made some good resolutions for 2018...

Today I'm going to be talking about text-related CSS properties, as well as how to spice up your website with this nifty thing called Google Fonts.

Let's get going!

Getting started

I recommend following along in all of my tutorials, as it really helps you get a better grasp on the subject. If you want to follow along through this tutorial, here's how to get started.

First, create a new project folder with blank index.html and style.css files inside.

Next, let's write some basic HTML to test our font properties on. Add the following to your index.html:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Fonts!</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <span>Look at me, I am some awesome text!</span>
    </body>
</html>

Open your index.html file in a browser - it should look something like this:

Now we're good to go!

font-size

You may already know about font-size because it is a very common property, but I'll go through it anyway (you can skip if you want).

font-size is quite straight-forward, it determines the size of the text. It accepts a value in any CSS unit. Let's try it out!

Open up your style.css file, and style the <span> to have a font-size of 50px - see if you can work out the code on your own...

span {
  font-size: 50px;
}

Here is the result:

font-weight

font-weight sets the thickness of the text (eg. bold). It takes the following values:

lighter
normal
bold
bolder
One of the following numbers: 100, 200, 300, 400, 500, 600, 700, 800, 900

The numbers go from 100 being the thinnest to 900 being the thickest. 400 is equivalent to normal and 700 is equivalent to bold. Note that the numbers do not have a unit after them.

Let's try making our font lighter - add the following to your CSS file:

span {
  font-size: 50px;
  font-weight: lighter; /* Add this line */
}

Result:

What?! Nothing happened! This is because not all fonts come with all weights. This is because the designer of the font needs to design each weight of the font individually, and lots of font designers will not end up designing up to 9 versions of the same font. In this case, the designer of this font has not made a lighter version - so the browser just shows the closest equivalent which is normal.

In my next article, I'll go into the behind-the-scenes of how the different font weight files are actually specified.

Okay, let's try making our text bold - the designer of this font has made a bold version...

span {
  font-size: 50px;
  font-weight: bold; /* Change this line */
}

Result:

Woo! Let's move on...

line-height

line-height basically controls how high each line of text is. The larger the line-height, the more vertical space between the text.

Like font-size, line-height accepts a value in any CSS unit. Let's try it out!

First of all, let's split our text onto two lines so we can see the line-height properly by adding a <br> in our HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Fonts!</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <span>Look at me, <br>I am some awesome text!</span> <!-- Change this line -->
    </body>
</html>

Result:

Now, let's try setting our line-height to 200px:

span {
  font-size: 50px;
  font-weight: bold;
  line-height: 200px; /* Add this line */
}

Now, take a look at the result:

As you can see, there is now much more space between the lines of text.

But you may be wondering - how does the line height create more space between the lines? This is because technically, there is no space between the lines. The lines are each 200px high, and the text is vertically centered on the lines. This means that as the line-height gets bigger but the font-size stays the same, the gaps between the actual text will get bigger. Here is a diagram:

line-height works well when using em units because it means you can set the line-height relative to the font-size. For example, line-height: 2em would make the line-height double the size of the text.

letter-spacing

letter-spacing determines the amount of space in between each letter and takes a value in any CSS unit. Let's jump right in and try it out!

Try giving the text a letter-spacing of 5px...

span {
  font-size: 50px;
  font-weight: bold;
  line-height: 200px;
  letter-spacing: 5px; /* Add this line */
}

Here's the result:

As you can see, the letters are much more spread out. This example looks kind of ridiculously spread out to make the letter-spacing clear, but often it is good for minor adjustments (similar thing goes for line-height).

font-family

The font-family tells the browser which font to display the text in. Here are the default fonts available:

serif

sans-serif

cursive

fantasy

monospace

Let's try setting our font to fantasy (don't ask me why it is called that):

span {
  font-size: 50px;
  font-weight: bold;
  line-height: 200px;
  letter-spacing: 5px;
  font-family: fantasy; /* Add this line */
}

Here is the result:

Awesome!

Note that the default fonts might be different on different computers or browsers because it is what the browser deems to be the default font for that category. Generally, the fonts will look similar though.

You can also specify any font name that is installed on the computer system (if the font name contains a space, surround it with quotes eg. font-family: "Modern Sans"). The problem is, the font will not work if it is not installed on the user's machine. This is where Google Fonts comes in...

Google Fonts

Google Fonts is a library filled with thousands of awesome (and free 😋 ) fonts.

Talking of free: Always be careful when using a font online, sometimes the license doesn't allow it to be used online or for commercial use, or you may have to buy a license. Luckily all the fonts on Google Fonts are completely free, so you don't have to worry!

The good thing about using a font from Google Fonts is that they host and create a font stylesheet for you. This means that all you need to do is link to one of their files and the font will work for everyone - even if the user doesn't have it installed on their computer.

Let's add a font from Google Fonts to our website!

First of all, go to the Google Fonts website if you haven't already. When you get there, you will see a bunch of font specimens:

There is also a search box and many advanced filters to find your favorite font - you can even filter by things such as thickness or width!

In this case, I have chosen the font Ribeye Marrow. You can either follow along with me using that font or pick your own.

Once you have a font, click the red plus button - the image below shows how to do it on a specific font page or straight from the home page:

After doing this, a small panel will appear in the bottom right corner of your screen:

Open it by clicking on it...

First of all, we will need to link to the font so that the browser knows where to find the files. There are two ways to do this: using HTML (standard) or CSS (@import). Personally, I prefer CSS as the font is part of the styling of the page so it makes sense to put it together.

To use the CSS option, click on "@IMPORT"

Next, copy the middle line of code (the one with @import in it):

Now, we need to paste it into our CSS code - but where? @import statements must always be outside of the curly brackets, but it really doesn't matter where in the document - as long as it is above the place where the font is used (the font-family property). As a general rule, I like to put Google Font imports at the top of CSS files so that the rest of the CSS file has access to it.

I'll explain more about CSS @imports in another article.

Let's paste in our line of code:

@import url('https://fonts.googleapis.com/css?family=Ribeye+Marrow'); /* Add this line */

span {
  font-size: 50px;
  font-weight: bold;
  line-height: 200px;
  letter-spacing: 5px;
  font-family: fantasy;
}

Reload the page - you will see that nothing has changed! This is because we still need to declare the font using font-family. The reason for using the @import line is so that the font will work even if it is not installed on the user's computer.

Let's use our font! We simply do this by giving the name of the font as a value to the font-family property:

@import url('https://fonts.googleapis.com/css?family=Ribeye+Marrow');

span {
  font-size: 50px;
  font-weight: bold;
  line-height: 200px;
  letter-spacing: 5px;
  font-family: "Ribeye Marrow"; /* Change this line */
}

Remember to include quotation marks if the name has a space!

Here is the result:

Now our text is in the font Ribeye Marrow!

Conclusion

Woo! That's it for today! Hopefully, this article was useful and helped you along your coding journey. As always, if there was anything that you didn't get or if you have any feedback, tell me in the comments.

Also, these articles don't come out of thin air! Looking at my Pomodoro Timer, so far I've spent 3 hours and 20 minutes on this article, and have just passed to 40,000 word mark on this blog!

While your nice comments and knowing that I am helping you all make it worthwhile, I'd really appreciate it if you shared this or this blog with your friends or signed up to the newsletter to get the latest articles in your inbox.

See you next time, where I'll be talking about using custom font files to extend your font choices beyond Google Fonts. See you then! Have a great and productive 2018 filled with lots of coding fun! 䢜 🎆 🚀

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

6 Reference sites to help you learn web development in 2018 and beyond… 🚀

Ethan — Sat, 16 Dec 2017 00:00:00 +0000

As a person learning web development, you should always be looking things up that you don't know. Because, let's face it - in today's world, it's silly to know every single feature of a coding language. Instead, we as developers look things up! Today, I'm going to show you six of the best web development reference sites for those moments when you can't quite remember how that specific thing works.

What is a reference site?

A reference site is where you go if you need to know a specific thing - let’s say what values the margin property takes in CSS or how to find the square root of a number in JavaScript. It is an easy way to get an answer to a very specific question.

How is a reference site different to a tutorial site?

A tutorial site such as this one aims to explain something to you. So, for example, in my CSS background images tutorial, I teach you how all the different background image properties work in an easy-to-understand way. If it were a reference site, it would say something like:

The background-position property takes one or more comma-separated <position> values. If multiple background images have been specified, each <position> is applied to a corresponding background image (first <position> for the first image, second <position> for the second image, and so on).

(From the Codrops CSS Reference)

As you can see, this is much more succinct and is good if you need a quick reference or reminder, however it is not as good if you are learning it for the first time and need help, examples and, guidance.

1. W3Schools

W3Schools is a tutorials website, but they are more brief and reference-like. They also have dedicated reference pages for most web development languages. Their format is very good. For each language reference, they have a sidebar with a list of pages, so it is very easy to find what you are looking for - I never even need to use the search bar! The reference is also very succinct and to-the-point which is good for when you need a quick reminder of something. I would say that W3Schools has the best explanations by far.

Reference links:

They also have many other references for things such as jQuery, PHP, and SQL.

2. DevDocs

DevDocs is very similar to freeCodeCamp in that is has many different languages (not only web development), from very popular ones to lesser-known ones. I really like the layout - it is similar to W3Schools and especially freeCodeCamp with the sidebar and drop-downs. The reference is really great and in-depth, but also easy to skim and find what you need.

Reference links:

HTML Reference
CSS Reference
JavaScript Reference
And basically everything else 😂

3. freeCodeCamp Guides

freeCodeCamp guides are made by the community, for the community. They have a GitHub repository where you can actually contribute! This is something I’ve done and it’s pretty rewarding. Anyway, with so many nice people working on it day and night, it is a great reference. The layout is also very nice - similar to W3Schools, it has a sidebar with all the different pages. However, every single language is in that sidebar, meaning navigations is really simple.

To visit a page for a particular language, just click the arrow next to it in the sidebar and a drop-down will appear with all the pages. Another awesome thing about freeCodeCamp guides is that it isn’t just for HTML, CSS, and JavaScript. They have a bunch of other languages including C, Ruby, PHP, and more. They also have extra guides such as Working in tech and design which are very helpful.

Reference links:

HTML Reference
CSS Reference
JavaScript Reference
A bunch of other stuff (see the sidebar)

Note that these links go to the main language pages, to see all the sub-pages of that language you will need to expand it in the sidebar.

4. MDN Web Docs (Mozilla Developer Network)

The MDN Web Docs is made by Mozilla, the people who built Firefox. So as you can imagine, they are also a great authority on web development! Personally, I am not a fan of MDN’s layout, however, it is a lot more detailed that W3Schools and provides more examples.

I suppose it depends on what you are looking for - If you are looking for a quick reference to something you forgot, go to w3schools. If you are looking for more in-depth documentation outlining everything about what you are looking for, choose MDN. Ultimately, it’s up to you. Have a look at both and see which you prefer. Personally, I’m not a fan of MDN overall, but many people would disagree with me.

Reference links:

They also have some other more specific references such as ones for SVG and canvas.

5. Codrops CSS Reference

Last but definitely not least, the Codrops CSS Reference has a really great layout and is easy to navigate and use. They have every single CSS property, function, data type, rule and more. When you click on one it takes you a page with the official syntax, values, examples and more. It even shows you which browsers support the feature!

Much like MDN, it is very in-depth. However, I like it much more than MDN because even though there is a lot of content, it is organized in a much better way and is easier to navigate and find what you are looking for. Unfortunately, Codrops only has a CSS reference, not an HTML or JavaScript one :( If they did, that would be awesome, but for the moment I’m glad that the CSS one exists.

Reference links:

CSS Reference

6. Stack Overflow

While Stack Overflow is not strictly a reference site, it is an invaluable place to get answers to programming questions or issues. Most of the time when you have a question, you will find that it has already been answered on the site - look no further! If not, you can post a question and someone will usually get back to you within an hour (often less) of posting the question (unless it’s really obscure or tricky). The Stack Overflow community is helpful, kind, generous, and smart and will help you through whatever your issue is.

There is a great tour page explaining how it works here.

My cheat-sheets! (coming soon)

Haha, what’s a good article without some self-promotion 😉

So, early next year I’m gonna be making some cheat-sheets on HTML and CSS (and JavaScript late next year). While they won’t be full-on references, I hope to make them a good place to refer to for a basic summary of the language. If you have any ideas as to what you, as a reader, would like them to contain, send me an email.

In the meantime, stay tuned!

Conclusion

Hopefully, this list helped you! If there’s anything that you think should have been on there or want to have a heated discussion on which is the best, the comments are the place for you. Also, I love feedback! Tell me there 👇

Here is a quick recap of the websites I talked about today:

Website	Links
W3Schools	HTML, CSS, JavaScript
DevDocs	HTML, CSS, JavaScript
freeCodeCamp Guides	HTML, CSS, JavaScript
MDN Web Docs	HTML, CSS, JavaScript
Codrops CSS Reference	CSS
Stack Overflow	Homepage, Tour page

If you liked this article and want to inspire some fellow coders or soon-to-be coders, I’d really appreciate it if you shared this article. Thanks! Also, if you want to receive new posts I’d be stoked if you signed up to the newsletter! If you do, you’re officially awesome in my eyes 😎 and deserve a taco 🌮

Have a great 2018 and hopefully these websites I shared will help you along your coding journey! Stay tuned for next time, where I’ll be talking about free resources to test your website. This is a great way to see how you can improve your website going into 2018 📆 🎆 . See you then!

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

The complete guide to HTML icons — iOS, Android, desktop and more…

Ethan — Thu, 14 Dec 2017 00:00:00 +0000

Learn how to make an icon for iOS, Android, desktop and more using HTML in this article…

Getting started

Feel free to follow along! You may not have all the devices, operating systems or browsers I will be talking about, but you will at least be able to test one or two 😉

To get started create an HTML file with the following basic code:

<!DOCTYPE html>
<html>
    <head>
        <title>HTML Icons</title>
    </head>
    <body>
        <h1>HTML icons!</h1>
    </body>
</html>

Open it up in a browser - it should look like this:

Now you’re ready to go!

The icon

In the examples today, we’ll be using this waffle icon that I made (with ice-cream on top of course 🍦 😉):

Doesn’t that look delicious!

Browser tab icons (favicons)

If you take a look at the little icon on your tab right now (these are also known as favicons), it will just give us a boring default icon - nobody wants that!

Note that depending on what browser you’re using, the tabs and default icon might look slightly different. This and most of the other browser screenshots in this article are taken in Google Chrome.

So, let’s add our own one! Simply add this line of code inside your <head>:

<link rel="icon" type="image/png" sizes="64x64" href="https://codetheweb.blog/assets/img/posts/html-icons/icon64.png">

The type attribute depends on the image we are using. In this case, we are using a .png file, so we’ll set our type to image/png. There are other types you can use such as image/ico for .ico files.

Click here for a list of supported file types.

Also, make sure that your icon is either 16px by 16px, 32px by 32px or 64px by 64px. You need to make sure that the actual image has those dimensions as well as the sizes attribute - you can resize your images online. Note that other sizes also work, but they are not supported by all browsers. In this case, our image is 64px by 64px - I recommend that you use this size because it is the highest resolution out of the three.

Anyway, here is the result:

There is now an icon next to our page title! 🎉 🎉

Safari home screen and bookmark icons

If we add our website to the home screen on iOS, it will give us a very ugly and weirdly-sized screenshot by default:

Let’s add our own icon instead! To do so, add this line below your favicon line in your <head>:

<link rel="apple-touch-icon" sizes="180x180" href="https://codetheweb.blog/assets/img/posts/html-icons/icon180.png">

As you can see, this is very similar to how we declare our favicon, except that we use apple-touch-icon as the rel attribute instead. Make sure that your icon is always 180px by 180px.

Now if we add it to the home screen again, we get a much better result!

This also gives our website an icon for Safari bookmarks on iOS:

And on Mac:

Android icons

Websites can also be added to the home screen using Google Chrome on Android. Luckily, we don’t need to specify icons just for Android! It will either use the favicon or an apple-touch-icon if you have one.

Windows tiles

On Windows, if you don’t know already, there are these things called tiles:

They are also used on Windows phones:

As you can see in the photos above, we also need to create a rectangular version of our logo, for if the tile is rectangular. Here is a rectangular version of the waffle that I made:

In our HTML, we need to define this icon as well as three square icon sizes: 70px by 70px, 150px by 150px and 310px by 310px. Our rectangular icon needs to be 310px wide by 150px high.

One important thing though: When making icons for Windows tiles, always have a transparent background.

Here are our icons but with a transparent background:

Here is the HTML - add it below your Safari icon and favicon in the <head>:

<meta name="msapplication-square70x70logo" content="https://codetheweb.blog/assets/img/posts/html-icons/icon70.png">
<meta name="msapplication-square150x150logo" content="https://codetheweb.blog/assets/img/posts/html-icons/icon150.png">
<meta name="msapplication-wide310x150logo" content="https://codetheweb.blog/assets/img/posts/html-icons/icon310.png">
<meta name="msapplication-square310x310logo" content="https://codetheweb.blog/assets/img/posts/html-icons/icon-rect-310.png">

These are slightly different to the icon types we’ve discussed so far, because they use <meta> tags instead of <link> tags.

But if the icons have a transparent background, won’t it look weird? Yes. The reason that they need to have a transparent background is so that Windows can put a color beneath them. Take this tile as an example: Here, the map icon would be the image (with a transparent background), and then Windows would put the pink/purple color beneath it. But how do we tell Windows which color? This is where the msapplication-TileColor meta tag comes in handy. In this case our waffle icon background hex color is #2e2e2e. With that in mind, add this line underneath our icons inside the <head>:

<meta name="msapplication-TileColor" content="#2e2e2e">

Here is the result of the icons and tile color meta tags:

If you’re too lazy… 😴

There is this awesome website called Real Favicon Generator which generates favicons, Safari icons, Windows icons and more for you. However, I recommend that you don’t use this until you are quite confident with doing it yourself - otherwise, you will never learn. That said, you can always look it up if you need. So it’s up to you.

Conclusion

Woo! That’s all there is for today. Hopefully, you learned something! If you did, I’d love it if you shared it or signed up to the newsletter to get new posts in your inbox. If you do either of these things, you are awesome and deserve a space-taco if that’s even a thing! 😎 🌮 🚀

I talked about icons for lots of different platforms today, and you don’t have to use all of them - although it’s a good idea. But for a start, you could just try getting used to favicons (the first part).

If you need help, have feedback or wanna say hi 👋 then I’d be stoked if you did so in the comments below.

Next time, I’ll be doing a special post on Quick-reference sites to help you along your coding journey. See you then!

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

Styling a navigation bar using CSS

Ethan — Tue, 12 Dec 2017 00:00:00 +0000

You can find navigation bars on almost any website on the internet. Learn how to code and style one in this article!

The final product

Here is what we'll be making today:

You can see a live demo here.

Terminology

Lol, this sounds like the start of a legal agreement 😂

For the purposes of this article, a navigation bar (nav-bar) is the same thing as a header. I'll be using the term "nav-bar" in this article, but just know that they are basically the same.

Getting started

I recommend that you follow along in each of my tutorials - it will really help you learn and grasp the concepts faster. Especially in tutorials like this, it will be fun to code along.

To get started, create a new project folder and create blank index.html and style.css files inside. Let's get going and fill them up!

The HTML

As you know, the HTML is the start of any website. Add the following to your index.html file:

<!DOCTYPE html>
<html>
    <head>
        <title>Navigation bar DEMO</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
           <img src="https://codetheweb.blog/assets/img/icon2.png">
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Pricing</a></li>
                    <li><a href="#">Terms of use</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consequat libero eget magna commodo, quis pharetra tellus pretium. Sed viverra ante in mauris finibus dapibus. Maecenas congue dapibus nulla, eu gravida orci consequat eu. Phasellus nec nunc malesuada, aliquam massa ac, accumsan metus. Fusce sed dignissim lectus. Nunc elit tellus, sollicitudin ac accumsan ut, egestas et dui. Maecenas aliquam est a ligula scelerisque, in aliquam neque sodales. Nullam condimentum euismod dictum. Curabitur non ex elementum, pretium enim ut, ornare ipsum.</p>
        </main>
    </body>
</html>

Inside the body, we have the header and navigation elements. If you are not familiar with this structure of a navigation bar in HTML, take a look at this article.

Below the header, we have some dummy text inside the <main> element. This is so that we can see problems that will arise later in the tutorial.

Open up your index.html file in a browser - at this point, it should look like so:

Not that you will probably have to scroll down unless you are reeeaaaally zoomed out because our image is massive!

Time for our CSS...

The basic CSS

First of all, our image is waaaaaay too big. Let's shrink it down to a height of 80px - this will be the height of our nav-bar. Add the following to your style.css file:

header img {
    height: 80px;
}

Result:

Phew, I can breathe now 😅

Next, let's set our styling up so we will be able to see what's going on. First of all, we want to be able to scroll - we can do this by setting the <body> height to 125vh (viewport height). We want to be able to see when we are scrolling down, and we can do this by adding a background-image. While we're at it, let's set our font to sans-serif so it doesn't look as terrible. Here's the CSS:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
}

One more thing, let's add a color to our <main> so that we can see the dummy text better:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
}

main {
    color: white;
}

Here's the result of all that:

Don't worry about changing the colors of the links because we will be styling those later anyway.

Positioning the nav-bar

Okay, now our website is looking alright - but not our nav-bar! It still looks like a list, because whenever you make a navigation bar, it has to have a specific structure (the one containing an <ul>). This is because it is easier for web crawlers to navigate, and also Google will like you 😉

First of all, let's start by positioning the actual <header> element. We'll also want to give the <header> a background-color so that we can see its position. Let's add some styles!

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}

Here' we're positioning the <header> element usingposition : fixed. Then, we also set the height to 80px like I mentioned earlier (the only reason that we're using that specific is because it looks good).

Here is the result:

Yay, our header/nav-bar is now positioned! However, the dummy text in the <main> has been obscured 😕

Now that the nav-bar has a position of fixed, the rest of the content on the page moves up. This means that the main text is actually underneath our nav-bar!

To fix this, we simply need to give the body a margin-top equal to the height of the nav-bar, 80px:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}

Result:

Woo! The only thing is that now the text is right up against the bottom of the nav-bar 😕 Let's fix it by adding some padding (I totally didn't mean for that to rhyme 😂) - here is the CSS:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}

Result:

Much better!

Here are the margin and padding of the body visualized:

(the margin is orange, the padding is green and the main part of the body is blue)

Congrats, now we've got our page pretty much working! However, not the stuff inside the <header> - it is overlapping the rest of the text and looks bad.

Styling the contents of the nav-bar

Now, let's position the items inside the nav-bar! First of all, we want to make the items go horizontally instead of vertically. We can do this using display: inline:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
}

header * {
    display: inline;
}

Here, we are using the selector header *. The * is a wildcard and can mean any element. So header * basically means any element inside the header. Also, note that when we use display: inline, the bullet points go away. The reason that the bullet points appear in the first place is that by default <li> elements have a display type of list-item. So when we override this and change it to inline, the bullet points disappear.

Here is the result:

However, our links now go to the bottom of the nav-bar! We can make them go to the top of the nav-bar by giving our <header> element a display property of flex:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
}

header * {
    display: inline;
}

Result:

However, the text is still not vertically aligned to the middle of the nav-bar. We can vertically align our items in the nav-bar using align-items: center. If you don't know about display: flex or align-items: center, check out my flexbox tutorial. Here is the CSS:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

header * {
    display: inline;
}

Result:

However, all the links in the nav-bar are very squished together - we can space them out more by giving them a margin property:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

Result:

That looks better! Now that our nav-bar items are positioned, it's time to give them some styles! We want to take away the ugly default link styles, so let's go ahead and do that - we can set the color to black and the text-decoration to none (normally it would be underline). Here is the CSS:

header img {
    height: 80px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

header li a {
    color: black;
    text-decoration: none;
}

Result:

We're on the final stretch now! Our logo (well, my logo technically 😜) looks a bit weird, so let's fix up the positioning by adding a margin-left! Here is the CSS:

header img {
    height: 80px;
    margin-left: 40px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

header li a {
    color: black;
    text-decoration: none;
}

Result:

Much more aesthetically pleasing! 😘

Okay, this is the last thing for today, and it's very cool. We're going to add a shadow to our navigation bar. What? A shadow? I thought that was stuff that you could only do in Photoshop???

Well, believe it or not, CSS has its own way of making shadows - in fact, multiple ways! In another article, I'll be going through all the different types of CSS shadows in more depth.

For the moment, we'll be using the box-shadow property. It simply creates a rectangular shadow around an element.

Here is the syntax for the box-shadow property:

The x-offset and y-offset are how far to the side and up/down the shadow is, blur is how blurred the shadow is, and spread is how far out of the element the shadow spreads. All of these values can be negative, except for blur. Afterwards, we have the color that we want the shadow to be. Let's add a very simple (but effective) shadow to our nav-bar:

header img {
    height: 80px;
    margin-left: 40px;
}
body {
    height: 125vh;
    background-image: url('https://codetheweb.blog/assets/img/posts/style-a-navigation-bar-css/background.jpg');
    background-size: cover;
    font-family: sans-serif;
    margin-top: 80px;
    padding: 30px;
}

main {
    color: white;
}

header {
    background-color: white;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    display: flex;
    align-items: center;
    box-shadow: 0 0 25px 0 black;
}

header * {
    display: inline;
}

header li {
    margin: 20px;
}

header li a {
    color: black;
    text-decoration: none;
}

As you can see, we're really only using the blur here - we are setting rest of the values (x-offset, y-offset and spread) to 0. Here is the result:

Awesome!!! Our navigation bar now has a shadow!!! 🎉

That's it for today 😉

Conclusion

So, I hope you learned a lot in this article! Now you can go forth and make your own navigations bars. They are used by almost every website you visit, so are a very important thing to know how to code.

In future, I'll be writing a tutorial on how to style a responsive navigation bar, meaning that it will adapt to different screen sizes (eg. show a 'menu' icon on mobile).

In the meantime, I'd really love it if you shared this or subscribed to the newsletter to receive new posts in your inbox. If you do either of those things, you are awesome and I will give you a lifetime supply of tacos 🌮 (not really, just my new marketing tactic 😜 ).

Have fun, keep coding and I'll see you next time, where I'll be talking about website icons in HTML (I thought I'd change it up a bit and do an HTML one). See you then!

Want more posts like this? Sign up to my newsletter.

I've worked hard on these tutorials and as of now do not make any money on them, so I'd really appreciate if you signed up ;)

This article was originally published at Code The Web, a fun and easy-to-understand blog to help you learn web development 🚀
Learn: HTML | CSS | JavaScript

DEV Community: Code The Web

JavaScript Objects

What is an object?

How to declare an object

How to get/set a value in an object

Functions in objects

this in objects

Converting between objects and strings

So, what's that JSON thingo?

Object.keys()

Object.values()

Conclusion

Want more great tutorials like this? Sign up to Code The Web Weekly!

The complete guide to JavaScript functions

Getting started!

What is a function?

The syntax

Running (aka 'calling') a function

Functions with inputs

Running functions with inputs

Functions with multiple inputs

Running functions with multiple inputs

Functions with an output (functions that 'return' something)

Running functions with an output (getting the output)

Variable scopes within functions

Conclusion

Click here to sign up :D

Want more posts like this? Sign up to my newsletter.

For loops and while loops in JavaScript

Getting started!

What are loops in JavaScript?

While loops

☢☢ A word of warning... AVOID INFINITE LOOPS! ☢☢

For loops

Conclusion

Click here to sign up :D

Want more posts like this? Sign up to my newsletter.

JavaScript Maths functions and operators

Getting started!

Types of numbers

Basic operators

Addition

Subtraction

Multiplication

Division

Modulo

Math functions

To the power of

Square root & Cube root

Rounding

Specifically rounding up or down

Conclusion

Click here to sign up :D

Want more posts like this? Sign up to my newsletter.

All about IF statements and booleans in JavaScript!

Getting started!

What is an if statement?

Terminology

The if statement syntax

Boolean operators

Multiple true/false statements

One more thing on boolean operators...

...Else?

Else if

Extension:

Why does any of this matter?

Conclusion

Want more posts like this? Sign up to my newsletter.

Variables in JavaScript

What is a variable?

Types of variables

Strings

Numbers

Booleans

Conclusion

Want more posts like this? Sign up to my newsletter.

Getting started with JavaScript!

How to run JavaScript

Writing some JavaScript!

An alternate way to run your JavaScript

`this` in objects

`Math` functions