Beyond Binary: Intro to Computer Science | CS Fundamentals in JavaScript | Ep 1


Hi I’m Anna Lytical and welcome to Beyond Binary class 1: my introduction to computer science and we started at class 0
because we are computer scientists. If you haven’t watched that go to the
description there’s a link there and while you’re down there leave a like on
the video subscribe and ring the bell to make sure you don’t miss a class
ever again. Last class we looked at binary a little bit, we looked at
algorithms a little bit, and we wrote some code using scratch. In scratch we
saw loops, functions, conditions, variables, boolean expressions. all the things that
are core to solving problems with code and that’s what this course is all about.
Today we’re gonna start using JavaScript a text-based language now one of the
most popular programming languages in the world.
You can make games with it, you can make websites with it, you can make apps, so you can make all kinds of things with it, so I think it is a great
language to start with. And with most text-based language is it will look a
little funky and will be confusing at first we’re gonna see some stuff that
looks like this and this and this and this and this. And it’s gonna be a little
overwhelming, but you’re smart I know you can do it it’s just some text up here
it’s just some numbers up here it’s just a few of the weird punctuation keys on
your keyboard, and throughout this course and throughout even just this episode
you’re gonna be able to understand what these things are doing and how to write
it yourself. With scratch we could only write code on the official scratch
website using their official editor with JavaScript there are tons of different
ways we could write it we could write it directly on our computer in JavaScript
files or in HTML files or what we’re gonna do in this course is we can use a
web-based JavaScript editor. These will allow you to write JavaScript code all
within your web browser so you could do it on a tablet if you really wanted to
or you can do it on any kind of computer that supports even just watching this
video. The one we’re gonna use is called codepen feel free to make a free account it
will make things a lot easier for you to save your project and from the home page
we’re just gonna click on pen what’s gonna be brought up is three different
sections one for HTML one for CSS and one for JavaScript but we’re just gonna
use the JavaScript one for this course so you can slide all the other ones over
the first thing that we did in scratch was just get an output on the screen
we had an input and we wanted an output why don’t we take a look at javascript’s
equivalent of when green flag clicked say “oh honey” and to do that we would write console dot log parenthesis quotes oh honey
and then end our line in a semicolon already you might be thinking
parenthesis quotes and semicolons Oh my what is going on and I’m gonna walk you
through it don’t worry there’s a lot of punctuation in here there’s a lot of
weird syntax or way we write code but over time like with makeup like with
drag like with performing like with any kind of skill the more you practice it
the more natural it will get for you. we’ve written this line of code and
nothing’s happened but that’s because we haven’t opened the console so to open
the console we’re gonna right-click click inspect and then go right into the
console and here we can see our habit is oh honey
so let’s break down this line of code we’ve got a function here like the save
function but instead we have console dot log and this is our first JavaScript
function to call any function in JavaScript you type the name of the function and
with console dot log we just have a period within the name and to call the
function or to run the function we’re gonna use parentheses like we saw in the
say Block in scratch there is a place to put an input and that’s what we’ll put
inside of these parentheses so we want to give it the text “oh honey”
so if we want to tell console dot log that we wanted to say “oh honey” on the
screen we can just type in oh honey so we’re gonna see a bunch of errors in the
console we don’t have to worry about those for right now in scratch they made
it super easier for you to pass whatever text you want it into the say block, but
console the log that can take numbers variables lists all kinds of different
variables. To indicate that this is a text variable we have to surround it
with quotation marks everything inside of the quotation marks will get outputted on the screen and then most lines of JavaScript will end in a semicolon so to
just review it quickly console dot log is the name of a function we’re calling it
we have an opening and closing parenthesis right after it in those
parentheses we have a set of quotes which surround all the text we want to
get out put it then the cherry on top of this line of code is just a semicolon so
we want to output more “oh honey”s we can just copy it down. Add a bunch of Ys
and you might also be thinking wait I’m not clicking when green flag clicked
there is no one green flag clicked what’s going on here? codepen is just
running everything inside of this javascript file every time you make a
change kind of like an autosave feature and
really across the board if you’re using codepen or if you’re just editing the JavaScript
code on your computer there is no when green flag clicked it’s just your
browser or your phone or whatever you’re running the JavaScript on and that will
tell it to run it will just run through the script you’ve given it. No when
green flag clicked necessary, so from here on out our one green flag clicked
blocked is cancelled you may be looking at isn’t me like this is just text and
text on the screen in the console oh there’s just like a bunch of red errors
I don’t want to see all of this. And I couldn’t agree more
let’s close up the console by clicking up here, and we’ll return to the console
maybe in a later episode. It is a great tool for seeing if you have any errors
in your code, and it will tell you exactly where the error might be and
give you a suggestion on how to fix it, but for now let’s get rid of it, and
let’s get some more glamorous outputs. So like at the end of the last episode I
showed that we could make our own functions like that honey function where
we would just call honey it would play oh honey however many times we wanted it
to play. I went ahead and wrote a bunch of JavaScript functions that you don’t
need to understand just yet, but we’ll call in this class that will make things
so chart glamorous, and so much easier for you. All we need to do to import them
is go to CSS and paste in this URL that’s in the description, go to
JavaScript paste in that same URL and let’s turn off the auto updating preview
because it’s a little easier when we can just click run and it will run our code
totally fresh. And to make it easier for you to get started instead of having to
go to settings copy the values and make all those changes I’ve created a blank
template for you then you can just click create pen from this template and name
it whatever you want and save it on your account. Instead of boring old console
dot log we can use a bunch of fun print statements that I’ve created there is
print glitter print rainbow and if you’re feeling a little boring there is
just a regular old print. Now when we hit run we’re gonna see so much more glamorous
text. We’ve got glitter, rainbows, and well bleh. They’re all appearing on the same
line though so if you don’t like that and want to have things appearing on
separate lines we can just add and “Ln” to the end and it uses a different
function that adds a new line to the end of each print statement, and it is at the end
so this fourth oh honey it’s still on the same line so we’d have to add a new
line up here too. Let’s clear these out by just printing nothing with each of
them. If we wanted to call all these
functions with “oh honey” just like this we could do that and it would be totally
fine, but if we want to change these Oh honey’s to “oh honeyeyeyeyeyydasfdsfa” and we’d have to edit
each one copy and paste down in we do not like doing that it’s repetitive it’s
annoying it is a boring. It’s almost as boring as
this regular print function so instead we could introduce a variable and to
create a variable we type let which says let’s some new variable that we want to
have and then we’ll give it a name you can call this name ohHoney
and to set this variable to something we use an equal sign. And whatever is on the
right of this equal sign will be the value of this variable, so here we want
it to be “oh honey” this will be a text variable because we’ve set it equal to
this string in quotes oh honey and what and this line of the semicolon
then instead of having all these print functions call oh honey with this new
string oh honey we can just have them use the variable ohHoney
and this is why those quotes were needed because if we didn’t have those quotes
then it was looking for the variable oh and then the variable honey and neither
of those existed, so it wouldn’t have known what to do at all!! Now we can run
this again it’s gonna look the same but if we want to give it all the honey
goodness it deserves we can add a few more Y’s rerun it and then it’s gonna change
for all of them. In scratch if we wanted to use a variable we would go down to
the variable blocks, click make new variable there we call it “ohhoney”
then we would use the set variable block to set it to a value that we would have
that rounded block that we could put into that say function then update that
variable whenever we wanted. Another place we saw variables when we were asking
a queen for their name and then we would be able to welcome them to the stage.
JavaScript’s equivalent of asking someone a question is window dot prompt.
And this is the function so we’ll call it with parentheses inside these
parentheses you’re gonna put some text and that text will be the question that
is asked to the fabulous user of this script so here we’ll say what’s your
name. don’t forget the semicolon. then when
we run it we see this pop-up that says what’s your name and we could type Anna.
so it’s asking for our name and then not doing anything with it. I
want to be welcomed to the stage we window dot prompt gets your name
then it will output whatever variable or whatever piece of text you gave it so we
can actually just store this in a variable.W can call let name equals
window dot prompt. And for now let’s just leave the glittery print. In here we
could type name which will output that name variable, but we want to say welcome
to the stage whatever your name is when scratch you would use the join
operator which would join two pieces of text in JavaScript it’s actually so much
easier. We just have two pieces of text and then we use the plus sign to join
them no having to grab extra blocks drag everything in, so much easier. So let’s
give this a go ladies and gentlemen please welcome to the stage Anna Lytical wowowowowow. And if this
font size is a little too small for your welcoming needs, you can use setFontSize and this is another one of those functions I’m giving you that is not
built into JavaScript, one of the abstractions that I made for you. And we
can just pass it a number and now the welcoming is an appropriate size. Well
maybe a little too big actually. We could just leave it up the size it was before.
So that’s how you can add strings and you might be thinking add, numbers, set
font size a hundred add set font size 100 numbers oh my god or we’re gonna be
doing “Math.” I always think it’s so funny that there’s this notion that you have
to be super good at math to do any kind of coding because that’s so untrue.
In fact coding will handle most of the math for you. Let’s take a look at this
example I have for you. We have two number variables there’s a 1 and a 6
point 9 and we don’t need the quotes around these because they are just
numbers and JavaScript knows to interpret them as numbers and not as
text. So as you can see if you do want to do addition you use the plus sign, you
want to do subtraction negative sign multiplication star sign division slash.
It’s just gonna do the math for you it’s kind of like a gay calculator. Oh well at
least so we do it. We can also do comparisons with numbers to get boolean
expressions those true or false values. We can see one number is less than
another greater than another greater than or equal to another less than or
equal to another all the combinations! and then what we get back is a true or
false value and if we wanted to get different results we
could actually just change this variable so instead of this integer being one we
could set it to 1 million and if we’re updating an existing variable we don’t
need to use the let before. The first results won’t change because that’s
working from top to bottom up until line 10 it’s still things that
integer is one a little we get to 10 it goes from 1 to 1 million but actually
now that I think about it 1 million is gonna give us the same results are all
these boolean expressions, but whatever! Let’s say for all my math Queens out
there that you do want to make this into some kind of gay calculator we’re gonna
need an input of a number so why don’t we prompt whatever queen is using this
for some number. We can just type in whatever number we want
how we’re gonna get the math done for us no calculator as well you don’t need to
be a genius to see that 100 plus 100 is not 100 100. What is going on here y’all?
well my dear child it’s time I told you about the strings and the int window dot
prompt that’s always gonna give you a string that’s always gonna give you a
value that would be in quotes so instead of having our integer be 100 it is “100.”
Suspicious right!? subtraction multiplication and division we’re kindly
able to figure out that we wanted at the number 100 and not the text “100” but
addition Oh addition it always gets ya. In my set of helper functions I have a
function called promptInt and it will convert whatever text you write into an
integer. Integers are only 1 2 3 4 5 & 6 no decimal places allowed, so we would
use a float number for that and if you wanted a prompt for a float number you
would just do prompt float. Sings “float please” and there have been a lot of helper functions that
we’re using in this class so it might be hard to remember them all our might be
hard to remember what all the things in JavaScript are but you can always go to
settings click JavaScript and go to the link you have in there. and here are all
the helper functions I’ve provided that I’ve custom written for this class. it’s
also great for you to see what’s actually happening under hood and
understand these abstractions that I’ve made. We’re defining the function and in
a little bit I’ll show you how to define your own functions. Above
each function definition I have a comment that explains what the function is doing.
And this is a line of code that will explain what parts of your code are
doing so another person who’s using your code, using your abstractions will
understand it more easily and to write comments in JavaScript you just start a
line with a slash slash and anything after that will not be run. So we can
scroll down and we find the prompt int and prompt float commands. And all you
need to know about these functions is that they’re gonna keep asking you for
an integer until you give it one. If we look inside actually though, we can see it’s
calling that same window prompt command but then it’s passing that value into
another function called parse int which we’ll check if it’s an integer and if it
is converted into line and we’re using a while loop here which is similar to a
forever block in scratch so until we get that value to be some kind of integer
then it’s gonna keep asking us over and over again and the same thing is true
for this prompt float function. So now we can rerun this with these
functions that we know so it does give me a number
I could put “hi” in it’ll keep asking this until we actually give it a number
so I’ll give it 20 this time and for a floating number we could got 20 in there
again if we could put an integer in there because all integers are also
floating numbers why don’t we put some decimal value in there instead click OK
and then we’ve created a gay calculator. You’re welcome! my second grade teacher
is shook. Alright enough of these numbers for now, let’s go back to some of
the text instead of just comparing numbers checking if they’re greater than
or equal to or whatever! could we compare letters so instead of seeing if 1 is
greater than 0 we could say is yassss equal to yes we could just use one equal sign
here we can’t just use two equal signs we need to use three equals signs here
because otherwise it would think we’re trying to maybe create a variable yes
if that’s a string or something like that and set it to the variable yes
which is not what we’re going to do. One equal sign is for setting a variable, 3
equal signs is for checking if they are the same throw the semicolon on and
click run and we didn’t even need to run this to know that this was gonna be
false. One of the next things we saw in Scratch were conditions if something is true
then do something else and that if block was shaped like a C we could save lots
of other functions inside of it and in JavaScript it’s kind of the same. It’s
gonna look like this we write if then we have parentheses
which are contain the boolean expression something
that’s gonna return true or false and kind of like that C shape we use curly
braces to indicate what we want to do if that condition is true. There’s an
opening one up here and a closing one down here now we can get a great a
little quiz here. You go bruh? “y” yes work bitch!!! we should probably
handle the case when someone answers no in scratch we’d have to go grab the
else block, switch out our conditions, switch it all in. It was actually kind of
a pain in JavaScript we can just write else right after this closing curly
brace and then add a new set of opening and closing curly braces. here and just
print meh. So we’ve run it again answer anything but why we’re gonna get a meh.
well what if I’m very enthusiastic and want to say yes with a capital “Y” Meh??
but but brah I am gay! I swear! In this if statement we should check two conditions
if the value we get from this prompt gay is it lowercase Y or is it uppercase
Y. To create an OR boolean expression we use the – what is this – we use the pipe |
it’s like the straight line command Ironically we’re gonna use the
straight line key and this is gonna be over the enter or return key and you’re
gonna hold shift to get it. We’re gonna use two of these so we’ve got our first
expression so if gay equals lower case Y or and this is the OR gay equals upper
case Y. Now when we’ve enthusiastically answer this question Y, yass work bitch
work bitch yes work bitch. This is how
we can compare text and also create an OR boolean expression, but if we want to
create AND boolean expressions to check if the value is this and it’s that – and
it makes a little bit more sense with numbers actually. Here we have a few if
statements where we’re checking numbers we asked some potential trade
how far away they are. If their distance is under 300 we’ll print something if it
is between 300 and 5,000 so we’re using the ampersand & we’re gonna use two of
them just like we did with OR it will confirm they are between this distance
and then otherwise will reply with another value.
And how close is this trade? Maybe maybe 2,800 feet. Did that work? Nooo what happened??
yeah I think my browser is a little mad at me that I keep having all these
pop-ups coming. I know Google Chrome will try to suppress them so you don’t get
browser giving you a thousand different pop-ups when the page loads so if you
run into this problem is try giving the page a refresh and it should work fine.
How many feet away are you? now let’s say 28– and maybe let’s say 2500 maybe
we’ve got a little closer and it’s walkable you’ve seen any call functions
we’ve seen how to create variables number variables
text variables we’ve seen how to compare them all but there are two other things
that we didn’t scratch still that we haven’t seen how to do in JavaScript yet.
The next thing we’re gonna see is loops and this is what we would use our repeat
block for we wanted to print oh honey 10 times instead of copying and pasting it
we would just say repeat 10 times to do something a set amount of times we’ll
use a for loop and a for loop just starting out we’re gonna write for and
then the rest of it will look kind of like an if statement. We’ve got the
parentheses we’ve got the curly braces and then inside of the curly braces is
where we’ll put the function we want to run. Then in here in the parentheses is
where it gets a little tricky. And I think this is one of the most tricky
things to get when you’re first learning to code what goes inside of this for
loop but don’t worry you can always copy and paste it in.
You can always Google how do I write a for loop in Java Script copy and paste
it into your code, and you shouldn’t feel like you have to memorize it there are
no tests in this class! So why would you want to go with memorize this if Google is
just well right up there. The first thing we want to do is create a variable to
keep track of which iteration or which time we’re going through the loop so to
do that we’ll create a new number variable we’ll start up at 0 and
typically with a for loop this will be called i so say let i equals 0 and with
a semicolon. Then the next part is how many times you want to run the loop
we’ll give it a condition or a boolean expression
we’ll say while I is less than some number. Here we can say while i is less
than 10 so when i is 0 1 2 3 4 all the way up to 9 and to increase i the last
part of this is we’ll say i equals i plus 1 and this will just take i at 0
and add 1 to it every time. There is a shorthand for this. Instead of having to
just do i equals i plus one you could instead say i plus equals
one which will increase i by a certain amount. If we wanted to go up by two we
could do it like that or five we can go like that if we want to come by
different numbers but most commonly we’ll be going out just by one and if
we’re only going up by one we’d use even a shorter shorthand of just i plus plus
so now when we run it we get 10 Oh honey’s. And if we want a thousand why do we
make this a little bit smaller so we’ll be able to see them all we can easily
see all of our honeys they’re all on the left side of the screen right now, so if
we wanted to print out more in each row we could put a for loop inside of this
and say 4 actually let’s just copy it down as I said this isn’t something you
need to memorize it’s easiest if you just copy it down for the moment, and
eventually it will start to become second nature to you what’s gonna go in
there. You can either copy down or type it out will typing it out will probably help you learn it faster even if you have it
side by side. And since we have a loop nested inside of another loop we
actually can’t use the same variable here we can’t use i again cuz otherwise
both of the i are gonna get confused instead we could just call this
one J and if we had another loop in here we could call it K and other in there we
could call it LMNOP QRS TUV whatever. the alphabet I know it’s too. And then
instead of writing a new line for all of these o honey’s you only want to print
it on the last one so we can do a check if J equals 999 so for the last one
in this iteration denim will print it on a new line I’ll go and run this oh my
gosh I think like oh I think my computer is
gonna break oh my god okay let’s let me change some of these numbers a little too big for my computer to handle this is 10 by 10 oh we also have to change J to
be wallets less than well is equal to 9 instead of 10 my computer is
literally shaking so that’s we’re gonna do to know about loops
the final thing with JavaScript that we saw the scratch was how to create our
own functions so if we wanted to throw this all into those beyond binary helper
functions just to have a function that will give us a wall of honey’s we would
define our own function and to do that we type of function and this is kind
like “let” for variables but instead its function for functions duh
we call this honey we’ll have parens and curly braces throw all this in there and since
the indentation got a little weird we can go in this drop them and click tidy
J ass just to make it all clean again you might notice we’ve had lots of
different tabs and indentations they are just for you and for me or whoever is
reading the code to understand it better but they don’t actually affect how the
code is working at least in JavaScript. So they’re just there to make your code
look snatched, but they are not necessary for your code to actually run. Now at all
honey we want to by typing the name of honey then calling it with parentheses
well we don’t want to get 10 by 10 every time we want to be able to pass it maybe
how many rows and how many columns we want so maybe you want a hundred by a
hundred we’d want it to accept this these two numbers and use them instead
of the ten by ten here so in our function definition in the
parentheses we can define parameters so here we would call that first parameter
rows and the second would be cols and we would just separate them with a comma
these are just like print commands or the console dot log command they accept
a parameter of a text this will accept a parameter of two numbers and instead of
ten here we’d use rows here we’d use cols and here this is actually a lot
easier if we change the number we’d use cols minus one now we run it and we can
basque in all the oh honey good yes that is all I had to show you today we
saw variables functions conditions loops prompting many input so many different
other puzzle pieces that we saw in scratch now you know how to do them in
JavaScript but I don’t you to just know how to do them I want you to do them you
are gonna learn how to code if you aren’t coding at home I’ve got a few
things for you that will get you starting to type in code pen writing
code or running your first JavaScript program so you have a guiding point and
feel free to make any sort of variations on these that you see fit the first
thing I want you to do is just go write your own welcome to the stage script
you’re gonna use a variable for this you’re gonna prompt the user for this
and you’re gonna call the print function key those first steps opening code pen
writing the code importing the necessary I’m making sure it all can run that’s
the first step to programming even if it’s simple even if it’s small just the
first step of writing the code will start you on the path of being a
programmer and being a computer scientist the next thing I want you to
do is make a little game and it is a guessing game the person who’s playing
this game is gonna have to guess how close they are to you you’ll have a
variable that stores your distance and then the program will keep asking the
player how close you are and it will give you a hint if you guess too high it
will tell you to guess lower and if you guessed too low it should tell you to
guess higher so we put in a hundred it’ll say too small try again we would
informant it’ll say too big a try again then we guess just right that it should
print a message on the screen saying we guessed correctly you’re gonna need to
use some conditions in this you’re probably gonna need to use some kind of
loop maybe a while loop maybe a for loop and the last thing I want you to do is
print out a suite of background dancers you’re gonna prompt the user for a
number of dancers are a number of rows of dancers and we’re gonna print the
dancers in formation so if you have one row it will just print out one dancer if
you have four rows it will print out four rows of dancers and the first row
will have one dancer the second will have two dancers the third will have
three dancers and so on and if you’re feeling basic you could have them all
aligned to the right but if you want a more challenging task try lining them
all to the left or try aligning them in any sort of pattern that you are
interested in doing I’m in the description all of information about all
the at-home coding I’d love you to do and a few hints if you get stuck as
always you can leave a comment with any questions you could tweet at me
@theannalytical with any questions as well and when you’re done with your
final products go ahead and share them use hashtag code and Queen to let
everyone know that you are a coding Queen – that’s all for this episode if
you loved to this episode leave a like on the video tell your friends about it
subscribe ring the bell make a new account subscribe again ring the bell
again thanks so much for watching and I everybody

Add a Comment

Your email address will not be published. Required fields are marked *