davek

/Dave Kidd

About Dave Kidd

This author has not yet filled in any details.
So far Dave Kidd has created 22 blog entries.

The Difference Between Double and Single Quotes in PHP

2019-03-17T20:17:56-04:00

In PHP, the difference between using double or single quotes is quite large unlike other languages like JavaScript.  The main difference, that I believe is most important, is you can use variables inside of double quotes in wherein single quote statements you cannot.  For example, if I have a variable set like so: $age = 22; And I wanted to use it in an echo statement I could do this with single quotes: echo 'I am ' . $age . ' years old'; That would work fine, it would print out to the page "I am 22 years old" just like [...]

The Difference Between Double and Single Quotes in PHP2019-03-17T20:17:56-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 autoplay a video using HTML 5 in Chrome

2019-01-17T16:27:06-04:00

Chrome is a great browser but sometimes it has a lot of security features that end up conflicting with your code and what you're trying to do.  For example, they added a feature that won't play a video on a website if the sound is enabled.  It will block it because it doesn't want the user hearing an unwanted video.  Using the HTML5 video tag, if I were to add a video to a page that has the controls visible, autoplays, and loops the code would look like this: <video controls autoplay loop> <source src="movie.mp4" type="video/mp4"> </video> The issue with this is Chrome [...]

How to autoplay a video using HTML 5 in Chrome2019-01-17T16:27:06-04:00

How to apply CSS to XML

2019-01-17T16:12:48-04:00

Sometimes there will be times when you'll need to take a body of XML information and apply CSS styles to it.  Luckily, it's not too hard to do.  Let's say you have an XML document that looks like this (the content about the movie is not accurate): <?xml version="1.0" encoding="utf-8" standalone="yes"?> <movie> <title>Monty Python and the Holy Grail</title> <rating>PG-13</rating> <reviews> <rotten>100%</rotten> <metacritic>100%</metacritic> </reviews> <director compensation="$100,000,000">Some really funny guy</director> <boxoffice>$1,000,000,000,000</boxoffice> </movie> If I wanted to style the title, rating, director, and the other tags I would need to apply CSS to this file.  To do that you would need this line of [...]

How to apply CSS to XML2019-01-17T16:12:48-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

Create unselectable instructions in a HTML select drop down menu

2019-01-17T15:53:46-04:00

Today we are talking about how to create unselectable instructions in a HTML select drop down menu.  In HTML, when you create a drop down menu using the <select> tag, there will be times when you'll want to give the user instructions inside the menu itself but not allow them to select the instruction option.  For example let's say we want to give the user the ability to select what shipping they want for an item they are ordering.  Our select tag would look something like this: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Select Tag</title> </head> <body> <select> <option>USPS</option> <option>UPS</option> <option>FedEx</option> [...]

Create unselectable instructions in a HTML select drop down menu2019-01-17T15:53:46-04:00

Camtasia SmartFocus Editing Dimensions Error Fix

2019-01-17T15:52:46-04:00

In Camtasia 9, there is a feature that has been around for a while called "Smart Focus."  What it tries to do is read the video and zoom in and out when Camtasia feels it's necessary.  For example, let's say you were making a screen recording about creating a new folder on your desktop.   When you right click on the screen and the menu pops up, Camtasia's SmartFocus would hopefully recognize that as a time where it needs to zoom in on the video so the user could more easily see what's on the screen. It's not perfect but if you [...]

Camtasia SmartFocus Editing Dimensions Error Fix2019-01-17T15:52:46-04:00

How to create a database using phpMyAdmin and XAMPP

2018-12-22T17:12:44-04:00

Video version of this blogpost: When working on a website that is either hosted or local on your computer, sometimes you'll need a database for it.  Back in the day, you would need to know SQL and how to run those commands in some sort of prompt.  Nowadays, we have phpMyAdmin which is a graphical user interface for SQL.  You can click, type in text boxes, and after a while, you'll have a database created along with tables, columns, user permissions, etc. To use phpMyAdmin, you'll need to either install hosting software on your computer such as XAMPP, MAMP, LAMP, or WAMP.  Or, you [...]

How to create a database using phpMyAdmin and XAMPP2018-12-22T17:12:44-04:00

What does the DOCTYPE do in HTML?

2018-12-16T13:19:04-04:00

What is the DOCTYPE?  When coding in HTML you will see this really weird looking line up there at the top.  It usually looks like this: <!DOCTYPE html> Simply enough, this line tells the browser what version of HTML is being used to create the website.  Back in the day, with HTML4, DOCTYPES were really long lines of text that were almost impossible to remember because they looked like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> and <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> Depending on if you wanted the language to be [...]

What does the DOCTYPE do in HTML?2018-12-16T13:19:04-04:00

Why using document.write is a bad idea in JavaScript

2018-12-10T18:10:15-04:00

Why is using document.write a bad idea in JavaScript?  Well, document.write is great for debugging or helping you know what a variable is equal to at a certain part in your code.  It's not a good idea to use on an actual web page especially if you're not careful.  The reason is it can erase your whole web page.  Here's an example when document.write can be destructive: <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <title>Destroyed by document.write</title> </head> <body> Hello<br> <button id="click">Erase the Doc!</button> </body> <script> var btn = document.getElementById("click"); btn.addEventListener("click",function(){ document.write("Be gone!"); }) </script> </html> We have a button with the [...]

Why using document.write is a bad idea in JavaScript2018-12-10T18:10: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

How To Center Content in a Div Horizontally and Vertically

2018-11-20T00:16:24-04:00

This little snippet of code will show you how to center content in a div horizontally and vertically using HTML and CSS.  This, in the past, used to be semi-difficult.  Now, using CSS flexbox display property, it's actually quite easy.  First, we'll create a simple HTML skeleton with a div that has a class called "centerMe" inside the body tag: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Center Content Horizontally and Vertically</title> </head> <body> <div class="centerMe"> I will be centered in the div horizontally and vertically </div> </body> </html> Now that we have the starting HTML, we can add the CSS inside [...]

How To Center Content in a Div Horizontally and Vertically2018-11-20T00:16:24-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

HTML5 Basics – How to create a basic HTML5 document

2018-11-12T11:17:10-04:00

Video of this tutorial: Hello everyone!  In this post today I'll be showing how to create a basic HTML file using my favorite text editor Brackets.  Brackets is great because it's free, cross-platform, and has some really nice features when using HTML5.  Here is what their home page looks like:   Click here to download Brackets The first thing you'll want to do is download and install Brackets or whatever editor you want to use.  If you really wanted to, you could use good ol' Notepad in Windows and that would work fine.  Once it's finished installing, open it [...]

HTML5 Basics – How to create a basic HTML5 document2018-11-12T11:17:10-04:00