Free Javascript: Random Image on Page Load with Corresponding Link

I’ve been learning more about codes recently. Started with the Objective-C for IOS development. Now I’m getting interested in javascript. I made this code because I couldn’t find one that made sense to me enough to get it to work. (lol!) Sadly, there is this one that does the same thing right here.

I figured, if I give you guys this one I could at least explain how to use it & how it works. You can see my used of this on the left side of the page when you reload. I only have 4 images, so sometimes you’ll get repeats.

How it Works

Functions: randomFeature
Variables: thePics, theURLs, sameRand
Ids: randPicture, randomURL
Value: .href, .src

Copy the following into a text pad and save as: randomPicLink.js (You will have to upload this to whatever host you use and change the images and urls, but make sure the order matches).

window.onload = randomFeature;

var thePics = new Array(“image1.jpg”,”image2.jpg”,”image3.jpg”,”image4.jpg”,”image5.jpg”);

var theURLs = new Array(“url1.html”,”url2.html”,”url3.html”,”url4.html”,”url5.html”);

function randomFeature() {
var sameRand = Math.floor((Math.random() * thePics.length));
document.getElementById(“randPicture“).src = thePics[sameRand];
document.getElementById(“randomURL“).href = theURLs[sameRand];

Basically, when the window loads it will perform function “randomFeature.” The first thing the function does is set a variable named sameRand that is equal to a random # times the # of image srcs in the array. Then we tell the document to get the element with id = “randPicture,” identify the value we are replacing (.src) and that it will equal an item from array “thePics” of # = sameRand. Then do this again for the element with Id “randomURL” (value of .href) which will equal item from array “theURLs” of the # sameRand.
The Html for inside the <head></head>:

<style type=”text/javascript” src=”randomPicLink.js”></style>

The Html that goes where you want the pic to be. You will need to adjust the width and height to be the same as what your images will be (they all must be the same size):


<a href=”” id=”randomURL“><img src=”” width=”250″ height=”200″ id=”randPicture” alt=”Random Featured Post” /></a>

If anyone can tell me what the “correct” way to do this is, or can explain the one from the previous link, I would greatly appreciate your input!

Developing Apps for IOS – Take The Course With Me!


Something magical happened the other day when I was searching through google for the phrase “how to become iphone developer”… A bright light beamed down from the heavens and a link stood out among the wordy paragraph. With 25 full lessons for free! How cool is that! I’m already on lesson 6 and I found these at 11:30pm last night!

Stanford University Lectures FREE on iTunes: “Developing Apps for IOS”

Found these notes to go with it. I challenge you to take the course with me!

What I Can Tell You About The Course

After watching 5 episodes, it seems that Professor Paul Hegarty goes in depth just enough to show you how to start with minimal knowledge of programming. If you’re good at trial and error and have patience to listen the whole way through, then you should definitely look into it! No matter how much or how little experience you have with programming, if you have ever wanted to be able to develop your own iPhone app, I say DO it! It’s worth a try.

The lectures are normally close to 1 hr in length. He normally has one lecture, then a demo, then you do the homework.

Let Me Be The Guinea Pig

If you aren’t sure you want to devote the time because you don’t think you know enough about programming, take me for your guinea pig. I am committed now to finishing the course and I will post my thoughts and the things I struggled with along the way.

My first interest in programming languages came when I was in 6th grade (I confess… I was trying to create a pet pet page for my neopet…….) I taught myself basic HTML using tidbits of into from the internet. I can usually pull together enough understanding of any type of code to do simple things, even when I begin knowing nothing. All thanks to google! I look at lots of examples of code and I can get the gist of what a code does by just copying and pasting a line that looks important into Googles search bar.

Years ago I jumbled together enough actionscript to make a couple games and silly things like this:

Basically what I’m saying is, if you want to learn something bad enough, you will!

The good thing about if you decide to do it now is that I am too! So we can chat together about what we are struggling with and figure it out together!

Lastly, Here is Another Resource For You

This site has links to the regular iPhone display graphics AND retina display! Very cool and fun to play with. Plus a nice way to get inspired to dive into programming!

Get psd files for everything from iphone, to android to iPad Elements

iPhone App Appeal #2: BigOven

Passed up: Sleep Stream 2, food on the table, horoscopes,

Category: Lifestyle

First of all… Clever Icon!! Right? I liked it a lot. I don’t quite understand the need for the chat like symbol and not just a square. But, eh.. not a big deal. So this app is free. The first picture of the app preview in the app store nearly made me hit the back button. But the clever icon made me assume there would be clever content. So I kept going. The one thing that bugs me about the previews is simply that the images are out of order. I don’t know how this happens, if it’s by name or order of upload. Either way, it makes the app seem disorganized. I’m sure once I download it, it will make more sense. So lets do that. I am just now noticing that it has 4.5 stars. Interesting how when I new I had to pay for the other app: LifeLogger, the rating mattered so much more and was one of the first things I noticed.

Now I’ve downloaded BigOven. It is so much prettier than I had expected! Also.. the content and originality of application features is really impressive! You should see for yourself. I guess today we learned:

A clever icon says it all!

<< iPhone Application Appeal #1: Life Logger

iPhone Application Appeal Series #1: Life Logger

Welcome to the new series!

The iPhone App Appeal Series. Where I describe the thought process of what drives my interest in an application. This might seem like it’s about my opinions, however it is really more of a study of marketing strategy. For those of you who are developing applications or designing content of a similar nature, don’t let the small details pass you by. Get another point of view through our new series!

To begin my quest I started with the lifestyle category. Only looking based on icons that seemed promising. Here is the first application that caught my eye.

LifeLogger  by SwingDrama

The shiny Icon with it’s bright color, clean lines, tiny dash marks, and container feel caught my eye. It took me less than a second to decide I was going to click on it, while other apps had me debating whether it was worth the wait for content to load. The Name had me interested too. It sounds like blogger and I do love blogs. So they got me… then I was onto the next page. A good 3.5 stars. Only $0.99 to buy it. Then of course I go straight to the picture screenshots, ’cause if it looks horrible theres no way I would use it. But alas, one of my favorite color palettes. Polka dots and dashes are my favorite. Texture!!! I am already contemplating buying it, simply because it’s pretty. It’s nice and simple. And as far as content and purpose of the application, I could probably find a use for it. Here are more screenshots:


I’m still tempted to buy it, but it didn’t sell me completely on it. So for now I have not yet bought it.
Sadly, all it probably would have needed was a custom keyboard and I would’ve bought it in a heart beat.
Now lets take a look at who SwingDrama is. They also make “Nap Timer” and “Zen Counter.” They appear to be drawn to shiny objects, as am I… as. am. I.

More iPhone App Appeal on the way!

Stanford Developer Course: Notes

I’m just about to dive back into the Stanford Developer course, but I’m going to start with a different approach then I did last time. Since I now have the notes to go along with the lectures, I am going to scan through all of the “lecture” pdfs to get familiar with the terms and topics that I’m going to learn. Mostly so that I don’t become impatient and skip ahead out of curiosity. I keep wondering how much I’m actually going to learn after watching the videos. So I’m going to look through the PDFs, and come back and let you know if I found anything good.

Well, I’m back!
Here are my general notes from the first assignment. It is also what I will use as my guide to remember what to do after I open up xcode for any other project:
Step 1) Create Controller and Model files for .h and .m
Step 2) Start with the Controller.h file
Step 3) Set up Outlets
  • Outlets: Instance variables in controller point to the view. They go inside {}
  • format: IBOutlet UIObjectType *whateverYouNameThisObject;


Step 4) Set up Instance Variable (in controller points to model)
  •  First import model’s .h: #import “Model.h”
  •  Then set up the variable: Model *nameOfModelPointer;


Step 5) Set up Actions
  • Actions: Methods sent from controller to view. The name is immediately followed by “:”The go after } and before @end
  •  Format: – (IBAction)nameOfActionOne🙁UIObjectTypeToPerformActionOne *)sender;


                        – (IBAction)nameOfActionTwo🙁UIObjectTypeToPerformActionTwo *)sender;
Step 6) Set up the UIObjects in the view thru interface builder
Step 7) Connect Actions: Ctrl + Drag from UIObjectTypeToPerformAction(1&2) to file’s owner.
Step 8) Connect IBOutlets: Ctrl + Drag from files owner to UIObjectType
Step 9) Implement your Model: in file Model.h (Add instance variables and methods)
  • quote: “Our brain works like this: you set an operand in it, then you perform an operation on that operand (and the result becomes the brain’s new operand so that the next operation you perform will operate on that).”
  • Set Operand inside {}: typeOfInstanceVariable operand;
  • Add method to set operand after }:


                          – (void)setOperand:(typeOfInstanceVariable)nameForATypeOfInstanceVariable;
  • Add method that performs operation:


                       – (anotherTypeOfInstanceVariable)performOperation:(NSString *)nameOfObjectToSendMsgTo;


Step 10) Implement Model in Model.m
Step 11) Copy the methods from step 9 in between @implementation and @end
  • Remove the ; at the end of each and add {}
  • Format in between {}: operand = nameForATypeOfInstanceVariable;
  • implement performOperation: using if statement:
  • [ ] means sending a message:
{ if ([nameOfObjectToSendMsgTo isEqual:@”sqrt”])
operand = sqrt(operand); “
  return operand


Its getting more specific to the project and harder to
method syntax:
– means instance method
+ class method
folloed by (ReturnType)
followed by methodName:
followed by (TypeOfArgument)
followed by nameOfArgument
Looks like: – (ReturnType)methodName:(TypeOfArgument)nameOfArgument
Two part method:
– (ReturnType)methodNamePartOne:(TypeOfArgumentPartOne)nameOfArgumentPartOne methodNamePartTwo:(TypeOfArgumentPartTwo)nameOfArgumentPartTwo
Full name of two part method is
IBAction returns void, but lets interface builder know of action
Static type examples: (NSArray *)    (NSString *)  (UIButton *)
Class methods:
Start with +
Used for alloc, singleton, and utilities
call a class method [class methodName];
Mark Instance Vars @private
Use @property to acess them
Method to set/get:
@interface MyObject : NSObject
     int eye;
– (int)eye;
– (void)setEye:(int)anInt;
Instead of – (int)eye; & – (void)setEye:(int)anInt; use
     @property int eye;
@property (readonly) does not declare the setter setEye: method
When using @property, you do not need the instance var @private int p_eye;
Implement in .m after @implementation & before {}
Implement with
     – (int)eye
          return <some calculated value for eye>;
But if you do have the instance variable, instead use:
@implementation MyObject
@synthesize eye;
Dot notation set/get:
someObject.eye = newEyeValue;          // set the inst var
int eyeValue = someObject.eye;            //gets the inst var current value