Day 18: Back to JavaScript Basics

Jumping back into JavaScript

Back in a previous post I mentioned a few books by Jon Duckett. I have finished the first lap of the HTML and CSS and have now begun on the JavaScript and jQuery book. I had already started the JavaScript with khan academy, so I will try to focus on only new elements from this new book…Chapter 3 starts off with functions, methods and objects. ‘functions’ are a series of related statements that are grouped together to perform a specific task. Methods are very similar to functions, with the main difference in that methods are created inside objects. Objects are created from properties and methods and are used by computers to apparently ‘create models of the world’. Still trying to get a grasp of this last one, but I am sure I will get there soon. The properties follow the same ‘name’ / ‘value’ pairings that were introduced in the CSS code.

JavaScript Functions…

Again, functions group a series of statements together to perform a specific task. We first declare the function by giving the function a name and writing statements to conduct a task.

Code: Top of the Morning

function sayTopOfTheMorning () { /* function is a keyword used to tell the browser we are about to create a function. ‘sayTopOfTheMorning’ is the name we are giving the function*/

| document.write(“Top of the Morning”); // This writes ‘Top of the Morning’

} // This ends the function

sayTopOfThe Morning (); // This calls the function

There are times when we may need information for the function and here we pass parameters into the function. These values are then used within the function and may return a value.

Code: Parameters & Arguments

function totalPrice (price, tax) { // Here ‘price’ and ‘tax’ are the function parameters

| var total = price * (1 + tax); // Variable total is created to calculate ‘price’ and ‘tax’

| return total; // This returns the total value from the function

}

var oneTomato = totalPrice ( 2, .0825); // This calls the function ‘totalPrice’ by passing in two ‘arguments’.

‘Parameters’ are variables used when declaring a function. While, ‘arguments’ are variables used when calling a function. There is this other thing called ‘variable scope’ which suggests there are different effects on variables depending on where it used in the code. ‘Local’ and ‘Global’ variables are the two types of scopes. Local variables are created internal to the function, are declared with the keyword ‘var’ and cannot be accessed outside of the function. Global variables on the other hand are created outside the function and may be used anywhere in the script. The ‘totalPrice’ function above uses a local variable of ‘total’. It is suggested to use local variables whenever possible, as global variables take up more memory and thus may cause the web page to load slower. Why you ask do global variables take up more memory? Good question you detective…It is because the browsers have to remember the global variables as long as the web page is loaded that is using the variable. Local variables are forgotten after the script is written.

Oh Objects…

The purpose of objects are to group together a set of variables and functions to create a model. These variables are called ‘properties’ and the functions are called ‘methods’. Below is an example.

Code: TJ’s Bar B Q & Fish

var fishShop = { // the ‘var’ keyword declares the fishShop object

| name: “Tj’s Bar B Q & Fish”, // ‘name’ is a property of the ‘fishShop’ object with value of “Tj’s Bar B Q & Fish”

| food: “Soul”, // property fishShop object

| price: “$”, // property fishShop object

| serves: “lunch and dinner”, // property fishShop object

| opens: 1100, // property fishShop object

| closes: 2000, // Notice how all of the properties end with comman ‘ , ‘. This is necessary for ‘Object Literal Notation’.

}

workDay: function () { // This is a method of the fishShop object

| return this.closes - this.opens; // this returns the workDay function value

}

In order to access this object we could do the following…The DOT ‘ . ‘ between the object and property/ method below references the DOT Notation. This allows us to access the properties and methods of an object.

(1) obtain name -> var businessName = fishShop.name; // returns “Tj’s Bar B Q & Fish”

(2) obtain workDay-> var hoursOpen = fishShop.workDay(); // returns 2000–1100= 9 hr work day

In the above example I used Object Literal Notation, but there is also Construction Notation. Literal Notation is useful when creating individual objects, while Construction Notation is better for creating multiple objects within a page. Based on searches, the community seems to suggest that construction notation is used more often because of flexibility and ease of use. I will have to test this out.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.