I'm on problem 4, which deals with objects. So, first I'm going to review the chapters on objects in Mark Myers' book, and then, I'll see how to use a for loop to iterate through an object. Working on that now.
I'm back in Austin, TX and I need to review some JavaScript material, especially material on Objects, so that I can answer problem 4. So, I'm going to Treehouse and reviewing some of the JavaScript videos.
Also, I ordered two books while I was still in Asia, "HTML and CSS," and "JavaScript and JQuery," both by Jon Duckett, and they've arrived already. They're pretty amazing, graphically speaking, and they've got great reviews, so I'm really looking forward to going through them.
Also, I launched the Austin meetup group for Free Code Camp, and I've set up meetups that alternate Wednesdays at 7 p.m. between Buzzmill Coffee and Cherrywood Coffeehouse.
My current plan is to finish the Treehouse Front End Web Development course, then attempt the Free Code Camp projects and algorithms again, armed with new knowledge. If I still have difficulty, then I'll go through both of Jon Duckett's books and try again. Reading "A Smarter Way to Learn JavaScript" really improved my JavaScript skills, so much so that some of the challenges were very easy for me. So based on that experience, I'm going to immerse myself in front end development via Treehouse and books (Jon Duckett's), with the goal being to reach a level of skill at which I can complete the FCC algorithm problems, projects, and other challenges in a confident and expeditious manner. I aim to achieve a very high level of skill at front end development (and possibly back-end also once I'm at a solid level with front end), and I'm going to put in the time required to do so.
This code generates a random number:
function randomNumber(upper) {
return Math.floor(Math.random() * upper) + 1;
}
I've used that several times in the past, but it came up again, so I thought I'd note it.
clear() will clear the JavaScript console.
We went over shift(), unshift(), push(), and pop(). Here's a quick way to make an array with a bunch of numbers in it:
var myArray = []
for (var i = 0; i < 10; i++) { myArray.push(i);};
myArray becomes: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
Neat, huh? This creates an HTML list, it's really cool:
var playList = [
'I Did It My Way',
'Respect',
'Imagine',
'Born to Run',
'Louie Louie',
'Maybellene'
];
function print(message) {
document.write(message);
}
function printList( list ) {
var listHTML = "<ol>";
for ( var i = 0; i < list.length; i += 1) {
listHTML += "<li>" + list[i] + "</li>";
}
listHTML += "</ol>";
print(listHTML);
}
printList(playList);
It's code from Treehouse. I'm realizing that I have to continuously be learning both HTML and CSS, AND JavaScript and JQuery. If I don't then my skills in one area get rusty as I focus solely on the other area. To prevent this, I'm thinking of keeping this in mind every day and structuring my day to do work on all four technologies, every single day, so that my skills never get rusty in any particular technology, and also, so that I can keep leveling up all four skills in order to create beautiful things. Knowing how to solve algorithms doesn't help me create beautiful web pages, in and of itself. Knowing how to make wonderful site layouts doesn't help me make a website interactive, which I need to be able to do. The point is, the four technologies are extremely limited when used independently, even if someone is an expert at one particular technology. These technologies shine when they are used in combination with one another.
So, that's what I've got to do to reach the next level. I need to invest daily into my skills in each technology. Duckett's books, as well as Treehouse and FCC, combined with each other, will forge me into a great front end developer, I just have to structure my days to utilize all these sources in an efficient manner.
We went over .join() and .concat(), which I've gone over before, join joins items in an array into a string divided by whatever you place in the parentheses (in quotes), while concat creates a new array combining the two arrays called.
I watched a video by Quincy Larson, the founder of Code Camp. One of the interesting things is that FCC will soon have an
To access an item in an inner array, the code is like so:
theArray[0][1]
The 0 is the index in the outer array, while the 1 is the index in the inner array. O.k., now I'm watching a video on JavaScript objects. I might be able to solve the bonfire after completing this course on objects on Treehouse.
Objects are made up of key and property pairs. To create an object, we assign an object literal to a variable. We do so with curly braces, like so:
myObject = {};
So, it's just like an array, except with curly braces instead of brackets. Here's an example:
myObject {
name: "Jack",
grades: [80, 85, 90, 95]
};
Notice the comma after the string, and also notice there is no comma after the last property, the array. We should place each key and property pair on its own line, and indent the key on each line. We went over how to access properties in an object. Objects use keys to access their properties.
myObject['name'] and myObject.name would both access "Jack"
The code below would change name to "Paola":
myObject.name = "Paola";
The code below would add a new key and property pair:
myObject.height = "5 feet 2 inches";
This function prints the message entered as a parameter to the HTMl document:
function print(message) {
var div = document.getElementById('output');
div.innerHTML = message;
}
You would just store the string inside a variable called message, for example.
SUMMARY OF CODING SKILLS
Total Treehouse Points: 5,449
Treehouse Points by Subject Matter (Miscellaneous not included):
HTML: 663
CSS: 1,599
Design: 1,193
Development Tools: 747
JavaScript: 1,184
Treehouse Ranking (%): "You have more total points than 93% of all students."
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)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
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)
Console Foundations
Git Basics
Introduction to Programming
JavaScript Basics
Codecademy (& other) Courses Completed:
HTML and CSS (Codecademy)
Books Read or in Progress:
Completed: "Head First HTML and CSS," by E. Robson & E. Freeman
Completed: "A Smarter Way to Learn JavaScript," by Mark Myers
My Progress on The Odin Project:
1. Introduction to Web Development 100% Complete
2. Web Development 101 33% Complete
Note: Switched to FCC for the great online community and better updates/support.
Note: Switched to FCC for the great online community and better updates/support.
My Progress on Free Code Camp (FCC):
1. Get Started with Free Code Camp Complete
2. HTML5 and CSS Complete
3. Responsive Design with Bootstrap Complete
4. Gear up for Success Complete
5. jQuery Complete
6. Basic JavaScript Complete
7. Object Oriented and Functional Programming Complete
8. Basic Algorithm Scripting Complete
9. Basic Front End Development Projects On 4 of 5
10. Intermediate Algorithm Scripting On 4 of 21 (#13 and #14 also done)
11. JSON API's and Ajax
12. Intermediate Front End Development Projects
13. Claim Your Front End Development Certificate
14. Upper Intermediate Algorithm Scripting
15. Automated Testing and Debugging
16. Advanced Algorithm Scripting
17. AngularJS
18. Git
19. Node.js and Express.js
20. MongoDB
21. Full Stack JavaScript Projects
22. Claim Your Full Stack Development Certificate
After the 800 hours of FCC work above, there are 800 more hours of non-profit coding projects.
Hours Spent Coding Today: 4
Total Hours Coding: 716
No comments:
Post a Comment