Adding JavaScript to WordPress

In my Advanced Web (CSC245) class that I’m teaching at Concordia University, St. Paul, the students needed to know how to add JavaScript to their WordPress blog postings.

I put together this demo page walking them through the process along with this video.

Adding JavaScript to WordPress

Here is the source code for the JavaScript function used in the video.

How old is each mask?

edoIvoryMask1500

Ivory Pendant Mask: Court of Benin. Iyoba, Nigeria

ifeKings_Head1100

Yoruba (Ife) bronze casting of Oduduwa

ngady-aMwaashKubaRoyalMask1890

Ngady aMwaash, Kuba Royal Mask, Peabody Museum, Harvard University

Credits:
edoIvoryMask1500Creative Commons, Wikipedia Edo Ivory Mask

ifeKings_Head1100Public domainIFE Kings Head

ngady-aMwaashKubaRoyalMask1890Creative Commons, Wikipedia Ngady aMwaash, Kuba Royal Mask

JavaScript – Using Variables

Learn about JavaScript variables and operators and how to convert strings into numbers with this video presentation.

Learn about variables and how to convert from strings to numbers using JavaScript.

  • Discover the difference between declaring a variable and initializing it.
  • Uncover the different types of variables such as Strings and integers and floating numbers.
  • Meet NaN and find out what her name really means!
  • Learn how to convert a String to a number (so you can do calculations with it) as well as the "Octal Gotcha"
  • Unlock the mystery of the = = operator and how discover how computer scientists have "stolen" the equal sign and made it into another operator all together.
  • Meet some other smooth operators such as the ++ and the +=
  • Be introduced to W3Schools.com where you can find out even more about JavaScript.

 

This is part of the online course Programming Fundamentals offered by Computer Careers at South Central College, North Mankato, MN USA 56003.

Three Steps to Faster JavaScript Programming

This is an in-class demonstration showing how to use the FireBug console to catch JavaScript errors as well as CSS errors.

There are three steps that you can follow that will help you learn how to write JavaScript faster, easier, and with a lot less frustration.

(1) Use the HTML Validator add-on for FireFox to make certain your HTML code is valid.

(2) Use the Console tab in FireBug to check for any JavaScript errors you may have in your code. This is a great way to check for misspelled variable and function names as well as missing quotes or concatenation operators "+".

(3) Finally, use the breakpoint and stepping tools in FireBug to step through your program.

This video is an in-class demonstration showing how to use the FireBug console to catch JavaScript errors as well as CSS errors. It is part of the Programming Fundamentals course (JavaScript) offered by Computer Careers at South Central College in North Mankato, Minnesota.

 

Tutorial videos from my courses

I’ve been creating some demo movies as part of my on-line classes and have posted them out on blip.tv.

I thought you might like to look at the series. I’ll be adding new ones on a regular basis.

Here’s a link showing all the videos available out on Blip.tv.

I’m using ScreenFlow to create my onscreen videos. This is an amazing program that allows me to capture video and sound and edit using scrolling and panning. Mac only. What is displayed here is only the video portion of the more complete tutorials I offer as part of my online and face2face courses.

The videos shots of my whiteboard talks are taken using a very inexpensive ($150) Aiptek HD1080P pocket-size video. Chad Peterson, one of my students is working on the editing. These resulted from one of my online students asking me to record my entire class. That is very difficult, getting good sound, but I thought I’d try some simple videos that focused on specific concepts to see how enhance the learning activities for each module.

I’d be interested in your comments on how useful these would be to you as a student. Thanks!

Got API?

gotAPILogo.gif.jpg

Got API?

An Application Programming Interface is a set of functions that let you “hook” into a system without having access to the source code or inside workings of that system. There’s an API for all the modern languages like Java, PHP, Ruby On Rails, and HTML. Sites such as Google, Amazon, and eBay all have an API allowing programmers to access information from their sites. Here’s a list of the APIs Google has available for many of its services including maps, adwords, and Blogger data. This lets a savvy programmer include all types of eBay or Amazon services on their web site by using what these sites have already created.

You can also think of an API as a dictionary. Just like an English dictionary displays words and their meanings, an API lists all the functions available in the API as well as what type of information each one is expecting and what type of information each function will return. Programmers use an API as a reference in using functions correctly.

Up until now a programmer had to keep a copy of each API on their computer or keep a list of bookmarks pointing to the APIs out on Web.

gotapi.com changes all of that. All the common language APIs are now available from a single link page. (Sorry, the application APIs such as Google, Amazon, and eBay aren’t listed yet.) As a programmer this means you can find information quickly as you are writing code.

gotAPIStartMenu.jpgTip: With the gotapi.com page displaying, click and drag the icon in the Address field gotAPIURL.jpgof your browser and drop it on upper part of your Start menu button. You’ll see a solid black line showing you were it will be positioned as you drag it into the Start list.

Anytime you need to look up a function, gotAPI.com is only a click or two away.

– Special thanks to Sean Washington for reminding me about this really great programming tool.


Technorati :
Del.icio.us :
Ice Rocket :
Buzznet :

File Naming Conventions

If you work with files you should have a set of rules that you follow so that your file names are always consistent. This is especially true if other people will be working with your files which is very common in web work and programming.

Here’s the file naming conventions that I have developed over the years as a programmer and web person. What you do is not as important as being consistent. Using the same name convention will save you countless hours of “fixing” things and looking up to see how a filename was spelled. I recommend using these rules for filenames, folders and directories, and variable names.

  • always start a filename using lowercase
  • don’t use spaces or underscores _
  • use camelCaseToMakeNamesEasierToRead
  • don’t use plurals – for example: Use “graphic” instead of “graphics”
  • be consistent with extensions. .html should always be .html and not .htm one day or .default on another day.

Here’s the reasoning and experience that helped me develop this list:

Always start a filename using lowercase
80% of the web servers use Apache running on Linux and Linux is case sensitive. By starting every name with a lower case letter you remove the guesswork like “Now, was it Index.html or index.html?” On a Linux server these are two different things.
Each time you have to go look up a file name to find out you used the wrong upper/lower case means less time with your video games or bronzing on the beach.

Don’t use spaces or underscores “_”
Web servers and programming languages are befuddled by spaces. They may work in Windows and Word, but most other computer programs don’t even allow them. Linux is a good example.

Why not underscores “_” you may ask. Underscores will “hide” when being displayed as an underlined word and users think they are spaces. Also, why add another character to your name if you don’t have to? And finally, how many people can touch-type the _ character. Every time you have to pause your typing to hit a special key means the longer it takes to complete your killer app.
Use camelCaseToMakeNamesEasierToRead
This is the solution to not using spaces or underscores. Note how easy it is to read the statement above. Its much faster to type this way. You’ll have to personally decide how you are going to handle acronyms. For example: web3RSS.html or web3Rss.html or web3rss.html
My recommendation, for readability and recognition, is to keep an acronym as all caps: web3RSS.html

Don’t use plurals

For example: use “photo” instead of “photos”

When working with a programming team we spent countless hours fixing our programs because of simple spelling “errors” like this. Then, one day someone suggested that we follow this rule and everyone’s life got so much easier.

It’s a little weird at first, but after a few times of knowing how a foldername will be and not having to go look it up makes it all feel right in the end.

Be consistent with extensions and keep them lowercase.

I recommend always using .html. Don’t use .htm one day and .html the next.

Same thing with .jpg


By following these rules on a regular, and consistent basis, you will be able to work faster and with a lot less frustration.Note: There’s a few exceptions to all of this. If you are a Java or .NET programmer than you will want to have all your Class files begin with an upper case letter. And constants are always written using ALL_CAPS with underscores to separate the words. These are both naming conventions that were around a lot longer than my little set of rules.

A great new book for Web Programming II

This class covers both client-side scripting like JavaScript and server-side scripting using ASP.NET. Every year I go through the same anxiety, “What book(s) will I use for Web Programming II?”

Because this area is changing so dramatically I always need to find new textbooks. I think I’ve found a great JavaScript book for the class starting this August. I first heard about it while listening to a podcast from Paul Boag (Boag’s World podcast #23 – Defining Your Project) It’s called DOM Scripting by Jeremy Keith and offers great scripting techniques that include the DOM (Document Object Model), CSS, and XHTML.

The DOM allows a programmer to address any component on a web page. This could be a button, a title, or a specific paragraph. In the past DOM scripting was very tedious and worked differently in different browsers.

Jeremy starts out discussing the basics of JavaScript and builds on that utilizing the DOM based on its current standard which now works in all the popular browsers including Internet Explore and FireFox.

The projects he uses to demonstrate the code include a photo gallery and an animated slideshow. These not only look like fun but could be a valuable addition to your web site.

I’m also looking at making some Flash movies available for the second half of the course. Check out the instructional movies at LearnVisualStudio.net I’ll be looking closer at how I can include these as part of the course over the summer.

This is going to be a great course. Here’s the syllabus that lists all the stuff you will learn. (This is last year’s syllabus and it will be updated and revised over the summer.)