So today is Wednesday, May the eighth day one of our class here on CSD 3103 NPM application development. I will share this link out if it's of interest to anybody to go back and review it later
All right, so we're gonna go through the course outline in a couple of minutes. We're gonna go through the course outline, but first let me give you some general sort of knowledge what we're doing here. So as discussed up there on the whiteboard, this course is about NPM J s.com node NPM application development, JavaScript application development. Primarily web applications, but you could use it for other things as well.
Now JavaScript, we've already said is a programming language it was actually developed and when I click out the PowerPoint later if you want you to get more of the back end of it
okay, well, you're not because you're out there. So that's not true. So you remember this last year? I'm gonna talk to everyone who's younger say, Okay, why wouldn't you want to
take the bus? They just came out and said, it's our fault that you were late. And nothing else what happens? I just made my day. Thank you so much. We were late. That's not because of the bus. Okay. So now in short, I said you could come in I don't remember saying you could talk. Yes. Why? Louder? I don't know what's happening. Oh, I see. Thank you. Okay, good. Three. Oh, yeah. Okay, well just make a big difference. But thanks for catching up, okay. Because they change around the course numbers every year, so it's hard to keep up with it.
All right. Wyatt. Thank you. So I don't know if you guys have ever seen something the old people have called a TV set. That's what you watch Netflix and YouTube on for laptop computers. So anyway, in the 1980s there was this thing called cable television. And instead of watching television signals off the antenna, you can get cable and you can watch TV that way. And then they started having things like first run sports first run movies, and so premium content. So they needed a way to only let paid subscribers watch that content. So he developed these things, a lab called Lucien Labs, which was a subsidiary of Bell Labs, the people invented the phone system. They made these things called desktop decoder boxes, and you would pay with your credit card every month. You could get packaged ABC, whatever, you could get the children's stuff or the house and garden channel or you could get first run sports or whatever. And whatever you pay for your subscription. There was a sim module subscriber information module just like you on your cell phone. And every month, the service provider would blast out onto the cable so everybody would everybody's desktops that box would get it. They would get the enablement for that month. So if you were a little tear to first run movies, first run sports, whatever you put, then turn your channel changer and you could watch those activities and that was controlled by this desktop box. But as you can imagine, they need a programming language to make that work. So we developed a programming language called Lucifer. So the first incarnation of JavaScript was Lucifer. And people didn't like that name. Because in Christian European mythology, Lucifer is the devil. So people are going, Oh, that's crazy. You don't want to call it Lucifer. So then JavaScript was just starting to become sorry Java programming, which is just starting to become a thing back then. And for those of you who are more comfortable to read, as well as listen, I kicked out the transcription seeing follow that as well. So anyway, the Java programming language, you know, that's a pretty cool name. So they changed the talk on Lucifer, and they renamed it to JavaScript, and JavaScript because it had been developed for these desktop cable decoder boxes was very lightweight. It didn't do too much, but it didn't have to was very lightweight. And it was it lived natively on the network, right? It had built in enablement for net sockets and stuff like that. So when Marc Andreessen bought Netscape, which we still have today, by the way, Netscape is still alive now. We call it the Oprah web browser. But it was the first commercially successful browser. And Anderson came up with the idea because the earliest web browsers were just HTML, no interactivity. No programming, no forms, nothing that lets user interact back to the server. So Anderson came up with the idea. He said, What if we put a programming language in Netscape in Netscape browser, and then we can extend right so developers can extend the capabilities of HTML, and we can afford and people can like click on an image and get something to change and all that all of that stuff happens with JavaScript. So anyway, java script then fortunately, and here was a very lucky situation. JAVA script was taken over the European ECMO script II see ma ECMO script European computer Manufacturers Association is the owner of JavaScript. And that was a big reason why JavaScript became a major player in the technology arena, because of a company like Microsoft owned JavaScript. People would say, Well, what if next year they change the licensing terms, and you have to pay to use it and it's not free anymore, so people would not have jumped on to JavaScript, but because it was owned by this nonprofit corporation. That was a big reason of the success of JavaScript. Even today, we described JavaScript as being the ACMA scripts specification, ECMO script six ECMO script seven, whatever, and you go and read the specifications and all the things that does. But anyway, that is the backstory of JavaScript. So anyway, now let's go and get going with laying out the details of what we're going to do in today's course. So this course is about JavaScript application development using Java. So anyway, now how does node fit into it? So now I've told you the origin story of JavaScript. Now in 97, I think you can go on google the details, but a smart guy named Ryan Dahl and I believe it was 96 or 97. Somewhere around there, came up with the idea because by 97, a lot of people were learning JavaScript. It was a very easy language to learn. It was finding more and more applications also in consumer electronics. Right. So home security systems, internet of things, right, basically embedded processor, the toaster, if you go home tonight, look around in your kitchen, the microwave, the fridge they all have microprocessor one board computers, and the programming language for that is probably JavaScript. So Dahl said, what if we could take JavaScript outside the browser and run it at the command line on the server? Because the reason that we're the way that JavaScript runs in a browser is because of the Chromium interpreter engine right the Chromium JavaScript interpreter so the actual runtime environment for JavaScript is.
Chromium, and that's a piece of software. It's a code base, and you can go and read about it. It's open source. In one of my other places I teach we're actually building our own JavaScript language interpreter based on Chromium. I can't do that here because it's written in C Plus Plus, and you guys don't have C Plus Plus, but it's not a hard exercise to do. And I think it's called va.org. So this is the this is not alright. I want to just call them chromium. When you lynnium chromium.org Do they change it used to be called V eight?
Are you guess they changed it now? It's called chromium. Alright, well, that kind of makes more sense. Uh, yes. So you can go and download the source code here and look at it and do all that stuff. No, actually, this is Chrome as in Chrome web browser what I want sorry. Just a second mill you.com website or chromium? The JavaScript interpreter?
Va 30 All right. I'll get that in a second. Hang on.
Yeah, so VA is Google's JavaScript interpreter engine. And it's basically a wrapper it lets you get access to chromium at the command line, because Chromium is also in the web browser Chrome. In Firefox, it's called Spider Monkey. And an Internet Explorer. It's called something else. But anyway, this is the basis of how we're able to run JavaScript in a browser or at the command line. And here you see ECMO script, right? So we talked about that ECMO script controls the specifications and so on. But that's probably a good thing to bear in mind. Maybe you'll be tested both out on a test at some point.
So Chromium is the JavaScript runtime environment, both in the web browser and in the command line
now, if we put it in the browser
then we have something called the balm which is the browser object model, which is the set of API's created by your browser when it consumes HTML tags I know this is a lot of information and might seem overwhelming. I have nice, you know, lecture notes and nice PowerPoints, but let this be just the first time you're hearing it to start to get exposed to it. Later on. We'll go into some coding. And we'll go through all of this stuff from the beginning again next week. And after a couple of weeks, it will be quite familiar. So don't sort of get overwhelmed. In the browser. We have the bomb browser object model, which is a set of API's, which lets JavaScript talk to the HTML DOM elements browser object model. It's a set of API's created by the browser. So when the browser consumes a DOM, which is an HTML page, which is a data structure of HTML tags, set of API's created when the browser parses renders the HTML DOM. Now, if we want to use no J S, so in the browser, we have bomb in the console, so we use no J S. No js is a C Plus Plus Perl program. Which wraps around chromium.
It's a mediator pattern. Basically.
Which wraps around chromium, VA.
And it takes the JAVA script and it turns it into the API calls to the operating system, Windows, Mac, whatever you're on. It takes the JAVA script, it converts it into stuff your Windows operating system can run and then it returns the result back in the format of something your JavaScript code can deal with. That's what a mediator or a wrapper pattern is, in general, it's like a translator. Like if you're trying to talk to somebody, you just speak English and they just speak Spanish. But then there's somebody who can convert from one language to another that's a mediator. Chromium is the converter between JavaScript and Windows operating system or Mac operating system API calls. So node is a C++ program mediator which wraps around chromium V eight engine and interfaces connects it hooks it up. To the operating system API calls.
So anyway, our course is going to be primarily about node. We are going to do some stuff in the browser, but primarily we're going to be dealing in node. And now node has a rich ecosystem which is called NPM. J s.com. Which is like GitHub, except it's specialized for node packages. NPM J s.com. So the first thing I want you guys to go and do here is get yourself signed up over here. So go to NPM J s.com. And sign yourself up and I suggest you use your personal, not your college email because if you get into this stuff as a job or whatever, or if you want to keep having access to your stuff later, when you graduate, your college email goes away. So I'll give everybody two minutes to do that. Now that activity NPM J s.com. Because in a couple of minutes, we're going to install have you guys worked with Visual Studio code before in your previous classes? Yeah, so so I don't have to do you already have it good. So that's going to be our main tool. We're going to install node j s and then we're going to go and start writing some applications.
NPM J s.com.
All right, so next now let's go our next activity is to install node. So let's go and install node.
So for you guys were late. There is a page in Moodle, which is going to be a repository of all of our stuff. So you can go there and get it there's a link to our mind. Map.
Alright guys, now that you've done that, here's our next activity. Let's go to the node website. Which is a very odd name. It's no jas.org or something that's an unusual name node js.org I got it right the first time. Alright, so everybody go to this website, find the installable which is suitable for your environment and get it installed and running.
So node j s.org. Go there now. And the way you're going to know that you've got Node installed, if you open a command prompt, and you type node you're going to see something that looks like that.
To
see alright guys while you're doing that, I'm going to kick out our PowerPoint
evening Alright guys, so keep your eye on the activities landing page. I'm also now putting a link to our PowerPoint. I'm not going to upload the PowerPoint file because I use it as a whiteboard. I change things there all the time. So if you always go to the Dropbox link, that's the fastest way of getting things. So I'll put that there now.
Alright so by now you should have downloaded and installed node so let's carry on. It's going to show you some of the stuff in the PowerPoint here
so those are two one for class Visual Studio Code no Jas and we have all that stuff. So let's get going. So now let's go and make a simple project. So everybody start by starting your Visual Studio code. And I recommend you run it as administrator because you're going to be starting and stopping operating system processes and doing some other stuff like that. Now the way it works here is we're going to be writing JavaScript code in a file. And we're going to run it at the command terminal which is built into the Visual Studio code. So here I can go and say View terminal and then I get basically the equivalent of a terminal down there. So whatever I can do with a regular terminal I can do here. So first of all, I'm going to make a directory for my work. So I'll say cd colon, backslash would love to the root and then I'll say MK dir call whatever you want. I usually named things by date 20 24.0 5.08. And now I also need first of all you need to change into that directory CD 20 24.0 5.08 Now I also that's my terminal I need to
you're up here at the top that shows you which folder you're in. And in Visual Studio code. I don't know why my pen isn't starting. It shouldn't be but anyway, we need to reinstall it. So I have to go and change to the same directory here. So I'm gonna say File, Open folder. And just open that folder we're gonna create a file, so select folder. And if you're not too sure on that, we'll go into the whole thing again a couple minutes
so now let's make our first node js program now remember, what's the difference between no Jas and JavaScript? What's the difference between no JS and JavaScript? Well, that's not the question in the sense because JavaScript is the language in fact, let's make some diagrams here to help ourselves keep those visually organized. Because one of the big problems with programming courses is it's quite easy for the instructor. The easiest thing for the instructor is to just shove a bunch of code at you and say, you know, copy and paste this and get it running. And the student gets it running. And then they think, oh, yeah, I'm pretty good. I know all of that. But unless you can understand and explain how the code works, and reproduce it by yourself, you haven't really accomplished anything. So let's go and get some good foundational understanding of what's going on here. So I'm going to go to my drawing tool, which is, shoot I forget now. We will I just started using it the other day, a little drawing tool. It's good.
Spa spa spark something about Google spark.
You Lucid Chart that said Why couldn't I remember that?
All right, so imagine that this is JavaScript. Chrome. node is a runtime environment for JavaScript. JavaScript is a programming language. So it has variables, loops, methods. Objects, functions, and all the stuff that a programming language has. Already started a free trial. What's wrong with these people?
Day David
evening Alright guys, I just had to update one of my back end systems here. So JavaScript is a programming language by a programming language needs a runtime context, right? So if you have Java, then you need Java Development Kit. If you have Python, you need the Python interpreter and so on. So what is the runtime environment for JavaScript?
Know seriously, I'm asking you what's the runtime environment for JavaScript? Oh, thank you for paying attention. Good. So we need a runtime environment now. To get it up. And doing something.
What two kinds of runtime environments do we have for chromium? No, Jas, yeah. What's the other one? router
so no J S is one runtime environment. It's one place where we can run JavaScript. What's another place? We can run JavaScript? Web browser very good.
The browser can run JavaScript for the same reason. No, Jas can run JavaScript, which is that it has chromium built into it. In fact, you can think about a browser and no, Jas both as being rappers as being sort of software that gives you access to chromium. Chromium is the real guy who's doing the job. So therefore, let's go back over to Visual Studio code now. And we're going to make a very simple program. So we'll say File, New File, call whatever you want program one dot j s. And we'll give it a very simple command like maybe console dot log. Hello. Now the semicolon in JavaScript in no JS JavaScript, the semicolon is optional. You can have it or not if you put it it doesn't make an error. If you don't put it it doesn't make an error. So make yourself happy. I generally put the semicolon just cuz we're used to putting it everywhere else. So it's just by habit, but go either way on that. So let's save. Now how do we run this? Well, let's go down to our command line. Now. Why isn't my EpiPen running? I like to draw things with this epic kind of makes me feel happy
anyway, there is my file. So I can say node. Program one.js. And it's opening the word hello. Alright, you guys want to take a break. You want to keep going? Keep going. Good. I love you. I love the excitement right? Let's keep going here. You want the break, don't you? Alright, let's take a break till 1030 We'll pick it up
doesn't matter.
A desperate
Now
Right luck.
Monday.
You that was
I got a text from my colleague he has been practicing.
Sunday
going on Thank you
name is
Chris interdigitated
This is
Lucia. I want to say Save as it's a
reference here on COVID expert.
Nothing
to do with the concept one minute.
video called the very top most
sticking to the system.
Thank you
is free
I will come with
some
jitsu. Dollar
all good
me right we'll start off at 1035 I forget what I said for the break in time. We'll see 1035
On alright guys, we'll pick it up in three minutes.
See alright folks let's get back to work.
Morning. All right, we're not getting off to just ash mean
dama tree just unclean.
Muhammad, Priyanka
Ramandeep. Smile breed
Massoud cherry, arch or Joon
Johnny depledge can do
just need come on Monday Nitesh schita protsahan Raj Kumar Sandeep. So rough cheap as you have Raj
today cash is free and was gone.
Great. Alright, so, let's start going through some of our lab rules. Now we're gonna do the course outline. We'll get to it before end of class, but it will be more comprehensible after we've done some some hands on so let's go and do that
got a call it up from my server here. There. We go.
Alright, guys, so go and access your class activities page which is way up there at the top and in a couple of seconds. I'll put it there. You can refresh the page. If necessary to get it so day one right.
can get it from right there go and do that now please.
All right. So I'm guessing now that everybody does have Visual Studio Code setup and you've made a project as we did before. So let's go and do the whole thing again, starting from the beginning. So the objective now is familiarize yourself with the basis of Node js development. We're going to be pulling down some packages from NPM J s.com. You don't need to sign up for an account to use those packages. By the way. I just wanted to sign up because eventually you're going to be starting to pour stuff up there via NPM publish. And Visual Studio code which we have and executing JavaScript code and drills.
Okay, come on is the bus bus? Yeah, so I have no
idea Alright guys, so um, I said you can come in I didn't say you can talk. Sheesh. So let's go and set up our Visual Studio code as necessary. So once again I'll close mine and take it right from beginning going to start Visual Studio code as administrator
and we're going to make a new long project now actually, you can use stay in the same project you're in before nothing's really changed. So now let's go install some extensions. So we're going to go now II and also let's get live server because we're going to be using it to serve up some web stuff later on. Maybe you did that your previous class if you're not doesn't matter, we're going to cover it right from beginning. So install es lint. So you notice over here now on the on the left side of your screen, the top tab is File Explorer. And then you have something you can search. You can hook yourself up to get up debugger and what we want right now is that one that looks like shoulder pointing down, which is extensions. So let's go and search for ES lint and I already have it you can go ahead and install it. You can go read the details later on. The documentation to see where to look for and also get prettier
which again I already have so you would put it in there. It's a code format or enforces consistent style by parsing your code and keeping it in a well structured format. Alright, let's get NPM
NPM support for Visual Studio code once again I already get
all right. Once you've got all that let's go make a our first file right so we talked a little bit about well actually we haven't really talked about NPM node package manager is something that lets you suck down packages from NPM J s.com. You can also push your own packages up there. It's basically like GitHub but specialized for node. So let's go and take a look at NPM J s.com. So one of the things we're going to get to later to make a web server we're going to use the package called Express and you can go and read the details, right? They have some sample code. You can study things like how much is being downloaded 27 million times a week. So that tells me it's probably a popular package, and it's probably worth investing some effort in learning. However, we'll get to that later. Right now let's go back to our instruction book. So create a file called hello J S and print hello world to the console. So go and do that. I'll erase the file I had before just to demonstrate that we can do file management here we can we can rename files we can move around all that stuff. So I'm gonna create a file called hello dot Jas.
And just play around with it right the purpose of this lab is to give you some playtime
Why did my screen just cut out? Shoot it's always something with the projector everything works fine except the damn projector
don't know what's wrong? Maybe I'll just send out a zoom link for screen sharing. I don't have time to play with us. Now totally powered down maybe the projector is the bulb is wearing out or something
alright guys, I'll play with it right now. For right now we'll just send out a screensharing link. I'll get the IQ guys in here. Look at that later. From the fan it sounds like it's overheating. So maybe the ball needs to be replaced. Alright, hang on. I'll send out a link
anyway, I'll send out the link of the projector decides to come back to work later we can start using it again. Alright, so start an instant meeting.
Alright guys, if you check your news forum, there's a link there called day one screen sharing link. And if you click on it, and it's probably for you guys at the back, it's probably even easier to see that on the screen. So go and get that now
actually, you don't even really need the screen that much. You just need to follow along in the lab book you already have.
All right, Gaurav is in there. So I know that the I know the meeting link is working so great. Alright, the rest of us. Let's just carry on with our lab stuff down. So over here in Visual Studio code you've written your program, save and run
does not exist in JavaScript. So our way of doing that is going to be console dot log. Alright, so that
rate was one sec.
Got a bunch of people coming in there. Now good. Ah, what's our next exercise? So basic variables. Now you know from your previous programming courses, that variables are temporary, during program runtime ways of storing information. If you want it to be stored persistently, you need to put it in a database. So let's experiment with let constant var and see what the difference between them is. So I'm gonna go I'll just update my existing program. I won't make a new one.
So let's say I make a variable called V equals one. Var B equals A string, maybe dog or something. And let's see. equals true so we'll make that Boolean AND const. Joe equals seven, maybe make it a real number. So 7.3 All right, so let's experiment around now here. Let's print these out and see what they look like.
The only purpose of today's class is to just get familiar with Visual Studio Code, no Jas formulations. Of different codes and JavaScript in the Node js console object model.
Alright, so just assign some variables and then print them out to see what they look like. And notice here there's a one in my file explorer in Visual Studio code. That's its way of telling me I have one unsaved file change. And there we get our variables printed out. Now suppose we were to try to reassign see what would happen in that case? So c equals cat.
Now the difference between var and let has to do with something called variables, which is a little bit more of a complicated topic. I'm going to put off on right now. But you see lead can be reassigned and const we probably suspect cannot be reassigned.
Because it's a constant supposed to stay on changing the purpose of a constants to wom. If you have some variable, if you have some value, you don't want to worry you might accidentally change it. You can declare it as a const. Anyway, since we're here, let's play around with a few more variable formulations. Let's start to make a simple loop
so here's a very simple example of a loop. And I wish that my pen was working so I could point to things here on the screen but I don't know I'll reinstall it later. At will this loop work for and then I have round brackets and I just have two semicolons. If I run that, is it going to run or make an error? And in fact it's going to run and it's going to run forever because the purpose let me use my screen drawing tool here.
So this is where you initialize your loop counter. So I could say I equals one. And here's where I could implement my increment my loop counter. And this is a guard condition. And if you don't specify anything, it defaults to true. So this will be an infinite loop. Let's give that a try. So we'll say console dot log. Help I'm stuck in an infinite loop.
Going to make my font a bit smaller because I can't see the whole screen here.
All right, let's save and try running that.
And to get out of that infinite loop, I can hold the Ctrl key and tap plus. All right, now let's make it something more useful. So since we're studying about variables at this point, I can say var at actually here's going to be one of your test questions. See if you can do it by yourself. This will be a test question. Add the numbers from one to 100 and output the result. You should now using your knowledge of Python which you've already studied. It's so similar you shouldn't be able to figure it out. Add the numbers from one to 100. So one plus two plus three plus four and so on and output the result. Do that now
okay? While there to get started
Ladies, do it. Okay, go don't
do it okay. You got to go and put the answer.
All right, so basically I could put my loop controllers in my foot, or I could put them outside. I'll just do it this way for right now. So I'll say start number equals one and n number equals 100. And my step number I'm gonna step up by one each time and other situations I could step up by different numbers. Now here at my for loop. The only thing I need to have is the guard condition. Because I'm going to manage my start number and end number separately. I could manage them here. That's the standard practice. I'm just doing this to demonstrate you that you don't have to. Same thing in Java. You could do the same thing in Java. So here I'm going to say var time to stop or whatever, like whenever we reach the top number of time to stop and I'll make that a Boolean I will close because it is not yet time to stop at the beginning it's not time to stop. Now here in my guard condition which is the middle term of my for loop, I'm going to say time to stop
and once again, this will continue to be an infinite loop. Now here my my IDE is warning me I'm not mutating my guard variable. So it's kind of nice, you know, it's helping me out a little bit there. But I guess since I'm adding the numbers, I probably also need a sum variable so we'll say var sum equals zero. And now here in my body of my loop, you probably want to say sum plus equals now think carefully how you're going to do this. Now you got to figure out the algorithm from one to 100. Well, each time I step through the loop, I'm increasing my I mean, I probably need another variable called current number by the way. So we're gonna say var current number because I know where I started. And in fact, I could actually make these to be const because I don't want to ever change them right. If this is a complicated program, I might accidentally change them. But my business logic of the situation says I really don't want to, so called start number const in number
and now var current number and my current are probably starts as being the start number right that would make sense because that's where we're starting.
By the way, as of ACMA script six and later, and in a future class, it's a little bit advanced. We wouldn't really understand it at this point, because we don't have enough exposure to JavaScript, but maybe in week seven or week eight, we will talk about the what's the specification of ECMO script six, which is the current JavaScript specification, and we'll see what's expected to come down the pipes for ECMO script seven, but one of these specifications one of the little rules that's written into the ACMA script six specification says that you should not use Var Var. They're going to get rid of the future they're advising us to use let why they're advising us to do that has to do with the way memory is handled in JavaScript. That will be a topic for a future day.
Alright, so I guess I'm basically set up now we just need to get our algorithm going in, in our loop here, so sum plus equals what? Probably the current number I guess. But we also need to increment the current number. Now I could make a separate statement. I could say current number equals current number plus one. I'm not sure if in your previous Python course, they showed you about pre and post incrementing variables. If they haven't showed you just pay attention right now. So I can do this. I can say sum plus equals current number plus plus, and the plus plus at the end means access the variable first and then increase it by one. I could also pre increment it so I could put the plus plus at the beginning that I would say incremented by one now use it. And I could also put minus minus and either the beginning or the end. So that would be a post decrement or a pre decrement. But I suppose this is probably what I want right now. And when do I want to end? Probably now I need to use an if statement. So I could say if current number is greater than n number, then I probably want to put my time to stop to be true. I think so. By the way, I guess we can set up a I guess we can set up a have you guys work with GitHub? No, Allah doesn't matter. It's pretty simple. I'm just thinking I can set up a GitHub repo because this has been put in a couple of weeks where we get to setting up web servers, and MongoDB database servers and stuff, and it's gonna get complicated. So GitHub is a fast and easy way to share code out. Anyway.
Let's look at this do a little reality check to see if it seems okay. Now one point you could get messed up on is
your brackets might you might not balance off your brackets the right way. So here the first point at which I have a bracket is here for my for loop. And if I click there, it should highlight the corresponding closing bracket. Well, actually, I forgot to I forgot to implement the logic here. So now I'll say if current number is greater than N and time to stop equals true, so my click here I don't know if you can see it, but right around here. It's a very faint, it's probably not showing over the screenshare but there's a little bit of a highlighting that is the linter in my IDE saying that's your colon bracket. By the way, lint linting linting is not that little First off, that builds up in your belly button. And sometimes you need to scratch it out or you're going to look all gross at the beach linting in this case means that your IDE has an intelligent awareness of how your language server works, because remember, we made our file dot j s. So dot J. S tells Visual Studio code this is a JavaScript file. So apply the JavaScript rules. Is it going now I suppose it probably could be. Now let's look here at my Problems tab. Because Visual Studio code is pretty nice and helps us out as much as I can. Let's click on problems. Unexpected. Well, that's actually a warning that's not an error and start number and so on being an unknown word, that just means it's a spelling mistake of Donald the dictionary. However, Oh, yeah. And because it knows that I'm an ECMO script six, it really doesn't want me to use Var Var is going to ruin your life. It's going to mess you up. So let's avoid var use only left to be consistent with best practices. Alright, I guess it's probably ready to go. Let's take our new toy for a spin for Yeah, I could do this with a while as well. I'll demonstrate that in a minute. But let's save and run. So save. And go to your terminal right there. Called my program hello.js. So we'll say node hello.js.
Oh, because I didn't put an output statement for the final to show me the final value. So here I'll do console dot log. Some some is some. Save and Run. By the way in PowerShell terminal, you can type CLS to clear the screen. You can type the up arrow key to scroll through your history of previous commands that you entered instead of retyping them. So I'll tap the up key a couple of times. And the sum is zero which is definitely not right. So I did something wrong here. I gotta go. Oh, well. Ah, why is it zero? Let's find out. First of all, I have a cold that I have in GitHub. So maybe you've already got your code working fine. Maybe you want to play with my code to see what's going on. Anyway, we're probably going to need a class GitHub so let's go and get that set. Up.
Alright guys, I'm gonna kick a leg out and you can jump in there and get my cold. If you want to follow along. You don't have to you can write your own code. But if you want my code, I'll kick it out here.
So I'm going to put it in the class activities landing page at the top.
Alright, so if you want to grab my code, just go to here class activities landing page and just get it from here. get.com Techno mage that's me online. Alright, let's carry on. So I got to fix my own code. Now. What did I do wrong? Let's figure this out carefully. Well, this would probably be a good time when things don't work properly. It's a good time to call the debugger and make sure that the variables are getting stuck the way you think they should be. So use a debugger to double click right there on line 11 Right at the start of my for loop. And I'm going to click here you see my fourth icon down it says run and debug. So I'm gonna click on there. And I'm gonna click on run debug. And it's going to ask me can't start the job I don't want Java language server. Why? Is it telling me about the Java language server? Now here I want to on Node js, gold js. All right now what's your everybody pay attention? You see, we have two windows here in the debugger. And another day I'll tell you about the Von Neumann is basically the watch window. This shows you the status of your variables. So shows status and values of variables.
And the call stack down here
the call stack shows you the status of your methods every time you call them. This is true of every program. I'm not wanting to human. We're not doing anything with quantum computing, any classical Von Neumann architecture programming language which is all of them, write Python, Java, JavaScript, PHP, Pascal, what more because every time I call a method, I'm going to see a new frame stack popping into existence right here. So new frame stack is going to pop into existence right here, frame stack equals method.
So if I call another method from within my first method, I will now have two frame stacks. And that's why it's called the stack. Call Stack because it's a stack of frames, and a frame I'll show you what's going on and then we got to get you on my belts
so now I'm going to use the debugger to figure out why. My output is not what it supposed to be. So
now look here. Do you see that line 11 lighted because that was my first breakpoint. And now I'm gonna go and start adding to my watch window and then add the variables. So I want to see the value of start number
you used to have a thing where you could add variables with the menu. I don't know what happened. Now you're gonna have to manually but it used to be there anyway. So I'm just gonna grab this and I'm gonna go to the last part of the watch model. And it's telling you you see the one there, my start number is one, which is what I expect it to be. Let's do this for the rest of them current number one, that's usually the current numbers at the start number and there should be 100.
Time to stop. False sub
zero. Yeah, that makes sense. That sub zero initial Yep. Now one here I flow of execution. And as I step through, so now we can go up to the top. Here, at the very top, you have your debugging control panel, and I'm going to use that function right now. So we'll step through line by line, and I'll pay attention to what's going on with my variables. And in fact, when they're doing static, I probably don't want to go to 100. That's kind of tiring. So I'm going to start my debugger by clicking on the square thing. And it's gonna change the number I will go from one to five because that's more natural and everything else can stay the same. So now save and
Alright, so now we're going to step over line 11. And I jumped all the way to the bottom. You see guys, does everybody see what just happened? It did not go into the loop one time. That's the first problem I need to fix. So not going to stop the butter the time to stop. So that's my dark condition. Got the logic reverse. That has to be true for the loop to keep running. So I need to say continue counting. See, I made a mistake in the logic. So I'm gonna say but it's a good mistake because it's a reasonable debugger. So we'll call it continue counting equals true now let's go do this again. So save and rerun so run a debug log here time to stop my variable. The watch window says it's on references I change that that has to be changed to get counted.
So now in line 11, let's step into and some should have now changed to one from zero to one. Why did I jump on my debugger?
So how can I set step over I should have said step into
so now we're down here the highlighting shows me on line 13 Why is it jumping? Jumping over the debugger? Why is it doing that? Alright, let's pick this up again
Alright, so I'm gonna start now. I'm gonna put people breakpoints and everything there and we will make sure it's saved
so start number currently is undefined. When I step over line one. Start numbers now one Yeah, that's correct. Current numbers should be set to start number which is one. Yep. And number should be set to five. Yep, continue counting should be set to true. Yep. So you see the thing of using the debugger, I have to first of all, be able to predict I have to have an idea of what it should do. And then I'm going to see if it's going to go into direction which is different than what I think it should be.
So we're up to solve which is actually so now I'm in my loop. And by the way, if I hover over a variable it will also give me the it'll give me the evaluation of it so that's any variables what most most jobs repeated. So ah, you have time to stop is not being recognized though. It should be recognized as a true Oh guys, you see what I did? Look, this is something that happened. Because in JavaScript, you don't have to define your variables, usually a mistake I made. I changed my name to continue counting. But I forgot to change this. And if this was Java and you want an undefined variable would be a compiler. JAVA script will let you use variables now for your binding. So the server variable is set to true so it looks not gonna continue. So it's gonna fix that. So now I'm going to change this to continue counting. First of all, I got to add my debugger and still in my debug, say stop in the debugger. I will change this to continue counting let's try it again. So File Save. Run a debug Alright, so we're okay after the loop. Now we're on line 11 continue counting if you see actually the thing that told me this before when I hovered over time to stop and set its value was no immediate didn't know what's going on. Now it knows that it's true. And the true value of the guard condition for Louie to keep going. So now let's put down here to line 12. So some current number currently is one. And sub Chanel gets set to one from zero. And product numbers are changing to see the power of the debugger. And this condition, you can also drop a watch on an expression by the way, so I could drop a watch on this combined logical expression
and that's false. So it's not gonna say time to stop by the way, here's another place. Pray for Dr. Change. Time to stop to continue to see that still time to stop there. And if I change it here, I don't think it'll get worse. Nope. ECMO script it didn't I don't know what's changed now through the experiment.
Here, I can restart my stack right. We'll say Save and restart. And I'm just restart the debug basically. There I am back on line one. Let's do this again. Now it should step over line 13 without executing it because current number is greater than n number. So let's back up to the top of the loop. continue counting is now as the true current number is true. Someone's going to get changed from one to current number which is
now here we are. The current number is five.
And five is not greater than five. It's equal actually in terms of the logic of my situation. I should have probably made that greater or equal. But anyway, let's continue this.
Now I've got another problem, which it's never exiting from the loop. So let's try to figure it out. Because three, plus three is six. Some should be 15. So for some reason, my loop is an infinite loop. Let's use the debugger. Why? Because it keeps looping around. It's not exiting. Now it should exit. Oh, you see my logic here. I've set continue counting to true here, it should be set to false. And I forgot to do that. So that's why it's in an infinite loop. So let's fix that and save several interesting things here. And this is a little sort of example of a combination of programming problems I've seen students encounter. And so hopefully now that you know how to use the debugger, you'll be able to get yourself out of that hole once you're there. Alright, let's restart the debugger and try
Alright, so
current number is three. Current number is four. So let's look at the logic cash. Credit number four is for greater than five nose
and finally bailed out at the esophagus 50, which is correct. So now all of the logic of our program is correct. All right, so I'm gonna put the finished version of the program in GitHub if you want to go play more, but you're gonna get questions like that on your first test. In fact, it's 1130. So as much as we're all having fun, I suppose we should go over the course outline and the evaluation timetable because that some people don't
like web applications with JSON.
I'll just do one more thing here. What happens if we want to change this to a while loop? Well, it's pretty simple. I just changed for a while. And I just get rid of these two semicolons and everything's gonna work the same as before. So now we'll save and run I won't debug I'll just run the program. Yep, sounds 50. All right. So put this away for right now.
So your course outline. Oh, actually, I have to upload it. It's not uploaded here yet. I'm going to do that. Now. Let's go over and read through it first.
So the title of our course is full stack JavaScript, which means we're going to be the mean. That's the full stack JavaScript is.
Does anybody know what myrn is? Mongo, express, react, and node and also mean Mongo database, express, Angular and notes. I'm going to be teaching you how to develop applications and those different words, because those are good examples as well to teach you JavaScript. They don't tell me exactly how to do it. So I'm gonna teach you some interesting web development frameworks. As a continuation of web technologies to you'll design and implement them province based web applications using JavaScript and JavaScript, actually node NPM JS frameworks.
This course integrates
with just a little bits of your way. Similar, you'll develop software applications. Using modern JavaScript standards like ECMO script six. You'll develop web applications using a no SQL meeting JSON database. JavaScript Object Notation is a seamless database, right? It doesn't use primary key we'll talk about next week. You will implement applications using micro architecture. So you're going to implement service oriented architecture applications.
You're going to develop applications are running a variety of computing platforms such as cloud computing platform so.
You're going to add to your term project and web technologies to by designing and implementing component based applications that include client side, server side database and that's what we refer to as the MVC model view controller.
The constant now you have some exposure to them, guys. Sheesh. Thank you. We're gonna learn how to use JavaScript block statements. Template literals spread operator, JavaScript module old system
and full stack applications running on the Node js server such as express.js Why thank you. Such expressed audience that we previously saw NPM js.com. Oh, I realized I just realized we should probably take another break around 11. So we'll keep you exactly till noon. We'll end up at like 1159 for Mr. Regular. You're welcome. So develop web applications in a no SQL database. Now the concept here is the kind of database you've learned is called SQL which is reliant on the primary key. What happens if you don't have a primary key? Or you can't use SQL because you can't make tables because tapas call it call it laws is dependent on primary key. Why would you ever not have a primary key what's it called when you don't have a primary key?
So you're gonna learn Big Data skills here is what happens when you don't have a primary key which is what you need for people.
So imagine for example, your friend calls you and says, you know, my mother is is flying into Toronto next week to visit I'm busy I can't get off work can call for me you got a car, can you go to the airport and get my mother because she she doesn't manage to well by herself and can bring her house you're a nice person. So you say sure. And then you say what is your mother look like? And you think about it, you go well, she's not too tall and not too short and she's very cheerful. Look for somebody who sort of not tall, not short and very cheerful. Now imagine you're walking around in Toronto, we're looking at people looking at women. And the security guy comes over and says Sir, what are you doing? While I'm looking for a while? Okay, what time What are you looking for? Well, not too tall, not too short and cheerful. They're gonna bring into the back office and look at your ID figure out what's going on with you. So the point I'm making is that in the modern world, there's a lot of consistency in something because I don't know my wife pays the bills, right? I make the finances. I just put things on my credit card and from month to month. I don't even know what I spent. So I got to ask you
$25 a month.
Okay, sorry. Maybe we're not understanding each other. Let me ask you another question every year, Google and Gmail and I think they charge you like $30 a month for like 1000 searches a month plus Gmail. But everybody says they want to work at the same companies and you get paid such big money. There were people who were working there as volunteers. Were they they call this one advertising exactly the way advertising works. And there are big servers in Arizona, right, they put into the desert, lots of ways to set up solar panels for electricity. There are big river farms there that have what are called a digital twin. Everyone else there's a software representation of you and you will you will be very interesting. But those of us who have a digital twin, so they can they can basically call. Know that they can present advertising, money for pay per click, and so on, and all of that. And what we just said So comparing your search history and purchase history, your Google Maps and all your online searching and all that right a database of products you're probably gonna want to buy while you get to that and see because it's no big deal. That's why it's such a hot thing right now. And that's the kind of thing that Jason is very good at. And by the way, even chatting. Will never because you can open the contact window you can type some stuff come back tomorrow you know, say carry on the conversation. doesn't remember the context of your previous conversation. How could you do that in simple words. So that's my Jason is quite important. And that's some of the stuff you're gonna be seeing here. So anyway, we got another couple minutes. Let's finish this up.
Alright, we've got about another 10 minutes, roughly sources. We're gonna develop, implement and utilize these guys. So that is the basis of service oriented architecture. And I'm actually gonna assign you a little bit of homework. I want you to watch my video on how service oriented architectures work. In fact, I've got quite a few videos if you want, like on a Friday or Saturday night, I just like videos and you can invite your friends over get some wine and pizza and you can spend a pleasant evening binge watching all my videos. I think your friends would appreciate that. Let me see if I can quickly find this.
What a
sample micro service is an application are their own Java virtual Yeah, so anyway, I'm going to kick this video out please watch it before next week.
What's a service programming system like Python, I think is the one you had before what's a service? It is just a method call, right? So if I access another operating system somewhere else, and if I you know get a handle on an object running on some operating system online and I call methods that's all the surfaces it's just a method and watch my video you'll understand more about
develop web development applications use microservice architecture, develop rest, Representational State Transfer API's. And I'm also going to bring some soap into it which is Simple Object Access Protocol. We get some of that because that's basically the college tells me I need to teach you this stuff. They don't say exactly what you know how I have to do what type of thing what so I will make examples based on because every day I study job ads and I see what kind of employers asking for or courses targeted so when you walk into a job interview, you have something good to say. So we're going to allow
you to solve simple
text transfer protocol. This is Simple Object Access Protocol, HTTP conveys text over a network stream and selfie based full objects over a network speed Simple Object Access Protocol uses industry standard testing tools Yeah implemented security good Yeah, so anyway, that's that's pretty comprehensive. We'll I'm just gonna spend a couple minutes talking about our tests and assignments and then I will post this up there right so let's get this up. Actually right now in Moodle because I know you're gonna want to go and study this before next time so you know what's going on. And by the way, since you guys apparently spending the buses late you can take the stuff out of your phone. Yes, I'm making fun of you
Why am I not getting my Dropbox back?
Anyway, Dropbox isn't working
Alright, let's see what they're saying. In terms of our tests and assignments.
So we're gonna have our midterm test
in week seven
and our final exam week 14 And we'll have assignments basically, every other week. The project will be due towards the end of term week 13. We'll talk about the project in a couple of months as an architecture application, using node j s, which is on NPM J s.com. It is gonna have a Mongo backend work going on, you can work in teams and your teams can sort of come up with a theme of what you want to theme your application around. The food delivery service will be ticket service or whatever we'll talk about that give you some ideas and assignments. So pretty much every other week. So next week, we'll do some assignment based on we've been doing this in class. So he's basically coming to class yet.
skills we're going to be learning here and
what's what's that thing called when you put an application in a box doctor? Yeah, so your assignments are going to be handed in in the format of the authorizing them and submitting your Docker container to Docker Hub. And you're gonna be learning Docker, which is another very in demand technology. So submitted to the format of done in class and submitted with Dr. Dockerized container
All right, so I'll post all this stuff. Tie now gets off board member
and you have another chance to get your tenants to be with you guys. Later. Take care bye.
Morning, what's up? Oh, yeah, who wants attendance who missed it? We're gonna get a class song going. Our class rule is if you're late. You can show your class spirit by singing a song. So we'll get a good song going here for you. Guys. Come on. We got a couple of minutes
the rest of you guys get your camera's out and do a live stream to YouTube. And if you get at least 10 likes on the video I'll give you your attendance.
You're going to win
means anyone?
You alright guys, whoever wants attendance come on up. I gotta get to my next class. The screen sharing is still going Excuse me. You can come up here. The rest of you guys get your camera's ready because you should know if they ever wind up you know, like in high political office. Or something. Those videos are going to be worth a lot of money. The paparazzi will pay you for them. Guys come on. Are we doing this or no I've got places to go.
Alright, here you go. Starting with sneakers slapping down the hallway. Loud loud and proud. Pushing out get your camera out. The music. It's the music Alright. It's been David Bowie's heroes. Sorry. We'll hear from you
for today, so I'll be
going over 13 accounts is the moon is a newer account for teens. With live trip tracking and highly rated driving.
board you guys are good sports I guess you deserve your to your attendance Yeah. All right
all right. Let me just read through these because it's gonna be faster here. Ah. Arman, dear sir. I don't believe me. I don't think we have any cords here. At Josh's mom. It's no Mazu
are doing, Johnny. You weren't singing? All
right. I know Mark your name
normally it's the other way the girls had the courage to do something all these tough guys were walking around the bench press about okay go to the cork board explain this concept. I'm afraid I don't say anything. All right, Tom. So deep notch actually, these guys were here anyway. Just me. Come on. My name is Josh groves Jehan. Raj Kumar Sandeep. Seraph CI branch today. Sorry.
