JavaScript is required to use


Surf a Flood of random discussion.

8/17/2012 8:29:48 AM

Learn the basics of programming

ITT I'm going to teach you some of the basics of programming. We're going to be using Javascript here because everyone has an environment for it - your browser. Your browser is capable of executing Javascript, and is doing so right now. [quote][b]1. What is Javascript?[/b][/quote]Javascript (aka. ECMAScript) is a scripting language your browser can interpret and execute. Website developers use Javascript to provide functionality to an otherwise static web page. Interestingly enough, Windows 8 Metro apps can also be created using Javascript. So if you want to create them, this might be a good starting point for you. [quote][b]2. What does Javascript look like?[/b][/quote][quote]function ShowPerson(name, age){ alert( name + " who is " + age + " years old" ); } var johnName = "John"; var johnAge = 25; ShowPerson(johnName, johnAge);[/quote] You can see the result of this script [url=]here[/url]. [quote][b]3. Syntax[/b][/quote]Javascript is very similar to other languages like C, C++, C#, PHP, etc... If you don't have any experience with any of these languages, the best part here is that once you learn Javascript (which is pretty easy), you shouldn't have much trouble writing a basic program in C, for instance. We'll start off with some iterative examples. [quote][b]3.1 Declarations[/b][/quote]Let's declare a variable. [quote]var message;[/quote]How easy was that? We've got three important parts here: 1) [b]var[/b] var is a special keyword in Javascript that is used to declare a [b]var[/b]iable. Variables store the data we want to use. 2) [b]message[/b] This is the identifier for this particular variable. We use identifiers as a way to refer back to the value inside. 3) [b];[/b] [semi-colon] This signifies the end of the statement. While Javascript allows you to end a statement without a semicolon, many other languages do not and will not work. It is good programming practice to always include a semi-colon. At this point we have declared a variable to hold some data, but there is nothing inside. Let's assign something. [quote][b]3.2 Assigning values[/b][/quote] [quote]var message = "hello!";[/quote] Now we have a variable named message with the value [i]hello![/i] inside it, but not the value [i]"hello!"[/i]. So what happened to the two double-quote marks on the ends? A value written directly into the code is called a [i]literal[/i], because the value has [i]literal[/i]ly been given. The example above of "hello!" is what's called a [i]string literal[/i], and a string is textual data. To specify the value of a string in the code, you need to first start the string with a double-quote mark, place what you want beside it, then end it with another double quote mark. That's why we have [u][b]"[/b][/u]hello![u][b]"[/b][/u]. Below are some more examples of assigning values for you to reference.[quote]var age = 30; var isRaining = true; var place = "The \"Great Wall\" of China"; var sameAge = age;[/quote] Here we have: 1) [b]age[/b] which has been assigned the value of 30. Note that this is a number and not a string, so no quote marks are needed. 2) [b]isRaining[/b] which is a boolean value. A boolean value can either be [i]true[/i] or [i]false[/i]. The words [i]true[/i] and [i]false[/i] are special keywords (like var) and also do not need quote marks. 3) [b]place[/b] which is holding the string [i]The "Great Wall" of China[/i]. To be able to insert extra quote marks, you need to use what's called the escape character, which is a backslash, before the quote mark. 4) [b]sameAge[/b] which is assigned a [i]copy[/i] of the value in the variable [b]age[/b]. [quote][b]3.3 Operators[/b][/quote]Operators, as the name implies, perform operations on different pieces of data. Let's look at the probably the most used one, the + operator. [quote]var x = 10; var y = 5; var result = x + y;[/quote]Here we have two variables ([b]x[/b] and [b]y[/b]) where each holds a number, and a third which holds the result ([b]result[/b]) of the expression [i]x + y[/i]. The + operator is called a binary operator (binary meaning two) because it operates on two values (called operands). Other binary operators include: 1) [b]-[/b] operator (for subtraction) 2) [b]*[/b] operator (for multiplication) 3) [b]/[/b] operator (for division) 4) [b]%[/b] operator (the "modulus" operator for returning the remainder of a division, eg. the expression [i]8 % 5[/i] will equal 3 because 8 divided by 5 has a remainder of 3) Probably most importantly however, is the + operator's use on strings.[quote]var string1 = "Hello"; var string2 = "World"; var result = string1 + " " + string2 + "!";[/quote]The technical name for this is called [i]concatenation[/i], where strings (remember, strings are text) are "glued" together. As you will expect, at the end of the script above executing, [b]result[/b] will hold the value [i]Hello World![/i]. There are other operators we will look at later. [quote][b]3.4 Flow control[/b][/quote]As you might expect, if our code simply executes one line after the other, there isn't any way to specify optional or [i]conditional[/i] functionality. This is where we will look at the [i]if[/i] statement. Consider the following script. [quote]var message = "No message"; var age = 15; if( age > 10 ){ message = "You're older than 10!"; }[/quote]You can probably already guess what this does, but here is the explanation. Also note the new operator, the > ("greater than") operator. It, like the other operators above, is a binary operator as it has two operands and will return true if and only if the left operand has a greater value than the right. - After [b]age[/b] is assigned the value 15, the script will execute the next line, which is where the [i]if[/i] statement is. - The if statement defines a condition to satisfy in order to further execute the adjoining code block below it - if the result of the expression within the parentheses is true, the code block below is executed. - This particular if statement asks the simple question "is age greater than 10", and in this example it is, so the variable message is assigned a new value. - The brace marks that appear after the closing parentheses and after the message assignment denote the block of statements to execute for the condition. These are also used with other flow control structures as you will see later. If statements can also have [i]else[/i] statements, which is a set of statements to execute if the condition [i]wasn't[/i] satisfied. Extending our example from above: [quote]var message; var age = 15; if( age > 10 ){ message = "You're older than 10!"; } else { message = "You're younger than 10!"; }[/quote] There is a problem with our message here, however. If [b]age[/b] equals 10, the if statement is not true, because 10 is not greater than 10. This results in the else block being executed and an incorrect message being applied. This is where the [i]else if[/i] statement comes in handy. [quote]var result = 8 + 3; var message; if( result == 12 ){ message = "This doesn't seem right!"; } else if( result == 11 ){ message = "This looks good!"; } else if( result > 10 ){ message = "Will this work?"; } else { message = "This doesn't seem right either!"; }[/quote] As you can see, you can include multiple [i]else if[/i] statements after [i]if[/i] and before the [i]else[/i]. However, note what will happen in this example: 1) The first if statement is evaluated. Does [b]result[/b] equal 12? No, so the code block is skipped and execution drops down to the first else if statement. 2) Does [b]result[/b] == 11? Yes it does, so the adjoining code block is executed. 3) After the code block has executed, [b]no other [i]else if[/i] or [i]else[/i] statements are evaluated[/b] and execution will drop down to the next line after the else block (in this example it is simply the end of the script). You will also notice another new operator here, the double equals operator ==. This is also a binary operator as it checks for equality between its two operands. If the operands are equal, the result is true, otherwise it is false. [quote][b]4. Tasks[/b][/quote] Given what you have learned so far, try to answer the following: 1) Write a script which declares three uniquely-named variables, then, using a single string literal in your code, assign it to all three variables. 2) Fix the if...else code to include a proper message for a 10 year old. 3) What will be in the variable [b]message[/b] after the following script executes? (you may need to click reply and quote this post so you can see the characters clearly) [quote]var message = "I am "; if( "I am " == "I am " ){ message = "a frog " + message; } else { message = message + "correct"; } if( message == "a frog" ){ message = "I am not a frog"; } else if( "I am correct" == message ){ message = message + "a cat" + " and a dog" + " and a frog"; } else if( 9 < 9 ){ message = "a cat " + message; } else if( "" + "" + " " + "" == ""){ message = message + message; } else if( message + "correct" == "I am correct" ){ message = "This is the right answer"; } else if( message == "I am confused" ){ message = "Try harder"; } message = message + "not";[/quote] If you would like to learn more, or found this really easy/difficult, let me know.

Cancel Edit Create Fireteam Post Play nice. Take a minute to review our Code of Conduct before submitting your post.

preload icon
preload icon
preload icon
You are not allowed to view this content.