Introduction to Javascript

<h2>About for loops</h2>



For loops are a way we can run multiple iterations of something, in this case, repeat a block of code.



For loops have three different rules defined inside of them, the initial variable we use in our conditional, the conditional itself, and what we do with the variable after we've finished an iteration of the loop



Here's an example of what a for loop looks like



<pre class="wp-block-code"><code>for (var i = 0; i &lt; 4; i++) {
 console.log(i);
}</code></pre>



We define our initial value i as 0.



We keep running our block of code over and over again until our value of i is equal to 4



Each time we reach the end of the loop, we add 1 to our variable i.



<h2>Using the break statement to leave a for loop early</h2>



We can leave a f0r loop earlier than our conditional value will allow using the <code>break</code> statement.



Using <code>break</code> we can leave the loop if i is equal to 2, even if our while loops condition states to go through the loop while i is less than 4



<pre class="wp-block-code"><code>for (var i = 0; i &lt; 4; i++) {
 if(i === 2) {
 break;
 }
 console.log(i);
}</code></pre>



<h2>Using the continue statement in a for loop</h2>



We may want to iterate through our loop but go back to the beginning of the loop at an earlier point. We can use the <code>continue</code> statment to do this. To show this, lets increment our loop twice and not show our console.log



<pre class="wp-block-code"><code>for (var i = 0; i &lt; 4; i++) {
 if(i === 1) {
 i+=2;
 continue; // the code below this wont run when i = 1
 }
 if(i === 2) {
 break;
 }
 console.log(i);
}</code></pre>

For loops in Javascript

If statements allow us to conditionally run code. We do this because we may want to run different code and chose between two blocks of code base on some predetermined values.



Think of conditionals in the same way you'd get a conditional acceptance for a job offer that requires you to send over a reference.



If you have a reference, then you get the job. We can write this out in code like this.



<pre class="wp-block-code"><code>var hasReference = true;

if(hasReference) {
 console.log("You got the job");
}</code></pre>



<h2>Else statements</h2>



We also want to say something when we don't have enough references. In this case we can use an else statement.



If we have a reference, you got the job, otherwise (or, else) you didnt get the job



<pre class="wp-block-code"><code>var hasReference = true;

if(hasReference) {
 console.log("You got the job");
} else {
 console.log("You didn't get the job");
}</code></pre>



<h2>Else if statements</h2>



What if we don't have a reference, but we impressed our interviewers so much that they'll give us a job even if we don't have a reference. They're so confident in us, that we want to add another conditional in case we didn't have a reference, but we did so well on the job interview that we don't need one.



Basically, if we have a reference, we get the job, if we don't have a reference but we nailed the interview, we also get the job. If we don't have a reference and we didn't get the interview, we don't get the job.



<pre class="wp-block-code"><code>var hasReference = false;
var nailedTheInterview = true;

if(hasReference) {
 console.log("You got the job");
} else if(nailedTheInterview) {
 console.log("You don't have a reference but still got the job");
} else {
 console.log("You didn't get the job");
}</code></pre>



Note that if we already have a reference, our else if statement will never be reached because we've already satisfied the condition of our if statement. Only if the conditional in our if statement is false will we reach our else if statement

If statements in Javascript

While Loops in Javascript

Arrays are a data type that contain many different values inside of them. These are useful when we have a list of information we need to work with.



For example, let's say we want to run <code>console.log</code> on all the companies we applied to. We could do something like this



<pre class="wp-block-code"><code>var company1 = "Company A";
var company2 = "Company B";
var company3 = "Company C";

console.log(company1);
console.log(company2);
console.log(company3);</code></pre>



This is a lot of repeated code and extra variables. Every time we add a new value we have to add a new variable. 



We could fix this by creating one value that contains many values.



<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C"];</code></pre>



With our array, we get a specific value in our array using an index value.



Index values for arrays start at 0, not at 1



Since we have three values in our array, we can numbers 0 - 2 at our disposal. 



<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C"];

console.log(companies&#91;0]);
console.log(companies&#91;1]);
console.log(companies&#91;2]);</code></pre>



It's also important we learn about the <code>.length</code> attribute in an array.



The length attribute of an array tells us how many items are in our array.



So for our array, calling we would have a length of 3.



We can print out the length of our array in the console like this:



<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C"];

console.log(companies.length);</code></pre>



Next we'd want to iterate through this array. Iterating through an array requires looping through it.





<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C"];

for(var i = 0; i &lt;= companies.length; i++) {
 console.log(companies&#91;i]);
}</code></pre>



Now our code only takes up 4 line, instead of the 7 we started with.



We can also add a new element to our companies array without worrying about adding another <code>console.log</code>



<pre class="wp-block-code"><code>var companies = &#91;"Company A", "Company B", "Company C", "Company D"];

for(var i = 0; i &lt;= companies.length; i++) {
 console.log(companies&#91;i]);
}</code></pre>

Arrays in Javascript

Objects in Javascript

We can create Objects to represent a collection of data in Javascript. Note that this is different from Arrays, which store a list of data in a specific order.



Data in objects have their own names and values. Let's do an example where we want to create a duck and define different information about that duck.



<pre class="wp-block-code"><code>var duck = {
 name: "Sylvester",
 feather_color: "white",
}</code></pre>



Here we're saying that our duck's name is Sylvester and that the duck's feathers are white.



We can print our different attributes to the screen like this



<pre class="wp-block-code"><code>console.log(duck.name);</code></pre>



Which will print out "Sylvester" and



<pre class="wp-block-code"><code>console.log(duck.feather_color);</code></pre>



Which will print out "white"



We can also include functions as values to our object. Let's say we want to call a function that makes the sound a duck normally makes. We can add the a key named call_sound with its value be printing to the console the sound a duck makes



<pre class="wp-block-code"><code>var duck = {
 name: "Sylvester",
 feather_color: "white",
 call_sound: function() {
 console.log("Quack");
 }
}</code></pre>



Now we can have our duck object call the call_sound function whenever we want



<pre class="wp-block-code"><code>var duck = {
 name: "Sylvester",
 feather_color: "white",
 call_sound: function() {
 console.log("Quack");
 }
}</code></pre>



Now we can call our function



<pre class="wp-block-code"><code>duck.call_sound();</code></pre>



Which will print "Quack" to the screen.



What if you want one of the attributes in our object? Lets change our Ducks name to Mittens



<pre class="wp-block-code"><code>duck.name = "Mittens"</code></pre>



We could also use bracket notation to update our attribute



<pre class="wp-block-code"><code>duck&#91;"name"] = "Mittens";</code></pre>

Loops in Javascript allow us to call a block of code many times over without having to write the same code over and over again. 



For example, lets say we want to print out the number's one two and three in the console.



<pre class="wp-block-code"><code>console.log(1);
console.log(2);
console.log(3);</code></pre>



With loops we could reduce the amount of console logs we call.



<h2>About the while loop</h2>



The while loop is a loop that doesn't define how much iterations will be done. Our while loop will continue to iterate over and over again until its condition is no longer met. 



For example:



<pre class="wp-block-code"><code>while(true) {
 console.log("Hello world");
}</code></pre>



Will run over and over again in the console indefinitely



For our scenario we will need to set a variable number equal to zero. and the condition inside our while loop will be that our variable must be less than 4 when we're deciding whether or not we should enter the while loops block of code enclosed by curly brackets <code>{ }</code> 



Note that we have to increment our variable otherwise we'll end up in an infinite loop where our variable is always equal to 0. 



<pre class="wp-block-code"><code>var i = 0;
while(i &lt; 4) {
 console.log("This is iteration number: " + i");
 i++;
}</code></pre>



<h2>Using the break statement to leave a while loop early</h2>



We can leave a while loop earlier than our conditional value will allow using the <code>break</code> statement.



Using <code>break</code> we can leave the loop if i is equal to 2, even if our while loops condition states to go through the loop while i is less than 4



<pre class="wp-block-code"><code>var i = 0;
while(i &lt; 4) {
 console.log("This is iteration number: " + i");
 if(i === 2) {
 break;
 }
 i++;
}</code></pre>



<h2>Using the continue statement to avoid executing succeeding lines of code</h2>



We may want to iterate through our loop but go back to the beginning of the loop at an earlier point. We can use the <code>continue</code> statment to do this. To show this, lets increment our loop twice and not show our console.log



<pre class="wp-block-code"><code>var i = 0;
while(i &lt; 4) {
 if(i === 1) {
 i+=2;
 continue; // the code below this wont run when i = 1
 }
 console.log("This is iteration number: " + i);
 if(i === 2) {
 break;
 }
 i++;
}</code></pre>

We can declare variables as a shorthand to store information. The reasons we want to do this is to make our code more readable and potentially more reusable.



If we wanted to print out a long string of text without variables would look like this



<pre class="wp-block-code"><code>console.log("This is a very long sentence with lots of words in it");</code></pre>



This is what it would look like with a variable



<pre class="wp-block-code"><code>var longString = "This is a very long sentence with lots of words in it";

console.log(longString);</code></pre>



In addition, you'll eventually run into a situation where you will have to use the same values in many places in your code. 



Lets say we wanted to call <code>console.log</code> not once but twice. Without variables this is how we'd do it



<pre class="wp-block-code"><code>console.log("This is a very long sentence with lots of words in it");

console.log("This is a very long sentence with lots of words in it");</code></pre>



With variables we don't need to spend all that time writing the same sentence all over again



<pre class="wp-block-code"><code>var longString = "This is a very long sentence with lots of words in it";

console.log(longString);

console.log(longString);</code></pre>



This might not seem like much now, but as you develop complex software and the amount of lines in your code increase, it would be difficult to pass values directly to a function without using variables.

Variables in Javascript

Getting started with Javascript is pretty straightforward. One of the great things about working in Javascript is that we don't need to download a runtime package to get started, we can use the web browser to start working with Javascript We're going to create a simple page that logs hello world in the brower's console.



First let's create an index.html file. This is where the page in our browser will be located.



In our HTML file, we want to only write hello world. Lets add the basic boilerplate 



<pre class="wp-block-code"><code>&lt;!-- index.html --&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;/head&gt;
&lt;/html&gt;</code></pre>



Next we want to add a script tag that points to our soon to be created Javascript file. Lets add a script tag inside the head tag, and lets let its resource be <code>./script.js</code>



<pre class="wp-block-code"><code>&lt;!-- index.html --&gt;
&lt;html&gt;
 &lt;head&gt;
 &lt;script src="./script.js" /&gt;
 &lt;/head&gt;
&lt;/html&gt;</code></pre>



Now let's create our script.js in the same directory as our index.html file. In our script.js file, write the following line of code



<pre class="wp-block-code"><code>console.log("Hello world");</code></pre>



console.log is what we use to print logs into the console. Inside it, we pass what we call an parameter, and in this case, it contains a string of Hello world.



Now open your index.html file using your browser of choice. You should see a blank page, because we didn't add anything to our HTML body. Right click the page and select inspect element. Then, click on console, you should see your hello world log.

Tutorials, articles and quizzes on Software Development

More Articles