 字幕列表 影片播放

• (train whistle)

• - Hello and welcome to what will undoubtedly be

• the longest video you've ever watched about binary numbers.

• So why am I making this challenge here?

• So I made a coding challenge number 117 called

• the Seven Segment Display and what I was doing

• was creating a visual, a JavaScript, HTML, canvas version

• of the Seven Segment Display and to do that,

• I had some weird code in there.

• Val >> shift & 1

• and that code, that code right up there

• made no sense to anybody and I tried to explain it

• but I got a lot of comments saying I didn't get

• what this was so this is bit shipping and bit masking.

• So before I can even get into that, I thought let's take

• a deep breath and let's just enjoy and go back,

• backwards in a time days of yore

• when we didn't have anything but binary numbers

• and we had to program everything in binary,

• I don't know, this never happened for me

• but I can imagine there was a time when this really happened

• so this is a coding challenge where I will explain

• what binary numbers are and then I will create a sketch,

• p5.js sketch in JavaScript that converts

• a binary number to a decimal number.

• Okay so maybe you're even asking right now

• what is a binary number, what is a decimal number?

• So before I can even answer that,

• Base is

• a term that refers to the number of possibilities

• in a counting system, in a number system.

• So base 2 or binary, there are only two possibilities,

• a zero or a one.

• Base 10,

• ten, dec, deca,

• or decimal has 10 possibilities, zero through nine.

• There are other well-known numbering systems

• that get used often, probably the one you see

• in computing the most is base 16 or hexadecimal

• and this actually has 16 possible digits,

• zero through nine and also A through F

• so when you see something like this in CSS

• like FF

• 00

• FF,

• this is hexadecimal in coding.

• This FF in decimal

• is 255,

• this 00 in decimal is zero,

• this FF is 255 so this is the color,

• this is a representation of the color red of 255,

• zero of green and blue 255 so anyway,

• so this kind of encoding of information exists

• and by the way in my seven segment display,

• of what should be displayed on the seven segment display.

• Okay so hexadecimal is interesting,

• I'm not going to do hexadecimal conversion in this video

• but you know, it's important to realize,

• these are maybe something that you see,

• I think base 8 is used for some file systems

• but you can make up anything.

• If you have base 4, you just have four possibilities,

• maybe zero, one, two or three.

• And when I say possibilities, this defines how you count.

• And by the way, historically there are all sorts

• of alternative ways of counting.

• I believe, I was looking, Aztecs used maybe units of zero

• then 20, then 40, then 800, then 8000

• and instead of digits, they were actually drawings

• of what, so anyway, so you can look that up,

• somebody will make a nice explainer YouTube video

• of counting systems but if we have base 2,

• this means there are only two possibilities.

• Let's use base 10 decimal 'cause we understand that.

• 10 fingers, 10 toes, that's why base 10 is the convention.

• Zero, one, two, three, four, five, six, seven, eight, nine,

• 10, 11, 12, right 'cause once we get to nine,

• we've run out of possibilities in a single digit

• so we switch to zero and then the next digit over,

• the tens unit becomes a one.

• This is what kids learn in elementary school

• in counting in groups of 10, hundreds units, et cetera.

• All right but if I were doing this in binary,

• I would say zero, then I would say one

• and then I have run out of digits,

• I have no more digits left, so I have to say one zero

• and then one one and then, uh oh, one zero, zero,

• then one zero one,

• one one one, I'm totally,

• this is the worst drawing ever,

• and then one zero zero zero, did I get that right?

• No, I totally did not.

• One zero zero, one zero one, one one zero,

• then one one one and then one zero zero zero.

• Oh this is hard.

• Okay let me match up some things for you.

• So something that's really interesting here

• is one matches up with one.

• One zero matches up with two, one zero zero matches up

• with four, five, six, seven, one zero zero zero

• matches up with eight.

• Notice that when there is only the leading digit one

• and everything else is a zero, there's a pattern here.

• One,

• two,

• four,

• eight, maybe now you could imagine

• what one zero zero zero zero is going to be.

• 16?

• Oops, sorry, 16, I should put that over here.

• One, two, four, eight, 16.

• These numbers are doubling so in fact,

• each one of these digits in binary represents

• not the tens, the twos.

• So with a one, this is actually one,

• this is actually two to the zero power.

• Two, this is two to the one power.

• This is two squared, two to the third power,

• we're doubling so this is by the way

• the algorithm that I need to write in my code

• to convert from binary representation

• to decimal representation.

• Are you ready to do that?

• So one thing I want to show you first

• is you can can actually, you don't need

• to write your own algorithm to do this conversion,

• this is built in to the way that computers work

• and actually JavaScript has several helper functions

• that'll do this for you. I think if I say for example,

• =0b, if I have a variable that's =0b, I can put any encoding

• so what if I put one one one one one one one one,

• now actually the value of, that's actually 255.

• So this is, I can actually hard code

• a number in binary by saying 0b.

• I can also use this parseInt function

• so if I say parseInt and give it a string like 255,

• just converts it, the string, to a number.

• But I could do things like say parseInt

• one one zero and then give it a radix or,

• that's another word for base, and say what is the value,

• the integer value, the decimal integer value

• of one one zero in base 2, right, it's six.

• If it were base 10, obviously it's 110.

• So this will actually be done for you just through

• that parseInt function but let's go and actually write

• our own algorithm for this, yes, there is a bell ringing.

• (bell ringing) And let's go to the web editor.

• So let's just assume for the sake of argument

• that the binary numbers that I want to work with

• are going to be strings.

• So I am going to make a number and I'm going to make it

• a binary number and there's a thing about

• when you have 8 bits, that's kind of important here,

• right, each one of these is referred to as a bit,

• each spot in a binary number is a bit.

• When you have eight of them, that's a byte.

• And so this has to do with how things are stored

• in the computer's memory, right, everything ultimately

• in the depths of your computer is stored in binary format

• and the amount of space it takes up is the number of bytes

• or kilobytes or gigabytes, et cetera, terabytes.

• But I'm going to waste a lot of space and encode

• my binary number as a string so let's just say,

• let's just try something really simple

• like one zero zero and we know that should be four, right?

• Zero one one zero, no that's not four.

• Yeah it is four, (chuckles) I lost my mind

• for a second there, right?

• This is zero, this is one, this is two, this is three,

• this is four but we should, yeah, if we do this right,

• we'll get four.

• Okay now I want to write a function, I'm going to call it

• bin, binaryToDecimal, it'll take in any arbitrary value

• which is a string and we could make this much more generic.

• By the way, as a challenge to you, what if you made

• a function like this which is just number convertor,

• it takes a number and two base, a base and a second base.

• So here's the number in a given base,

• give it back to me in another base.

• It'll be generic, that's a challenge for you to do

• now or later or whenever you want.

• Okay, so the thing that I need to do is I need

• to loop through

• the...

• Sorry, i = 0, i < val.length so if it's a string,

• I'm going to loop through the string one character at a time.

• So for each character, the way to convert it

• is to add up all of the twos so for example,

• one zero one is five because it is one zero zero

• plus zero zero one is one zero one and this is four

• and this is one so one zero one is five.

• So if I just start here and take the first digit

• multiplied by two and take the second digit

• multiplied by, sorry multiplied by one,

• the second digit multiplied by two,

• the third digit multiplied by four,

• add all those things together and by the way,

• it's not just one two four, it's two to the zero,

• two to the one, two to the two, two to the three.

• So it's the exponent that's counting up.

• So I'm going to say sum += pow,

• now I need to get this value.

• So I need to get the zero or the one so I'm going to say

• the bit =

• val.charAt(i).

• Now here's the thing, hmm, hmm.

• This is an interesting question here.

• What is i when it starts at zero?

• i is actually a string representation,

• this is the zero index so even though I want

• to do the conversion by starting over here,

• I'm actually over here so I actually want to get

• to the end of the, I want to start from the end

• of the array, or not the array, the end of the string

• and a quick way that I can do that is by saying

• val.,

• val.length-i-1,

• right, if there are three digits,

• I have

• two one zero, not zero one two, two one zero.

• So three minus i minus one.

• So sum = pow(2, bit)

• and I need to make this a number,

• I'll just use parseInt 'cause it's a string

• and then let's just say console.log(sum)

• and I think we're done sort of (chuckles).

• Console.log(sum), let's see,

• let's do binary,

• binaryToDecimal(val) and actually so this should return

• a num, sorry,

• and oh, there we go, four.

• Let's test some other ones out.

• Six.

• Let's try one zero zero, this is a byte, right,

• if all the ones are on in a byte, right,

• everything is on, eight bits is a byte

• and everything is a one, what do we get?

• Okay I need one more.

• Wait, what's going on?

• Something is wrong.

• No, this isn't right, I've made a mistake.

• This code is not correct at all (chuckles).

• So remember, I am each digit represents a one,

• a two, a four, two to the (i)th power,

• I actually even said that somewhere,

• sometime earlier I said two to the (i)th power,

• maybe only in my head.

• So what I'm actually doing is taking that bit

• and multiplying it.

• Now of course it's a string so I have to convert it,