How much do I actually know about Javascript?

What do I actually know about Javascript?

Having today finished the Javascript Foundations course at TeamTreehouse, and couple with the Introduction to programming course, according to Treehouse I’m now equipped to create equip basic Javascript applications. I’m sure this is under the caveat that a) there is a lot more to learn, b) I need to practise the skills I’ve learned over the aforementioned courses and c) keep watching the latest treehouse videos to keep my new knowledge up to date. Over the course of this blog, I’ve come to the conclusion that these still apply to me and then some.

I’ve shared in previous blogs about my attempts in the past to learn other languages by other means before Treehouse but I can honestly say I’ve never learned as much in the past as I’ve done with Treehouse. Which leads me back to my original question: How much have I actually learned.

I’ve become acquainted with new terms I’d not heard of or thought about before, such as 

  • Shadowing
  • Hoisting
  • call()
  • apply()

I’ve acquired new knowledge about programming conventions with variables and functions.

I’ve had certain things reinforced in my head that I knew previously. I always knew for example that Array key indexes begin with the number 0 rather than one. So to access the second value in an array you’d use the index 1.

e.g. var arrayValue = console.log(myArray[1])

What I want this post to be is an explanation, from my perspective of some of the biggest things i’ve taken from my time studying this language. I’m sure programmers will look at it in a different way.

Hoisting

The first thing I want to go into detail on is Hoisting. There are certain times in the course in which I felt challenged on first video viewing. Hoisting was such an occasion. What is it? Why is it an issue? How do you accomplish it.

function doSomething(doit) {
 var color = "blue";
var number; //a hoisted variable to top of function
//var color="blue", number, name="Jim";

if(doit) {
color="red";
number=10;

console.log("Color in if() {}", color);
}
console.log("Color after if(){}", color);
}

This is a simple enough function. It’s a function with one parameter; “doit”, that holds a variable tied to a condition statement. There’s no real condition to test it seems, other than that it exist as a parameter variable. The “color” variable is printed to the browser console throughout the script and it’s accompanied by another variable “number”.

Normally you declare variables prefixed with the var keyword but inside the condition, you can see this is omitted, but it’s not really shadowed i.e. a duplicate of another variable. Instead a duplicate is automatically created and placed on top of the doSomething function. They are hoisted there. Instead of logging an error of an undefined variable it creates them. To complete the script for us, we declare the variable ourselves without the need to assign a value, although this is done with the colour variable.

Objects

I’ve met objects before. So when I met them again with Treehouse I was familiar with a lot of the concepts they were trying to teach me. While i’m unpractised yet n what I’ve learned is this.

“A method is a function that is a property of an object”

It is a value, assigned to a key in a standard Javascript object in the form of a function. I was able to practice this a lot in my time on Codecademy, but I never quite got it. It was spelled out quite simply on Treehouse.

So as well as simple “list” of keys and values you can get this.

var jim = {
name: "Jim",
skills: ["Javascript","Ruby","Football"],
"favourite color": "Green",
greet: function(person) {
console.log("Hello, I am " + person.name);
}
};

With the greet: key having a function as its value.

Prototypes

Prototypes are centered on Object Oriented Programming (OOP) i.e. Programming based around creating and using objects. Prototypes can be used share common object properties. In a similar way, you can use prototypes to give your Objects inheritance so you inherit keys from a prototype object.

Lastly they are created and initialised by a constructor function.

var personPrototype = {
 name: 'Anonymous',
greet: function (name, mood) {
name = name || "You";
mood = mood || "good";
console.log("Hello, " + name + " I am " + this.name + "and I am in a " + mood + " mood!");
}
species: "Homo Sapien";
};
function Person (argument) {
this.name = name;
return this;
}
jim = new Person("Jim", "awesome");

This is an object that contains 2 keys, 2 values and a method; a function inside an object which in this case is the personPrototype.

That is about all I understand at the moment. I have a basic understanding of how I need to structure the code. But when I try to access the values from the console and display them to the screen I realise i;m still non the wiser about what precisely is going on.

It’s just going to take more practice. I’m getting there I feel. More primed than I’ve ever been. Lots more to learn but then, when does the need to learn ever stop?

Thanks again to Treehouse in which the code I’ve demonstrated was inspired and used.

www.jonniegrieve.co.uk

www.teamtreehouse.com

 

 

Advertisements

Explaining Javascript Functions

There’s a lot more to functions than the one I’m about to explain below, but I believe I’m finally beginning to understand what the Javascript function is all about. Which means I’m a step closer in the long road becoming a more confident web programmer. That is something I’ve always wanted to be but never quite managed yet for various reasons and in spite of years of academic training, a HND and web design degree. My Treehouse experience though is really starting to bear some fruit.

function funcSayHello(name, greeting) {
if (typeof name === 'undefined') {
return 0;
}

if(typeof greeting === ‘undefined’) {
greeting = ‘Hello’;
}
console.log(greeting + ” World! ” + name);

return name.length;
console.log(‘End of function’);
}

console.log(funcSayHello("James", "Greeting"));
console.log(funcSayHello("Jim"));
console.log(funcSayHello());

This is a simple Javascript function. It gives 2 arguments, retrieved by a function call to create a small greeting. How does it work? I’m going to dive into this to try and explain.

First, the function keyword is defined and then given a descriptive function name (i.e. funSayHello) which is then supplied with 2 variables in parentheses called arguments. They’re placeholders in which values are passed to the function code.

The code is put in curly braces (these things “{}”).

Now there’s a lot to think about here. Later on, when the function is called, it could be called with the 2 values, 1 value or none at all. And on occasions when arguments are not matched with values Javascript will return with an “undefined” variable error. It’s looking for a value that doesn’t exist because it hasn’t been declared in a function call.

There are ways we can get around it by testing for undefined variables like so.

if (typeof name === 'undefined') {
return 0;
}

By declaring a variable and searching for an undefined variable can catch these errors before Javascript finds them by giving Javascript a value to return. In this case, using the typeof method. so, we’re checking the name variable, that it’s undefined, and if it is, return a value, or if it’s not, go ahead and return the value provided in the function call.

The second if statement does something similar, but provides a string to replace the “undefined” value that JS will return.

console.log(greeting + " World! " + name);

This line of code simply outputs the value of greeting and name and the custom string to your browser developer console; if the function call supplies the values asked for by the function arguments.

The last action in this function is to return the length of the name variable (i.e. the number of characters in contains as a return value. This is decided in the function call which I’l go over in a second.

console.log('End of function');

This doesn’t really see the light of day if the function works because typically code written after a return value is defined isn’t executed, with one exception being if it’s written inside a condition statement.

Function calls are what drive the function, what initiates it and actually outputs the content written inside the function to the screen or to the console.

console.log(funcSayHello("James", "Greeting"));
console.log(funcSayHello("Jim"));
console.log(funcSayHello());

One function call provides both arguments asked for. One provides only one, and the other provides no arguments at all.

So for the following function calls, which piece together the variables, supplied arguments and variable length calculations, the console output are:

Greeting World! James

5
Hello World! Jim
3
0

Well this blog went on longer than I thought it would. Writing it helped me to take in what I’ve learned from my efforts at Treehouse and I hope it helped you too. I welcome feedback on this or any of my other blogs on this page or via my website.

The code is based on that provide in the Treehouse videos and if you want to find out more about what I’ve been talking about tonight I suggest you sign up and have a go yourself.

Thanks for reading and I hope you found this interesting and useful. 🙂

Social Media work and dealing with constructive criticism

Good afternoon web design world.

In my first blog for August I was inspired to share some things about social media work and a few things about dealing with feedback, both positive and negative.

I’ve been working on my new website recently and getting started with a social media drive for my business. Because with getting busy with the nitty gritty of my work, my social presence often gets let behind. My Facebook page has sometimes gone months without anything posted to it.

That is obviously not good. It’s long been time I did something about it.

Some people prefer to hire others to manage their social media profile. But with my business, whether this is right or wrong, I prefer to manage as much as I can for myself whilst at the same time, noone is an expert at everything!

When I received an enquiry to manage a social media profile from a client, not only was I intrigued and honoured that they would ask me, as I had no previous experience in social media, but it also provoked me to think about my own social media presence. At the moment, this is only Twitter and Facebook but there are so many other opportunities for engagement than those 2 sites.

So this new social media kick began today and a tweet or 2 of mine have already been noticed. Some positive. Some negative! The negative ones were more my own doing really. But at least I hold my hands in the air and admit I messed up. This is the best way of dealing with your mistakes. 

Own up to them!

I got called out 2 things in the past couple of hours.  For the length of time it took to complete my new website development and (Oops!), I left a noindex robots tag online a day or 2 after the website was finished development.

Both points are fair game. But I can confidently tell you all I have never missed a deadline on a client project I’ve worked on. I really don’t feel timing of my new website project to finish is no reflection on my client work because my client work, did and always does come first.

The robots tag was my bad. It probably shouldn’t have existed on the page at all. But I spent a lot of time developing the page on my host server as well as client side and I didn’t want Google indexing any of the new pages while I was still developing the site.

I also spent a lot of time working on the site, making it responsive; ready for many screens and devices; making the code valid to web standards (for the most part in some cases) doing the standard pre launch checks. This was something that slipped through the net in my checks.

One thing I would like to stress though is that I do always appreciate the feedback that I get so please get in touch and keep it coming. It’s important to learn to take feedback and constructive criticsm profesionally and not to heart. Especially when the work you’ve created is entirely your own.

I’m not perfect, and I continue to have lots to learn. But that’s why I’m in the business. Because I love web design and I always strive better myself in my work. Thanks to Treehouse this process has excelled in the past few months!