Fahrenheit to Celsius – JavaScript and AngularJS

You probably know how to convert Fahrenheit to Celsius in JavaScript but how would you display it on a web page?

Google has come up with a modern solution: AngularJS

AngularJS is a way to make your HTML more dynamic and it is easy to implement.

Take a look at my sample here:
http://jsplain.com/javascript/index.php/Thread/45-Fahrenheit-to-Celsius-ng-model/

Have fun testing it!
Tony

Calculus Made Easy

Have ever wondered if we could learn and practice math the way we learn a programming language?
Wouldn’t it be nice if there was such method out there? There is!
Take a look at this eBook:

Calling or call(ling) a function in JavaScript

What’s up?” That was the topic of my last post when we used the line to illustrate how JavaScript sees functions as an end result. Functions are created to save functionality and JS sees them as the outcome of acting upon such functionality. We may tell JavaScript that we see a brownish round piece that looks just like a potato and returns “that is a potato!”, and JavaScript may look at us with dismay and think “What’s wrong with this person? I only see ‘That is a potato!‘”.

Today I’m going to shift gears a bit to talk about calling functions as opposed to creating them.

Let’s see how a function is called in to do its magic. Here’s a simple function that adds 1 to any number you pass in when you call it:

var addOne = function (num) {
  return num + 1;
};

Call it and pass the number 3:

addOne(3);

It returns 4. The way we called the function on line 5 is actually a shortcut for the following line:

addOne.call(window,3);

Let me explain: call() is from the JavaScript library. It’s function is to call an object on the first parameter (in our example, window), pass in some data on subsequent parameters and apply this data to the object attached to .call(), which happens to be our function addOne.

As a matter of fact, the full path would have been the following:

window.addOne.call(window,3);

Why? Well, addOne is a function that belongs to the global object we know as window. So, we are telling JavaScript to call the function addOne which belongs to the browser window, and pass in 3, which is a number that also belongs to window. In truth, the second window on the right is only there to fill in that first parameter because in this case we only want the second parameter, 3,  but since we have to insert a placeholder there, might as well do it with the correct object.

Thank goodness for shortcuts because all we have to do is this: addOne(3); instead of all that mumbojumbo.

But make not mistake, read this article carefully because call may not be needed in our example, but if you understand this example, you are well on the way to understand advanced calling methods.

If this subject interests you please read my eBook
JavaScript Objects Functions and Arrays Explained

A function represents a value

When we look at functions from the same window JavaScript does, things become clearer.

Take for example this function:

 var whatsup = function (){
 return "The sky is up!";
};

JavaScript looks at the function call and it only sees the final product, or what is supposed to return.

Call it like this:

"Do you know what? " + whatsup();

And JavaScript will reply with this:

Do you know what? The sky is up!

So the function was just a placeholder for “The sky is up!”.

By placing the string “The sky is up!”  in a function, we saved it and we are now able to call it at will, since the function is just like a Lego puzzle piece: we can plug it anywhere we want, and it always delivers if we interface it properly.

… Will continue tomorrow, mañana, amanhã, 明天, demain, morgen, 明日kesho …|
(Thank goodness for Google Translate!)

Some JavaScript Storage Concepts

So we want to store data to be used in a script, what options do we have?

Storing simple values:

If the value is single, such as a string or a number, we can just assign it to a variable.
Normally a variable is a pointer, it points to some data in memory. However, in JavaScript, simple values such as strings and numbers are saved in the variable name location, in other words, the variable points to itself like if it was telling this simple data to “stay here near me, don’t go anywhere, you’re too small to wonder around on your own!“.

Storing complex values:

For more complex data we can use an array which is an ordered list, or we can use a hash, also known as an “object” or an unordered list. I placed “object” in quotes because in reality almost everything is an object in JavaScript. I’d rather call this kind of “objects” unordered lists or key-value paired lists.

Now since this data is more complex, the variable pointer stays on one side of the memory ( the stack), and the data stays on the other side of memory ( the heap). The variable points to the data, it does not hold the data. We can actually have several variables pointing at the same data.

Storing scripts such as functionality:

Now if we want to store a program routine, such as to print or to calculate or to fetch some data, etc. Then we use functions. Like any other object, functions can be moved around and placed inside of other scripts. Functions are also great to isolate one script from another script. Moreover, functions are great to help cleaning up the trash in memory because once returned, a function clears itself out (this cleaning is browser dependent since every browser uses a different kind of broom).

And there you have it. If you want a more in depth explanation please read my eBook
JavaScript Objects Functions and Arrays Explained

Looping through radio buttons on a form

A for loop can be very useful when it comes to selecting radio buttons. Take the following sample and its related web page as an example.
See it live
chooselang

What happens?

When we select a language and click on the submit button, the language is acknowledged below the button.

The idea behind this small script can be applied in many different contexts, right?

I first create a radio button form with the name of “myLang”. Then each button gets a name of “language” and a value of “whateverLanguageName”.

Next we need to loop through each button to see which one is selected.

Finally we assign the innerHTML of some DIV to a string showing the result  we’ve selected.

<form name="myLang">

<input type="radio" name="language" value="English" checked>English
<input type="radio" name="language" value="French">French
<input type="radio" name="language" value="German">German
<input type="radio" name="language" value="Portuguese">Portuguese
<input type="radio" name="language" value="Spanish">Spanish
<br>
<input type="button" name="submit" value="submit" onclick="makeSelection()">
</form>
<div id="1"></div>
<script>
function makeSelection(){
	for (var i = 0; i < document.myLang.language.length; i++) {
		if(document.myLang.language[i].checked){
			document.getElementById("1").innerHTML = "You've selected " + document.myLang.language[i].value;
		}
	}
}

</script>

For a more detailed explanation on how innerHTML works please refer to my latest eBook at Amazon worldwide:
JavaScript innerHTML: A Project in Three Acts (Small Projects for Mastering JavaScript)

Hope this has some value to you!

JavaScript Prompt

How do I get feedback from a user in JavaScript without implementing a form?

One way is to assign a prompt() method to a variable and then use the variable:

var answer = prompt("What's your favorite color?");

This works great for strings but how can I get it to work for numbers?

To get data as a number type you need to parse the data. Parsing converts a string type into a numeric type:

var answer = parseInt(prompt("Give me a number ranging from 0 to 10"));

You can also use parseFloat() for float point numbers.

Can a user select an object by writing the object’s name via a prompt window?

The data coming from a prompt box is of type string. A string is represented with quotes. In order to call an object, you need to strip the quotes. Assuming the object we pretend to call is on the Global scope (under object window), we can call its name by calling it as a window property.

After assigning a prompt response to the variable answer, we can re-point the variable to an object name (assuming the name of the object and the value of the variable match).

answer = window
;

Here’s a minimalistic example using window[prop]:

var tony = {
    name: "TONY"
};

Above I declared an object named tony (notice its lower case).
Below I create an independent method that can potentially be used by any object:

var message = function () {
    console.log("Hello, " + this.name +
        "! Thanks for your order today.");
};

Bellow I use prompt to ask for an object name, then the method message is called, passing the object name as the value to be applied to the message:

var newMessage = function () {
    var n = prompt("Please enter the object name");
    n = window[n];

    return message.call(n);
};

Call the newMessage() subroutine and use tony as an example:

newMessage();
//returns "Hello, TONY!Thanks for your order today."

If you have any difficult understanding call( ) read my other eBook JavaScript Objects Functions and Arrays Explained

Cool stuff!!

Link to Amazon ebook
eBook Solid Steps into javaScript