right, today is Wednesday, May the fifth we're here in our Node js NPM JavaScript web application development class. And I'll kick the link out of sometimes people are easier or they find it easier to read rather than or if you can read and listen. It makes it easier to absorb so we'll share that out. And anybody with the link can view and let's go and start setting up our Google Classroom page.
You guys are section one. I
tried to set this up last
week but Moodle was down most of the week. So I'm just going to start throwing stuff in there now.
Right, we're session one
section us there it is section one.
So Moodle is good for a bunch of things. One thing it's not too good for is having one central point of organizational because you know you have all these little announcements posted here and there. So I'm going to make one page which will be our journal for the class. And every week we'll link all of our assignments and all of our lecture notes and stuff there. So when it's time to study for the exam, or do the assignment, you'll have one place to go and look which will be a reference link to everything else. So let's spend a couple of seconds to do that.
As the journal
so day one, May 8
Here's our lecture dictation.
And also, while I've got this open another one of our major learning assets is going to be our mind map. So I'll be developing stuff here and as I'm talking I'll be adding stuff here and you can go and get to this at any point through this web link.
Should be giving me a URL and why it's not doing that?
Wave toolbox
witnesses latest one on
top there we always wish to have seen before. All right, so we'll drop this into your landing page as well. My nap visual learning roadmap. Sort of like your course PowerPoint for this course.
And I'll also kick out a link to my PowerPoint from before. It's 236 slides, a lot of repetition. It's very hard in PowerPoint to present stuff in a well structured way because you don't really have a convenient way of going back and seeing what you had before. But this link is working Yay. All right.
And since I've already got this open, I'll put today's lab workbook stuff here as well. I'll have to come back into it later.
All right, so you can jump into there and get that directly out of Moodle
and we'll move it up to the top so it's easy for everybody to find.
Right, great.
So now I'm going to just talk about general stuff for a couple of minutes. And you can follow it in the lecture dictation. And you might not totally understand what I'm saying. Because at some point I have to start introducing new concepts which we haven't explained yet. But a lot of understanding is just familiarity pattern familiarity. So you just have to have a little bit of patience to listen to something three or four times and not understand it and then the understanding will start to filter in. So let's get started and do that
my lucid map
so we know that JavaScript is a programming language. It started back in the early 1990s. The old people maybe I don't know if you've ever actually seen it, but they used to have something called TV. And TV was sort of how you watch Netflix before you had a laptop. So anyway.
I'm gonna go and fix this up a little. Yeah, here we go.
So, um, that was right around the time that the internet got started in the early 1990s. And one of the first commercial browsers was called Netscape and vetted by a smart guy named Mark Anderson and the earliest version of HTTP, which is what Netscape supported. It was a push only medium was called brochure where you could show content and pictures, but there was no forms. There was no way for the user to sort of push information back up to the server. So you could not have something like a pizza ordering website. Or whatever. It was a display only medium. So anyway, at the same time, a lot of people back then still had TVs and they had cable TV. And basic cable was something like $40 a month, but people could subscribe to premium channels like you know, first run sports events, first run movies and stuff for paying an additional subscription fee. So they developed something called desktop boxes, desktop boxes, they were basically this thing you put your cable into it, and then you connected the box to the TV, and your cable decoder box would have a SIM module just like your cell phone has a sim subscriber information module. And if you paid your bill on time, at the beginning of the month, the central office would flash out a certain digital code and that would access your device by its unique ID and it would enable the channels that you had a an entitlement to watch based on how much you were paying. So anyway, they needed a programming language to make those set top boxes work and Bell Labs developed developed a lab call a language called Lucifer Lucifer and Lucifer was intended to operate the set top cable TV debugger by decoding boxes. Now was it gotten more popular? People started complaining because in Christian European mythology, Lucifer is the name of the devil. So that sort of started creeping people out so they said guys, you got to change the name and the Java programming language. had just become a thing at the time. They said, Well, why don't we call it JavaScript that sounds you know, sort of that's a catchy name. So that was the basis of how JavaScript got started. As a programming language for managing the microprocessor for managing the decoder circuits. In that desktop cable decoder box. Now, fast forward about two years with Marc Andreessen started sitting around one night on you know, I never personally met him, so I'm sort of guessing, but I'm guessing he was probably sitting around thinking it sure would be nice if we could make webpages interactive, and you know, we could create some way for the user to send information back to the server. And on that basis, he came up with the idea of using JavaScript because it was freely available right. The subset of the specification was owned by something called ACMA, European computer manufacturers. Association, which is a very important fact, because they're a nonprofit corporation. If Java Script hadn't been owned by a company like Microsoft, people would say, well, we don't want to make a commitment to learning or using it. Because even if it's free now, this company might, you know, start charging us a licensing fee. Later. And then we have all this code written and what are we going to do then? So the fact that JavaScript has always been open source, not just open source because code is open sourced, like Java, for example is open source but it's still owned by Sun mine. by Oracle. Now Oracle bought it a couple of years ago. So JavaScript was open source, and it was owned by a nonprofit corporation, which was never going to charge licensing fees. And that's what made Anderson design board is new browser of Netscape with JavaScript. So anyway, that gets us to the point of how JavaScript got to be invented. Now, how does JavaScript work? There's an environment called chromium. So Chromium is this. It's a language just like you have the Python interpreter. You have the Java compiler. Chromium is the runtime environment, which makes JavaScript work. And we flip over to our mind map. See, I've gotten all this stuff written out here now. So this course is about JavaScript application development using JavaScript, no js and NPM. J. S. Doc. Chromium is the JavaScript runtime engine. And you can go and read some lecture notes about our here and if you want it's open source, right and one of my other courses that we're actually building our own JavaScript interpreter on top of the eight, which is the engine which is open source. You need to know C++. I can't do that here because most of you guys don't know C Plus Plus. But anyway, that is the background of what makes JavaScript work. So that means that JavaScript can work in a web browser because in the web browser, we have a we have a chromium interpreter inside web browsers like Chrome, Firefox, or in Firefox, it's called Spider Monkey, Internet Explorer. I'm not sure what it's called. But the point is, JavaScript can run in a browser, and it can work on the HTML page by connecting to the HTML, the document object model, because when a browser consumes when you put HTML document object model into the browser, the browser generates something called the bomb, which is the browser object model. That's a set of API's created when the browser parses the HTML, and the bomb is how you connect JavaScript and you can make images appear disappear, you can regenerate the page. Now, after a couple of years, JavaScript got to be very popular. In fact, even today, if you look at a listing of the top five top skills that employers are looking for SQL and JavaScript, you're going to be on that top list. So there's a lot of JavaScript skills, it's easy to do rapid rapid application development. So a couple of years later, I believe it was 96 or 97. A smart guy named Ryan Dahl came along and dolls dolls end of the stick was that he said what if I could take chromium and run it at the command line on the server, which means not having to have a web browser to run JavaScript? What if I could use JavaScript like C or Python or any other standard language? So what Dahl did was create something called no Jas. And no, Jas is a C Plus Plus Program, which is a wrapper, a mediator around chromium. And that's mostly what we're going to be using. We'll do some work in the bomb, which is the browser object model, which is the the web browser, but no, Jas works with something called the calm, which is the console object model. And that gives us API's points of connection to control the host operating system. Windows or Mac, Linux, whatever you're on. So anyway, this course is about learning with JavaScript. And specifically, we're going to be focusing about 80% on node. And node is an application development environment, because we also have a rich set of libraries available. In an online repository called NPM, J s.com. Which you're now going to go and sign up for so let's go and do that. So to do node application development is our course goal here. Your project for example, is going to be to make a service oriented architecture, web application with a database and the back end web server and the front end and on the controller is the partition where you use objects to implement the business rules algorithms. So to do node application development we're going to use NPM, which is a tool which you'll see in a few minutes. node package manager, well, where do we get all these node packages? Thank you for asking. We get them from a website called NPM J s.com. Which is sort of an eggless to get right. You guys have all heard of GitHub, put code up there. Well, NPM J. s.com is like GitHub for node packages. I realized this is a lot of information. We're going to start untangling it. Now. Let me just write all this stuff down. So we'll use node package manager and we will get our packages from NPM J s.com.
site
and in fact, your project at the very end, the way you're going to deliver your project to me is that you're going to make where you can work in a team of up to four. So your team is going to make a note application and you're going to do NPM publish at the command line of node in your environment. NPM publish, you're going to shoot it up to NPM J s.com. Just like you would commit a repository to GitHub, and you'll send me that URL and that will be your package, I realized was still a lot of stuff here. We got to unpack so let's do this one step at a time. So the next concept I should probably make sure that everybody is very strong on is this concept of Model View Controller. Because the applications we will be building here are going to be on the pattern of Model View Controller, which you probably heard about but let's go and pull it apart and see what it means. And once again, all of this stuff is here, right? You can go back and when I kick out this link, you're gonna get like a little chat box. You can have a discussion with the lecture notes, you can type you know, what did the lecture say was the most important thing about the class or whatever. So it's like a chat GPT with our lecture notes. All right, let me find my Lucid Chart. And also if you go over the PowerPoint 300 slides, everything I'm saying is there with lots of nice visual diagrams and stuff as well. So just gonna make it a point to read through there. Where did I put my Lucid Chart last? must be here somewhere.
Whoever took my Lucid Chart, give it back. Did I close it? No, I can try opening it. Oh, it's right here. Yeah, here it is. And I believe I can also I'm still learning how to use this tool. I had another tool called Ed you max flow chart tool, but the subscription the yearly subscription ran out. And I thought because lucid being a Google will probably integrate better with our other Google properties. So I'm gonna give this try for a while. So I'm going to share this out and then you can have it and look at it as part of your study. And everything you know till the end of class till the end of week 14. We'll keep putting on this one diagram. So then you can bring it to Staples or something and printed out as a big wall chart. Alright, so let's put that in your course notes before I forget about it. Lucid Chart visual diagram.
Alright, I'm still learning to do this, but hopefully it won't be too hard now, actually. Yeah, this is very nice because I have an infinitely big canvas on like an edu macside to keep resizing the canvas. So probably heard about the concept of model view controller and I'm going to spend a couple of minutes developing it now because it's the basis of what we're going to be doing. And it's also the basis of how all websites today work. amazon.com Travelocity, right. It has a web page and the front end that's the point of interaction. That's the view. The model is where we store our business data. So we call that the database or the model, and then the controller is what makes the business rules and algorithms of the application work. In our case, we will be implementing that using JavaScript objects. So anyway, let's just put all this stuff down. out onto it later. And I guess probably see, what's a good way to do this and Greg, that over there
and the database we're going to be using is not going to be SQL. We're actually going to be using JSON. A Mongo is the product and JSON is the technology and why we're going to be doing that we'll talk about next week. So model we model our business processes there. Now one thing about JSON for example, in SQL you can only model data in JSON such as Mongo is a JSON database. Because it uses XML documents, you can store your business processes in the database, you might not right now understand what that means when you understand what it means to be able to store and programmatically manipulate business processes. Just like you can store and manipulate text data and an HTML pages just checks text data, when you grasp what it means to be able to programmatically manipulate a business process, the hair on the back of your neck is gonna go up. Like that is really a freaking amazing thing to do. Now you're probably sitting there looking at your cell phone going are professors crazy, maybe I should call the office to come and send somebody to get them they should put somewhere to rest. You're thinking how can I possibly store a business process in a database? Because we're going to learn something just like you know that HTML, what's HTML? It's a page description language. And we're going to learn about JSON which is Mongo, which is big data. JSON is a data description language. Now, there is something called B pal, which is business process execution language, which is a business process description language. It's an XML derivative language. And it's not exactly on the course outline. But my opinion of it is that the purpose of writing a web application is to run a business. So therefore, it probably makes sense to learn how to model in data model in a in an informational format, what your business processes are. So anyway, Model View Controller model is the database, so keep happening. In our case, we will be using Mongo
Kingsly. written over.
We will be using JSON is the data schema and Mongo is the technology just like you might previously have used SQL as your schema and maybe SQL Lite, or I don't know what else we use in the web class. So probably, you might have used as your receivable in the cloud or something. So Mongo is server it's the it's the product which does the serving. And Jason is the protocol which is like a box that you can put data into. So that's model
and then at the front end, we have the view, which is the point of interaction with the user, which is the HTML page.
So that's your web server and HTML page.
Sitting in between them we have something called a controller.
Now the controller in our case will be JavaScript. Objects, actually TypeScript objects, because Java. If you ever get a test question that says, is JavaScript in object oriented language, maybe if I'm in a really bad mood that day when I'm writing the test, I might ask you that just make it miserable? The correct answer is maybe yes or no depends. So you mean it? JavaScript is on the boundary, because earlier languages things like C and COBOL, for example, were third generation programming paradigm languages. I have a blog article in my LinkedIn blog on programming paradigms. I'll share that with you later. So C was programming paradigms three, Java object oriented programming, paradigm five, but as they made their way between structural declarative oriented languages, they sort of stumbled around a little bit like maybe late at night you guys are, you know, you had a couple of too many drinks. You don't want to wake your wife up because you don't want to get told off so you're trying to quietly stumble around the house and making more noise. So that's what JavaScript is. JavaScript was the programming paradigm. They hadn't quite figured out what they wanted, but they knew they wanted something better. Than declarative programming. So JavaScript originally did not have objects. But then as it got to be used more and more, they realized it sort of needed objects. So it's like you guys, are you ladies at work? Maybe some time you've been in the situation. The boss gives you a job to do, and it's almost finished but you realize you forgot something really major. So you're sitting around going, Oh, can we cover this so you don't get told off? That's basically what the Java development of the Mozilla a JavaScript is developed by a team at Mozilla. They sort of thought, well, maybe we can sort of sneak objects in there and we can tell people Oh, yeah, Object Syndrome always there. Oh, you didn't know well, sorry. I didn't tell you. They're here. They made something called a prototypical constructor, which is object, sort of that you will apply to other JavaScript sort of objects and it gives them a object nature. Now that's okay for a while if you're just writing web applications, if you want to write serious enterprise grade applications in JavaScript, such as React and Angular, which we're going to be learning here. Throw typical constructors does not cut the cheese. So therefore, we need true object orientation. Therefore, I'm an extension was written to Guam JavaScript called TypeScript, which is JavaScript, but fully object oriented. So all of that is a long way of explaining why we're going to spend the first four or five weeks working on JavaScript. And then we're going to gradually transition or similar to TypeScript. Because we want to get to learning how to use React and Angular and those are done in TypeScript. I need everything that's true about JavaScript is still true about TypeScript. But TypeScript objects are objects really. JavaScript objects are sort of pretend objects. But we don't need to deal with that today. I'm just letting you know where this is going. So when we talk about the controller and Model View Controller, other implemented in Java, I'm just going to say JavaScript objects for now. But really, they're going to be TypeScript objects, but we'll get to that later.
All right. So model and this is the controller. This is JavaScript or it could be Java right could be any any objects in any language. Controller is a set of objects its code has to be objects. I don't really know how you could do it in a in a declarative way, which implements which delivers
the business rules and algorithms
of the application.
How do you put a textbox in Lucid Chart?
Or maybe just an object and I can type in it what
oh, yeah, there we go. Model
View Controller.
Sorry, what's that? What did you ask? Well, thank you. One of our students back there just said But Peter, you said that our project is going to be delivered as service oriented architecture. And now you're talking about model view controller. So how does all of that stuff work? Yeah, sometimes we use certain terminologies, which sort of sounds good. But when they hit the real world, things get a little bit messier. Service Oriented Architecture, basically means we're still going to have a front end because if I have an S O A application, I still have two ways of interacting with it. So I still need a webpage, I still need a data source. Now here the controller in model view controller, you can imagine that the controller is what we call a monolith monolith. So mono It's a Greek word mono means one. lithic means stone. So suppose you took all of your algorithms, and you put them in a box and you poured cement in the box. While they're definitely going to be safe, they won't break but if you ever need to change those algorithms, you're going to have to break all the cement so Model View Controller is called a monolithic application.
Monroe with one stone application, all the algorithms are in the cement block called the controller.
So Service Oriented Architecture now says that instead of having a monolith you have a bunch of little cement blocks. Say, Well, how does that actually improve my life? It does in the sense that if you need to change one of the business rules of the algorithm, you now just have one little cement block to fix. And in fact, a lot of the times you could just throw it out and rewrite it to begin with, because all of these little boxes talk to each other over TCP IP, are all recognized by a port number. And it's much easier for scalability, because if my application gets really big, I can just throw it onto Google Web Services or something for maintainability. Because if I need to change the implementation of one business rule or algorithm, I can just recall that one little block and it will still keep talking to the other ones over TCP IP and don't need to be changed. So anyway, what we're going to start with initially is the and by the way, most of the world is still running on Model View Controller. But the new stuff so if you go to work for a startup or some, you know company that's doing something net new, it's virtually 100% chance that they are going to be doing it in service oriented architecture format. So the controller is a monolith here. That's the point of my story. So keep going over there.
So when a service oriented architecture controller is still its own partition the controller is now multiple, not one block but multiple blocks.
What is a service in a programming system in a programmatic system? When we say we're getting a service, what are we doing? Louder? Yeah, basically, you're calling a method on an object. A method call is a service, right? Imagine you would assemble application like a calculator, and you have an add method. So you want that service, you call the add method and pass it some parameters. So Service Oriented Architecture just means that we're connecting to objects which are living in some other time environment on some other operating system. And there's various protocols for doing that, like Java, Ws, Java, web services and soap, which I will teach you by Tom. service oriented service is, if you're going to talk about a service oriented architecture, it makes sense to start by getting a sense of what a service is, just think that it's a method call.
Anyway, I'm just putting these things here so I can go and tack more content onto them later.
In fact, if you think about it carefully, you're going to realize an important fact of the world. And I'm going to tell this to you now because if I don't tell it to you now, it is going to occur to you with like three o'clock in the morning when you're trying to fall asleep. And then you're going to worry you might forget it in the morning. So you have to get up and write it down. And then you're going to lose your sleepiness and you won't get back to sleep later. And you'll be mad at me because I was probably the one who made it happen. So I'm going to tell you what you will figure out by yourself later, which is that a moral lift is still a service oriented architecture. A Monolith is one subclass. of the different design patterns of service oriented architecture. And it is just a maybe I should write this down a monolith. Is an SOA design pattern.
A monolith.
Monolith architecture
is SOA architecture,
in which all the service objects are tightly binded to each other. And we're gonna see later that there are two important principles of the world to us as programmers we want our systems to have high cohesion and low coupling, high cohesion says one object does one and only one job. low coupling says that we have that we basically and good observe good object orientation. We tightly ensconce our algorithms behind well written method rules, and I can take an object that you wrote, and I can take an object that you wrote, and I can drop it into my runtime environment. And I can write an object which choreographs the method calls between them without having to change the implementation of either of your objects. In fact, in general, I can't change the implementation anyway, because other people's objects are counting on your objects to be the way they are. So we want high cohesion and low coupling. And in the case of a mono station, we have service components if you consider each class to be a service component, which you can add fits the definition. However, we have an extraordinarily high degree of coupling. So the reason why a monolithic application is a bad design pattern. It violates our requirement to have loose or low coupling. We don't want things to be too tightly kind of hooking onto each other because then if we need to change them, it's going to be messed up. So monolithic architecture is an SOA, but with high coupling between the service components. We're going to go and start doing some coding and stuff in a few minutes. But the problem with a programming class is I'm gonna give you the code and you're gonna run it you're gonna go oh, the code ran. I'm so smart. But think about it unless you can actually understand how that code was put together. And you can build it by yourself. Just being able to write code that somebody else gave you won't get you too far. So Monolith is an engineer, but with high coupling, in fact, pretty much 100% Like the highest imaginable amount of coupling between service components which are just objects and by the way, service objects, high coupling between service objects, which are just classes.
Ah,
a service object is just a business rule. Later on in week three or four or something I'm going to teach you unified process which is a methodology for how you go from a requirement or a description of a business domain to the objects and data schema which implement that business domain. And when we do that, we're going to find out we identify all of the business rules in our business domain. How we do that, I'm going to talk about later, but you're going to wind up with a handful of business objects, because you can have two kinds of audit software system. You can have structural objects and business objects. Structural objects are objects we put there because the language needs like in Java, we have a public class which houses public static void main that does not deliver any business requirement. It's a structural object that has to be there because the Java Runtime Environment needs it to be there. But most of your objects are going to be Business Objects guys over there who were talking Be quiet. Business Objects are objects which have data and methods were behaviors which implement the business rules and algorithms of your application. So anyway, a monolith is an SOA but with high coupling between service objects. What's not sorry, what did you say? Oh, somebody back there was saying, Peter, we need more. That's not enough. What do you want me to do? make you a video? Okay, I have a very nice video. I'll kick it out and ask you to watch it before next week. So you'll have more of a theoretical insight into what we're doing. So let me take a couple of seconds on the video. Oh, it's right here. Haha. That was convenient. At on different computers, we may
see what
so anyway, I'll kick that out to your your your landing page. For the course.
All right, so I just gonna see if I have any other quick wrap up comments to make here before this is sort of prep to see what we need to understand when we study the course outline. So we've talked about the fact that we're here to learn application development using JavaScript. And because we don't want to have to run all applications in a browser we would probably like to oh, by the way, you guys use Visual Studio code right. When your other classes told me you you know the code is written with no Jas using a package called electron so if we go to my NPM, J s.com. And I'm gonna get you to go and sign up here and make an account for yourself in a couple of seconds. But electron is a node package, which you can use to make desktop applications right you can build a word processor or something. So Visual Studio code is written using Node js. Pretty cool. Alright, I want you guys to do something right now and then we'll take a little break here. So I want you to first of all go to NPM J s.com. And sign up, make an account cost anything, and I suggest you use your personal email, because you're probably going to be putting a lot of cool stuff there. When you graduate, the college email goes away. You might want to wish to continue to have access to it. It's up to you what's your email, but as we go and sign up for things here, I would say just use your personal email. So go there. And then once you've done that, go to node j s.org. No J s.org. And we're going to install node j s. So after the break, we can start doing some laps. So go to node j s.org. And find the go with LTS by the way. Don't get there, the beta release stream, because all the packages we're going to be using from NPM J s.com. are certified to work with the LTS support stream. If you go with the beta, they may not work. So go here and get your installable so download and run. And so that's what the two things I want you to do. And once you've done that, let's give ourselves that should take you about five minutes or something. Let's give it a 20 minute break. We will resume at 150 So installing your stuff and taking a little break and we will resume at 150
Anyway, I don't tend to write down 150 on the board was 1.0 but like five minutes for this laptop and 20 minutes for your pump
Good evening
thank you evening the number one thing that we're saying now.
New space
you can just say this with them
yeah No
sweetie NFN sounds worse than that
well
Muslims often
what's
up well
hello
What's up
all the Tim Horton was rushed. Okay, that's
yeah, I understand. Yeah, please. Yes, you did.
No problem. We're going to take attendance again next week. You can try it for a week to maybe you look online. Or maybe you will take attendance at the end and we'll we'll see we get you in there. as well.
Once you.
Other skins desktop. Yes, that was done.
Now. Please.
Since then anything that is the face of Islam
represent us this salary says the US
everyone thanks
in a family Listen listen in basis and I
What's up?
Very Good.
It's been
some basketball games
at the Chamber energy rates
you
think that's it
Bye Yes
days
probably can different easy to just cherry pick the eight
good to see no was with me
this activity to get
out of the day
so, the biggest thing yeah
okay Yeah
Isn't it
Go extinct
alright guys we'll start the minute now
students
is this still too
long see the series on here it's the other regards
while we'll do that post work the end when our brains are tired. Now that we still have a little bit of mental vigor. Let's solve some coding exercises to start delivering our requirements to learn JavaScript with no Jas.
So I posted a lab workbook up there I posted it up in our landing page as well as you can get to it from the News forum. So let's fire up does anybody need help getting Visual Studio code up and running y'all got it? You need help? Let me know. Meanwhile, let's let's go and do this. Where's my Visual Studio Code?
Thank you guys, don't go home and sit back there. Peaceful
All right, so let's start by opening Visual Studio code. I recommend running it as administrator. Because today right now we're going to do very simple things with for loops and while loops. But next week we'll start setting up web servers and database servers. And your node environment might need to interact with operating system processes. You'll run it as administrator it might save a few problems. And you guys have already seen Visual Studio code so I'm not going to go too much into the details of it. But if there's something you're not sure about, you know, just ask well, we'll spend more time going on to it. So the basic thing we want to do now now everybody did get there. No j is up and installed. And again if you need help, let me know. Now in Visual Studio code. A project is a folder it's a directory because Visual Studio Code wants to run the same on Mac, Linux and Windows and every operating system has directories so let's go and make a new folder or directory whatever terminals you use for our work today. So we're going to say File, Open folder. And Windows people do not put it in desktop. That's a very stupid idea. Because programming languages in general and Visual Studio code and node in particular, with very deeply nested directory paths and especially not with directory paths and spaces. So Windows people just go to your C drive and that people just don't your home directory you'll be fine. So here I'm gonna say New Folder. And I'll go by date so we'll say 2024 or lap 20 40508
That should be good enough. And say select folder.
And now up here at the very top you'll see that's going to show you all the reminder of which folder you're in. And now close any welcome screens you have. And now go and open your terminal. That's the same as the PowerShell terminal in your operating system. So if you had trouble and you can see down here now you can do all your standard stuff. And if you type node, you should just see node up there. Right, right. So everybody's typing that. And they're getting something that looks like that. You probably have version 22 If you just installed it, but you should see something like that. Now it's hanging here waiting for an input. And because we don't want to work from here right now. You could go and start issuing commands there. But for right now just press Ctrl T a couple of times to break out of that. And you can type CLS to clear the screen. Alright, everybody doing good. Now let's make a file. So we're going to do and I'm not sure if you guys because I understand you guys I think have had Java and Python before and when I teach Python and get them working in Visual Studio code, because I see a lot of employers asking for it will also there's a couple of things we need to do to set ourselves up. So let's go over to our lab worksheet with these extensions, so es lint. So you see if you go over here to the left menu area. The top one is your file explorer, and then you can search and then you can hook yourself up to GitHub debugger tab is there for right now we're going to go down to extensions. And this gets us to the extensions marketplace. And one of the reasons why Shawn was talking to one of the reasons why Visual Studio code is so popular is that it's not really an integrated development environment. I mean, it's sort of operationally it is but what it really is is a tool building platform and you can write your own extensions to make it do other stuff. So pretty cool. So anyway, we're gonna go get some extensions now. So don't search for ES lint.
I already have it but you can go ahead and install it and prettier formatting so go and get that
and NPM. Add also one that's not listed there I added it in as live server. So live server lets us run an HTTP web server directly in Visual Studio Code, which is going to be a convenient thing to do sometimes. So if you don't yet have it, live server and just go and install that too. Alright, so I'll give a minute for everybody to get caught up there
he created so we still
didn't even notice that but catch what's going on. Or maybe it might recommend that there's something else there instead of a deprecates and it might often suggest something else. Extensions been deprecated support for running NPM scripts is provided by VS code directly. All right, well, just don't put it there and hopefully things are still going to work out. Yeah. Basically what NPM is is this. So if you go to your terminal
and you say npm
then you can say you can do things here like install a package. So you could do NPM publish, if you want to push your own application up to NPM J s.com. You can say npm install, and so on. I don't know what's going on. Let's go do some research over there. Because generally they deprecate something they may give you an advice on what else to do. It looks like what it was saying was NPM support is now harder than Visual Studio code, so you don't need it. So NPM n p m j s.com. Let's look for the NPM package and package manager for JavaScript. And well, interesting. They don't appear to be mentioning anything about deprecated here. I would say just go and install it and if your computer explodes and catches fire, then I'm going to say well, I guess I shouldn't have told you to do that. But I'm going to try installing it directly from directly into my node environment.
Add it so I did not have it before. Interesting. All right. So just as an experiment, I'll try removing my NPM and see if anything happens differently.
I'll figure it out. Let's
experiment. All right. So I guess everybody got that now. So let's move on. So I'll configure your environment. Our environments pretty okay the way it is. We don't need to do that right now. You can go and read the introduction to NPM. I have some other worksheets. I'll kick out later. For you to read before next week. But let's start with a very simple program now just to get ourselves up and going. So go to your your your Visual Studio Code environment. So file, new file I just call it file one.py or something. Sorry, this is in Python J S and create file one dot j s.
Out the simplest thing we could do it does not
have anything yet but it has console dot log and we could just output a simple message or something. Now in terms of semicolon at the end, you can put it or not if you put it it will not make an error but it's not required so you could not put it and also not having an error. So just make yourself happy on that. I generally put semicolon cuz I'm used to doing it anyway. It's easier to just put it and remind myself to not put it and let's try running this program. So we're going to end by the way that one right there. That is Visual Studio code telling me I have one unsaved file, changes in one on a file. So we'll say Save, and then go to your terminal. And make sure your file is there. You're in the right directory.
I'll say node dot slash
file one.js. Well, it's actually backslash autocorrect to be the reason why you're putting dot backslash. If you don't want to be here, if you don't want to listen, you're welcome to leave, I take attendance, just go. You're disturbing. You're disturbing other class members. The second time I'm asking you to be quiet. If there's a third time I'm gonna call my friend and security Ash is gonna send one of the guys over to help you leave. You don't have to be here. You're adults, you're paying to be here. If what I'm saying is not interesting to you, at least go into your stuff somewhere else and don't bother your class members, please last morning, there's time to get the security guards up. I don't want to do that. But I just want to be quiet and orderly. Right You're welcome to go to the student lounge and we'll talk to you like alright, so here we here we just got our program to run. So that's like an example of running a simple now we said about the column and the bomb. So this is an example of the console object model. Like console dot log is not really a standard part of JavaScript. When JavaScript in node, we get things to connect with the operating system such as input and output, which is where that's coming from. All right. If anybody has any problems, let me know. But you guys have done enough previous programming that the first couple exercises shouldn't be too much of a too much of a surprise, I guess. So anyway, that was the first one now let's go to drill two which is working with basic variables. And we have var let and const to declare variables, however. JAVA script is a weakly or inferentially typed language. What that means is you don't need to declare your variables if you use a variable without declaring it, JavaScript will make its best guess. And fact you can't so if I were to try to do something like this
and a equals five see the little lines under this
because it doesn't know like it can't really handle this concept of int into it. This was TypeScript by the way again, would be fine, but we can't do less.
So I'm
John JavaScript when it encountered that inferentially typed a as being an a number. In fact, that does not make distinctions float or you know, these various in JavaScript. There's a double type just knows that it's a number that's as much as it knows.
So thereby, same type of if I use the type of operator, it's gonna say that it's a number. Anyway, like if we want it's a good programming practice to lead your clients. If you try to use bar, your mentor is going to get upset. And it's gonna say var is deprecated and ECMO script five, which we're on now. It was supported in earlier versions. They don't want you to use Spark but we are going to be using latch to assign a variable or if it's something that can say const. And the difference between let and bar has to do with what's called the temporal dead zone. In JavaScript. It has to do with the fact that when you run a JavaScript program, the language interpreter the Chromium parses over into twice the first time it makes a memory map of all the variables and the second time it goes and starts executing the algorithms on I'm not gonna get into the temporal dead zone today. I'm going to simply let you know that I will talk in future classes about the difference between lead and bar and why they decided to get rid of bar and you can still use it. It's not an error, but in future versions of JavaScript, and it'll be like a compiler error if you use it. So they're just advising you to get rid of it. Alright, let's try a few other kinds of variables now.
Yes, Bill could be the name for a cat
and a boolean
and we can have string of wild cat is already a string.
So just play around with let, and const and assigning numbers and strings and beliefs. We'll just take a couple of seconds to run through it and observe what happens.
If I treat or try to reassign a const I'm gonna get a compiler error because the whole point of constantly want to make sure there's something that has to have a certain value like pi, for example, the mathematical value, you don't want to go changing the value of pi the universe might collapse or something. So the compiler that the runtime will prevent you from changing something once it's const. Anyway, that's pretty much we're gonna come back and JavaScript inferential way of handling variables is a cause of some odd errors over time. So it's just something to sort of be aware of that it's not strongly typed in is weakly typed in the problems that were actually what gave rise to TypeScript, which is what you use if you were writing any JavaScript is good enough. If you're just writing a little bit of a script, you may learn a web page, but if you're writing like you know, sort of the serious business system, you will use TypeScript Alright, so anyway, that's just a little bit of an introduction of variables.
So you'll see here when I said Let A equals five equals five, there was an implicit we didn't put it there explicitly, but there was an implicit set of brackets around that. So an expression like that will be evaluated first, and then it'll figure out well, that's a true statement was five does equal five and the type of that true statement is Boolean.
Okay, that's about it. I can't think of anything else. To say about variables. So let's move on.
Now, let's do a little bit something a little bit more interesting which you should be able to figure out by yourself based on your previous programming statement, let's try writing a program and how you write that is up to you to add the numbers one through 100 and output the result.
So don't try doing that now. We're probably gonna want to loop I'm gonna go with a for loop for right now. If I run this program, what's gonna happen
is that programs gonna run or be compiled failure Yeah, it's an infinite loop. But the point is that it will run because of a for loop. First expression right here, that is an execution context, which by convention you use to initialize your loop counter variable. You don't have to you can put any expression there. The middle expression has to evaluate to a logical, true or false, and if it's empty, it defaults to true. So as far as me pointed out, that would be an infinite loop. And the third execution context is where you would customarily increment your counter. Anyway, let's try getting this going. First of all, let's try making sure that we're right and it will be an infinite loop. So I'm going to press Ctrl C to break out of there. And now let's try writing a program to add the numbers 1234, up to 100. How are we going to do that? number of ways. Here's one way I'm going to do. So I'll start by saying let's sum equals zero, because I have to have a variable to increment onto and I'm going to say let's start at number
one.
And then I'm going to say let ending number equals 100. I also need to know what number I'm on right now. But I need to know where I am now. So I'm going to say current number
and initialize that starter
number. And I also need a way to control my execution of my loop. So I'm going to say led going meaning Should I keep running the loop right, gotten where I wanted to go? And I'm gonna say initially true. Why? Because initially, I do want the loop to run until we have some reason to stop it
now, what else what are what are their other logic things? Don't just base draw out your previous knowledge of programming. And think how could you handle this? Well, one way I could do is I'm gonna say sum. So sum plus equals that means take whatever something is now and add one more to it, current number, but I still need to increment the current number every time through, I could do a post increment. I couldn't say current number equals Correct. Don't do that at work. People are going to look at you and snicker and look at the new guy. You don't even know how to handle variables. So let's do it the cooler way which is post increment. So I could say now that means access the valuable current number and after you consumed it, add one more to it. I couldn't post decrement which is negative negative goodwill pre increment or pre decrement. Alright, how's this gonna work? Now at some point, I need to decide when to set key going to false. Here remember the thing we did before with our Boolean five equals five. Here, we're saying that as long as the current number has not yet reached the ending number, then keep going.
Otherwise,
I think I should work anyway, let's take it for a spin. Now I have a I have a GitHub location set up for the company. It's pretty simple. It's just a place where I can post code and you can pull down some code to to see my cold. But right now, we're not doing anything too serious. We're just sort of in the playing around phase. We're just sort of developing a little bit of an intuition of how no JavaScript and Node js works. By the way, here's going to be one of your questions for the midterm exam. And I'm always disappointed by how many people get this wrong, true false. node is a powerful extensive extensible, and network aware programming language troublesome. Why? Because it's an execution class platform. Very good. That would be like saying the Chrome web browser is a powerful programming language. Very good. Thank you. So JavaScript, which more formally correctly should be referred to as ECMO script? Is the programming language node and chrome are the wrappers that we wrap around? What do we what what's the central engine that runs a JavaScript program? Problem? So node and web browsers have various flavors they they have a VA or chromium VA engine coded into them, and that's what does the interpretation of the that's what does the interpretation of JavaScript but wait a minute, because we said that JavaScript can do things like manipulate the values of nodes in a webpage? So does that mean that the JavaScript core language, the ability to manipulate go to the webpage? No, because one of the things we mentioned and I know I'm gonna repeat this next week in the next couple of weeks, I probably have to talk about this a bunch of times because it's a lot of new confusing stuff. I get that but there is a.
diagram of this did I lose it? Maybe I lost it. Oh, yeah, it was up here. JavaScript is a programming language. Chromium is the runtime environment. Now to run. Maybe I should expand this a little bit to run JavaScript in node node, written by Ryan doll, which is a wrapper around chromium to run JavaScript at the command line on the server. This has something built into it, not into JavaScript. But actually into the node tool itself. This has something called the console object model, console object model, and the console object model knows about things related talking to the operating system, for example, starting and stopping system processes. Right Stuff like that. So no, Jas, bring something extra to the party. So right when you go to a party, you shouldn't go open, empty handed. I don't know bring some food or something or, or you know, just bring something to contribute to it. So what no Jas brings is the console object model. And that is a set of C++ classes, which knows how to do things like read from the keyboard, write to the screen, read from the USB drive, start and stop Windows system processes and so on. That is the comm console object model. And then we also have over here, if we are running JavaScript in the browser, we have the bomb which is the browser of Google. And that is a set of extensions, which is created by the application software called the browser, Chrome, Firefox, whatever. And the bomb gives you API hooks or API keys. That you can write JavaScript classes to connect to those balm API's and and manipulate the appearance of the webpage right you can read information from the form field for example. So that is done by the good graces of the browser object model.
And I actually have some lecture notes on that I'll share out with you because I know you're going to be bored and lonely. It's a long time to wait for next week's class. And then a couple of days you're gonna start getting swept up, you know, being deprived of no JS knowledge. So I'll give you some like a little quick fix you can take to steal your nerves
Java scripts role on the browser object model. So that's one cool thing you can spend your weekend reading
so guys, on like Saturday night, when you're having your fight a fight with your girlfriend, and she goes, I don't even know you anymore. All you can think about or talk about anymore as the browser object model. You're gonna go Thank you sweetheart. That's the nicest thing you've ever said to me.
But don't worry, there's lots more where that came from.
JAVA script, but yeah, we're not going to work that much in the browser. We're going to do some stuff, but where's the one on the calm Tom and calm test questions. You guys want to see the test questions now? Probably not those are boring. Let's go and get lecture material.
I have some stuff on the column where did I put it?
Yeah, anyway, this is something else you can take and play with. We'll take this one out as well.
Right we'll drop those into your little page.
Alright, let's go back to our coding exercise. Now so who got it going? Who has who figured out the numbers one to 100 Who got the code going? Alright, very good. Excellent. Let's get it finished up. Then we'll move on to our next exercise. Just take like 10 seconds or something. So yeah, so we're just saying that this can evaluate to a logical I guess I should probably do it. Let's give it a spin and find out.
So save
and run
Yeah. 5050 That's the correct number. All right, I was actually sort of hoping that I'd made a mistake, which I didn't this time because I wanted to show you the debugger. So let's go and play with the debugger. A bit. Very powerful feature of Visual Studio code. So I'm going to put a debug point here. So I'll actually my first executing line is right there. So I'll just double click or click once. You see I get that colored dot there, I guess that's red eye colorblind. I don't recognize brown and green certain colors, but I think it looks red. So anyway. And then once we got a debug point there, we can go to our debugger perspective right there. And you can say run and debug. And we want to debug that's pretty cool, right? You can actually debug JavaScript in a browser in Visual Studio code. But right now, we're just gonna stick with no GS. And look here. You'll see up here. I have my debugger control panel. And there you see that little chevron plus the yellow syntax and the yellow highlighting, that's where I am right now. Now, let's go over here I have watched and hearing a call stack. And to really understand what's going on with that we need to talk about the Von Neumann memory model, which I will a couple of weeks from now. But basically the watch window which is your in program variables. So a variable a maker in the program is basically what von Neumann said famous guy, scientists 1950s He was one of the earliest developers of computer architecture that we still use today. So he said programmers and people writing compilers for languages should think about having two kinds of memory. There's your variable memory, and there's your program called memory. So your variable memory goes in the heap, and your program memory goes and stack frames on the stack. So here I'm just going to grab I'm going to start setting watches on some variables such as some
starter number. Number.
Keep going
you can also put evaluations on expressions, not just single variables. So I'm going to grab this expression as well. All right now, yeah, this program does not have any methods, right? It has one sort of main method because every code, every piece of code has to be contained in some method. Well, what happens if I have a program like this, I'm not making any functions. The the runtime gives you something called the anonymous rain.
Just sort of as a little hack is a little bit of
any brand, you can start running your code. So if you see if we look down here in our call stack, we have something called Anonymous and that's where stuff is gonna start happening. So now here I am on line three, and up here I'm gonna step to do right so now my son is getting set. My starter number is getting set. My n number is getting set my current number is now going to be set to start number. And now I'm in my loop. I could keep looping around for 100. But that'd get kind of boring after a while. But anyway, you'll see that keep going is being evaluated to true because of the logic of our conditions. And when we get to 100 That'll become false and we'll jump out. So anyway, that's that activity. That was just to show you a little bit about the debugger. Let's go on to our next lab now. And by the way, when you're finished using the debugger to stop it. If I let the program run to the end, the debugger will stop anyway, I kind of stopped debugging the program, I do something else I come back, I go Gee, coders are acting really weird because I'm still in the debugger. So just explicitly stop the debugger in that case. Alright, let's go back to our explore. perspective. And we're going till 330 Today, right, so we got about one more hour. We'll take a break in a couple minutes. However, for right now, let's see what our next lab is. Or our next drill. All right, now let's talk about functions and scoping. So now let's make a simple function that adds a couple of numbers. So here I'm going to I'll just re reuse my file one.js. And let's say I wanted to just have a couple of simple numbers. So var Actually, no, we don't use var, because we're an ECMO script. Now, right now, we're just hard coding the variables later on. We're going to see that we can hook it up to a web page and we could use a form field on a web page to get the numbers for right now. I just want to keep the I want I would like to get by the end of today, if we make it as far as creating objects in JavaScript, if we don't get that far. We'll pick it up next week. So we'll say let A equals one and then let b equals two
and then console dot log
so that would be a very simple program. Now let's move the logic into a function so I'm going to use the keyword function. And I'll say add a and b. And now see we have the return keyword here. So when all function it's going to return, whatever its business logic tells it to return. So here I'm going to say console dot log and add a and b. Let's try running that
not a number so I did something wrong. Let's figure this out. Well, to begin with lots here. I only provided the value of a not the value of b. And because Java script will invent it will make shit up if you don't tell it what to do. So it assumes b It's something it's supposed to know about but it's just gonna make a variable of type any and we try to add you know, one to this net called any so we got back not a number. And so let's fix that up. Let's let's give it the proper amount of parameters first.
All right now it's working better. So this is to just demonstrate the operation of a basic function. Now we could do side effects. It's not a particularly good programming practice. And if you're getting side effects, you probably got them by mistake because you forgot to do things properly. But let's try something else. I'm going to make a variable here called sum. And here, I'm not going to use the return statement, but I'm going to say sum equals A plus B now is some going to be available within the function and the answer is because of JavaScript scoping. It's like telescope or microscope it's what you can see a function which is contained inside the main module. It can see its surroundings, but the outer global context cannot see inside the function. So let's see if this is going to run. So File Save
undefined. Now let's figure it out. What happens a lot of people think that undefined means that there is some kind of an error. No, undefined is when you call a function and the function does not have a return statement. Because the JavaScript runtime environment is looking for what it's supposed to do. With this function. It didn't get a return. So it just says that it's undefined. Now what happens if we try saying console dot log sum?
And there we see three, why? Because some is declared at the outer scope. So therefore some here and this is why it's kind of beneficial to know how the Von Neumann memory model works. Maybe we'll go through this later on in the debugger to see it. But this is being mutated by this variable assignment. So here, we're getting the answer as a side effect. We're not returning the value which we should be but we're not. But anyway, that's just some stuff about functions. Or let's move on to our next drill. So we saw about functions and scoping.
Now we're going to talk about objects and arrays, or at least as close as JavaScript does get to objects, which is the prototypical object constructor. Create an object representing a book with properties like title, author, and year display each property. So let's create a more complex no js script that involves managing a bookstore. In fact, let's take a break because it's 335. And we're going to end up at or 235 We're going to end up at 330. Is it is 330 the right time? Yeah, it is. Alright, so I'm double check because I don't know I don't do well at keeping track of times. 330 All right, guys. Give yourself a shorter break, make it 15 minutes till 255 And then we'll come back and we'll do another handful of exercises. And then next week we'll start off with web services. So on break resume at 255.
So this week, I was holding a hammer Prayer
On
It's
better than nothing glad to have is with us.
Now I wouldn't have even got a
new one whatever you.
Give me got it.
To be back.
Happens a
lot Hey guys, I'm just gonna go on microwave my coffee then we will resume or study
in the
was wondering
week that's it
See ya Si
Si Si Si about it's
Good?
Very
good.
Three years a good One.
Eight. Debate.
Name is okay.
You
this.
services that's behaving
Yeah. Alright guys installs to the course outline and then depending for timings, we might have time to go back and relax besides wanting to find being day one let's do that now.
All right good.
So basically this is a course about learning how to build web applications using npm Jas doc
some of them will be browser based applications and some of them will be surface items and no Jas.
And the two wild frameworks we're gonna learn here are myrn which is Mongo Express react to node and beam which is Mongo, express, angular node, or React and Angular or TypeScript. Right. So that's the sort of the bulk version of JavaScript, React and Angular or frameworks react works. On the client side. It
lives on the browser.
Angular is a service it runs on the server.
So it was a continuation of your web technologies, to course you will design and implement components based web applications using JavaScript and Node NPM. JS frameworks. What does component base mean? Classes, right, so TypeScript classes or components. This course introduces you to the myrn It doesn't say here about me, but I'm gonna put that in as well. We'll spend a day on that because it's pretty similar and it's a good skill to have.
So you're here's
developing applications using ACMA script six now you know what that means. We're gonna develop web applications that maintain a no SQL JSON database. We're gonna talk about JSON and Mongo, so Mongo is gonna be your tool to deliver no SQL databases.
And we're going to implement service oriented applications adhering to the service micro services, architectural pattern with API endpoints, and I give you my video in your class landing page. You can watch that to get more information on that. And we're going to develop applications that run on a variety of computing platforms such as cloud computing, you're going to add to your current project in your previous course by designing and implementing TypeScript class based applications is processing and remember that diagram we made for model view controller. So learning outcomes now develop software using ACMA script six so that's some of the stuff we started to get onto today. Constant let JavaScript block statements. So that means that you can put square brackets around your code, and it will be implemented. Well, we'll get into later we'll do some coding exercises on it. But block statements basically mean well that's a block statement for example, things between the squiggly brackets we have an exercise further on in our lab worksheet we might get to today or next week, which is template literals. Spread operator for working with arrays. And we're gonna see how to use the modules include system in JavaScript and develop full stack web applications that run on a Node js server such as Express js
applications that have a persistence
of back end persistence data store using Mongo.
Big data is what happens when you do not have a primary key, which is what you need perceivable. So if you're using JSON, then you're in the land of big data. And you can solve many interesting kinds of problems that are not available. If you're sort of tied up with this little sort of handcuffs of being restrained to the primary key. Once you get away from that you can do a lot more interesting things such as modeling store business processes and the database. We're gonna create and manage documents, collections and databases. So those are all Mongo JSON concepts. And if you want to read ahead, I'll give you my PowerPoint. You can start taking a look at that. To get some insight and how that works.
write and execute MongoDB queries to retrieve documents work with cursors implement MongoDB indexes and use the aggregation pipeline right maybe about three four. So we'll start working on that develop and implement and utilize API's which are the basis of service oriented architecture there's my video develop web applications that follow a micro service architecture to leverage internal and external API's. So internal are if components of your application communicate with each other and external. If you're going to let's say open weather API, or Google Earth API or something, then you can do it with that by just highlighting things, I don't want it to do that.
Develop a representational state transfer API using express that supports the verbs of HTTP. And we'll be learning something called soap, which is Simple Object Access Protocol. And we will also be learning another big framework is Java Web Services Java ws Why does it keep I don't want it to highlight why is it doing that?
It was industry standard testing tools, implements security protocols. So that's something we'll get to later talk about that later on middleware such as helmet. develop applications that run on a variety of computer platforms. Make sure our stuff is multi browser compliant. Utilize Babel script transpiler to convert recent versions of JavaScript to older versions. Alright, so that's pretty much it. I will post up the evaluation timetable later. Tonight. But basically, we're gonna have a
midterm exam and a final exam.
And I will give you a practice exams like sometimes we'll start class with a little review attendance quiz, and it'll be during the kinds of questions you can expect. We're gonna have five assignments which will be done in class on various weeks
hoping that looks weird, why is it doing that? Project will be due at the end of the
class. So your assignments another common technology or another big thing that employers are asking for now is containerization container technologies. So you're going to be doing your assignments by putting them in a Docker container, uploading your container to Docker Hub, and then giving you the download link to your Docker container. So we'll get to that next week we'll do our first assignment
All right, I can't really think of too much else to say here. If you have any questions, let me know you don't have to buy any textbooks or anything for this course. I will give you lots of material in the form of quality documents and other lecture and lab notes. All right, it is 304123 30. So if anybody nobody has any questions about this, let's go back to our lab activities. I will post this up to Moodle in a little while. Don't use class time to do that. I want to get more to our lab test. So let's go over to our lab activities. So we got as far as create an object representing a book with some properties. So for drill for let's create a more complex Java's a no js script that involves managing a bookstore. This script will demonstrate creating
objects
adding them to an array and then performing operations. So first of all, let's go and create a file to do this so bookstore.js.
So first of all here is how, like in your previous Java class, we make a class and then we instantiate objects from the class. So here's our simplest way of making a Type or a class in JavaScript.
Yeah, so I forgot my closing brace. Now pay attention here. A little trick you can use in Visual Studio code. If I clicked by this race, I'm not sure if it's showing the projector but you see there's a little bit of bluish highlighting around it's matching breaks down there. So you want to see what the closing brace is. For certain open brace, click on it and then see what the highlighting shows up. Alright, so that's our book to display book materials
and make sure you put that inside your book class right not outside. So here is the implementation for your constructor. And here is a method to display book. All right, pretty good. By the way, that is string interpolation. So we said one of our topics is string interpolation. So if I put a variable and then I put dollar sign, curly brace and then closing bracket, then whatever will get printed out is whatever is the value of this variable.
create, store bulk objects. In JavaScript much like in Python, an array is just a set of square brackets. Right so let's create that
make sure that goes outside with your book definition. So outside of the last brace of your book class, oops
function to add books to the bookstore. So you see there we're taking book as a input parameter to the method. And because arrays in JavaScript come with a number of very nice predefined methods, such as push, we're adding the book into the array with the push method.
Gonna make my font a bit smaller here
guys, so to keep working on that, give me a second I think with my knee, get to inflames a little bit it's starting to give me some twitching pain. I just need to take an anti inflammatory now because if I don't take it now in a couple hours, we'll get to that to deal with so just give me a second. Take care of myself. Keep working.
That's about what we got as far as
books function to display on our books. So this is going to use a nother array called for each. Now we're going to have to I'm not sure in your preceded course how much you got into sort of the trickier parts of JavaScript like error arrow operators. And we're gonna have to learn about promises and callbacks and so on. But we will dedicate some time next week for that for right now. We haven't really or maybe you have I'm not sure if you did or didn't in your earlier course. You might not have seen the arrow operator but for right now let's just use it and we'll explain what it means later on.
Finally, we're going to use the
constructor on our book class. We're going to make some books with title, publisher and publication date.
And then finally, we're going to do so we added our books to our array, we added book objects, you know when an array can hold anything, right, it can hold like a scalar primitive, or it can hold an object here we're pushing objects in. And now let's display all our books.
Book is a class to find the properties of title, author and publication. The array is a standard JavaScript array into which we're putting book objects and we've seen the operation of our ad and display so very good. Let's try and get that running.
I'm just making a note of some basic JavaScript skills I want to drill next week in case anybody hasn't seen them. So the arrow operator promises and callbacks probably will add more things to here. But at least these ones are pretty important
Alright, let's try running
I don't have any books on
Yeah, because what happened yeah, so I think one because I just remembered what I did with this stuff from last term. So we're creating the books here. We have to I think what I meant meant to do was the students would do this as an exercise by themselves. And you guys have already called, that's great. You have to add now you have the books, you have to study the code, and you have to basically call this function. So just work by yourself. We're going to do that. So add Book, book one, add Book, book two and add book three. And now so that was saved. And there we're adding our books and we're dumping them back out. Right Very good. Is there anybody who was not understanding we thought until now. Well, you got another I mean, we're gonna go over this next week again. Anyway, I think we've got about another 10 minutes or so. So it's more and more
so now we're going to deal with something called the no JS module system. And we talked about the fact that a model view controller application is going to have code in different partitions. So you'll have at least one and maybe more than one class for the database, one or more than one class for the web server, and one or more classes for your controller. And then you're going to have one main program that imports everything and orchestrates running them. So that's why the module import system is pretty useful. So you can span your code among multiple classes to keep it organized. Let's go and see if we get this running. So define the functions for basic arithmetic operations. So you're going to make a file called calculator.js.
And let's put these functions in here. So add, subtract, multiply divide and double check we're not trying to divide by zero.
Now we have to do something else special. We have to export these so when we import it in the other file, guys, quiet just leave, please, I want you to go just take your stuff, go and sit in one of the rooms upstairs. Whatever you're doing, do it there because you're bothering my concentration. So I'm assuming you're bothering everybody else's concentration. Just please go It's okay. Nobody will get mad at you. I promise. You're paying to be here. I don't really care one way or the other. They pay me to teach you this stuff. Pay me care whether you learn it or not. I raised my own children. I'm not responsible for raising other people's children. If you're sitting in a room where people are doing something you don't sit and have your own private conversation. If you manage to get to the age of 20 years old without learning that yet. Well, now I'm telling it to you. So now you know, the talk for the day. All right, so we've now declared functions now we have to export them. So here you see we have module that's a reserved keyword. In node. So if you tried to do that in JavaScript in the browser, you'd get a compile error. The ball would say, what's a module? I have no idea what you're talking about. That is not something that belongs to JavaScript ECMO script. That is something that belongs to the console object model in Ryan dolls fat famous no Jas system. Alright, so module and then we use dot accessor notation for exports. And we're exporting all of these functions. Why? Well, we have another 10 minutes which is we're going to import them. So copy that. Save and now we have to write another file, which is going to be the importer the consumer of these. By the way, this is what you're going to do next week when we start using Express Jas to make a web server. You're gonna do NPM install Express. And then you're going to write code which is going to import Express and express exported some functions which you're gonna take an insult, sort of soak it up with your own code to make your web server doing. So let's do that. Now, here's our you can call that whatever you want. Here. You're calling an index.js. So let's go and make that so File, New File index.js.
And
just copy all that code over. So there you see const calculator equals require. The require is a very special keyword. It is looking for a file and you don't put the.js part, but we named our file defining our functions as calculator. So we're now importing it with that line. So let's go and do that.
Example of using the N word function so called sum equals, so calculator is a reference to this. And we can use dot accessor notation add. Why? Because from the calculator program, we exported that function just so we can import it here. So let's go and do that.
Next, breast JS web server going we will make an HTML page and then we will front end it with a form so we can make a calculator right so somebody will have like, a web page and they can put their numbers there in the form and click a button and get the operation going. Right. So that should be everything we need. I think Okay, let's try running it.
I got it wrong. Why didn't it work?
I didn't watch one. Oh,
yes, yeah. Thank you for catching that. Great. All right, let's fix this.
So that's an example which is going to be quite important when you get to working on your lab or even even for your lab, which we're going to do on work week three, I'm going to expect your work to in fact, what I'm thinking about one fly project and be a bit more complicated, but I'm thinking of setting it up so each team will be responsible for making a certain component and other teams will import somebody else's component and use it to make their project work. And if it doesn't work, then you have to do what dev teams in the real world do work with other teams to get their stuff fixed up. But that would really sort of illustrate the concept of programs a real world sort of commercial it complexity involves many, many different components of which most of them you get from other people. All right. Template literals that's pretty simple, right? That's just I mean, we'll do it next week. But that's just the thing of variable and squiggly brackets. Okay, we're gonna pick it up from here next week, because it's about near the end, and I think I have a few more attendances that got missed at the beginning. So we're going to draw our class to
a component sorry to a conclusion now.
Was born and I was an excellent shamans and that's somebody perfectly great as well.
