Hello, world.

This is CS 50 on Twitch.

My name is Colton Ogden.

On today, we're going to venture again into Web development.

So last dream, we implemented cookie clicker.

We had an amazing community created game that we also showcased at the end, eh?

So thanks again to all the folks involved in doing that as the Andre Bella, and it ain t That was awesome.

Today we're stepping away from games, and we're going to start talking about one of the most popular programming languages in the world today.

In that language is JavaScript Days stream is going to be a little on the basic sides.

We're only going to be covering the very basics.

The syntax will do some basic Dom manipulation, and then we'll load boot, strap up with JavaScript and take a look at how it changes once we actually start integrating that versus just the CSS part of bootstrap shots.

Everybody in the chat.

We have a bunch of people that are super excited, apparently to learn javascript today.

So they'll 099 a feast.

Rahul, Ron Jon Szymanowski.

Black beard 01 kinetic Kandra killer Om Whip Street 23 saying.

And that's Nate saying that they're very excited to learn JavaScript, Nate's been featured on stream before is showing his age team Oh, and CSS Project When we did our code review stream.

So stay tuned for some more of those in the near future on then as Leah's.

Well, thanks for tuning in everybody row asking.

How is your birthday?

Birthday was awesome.

Just kind of hung out.

Kept a kind of mellow Um, the folks that I just mentioned put together an awesome If you haven't watched the last dream that cookie clicker stream where they put together that game, that happy birthday game was super awesome.

So check out that last strain the last 20 minutes or so the cookie clique of shame.

It's here on twitch.

Still, at the time of this recording on if you're watching this on YouTube, it will be in the YouTube video.

Um and yeah, it was it was awesome.

I was kind of blown away a little bit speechless when I actually watched it.

Now we have lots of people.

We have folks from Yemen from turkey.

Um, got folks from, um India book from all over the world.

thanks so much everybody for tuning in.

Let's, uh, talk about I guess some folks someone's asking What's the agenda for today?

Stream Today stream.

We're going to be covering kind of the syntax of Java script and a few small examples to start off some basic prompts.

We're going to implement a to do list that to do this is going to be in just pure sort of consul Java script.

Gonna be using prompts and alerts while I'm not pure consul.

In that sense, we're gonna be using prompts on alerts.

We're going to implement a basic to do list.

We're gonna output that to do list so we can showcase things like a raise on dhe for each.

And then we're going to go into making a version of the to do list in the dom.

So actually using it with things like document create element, a pen child actually integrating JavaScript with the visuals of the HTML so that we can actually start looking at dynamic website content creation.

They want to create that to do list, will fire a bootstrap will take a look at some of the components.

Let's take a look at how they change once the actually see the post op job script integrated on that will probably be it for today.

Stream and then expect Maur streams in the sort of javascript ecosystem in the near future.

We may also cover things like No Js.

We'll have a sweet stream on Jake.

Weary in the near future, bootstrap also uses Jake very intimately.

So we have a long ways to go with.

This will lay a nice foundation, especially for folks who have not used JavaScript in the past.

Shadows thanks to blitz ale 099 Danowski.

Why, mm H cramps Lowell saw tm and Taha Ahmed Taha are honey.

Pronounce that Taha man 80.

Thank you very much for the follows.

So let's go ahead and transition over to my laptop here.

So if I press this key over here you see, I'm in Google and just let me move this on the screen just a little bit so that I can see what I'm doing as well with all of you.

Make sure Sandy checking my set up here.

So the nice thing about Google chrome that makes it super nice and easy to develop stuff is oh and I also should quit this as well.

That was the music that we were playing at the start of the stream.

Google actually lets you use the chrome developer tools to actually code in your browser, which is pretty cool.

So if you want to test Web pages that already are loaded, or maybe your own Web pages and actually manipulate the Java script, this is something that's super useful.

And to do this and I actually used to the short cuts off hand.

I'm not 100% what the menu said it is, But I can sort of guess that I want a view.

First of all, let's close it so we can start sort of with a clean palace.

Assume that you've opened up a new chrome window.

Good view.

It looks like developer and then developer tools.

If you're on a Mac, it's option command.

I and I believe it's control Shift I on a Windows machine.

I click developer tools here.

This we've looked at in the past, for example, the elements of you where you can see all the days you can see all of the H two elements than the classes and ideas and all that.

The console is where you can actually look at the Java script, not that's actively executing, but you can look at the Java script.

You can examine any of the Java script objects and variables that exist in that Web page.

So, for example, I could counsel dot log whatever I want.

If I let's see if I if Jake worries loaded in here, it looks like it is so Dollar Sign is typically Jake worries what Jake Worry is assigned to on dhe.

Most other libraries don't really mess with that.

It looks like if I'm not mistaken, that's this.

F means that that's a function in Java.

Script set of Objects are Functions It's kind of a weird thing, but Java script looks like has loaded Jake worry here in this context.

Um, and you could do a whole bunch of stuff, get counseled out, log my name if I wanted Thio cold, Tim like that and it does output.

Colton, I could, uh, I could do 1234 Each function council dot Log on this actually should take in an e confidante.

Luck either should work if I'm not mistaken.

Uh, might have missed that council dot le Oh, did I?

Oh, did I miss this up?

Maybe it's Travis.

Normally, this should work.

I might have screwed this up.

Oh, the, uh right this.

Let's try that.

Here we go.

You can see that I've done in federation over an array.

This is sort of a thing that you might have seen if you're coming from CS 50 and you looked at sea or other languages like Python, we have lists you can actually literate over a list using this function called for each.

We'll take a look at that in the near future.

But you can see that I have output in my Web browser and the ability to sort of create code, you know, using an i.

D.

That's not terribly great, a sort of text editor.

That's not particularly great, cause it's kind of this is more like a what's called a rebel.

So read, evaluate, print and loop where it's sort of allows you to one line at a time.

And this is what you get with Python sort of interpretive Lee program.

But generally this is not something that you would do for a large program.

This is only for testing.

Generally speaking, um, let me go ahead and, um, read the chat here, so I never got to understand someone.

Kins has never got to understand that Dom thing.

Can't wait to get the thing done.

Yes, so the dawn will take a look at that document.

Object model is just a way of representing.

It's the way the Web browser sort of represents your Web page in memory in a tree.

And so we'll see how that how that works, at least in terms of how we can manipulate it using some basic functions that are a part of most Web browsers, come with all these functions by default.

And so that is what Dom scripting is.

Just another anti anti player.

I just turn this dream.

What is your qualifications?

Do you have any reference?

I mean, sorry.

Let me read the rest of it.

Saying this is CS 50 is a bold statement.

Interesting.

Um, so I've been programming for maybe 11 12 years now.

A long time, A good amount of time I worked with CS 56.

50 is Harvard's introduction to computer science, and it's taught by David Malin.

I work alongside David Malin.

We started this twitch stream, Mr Even Offshoot.

My specialty is more in game development, not necessarily as much into Web development, but as a sort of an exercise for myself and also just to sort of help, um, provide useful content for more of our audience who isn't necessarily into game development.

We've been doing more Web catered streams, so that's essentially our qualification.

Just lots of experience, lots of programming.

But I am not a Java script expert, not even nearly close.

But I completely understand your your question there.

Um, I just don't want other people to think they get a good education, but the guy does not know any interesting.

So it brings up the question of how do you define qualification, I suppose, in the domain in which you're necessarily looking to get tutelage.

So I would say if somebody were asking me to maybe teach them how to develop an enterprise level application in Java script, a friend and maybe something built in react that scaled to millions of end users.

I certainly probably wouldn't be qualified to do something like that because I haven't necessarily developed anything like that or have the insight and does something like that and all the design considerations.

But if you're looking for maybe something along the lines of just showing people how to get started, the basics, how to think in terms of basic programming and computation, I would say that's something that somebody with the right level of experience is certainly capable of doing, and that's pretty much the best that I at least personally can offer.

But many of the folks that I work with have, I would say academically, more qualifications tonight is certainly David at least has a PhD and, uh, on a sandal at this 0.20 years of teaching experience.

So it just depends on your perspective, I suppose if you're a software engineer, um, and are looking to get some value out of this dream, you probably won't because you yourself probably have the same level if not Maur level of experience than I do.

But, um, you know, it's all relative at the end of the day, as long as we can hopefully get some people boot strapped into the basics of Java script, interacting with Web pages, making some simple APS, then we'll consider a success currently taking a diploma in game development, says Tempus Station.

Do you know how easy it is to switch over to software and application development?

Um, game development is kind of a specialized beast, but I would say that for my experience, having general software and application development transfers over to game development games are sort of a very monstrous type of application that with a lot of complications, especially when you're dealing with real time feedback to your end users on day, reliable feedback you know not having stuttering frames.

There's a lot of design decisions that go into implementing engines, modern game engines, things like unity and un riel.

And it could be tough.

Two.

It could be tough designing games on making them feel good in a way that's not generally approached in other realms of software development.

So I don't know.

I would say that games are probably a special class of application development.

Um, but yeah, just another anti anti player.

Okay, that sounds good.

I like that honest answer.

I think setting up a short description for this dream about you and who you are would greatly benefit new viewers to know what to expect.

That's fair.

We could certainly, um, we could certainly introduce that.

We have a much larger following, so see us.

But he has a very large following across platforms like Facebook and YouTube.

If you go to youtube dot com slash CS 50 on, and I'm gonna assume that you might not be necessary familiar with our work, but go to youtube dot com slash CS 50.

Go to facebook dot com slash CS 50 and you'll see there.

We have established a larger audience in a larger sort of portfolio of projects and and videos.

David Malin has produced many years worth of full course content.

Seems fifties course content.

So take a look at that.

That's Maura, I guess where our pedigree is established on twitch it's nor platform for us.

We might not necessarily have that spread.

So I understand where you're coming from.

I think we could definitely benefit from that.

Um, Francis 37 45.

Not your qualifications have to be mentioned.

You're going through the basics, which is great for beginners.

Although from experience, the twitch community is really not suitable for developers.

Um, yeah.

I mean, I think Thio anti anti players point.

I think, definitely having a little bit more at least textual information here.

If it could be beneficial.

I do see where he's coming from.

He or she is coming from and definitely understand the twitch not being necessarily suitable for developers.

Um, I I'm disinclined to sort of impose that umm expectation or stereotype on the touch community.

I think maybe the church community has been more cater towards game development.

I'm sorry towards game playing and streaming and things like that, but sort of bucket izing it and saying, You know, those twitch isn't suitable for development is not suitable for thio programming tutorials.

I I'm I don't feel sort of pleased, you know, sort of furthering that kind of expectation.