We Keep Coding

Javascript GUID (Global Unique Identifier) Generator Explanation

I'm trying to write a JavaScript GUID generator for 8 characters including lowercase / uppercase letters, numbers and symbols. I found these solutions but need an explanation on what is happening in each. Originally I thought I'd need a string holding all the letters/numbers/symbols that I would index into with random number function to build a new GUID, but these solutions seem to create numbers/letters/symbols out of thin air.
In solution 1, what is the purpose of "1+" and "0x10000"? What is the purpose of ".toString(16)" and ".substring(1)" and how is it generating numbers/symbols/AND letters with just that little bit of code?
Solution 1:
function guid() {
function s4() {
return Math.floor((1 + Math.random()) * 0x10000)
.toString(16)
.substring(1);
}
return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
s4() + '-' + s4() + s4() + s4();
}
In solution 2, I see how the GUID is 32 characters long but don't understand why Math.Random is being multiplied by specifically "16", with a toString(16) attached but no ".substring(x)" this time?
Solution 2:
function generateGuid() {
var result, i, j;
result = '';
for(j=0; j<32; j++) {
if( j == 8 || j == 12|| j == 16|| j == 20)
result = result + '-';
i = Math.floor(Math.random()*16).toString(16).toUpperCase();
result = result + i;
}
return result;
}
No need to explain the structure of a GUID nor what is a hyphen is XD
Any and all detailed explanations are appreciated!

In the 2nd case Math.random() would generate a number which lies between 0(inclusive) to 1(exclusive).
Now if I want a number which should be < 16, multiplying 16 with a value in [0, 1) should do the job for me, toString(16) converts it into a digit of base 16. We add 32 such digits overall
The 1st example generates a number between (1.0, 2.0] and multiplies it with (10^4) to the base 16. Now we have a number in the range (10000, 20000] base 16.
taking the last 4 digits should suffice for us so we take the relevant substring out of it.
That being the case I think
Math.floor((Math.random()) * 0x10000)
.toString(16)
would also suffice for that solution, since we need a 4 digit hexa number

Greater than returns wrong value on numbers lower then 100

This is my first JavaScript project, so I'm sure this code isn't pretty, and could be written in a much better way, but that aside, I've encountered a problem I just don't understand. I'm sure it's just a bug I've made myself, but I just simply can't find it.
The '>' (greater than) operator works fine on numbers over 100, but stops working when it gets to 100. For some reason 100 > 99 returns false?
https://jsbin.com/vigocu/edit?console,output
Move the slider to the right, and then slowly to the left, and you will see it returning "true" until it reaches 100. From there it returns "false"
function getSliderInput(inputSliderId) {
var backSwingArray = [100];
var downSwingArray = [];
document.querySelector('#' + inputSliderId).addEventListener('input', fillArray , false);
function fillArray() {
if (isNaN(downSwingArray[downSwingArray.length - 1]) && backSwingArray[backSwingArray.length - 1] < this.value) {
backSwingArray.push(this.value);
} else if (downSwingArray[downSwingArray.length - 1] > this.value || isNaN(downSwingArray[downSwingArray.length - 1])){
console.log('Is ' + downSwingArray[downSwingArray.length - 1] + ' > ' + this.value + ' return ' + (downSwingArray[downSwingArray.length - 1] > this.value));
downSwingArray.push(this.value);
} else {
console.log('Is ' + downSwingArray[downSwingArray.length - 1] + ' > ' + this.value + ' return ' + (downSwingArray[downSwingArray.length - 1] > this.value));
return;
}
}
}

value on input elements is always a string. While that won't be a problem initially, when you're comparing this.value to the 100 you've put in the array to start with, you then push this.value into the array as-is (as a string). That means later, you'll end up comparing that stored string with another this.value value, which is also a string. If either operand to > is a number, it will coerce the other operand to number (the way + does, see below), but if both operands are strings, it will do a lexical comparison, not a numeric one, and "100" is indeed < "99" because "1" is < "9".
So you want to convert this.value to a number early on, and then use that number both when comparing and when pushing into your array. You have many ways to do that:
The unary + will require the entire string to be a valid number, but will treat "" as 0; it will also treat strings starting with 0x as hexadecimal
var num = +this.value;
// or perhaps
var num = this.value === "" ? NaN : +this.value;
// or even
var str = this.value.trim(); // .trim can be shimmed on obsolete browsers
var num = str === "" ? NaN : +str;
parseInt(..., 10) (the 10 is specifying the radix [number base] to use) will allow garbage at the end of the string, treat "" as NaN, and treat any string prefixed with 0x as 0 (since it stops at the first invalid character)
var num = parseInt(this.value, 10);
Number(...) does what + does
var num = Number(this.value); // or variations above on +

How did this string get turned to a number?

This is the code I'm running
var degFahren = (prompt("Enter the degrees fahrenheit"));
var degCent;
degCent = 5/9 * (degFahren - 32);
document.write(degFahren + "\xB0 fahrenheit is " + degCent + "\xB0 centigrade<br/>");
if (degCent <0) {
document.write("That's below the freezing point of water!");
}
if (degCent >= 100) {
document.write("That's above the boiling point of water!");
}
The string being turned into a number is what I wanted, but why and how did it happen? I never declared a parseFloat or wrapped a Number around the Prompt

When you do -, javascript tries to interpret the variable as a number. This is in contrast to +, where it will do different operations if the variable is a string or a number (concat vs. addition).
This kind of thing happens with javascript all the time.
Examples:
"1" - 1 // outputs 0
"a" - 1 // NaN
"1" + 1 // "11"
1 + 1 // 2

This is the line:
degCent = 5/9 * (degFahren - 32);
The short answer is that when you use the - operator on degFahren JavaScript turns it into a number automatically and then the result of your operation (another number) is put in degCent.
The long answer is in The Abstract Equality Comparison Algorithm

How can I get the correct output?

I have this code:
var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the sum of " + theNumber + 10);
I notice that Javascript tries to convert the 10 into a string (as expected) and I was wondering what should I change within my code for the output the be the actual sum of the value theNumber(that the user will choose) plus the number 10.

Parentheses.
You need to do:
alert("Your number is the sum of " + (theNumber + 10));
The issue is that it works from left to right, so it sees a string and then converts theNumber to a string and then it sees the 10 and converts the 10 to a string. By adding parentheses, you can get it to do the addition first, and then convert into a string.

var theNumber = Number(prompt("Pick a number", ""));
alert("Your number is the sum of " + (theNumber + 10));

Preceding the alert with the transformation to a number (JavaScript Number() Function) will fill theNumber with what is indeed a number:
var theNumber = Number(prompt("Pick a number", ""));
alert(theNumber + 10 + " sums to your number");

alert("Your number is the sum of " + (theNumber + parseInt(10)));
The parseInt() function parses a string and returns an integer.

Trying to get my JavaScript to work out the 2 numbers entered to get calculated by pc.

Just wondering if anyone can work out why I keep getting for eg. 3+3=33 and not 6.
The rest of the coding works fine for the divide and times its the addition that keeps stuffing up and wont come up with the correct answer.. please help if you can.
here is my code:
<html>
<head>
<title>Practical Task 8 </title>
</head>
<body>
<button onclick="myFunction()">Press & Enter First Digit & Second Digit</button>
<script type="TEXT/JavaScript">
function myFunction()
{
var x=prompt("Please enter first number","0");
var y=prompt("Please enter second number","0");
var sum = x;
var sum2 = y;
var n = (x * y);
var n2 = (x / y);
var n3 = (x + y);
document.write(sum + " + " + sum2 + " = " + n3);
document.write("<BR>" + sum + " * " + sum2 + " = " + n);
document.write("<BR>" + sum + " / " + sum2 + " = " + n2);
}
</script>
</body>
</html>

You're performing string concatenation, not integer addition.
Use parseInt first:
x = parseInt( x, 10 );
y = parseInt( y, 10 );
MDN recommends always specifying the radix (the 10 part) to avoid problems, such as if a user prepends a number with 0 (where it'll be parsed as octal), or if different browsers have a different default radix (wtf, I know!).
You have to do this because the output of prompt is always a string, even if it's a number (e.g. "10" or "0123"), you need to tell JavaScript to interpret the data as a number (use parseInt if it's an integer (a whole number), or use parseFloat if you'll accept numbers with decimal places). Confusingly the + operator works for both string and number types, where it performs either concatenation (i.e. joining strings together like glue) or addition depending on the type of its operands.

Because your code is adding strings.
User input is always string.
You need to parseInt(x, 10) and parseInt(y, 10) to parse the string value into int base 10.