We create a variable like so:
var score;
We can also give the variable a value immediately, such as:
var score = 100;
We can then do something like this:
var score = 100;
alert("Your score is " + score);
Which would make an alert pop up on the screen saying Your score is 100. However, the score can change throughout the game, so this is ok:
var score = 100;
alert("Your score is " + score);
score = 90;
score = 70;
score = 60;
And so on. We only need to use the var keyword the first time we create the variable. As an aside, if we don't use the word var the first time we create the variable, the variable will still be created, but it will be a global variable instead of a local variable, and this can cause problems. Also, we cannot create a variable named var, it is not allowed, and you will get a syntax error if you attempt to do so, as var is a reserved word in javascript, so it cannot be used as a variable name. Variable names cannot start with a number, but they may end with a number, so 8elephant is not allowed, but elephant8 is. Variable names can only contain letters, numbers, $, and the _ character.
Variables are like boxes that we store information in. The information that is stored in the variable is called a value. If you are creating a string, and your string has a quote inside (double quotes) or uses an apostrophe (single quote), make sure to enclose the string in the opposite kind of quotes, to prevent syntax errors. Alternatively, you can use a backslash before single or double quote marks, and javascript will treat the quotes immediately following the backslash as just a part of a string. When inserting html tags into a variable, place your quotes outside of the html tags. Spaces (as in, empty spaces, like a space bar/tab) are not allowed inside of variable names.
Combining strings together is called concatenation. These two lines of code do the same thing:
message = message + " how are you today?";
message += " how are you today?;
The += means "take the code to the right of the += and add it to what is on the left of the +=. In Javascript, strings are not only a type of data, they're also objects that have properties. For example, we can find the length of the string like so:
var message = "Welcome to the site.";
console.log(message.length);
This property, .length, will give you the length of the string inside the message variable. This is different from a method/command, such as .toLowerCase(). The Parentheses are what differentiate the property from the method. The method we used earlier, prompt() returns the value of whatever the user types into the prompt. We can call a method on a variable.
I wrote this code today, which makes a "fill in the blank" story:
var storyAnimal = prompt("Welcome, today we will create a story about an animal. What animal should be the story's protagonist?");
var storyAction = prompt("All right, and what is the " + storyAnimal + "'s" + " favorite activity?");
var storyObject = prompt("All right, and lastly, how does the " + storyAnimal + " do this activity?");
alert("Fantastic choices! Now, click ok to view the story!");
document.write("The amazing " + storyAnimal + " likes to go for walks every day after 5 p.m., because he gets so tired from " + storyAction + " " + storyObject + " every morning.");
It was fun to write. We went over numbers in javascript, here's a summary:
Integers: Whole numbers, they can be positive or negative, such as 1 or -1, and 0 is included.
Floating Point Numbers: Positive, or negative numbers, such as 3.5, -3.5, or .0009, for example, in other words, a number with a decimal in it.
Scientific Notation: Numbers like 9e-6 (same as .0000009) or 9e+6 (same as 9000000), for example. When storing numbers inside of variables, for a number like 1,000, do not use the comma, simply enter the number as 1000.
To divide in javascript, we use the / (forward slash) character, for example, 6/3, which is 2. To multiply, use an asterisk. Here's some mathematical operations and their shorthands:
score = score + 10; is the same as score += 10;
score = score - 20; is the same as score -= 20;
score = score * 5; is the same as score *= 5;
score = score / 2; is the same as score /= 2;
Values entered into a text field by a user will be treated by javascript as a string, even if the user entered numbers. So, if the user entered 10, javascript sees "10", not 10. The parseInt() command will convert strings to integer (whole) numbers. The parseFloat() command will turn a string (or a part of a string) containing floating point numbers into numbers, however, it will only work if the numbers in the string are located in the beginning of the string, which is where the command looks for numbers. The parseInt() command has the same limitation. Also, these two commands only return the number part of the string, not the rest of the string. If the parseInt() command is used on "202.99" it will return 202, which is the integer part of the floating point number, but if it is used on ".5 FTE" it will return NaN (Not a Number), because the first item the code comes across is a period, which is not a number. Math.round() will round to the nearest whole number, so 3.5 becomes 4, while 3.499999, for example, becomes 3. Math.floor() will round downward to the nearest integer, while math.floor does the opposite.
I wrote this program to determine how many seconds a 32 year old person has lived:
var secondsPerMin = 60;
var minsPerHour = 60;
var hoursPerDay = 24;
var daysPerWeek = 7;
var weeksPerYear = 52;
var secondsPerDay = secondsPerMin * minsPerHour * hoursPerDay;
document.write("There are " + secondsPerDay + " seconds in a day");
var yearsAlive = 32;
var secondsPerYear = secondsPerMin * minsPerHour * hoursPerDay * daysPerWeek * weeksPerYear;
document.write("I've been alive" + (32 * secondsPerYear) + " seconds in my life.");
Then we worked on this code:
var questions = 3;
var questionsLeft = "[" + questions + " questions left]";
var adjective = prompt('Please type an adjective' + questionsLeft);
questions -= 1;
questionsLeft = "[" + questions + " questions left]";
var verb = prompt('Please type a verb' + questionsLeft);
questions -= 1;
questionsLeft = "[" + questions + " questions left]";
var noun = prompt('Please type a noun' + questionsLeft);
alert('All done. Ready for the message?');
var sentence = "<h2>There once was a " + adjective;
sentence += ' programmer who wanted to use JavaScript to ' + verb;
sentence += ' the ' + noun + '.</h2>';
document.write(sentence);
Because of the programming principle of "Don't Repeat Yourself," we should change the code above to prevent having to type the duplicate parts over and over. Javascript is made up of objects. Numbers are one type of object and strings are another type of object. We went over the Math Object after working on the code above. I also saved the Mozilla Developer Network website for future reference, it has some programming tutorials and lots of useful documentation.
We worked on creating a random number generator that would create a number from 1 to 6. The Math.random() command will create a random number from 0 to 1 (but NOT including 1). So, we could do Math.ceil(Math.random() * 6), and you would think this would work, but the problem is that Math.random can actually generate a zero, and if that happens, the output in this case will be zero. That's not good. So, the correct way to do this is Math.floor(Math.random() *6) + 1. This cannot generate a zero (because of the + 1). My next assignment was to create code that produces a random number between a random number that a user provides and another random number that a user provides. This is what I came up with, and I had a great time coming up with this...I'm enjoying the problem-solving aspect of this.
var firstNum = prompt("Please enter your first number.");
firstNum = parseInt(firstNum);
console.log(firstNum);
var secondNum = prompt("Please enter your second number.");
secondNum = parseInt(secondNum);
console.log(secondNum);
var absDifference = Math.abs(firstNum - secondNum);
var randomNumber = Math.round(Math.random() * absDifference);
document.write(randomNumber + Math.min(firstNum, secondNum));
The instructor's answer was different, he didn't go into selecting an absolute number, but still, I'm stoked...that was really cool. I like Javascript!
var score;
We can also give the variable a value immediately, such as:
var score = 100;
We can then do something like this:
var score = 100;
alert("Your score is " + score);
Which would make an alert pop up on the screen saying Your score is 100. However, the score can change throughout the game, so this is ok:
var score = 100;
alert("Your score is " + score);
score = 90;
score = 70;
score = 60;
And so on. We only need to use the var keyword the first time we create the variable. As an aside, if we don't use the word var the first time we create the variable, the variable will still be created, but it will be a global variable instead of a local variable, and this can cause problems. Also, we cannot create a variable named var, it is not allowed, and you will get a syntax error if you attempt to do so, as var is a reserved word in javascript, so it cannot be used as a variable name. Variable names cannot start with a number, but they may end with a number, so 8elephant is not allowed, but elephant8 is. Variable names can only contain letters, numbers, $, and the _ character.
Variables are like boxes that we store information in. The information that is stored in the variable is called a value. If you are creating a string, and your string has a quote inside (double quotes) or uses an apostrophe (single quote), make sure to enclose the string in the opposite kind of quotes, to prevent syntax errors. Alternatively, you can use a backslash before single or double quote marks, and javascript will treat the quotes immediately following the backslash as just a part of a string. When inserting html tags into a variable, place your quotes outside of the html tags. Spaces (as in, empty spaces, like a space bar/tab) are not allowed inside of variable names.
Combining strings together is called concatenation. These two lines of code do the same thing:
message = message + " how are you today?";
message += " how are you today?;
The += means "take the code to the right of the += and add it to what is on the left of the +=. In Javascript, strings are not only a type of data, they're also objects that have properties. For example, we can find the length of the string like so:
var message = "Welcome to the site.";
console.log(message.length);
This property, .length, will give you the length of the string inside the message variable. This is different from a method/command, such as .toLowerCase(). The Parentheses are what differentiate the property from the method. The method we used earlier, prompt() returns the value of whatever the user types into the prompt. We can call a method on a variable.
I wrote this code today, which makes a "fill in the blank" story:
var storyAnimal = prompt("Welcome, today we will create a story about an animal. What animal should be the story's protagonist?");
var storyAction = prompt("All right, and what is the " + storyAnimal + "'s" + " favorite activity?");
var storyObject = prompt("All right, and lastly, how does the " + storyAnimal + " do this activity?");
alert("Fantastic choices! Now, click ok to view the story!");
document.write("The amazing " + storyAnimal + " likes to go for walks every day after 5 p.m., because he gets so tired from " + storyAction + " " + storyObject + " every morning.");
It was fun to write. We went over numbers in javascript, here's a summary:
Integers: Whole numbers, they can be positive or negative, such as 1 or -1, and 0 is included.
Floating Point Numbers: Positive, or negative numbers, such as 3.5, -3.5, or .0009, for example, in other words, a number with a decimal in it.
Scientific Notation: Numbers like 9e-6 (same as .0000009) or 9e+6 (same as 9000000), for example. When storing numbers inside of variables, for a number like 1,000, do not use the comma, simply enter the number as 1000.
To divide in javascript, we use the / (forward slash) character, for example, 6/3, which is 2. To multiply, use an asterisk. Here's some mathematical operations and their shorthands:
score = score + 10; is the same as score += 10;
score = score - 20; is the same as score -= 20;
score = score * 5; is the same as score *= 5;
score = score / 2; is the same as score /= 2;
Values entered into a text field by a user will be treated by javascript as a string, even if the user entered numbers. So, if the user entered 10, javascript sees "10", not 10. The parseInt() command will convert strings to integer (whole) numbers. The parseFloat() command will turn a string (or a part of a string) containing floating point numbers into numbers, however, it will only work if the numbers in the string are located in the beginning of the string, which is where the command looks for numbers. The parseInt() command has the same limitation. Also, these two commands only return the number part of the string, not the rest of the string. If the parseInt() command is used on "202.99" it will return 202, which is the integer part of the floating point number, but if it is used on ".5 FTE" it will return NaN (Not a Number), because the first item the code comes across is a period, which is not a number. Math.round() will round to the nearest whole number, so 3.5 becomes 4, while 3.499999, for example, becomes 3. Math.floor() will round downward to the nearest integer, while math.floor does the opposite.
I wrote this program to determine how many seconds a 32 year old person has lived:
var secondsPerMin = 60;
var minsPerHour = 60;
var hoursPerDay = 24;
var daysPerWeek = 7;
var weeksPerYear = 52;
var secondsPerDay = secondsPerMin * minsPerHour * hoursPerDay;
document.write("There are " + secondsPerDay + " seconds in a day");
var yearsAlive = 32;
var secondsPerYear = secondsPerMin * minsPerHour * hoursPerDay * daysPerWeek * weeksPerYear;
document.write("I've been alive" + (32 * secondsPerYear) + " seconds in my life.");
Then we worked on this code:
var questions = 3;
var questionsLeft = "[" + questions + " questions left]";
var adjective = prompt('Please type an adjective' + questionsLeft);
questions -= 1;
questionsLeft = "[" + questions + " questions left]";
var verb = prompt('Please type a verb' + questionsLeft);
questions -= 1;
questionsLeft = "[" + questions + " questions left]";
var noun = prompt('Please type a noun' + questionsLeft);
alert('All done. Ready for the message?');
var sentence = "<h2>There once was a " + adjective;
sentence += ' programmer who wanted to use JavaScript to ' + verb;
sentence += ' the ' + noun + '.</h2>';
document.write(sentence);
Because of the programming principle of "Don't Repeat Yourself," we should change the code above to prevent having to type the duplicate parts over and over. Javascript is made up of objects. Numbers are one type of object and strings are another type of object. We went over the Math Object after working on the code above. I also saved the Mozilla Developer Network website for future reference, it has some programming tutorials and lots of useful documentation.
We worked on creating a random number generator that would create a number from 1 to 6. The Math.random() command will create a random number from 0 to 1 (but NOT including 1). So, we could do Math.ceil(Math.random() * 6), and you would think this would work, but the problem is that Math.random can actually generate a zero, and if that happens, the output in this case will be zero. That's not good. So, the correct way to do this is Math.floor(Math.random() *6) + 1. This cannot generate a zero (because of the + 1). My next assignment was to create code that produces a random number between a random number that a user provides and another random number that a user provides. This is what I came up with, and I had a great time coming up with this...I'm enjoying the problem-solving aspect of this.
var firstNum = prompt("Please enter your first number.");
firstNum = parseInt(firstNum);
console.log(firstNum);
var secondNum = prompt("Please enter your second number.");
secondNum = parseInt(secondNum);
console.log(secondNum);
var absDifference = Math.abs(firstNum - secondNum);
var randomNumber = Math.round(Math.random() * absDifference);
document.write(randomNumber + Math.min(firstNum, secondNum));
The instructor's answer was different, he didn't go into selecting an absolute number, but still, I'm stoked...that was really cool. I like Javascript!
SUMMARY OF CODING SKILLS
Total Treehouse Points: 4,784
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
Javascript: 549
Treehouse Ranking (%): "You have more total points than 90% of all students."
Treehouse Badge(s) Earned Today:
Storing and Tracking Information with Variables (Javascript Basics)
Javascript Numbers (Javascript Basics)
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Javascript Numbers (Javascript Basics)
Treehouse Courses Completed:
How to Make a Website
HTML
CSS Foundations
CSS Layout Techniques
Aesthetic Foundations
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Design Foundations
Adobe Photoshop Foundations
Adobe Illustrator Foundations (66% complete, switched focus from web design to web dev)
Git Basics
Introduction to Programming
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman (37 pg preface and 710 pgs of actual content (as in, I'm not including the book's index))
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 29% Complete
3. Ruby Programming 0% Complete
4. Ruby on Rails 0% Complete
5. HTML5 and CSS3 0% Complete
6. Javascript and JQuery 0% Complete
7. Getting Hired as a Web Developer 0% Complete
Hours Spent Coding Today: 8
Total Hours Coding: 343
No comments:
Post a Comment