Jump to content

Anything About Ternary Operators?

tinfanide

By tinfanide
in JavaScript

Recommended Posts

tinfanide Member

tinfanide

Posted
Posted

For the if-elseif statement like this: 

var show = 0;var source = "";function display(){if(show==0){source="ajax-data.html"; show=1;}else if(show==1){source="ajax-data.txt"; show=0;}getData(source,"div");

Can I use ternary operators to achieve the same effect?

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted
More or less but you require a else to go with it 
var show = 0;var else_if_ternary = show == 0 ? ((source="ajax-data.html") | (show=1)) : show == 1 ? ((source="ajax-data.txt") | (show=0)) : (source="ref not recognised"); alert(else_if_ternary)alert(source)

I've just tested your suggested scripts. It seems not workable.Is there anything I got wrong with your scripts? Please see below: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script>var XMLHttpRequestObject = false;if (window.XMLHttpRequest) {XMLHttpRequestObject = new XMLHttpRequest();} else if (window.ActiveXObject) {  XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHTTP");  } function getData(dataSource, divID){  if (XMLHttpRequestObject) {   var obj = document.getElementById(divID);   XMLHttpRequestObject.open("GET", dataSource);     XMLHttpRequestObject.onreadystatechange = function(){    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {	 obj.innerHTML = XMLHttpRequestObject.responseText;	 }    }   }XMLHttpRequestObject.send(null);}var show = 0;var source = "";function display(){var else_if_ternary = show == 0 ? ((source="ajax-data.html") | (show=1)) : show == 1 ? ((source="ajax-data.txt") | (show=0)) : (source="ref not recognised");}</script></head><body><form><input type="button" value="Display" onclick="display()" /></form><div id="div" style="font-size:50px;">TEXT</div></body></html>

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted
if 'show' can only be 2 different values, you could also do this: 
source = show ? "ajax-data.txt" : "ajax-data.html";show = show ? 0 : 1;

you might prefer to use a boolean for 'show', then the last line could be just: 

show = !show;

Could ya tell me what = ! is called?I remember I've ever come across this syntax once but I can hardly get it in the head.Is show = !show equal to show = false?
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
Could ya tell me what = ! is called?I remember I've ever come across this syntax once but I can hardly get it in the head.Is show = !show equal to show = false?
The '!' is the 'not' operator. Basically, it makes a boolean value the opposite. (ie, true to false and false to true) So in a statement like this:show = !show;the value will just be reversed. If show is true, it will be made false and vice versa.
Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

A empty string (""), null, undefined, +0, −0 and obviously false will return false, while almost anything else will return true. So 0 is treated as false, and 1 would be treated as true, so the example jamesB provided would work as if using show = true, or show = false, which is why he suggested you might want to use that instead.

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted

Consider this:

<script>var whichFruit = 0;function show(){whichFruit = !whichFruit;var fruits = whichFruit ? "apple" : "pear";document.getElementById("div").innerHTML = fruits;}</script>

The output will be apple and pear and apple... But if I reverse the order like this

var fruits = whichFruit ? "apple" : "pear";whichFruit = !whichFruit;document.getElementById("div").innerHTML = fruits;

The output will be pear, apple, pear... Can ya tell me why this is the case? How does JS process the not operator?

Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted

Go through each instruction in order:

// Case 1:var whichFruit = 0; // Boolean falsewhichFruit = !whichFruit; // whichFruit becomes true (true = !false)var fruits = whichFruit ? "apple" : "pear"; // If whichFruit is true, output "apple" else output "pear"// whichFruit is true, so fruit becomes "apple" // Case 2:var whichFruit = 0; // Boolean falsevar fruits = whichFruit ? "apple" : "pear"; // If whichFruit is true, output "apple" else output "pear"// whichFruit is false, so fruit becomes "pear"whichFruit = !whichFruit; // whichFruit becomes true (true = !false) AFTER fruit has been set, so fruit is no longer affected// fruits is "pear"

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted
Go through each instruction in order:
// Case 1:var whichFruit = 0; // Boolean falsewhichFruit = !whichFruit; // whichFruit becomes true (true = !false)var fruits = whichFruit ? "apple" : "pear"; // If whichFruit is true, output "apple" else output "pear"// whichFruit is true, so fruit becomes "apple" // Case 2:var whichFruit = 0; // Boolean falsevar fruits = whichFruit ? "apple" : "pear"; // If whichFruit is true, output "apple" else output "pear"// whichFruit is false, so fruit becomes "pear"whichFruit = !whichFruit; // whichFruit becomes true (true = !false) AFTER fruit has been set, so fruit is no longer affected// fruits is "apple"

Thank you very much for ya detailed explanation. I see how it works in JS now.
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Comment: this is how it works in all imperative languages, so you don't need to work everything out again next time :P.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...