XMLHttpRequest Access Denied

I am trying to learn a little bit of AJAX. The first exerise in my textbook tells me to read a local file and display it. Sounds easy. I set up some code to create an XMLHttpRequest. Creation works okay. Then I try to call the open() method and specify the local file I want to read. Bamm. Internet Explorer says that the access is denied.

I am running Internet Explorer 8. That is the version installed on my computer. First I try changing the security in Internet Explorer. No luck. then I try using XDomainRequest object instead of XMLHttpRequest. Also no luck. This is frustrating because this is supposed to be the easiest exercise.

When I get into situations like this, I try some other browsers. Chrome was no good. But Firefox magically worked using XMLHttpRequest. This really should not be that hard. Isn't AJAX one of those common things that everyone on the web uses? I guess I should try back again with IE when I upgrade to something like IE version 10.

DOM Inspector

Right now I am reading up on how to manage the DOM using JavaScript. My textbook referred me to a site where I can get a DOM Inspector. That is a tool which shows my HTML in a DOM-like graphic tree. I was expecting something free. However the textbook steered me to a commercial site.

I downloaded a product called IE WebDeveloper. It was previously called the IE DOM Inspector. They have a free 15 day trial period. I am glad I did the trial first. The thing does integrate with Internet Explorer. You see the tree in a toolbar that takes up the bottom half of the browser screen. However I was disappointed with the tree layout. I did not see nodes for my text.

Turns out Internet Explorer version 8 has a built-in DOM Explorer of sorts. You can access it by choosing the Developer Tools submenu under the Tools menu. This brings up a separate window with a better tree that represents the DOM tree I was expecting from the book.

Time to uninstall the IE WebDeveloper trial software. The thing costs $119 for a license. I think I will stick with IE Developer Tools. That's too bad because I liked the integrated interface.

Image Maps

I was finishing up a chapter in my textbook about images. Last example problem in the back of the chapter had us dealing with a image of the solar system. Each planet was to be clickable, generating a pop-up with some words about the planet clicked. I got a nice image of the solar system. Now I needed to come up with the coordinates for the planet areas. What is a developer to do?

The book mentioned some free software that would do the dirty work of coordinate mapping for me. I went to Image Maps. Uploaded my picture to their web site. Then it was time to get down to business. I had to define eight areas (we now only have eight planets in the solar system). I was a little disturbed when a warning came up that stated, "IE 7 will give a stack overflow error after 13 or 14 rectangle maps." I use Internet Explorer. Luckily I only had 8 areas to create.

I clicked a button and had the HTML generated for me. It was quite painless. Seems like the site is implemented using PHP. They ask for donations, links, or blog entries about them. Being a poor developer, I chose the latter. Thanks Image Maps.

Jetstrap

I recently heard about Jetstap while browsing links from Hacker News. Watched a video demo. This is a tool that creates web pages using Twitter Bootsrap. Looks like is supposed to be a drag-and-drop type of page builder. The angle is that this saves you from figuring out how to manually code up the Boostrap code with JavaScript. I finally got around to trying out the free trial tonight.

I decided to log in with my Google ID. But it would not let me proceed to use Jetstrap until I allowed Jetstrap to view my email address and other Google account info. I reluctantly agreed. The I got to the page where I create a new screen. The place where you normally see an OK button had a button with no text on it. Umm is this a bug on the first screen? I use Internet Explorer 9. You would think this would work on this browser.

Getting back to page editing, I could not figure out how to add normal HTML onto my page. There was a strange read-only label button. Maybe that was Jetstrap's way of letting me know that I put a label on the screen? I found the generated HTML source for my page creation quickly enough. But I could not cut and paste the HTML. Apparently I need to download a zip file. Great. Not.

One good thing about the zip file Jetstrap produces is that it includes all the Bootstrap code in all the right directories for you. Another nice feature is the different views on the main Jetsrap design page. You can see what you page will look like on a mobile devide, a tablet, or a larger screen.

Jetstrap looks like it is blowing up pretty nicely. This is mainly due to being the number one link on Hacker News recently. I hear that already had 20k downloads. While the trial is free, they plan to charge monthly for usage. Intially they were thinking $10 a month. However it might be as high as $30 a month. This was a neat product to try out. However I don't see myself paying any amount of money for this right now.

Return of the Prototype

I am now taking an advanced JavaScript programming class. My hope was to finally understand the prototype concept at a deep level. The first two weeks of class were supposed to be a review. We flew through many chapters of the textbook. By chapter 8, the book had covered prototypes. However the meaning was not totally clear. I asked my instructor before class some questions on prototypes. He said he never heard of them. I am doomed.

Okay. Here is the deal. The book made it sound like prototypes point to the parent objects of your new object. This is some type of quasi-inheritance. I can get that. When JavaScript tries to resolve a method or property, it looks to the current object. If it cannot find the name it is looking for, JavaScript will climb up one level to your object's prototype. Good enough.

My instructor told me to play with some code to figure this stuff out. Normally that is good advice. But the whole point of me taking this class was that someone in the know could guide me. Looks like I am out of luck on that front. So I define a function that is a constructor. Then I create an instance of that object using the new() keyword which invokes the constructor. I try to print out the prototype of my new object. Nothing is there. WTF?

I would have though that an object I created without any explicit prototype settings would have a prototype of Object. Does not look like that is the case. I need to find a mentor. Or I could buckle down and stufy up. Sometimes you just got to make do yourself.

Prototype

I was hoping to learn what the "prototype" keyword means in JavaScript during my last college class. No suck luck. I am taking another JavaScript class next semester. But I thought I would try to get Google to help me figure out what this complex topics refers to.

We should start with what JavaScript has. You got primitives and objects. Primitives are types such as boolean, string, or number. Another type is an object. Objects are key value pairs. Keys are the properties of an object. The property is called a method if the value is a function. These are the basics.

Here is a true statement: All objects have prototypes. The default prototype only has the constructor. The constructor assigns the prototype to an object instance at the time of instance creation. You can retrieve this prototype by calling getPrototypeOf() or by accessing __proto__.

When you add properties to an instance, only that instance gets the properties by default. However you can use the prototype keyword before the property. That causes the property to apply to all instances of the obect. To be more specific, any instances created by the object will get the new properties added when the properties are qualified by the prototype keyword. Wow. That was a mouthful.

Now the prototype is itself an object. Therefore the prototype has a prototype. Let's not get too bogged down by that though. You can use prototype on your own objects. However you can only change a prebuilt object with prototype if the object was created with the "new" keyword.

The properties added to all instances via the prototype can be methods. When a property of an instance is accessed, the chain of prototypes is walked to determine if the property exists. This gives you insight into the internal structure of a JavaScript object. All objects inherit behavior from the prototype of Object. That would be the end of the prototype chain.

JavaScript Interpreter

I read the description for a program over at Code Project. It was for an interpreter written in JavaScript. I was excited about this since I am taking a JavaScript course right now. Much of the writeup had to do with the mechanics behind an interpreter. The sample program also only did interpretation of mathematical expressions. But the ideas were solid.

The extraordinary part of this article was that it was written by 17 year old Peter Olson. Bravo man. The writeup finished up with some easy, medium, and hard ideas to improve the project. Somehow I don't think I have the technology to tackle the hard improvements to this program. The college class on JavaScript is just too primitive to have taught me much. Perhaps I can knock out a couple the smaller TO DO items. Or should we say I can try some of the easier TO DO items.

Next semester I plan to take an advanced JavaScript course. That should pump up my skills.

Becoming a Web Developer

I read a post on how a developer went from being a noob web developer to a competant one. He works for a cool company. So I gave his opinions a little more authority. I would like to dabble in web development myself. Let's see where I am compared to this guy, and where I need to go.

He started by playing with URL parameters. Got it. Then he went tinto JavaScript. I am working on that. This is where my experience ends. The developer I read about went much further. He them learned an Object Relational Mapper. And he really pumps up learning jQuery, which is a JavaScript library for client scripting. I got a feeling I need to learn that next myself.

The guy said he got into FireBug, which is a tool to help debug all things web. He learned Memcached, which implements an in memory cache to speed up dynamic sites that depend on a database. He seems to be a Python developer now. He learned Python requests, which is an HTTP library written in the Python programming language.

The developer used Beautiful Soup, which is a python library for things like screen scraping. That seems a bit speciic. He also got deep into Cascading Style Sheets. I know a little bit about them. Then he mentioned that he turned his study to cookies. Isn't that a basic capability you need to know earlier?

Boss got into MongoDB, an open source NoSQL database. Today I learned that the Mongo comes from the work huMongous. He also uses DictShield, which claims to be a modeling system that is not tied to a specific database. Not exactly sure what that does. It seems to be relating to typing. Finally he got into the Python Natural Language Processing Toolkit. This also seems to be a niche.

The moral of the story is that there is a lot to becoming a web developer. Just when you think you learned a bit, you find out there is oh so much more to learn.

Free Courses at Udacity

I just heard that Udacity is soon to offer free courses online. These appear to be like college courses. However they are shorter. The bios of the instructors are impressive. A computer grades your homework. The cost is free. So why not try out a course or two?

The most interesting course to me is Web Application Engineering. The overview says that by the end of the course, you will be able to code up your own blog application. That sounds hot. It covers a lot of topics. The session I find most interesting is the one on how to scale your web app.

Another fun looking course is Programming Languages. It claims that by the end of the course, you will be able to develop your own web browser. That sounds like a tall hill to climb. The weeks are packed with complex topics such as grammars, lexical analysis, and parsing. Somehow I think you can learn those topics in just a few weeks. Maybe I am wrong.`

Form Alignment

I had some homework for my JavaScript class. This chapter deals with events. I was able to determine the names of the events and their handlers. Coded up some JavaScript functions to do the dirty deeds. The handlers just called my functions. Jobs done.

I was not satisfied with how my web page looked though. The second piece of the homework had me doing a form. The labels all lined up. But the input fields were all over the place. I knew these things could be lined up from previous experience. But my HTML skills are rusty.

Luckily dream in code came to the rescue. Just needed to put in some CSS that made the labels all be the same width. Then the fields that follwed them all ligned up as well. You would think somethink this common would be second nature for me by now.

Intro to JavaScript

Next semester, I am taking an Introduction to JavaScript class. The class looks pretty easy. I need some down time as I continue to process the topics learned in last semester's Java course.

Today I picked up the textbook for my JavaScript class. The topics really do look introductory. I read the first two chapters to get ahead for class. They covered some of the history of JavaScript. I learned how to embed JavaScript in HTML. Also reviewed how to put JavaScript in a CDATA block to allow the XHTML to validate.

The book went through some examples to make the JavaScript spit out HTML. We also learned how to include external JavaScript files. I would like to have some hands-on assignments where I write some JavaScript code. Let's hope the course instructor gives us some homework or something.