JavaScript

//JavaScript

How to use the console to debug in JavaScript

2019-08-05T10:50:31-04:00

JavaScript is a great language.  It allows you to add all kinds of interactivity into your webpages.  However, sooner or later, we will make mistakes in our code.  The good thing is Chrome and FireFox both have JavaScript debuggers built into them so finding the general area where the code has issues isn't too hard.  Let's take this code for example: var x = "Hi"; alert(x); This code works fine, it sets up a variable called x that has the string "Hi" as a value and then alerts it to the window as a pop-up window of sorts.  However, if I [...]

How to use the console to debug in JavaScript2019-08-05T10:50:31-04:00

For of vs For in JavaScript Loops

2019-07-22T15:24:11-04:00

In JavaScript there are two kinds of for loops: for of and for in.  The difference can be seen when looping through arrays.  Let's take this array for example: var greetings = ["Hi","Hey","Hello"] It's just a normal array with three strings (words) in it called greetings.  If I were to apply the for in loop to it like this: for(x in greetings){ document.write(x + "<br>"); } This would print out the index positions of each value in the array.  So we'd get 0, 1, and 2 printed out to the page on their own lines.  If we wanted to pull the [...]

For of vs For in JavaScript Loops2019-07-22T15:24:11-04:00

How To Loop Through An Object In JavaScript

2019-07-22T15:04:24-04:00

In JavaScript there's a way to access all the items in an object called the for in loop.  It allows you to iterate (or loop) through all the key value pairs in an object.  For example, if we had this object: var jsobj = { company: "SkillForge", course: "JavaScript", isFun: "Yes" } We would be able to get the keys and the values out of it using the for in loop.  To pull the keys out we could do this: for(x in jsobj){ document.write(x + "<br>"); } In this loop, x is a variable that will be holding all of the [...]

How To Loop Through An Object In JavaScript2019-07-22T15:04:24-04:00

How to stop a loop from inside a nested loop

2019-07-15T14:21:21-04:00

There are times in JavaScript when we'll have a loop inside of another loop and we'll want to stop the outer most loop from inside the inner one.  Here is a block of code that is showing what I'm talking about: var i = 0; while(i < 3){ for(x=1; x<=10;x++){ if(x%5 == 0){ //we want to to stop the while loop here } document.write(x); } i++; } We have a for loop that is inside of a while loop and we want to be able to stop the while loop from inside the for loop.  This code prints out all the [...]

How to stop a loop from inside a nested loop2019-07-15T14:21:21-04:00

How to run a function with a button click in JavaScript

2019-02-18T23:20:37-04:00

In JavaScript, there are times when you need a block of code to just sit back, relax, and not run right when the page loads.  This is where JavaScript functions come in.  A function is a block of code that runs when we tell it to.  In this example, we will show how to run a function when a button is clicked.  The first thing we'll want to do is create the button and give it an id using HTML: <button id="clickMe">Run Function</button> This will create on the page a button that says "Run Function" and has an id of "clickMe".  [...]

How to run a function with a button click in JavaScript2019-02-18T23:20:37-04:00

How to get user input in JavaScript

2019-02-18T23:15:23-04:00

There are times in JavaScript when you'll need to get the user's input so you can perform some sort of calculation with it.  One of the most used methods to get user input is the command document.getElementById("someId").value.  To use this you would first need a textbox on the page which we create using HTML: <input type="text" id="someId"> Once the textbox is created with the id of "someId" we can use getElementById to capture the value like so: document.getElementById("someId").value; If we walk through this whole command we see that it starts at the whole document, then it narrows into an element (or [...]

How to get user input in JavaScript2019-02-18T23:15:23-04:00

How To Use The Ternary Operator in JavaScript

2019-02-09T13:13:51-04:00

In JavaScript, there is a thing called the ternary operator.  It's a fancy term for a shorthand way to write an if statement.  To compare and contrast let's take a look at the long way of creating an if statement: if(x==1){ alert("There is " + x + " apple"); }else{ alert("There are " + x + " apples"); } This example is checking the value of x and if it's 1 it will alert "There is 1 apple".  If it's not 1, it will alert, "There are 3 apples" or whatever the number is that was put in there.  Well, there's [...]

How To Use The Ternary Operator in JavaScript2019-02-09T13:13:51-04:00

How to create a JavaScript Object

2019-02-09T12:51:27-04:00

In JavaScript, there is a thing called an object.  It's something that can contain a value that is equal to something else.  Those are called key/value pairs.  There's a key that is equal to some value.  It's a way that you can have a variable equal to many different items that can be used as functions, values, etc.  It gives the programmer a lot of flexibility on how they can get their job done.  The most simple way in JavaScript to create an object is like this: var jsObj = {}; We just created an empty object there that could be [...]

How to create a JavaScript Object2019-02-09T12:51:27-04:00

Substr vs Substring in JavaScript

2019-01-29T21:21:27-04:00

JavaScript has some slick ways of dealing with strings (words, sentences, etc.)  There are a couple of methods in JavaScript called substr() and substring() that do similar but very different things.  Both are able to extract certain parts of a word or sentence to be used or validated.  The difference between them is substr gives a position and how many characters to extract, where substring gives a range of what characters to access.  For example, if we had this: var str = "SkillForge"; alert(str.substr(5,3)); This would return "For" because the 5  means start extracting from the 6th character, not the 5th.  Substr and substring start [...]

Substr vs Substring in JavaScript2019-01-29T21:21:27-04:00

How to Loop Through an Array in JavaScript

2019-03-17T20:02:32-04:00

Video version of this post: In JavaScript, there's a helpful way to access every item that's in an Array and it's called a for in loop.  It has the functionality, by default to go through and only run however many times there are items in the array.  To take a look at this we can set up an array like so: var ninjaTurtles = ["Leo", "Ralph", "Don", "Mikey"]; Now we could use a for loop and go through it like so: for(i=0;i<ninjaTurtles.length;i++){ document.write(ninjaTurtles[i]+"<br>"); } This works and it would print out all their names to the page, but this way requires [...]

How to Loop Through an Array in JavaScript2019-03-17T20:02:32-04:00

JQuery Toggle Drop Down Effect

2019-01-28T14:24:12-04:00

jQuery is a pretty amazing JavaScript library.  It allows you to do things with JavaScript that were, back in the day, pretty tough to pull off.  Today I want to show you how to do a simple toggle drop down effect using jQuery.  The first thing you'll want to do is create a basic HTML page like so: <!DOCTYPE html> <html> <head> <title>jQuery Toggle Drop Down</title> <meta charset="utf-8"> </head> <body> <p> <span id="s1"> Click to slide panel up and down </span> </p> <div id="d1"> This part slides up and down </div> </body> </html> This sets up a span and div tag that [...]

JQuery Toggle Drop Down Effect2019-01-28T14:24:12-04:00

How to use JavaScript Regular Expressions

2019-02-09T12:00:15-04:00

Video of regular expressions with phone numbers: This tutorial is going to look at a JavaScript regular expression example using zip codes and break down all the pieces.  The problem I've found with regular expressions is they aren't something you can just look at and understand right away.  They use their own syntax that isn't easy to decipher so that is what makes them hard to understand. Let's take a look at an example of one so they won't be as intimidating.  Let's say we want to use a regular expression to make sure that a zip code is typed correctly.  We [...]

How to use JavaScript Regular Expressions2019-02-09T12:00:15-04:00

How To Run External JavaScript After the HTML Has Loaded

2018-12-03T10:44:12-04:00

When using JavaScript, sometimes you will run into errors because the external code being used is placed above the HTML it is calling/manipulating.  For this example, we have a HTML file that looks like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Run JavaScript After HTML Loads</title> <script src="external.js"></script> </head> <body> <div id="changeMe"></div> </body> </html> In that code we can see that it's calling an external JavaScript file called external.js that has this code in it: document.getElementById("changeMe").innerHTML = "I've been changed!"; This is going out to the div with the id of changeMe and is going to switch out the text to [...]

How To Run External JavaScript After the HTML Has Loaded2018-12-03T10:44:12-04:00

JavaScript console.log vs console.dir

2018-11-24T19:39:05-04:00

So what is the difference between console.log and console.dir in JavaScript?  Well, let's take a look!  If we were to take this code: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>console.log vs console.dir</title> </head> <body> <script> console.log("Why, hello!"); console.dir("Why, hello!"); </script> </body> </html> then put it in a text editor, then run it in a browser we would get a blank page.  That is because when we use these commands, they are only viewable in the console itself.  So to see what these commands actually do we need to right-click the page in Chrome or Firefox and choose the inspect option then the [...]

JavaScript console.log vs console.dir2018-11-24T19:39:05-04:00

innerHTML vs textContent – The Difference Between These JavaScript Properties

2018-11-12T11:19:38-04:00

innerHTML vs. textContent, what is the difference between these JavaScript properties and which one should you use?  They do the same thing, right?  No, they actually do not.  The difference between the .innerHTML and .textContent properties is all about the HTML my friends!  textContent renders text and only text, and innerHTML renders text with any HTML applied to it.  To illustrate, here's a quick example you can try in your chosen text editor (just copy and paste it in if you want): <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>innerHTML vs textContent</title> </head> <body> <h2>textContent:</h2> <!--Div that will hold the textContent text--> [...]

innerHTML vs textContent – The Difference Between These JavaScript Properties2018-11-12T11:19:38-04:00

10+ Web Resources for Front End Developers

2019-08-07T15:20:17-04:00

Things on the web move so fast they make the idea of “time flies” seem slow. The World Wide Web has been available to the public since 1991, 25 years this fall. Most people today couldn’t imagine life without the web. Developers are faced with a tremendous challenge today. The web is a moving target. So much so that WHATWG (Web Hypertext Application Technology Working Group) has chosen to refer to HTML as a “living document”, meaning it is constantly being edited and updated. This means the tools we use and the items we refer to change constantly as well. This [...]

10+ Web Resources for Front End Developers2019-08-07T15:20:17-04:00