javascript

/Tag: javascript

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 fade in content using HTML, CSS, and JavaScript

2019-01-17T15:54:33-04:00

Sometimes we want our content to make a cool entrance on a webpage.  Luckily, using CSS and HTML, we can do just that by easily fading something onto the page.  First thing we'll need to do is create a HTML page like so: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Select Tag</title </head> <body> <div id="fademe">Fade me in!</div> </body> </html> This is your typical HTML page that has a div with an id of fademe.  We will be fading the div in later with the text "Fade me in!".  The first thing we'll need to do is create the CSS inside the [...]

How to fade in content using HTML, CSS, and JavaScript2019-01-17T15:54:33-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