seminar, which is JavaScript, The Basics.

So quick introduction.

I am Sela, junior studying computer science.

And we'll be going through the basics of JavaScript.

So in this case, we are going to go over the different data types that we have,

some functions, some looping constructs.

And then we'll also go through JavaScript asynchronous data.

So look at callbacks, promises, async await.

So yeah.

So we can dive into the seminar.

OK, so we'll start with basic introductory JavaScript, which

is, what is JavaScript and what can you do with it?

So JavaScript, in a nutshell, is a programming language.

And then some of the terms that you hear,

whenever people are talking about JavaScript, is it's single-threaded.

It's asynchronous.

So I won't dive into these terms right now, but we'll come back to them.

So a brief history of JavaScript is JavaScript was originally

built to run in the browser.

And so browsers come in [? beta ?] JavaScript engines.

And then JavaScript engines, in this case,

are responsible for executing JavaScript code.

So some examples are SpiderMonkey and Firefox, and then

V8, a V8 engine in Chrome.

But then sometime later on, some brilliant engineer came along and then

decided to invade Chrome's V8 engine into some C++ program.

And then he called this firmware Node, Node.js.

And so what this Node.js framework enables us to do

is it enables us to execute JavaScript code outside the browser.

And so with us getting this capability to execute

JavaScript code outside the browser, that

meant we could now write server side JavaScript.

We could build entire web applications solely in JavaScript

because it can now write our backend in JavaScript

and simply run our JavaScript in the Node.js framework.

OK, so that's kind of a brief history in JavaScript.

And so now we're going to dive into working with JavaScript in the browser.

So I'm going to open a browser terminal.

So I'm going to open a browser window.

And then in this browser, I want us to go over working

with JavaScript in the browser.

So like I mentioned, Chrome has a V8 engine,

which is responsible for executing JavaScript code.

So if you open up Chrome, because I'm using the Chrome browser,

so I'll show you how I got here.

So you can literally open up the Inspect.

OK, so you can literally open up the Inspect option.

And so this brings us a bunch of options,

and then, because [INAUDIBLE] in JavaScript, what we're concerned about

is a console.

So the console is where we can write random JavaScript code

and execute it and see what happens.

So JavaScript is, like I mentioned, a programming language.

It comes with its basic data types, such as numeric data type.

So you can have something like five.

And you can store this in a variable.

So I've looked at variables previously.

So say I said x equals 9 and I can say y equals 10.

And I can do basic mathematics operations

with it, which is, in this case, I just executed x times y, which gives me 90.

And then we could also have strings types.

So let's say I had a name.

in this case, my name is Sela, and I can store that.

And one function that we're going to consistently use--

we're using JavaScript.

It's a console.log.

And what console.log does is it simply prints out something to the console.

So in this case, if wanted to print out my name,

I can simply print out a console.log name.

So in the console, you can also execute some basic JavaScript functions.

So one function you've probably encountered is the alert.

So alert is meant to pop up some window.

So if I run this, so we do see a window pop up there.

And it says "Greetings."

And I could do something.

So let's say I didn't want to say "Greetings,"

and I actually want it to say "Greetings to Sela."

So I can use the plus sign, which really just concatenates some strings.

So in this case, I have the greeting string and I have the name string.

And I can execute the strings together and I get "Greetings, Sela."

And then one other nice feature that you can probably

relate to with Python is as opposed to me using this plus sign to concatenate

my strings, I can actually input Format My String to have

the value that I wanted to have.

So in this case, we're looking at Greetings.

And then I want it to have Sela in it.

So I have Greetings that I can use the dollar sign with the curly braces

and have the name, which I want input there.

And then Close.

And then we execute that, I still get the same thing that I had.

So Greetings plus name is the same as me having Greetings,

the last line, open curly braces, the value that I want to have,

close curly braces.

And then one other thing that also changed

is instead of me using the quotation marks, the quotes,

I'm now using the backtick.

So you can find the backtick right before 1 on your keyboard,

if it's on my keyboard.

I'm not sure about the Windows keyboard.

So anyway, so these are some basic things

you can do in the JavaScript console.

And so we can also go over to [? enact your ?] Script and see how we

can execute JavaScript code from there.

So I'm going to open up an external page.

Sorry.

Give me a moment.

OK, so here, I want us to go over some other data types

that we have in JavaScript.

So we looked at numeric data types.

We looked at strings.

So one of the important data type that I think you need to know for JavaScript

is the object data type.

So an object, really, you can think about it

as something that has properties and methods.

And then in here, I have created a bunch of objects in which I

have listed some key value pairs.

So if familiar with Python, this kind of looks

similar to the dict data type, where you can assign values to keys.

In this case, I have a list of students.

And then for each student, I have different properties,

which is I have a name, I have a house, I have a major,

and then I have a number of students in there.

So we could go over create an object in JavaScript.

So let's say I decided to create a new student object,

and then I'll say New Student.

It goes to open, close curly braces.

So similar to how you'd initialize in dict Python.

And then I can assign values and properties to this new object.

So I can say I want my new student to have a name of, say, John.

And then I can say, let my new student be a member of the house.

I'll say [INAUDIBLE] again.

And then I can say let my new student be a mechanical engineering major.

So I have now created a new student.

So I can console.log the student.

And so if I opened up my browser--

so I have this JavaScript that I have defined, which I have [INAUDIBLE]..

And then this JavaScript, I have included it

in this HTML page, which is just basics.

So I have this particular page open here.

And then if you notice, on this particular page,

I still have the console window open.

And if I had to refresh this page, I have my new student.

That's here.

And OK, so I'm actually printing the student itself.

So if I look at this, I have the new student who I have console.log in.

So I said my new student is going to have the name John, house [INAUDIBLE]

major ME, and then we see that happen there.

And I'm also printing out all the students that I have.

So my student array has the predefined students that I made.

And then we see the predefined students in there.

And so if I wanted to add this to my array, I can simply say--

in My Students, I am going to push my new student.

So we notice array now changes.

Instead of me only having two objects in my array,

I now have three objects with all of them in there.

Now, let's say I didn't want just print out all of this.

Let's say I wanted to go over all my students, iterate through all of them.

So in this case, I want to look over my students

and maybe print out a particular value for my students.

So we can, of course, use a for loop.

So we're familiar with for loops.

And I'll probably use a different one that we haven't used

so much, where we can have students.

And then on students, I can call the loop for each.

So what students loop for each does is it's going to go through every student

and then return the current student that I'm at.

So these return the current object that I'm at in my array.

And then for this object that I'm returning,

I'm going to define a function.

So I'll say, student, where student is a current student I'm looking at.

And then does something with the students.

So let's say all I want to do is just print out the names of my students.

So I'm going to say student.name, because of the log student.name.

And then if we save this, we notice, in our browser window,

I print out all my student names.

Sela, Jim, and John.

So what students.dot for each did, so it goes over, like I said.

So it's going to iterate over all my students,

and then it's going to return every single item that's in my student array.

So in this case, every item in my student array is an object.

So let me show you that.

So we can print out the student itself.

And if I save this--

so you notice student is actually an object.

Then I can do anything I want with that current item I'm at in the array,

or I have that.

So what I have inside my dot for each is this function here.

So this function is a function that's code.

Each time I go, I go to the next item in my array.

And then we can use some nice JavaScript syntax

to actually make this more concise.

So notice here, I have function defined, but then I have no name.

So basic construct fully functioning JavaScript

is you declare that I'm beginning a function.

Then you put some name, and then some arguments, parentheses,

in your brackets, and then have the curly braces.

But then in JavaScript, we are not mandated to actually provide

a function each name.

So in this case, I can do away with the func name

and then just have a function.

So in this case, this is an anonymous function

because I really haven't given it a name.

So what I have inside here, inside my [INAUDIBLE] is an anonymous function.

Now in this case, I have an anonymous function.

So with [INAUDIBLE] of JavaScript, they decided, well,

I'm not giving this function a name.

I might as well just not have it there.

So then they introduce another syntax, which

is the fat arrow, where I do it with a function.

And then, instead of me having function student,

I just do student, which is the parameter, the argument that I'm

positing, which is going to pass into my function, and then have this fat arrow.

So we're if we run this code, it's still as same thing.

So it's just more concise, and you'll probably

come across this notation, this type of syntax, from time and again.

And so they just didn't end there.

They went further.

And then they said, well, I have a function.

And so my function takes in one argument, which is student,

and it simply has one--

it just returns one thing.

And the only thing it returns right now is just console.logs.

In this case, print out the name.

For this array, I, as well, don't need to have my curly braces here,

and so I can just do away with them.

And if I run that, so notice, it still does the same thing.