Neil Cartmell

Bear Bibeault wrote:There is no such property as fillStyle.

Sorry I think it's an attirbute, I'm still getting to grips with the Javascript terminology. I've found out the problem now. Apparently getComputedStyle is the way to go. Now it works as I thought it should.

var style = getComputedStyle(document.getElementById(id));

Hello.

I have several buttons each with a different background color. When the user clicks on one of these buttons I want to change the context fillStyle to the value of the button's background css property. It's not working how I thought it would.

#blue { background: blue; }


CBCreator.prototype.setSelectedColor = function(id) { var button = document.getElementById(id); alert(button.style.background); // this prints out nothing but I don't understand why button.style.background = "green"; // this changes the background color to green as I expected };

In the code above the id of the button is passed to the function. Yet despite setting the background property in the css file to blue, when I print out the style property in an alert it displays nothing. The code below does work by changing the color of the button to green.

So why doesn't button.style.background print out the background property? Is it possible to set the context fillStyle to the css property this way?

Well I'm brand new to all this web development stuff. And the first thing that hit me was how in just about every tutorial I've read there is also a note saying that this doesn't work in IE. It's just a hobbie for me so no big deal, but I imagine this would have really annoyed me if I had done this for a living. I'm really surprised there hasn't been some kind of mass protest against IE. If every site said "Sorry we do not support Internet Explorer" , I wonder how quick Microsoft would have made IE conform.

However as it's just returning a new array, there is no point using the returned array rather than just creating a new one. At least I know what is going on now.

Ok I found out what the problem is. I should have put this..

var line = grid.splice(row, 1)[0];

Because it returns an array of the deleted elements. So in this case an array where the array I just deleted was at the 0 index. Phew! The best way to solve a bug is to post in a forum then just after you post you'll work out the answer!

Just some more info in case anyone wants to try and help me solve this.

The variable named line, when printed out in an alert, reads "0, 0, 0, 0, 0, 0, 0, 0". line[0] reads the same thing. Yet line[1] = undefined. line.length = 1.

I thought splice retuns an array? It reads like an array, but it's not letting me use it like one. I know I'm missing something silly.

Hello. Today I've been making a tetris game. I'm now writing the code, that checks to see if the player has made a line.

The removeLine method takes an array of arrays called grid. The row is the row of the grid that I'm removing. I want to clear that row by setting every element to zeros then take it from the grid and place it at the top again. I have now got it to work using the method below. But here I pass a new array. You see the line I have commented out? If instead of creating a new array I use the array returned by splice it doesn't work at all. It seems to place the entire array into grid[0][0]. So grid [0][0] = 0, 0, 0, 0, 0, 0, 0, 0. Where it should just be = 0. I can't understand why. I've printed out the values returned by splice and it is the same as the values I end up putting back in the with the new array.

Maybe I've been at it too long, but I can't seem to see what I'm doing that's different. Can anyone help?

GamePlay.prototype.removeLine = function(grid, row) { for (var i = 0; i < grid[row].length; i++) { grid[row][i] = 0; } var line = grid.splice(row, 1); grid.unshift([0,0,0,0,0,0,0,0]); //grid.unshift(line); }

Eric Pascarello wrote:Pick up JavaScript The Good Parts by Crockford. I think it will help you.

Eric

I ordered it the other day. It should be here any day now. I've heard a lot of good things about it.

Mark Spritzler wrote:"If I want to stick two completely different types into the same array it lets me."

Actually, interfaces are so powerful and gives us more abilities that you wouldn't get without them, so this is actually a plus for Java.

Mark

Really, that's interesting. Could you give an example?

Bear Bibeault wrote:Part of good coding practice means following conventions. Naming a constructor init() isn't. A constructor should be a noun sand start with a capital letter. It describes what is being created.

I was thinking of these Constructor functions (or whatever they are called) as being exactly the same as a Java class. So I was thinking you have your variables then your methods and that's it. But now I realize that as it is actually a function itself, any code inside it that is not in another function will run in order. So I can use it just like a Java constructor. I think...

Bear Bibeault wrote:Any function can be a constructor -- it's invoking the function with the new operator that makes two special things happen:

A new blank object is created

The new object is implicitly "passed" to the construtor as the this parameter. (In other words, it becomes the function context.)

The prototype property of the constructor can be used to assign members to every object created through the constructor.

Hi I appreciate the reply, but I don't think you really answered my question. I know what a constructor is. And I know any function can be a contructor. My example even used a method init() to demonstrate this. My question was more about good coding practice in JavaScript.

Never mind though. I think I now know what I need to do.

As often happens after posting a topic I see a better way of doing things , which I'll put below. However there are times when you need an init / Java style constructor, and I'm still interested in knowing how things are done.

var MemoryGame = MemoryGame || {}; window.onload = function() { new MemoryGame.Game().init(); } MemoryGame.Game = function() { this.screen = new MemoryGame.Screen(); this.init = function() { this.screen.drawTitle(); } } MemoryGame.Screen = function() { this.canvas = document.getElementById("gameCanvas"); this.context = gameCanvas.getContext("2d"); this.drawTitle = function() { this.context.fillStyle = "rgb(0, 48, 160)"; this.context.font = "bold 40px new-times-roman"; var title = "Memory Game"; var x = (this.canvas.width - this.context.measureText(title).width) / 2; this.context.fillText(title, x, 60); } }

Hello. I've made a few small and simple Javascript applications and so far I've just used global variables. Now I'm tring to get my head around the way Javascript handles objects. I'm trying to encapsulate my code. One thing I'm missing is the way I would use constructors in Java to initialize the variables It needed. How do you go about doing this in Javascript?

This is what I have so far. I have made a namespace called Memory game, and so far I have 2 objects. One for the whole game, and one for the screen which will contain all the drawing methods. I've given both objects init methods and I call them right after they have been created. In these methods I put the code t I would usually put in a constructor in Java. The memory game needs a Screen object so I create it in it's init method. From that init method I call the Screen's init method which gets the canvas and context of the document.

So is this good, bad, standard pratice or just plain wrong? I did try giving each object an auto executing function, but they couldn't find the variables when I used this. They thought 'this' referred to the window.

var MemoryGame = MemoryGame || {}; window.onload = function() { new MemoryGame.Game().init(); } MemoryGame.Game = function() { this.screen; this.init = function() { this.screen = new MemoryGame.Screen(); this.screen.init(); this.screen.drawTitle(); } } MemoryGame.Screen = function() { this.canvas; this.context; this.init = function() { this.canvas = document.getElementById("gameCanvas"); this.context = this.canvas.getContext("2d"); } this.drawTitle = function() { this.context.fillStyle = "rgb(0, 48, 160)"; this.context.font = "bold 40px new-times-roman"; var title = "Memory Game"; var x = (this.canvas.width - this.context.measureText(title).width) / 2; this.context.fillText(title, x, 60); } }

I've been learning Javascript these past few weeks. I can definitely see where you are coming from. But so far I like it.

There are a couple of things that confuse the heck out of me about Javascript. I will be posting a topic about one of those things shortly. But I do enjoy the freedom it gives me. It's like Javascript trusts me , while Java really really doesn't. If I want to stick two completely different types into the same array it lets me. No need to spend the time creating an interface. And yes for big complex programs with a team of devlopers I can see why this could cause problems. But If I want to knock out a simple game within a couple of hours, Java can sometimes seem like's worrying to much. It's feels like Java is nagging at me like "Oh Neil! What if you call a method and the object doesn't have it! " While Javascript is like "Whatever man, it's your code. Do what ya want. I might not even bother to tell you if it messes up."

Oh and I love how easy it is to get my programs out there. I'm just writing silly little things as practice, but it's so easy to just stick what I've wrote on a website.

I'm glad I learned Java first though.

Randall Twede wrote:thanks Niel

doesn't it figure another bug would turn up?

This one is dead simple to fix. Just make sure that your code only calls the peek() method when the stack isn't empty.

And it's NEIL not NIEL!