HTML5/CSS3/advancedJavascript learning and programming logs - Page 7 - Computer Technical Help

Two Plus Two Forums Other Topics Computer and Technical Help

HTML5/CSS3/advancedJavascript learning and programming logs

Post Reply Subscribe

...

Page 7 of 12

First

2 3 4 5 6 7 8 9 10 11 12

Last

Page 7 of 12

First

2 3 4 5 6 7 8 9 10 11 12

Last

05-17-2011 , 06:10 AM

#151

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

This is going to be it for the day. As I said, I probably won't be able to do anything tomorrow.

This is basically prototyping. I don't think that this is particularly accurate or good-looking. In fact, they are so bad that I won't even bother looking at anyone's fix:

Code:

function addition(aNum){
var aNum = document.getElementById("display");

if (typeof aNum === "undefined"){
    var aNum = document.getElementById("display");
    }else{
        var bNum = document.getElementById("display");
    }
    
    if (typeof aNum === "number"){
        var aNum + " ";
    }
    
    
    if (typeof aNum === "number" && typeof bNum === "number"){
        go to equalTo();
    }
}

and...

Code:

function equalTo(aNum, bNum){
    if(typeof aNum !== "number" || typeof bNum !== "number"){
        do nothing;
    }else{
        execute equation;
    }    
}

And thanks for your guys' help. I am forever greatful for it. Definitely out of my depth here.

(just checked what I have, and of course it isn't even working now.

Quote

150% up to $2,000 Welcome Bonus on CoinPoker

Join the action now

Daily Rewards • Splash Pots • CoinRaces

05-19-2011 , 06:01 AM

#152

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

So, basically, I am hoping I am going into the correct direction:

I, uh... attempted to do a nifty for-loop a'la Shoe Lace.

The whole entire code is error this and error that (finally figured out how to see errors).

Before I show off my kinda sorta code that ain't worth nuttin', I have to make a confession. I JUST learned what an argument/parameter is. Why doesn't anyone anywhere ever explain that the reason it exists is so that the function only runs if the variables are initialized? I guess it is one of those common sense things, so I am doubly embarrassed.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style type="text/css">

div {
width: 715px;
height: 20px;
border-style: solid;
border-color: blue;
}

</style>
  
<script type="text/javascript">

var xNum = new Array();
xNum[0] = document.getElementById('display');
xNum[1] = document.getElementById('display2');

function add(xNum){
    if (xNum[0] === "defined"){
        xNum[0]+nextNumber;
    }
    if (xNum[0] === "defined" && xNum[1] === "defined"){
    goto equalTo();
}

function subtract(xNum){
    if (xNum[0] === "defined"){
        xNum[0]-nextNumber;
    }
    if (xNum[0] === "defined" && xNum[1] === "defined"){
    goto equalTo();
}

function multiply(xNum){
    if (xNum[0] === "defined"){
        xNum[0]*nextNumber;
    }
    if (xNum[0] === "defined" && xNum[1] === "defined"){
    goto equalTo();
}

function divide(xNum){
    if (xNum[0] === "defined"){
        xNum[0]/nextNumber;
    }
    if (xNum[0] === "defined" && xNum[1] === "defined"){
    goto equalTo();
}

function equalTo(xNum){
    if (xNum[0] === "defined" && xNum[1] === "defined"){
        
    }
}

function backSpace(){
document.getElementById('display').innerHTML = 'U+0008';
}

function clear(){
}

function clearAll(){
}




function setDigit(digit) {
    return function() {
        document.getElementById('display').innerHTML += digit;
    }
}

window.onload = function start() {
    for(var button = 0; button < 10; button++) {
        document.getElementById('digit-' + button).onclick = setDigit(button);
    }
    
    otherButtons = new Array();
        otherButtons[0] = add;
        otherButtons[1] = subtract;
        otherButtons[2] = multiply;
        otherButtons[3] = divide;
        otherButtons[4] = equalTo;
        otherButtons[5] = backSpace;
        otherButtons[6] = clear;
        otherButtons[7] = clearAll;
    
    for(var otherButtons =0; otherButtons<8; otherButtons++){
        document.getElementById(otherButtons).onclick =(otherButtons);
    }
}
  </script>
</head>

<body>
<div id="display"></div>
<div><span id="display2"></span></div>
<div><span id="display3"></span></div>

<button id="digit-1">1</button>
<button id="digit-2">2</button>
<button id="digit-3">3</button>
<button id="digit-4">4</button>
<button id="digit-5">5</button>
<button id="digit-6">6</button>
<button id="digit-7">7</button>
<button id="digit-8">8</button>
<button id="digit-9">9</button>
<button id="digit-0">0</button>
<button id="add">+</button>
<button id="subtract">-</button>
<button id="multiply">x</button>
<button id="divide">/</button>
<button id="equals">=</button>
<button id="backSpace">backspace</button>
<button id="clear">clear</button>
<button id="clearAll">clear all</button>
<button onclick="showResult()">result</button>
</body>
</html>

Quote

05-19-2011 , 06:11 AM

#153

Gullanian

Carpal \'Tunnel

Join Date: Dec 2006 Posts: 14,014

Just a quick tip, I rarely see 'goto' statements in Javascript, or any other good code for that matter. The debate on 'goto' is fierce and hot, but a lot of people (myself included) believe that goto statements indicate a flawed design and is bad practise. I would remove it from your vocabulary, especially at this early stage of learning. If you were at a job interview and used goto's in a exam setting you would be highly likely to fail.

Also I hope my comments aren't discouraging you! Sorry if I come off as a nuisance. Just trying to help if I can, you're learning well and it's a fun thread.

Quote

05-19-2011 , 06:15 AM

#154

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

OH NO!!!!!

I was not actually considering using goto (and in fact, I had no idea about goto being a valid anything until it popped up as blue on Notepad++), I was just putting it in there as an indication that I want to make the program go to that function and use it.

Okay, I didn't know that about the goto debate either. So, goto and typeof are both controversial, but depending on whom you ask, document.write seems to have it's naysayers.

Quote

05-19-2011 , 08:44 AM

#155

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

For starters, add, subtract, multiply and divide are all missing a curly bracket.

Quote:

Originally Posted by daveT

I JUST learned what an argument/parameter is. Why doesn't anyone anywhere ever explain that the reason it exists is so that the function only runs if the variables are initialized? I guess it is one of those common sense things, so I am doubly embarrassed.

That's not what a parameter is for. Parameters are a way to pass values/references into a function. This creates a local variable, scoped by the function, that can be used with in the function.

Code:

function add(d1, d2) {
  return d1 + d2;
}
alert(add(1,2));

However, Javascript allows you to call add(), even though the function signature defines 2 parameters. In that case, both d1 and d2 are undefined.

You should also note, that the local variable will hide any global variable with the same name. You have the global xNum, but all of your functions define a parameter xNum. So unless you use add(xNum) when you call the function, you will never be pointing to the global array you created.

In your start function you use otherButtons for both the array name and your for loop counter. I didn't check what it actually does, but it can't be right. Just use i for the counter when iterating over an array, this way other people will see it and think index.

Code:

xNum[0]*nextNumber;

This is doing the computation, but never storing it anywhere.

Quote

05-19-2011 , 10:55 AM

#156

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

There's nothing controversial with typeof. A ton of JS functionality can be classified as an object. typeof is the only way to figure out exactly what you're working with.

There's a global function called eval(). Anything inside of the parenthesis will get evaluated. This function is generally evil and should be avoided but for a calculation type of application it really does make sense to use it.

Imagine being able to do this and it just worked:
eval(1+4-2*5/4);

...well, you can.

I only bring this up because the direction you're going in seems to be off. Without getting crazy you can build a copy of the Windows 7 calculator in about 20 lines of code with basic functionality.

Quote

05-19-2011 , 11:36 AM

#157

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

This isn't about making the best solution. This is about exploring the language and learning how to write code. Running eval on a string that you appended to with each button press is a solution, but since it is simple, it limits the exposure to things. Writing a simple state machine requires more work, but leads to other things that you need to be familiar with.

Quote

05-19-2011 , 07:27 PM

#158

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by TheIrishThug

Code:

function add(d1, d2) {
  return d1 + d2;
}
alert(add(1,2));

Wouldn't the function break completely if d2 is never defined or wosuld this function just store a variable in d1 and then let d2 stay undefined until the next step?

I know the code is bad, but I just wanted to show the architecture that I am attempting to work with. Sort of thinking that the rest is going to be look at the big picture and hope the smaller parts begin to make more sense.

-------------------

I was wondering about the backSpace function. I notice that if I insert HTML or utf-8 entities, many different things happen. For example, the HTML entities will delete the entire line and show a box with either 0018 or 0008. The utf-8 will pull up the U-0008 in the box. Other stuff creates a NaN in the box, though it does delete everything.

So this creates a small issue. If I am attempting to define the typeof of the variables, saying that it === "number" seems bad, since using the entities add a non-number byte to the line. ?????

I am thinking another solution would be something like:

document.getElementById('display') = display.length -= display.length-1;

I just thought of that one last night, so I have research on how to correctly do something like this, hope it works, and if it doesn't store it in my memory as something to know about and look further into.

-----------------

When creating the if functions, I had two variations on the theme. One started with a negation, and the other started with a true of sorts.

if (typeof num == "undefined"){
num = document.getElementById('display');
}else{
num2 = document.getElementById('display');
}

and the other was:

if(typeof num === "number"){
num + num2;
}

These are something like that. Just doing this from quick memory since I am more concerned about the question of whether it is better to do a straight up true/false or attempt to create a notTrue/notFalse function.

Quote

05-19-2011 , 07:33 PM

#159

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by Shoe Lace

I could go ahead and just look inside of this code, but I really don't want to.

http://www.ilikecomputer.com/calculator.php

I honestly can't see how I can learn unless I obfuscate (explore the guts) and then minimize.

If I didn't have an obfuscated code written out, I would never understood why you created the for loop. At least now I can read it and understand it, though I can't exactly emulate it.

Quote

05-19-2011 , 07:48 PM

#160

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,154

what do you mean "obfuscate"? imo it means "to write code in the most incomprehensible manner" - but I don't think you're using it like that!

WRT the unicode delete U+0008 I meant to point out earlier - that's a horrible way of doing things.

taking the string, chopping a character from the end then copying it back is much nicer

Quote

05-19-2011 , 08:04 PM

#161

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Sorry, couldn't think of a better word.

Is hostgator okay for someone of my "ability?"

Quote

05-19-2011 , 10:04 PM

#162

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

Quote:

Originally Posted by daveT

Wouldn't the function break completely if d2 is never defined or wosuld this function just store a variable in d1 and then let d2 stay undefined until the next step?

Parameters will only have the value that was passed to them when the function was called. If you need to store state between calls, you will need to use a global variable.

Quote:

Originally Posted by daveT

I know the code is bad, but I just wanted to show the architecture that I am attempting to work with. Sort of thinking that the rest is going to be look at the big picture and hope the smaller parts begin to make more sense.

That's fine, I would just recommend that you try to keep the syntax valid. And then add comments to remind yourself about things you know are wrong and need more work.

Quote

05-19-2011 , 10:09 PM

#163

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

The mozilla documentation explains the for loop:
https://developer.mozilla.org/en/Jav...#for_Statement

It might not make full sense because they expect you to read the previous chapters.

Quote:

If you need to store state between calls, you will need to use a global variable.

Using a global variable is an option but you don't need to use it. Closures are the answer to this. They allow you to keep state without polluting the global name space.

Quote

05-19-2011 , 10:53 PM

#164

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,154

Quote:

Originally Posted by daveT

Is hostgator okay for someone of my "ability?"

I've been very happy with hostgator so far.

They pay affiliates $100/ signup, make sure to get "rakeback" lol

Quote

05-20-2011 , 01:43 AM

#165

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Got the Array item fixed. Started up with this array, and it prints out correctly:

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<script type="text/javascript">

window.onload = function(){
var i;
var someArray = new Array();
someArray[0] = "zebra";
someArray[1] = "clown";
someArray[2] = "stomach";
someArray[3] = "number9";

for(i=0; i<someArray.length; i++){
    document.getElementById('result').innerHTML += someArray[i] + "<br>";
}
}
</script>

</head>
<body>

<p id="result"></p>

</body>
</html>

which creates this:

Code:

var i;
    var otherButtons = new Array();
        otherButtons[0] = add;
        otherButtons[1] = subtract;
        otherButtons[2] = multiply;
        otherButtons[3] = divide;
        otherButtons[4] = equalTo;
        otherButtons[5] = backSpace;
        otherButtons[6] = clear;
        otherButtons[7] = clearAll;
    
    for(i=0; i<otherButtons.length; i++){
        document.getElementById(otherButtons).onclick = otherButtons[i];
    }

actually, I'm not sure if the last should read:

document.getElementById(otherButtons).onclick += otherButtons[i];

but that seems to defy common sense.

Quote

05-20-2011 , 02:18 AM

#166

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Code:

function backSpace(){
var a = document.getElementById('display').innerHTML;
var b = a.length;
document.getElementById('display').innerHTML -= b;
}

Well, I tried many things so far:

Code:

function backSpace(){
var a = document.getElementById('display');
var b = a.length;
document.getElementById('display').innerHTML -= b;
}

document.getElementById('display').innerHTML -= b - 1;
document.getElementById('display').innerHTML = b - 1;

Code:

function backSpace(){
 var a = document.getElementById('display').length;
 document.getElementById('display').innerHTML -= a - 1;
// and = a - 1;
 }

of course I started with the obligatory:

Code:

function backSpace(){
  document.getElementById('display').innerHTML -= document.getElementById('display').length // fill in the blanks here;

and other stuff that I either forgot about or is to embarrassing to write.

-------------------------

of course, there is a site somewhere that tells you how to find the length of a paragraph and stuff, but that apparently takes a multi-level array and a few for... while loops.

Quote

05-20-2011 , 08:06 AM

#167

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

innerHTML is a string object. That means it has a number of helpful methods you can use specifically for manipulating strings. JavaScript String Object

Quote

05-20-2011 , 02:44 PM

#168

_dave_

_Pooh_Bah_

Join Date: Feb 2005 Posts: 13,154

I really recommend buying the rhino book linked above, or checking it out from a library. it is an amazing introduction to programming as well as a superb reference book.

Quote

05-21-2011 , 02:47 AM

#169

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Quote:

Originally Posted by TheIrishThug

innerHTML is a string object. That means it has a number of helpful methods you can use specifically for manipulating strings. JavaScript String Object

Unfortanately, javascript doesn't consider numbers "strings."

I don't know what to do, really.

Quote:

Originally Posted by _dave_

I really recommend buying the rhino book linked above, or checking it out from a library. it is an amazing introduction to programming as well as a superb reference book.

This I agree with, but I'm not going to go through the details of my life tilt: just know that this has to wait, and by "wait," that could mean 85 years from now.

So, I am basically left with about 500 useless (read incorrect, poorly written, etc) that is basically the equivalent of handing me a much of minced meat and telling me to create something better than Wolfgang Puck. Oh yes, then imagine that I am told that I should cook that piece of meat at some temperature between 100 and 1000 degrees.

I just, after all these days, figured out that if I do:

Code:

function setDigit(digit) {
    return function() {
        document.getElementById('display').innerHTML += digit;
    }
}

window.onload = function start() {
    for(var button = 0; button < 10; button++) {
        document.getElementById('digit-' + button).onclick = setDigit(button);
    }
document.getElementById('add').onclick = addition;
document.getElementById('subtract').onclick = subtraction;
document.getElementById('multiply').onclick = multiplication;
document.getElementById('divide').onclick = division;
document.getElementById('equals').onclick = equalTo;
document.getElementById('backSpace').onclick = backOne;
document.getElementById('clear').onclick = clearLine;
document.getElementById('clearAll').onclick = clearAllLines;

everything below the for loop comes up null (seriously, why the **** did it take me so long to figure out how to find the error console?), and I have absolutely no clue why this would happen.

And of course, since I had no clue all of this was null, there is little wonder why nothing I was attempting to do wasn't working. I mean, not that it would anyways, but still: it's the same point.

Ugh. There are 50 ways to write "hello world" in javascript. Is it supposed to be completely non-intrusive, all external files, some in the head and some in the body, a mix of both?

I'm not going to give up on the calculator thingy, but it's not as if this is an easy project for someone who has zero good resources and just started working with it again barely two weeks ago (not that I was worth a damn before).

Why can't I get a simple question answered: What happens to the first number if the second isn't defined? How do I store it? Do I have to store it? Where can I find the information on this? And why is it after days and days of research, I find only more stuff that is confusing and contradicts everything I learned earlier?

As for the libraries: they're a joke. The best programming book I ever found was the PL/SQL book, and we know what kind of disaster that turned out to be.

Quote

05-21-2011 , 06:44 AM

#170

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

So found some links to stuff I figure is important to get a handle on. I think Shoe Lace mentioned closures.

What is the scope in a for loop?

http://stackoverflow.com/questions/2...-in-a-for-loop

a few things on "this."

http://stackoverflow.com/questions/2...-in-javascript

http://stackoverflow.com/questions/1...118938#1118938

http://www.quirksmode.org/js/this.html

some stuff on prototypes.

http://stackoverflow.com/questions/4...841209#4841209

and closures:

http://stackoverflow.com/questions/1...-closures-work

http://blog.morrisjohns.com/javascri...r_dummies.html

This free book was suggested by either SO or that other programming site:

http://eloquentjavascript.net/contents.html

To say the least, I am not that impressed with it, but there seems to be some valuable sections in there that aren't anywhere else. Like error handling.

Quote

05-21-2011 , 11:23 AM

#171

TheIrishThug

Pooh-Bah

Join Date: Jan 2005 Posts: 5,223

Quote:

Originally Posted by daveT

Unfortanately, javascript doesn't consider numbers "strings."

For starters, you can always convert a string to a number and back again. This page lists a few functions that will do it.

More importantly, whenever you are working with innerHTML, you are working with a string. Even if you assign a number value to innerHTML, the next time you read it, it will be a string (example).

[PHP]innerHTML += 2 // translates to
innerHTML = innerHTML + 2[/PHP]

If innerHTML was the number 4, the new value would be 6. But since it is a string, the new value is 42. The plus operator is designed so that if there is a string on one side and a number on the other, the number is converted to a string and the two strings are appended together.

Quote

05-21-2011 , 03:05 PM

#172

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

If you spent the last 2 weeks reading that 6th edition JS book or a few days on the mozilla doc page (which is like a mix between a book and documentation) you would be well on your way.

Almost every problem you're having or asking is explained in either one.

Quote

05-21-2011 , 07:00 PM

#173

daveT

S.A.G.E. Master

Join Date: Jun 2005 Posts: 23,955

Here is page 3 of mozillaDocs.

Please read it and tell me how someone with little programming know-how can make dollars or cents of this.

https://developer.mozilla.org/en/Jav..._and_Operators

It's not like I am dismissing the source at page 55. this is page 3. The section on "this" I think is only 5 sentences long, and the stuff later in the docs only gets more confounding. There is absolutely no way a beginner can use this reference.

If you don't know the correct way to write out the basic structure of a javascript, and the correct way to write out the result, or the correct way to see if there is a value assigned to the line of code, how is this the slight bit helpful?

Quote

05-21-2011 , 07:31 PM

#174

Shoe Lace

Pooh-Bah

Join Date: Sep 2004 Posts: 3,654

Hmm. I would probably start with the previous chapter.
https://developer.mozilla.org/en/Jav...c_and_Literals

I guess some of it is pretty cryptic though if you have absolutely no experience at all.

I was looking at a video earlier today and came across this as a related video:
http://ontwik.com/javascript/javascr...inners-part-1/

I took 5min just now skimming over it. It doesn't cover everything but it seems like this guy goes out of his way to explain things in the most non-technical way possible. Maybe start here for now?

Quote

05-21-2011 , 08:51 PM

#175

Zurvan

Carpal \'Tunnel

Join Date: Apr 2005 Posts: 37,385

Dave - if you're not understanding that documentation, then maybe you should be taking a step back and learning more programming fundamentals, instead of frustrating yourself trying to learn a specific language.

Start with the Stanford Engineering Everywhere project, or something similar. There's lectures/notes/assignments that explain concepts that are pretty important, and which will make specific language docs much easier to grasp.