Posts Tagged ‘javascript’

Object Oriented Programming in JavaScript

Tuesday, December 14th, 2010

(From A Student View)

When an institute is teaching programming to new students, it’s a common theme to play around with Java before going on to other languages. It’s easy to learn, has all the Object-Oriented goodies instructors want, and is fairly ubiquitous.

With the current snafu that is Oracle circling around Java and all the rest of Sun’s old open-source projects, I decided I would try my hand at emulating those same principles using JavaScript; an open, simple, ubiquitous technology.

As it turns out, the resemblances end with those adjectives. JavaScript was never really meant to do the things we’re making it do now. It’s possible to do most things in most languages, but the verbosity of the code needed to perform a specific action tells you what it’s made to do, and what’s been tacked on as an after-thought.

So, from a student’s point of view, how does it matter which language they’re using? Which is easier to learn, or simpler?

Java:

  • Requires each class to be in its own file. It can be tedious, but it can also make it easier to manage.
  • Each file has one class. Each class has a constructor (sometimes overloaded), and zero or more methods. The structure is fairly simple.
  • Besides the keywords, not much is being used. If you don’t import anything, there are very few class names already taken.
  • It’s made to work with the console, or to display a GUI.
  • Inheritance is an important part of Java, and all you need is one keyword and the class name to inherit.

JavaScript:

  • Everything can go everywhere, and the syntax can go different ways. This freedom can be devastating to those who are learning.
  • Objects are functions, and functions can go within functions, and what are closures, anyway? Where and how you create variables influence how you can access that variable later in the program (private, public, hidden, privileged, for either fields or functions).
  • The global scope is chock full of different classes and attributes and functions.
  • It’s not meant to do anything on its own. You have to teach students HTML and DOM manipulation at the same time, and programs have to output in HTML.
  • Inheritance is handled through the prototype chain, which has to be explicitly set after an object function is created. You have to set the prototype of that class to a new instance of the parent class, and then you have to set that prototype’s constructor back to the constructor of the current class (to ward off some edge cases).

I’ve made a sort of console window out of HTML. It overwrites the document.write(), prompt(), and confirm() methods to output to a <pre> element. The latter two also pause execution by opening an invisible modal dialogue that is closed when the Enter key is pressed, which enables synchronous user input.

It’s a cludge, but you can run any JS code in there that acts like a console Java program.

Later: GUIs.

In short, You can do Object-Oriented programming in JavaScript, but it’s not something you should be teaching students in their first semesters, and the complexity and power of it don’t lend well to simple instruction.

I’m going to keep playing around with this, to see if I can get something simpler out of it. I just got the ‘instanceof’ keyword working, so I can start chipping away at what I need to get a ‘true’ out of that.

Edit Style

Tuesday, October 5th, 2010

I just created a bookmarklet! Try dragging Edit Styles to your bookmark bar.

This only seems to work in Chrome, Safari, and IE9. If anyone can tell me why appending an element to the DOM in Firefox or Opera creates a blank document, I’d love to know.

You can type any sort of CSS in the box. If there was already some CSS in a <style> element in the head, you can edit that.
Try something like the following:

Designing with JavaScript

Tuesday, December 15th, 2009

If you’re building your site with JavaScript, don’t just throw it all in there. If someone with JS disabled visits your site, they’ll be greeted by a bunch of things that don’t work.
“But only a few people have scripting disabled!” you’d shout.
Remember this: JavaScript has the ability to remodel the page completely. You can change anything.

How to go about some Business

Build the page as if you didn’t have JavaScript. Remove the cleverly-scripted slideshows, the dead links that use AJAX calls, and any other little piece of the site that relies on scripting to achieve a satisfactory effect.
For forms and links, try using PHP and putting in links to proper pages. Maybe try an image with a hyperlink to your slides. make the site work as well as possible without any scripting at all.

The Magic

Now here’s where the magic comes in. In your script, use DOM scripting to add those AJAX calls, strip off anything superfluous, cancel default PHP-based events, and create those dynamic controls. You can change styles, add new elements, and alter the data.
Now, when someone visits the site and the script isn’t working, they’ll have the ability to use the site. The rest will still get the same scripted experience they would otherwise have enjoyed.

HTML5 Video

Thursday, May 28th, 2009

I’m not exactly strong at javascript, but I spent the last hour picking apart the YouTube HTML5 <Video> test to figure out just what was needed to get the video to play. It turns out it’s not as simple as the put-it-in-and-go of <img> tags; it requires a kickstart with javascript. I whittled away at the HTML file and the javascript file until I was left with the following lines:


<body onLoad=”document.getElementById(‘vid’).play();”>
<video id=”vid” src=”vid.mp4″ />
</body>

That can fit in a twitter, so it’s not too much.

Oh, god, that’s going to become a new measurement:
“Hey, how long is that story you wrote?”
“Oh, about a hundred twitters.”

At any rate, toss the above code into an blank text file, rename it to .htm, and open it in Safari 4 or Chrome 3 or whatever else has <video> support.
(Beware a quote that becomes a question mark. I think wordpress does something funky and makes one of those good-looking quotes that doesn’t translate well to ANSI.)

As a final service, to anyone who tries to talk about html tags in forums and has the forum eat the tags, you need to type them like this:
&lt; becomes <
&gt; becomes >
&amp; becomes &
So to write <video>, you actually type in &lt;video&gt;

EDIT:
It looks like the code is fickle, so things I was trying before weren’t working. The following code runs a movie:
<video onClick=”this.play();” src=”vid.mp4″ />

I like to use the following:
<video onMouseOver=”this.play();” onClick=”this.pause();” src=”vid.mp4″ />

Another thing I’ll mention is that I’m referencing an mp4 video, which is a proprietary codec. Theora is an open-source codec that seeks to replace it.