My beginner programming thread

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
Edit: Thanks mod for changing thread title!
I've decided to make this my beginner programming thread, because I don't want to inundate the forums with threads!

My goal overall is to learn HTML, CSS, Javascript and Python (for now). One step at a time though.

Hey guys, I have about 30 or so lines of code repeating itself in javascript.
It's spawns a random pearl on the canvas between a set location of pixels. Basically trying to give it the effect of pearls in the back of a fishtank.

So it looks like this

Code:
var drawPearl = function() {
   var PearlX = random(10, 390);
   var PearlY = random(350, 390);
  
   ellipse(PearlX, PearlY, 40, 40); 
};
//pearls 
drawPearl();

then drawPearl repeats for line 29 more times because I want random pearls all over the place, but it takes up so much coding lines.

1) Does this matter that it takes up so much space?
2) Any way to merge those 30 lines into one so I don't have to see it?
 
Last edited:

stricken

Expert Member
Joined
Sep 5, 2010
Messages
2,265
why not go :

Code:
var numberOfPearls = 30; 
for(var i = 0; i < numberOfPearls; i++)
{
      drawPearl(); 
}
or even better :

Code:
var i = 0, numberOfPearls = 30;  
while(i < numberOfPearls) { drawPearl(); i++; }
 

ozziej

Senior Member
Joined
Jul 22, 2009
Messages
718
google "minify javascript" there are a couple of utilities. I use YUI compressor, but I think its being deprecated.
 

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
why not go :

Code:
var numberOfPearls = 30; 
for(var i = 0; i < numberOfPearls; i++)
{
      drawPearl(); 
}
or even better :

Code:
var i = 0, numberOfPearls = 30;  
while(i < numberOfPearls) { drawPearl(); i++; }

I'll be honest and say, because I didn't know any better.
I didn't know the for and while commands existed.

So I see the function 'word' is gone, but you still have the parenthesis, does that mean it's still a local variable?

Thank you :)
 

stricken

Expert Member
Joined
Sep 5, 2010
Messages
2,265
I'll be honest and say, because I didn't know any better.
I didn't know the for and while commands existed.

So I see the function 'word' is gone, but you still have the parenthesis, does that mean it's still a local variable?

Thank you :)

sry.. i only suggested the solution to your problem. the full script will look like :

Code:
var drawPearl = function() {
   var PearlX = random(10, 390);
   var PearlY = random(350, 390);
  
   ellipse(PearlX, PearlY, 40, 40); 
};

var i = 0, numberOfPearls = 30;  
while(i < numberOfPearls) { drawPearl(); i++; }

so basically you define the function... and then use a while (or for) loop to call the function numberOfPearls times
 

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
for(var i=0,numberOfPearls=30;numberOfPearls>i;)drawPearl(),i++;
Thanks! Between you and stricken this seems to be the same code so it must be best :)
google "minify javascript" there are a couple of utilities. I use YUI compressor, but I think its being deprecated.

Well I'm actually doing this on Khan Academy, so I don't think I can use those there. I'm trying to teach myself in my spare time.

Haven't heard of a YUI before, but I did google it. Wow it seems very useful!
 

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
sry.. i only suggested the solution to your problem. the full script will look like :

Code:
var drawPearl = function() {
   var PearlX = random(10, 390);
   var PearlY = random(350, 390);
  
   ellipse(PearlX, PearlY, 40, 40); 
};

var i = 0, numberOfPearls = 30;  
while(i < numberOfPearls) { drawPearl(); i++; }

so basically you define the function... and then use a while (or for) loop to call the function numberOfPearls times

I put it in and it worked, best feeling ever.

Okay that's pretty cool code, I can understand it too now looking over it.
While var i is less than 30 it will keep adding pearls - so cool!! And you can easily change the number, so much more efficient that my ctrl + v hehe


Yay :D Thank you so much!
 

FarligOpptreden

Executive Member
Joined
Mar 5, 2007
Messages
5,396
Check the link in my signature and investigate the code. I wrote it all by hand and it also spawns "pearls" at random (well, specific intervals, but random amounts and with random velocities, directions and lifetimes). You're welcome to copy the code and bend it to your will. The moving light shafts and gradient at the back can also help you achieve a "fish tank" look. :)
 

Hamster

Resident Rodent
Joined
Aug 22, 2006
Messages
42,928
You should not use a while-loop in stead of a for-loop when the number of iterations are known (like in this case).
Code:
var crazyIvan = function (int left){
  if(left == 0)
    return;
  drawPearl()
  crazyIvan(--left)
}

crazyIvan(30)

:twisted:
 

Johnatan56

Honorary Master
Joined
Aug 23, 2013
Messages
30,957
Code:
var crazyIvan = function (int left){
  if(left == 0)
    return;
  drawPearl()
  crazyIvan(--left)
}

crazyIvan(30)

:twisted:

Code:
<html>
<body>
	<script>
	function myFunction() {
          alert("evil");
	}
	while(1==1){myFunction();}
	</script>
</body>
</html>
:p
 

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
So KA hasn't taught me this yet, but I want to know.

iw866r.jpg


How do I get Quantity and 1.5 cups to be in line with each other?
 

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
Post the rest of your code and css so i can see how u used css

Will do! One second!

Keep in mind this is my first dabbling with html and css, I been focusing mostly on javascript so this is new to me :)

I'm probably going to make your eyes bleed.
 
Last edited:

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
Code:
<!DOCTYPE html>
<html>
    <head>
        <title>Project: Recipe book</title>
        <meta charset="utf-8">
        <style>
        h2 {
            color: red;
        }
        th {
            color: red;
        }
        td {
            background-color: rgb(210, 216, 217);
        }
        #contents {
            color: rgb(133, 36, 99);
        }
        </style>
    </head>
    <body>
       
        <h1>Admiral's Recipe Book</h1>
        
        <h2 id="contents">Contents:</h2>
        
        <ol>
            <li><a href="#cottege-cheese">Cottege Cheese Pie</a>
            </li>
            <li><a href="#malva-pudding">Malva Pudding</a></li>
            <li><a href="#crumbed-chicken">Crumbed Chicken</a></li>
        </ol>
        
        <!-- Recipe 1 starts here -->
        
        <h2 id="cottege-cheese">Recipe #1: Cottege Cheese Pie
        </h2>
        
        <ul>
            <li>Time: 180 minutes</li>
            <li>Serves: 6</li>
        </ul>
        <img src="https://upload.wikimedia.org/wikipedia/commons/8/87/Almond_Cheesecake.jpg"alt="cottage cheese pie" width="320">
        <table>
            <thead>
                <tr>
                    <th>Ingredients</th>
                    <th>Quantity</th>
                </tr>
                
            </thead>
            <tbody>
                <tr>
                    <td>Flour<td>
                    <td>1 & 1/2 cups</td>
                </tr>
                <tr>
                    <td>Baking Powder<td>
                    <td>1/8 tablespoon</td>
                </tr>
                <tr>
                    <td>Vanilla Extract<td>
                    <td>1 teaspoon</td>
                </tr>
                <tr>
                    <td>Heavy Cream<td>
                    <td>1/4 cup</td>
                </tr>
                <tr>
                    <td>Unsalted Butter <td>
                    <td>8 tablespoons</td>
                </tr>
                <tr>
                    <td>Cottege Cheese<td>
                    <td>2 cups</td>
                </tr>
            </tbody>
        </table>
        
<p><strong>Step 1:</strong> For the Crust: Pulse flour, salt, and baking powder in food processor until combined, about 10 short pulses. Add cream cheese and pulse until coarsely incorporated, about 8 short pulses. Add butter cubes and pulse until dough forms pea-sized balls, about 8 short pulses.<br> Add cream, vanilla, and vinegar and continue to pulse until dough pulls away from sides, 8 to 12 short pulses. Transfer dough to a large sheet of plastic wrap and shape into a 1/4-inch thick disc. Cover with plastic wrap and refrigerator for at least 2 hours and up to three days hours. Remove from refrigerator and press into a 9-inch pie plate, using fingertips to form an even layer.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/5/55/REA_pie_from_oven.gif"alt="lady opening oven" width="320">
<p>
<strong>Step 2:</strong> To Assemble: Adjust oven rack to center position and preheat oven to 350°F. Whisk together eggs, flour, and sugar using an electric handheld mixture until smooth. Fold in cottage cheese, lemon zest and juice, heavy cream, and vanilla extract.<br> Pour into the prepared pie shell. Bake until set in the middle, about 40 minutes. Let cool slightly and serve.</p>

        <!-- Recipe 1 ends here -->
        
        <!-- Recipe 2 starts here -->
        
        <h2 id="malva-pudding">Recipe #2: Malva Pudding</h2>
        <ul>
            <li>Time: 60 minutes</li>
            <li>Serves: 5</li>
        </ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/StickyToffeePudding.jpg" width="320">
        <table>
            <thead>
                <tr>
                    <th>Ingredients</th>
                    <th>Quantity</th>
                </tr>
                
            </thead>
            <tbody>
                <tr>
                    <td>Cake Flour<td>
                    <td>1 cup</td>
                </tr>
                <tr>
                    <td>Baking Powder<td>
                    <td>1/8 tablespoon</td>
                </tr>
                <tr>
                    <td>Bicarbonate of Soda<td>
                    <td>1 teaspoon</td>
                </tr>
                <tr>
                    <td>Extra Large Egg<td>
                    <td>1</td>
                </tr>
                <tr>
                    <td>Unsalted Butter <td>
                    <td>2 Tablespoons</td>
                </tr>
                <tr>
                    <td>Milk<td>
                    <td>1/4 cup</td>
                </tr>
            </tbody>
        </table>
<p><strong>Step 1:</strong> Cream butter and sugar together, beat in the egg until light and fluffy.
Beat in the apricot jam.
Dissolve the bicarb in the milk.
Sift the flour and salt together and add to the creamed mixture alternately with the milk.<br>
Lastly stir in the vinegar.
Pour into a deep round dish about 19cm diameter. Cover the dish with a lid or foil and then bake for 1 hour at 180°C.
</p>
<p><strong>Step 2:</strong> Bring the butter, sugar and water to the boil and simmer, stirring all the time for 2 minutes.<br>
Remove from the stove and then add the cream and the vanilla. Pour over the hot baked pudding.
</p>
        <!-- Recipe 2 ends here -->
        
        <!-- Recipe 3 starts here -->
        
        <h2 id="crumbed-chicken">Recipe #3: Crumbed Chicken
        </h2>
        
        <ul>
            <li>Time: 20 minutes</li>
            <li>Serves: 4</li>
        </ul>
<img src="https://upload.wikimedia.org/wikipedia/commons/a/a5/Milanesa,_comida.JPG"alt="crumbed chicken" width="320">
        <table>
            <thead>
                <tr>
                    <th>Ingredients</th>
                    <th>Quantity</th>
                </tr>
                
            </thead>
            <tbody>
                <tr>
                    <td>Regular Eggs<td>
                    <td>2</td>
                </tr>
                <tr>
                    <td>Flour<td>
                    <td>1/2 cup</td>
                </tr>
                <tr>
                    <td>Fresh Bread Crumbs<td>
                    <td>2 & 1/2 Cups</td>
                </tr>
                <tr>
                    <td>Pepper<td>
                    <td>1/4 teaspoon</td>
                </tr>
                <tr>
                    <td>Unsalted Butter <td>
                    <td>3 tablespoons</td>
                </tr>
                <tr>
                    <td>Chicken Breat or Fillet<td>
                    <td>1 Large</td>
                </tr>
            </tbody>
        </table>
        
<p><strong>Step 1:</strong> Crack the eggs into a bowl and lightly beat with a fork. Put the flour in another bowl, and add the salt and pepper. In the third bowl, put the bread crumbs.
</p>
<p><strong>Step 2:</strong> Dip a piece of chicken in the flour, covering both sides. Gently shake off any excess. Dip the floured chicken in the egg and let the extra drip off.<br> Then lay it in the bread crumbs, and scoop some over to cover the top. Press down gently all over, then lift from the bowl and set on a plate. Do that for all the chicken.</p>
<p><strong>Step 3:</strong> Melt the butter in a large pan over medium heat, and when the white foam floats to the top, use a spoon to skim it off. Then put in the chicken and cook for about 7 minutes on each side, or until the crumbs are nicely browned. (Fish will take less time.)<br> Use a spatula to turn the chicken over, and cook 5 more minutes or so. Serve with lemon wedges.</p>

        <!--Recipe 3 ends here --> 
        
    <p><em>Source: Click the links for recipe websites;</em></p>
    <ul>
    <li><a href="http://www.seriouseats.com/recipes/2013/06/cottage-cheese-pie-recipe.html">Cottege Cheese Pie</a></li>
    <li><a href="http://www.hulettssugar.co.za/step_into_our_kitchen_grandmas_malva_pudding_decadent_desserts_recipes">Malva Pudding</a></li>
    <li><a href="http://cooking.nytimes.com/recipes/8764-chicken-fried-with-bread-crumbs">Crumbed Chicken</a></li>
    </ul>
    
    </body>
</html>
 

Hamster

Resident Rodent
Joined
Aug 22, 2006
Messages
42,928
Dunno about tbody & thead (not a front end dev) but seems to me like you are not closing tags hence your interpreter (browser) is left to guess I suspect.

Try closing tags correctly(td tags) and see if it corrects itself.

http://www.w3schools.com/html/html_tables.asp

What he said.

Your code:
Code:
<table>
    <thead>
        <tr>
            <th>Ingredients</th>
            <th>Quantity</th>
        </tr>
        
    </thead>
    <tbody>
        <tr>
            <td>Flour[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>1 & 1/2 cups</td>
        </tr>
        <tr>
            <td>Baking Powder[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>1/8 tablespoon</td>
        </tr>
        <tr>
            <td>Vanilla Extract[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>1 teaspoon</td>
        </tr>
        <tr>
            <td>Heavy Cream[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>1/4 cup</td>
        </tr>
        <tr>
            <td>Unsalted Butter [B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>8 tablespoons</td>
        </tr>
        <tr>
            <td>Cottege Cheese[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>2 cups</td>
        </tr>
    </tbody>
</table>

Those <td> elements should be </td>. The browser sees a <td>, thinks you made a mistake and "closes" then for you by adding extra </td> elements. As a result your code looks like this in the browser:

Code:
<tr>
    <td>Flour</td>
    <td></td>
    <td>1 & 1/2 cups</td>
</tr>
 

Admiral Snackbar

Well-Known Member
Joined
Jan 12, 2016
Messages
183
What he said.

Your code:
Code:
<table>
    <thead>
        <tr>
            <th>Ingredients</th>
            <th>Quantity</th>
        </tr>
        
    </thead>
    <tbody>
        <tr>
            <td>Flour[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>1 & 1/2 cups</td>
        </tr>
        <tr>
            <td>Baking Powder[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>1/8 tablespoon</td>
        </tr>
        <tr>
            <td>Vanilla Extract[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>1 teaspoon</td>
        </tr>
        <tr>
            <td>Heavy Cream[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>1/4 cup</td>
        </tr>
        <tr>
            <td>Unsalted Butter [B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>8 tablespoons</td>
        </tr>
        <tr>
            <td>Cottege Cheese[B][COLOR="#FF0000"]<td>[/COLOR][/B]
            <td>2 cups</td>
        </tr>
    </tbody>
</table>

Those <td> elements should be </td>. The browser sees a <td>, thinks you made a mistake and "closes" then for you by adding extra </td> elements. As a result your code looks like this in the browser:

Code:
<tr>
    <td>Flour</td>
    <td></td>
    <td>1 & 1/2 cups</td>
</tr>

:D
Thank you Hamster, the way you formatted that is outstanding. I could tell what I needed to fix before even reading your post.

Alright, so I wasn't using the tags properly.
 
Top