| Site News |
|---|
Arena News
Gruyle NewsSalvum NewsFirefall NewsRhodes News |
| Welcome to The Golden Arena! Right now, you're viewing our forum as a Guest. This means you're restricted in some area's but you can feel free to Advertise or ask a question here as a guest! If you're interested, registration with us is fast, simple, and completely free! Join us! Already a member with us? Sign in below!: |
| A Guide to Coding; Has been in the works for half a year... | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Tweet Topic Started: Apr 21 2013, 10:43 PM (200 Views) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mr. Mewthree | Apr 21 2013, 10:43 PM Post #1 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Respected
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Sadly, chapters 12-24 have somehow been lost T_T They mainly covered CSS, though, so don't worry, because I'm re-adding CSS in the form of Extra Credit Note: I recommend you read Gal's A Guide to BBCode first. http://w11.zetaboards.com/Guardians_of_Haven/topic/8095516/1/#new BBCode is the easier version of HTML, although it has less features. If you know BBCode, you could skip the first three or four chapters. Note 2: I am sorry that the 2nd, 3rd, and 4th posts don't seem to deserve their own posts. Why couldn't they all fit in here? WELL, ZETABOARDS HAS A LIMIT ON HOW MUCH YOU CAN HAVE IN A POST!!!! Therefore, I had to make it four posts long. Table of Contents Spoiler: click to toggle
PART 1: The Land of HTML Difficulty: Easy Spoiler: click to toggle LESSON 1: The Four Kings of HTML Spoiler: click to toggle What is HTML? HTML stands for Hypertext Markup Language. That basically means it's what people use to make their text more colorful. Sadly, Zetaboards uses the BBCode instead, disabling many features. The goods outweigh the cons though, but I won't go into BBC vs HTML. The British will win no matter what(BBC can also stand for British Broadcasting Chanel.). So really, what is HTML? The first thing you need to know is the <p> tag. Before I go into what a tag consists of, or what the heck a tag even is, I must explain this ESSENTIAL tag.
If you haven't guessed, which at the moment you most likely haven't, the 'p' stands for paragraph. Okay, I have been rambling on, so I should REALLY start telling you what it does. It creates a new paragraph. So if I where writing a page in HTML, I would do;
Now, if I wrote it like this;
there would be NO new lines. It would end up looking like this; 'Dear Joe,I really like your name.Sincerely, Joseph. Now, why do we NEED a <p> tag? Why couldn't HTML be programed to just automatically do it when you press 'enter/return'? The reason comes later, after we learn the basic tags. Now I've taught you the most important tag. But what is a tag? A tag is the HTML element, always enclosed in closed angel brackets (<>). There are two types of tages, an opening (<p>) and a closing (</p>) tag. The closing tag signifies the end of the element. For now, forgetting the 'p' closing tag isn't that bad, but later you'll learn forgetting a closing tag could mess up a whole document.
The three above, and 'p', are what I will refer to as the 'Four Kings'. They are the most common tags. The <i> tag makes things italic, <b> bold, and <u> underlined. If you forget the closing tag, ALL OF THE DOCUMENT AFTER THE OPENING TAG WILL BE CHANGED BY THE TAG. This is where the closing tag comes into prominence. Well, there isn't much left to talk about. Next, I will go over how to add '&', '#', and other stuff! LESSON 2: The Symbols of HTML Spoiler: click to toggle Note: remove the '__' to use, as these also work on Zetaboards. There are two examples, one begining with '&#', and the other with '&' THEY BOTH WORK. DO NOT GET RID OF THE ';'s, AS THAT IS ACTUALLY PART OF THE CODE, THE LAST CHARACTER OF IT!
LESSON 3: The Kings' Knights Spoiler: click to toggle The King's Knights will be what I use to refer to the tags like the Four Kings, but not as common.
These are the headings of HTML. Each one is slightly smaller than the other. Commonly, they are used in a hierarchy pattern, where <h1> is usually the title, <h2> the sections, <h3> the mini-sections, <h4> the mini-mini-sections, and so on. A good example would be this:
Notice that you do not use the <p> tag for the heading lines. Now, those are not the only King's Knights... There are a few more!
Note that I did not put a closing tag on most of them. That is because you are a big boy/girl now. XD Also, I did not go into much detail. Some, like <abbr>, are irregular. You all have access to a search engine if you are reading this, so look the tags up before you use them ![]() LESSON 4: The Kings' Castle Spoiler: click to toggle
So, we've got Kings and Knights. But where do they go? The <body> tag signifies the 'body' of the text. For the most part, this is what actually shows up on your page. There is nothing special about this... YOU DON'T EVEN NEED IT AT FIRST! But, once you start getting into more complicated stuff, you have to use the <body> tag to signify a difference from <head>. The <head> element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>. The <title> tag gives a 'title' to your page. Look up at the different tabs on your computer screen, above the search bar. They each have a name, right? The <title> tag is what gives them the name. The <base> tag specifies a default address or a default target for all links on a page. More on this when we get into the <a> tag. Until then, don't bother using this. The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets. This is the same as the <base> tag in that we'll talk about this more when we learn the <a> tag. The <style> tag is used to define style information for an HTML document. Inside the style element you specify how HTML elements should render in a browser. This tag is VERY important, especially when you learn CSS. Sadly, this tag is useless with the current knowledge on HTML you should have if you have just started learning HTML. The true opening tag is this: <style type="text/css"> Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine readable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The <meta> tag always goes inside the head element. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. More on this later XD The <script> tag is used to define a client-side script, such as a JavaScript. The script element will be explained in a later chapter. The <html> tag is something you stick around the whole thing, to differentiate it from JavaScript. LESSON 5: A Brief Introduction To CSS Spoiler: click to toggle
Note that if you use the Internal Style, it affects ALL paragraphs/headings/whatever you're using it on. Usually, people combine both styles, so something like this:
LESSON 6: The Kings' Village, Part One Spoiler: click to toggle All this CSS stuff is cool, but how do you make a table? Well, this is very, very, very COMPLEX once you get to the hard stuff, but I'll try my best to explain it. Before I do, though, I'll explain the <ul>, <ol>, <and <dl> tags, a major part of 'The King's Village'
So, how do you use these?
TAKE NOTICE TO THE TAGS INSIDE A TAG. You will be seeing this very often. Your first encounter with this was in the previous chapter, but I think bringing it up here would be better. Didn't I talk about a 'definition list'? Well, that is slightly more complex.
So... There are three to use in this list... but how? Simple!
So, this isn't that complex... But there is still more to explore with lists... Mwahahahahaha! I will teach you how to make a list look different, and how to do a LIST WITHIN A LIST! I might as well start with a list within a list.
So... Many... Tags... XD See, it starts to get confusing. Just wait until we hit MARGINS. Tags within tags within tags within tags with CSS galore! Now... Here is the part that mixes what we learned in Lesson Five... We get to modify them!
This sets the ordered list to numbers, the default. Nothing special here.
The A sets it to uppercase letters instead of numbers, 'a' to lowercase, 'I' to roman numerals, and 'i' to uppercase roman numerals... But that's not all!
Now, the numbers will start at number '3'.
Now it starts at 'C'! So the 'start' part is the value the list starts at! Phew! I finished lists! But... Next comes tables... and MARGINS. Edited by Mr. Mewthree, Apr 22 2013, 11:42 PM.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mr. Mewthree | Apr 21 2013, 10:44 PM Post #2 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Respected
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Difficulty: Moderate Spoiler: click to toggle LESSON 7: The Kings' Village, Part Two Spoiler: click to toggle You may be wondering why The Kings' Village was split in two... That's because tables and margins need to be put seperate, because they are so complex... So, what is a table? Using BBCode, it looks like this:
Is it the same in HTML? YES! But a bit more complex, and customizable.
So, how are they used? Well, this is a case of a tag within a tag within a tag... And soon, it will be a case of a tag within a tag within a tag with CSS... And then a tag with CSS within a tag with CSS within a tag with CSS...
What happens if you do two cells on one row, and then one cell in the other? Nothing happens. Nothing. Where the second cell would be in the table will be left blank. Now... We need to get into the complex stuff... So that we can get into the even complexer stuff... So that we can get into CSS... So that we can get into JavaScript...
Now the border for the table is bigger! Feel free to play with the number in the quotes to get it bigger or smaller!
So... Now we can do headers in tables!
There are much, much more, but that will be touched upon while I explain margins! LESSON 8: The Kings' Village, Part Three Spoiler: click to toggle Finally... The finale of 'The Kings' Village'! Here we have a massive increase in difficulty, but not enough for me to consider it 'hard'. Don't worry, after this I will explain some questions you all have had since the beginning, such as how to make a link, and how to add pictures... Note: BELOW, THERE IS SOME STUFF THAT WE HAVE NOT GONE OVER. NEVERTHELESS, AS I STATED IN THE EXAMPLE, TREAT THIS LIKE A 'PRETEST'. CHECK TO SEE IF YOU NEED TO REVIEW MORE!
Holy eff was that big! Did you know that people learn best by examining? Examine the things to find out how to do cool stuff like borders, as I will not explain that. The only thing I will explain is the margin part. Also, I will point out what you don't understand. The 'a href', 'link rel', 'a name', '#___'. I think that should be it. Oh, and also the CSS part.
I want to point this part out. Notice how the 'td' tag and 'tr' tag don't have their closing tags? Yes, you guessed right... THE MARGIN STUFF IS NOT REALLY ADDING A MARGIN, BUT MAKING THE WHOLE PAGE INTO A MARGIN!!! So, now you know how to make margins. It's not anything extremely complicated. Just a table (although, as you may have noticed before, it is possible to do true margins by using CSS)... BUT! How did I get the footers, headers, left margins, and right margins? I did a table in a table. I did one table that had one column, and three rows, and then the first row became the header, and the last the footer. Then, I did a three column, one row table inside the second row of that one, creating the margins. There is another way to do this, as I showed in the previous chapter, but it actually takes longer to do, and it is harder to know where to type, so this way is better. LESSON 9: The Aristocrats of HTML Spoiler: click to toggle Since the beginning of this, you may have been wondering how to add images, and create links. Well, I will finally teach you. Be warned, though. While the first parts are incredibly easy (like, Lesson Two easy), it starts to get harder.
This is the long-awaited link!!! Notice how the closing tag is </a>, not </a href>. I'll use this as an example:
Notice how the 'style' part is similar to the 'href' part... In fact, they are exactly the same (in terms of WHAT they are, not what they do)! The <a> tag is something different!
Now with that done, we can get to the COOL stuff... Linking a section of your page to another section! That way, you can have a table of contents at the top, and it links to somewhere further down the page.
Now... What if you are in 'Joe Bob's Wonderful Site', and he is talking about something in a certain section of your own page. He doesn't want to force you to scroll all the way down to the section, so he makes it so the link goes to a different page and a certain section at the same time!
So... Do you want to learn how to make clicking on a picture into a link? First, we will learn how to make pictures! This is really simple.
Note that there is no closing tag. This is another tag where the opening and closing tags are the same. So, to describe the attributes (note, 'attribute' is the name for the href part of the <a> tag, the scr part of the <img> tag, the style part of the <table>/<p>/etc tags, etc.). The first attribute, 'scr', is the part that defines the image. The second attribute, 'alt', is what happens when the picture can not load. So if your computer is slow, while the pic is loading, it will show the name in the 'alt' tag. So, this isn't really very hard, except for the part where you have to take in all this info about 'attributes'. Now, don't you want to specify the height and width of an image? Well, add two more 'attributes'! (ugh... attributes T_T XD )
Simple, right? Well, you want to keep the same ratio of width/height, or it starts looking squished. (the numbers are how big it is in pixels.) Now.... Let's spruce it up!
Note: i was too lazy to type this up, so I copy and pasted it from http://www.w3schools.com/html/tryit.asp?filename=tryhtml_image_align Anything else we can do? You bet! What if we want... MOVING IMAGES! Well, if you do, get a proper guide, because, sadly, I do not know how T_T (note: come back in a month or two. If I've learned it, i'll post it.)
Note: I also got this from W3Schools. I was too lazy. XD Well, anyways, now you know how to make an image link!
Note: THIS IS THE LAST ONE I WILL TAKE FROM W3Schools. Note that all credit goes to them for the typing of this code. Note the 'coords' attribute, the 'shape' attribute, and the <area> tag (also note that the <area> tag closes itself). The 'coord' attribute defines WHERE the place the link is, and the 'shape' attribute defines in what shape the BOUNDARIES of the link are. The <area> tag is just the thing that contains it all. I will go into it more in a later chapter. Now... For the favicon. What is a favicon? Look it up, I won't explain ![]()
This is what a favicon is. Note that it goes inside the <head> element discussed earlier. I won't explain much about this, so try looking what it is up. Last thing...
This shows A WEB PAGE WITHIN A WEB PAGE! Okay, that's all ![]() Well, that concludes the Aristocrats of HTML... And also concludes the 'moderate' difficulty... Yes, only advance if you are sure of your skills. Difficulty: Hard Spoiler: click to toggle LESSON 10: The Gates of HTML Spoiler: click to toggle So here we are, at the gates of HTML... The second-to-last chapter. Remember how when signing up for Zetaboards, you had to fill out a form? Yes, it is time you learned to do that.
Note the <form> tag around it, the <input> self-contained tag, the 'type' attribute, and the 'name' attribute, AND the <br /> tag. AKA, note everything XD. The <form> tag just signifies the beginning and end to the form. Nothing special. The <input> tag and the 'type-"text"' create the field of which you enter your 'username' and 'nickname'. The <br /> tag just creates a line break. For the stuff inside the <form> tag, you use <br /> instead of <p>, which is something you will be seeing more often. The 'name' attribute is VERY important... Later on Using this attribute will eventually allow you to display the 'name' when specified, such as my 'username' in my profile.
This is how you do the password. Note that it will always be shown as asterisks/circles while inputting the data. As you know, the password is what allows you to log on, not the type="password" this time.
This is a 'radio' type input. Basically, you are given X choices, and you CAN ONLY CHOOSE ONE. I also added 'spaghetti' there out of boredom. Don't mind it XD
The 'checkbox' allows you to select ZERO OR MORE options, not limited to one.
Note: I also took this from W3Schools... That is because it would take me too long to create somewhere the 'submit' would take me.
I won't explain what these are, you have to try them yourself to see!
Note that this is how you send someone an email upon completion of this form. Also note that I added a 'reset button'. This allows everything to be reset (duh). Well, this concludes Lesson 10... Next comes the 'Borders of HTML', aka an introduction to CSS. LESSON 11: The Borders of HTML Spoiler: click to toggle Before we continue, you may want to read this: http://www.w3schools.com/html/html_blocks.asp I hope you know your colors, because this is where it starts to get complicated! So, hexadecimals and rgb values are what make up colors in HTML and CSS. First, I should explain rgb, as rgb is used in many different codes, such as python, so I am more familiar with it.
Next comes hexadecimals... These are slightly more complex, so listen up.
So... Why are there letters and numbers? Well, HEXADECImal. HEXADECI=16. There are ten numbers in 0-9. The other six are; A,B,C,D,E, and F. 0 has a value of '1', 9 has a value of '10', A '11', B '12, and so on. Split every two digits up. 00 00 00. The first set is the amount of red (so FF is completly red, and then there are other combos such as F8, A0, etc.). Second is green, and third is blue. So basically, it is rbg done in a different style. But how do you use them? Simple!
So you use the 'style' attribute. Tis all. Believe it or not... THAT'S ALL FOR THIS CHAPTER! It is only classified in advanced because there are over a MILLION combinations of colors ![]() That concludes Part One. Next comes Part Two, Advanced HTML. You will learn how to run a script through HTML and other cool stuff![/spoiler] |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mr. Mewthree | Apr 21 2013, 10:44 PM Post #3 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Respected
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Difficulty: Holy Eff! Spoiler: click to toggle LESSON 25: The Judges of JavaScript Spoiler: click to toggle Here, we will learn about 'if' and 'else' statements!!! This is where things get TRICKY! Let's start with what an 'if statement is. "If I eat pie, I will grow fat." That is an 'if' statement in real life. JavaScript isn't that different.
Do you see? That's an example of what it is. Now, let's add TIME! This is where the signs in the previous chapter come in handy. Let me show you:
Now... What about an 'else' statement. It means if the requirements for if are NOT met, execute THIS code instead.
This is all cool, but... What if we want two different requirements to be met?
Cool, right? Now, how do we GET the time? It's not like the JavaScript automatically KNOWS the time.
The 'var time=new Date().getHours();' is what gets the time. The 'document.getElementById("demo").innerHTML=x;' is what tells the computer to change all things with the 'demo' id into 'x'
This is a switch code. So...
Note that when getting the date, Sunday has a value of '0', Monday '1', Tuesday '2', etc.
That concludes this lesson! Next lesson is pop up boxes! LESSON 26: The Screamers of JavaScript Spoiler: click to toggle
That is an alert box. Hence the name of the chapter, 'Screamers'.
This way, an alert box can change text!
Note that, in an alert box, '\n' is the <br /> tag. Well, that's all. You are probably going 'What? The Lesson's already done???', but, keep in mind that the first lesson was shorter than this ![]() LESSON 27: The Psychopaths of JavaScript Spoiler: click to toggle This chapter was not named because we will learn about things that will DRIVE YOU CRAZY! Loops.
That is what a loop is made of.
Notice the '++'? Yes, things from earlier chapters come into play once again! Ps. This 'for' koop will keep on going to 4 when the button is pressed (what button? Well, the answer is; CODE IT YOURSELF!) Note that, when giving the variable 'value', you must; Notice the ',i'?
This is a 'while' loop. An example is;
This is boring, right? YAWN! Well, there is more to learn about loops. The do...while loop is a variant of the while loop. This loop will execute the block of code once, before checking if the condition is true, then it will repeat the loop as long as the condition is true.
So... Yeah XD Example:
Soo... There you have it, folks! One last thing... The for...in statement loops through the properties of an object.
Note: The block of code inside of the for...in loop will be executed once for each property. Looping through the properties of an object:
Next comes EVENTS! LESSON 28: The Slackers of JavaScript Spoiler: click to toggle Here, we will learn about 'events' What is a JavaScript event? That's stuff like 'onclick' and 'onmouseover', in which you tell the computer what to do if these events actually happen. Let's start with 'onclick'. Onclick tells the computer what to do if a button is pressed (doesn't necessarily have to be a button, but...).
Now... 'onmouseover' is, as the name implies, when someone mouses over something. There's also onmouseout, so when you move your mouse OFF of something, a function is done. Onload and onunload will be dealt with when we get to cookies, so don't worry about those. There are also 'onfocus', 'onblur', and 'onchange', which have to deal with the focus of the page. There are onmousedown, which is when the mouse is held down, and onmouseup, which is when the mouse is not held down. Also, there is onkeypress, which is when a key on your keyboard is pressed. Onclick is when an element is clicked, and ondblclick is when an element is clicked twice. There is also onsubmit, which will be dealt with later. There are many more, but none of them are as important as these. Well, I've been bored recently, so I've decided to make a small code for you guys. Note that the password does not work yet. Feel free to tweak it. It is in version 2.7, and next time I show it to you, expect it to be more advanced.
That concludes the lesson on events! LESSON 29: The Detectives of JavaScript Spoiler: click to toggle I am going to make this lesson short and sweet. Got that? This is how to find errors in your script. They are called 'try...catch' statements.
If there is an error in the 'try' section, there will be a message, as done in the 'catch' section. Example:
Now, there's this thing called 'throw'.
So... That's all. One last chapter for you guys! It's on JavaScript OBJECTS... And then we'll move onto advanced JavaScript. LESSON 30: The Artifacts of JavaScript Spoiler: click to toggle I'll leave explaining strings to the experts (http://www.w3schools.com/js/js_obj_string.asp). 'Why?' you may ask. Because I don't feel like writing it Anyways, onto dates. (you may want to note that much of this chapter is only recap).
'Kay. That's all for dates. I won't go into this much, because it's not important. Just so you know, http://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock . Try it!
So... That's a boolean.
Go here for RegExp: http://www.w3schools.com/js/js_obj_regexp.asp That, surprisingly, concludes PART 5! Next, we move on to the FINAL PART (of HTML/CSS/JS. this guide will live on in the Python guide)! PART 6!!!!!!!!! Advanced JavaScript. PART 6: Advanced Javascript; The Difficulty: Holy Eff! Spoiler: click to toggle LESSON 31: The Bakers of Javascript Spoiler: click to toggle Wow... We've come so far. Can you believe it? Including this one, there are only three lessons left. Of course, as you will read further down, there are 'extra credit' courses in which you will learn about JQuery and other stuff. It will be cool. Anyways, here you will learn how to save data. First, though, we must learn how to GET data.
These are the datas you can show the user. Cool, right? Well, here's the stuff about 'cookies', or the data stored on your computer (written by W3Schools):
So... Yeah! Are you surprised that's all? Well, that's because there is not much to talk about... That's right, WE ARE NEARING THE END! LESSON 32: The Protectors of Javascript Spoiler: click to toggle
To validate an email address:
That's how to validate forms. If x==null || (remember, || means OR) x=="", then it will tell you that your first name must be filled out. That's all for this lesson, too! Now, I know some of you may be complaining about the shortness. You're right. It should be longer... BUT! I've decided to split this part into two so that I can end with 33 instead of 32, as it is a cooler number. LESSON 33: The God of HTML-Style Coding Spoiler: click to toggle The last leg of this race... Amazing, right? Well, as the title implies... There's one thing that is more important than all others. TIME. If you can't code time, when you begin to do actual coding with JavaScript, there is very little you can do. TIME. It's what truly makes the world go round.
The first part of setInterval() should be a function. The second part sets the time between each function. Note: There are 1000 milliseconds in one second.
That is how you clear the interval.
That is how to say when the function will be executed. Well... That's all! Anti-climatic ending, but who cares? Be sure to read the extra credit section! PART 7: Extra Credit EXTRA CREDIT 1: HTML DOM Spoiler: click to toggle All throughout JavaScript, you have been seeing stuff like getElementById. Well, HTML DOM has that. First, let me explain nodes.
So, a tag is a node. Throughout this lesson, I will be referring to them as such, even though they're the same thing. So, in HTML DOM, the concept is that HTML is a tree. This image, taken from W3Schools, shows it well; ![]() So, <html> is the 'root' node. It has no 'parent'. Inside <html> are its 'children' nodes, <head> and <body>. They are both parent nodes, as they themselves have 'children' nodes, such as <a href>, <style>, <script>, <p>, etc. <head> and <body> nodes are also 'siblings', as they share the same parent, <html>. A 'leaf' node is a node with no 'children'. Take this example:
<p> is a leaf node in this situation. This is not always the case, though.
In this case, <i> is the leaf node. Now, a long time ago, we talked about 'first child'. Remember? As in the first tag inside another tag, or in this case the first child node of a parent node. And also its opposite, last child. Those are also terms in HTML DOM. A property is something that gets or sets a value (i.e. the name or value of a node). A method is often referred to as something that is done (i.e. remove or insert a node). These are important too. getElementById("IDHERE").innerHTML is an example of a property and a method. x.innerHTML - the text value of x x.nodeName - the name of x x.nodeValue - the value of x x.parentNode - the parent node of x x.childNodes - the child nodes of x x.attributes - the attributes nodes of x Note: In the list above, x is a node object (HTML element). These are some properties. x.getElementById(id) - get the element with a specified id x.getElementsByTagName(name) - get all elements with a specified tag name x.appendChild(node) - insert a child node to x x.removeChild(node) - remove a child node from x These are methods.
Replace 'node', 'id', and 'tagname' with the correct words. Now, here we can stack things on top of eachother:
So this means all <p> children of anything with the id 'IDHERE' will have the function done to them. We already know how to use document.getElementById to change text, and we also already know about events, so I will end this Extra Credit lesson here. For further knowledge on nodes, check here: http://www.w3schools.com/htmldom/dom_nodes_info.asp EXTRA CREDIT 2: jQUERY Spoiler: click to toggle What is jQUERY? It is a simplified version of JavaScript, allowing faster typing of codes.
That is an example of jQUERY, taken from W3Schools. Note that I have never used jQUERY, nor do I plan on in the near future. This means ALL of my examples will be from them. EVERY SINGLE ONE. So, in this lesson, ALL CREDIT GOES TO W3Schools. I may slightly tweak their examples, but barely. What is the reason I do not plan on using it? You have to download it (http://jquery.com/download/). I'm the kind of person who doesn't like to download stuff. There are other ways, but I don't feel like it either XD The jQuery syntax is tailor made for selecting HTML elements and perform some action on the element(s). Basic syntax is: $(selector).action() A $ sign to define/access jQuery A (selector) to "query (or find)" HTML elements A jQuery action() to be performed on the element(s) Examples: $(this).hide() - hides the current element. $("p").hide() - hides all <p> elements. $(".test").hide() - hides all elements with class="test". $("#test").hide() - hides the element with id="test". There is an example of jQUERY stuff. Compare it to what you have to JavaScript, and you'll see why lots of people use it for quick programming. $("p") is a jQUERY selector. The 'p' defines the <p> tag, like in CSS, and the rest is just telling the computer 'hey! this is a selector!'.
Those are id and class selectors, respectively.
These are events. Notice how <button> is not <button onclick="insertfunctionhere">> Yes, like I have said before, jQUERY was built for being able to script quickly.
This is a brief example of hiding an showing on clicks. FINALLY, AFTER ALL THIS TIME, THERE IS AN HTML VERSION OF BBCode's [.spoiler] TAG!
'toggle' means you can toggle the spoiler on and off.
fadeIn is making invisible text appear at a slow/fast rate. fadOut is the opposite. fadeTo says to what point it fades.
This just tells how it appears.
That is for animation. Example:
This is for animation.
This is for callback. Well, that's pretty much it for jQUERY! See you next time on A Guide To HTML, JavaScript, and Relatives! Edited by Mr. Mewthree, Apr 21 2013, 11:30 PM.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mr. Mewthree | Apr 21 2013, 10:45 PM Post #4 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Respected
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
EXTRA CREDIT 3: AJAX Spoiler: click to toggle What is AJAX? It is the exchanging data with the server. This picture explains it well: ![]() It allows the server to update part of the page instead of reloading the whole page every time a button is clicked. To send a request to a server, we use the open() and send() methods of the XMLHttpRequest object:
There is also a 'POST' request instead of a 'GET' request, although 'GET' is used more often. 'POST' only needs to be used when; A cached file is not an option (update a file or database on the server) Sending a large amount of data to the server (POST has no size limitations) Sending user input (which can contain unknown characters), POST is more robust and secure than GET AJAX stands for Asynchronous JavaScript and XML, and for the XMLHttpRequest object to behave as AJAX, the async parameter of the open() method has to be set to true: xmlhttp.open("GET","ajax_test.asp",true); Sending asynchronous requests is a huge improvement for web developers. Many of the tasks performed on the server are very time consuming. Before AJAX, this operation could cause the application to hang or stop. With AJAX, the JavaScript does not have to wait for the server response, but can instead: execute other scripts while waiting for server response deal with the response when the response ready When using async=true, specify a function to execute when the response is ready in the onreadystatechange event:
You will learn more about onreadystatechange in a later part. To use async=false, change the third parameter in the open() method to false: xmlhttp.open("GET","ajax_info.txt",false); Using async=false is not recommended, but for a few small requests this can be ok. Remember that the JavaScript will NOT continue to execute, until the server response is ready. If the server is busy or slow, the application will hang or stop. Note: When you use async=false, do NOT write an onreadystatechange function - just put the code after the send() statement:
If the response from the server is not XML, use the responseText property. The responseText property returns the response as a string, and you can use it accordingly:
If the response from the server is XML, and you want to parse it as an XML object, use the responseXML property:
The following is EXACTLY taken from W3Schools; Spoiler: click to toggle The onreadystatechange event When a request to a server is sent, we want to perform some actions based on the response. The onreadystatechange event is triggered every time the readyState changes. The readyState property holds the status of the XMLHttpRequest. Three important properties of the XMLHttpRequest object: PropertyDescription onreadystatechangeStores a function (or the name of a function) to be called automatically each time the readyState property changes readyStateHolds the status of the XMLHttpRequest. Changes from 0 to 4: 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready status200: "OK" 404: Page not found In the onreadystatechange event, we specify what will happen when the server response is ready to be processed. When readyState is 4 and status is 200, the response is ready: Example xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } Try it yourself » Note: The onreadystatechange event is triggered five times (0-4), one time for each change in readyState. And, that is all! Next is my first two-parter Extra Credit, and I plan to cover it in depth, unlike I did with jQUERY and this. Most of the stuff will be my own and not W3School's. EXTRA CREDIT 4: HTML5 Part One Spoiler: click to toggle What is HTML5? The year I was born, 1999, was when the previous version of HTML came out, and now, over a decade later, HTML5 is here. It is an improved version of HTML, with many new tags like this one; <canvas>. What is <canvas>? That will have the whole of part two dedicated to it. In the meantime, here is a guide to the changes; First, it is important to know which tags no longer work.
You may recognize a few, such as <acronym>. The <acronym> tag was basically the same as another tag we know. Do you remember what that tag was? If you do, I thank you for reading my guide thoroughly. Now, some new elements are;
A lot, right? Feel free to experiment with them, as I will only explain a few. One of the few new things I will explain is the drag and drop feature (example taken from W3Schools).
When you run this code, you will see that you can move the image around.
that makes the image draggable. Set it to false to make it undraggable. Now, another example taken from W3Schools;
You can probably guess what this does, but I'll tell you; It finds your position.
You can show the position in a map. Now, on to the video tag;
Things surrounded by __...__s are what you replace. Btw; MP4, WebM, and Ogg are video formats. Only Chrome supports all formats, so you're best off giving multiple <source> tags inside the <video></video> tags, one for each format. About the 'controls' attribute; that allows the user to play/pause/etc the video. The <audio> tag is pretty much the same, but the formats you can use are MP3, Wav, or Ogg. <audio> is, as the name implies, sound-only. Now, on to a replacement for Cookies; With HTML5, web pages can store data locally within the user's browser. Earlier, this was done with cookies. However, Web Storage is more secure and faster. The data is not included with every server request, but used ONLY when asked for. It is also possible to store large amounts of data, without affecting the website's performance. The data is stored in key/value pairs, and a web page can only access data stored by itself. Sadly, I don't fully understand the concept. Go here for more info on it:http://www.w3schools.com/html/html5_webstorage.asp There are more things, but I won;t go in to them. In the link provided earlier, you can look around for other things I didn't go over. Now, on to Canvas! EXTRA CREDIT 5: HTML5 Part Two Spoiler: click to toggle Here we are... The final Extra Credit... On to CANVAS! What is <canvas>?
That is the coding for a canvas. In between the opening and closing tags goes what the computer says if your browser does not support <canvas> So... What does it do? First, let's make the canvas visable to a
Now there is a border around it. Now, on to what it does; it draws. Yes, to draw an arm, you have to do a complex code that would be harder than in real life... Just to draw a line would be harder. So, why do we want to use the canvas? There are many reasons, which I will not explain, but you will be able to see as this lesson goes on. Note: All drawing must be done in JavaScript, not HTML. Like so:
So, yes. The first two lines are what you must always have at the beginning. The second two are just drawing a rectangle. Now, this is very important: The Y Axis is really in negatives. A value of 400 would be 400 pixels below the topmost border.
This is how to draw a line. The moveTo part is where the beginning of the line is, and the lineTo part is where you draw to. If you put two lineTos instead of just one, the second line will start from the end of the first one. To fix this, do 'moveTo' 'lineTo' 'moveTo' 'lineTo'. The stroke part is telling the canvas to draw the line. if you put 'ctx.strokeStyle="color here"' before it, the line will be in a different color.
This is an example of an arc. Experiment with the numbers to see what they are.
This is just ordinary text. If you want the text to be hollow, do 'strokeText' instead of 'fillText'. This is a gradient:
And this is a radial gradient:
And for an image:
This is how to make text have a shadow behind it. In shadowColor, if you add a fourth number (it can be any number inbetween 0 and 1(so decimals)), you can set the transparency of the shadow. To blur the shadow, add this line;
The number says how blurred it is. It goes from 0 to infinite, the higher the number, the more blurred. (999999999 would get VERY blurred...) Believe it or now, this is finished! Note: Currently, there are 33 main chapters, 5 extra credits, and 4 Imaginary Ponies (below). 33+5+4=42! My guide is the meaning of life! IMAGINARY PONY IMAGINARY PONY IMAGINARY PONY IMAGINARY PONY Check my new Python guide to further your coding career![/spoiler] Edited by Mr. Mewthree, Apr 22 2013, 11:48 PM.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mr. Mewthree | Apr 21 2013, 10:45 PM Post #5 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Respected
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Before we start, I recommend you read my previous guide (of HTML, JavaScript, and others). It would be good to know how coding works before beginning to read this guide. There is a reason I'm continuing lesson/part numbers from my old guide. And, while the lessons are not really worthy of the difficulty 'Holy Eff' yet, I still stuck that label on, to scare away viewers It is really in the 'advanced' difficulty.A brief word on my 'difficulty' system: Spoiler: click to toggle Rules: 1)After a difficulty in one lesson has been set, the rest of the lessons stay in that difficulty 2)Extra Credit lessons have veto power over rule 1 3)Difficulty is also based upon how much you have to learn at once, and how much is already in your head that you have the possibility of forgetting 4)Extra Credit lessons have veto power over rule 3 5)I have veto power over rules 1-4. Note: Difficulty may not always reflect the true difficulty, as, as seen in rule 3, there are multiply factors I consider. Part 8: Monty Python's Flying Circus Difficulty: Holy Eff Spoiler: click to toggle LESSON 34: An Introduction to Python Spoiler: click to toggle Hey! I'm back! Did you miss me? Probably not, but... Anyways, let's get started on Python. Believe it or not, it was named after the skit Monty Python's Flying Circus.
This tells the computer to say 'Welcome to Python!'. That's the most basic thing EVER. Now, on to variables. Guess what... To declare a variable, you: VARIABLENAME=VARIABLEVALUE! So, for example:
The best part is, you don't have to stick 'var' in front, like in JS! Now, remember booleans? Python has the same type of thing, only slightly different.
I have now set the variable to 'True'. You can also set it to 'False'. Never use quotation marks (' or ") with booleans, and always capitalize the first letter! Python is case-sensitive ( There are three data types in Python that are important ATM: integers (whole numbers), floats (fractional numbers written with a decimal point, like 1.970), and booleans (which can be True or False). I will skip floats, because those are just integers with decimals. Now, what if you want to change the variable?
That is the original 'myvariable'. To change it, you simply need to re-declare it.
Now, to conclude this introductory lesson, I will talk about whitespace. Whitespace is very important in Python. Since we haven't learned things that need whitespace, I will go over this more indepth later. Basically, though, it's the {}s of Python. In JS, {} represented being inside a function. Now, whitespace does. Whitespace is just the 'tab' key being used. And this concludes lesson 34! Come back next time on Monty Python's Flying Circus! LESSON 35: The Python Strikes Spoiler: click to toggle Let's start this lesson off with comments. In JS, a single-line comment was //. Now, it's #. To do a multi-line comment, start and end it with three double quotes ("""). Now, on to math... again. Instead of just assigning one number to a variable, you can assign an equation!
So, the variable MyEquation equals 3! The symbols are:
What is modulus? I didn't go into it much on JS, but it can be very important, for reasons explained in a later chapter. Modulus is the REMAINDER. So, if 6/3 is 2, the modulus is 0. 7/3 would have a modulus of '1'. I know that these lessons are really short. Bare with me so that we can get to the good stuff. LESSON 36: Strings & Friends Spoiler: click to toggle I mentioned strings earlier, right? Remember in JS, when you could assign a variable a sentence, such as;
You can do the same in Python.
But, WAIT! The word 'aren't' would mess up the string, turning it into:
To fix this, but a backslash (/, like in JS) in front of the apostraphe.
Another way to fix it is to make sure the surrounding quotes are a different kind of quote (" as apposed to '). Of course, if you contain both types of quotes in your string, that method would not work. Another thing about strings:
What this means is that Fred is equal to the sixth (counting starts from 0, so 5=6) letter in the variable 'Joseph'. Be warned, though. This code;
Would giva a result of the fifth letter of the WORD Joseph, not the variable, as it is in quotes. Now onto len(0 and the others.
What is 'len()'? It finds the length of the variable, in this case 'me'. So len(me)=4. Now on to lower() and upper().
Prints the variable 'me' in all lower case. Note how, instead of the variable name being in parentheses, it is in front of the dot, and that the whole thing is in parentheses following 'print'. 'upper()' is the same thing, but in all uppercase. Now, on to str(). What does str() do? It makes a non-string (such as a float or a boolean) into a string! For example:
So the computer prints True as a string, instead of boolean. Note that it has the same format as len() Now, remember in JavaScript how you could add two strings together? You can do the same;
It prints 'hi!yo!'. By the way, strings are not modifiable. So, unlike floats, booleans, and integers, you can not change their value by re-defining them. You can, however, have variables within a string.
Don't confuse the '%' symbol (the symbol being replaced with the variables) with the modulus! LESSON 37: Control Flow & Conditionals Spoiler: click to toggle What is the 'control flow'? It's the order that things are done! Control flow allows us to have these multiple outcomes and to select one based on what's going on in the program. Different outcomes can be produced based on user input or any number of factors in the program's environment. (The environment is the technical name for all the variables—and their values—that exist in the program at a given time.) I won't go in to too much about this.
These are comparators. They're exactly the same as in JavaScript, but without '==='. Boolean operators (or logical operators) are words used to connect Python statements in a grammatically correct way—almost exactly as in regular English. There are three boolean operators in Python: and, which means the same as it does in English; or, which means "one or the other OR BOTH" (it's not exclusively one or the other, the way it often is in English); not, which means the same as it does in English. We want to stress this second case to you: If Bobalina says to choose vanilla or chocolate, she probably means "one or the other, but not both." Python, on the other hand, would be totally fine with your picking both, so long as you don't pick neither. So, that means you actually finally get to USE ENGLISH in your code!
would result in the boolean 'True'. Change the values to make it incorrect to get 'False'. You only have to make one wrong to make the whole thing False.
would still equate to True, even though the second statement is false.
would equate to True, as 100 is not less than or equal to three. If you slap an extra 'not' on a not statement, you get a double negative, and this it is the same as not putting anything in front. Here is where it gets really complex:
You can group them together! So, this one says 'False, OR False(not True) AS WELL AS True'. It equates to False. You can also use parentheses, so
So, this one is saying 'True, AS WELL AS (True and/or True)', which means True, AS WELL AS True, which equates to true. It works like PEMDAS (math term for the order of operations. If you don't know it, or PEDMAS (same thing), you are probably failing in school...). LESSON 38: Else and If's Brother; Elif Spoiler: click to toggle Do you remember if..else statements from the JS tutorial? Before we talk about Elif, let's talk about the minor changes the program went through in Python. In JS, it was;
Now, in Python, it's
TAKE NOT OF THE INDENTATIONS! THEY ARE THE SAME AS {}S IN JS! Okay, so notice how there are no {}s, and instead there are indentations. That is 'whitespace'. If you don't remember it, check lesson 34. Also take note of the colon(:) in the code. So, nothing major, right? Correct. It isn't very different. It's so similar, that it's easy to get confused. I apologize in advance if I accidentally do an example with JS. So... What is 'elif'? It's the 'else if' statement of Python.
These lessons are short, I know, but it's all because we're getting ready for a NEW DIFFICULTY! To be honest, I've spent more time thinking of its name then of this guide... XD LESSON 39: Functions... The Last of the Holy Effs. Spoiler: click to toggle Lesson 40 will begin with 'time'. But, until then, we must do functions. So, what are functions? Actually, a better question; In PYTHON, what are functions?
Is a good example. The 'def' part is the same as the 'function' part in JavaScript, the 'tax(bill)' part is EXACTLY the same. I never really went over things in parenthesis in a function name in JavaScript, and I won't go over it now, either :P. Basically, though, the thing inside the parentheses is the 'parameter', or the variable(s) allowed in the function. I could have just as well wrote:
I mainly added the 'bill' to confuse you :P. Other than the 'def' part, Python functions are EXTREMELY similar to JavaScript. Now, because some of you may be freaking out because I haven't explained the () stuff, here's an example of another way it can be used:
Note that when the function is CALLED (as in where it says 'def square(10)), it has 10 in the parenthesis. So, FOR THIS FUNCTION ONLY, n=10. If you did:
It would call the function twice, but in the second one n=11. For a bit more on functions:
This is a function inside a function. In deserves_another, it says the answer of one_good_turn plus 2. Now, a bit on modules; A module is a file that contains definitions—including variables and functions—that you can use. It would clutter up the interpreter to keep all these variables and functions around all the time, so you just import the module you want when you need something from it. To do this, do
A good example of a module is the module 'math'.
The 'sqrt' means 'square root', and is part of the module math (meaning sqrt doesn't work unless you have 'math.' before it, and have imported 'math'. But, what if we don't want EVERYTHING from the math module. What if we JUST WANT sqrt.
This says 'from module 'math', import function sqrt'. Now, what if we want EVERYTHING from math, but don't want to have to type 'math.' every time?
So, now, instead of math.sqrt(9), we can do sqrt(9). The problem is, what if we already have a function 'sqrt', and we do this? If we did it the first way, nothing bad would happen, but if we do it this way... You'll have two functions with the same name! So, be careful! There are some functions that are built-in, and do not have to be imported. One such is max().
This would print '3', as it is the biggest, or 'max' number in the list. Another built in function is min(), which is the opposite of maximum. There is also abs(), which gives the ABSOLUTE VALUE of the numbers (aka the distance away from zero. So, 10=10, and -10=10). The last one for now is;
Type() gives the TYPE of data in the brackets. So...
would be 'float'. This concludes our lesson! LESSON 40: Lists and Dictionaries Spoiler: click to toggle Remember how I said we would learn time? I LIED. We're learning lists and dictionaries :P. But don't worry, time will come next chapter. I just felt like I should do these first, since they don't belong in the new difficulty, which I will call 'Multiple Code Illiteracy Syndrome Cure'. Why is it named that? Because in that difficulty, you will make it to the end of Python. Yes, Python will only have 50 or so chapters. After Python, I will probably move onto a different code, depending on how fast CodeAcademy adds a tutorial for them. Anyways, what are lists? They are basically arrays from JavaScript (I know I didn't go over these much either. You may have noticed I skimmed few a lot in my JS tutorial. That was because if I hadn't, you would barely learn a thing in this tutorial).
So, if the if the length of the LIST is greater than 3, the program prints what it says. The [0] is the number of the item in the list (like arrays, lists start at 0 instead of 1). When replacing an item of the list, you do so;
So... Now the list is ["pangolin","cassowary","hyena","ELMO"]. Soon, it came time to add the tiger back in, but ELMO did not want to leave. So, they had to ADD an animal area. To do so, they;
And, that's how you add to a list!
What this does is assign the variable 'my_slice' to the second and third items on the list... Wait, it says my_slice = my_list[1:3], not [1:2]! Well, the second number is the number it ends BEFORE. Also...
Run this code and see what it does! Now, on to for...in loops.... In the same LESSON! For...in loops are a major part of strings, and thus are included with them. An example of a pythonified for...in loop:
Tada! So...
A good example is;
Note that 'number' is not really a variable, but part of the code. For all 'numbers' (as opposed to strings) in my_list: do this. A dictionary is similar to a list, but you access values by looking up a key instead of an index. A key can be any string or number. Dictionaries are enclosed in curly braces, like so: d = {'key1' : 1, 'key2' : 2, 'key3' : 3} This is a dictionary called d with three key-value pairs. The key 'key1' points to the value 1, 'key2' to 2, and so on. Dictionaries are great for things like phone books (pairing a name with a phone number), login pages (pairing an e-mail address with a username), and more! So, these are dictionaries. I'm not going to go into these at all (pretty much the same as lists), so this lesson is FINISHED! Actually... No. I just have to say;
is how you add a new thing to the dictionary... Okay, that's all! On to time! Difficulty: Multiple Code Illiteracy Syndrome Cure Spoiler: click to toggle LESSON 41: Time (Without the 'ing) Spoiler: click to toggle
Remember the modules part? Well, this module gets the date and time.
That prints the time. Notice how it has the date, and then the time of day? (the final few digits are less than a second's worth, so don't worry about them. Now, what if you want it more organized? The first step is
Now it shows the month, day, and year, in that order (although on different lines). Play around with it if you want. You should have played around with it by now!
This is a result you could have gotten, that looks good! For the grand finale...
And there you have it, folks! LESSON 42: The Spoiler: click to toggle It took forever... But we're here! We've found the answer of Life, the Universe, and Everything! Now to find the question... (reference to the books. Bet most of you didn't know that in the books, the people don't even know the QUESTION... Only the answer. But I'll spoil it for you; The question is 6 X 9. If you are good at math, you may think I'm dumb, but I'm only saying what the book says...) So, anyways, let's make our very first game. It's going to be a choose-your-own-adventure. In the end, it should look like; Spoiler: click to toggle Did you really think I was going to spoil it? Anyways, if you create it along with me, this will probably be the first game you've ever built. First, though, I must explain input(). Input() is a function that gets the user's input. Nothing special. So:
Would mean it would print the first line, wait for you to respond, and then print the second.
So, this is some code I made... It's just printing stuff now. Let's add some input. IMPORTANT NOTE!!! Zetaboards does not show multiple whitespace, so you'll have to add it yourself before playing the code.
Notice how there are no more functions (def)? For now, let's forget about them, and add them in later. Note: Whitespace will not be preserved, but there is whitespace in the while loop. That brings me to my second point. What is a 'while' loop? We haven't even learned a for loop!
In this case, for loops are quite different than in JavaScript... Or are they? Actually, in Python, the 'for' loop is basically the 'for...in' loop from JS! So, this example is: For variable 'thing' in this list (making everything in the list assigned to 'thing'), print I really like ____. Not to hard, right? Now, for the while loop:
That's saying as long as thing1 is not as big, or bigger, than thing2, perform code below. You can also do more complex math equations, such as
See... Complex! XD Test: can you give me the answer of the first part, ignoring the thing1 part? (35456/97**) Now, we're all caught up! Wait... What do I mean by that? Well, I mean that there will be no new Python... But this Choose-Your-Own-Adventure ISN'T COMPLETE YET!!! Well, I leave that to you. If you create a cool one, I'll mention your name here! Now, on to Ruby! Oh, one last thing; I will come back to Python later. Part 9: The Gemstone of Programming Difficulty: Multiple Code Illiteracy Syndrome Cure Spoiler: click to toggle LESSON 43: An Introduction to Ruby Spoiler: click to toggle What is Ruby? Well, Ruby is a computer programming language (duh). It's goal is to make it easy to read. So, what do we do in Ruby. Well, Ruby is VERY similar to Python... I mean VERY... At least, in the beginning, that is. For example, you declare a variable by;
So, EXACTLY the same as Python. Now, let's go over data types in Ruby; Integers, Booleans, and Strings. Integers are the same as Python, and so are strings. Booleans are NOT CAPITALIZED. That is the only difference. Now, let's quickly go over comments. A single line comment is the same as Python (#). A multiple line comment is quite different, though.
So, there you have it, folks! So, how do you make the computer talk? Well, that brings me to another point. Ruby is an INERPRETER LANGUAGE, like Python, and unlike Javascript. Anyways, to make the computer talk:
Now we start to get separated from Python. If you did:
It would return Yo!Joe. To make it go on different lines, use 'puts'. That looks like this:
Now it works. These are the basics. Next chapter, we cover built-in functions. LESSON 44: Built-in functions of Ruby Spoiler: click to toggle Hi! So, let's say you did the variable Joe, and made it equal Yoyoyo! (Joe = "Yoyoyo"). What if you want to make it all caps?
Thate would return YOYOYO, as .upcase makes the whole thing upper case. There are also '.downcase', which is self explanatory, and '.capitalize', which makes the first letter capitalized, and the rest lowercase. Now, if you did:
It would actually return: Yoyoyo YOYOYO So, what you want to do is say
The '!' makes it get rid of 'Yoyoyo'. Now, what if you want to find the length of the string "aehsrthnsrhaerdtardhjadrhtaerhjare"? To do so, you use '.length'. Now, what if you typed in "ehT" instead of "The", for some weird reason. That uses the '.reverse'. I know this chapter is short, so I'll stick the math operations here as well.
Yes, they are the same as Python. Now, in a normal program, if you typed in '7', it would read '7' as a string. You will need to use the Integer(7) to make it an integer. What I mean by this is, if you ask for user input (we'll get to that later), and they respond with seven, and you have it set up so that it has a math equation to do with seven, it would not work. If you simply assigned a variable the number, (without quotes), without asking for user input, it would be okay. One last thing: To do multiple things such as .reverse and .capitalize, simply do "Joe".reverse.capitalize.upcase. Now, most of these cancel eachother out, so why bother? Because .capitalize.reverse would capitalize the first letter, AND THEN flip it around. Therefore, the last letter would be in caps. LESSON 45: If Else is not If, _______, Elsif, ________, Unless Else and If = Elsif**2 Spoiler: click to toggle Complicated title, right? First, I want to do a quick explanation of how to get input from the person using the code.
So, in a code, it would look like:
The problem is, every time you get input, it leaves a blank line below (leading to a very spaced out code). To solve this problem, use the '.chomp'.
Now, on to If, Else, Elsif, Unless.
That is an 'if' statement. Notice that, unlike Python, you end the if statement with 'end' on a seperate line, and that you don't need a colon. Another difference is that in Ruby, WHITESPACE IS NONEXISTANT. YOU DON'T NEED TO WORY ABOUT IT! So... Yeah. But, developers use them to make the code more readable. Adding whitespace DOES NOT MESS UP THE CODE. So, the 'if _____' gets its own line, and the 'end' gets its own line. Those are the things you should know the most.
So, else is the same, except for the fact that it doesn't need a semicolon either. Notice end is at the VERY end of the statement. There isn't a separate end for IF and ELSE. Now, elsif is 'else if'. So, if not this, check if it is this. If not, do else.
So... Yeah. There is one last thing, 'unless'.
unless checks to see if the statement is false. So, in that code, if I am not awesome, the 'unless I Am Awesome' line will run. That concludes else/if/elsif/unless! LESSON 47: A Mini-Lesson on Equality Spoiler: click to toggle Today, we will learn about equality (again). This lesson will be short! We all remember ==, =, and !=, right? Well, they're the same in Ruby (and so are <, >). I recommend veteren Javascripters/Pythoners skip this lesson. For those with bad memories, carry on!
So, yes. How did you like the table I made? I HATE doing those, so be proud XD. Anyways, next chapter we will go in-depth about booleans! LESSON 48: Mini-Lesson on Booleans, And, Or, and Not. Spoiler: click to toggle So, we all remember booleans, right? True/false? Wow! Because we went through JS and Python first, this is all a breeze! Remember from Python the and/or/not operators? They're back. Quick review:
Where and meant both, or meant one, the other, or both, and not meant one and not the other. In Ruby, they are:
So, && takes the place of and, and || is or. In 'not', it was changed differently. In '!Joe==Fred', I was saying 'Not Joe equals Fred', or 'Someone other than Joe is Fred'. By adding the '!' in front, you make Joe turn from the boolean 'true', to the boolean 'false'. Review this lesson in Python if you're lost, because we're moving on! LESSON 49: How To Spoiler: click to toggle So, most forums have a censor in place, so that you can't say bad words. Its possible to do this in Ruby. So, let's say a politician (I'll use Paul Ryan as an example. I have nothing against him, but I need to 'borrow' his name for a second) made a contract with you. Surprisingly, they had added stuff in you didn't want, without you realizing it. You need to change it, right?!? Ruby to the rescue! Let's say your contract with Paul Ryan was supposed to be about giving Aardvarks voting rights, but instead he made it about giving penguins voting rights (this would make it a bill, not a contract, but lets ignore the details!). And the contract is 5027.6 pages long! What do you do? You substitute the word penguin for the word aardvark! To do so, first do this!:
So, the variable 'user_input' equals whatever you put in. The second line makes it so that the variable user_input's string is in all lowercase. That last line is just for the simplicity of coding (if you can tell me why, you would be smart!). Just FYI, the whole document would be in lowercase, then, even the things you need to be capitalized! You could claim that Paul Ryan has bad grammar too! (sorry, Paul XD). Well, anyways, how do we substitute 'penguins' for 'aardvarks'?
The .include? part just checks to see if there is the word penguin (it would find 'penguin' in penguins, penguinification, etc). The second part, .gsub!(/penguin/, "aardvark"), tells the console to replace (.gsub!) penguin (/penguin/) with aardvark ("aardvark"). So, .gsub! starts the replacement, the /_____ /s declare if it shall be replaced, and the "______" says what string should go in its place. So, you then get sued by Paul Ryan because you violated the contract, but then you show this new one here! But, you'll get caught (good ol' Paul would have a copy of the document), and spend time in jail! The moral of the story: LESSON 50: Loops, Part One Spoiler: click to toggle Loops! Loopity loopity loop! First, lets start with the 'while' loop.
This code says 'counter is equal to one. as long as counter is equal to a number less than five, print what counter is. After doing so, counter is equal to itself plus one.' This is pretty much the same as Python! Now... For a WHOLE NEW type of loop... I feel like we haven't had anything new for a while now! Anyways;
Simple. It is simply the opposite of the while loop. Instead of saying 'while counter < 8', you could put 'until counter > 7'... So... yeah... I guess it isn't new... Now I'm depressed. But... Do we really want to type in 'counter = counter + 1' all the time? Remember from Python the other assignments operators I haven't mentioned? These:
Back to the classic 'for' loop: for num in 1...10. What this says to Ruby is: "For the variable num in the range 1 to 10, do the following." The following was to print "#{num}", so as num took on the values of 1 to 9, one at a time, those values were printed to the console. The reason Ruby counted to 9 and not 10 was because we used three dots in the range; this tells Ruby to exclude the final number in the count: for num in 1...10 means "go up to but don't include 10." If we use two dots, this tells Ruby to include the highest number in the range. To be continued in Part Two! LESSON 51: Loops, Part Two Spoiler: click to toggle So, why are chapters getting shorter, you may ask? Well, there is less stuff to learn. Plus, if I write less stuff in a chapter, then you are less likely to be overwhelmed by code. Nice of me, right? Well, on to coding! To start, we need to learn the 'loop' loop. Yes, there is a loop called a loop.
So, let's take a look at this. I=0 is outside the loop. It says 'the variable I is equal to zero'. Then, the loop begins with 'loop do'. That is declaring the loop. Then comes I +=1 (remember that?). Then, it prints the variable 'I'... Oh! I haven't showed you how to print a variable. Well, just do #{varnamehere}. Back on topic; the 'break if' part is basically an inverse 'if' statement. So, instead of
It is simply 'break if i > 5'. It doesn't even require an 'end'! (the end you see there is ending the 'loop do', not the 'break if'.) Now, let's spice this up a bit!
In the 'loop', it says i now equals one less than before. Then, if the remainder of i and 2 is 0, print I. If not, start again. Break the loop when I is equal to or less than zero. YOU CAN HAVE INFINITE NEXTS! LESSON 52: Arrays Spoiler: click to toggle Remember arrays, right. In ruby, an array is NAMEOFARRAY = [x,y,z]. Just like Python. Now...
Ignore the second one. Let's talk about the first one. I'll give an example.
The code will then print 8,9,85. Why? When putting the x in |s, combined with '.each', you are saying that X has a value of each one of those. Then we increte x by 7. See it now? Now, what it, for some reason, we needed to print the new array 27 times?
See why? It's pretty obvious, but I won't outright state it... And, surprisingly, this lesson is done! We will do more on Arrays next chap! LESSON 53: The Beginning of The End of The Beginning of Ruby Spoiler: click to toggle In this lesson, we will learn about a few stray things left out in previous lessons, and more data structures. This is the second-to-last chapter until we go back to Python! So, first, I will teach you how to turn one string into two! Or more!
In the code above, it will split the string into a new string every time it sees a ','. Play around with the thing in ("s to see what you can do!. Now, on to calling one variable in an array!
That code will print "this is 0". That is because you are telling the computer to print the 0th part of the array (it reads te 1st part as the 0th, 2nd as the 1st, and so on. Kinda like how the 1st floor in French translates to rez-de-chausse, and the second floor is litterally called the first floor). Now, in arrays, you can put variables, integers, etc! ANYTHING! And that also means you can have an ARRAY WITHIN AN ARRAY! Fyi, it's called a multidimensional array.
That is a 'bi(2)dimensional' array. You can also have tri(3)dimensional, and so on. Arrays within arrays within arrays within arrays within arrays! Now... On to hashes. What are hashes? They are like dictionaries from python. An example:
So, the => sign says that you are assigning the key the value on the right side. Not very special.
There's a couple of new things there. the 'Hash.new' part is another way of creating a hash, without outright declaring it. Then, the second line is saying, in the variable newhash (which is a hash), create the key 'mewthree'. Then, give it a value of awesome. The second line also works when making the hash the first way I showed you. Now, if you want to SHOW the value of the hash, do
The first part, hash.each, is saying in the variable hash, do the '.each' built-in function. Then, in the brackets, the things within the |s are the key and value, and the next part is just telling the computer to put it down. For example, I could;
And that concludes this lesson! I know it was kind of sloppily put together, but... LESSON 53: The End of The End of The Beginning of Ruby Spoiler: click to toggle This chapter would be more aptly named 'The Methods of Ruby', but I like this title better. Anyways, this chapter is all about methods (new terminology!!! Or is it? Actually, it isn't. It's just the Ruby name for JS/Python functions. Note: I will often mix up the words, so know that they're synonyms!
Same syntax as Python, but with an 'end' at the end. Now, to call the function, you do nothing special! Where you want it to be called, just type the function's name! One last thing on that function; Notice how the name of it doesn't have parentheses? They don't need them, but if you have parameters, you can have them.
This code shows the use of parameters. square(n) is not the name of the method, but square is. (n) is the parameter. When we called the function, we set the parameter. (as seen when, instead of 'n', 12 was put). I know this lesson was short. It was supposed to be. Let this info sink in... And then we'll return to Python! LESSON 54: The End of the End of the End of Ruby Spoiler: click to toggle I lied ![]() We're not going back to Python just yet! We need to FINISH Ruby! Well, what am I going to do? I've covered the basics, and I probably won't go into the advanced... EVER. What is this lesson here for, then? That's simple. Four score and seven years ago our fathers brought forth on this continent a new nation, conceived in liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation, so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we can not dedicate, we can not consecrate, we can not hallow this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us—that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion—that we here highly resolve that these dead shall not have died in vain—that this nation, under God, shall have a new birth of freedom—and that government of the people, by the people, for the people, shall not perish from the earth. In other words, this lesson is here to force you to memorize good ol' Abe's speech. Le fin de Ruby est maintenant. (The end of Ruby is now.) Part 10: The Return To The Circus, and Other Related Stories Difficulty: Multiple Code Illiteracy Syndrome Cure Spoiler: click to toggle LESSON 55: To End on a Good Note Spoiler: click to toggle I've said pretty much all I am here to say. So, what is THIS chapter for? This is not for Abe, but for you. What will keep you doing coding after this guide? Well, be sure to check out my next guide. But, what about Python? Sure, you'll continue coding, but will you continue Python? The answer, my friends, lies within my choose-your-own-adventure. That's pretty much all you can do with what I've taught you. But, it's fun. I've been working on mine for 21 hours total, over the course of a week. I'm only 1/6th of the way through. Yet the hope of creating a game keeps me going. My point is; continue Python. It's fun. (note: this lesson may seem dramatic, but its really only here to let me end at a nice 55! No 'extra credit' here, folks. We're moving straight on to my next guide! |
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mr. Mewthree | Apr 21 2013, 10:46 PM Post #6 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Respected
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
What is Processing? The dictionary definition is good for the verb, but I'm talking about the PROPER NOUN. So, yeah. After this guide, there'll be a HUGE break inbetween my guides, unless by chance I come across a new language. By 'huge', I mean I won't do another until AT EARLIEST December. Okay, on to the essentials. To get started, you MUST have downloaded the application from: http://processing.org/ Now, you don't actually have to do my Python guide before this, but I highly recommend you at least know Javascript and HTML5 Canvas (from my first guide). As you may have noticed in my Python guide, I am no longer spoonfeeding you. After learning one or two languages, another should be easy. Part 11: The Artist to Python's Author Difficulty: Multiple Code Illiteracy Syndrome Cure Spoiler: click to toggle LESSON 56: An Introduction to Processing Spoiler: click to toggle What is Processing? It is a hands-on code mainly used for drawing. Let's start with making a simple circle.
Type that in to the Processing editor that came when you downloaded processing. Now, if you know HTML5 Canvas, you should be able to pick this apart easily. I will tell you what it does, though, as not knowing this is not knowing your periodic table and then trying to make oxygen a positively charged ion.
This defines that we are making a circle.
This is WHERE the circle is. X axis of 50, Y axis of 50.
This is how big the circle (henceforth referred to as ellipse) is. So, by saying 80, 80, we are making the ellipse a perfect circle. It is 80 wide, 80 tall. Changing that makes it an oval. Now, let's draw a line.
'line' declares the line. The first two coordinates are the starting point, and the last two are the ending point. Only knowing this much, you can already MAKE A HUMAN! Whoooooooo! See, Processing is easy to learn. Now, on to the next lesson. LESSON 57: A Crash-Course To Prepare You For Game-Making: Spoiler: click to toggle In this lesson, I will briefly explain the first step to game-making. So, when we made the line and the ellipse, the screen size was determined by the shape we made. Now, we shall set custom screen sizes.
That declares that the size of the screen is 400 by 400. Easy, right?
In this, I've introduced two new elements. 'stroke' and 'background'. To explain those, I also have to explain colors. Remember in CSS when you could do a color using RGB values? This is the same. 255 is the max. So
255 is the maximum, and 0 is the minimum. Now, in school, you may have been taught that layering colors on top of each other creates the color black. So '255, 255, 255' would make black, right? WRONG. There's a whole scientific explanation for that, but I'm going to gibe you the 'dumbed down' version. If you shine a red, green, and blue laserpointer at each other, the point where they intersect is 'white light'. In essence, light on top of light on top of light creates white (it rhymes!). I'm a science geek, so I'm really tempted to give you a full explanation on this, but I won't. So, basically 255, 255, 255 is WHITE. 0,0,0 is BLACK. Now, I'm going to 'translate' the code. [/code] By putting stroke there, it is saying that the line drawn below it will be 'stroked' in that style. 'Background' is self explanatory.
Two new things, 'void' stuff, and mouseX/Y. I'll start with void. That's basically a function. I'll get into that later, but you should know JS if you read my first guide. This code should be readable for an experienced programmer. Words taken from the processing website that aptly describe what setup() and draw() do: Spoiler: click to toggle The setup() block runs once, and the draw() block runs repeatedly. As such, setup() can be used for any initialization; in this case, setting the screen size, making the background orange, and setting the stroke color to white. The draw() block is used to handle animation. The size() function must always be the first line inside setup(). Now, for 'mouseX/Y': That is... *drumroll* THE COORDINATES OF THE MOUSE! With this, you can DRAW! Congrats! Now, what if you want something to happen when you press a mouse? Most programs will use the setup() and draw() blocks. More advanced mouse handling can also be introduced; for instance, the mousePressed() function will be called whenever the mouse is pressed. In the following example, when the mouse is pressed, the screen is cleared via the background() function:
mousePressed() activates when you press the mouse. Run it to see what this code does!
Before we go on, I just want to clarify something. When you want something in the middle of the screen, look at the code above ^. Width/2 (width divided by two) will put it in the middle width, and height/2 will put it in the middle height. You can also do eight/4 and stuff. And now, on the the next lesson! LESSON 58: Drawing Spoiler: click to toggle In this lesson, we will slow down and go over drawing different shapes, and things you can do with them. The point is the easiest.
Replace x and y with the coordinates, and you have a point! We've already gone over lines, so I'll skip them. We're now on to 2D objects, as apposed to a 1D line and a 0D (what? '0' D?) point. A rectangle is made as so:
Now, the starting coordinates you put in don't place the center of the rectangle, but the topleft CORNER. To make it draw from the center, do;
CAPS ARE IMPORTANT Also, if you want to change it up a bit, you can define where the topleft and bottomright corners are, instead of the center or just one of them.
topX and topY are defining the topleft corner, and the others are defining the bottomright. Of course, you could make the topleft corner the bottomleft by making it below the bottomright. Now, ellipses are made from the center. If for some reason, you want it to be the corner of the ellipse, do;
How do you have a CORNER of an ellipse, though? I could explain it, but I'll use this diagram: Spoiler: click to toggle ![]() Also, you can make it from both corners.
LESSON 59: Colors Spoiler: click to toggle Spoiler: click to toggle ![]() That is the 'color wheel'. Today, we will learn how to exploit it. First up is greyscale colors. That is when you do something like this:
as opposed to
Greyscale colors range from black to white, 0 being black, 255 being white, and anything inbetween being a shade of grey. The higher the number, the whiter it is, the lower, the blacker. The other way is the classical way. You've seen me use it before, in CSS. Remember, RGB values? Since you should know those, i'm not going to explain them. Now, how do we add color to objects?
When the computer makes the 'stroke' for a line (or anything), it means the border of it. So, the 'stroke' is getting that color. There is also 'fill', which is the inside of the object. If you don't want it filled, do 'noFill()', and if you don't want the stroke, do 'noStroke()'. This diagram describes the 'chain of command' aptly (the diagram is using greyscale): Spoiler: click to toggle ![]() So, if you do;
line 1 will be (255,255,3) and line two will be (0,5,3). You don't have to worry about accidentally making all lines the same color. In addition to the red, green, and blue components of each color, there is an additional optional fourth component, referred to as the color's "alpha." Alpha means transparency and is particularly useful when you want to draw elements that appear partially see-through on top of one another. The alpha values for an image are sometimes referred to collectively as the "alpha channel" of an image. It is important to realize that pixels are not literally transparent, this is simply a convenient illusion that is accomplished by blending colors. Behind the scenes, Processing takes the color numbers and adds a percentage of one to a percentage of another, creating the optical perception of blending. (If you are interested in programming "rose-colored" glasses, this is where you would begin.) Alpha values also range from 0 to 255, with 0 being completely transparent (i.e., 0% opaque) and 255 completely opaque (i.e., 100% opaque). Example:
The fourth number is the alpha value. LESSON 60: Objects Spoiler: click to toggle Processing is an object-oriented programming language. An 'object' is, well, an object. Object-oriented languages simply use everything as an object. Kinda simple.
Use your Python knowledge to read that code. You should be able to understand it. Simple, right?
Let's take a look at that. Read it using your Python-powered brain. '.drive()' and '.display()' have not been made yet, but you see what it does, right? When the car is 'drawn', the functions 'drive' and 'display' are done.
I've changed the code a bit now, by adding if and else statements. Run the code, and you'll see that you control a 'paddle'. This is the first step to making a brick-breaker. Note that I am not teaching you about if else statements. Examine the code, and it should be pretty obvious how to use them. Difficulty: Junior-Master Spoiler: click to toggle LESSON 61: Two-Dimensional Arrays Spoiler: click to toggle So, you all know the 'Lists and Dictionaries' chapter from processing. Arrays are like that in Processing. Of course, since Python was an optional course, I'll re-teach it. So, a 1d array is something like this:
Now, you are declaring a variable 'arraynamehere,' and giving it MULTIPLE values. You call on the values by saying arraynamehere[x], with 'x' being the number you want. No, I don't mean say '19' to get 19. I mean say '1' to get the first number in the list. Scratch that. The list starts at 0. So if I wanted to call the number 5, I would say arraynamehere[0], as '5' is the 1st number. Not too hard to understand, right? Now, if an array is a set of variables... Can I make an array of arrays? Yes! Its called a 2 dimensional (2d) array. You can make one like this:
Does it make sense? Play close attention to the fact that you declare it by saying 'int[][]'. Now, lets say you have the array {12,52,37,46,82}, and you want that to be the position of your rectangle. The rectangle constantly moves around to each of those positions on the y axis, but remains still on the x axis. To make it do that, we make a loop.
Pos_y in the example is the y-coordinate of the rectange. If you think about it, it makes sense. 'i' starts at 0. The program then references arraynamehere's first variable, and then it loops around so that i is one bigger every time. Now, making it for a 2d array is where it gets complicated.
'Pos' is the position of the rectangle. There are easier methods of getting the position instead of doing it like I showed (since you would have to split 'pos'), but it would take up time to show you, so I'll not go into that. Lesson 62: Images and Pixels Spoiler: click to toggle
That's how you can get an image onto the screen! Simple, right?
Look at that closely. The image of a sunflower is given the variable name 'sunflower.' Then it is told to have a tint of 255, and then it is given its coords (0,0). Now to explain tint. Tint is the darkness of the picture. If tint is at 255, the picture appears normal. If tint is at 0, the picture is completely black. The lower the number, the darker the picture.
By adding the second argument, we are changing the transparency. 255 is normal, 127 is 50% transparency, 0 is 0%. Anything in between follows these rules. Here's where it gets complicated.
The third argument COMPLETELY changes the first two arguments. NOW its an RGB value statement. This is saying how much of each color to show. So, this particular code says to show no red, most of green, and all of the blue.
The fourth argument does transparency, just like the second argument did before we added the third argument. This is saying to make the image red-tinted, at 100 transparency. There are a lot of other things that you can do, but they require extensive coding, and this guide is meant to be a 'quick look-up guide'. Therefore, go to http://processing.org/learning/pixels/ for further learning. Lesson 63: Curves Spoiler: click to toggle
That's how to draw an arc in processing. The 'x' and 'y' coords are at the center of the arc, and the width/height is the radius. Start and stop are values with respect to PI.
is an example of an arc. Since I'm not supposed to be spoon-feeding you, I'll let you figure out what that arc looks like, and how to get different arcs using PI.
That's how to draw a curve. What's the difference between an arc and a curve? Curves are better for doing non-circular curvy-lines. So, you may be wondering, what is 'cpx?' This is pretty complicated, so hang on! So, 'cp' stands for 'control point'. To define a line, you have two points, a start-point and an end-point. In curves, you have four points. A start-point, an end-point, and two cps to define HOW it gets curved. I'm going to use a diagram to explain it. ![]() The red dots are the control points, and the blue are the start/end points. This diagram shows how they interact: ![]() The tangent to the curve at the start point is parallel to the line between control point one and the end of the curve. These are the lines shown in green in the diagram at the left. The tangent to the curve at the end point is parallel to the line between the start point and control point 2. These are the lines shown in purple in the diagram at the left. That is the definition of the site that taught me Processing. I don't want to change it, as I can only make sound it worse. Its ridiculously complicated, and you won't understand a word of what I'm saying if you haven't taken trigonometry (lol, I'm in 8th grade at the time of writing this, so I haven't XD). Now, this is all very complicated. But what if you don't know trigonometry. What do you do then? Well, you can use a bezier curve (they also look prettier)!
That's the setup for a bezier curve! Note that the order of the points is different. So, you're probably thinking 'oh no! More control-points!' Yes. But they're easier to understand. Lets say you have a curve like this: ![]() ![]() This image shows how the cps affect the Bezier. It looks complicated, but once you get used to drawing out those lines, it makes sense! Lesson 64: Text in Processing Spoiler: click to toggle Remember in Python, typing 'println?' It's the same here. For those of you who skipped the Python section, to write words to the processing developer, you type
That doesn't show up on the screen, though. You have to use a String. Now, most of you should know what a string is. If you don't, that means you should review basic javascript. I mean, come on! Its one of the most used things there is! I'm not going to re-teach that of all things. Now, to get words on the screen, there are a few steps you must go through.
This says 'the variable f is a variable that will be used to hold fonts.' Then, you do something like this:
That sets the font. Next, you need to set the size.
If you want to make the text colorful, use fill(); There are some optional modifications to make, as well.
That takes the arguments 'RIGHT', 'LEFT', or 'CENTER'. You can guess what those do. After that, to actually put some text on the screen, do:
You can get a bit more complicated, too, like this:
Anything not in quotes is read as a variable, except '+'. The + is showing that you are adding the stuff together! (duh). Lesson 65: 2d Transformations Spoiler: click to toggle
So, you know how you can move an object by making its position a variable, then changing that variable? Well, there's another way to do it... You can move the coordinates instead! To explain what the pop/push matrixes are, I'll use the wise words of Processing.org:
Translate is pretty straightforward, right? I'm not spoon-feeding you on this. Trigonometry is coming up REALLY soon, so I can't baby you. Anyways, now we have the rotations! This is how to ROTATE AN OBJECT! Cool, huh? ![]() This shows you what numbers to put in to rotate something. If you're doing the 'PI' rotations, you'd do something like:
To rotate it using a degree, you do something like this:
Remember, its the grid that gets rotated, not the object. It ends up looking like this: ![]() Now, to make something change size, do:
That would take it down to half the size. Now, experiment with this. You'll learn that ORDER MATTERS! Think about it. If you move A 5 points left, and then rotate it 180 degrees, it would be in a different place then a 180 degree rotation, and then moving 5 points left. Lesson 66: About Trigonometry Spoiler: click to toggle Welcome to Trig! I haven't actually been taught this at school, but I think I've grasped the concept. First of all: ![]() You all know soh-cah-toa, right? Sine=opposite/hypotenuse, Cosine=adjacent/hypotenuse, Tangent=opposite/adjacent. Also, Tangent=Sine/Cosine. Simple enough, right? Another grid used for learning trigonometry is: ![]() In the wise words of Processing.org:
They then gave this example of a code:
http://processing.org/learning/trig/ << This is where I got it from. I'm not going to pretend I know trigonometry, because I don't. I'm not being taught that. Well, there are only a few more chapter left of Processing... Just kidding. There are none. For further reading on the wonders of processing, just read http://processing.org/learning/p3d/ Its about Processing in 3d. What's next? After I complete this guide, I'm doing Java! Then, I plan to do C++, and, finally, C. I might do Assembly. Edited by Mr. Mewthree, Apr 22 2013, 01:27 AM.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mr. Mewthree | Apr 21 2013, 10:48 PM Post #7 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Respected
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
Part 12: A Return to CSS EXTRA CREDIT 6: CSS Basics Spoiler: click to toggle I'm doing CSS as extra credit because all the lessons on it were somehow lost by my computer, so I want to re-add it while I prepare for giving Java lessons, but it doesn't fit in with the difficulty we're on ATM, so therefore its an extra credit. So first, what is CSS? It stands for Cascading Style Sheets. Originally, HTML was intended not for styling a document, but for defining a document. So, when people were able to do stuff like
there was a problem, because HTML wasn't meant for that kind of stuff. Thus, CSS was developed to make the whole process easier. ![]() This picture shows the syntax of CSS.
Now, look at this. You may be thinking: 'Uh.... The 'p' isn't in a tag, bro!' Well, its not supposed to be. CSS is different. This code says "For all 'p' tags, the color is green." That works for all tags. You could also do:
For those of you who read the JS, Py, and Processing parts of this guide, you know that the {} contain the statement about 'p'. If we didn't have those, the computer would blow up. Literally. The CSS-Police would do it. Another quick thing:
That's how to do a comment. As you may have noticed, the '/**/' pair it very common for multi-line comments. Yes, you can make the /**/ go over multiple lines.
First of all, like the /**/s, {}s can go multiple lines as well. In fact, to make the code readable, you SHOULD go over multiple lines, one for each declaration. But what is this '#idnamehere?' You know how you use the tags to say what you're modifying, but what if you want only the 'p' tags at the top to be green, and the rest normal? You give the HTML tags an id, like so:
And then you say, in the CSS section, #idnamehere. Simple enough. Now, you can also use 'classes' to achieve the same function. I prefer classes, because they have another function... But more on that later.
Put that in a tag. Next, do this:
All that you need to change is the '#' to a '.', and you've got a class! Now, for the other function. What if you want to ONLY use the 'p' tags with the class 'classnamehere,' but NOT the h1 tags with the same class? You do this:
That works with any tag, btw. Now, how do you actually GET CSS into your document? It doesn't work just throwing it out there. There are two ways to do so, Internal and External Stylesheets. An External Stylesheet looks like this:
All you need to change is the 'insertfilenamehere'. Be sure to save the file as '.css'. The file should contain all CSS. An Internal Stylesheet works like this:
In between the <head> tags (you know what I'm talking about if you know HTML) you put <style> tags. Now, onto the matter of contradictions. What if you have an External and Internal Stylesheet? Well, nothing. If one says the color and one says the size of the text, you're fine. But what if both say the color? Well, the Internal Stylesheet has veto power. The program will run off of the Internal Stylesheet's definition of color, but everything else non-contradictory still works fine. Edited by Mr. Mewthree, Apr 22 2013, 11:27 PM.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Mr. Mewthree | Apr 22 2013, 11:27 PM Post #8 | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Respected
![]() ![]() ![]() ![]() ![]() ![]() ![]()
|
This is the post where not-quite-completed Lessons are stored. EXTRA CREDIT 7: Styling Spoiler: click to toggle In this lesson we learn how colors are a very important part of CSS. For the list of colors and their hexes, I always use this site: http://cloford.com/resources/colours/500col.htm Of course, once you know HOW hexadecimal codes work, you can make your own colors. So, first of all, how do you code in colors?
Simple. Just modify the hex code (the #00FF00 part) to change the color. But... What IS a hex code? Well, there are three ways of doing colors. RGB, Hexadecimal, and the actual name. So, to show you what each of those are, here's a small code.
All of those are a way of saying 'green'. Now, you may be thinking; 'can't I just use the color's name all the time? Its really easy...' Well, DON'T. Why? Because the rgb/hex codes are easily modified, while the 'name' style of assigning color can only change to another color by completely rewriting the code. What I mean by that is that if in rgb/hex you want the green to be a bit more blue-ish, you could do this:
And then they're slightly blue-ish. There isn't a name, however, for a color with hex code 00FF01. So, how do you modify hex codes? Simple. First, rgb stands for 'red green blue'. So the first number in rgb is red, the second green, and the third blue. By modifying those you modify the amount of each color you put into it. The hex code is the same. Split the hex code 00FF01 into 3 sections. 00 FF 01. It follows the same rule as rgb values, and also it has exactly the same numbers to represent it. Here's what I mean: There are 16 numbers/letters in 0-F. Hex can go from 0-F, and thus, since each color has two slots for a number 0-F, there are 256 different values for the hex. In rgb you can go from 0-255. Now, you may be thinking 'that's only 255 possible values!' Not true. 0 is a value too, and thus there are 256. All you need to do is translate them into the number system 'hexadecimal' (there are 16 values before it reaches '10', unlike our 10 values until it reaches '10'.) Fun fact: Spoiler: click to toggle The reason why hexadecimal is more popular in rgb is because computers run on binary (0s and 1s). So, to say the number 3, I would say '11' in binary (because there are two possible values until you reach '10'.) How can you translate binary into decimal (10 values until '10'. Its what we count in)? Well, you can't. Because 10 in binary isn't a perfect '10000' or '1000'. Its a sloppy '1010' That's hard for a computer to read. But '10000' (which is 16) is quite easy to read... And thus hexadecimal was born. If you want the color in the background, simply do:
And if you want a background image:
If you want the image to be repeated:
If you want it to repeat horizontally, change the 'x' to a 'y'. If you want it to not repeat:
To change its position, modify that with 'left', 'right', 'top', or 'bottom'. 'center' works as well.
That's how to align text. It also takes the 'right' and 'left' arguments, as well as the 'justify' argument. 'Justify' stretches each line to an equal width.
This takes quite a few arguments, such as 'underline', 'overline', and 'line-through'. The reason you'd want to do 'none' as the argument is usually to make links blend in with the rest of the text.
That makes the first word uppercase. The other arguments are 'lowercase' and 'capitalize'. Capitalize capitalizes all letters.
That's how to indent your text.
That's how to change the font. Note how its in quotes. If the font is more than one word, it must be in quotes. Otherwise, it doesn't need them.
This is kind of useless. Font-style takes three arguments, 'normal', 'italic', and 'oblique'. Normal is normal text, italic is italic, and oblique is slightly more slanted then italic. If you want the text normal, you don't actually need this argument. If you want italic font, you can use the <i> tag! If you want oblique... Nobody's going to notice if you use the <i> tag instead. And thus, this tag is meaningless.
That's adjusting the size. Btw, the default size is 16 pixels (that's what px stands for). Now, thought, people are starting to prefer 'em's. 1 em = 16 pixels. So, if I wanted 40px font, I would use 2.5 ems. (40/16=2.5). Internet Explorer likes ems. EXTRA CREDIT 8: The Box Spoiler: click to toggle TBA EXTRA CREDIT 9: Advanced CSS, Part One Spoiler: click to toggle TBA EXTRA CREDIT 10: Advanced CSS, Part Two Spoiler: click to toggle TBA EXTRA CREDIT 11: CSS3 Spoiler: click to toggle TBA
Edited by Mr. Mewthree, Apr 24 2013, 12:14 AM.
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() |
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| 1 user reading this topic (1 Guest and 0 Anonymous) | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]() Join the millions that use us for their forum communities. Create your own forum today. Learn More · Sign-up Now |
|
| « Previous Topic · General Discussion · Next Topic » |



![]](http://z5.ifrm.com/static/1/pip_r.png)
XD Also, I did not go into much detail. Some, like <abbr>, are irregular. You all have access to a search engine if you are reading this, so look the tags up before you use them


















2:20 PM Jul 11