 I was like, I just realized I was making pager jokes, then I realized like, maybe most of you don't know what a pager is. So I was making jokes to myself. For those of you that know what a pager is, like, you get my joke, yeah. So hi, I'm Min. I am incredibly happy to be here. I'm very privileged to also be asked to help to share my knowledge of you guys and ladies. I'm just going to use guys. If anyone wants me to change, tell me okay. So to share with all of you here today, I'm also very happy to be assisted by so many great people. I am not the one with the most knowledge, just not for sure. I'm probably just the most not pysay person. So I don't mind standing here before all of you today. Collectively, we have a lot of knowledge in the room. Please reach out to the teaching assistants as well. This is your best opportunity to get very good attention from somebody. Like on what other occasions can you just go up to someone and say, this doesn't work, can you help me? It's very rare. So make full use of this opportunity today. We have like maybe four and a half hours more. We have the bootcamp coming out in the future. We have fun next week. We have the code clinic. Take this opportunity to learn. I'm just going to be very upfront and tell you like, if you're new to programming and you're new to JavaScript, you're going to feel very uncomfortable. You're going to find that everything is so hard to grasp. Intuitively speaking, you're like, all right, this kind of makes sense, but I don't get it. Because it's pretty much like learning a brand new language. It's like learning a brand new area. Your brain needs to get exposed to it multiple times before it finally clicks. And when it clicks, it's wonderful. So you just kind of have to persist at it. Does anyone here have a comm science background, for example? So I don't have a comm science background either. I'm a mid-career switcher. I used to study like management, strategy, finance stuff. I went up to a master's and I decided like, this is not what I want to do rest of my life. I really liked programming when I was younger, so I decided to go back into it. But let me tell you that the change was both great, smooth, and also really, really painful. So when I first started learning programming, I started when I was younger, but there was a different version of JavaScript and all that. And the ecosystem is very different now. The ecosystem in 2019 is extremely different than what you would expect when you were meddling around with something maybe 10, 20 years ago, around that, you know. So you need to understand that nowadays things are very community driven. Knowledge is very shared. You have to be unafraid to search for the answers. The most important thing is being persistent and learning how to find your answers is extremely important. I'm not ashamed. I mean, I've never shared this with anyone else other than my partner, but I'm not ashamed to say like, when I started making this switch into making a full-time job, I cried twice when I was learning how to program. Like, I literally just bawled my eyes out because I'm not particularly smart, but I tend to pick up things pretty easily on most other topics on what I'm familiar with. So this was like a completely gray zone for me. I went into it. I was trying to do stuff, and like two times I got so frustrated because I couldn't get something to work. Like, I was trying to do something with web cameras and stuff. So I was basically trying to shoot above what my level was. I was very frustrated because I was always very used to being able to jump very fast. I went into it. I kept trying to do it. I was like, why don't I understand this? Why can't I get it? Why can't I get my code to work? And like, on two different occasions, I just burst out into tears and bawled for an hour, for example. Like, I was generally very, very frustrated with myself. But looking back on hindsight, it's because I set expectations way too high for myself. I need to learn how to celebrate the little victories every single time I learn something new. Even now on my path, I've only professionally been doing this for like three, three plus years. Almost four or three, four years. So every time I learn something new, it's a little victory and I celebrate it, I appreciate it. I go back and try to learn the same thing again. So the path might not be easy, but remember that this is not... This is something that you have to say, hey, I want this, you dedicate yourself to it. When you persevere it, you will get it. Eventually you will get it. So I just want to share this because I think this is not so much more than just like, coming here for me to run through some exercises with you, you can easily do that online. There are so many courses you can do, things like that. But it is just to tell you that this journey has been shared by so many people everywhere. You're not alone, especially with tech ladies, you're not alone at all. So take the opportunity, learn, get frustrated, learn to cope for emotions, learn not to destroy your computer, learn not to toss your computer on the floor in the beginning. Why is this not working? And then like, don't say my computer sucks, stuff like that. Learn to manage your emotions, take a step back and come back with a fresh mind the next day, for example. And your mind might click the way you think might click, the things change. And when you're in a calm and a very good state of mind and not frustrated with yourself, I'm not talking about this topic because we're ladies, but it's just because we're human beings that we have emotions. And when you're programming in the beginning, your ego and your emotions will block you to finding the solutions most of the time. Ego, for example, by not reaching out to other people, ego by not accepting that I don't know this topic, I need to go and find it. And then your emotions, because emotions is the one that threatens you. And when you're fearful and you're scared, you run away from the situation. So then you run away from coding, you run away from programming, you run away from getting better, you run away from what you thought you wanted. And being here today, I just wanted to share a bit more also about the area outside of programming, outside of just this language called JavaScript, because for those, you can easily go online. So please feel free to ask me any questions you like, whether or not it's regarding the topic, about my experience as a software engineer, or how I learn stuff, things like that. Just feel free to ask anything. I'm very open to you today. I will start with a personal thing. I have three cats and a dog. Okay? Okay. Do you see me typing my password? You know my password length? Oh, God. This is the part of it. Oh, yeah. Oh, I'm an idiot. So feel free to cut me when I'm running across time, because I know we need to be very conscientious of time. There's a lot of things we want to cover today. The idea is not so much that you come in and become like an expert in JavaScript in just a couple of hours, because unless you're a super genius, that's not going to happen. And there are only so many super geniuses in the world. A lot of you mess up to grab things, but you still mess up on other areas. You might feel confident in some, less confident in others. What I want to do is to show you what JavaScript is about in this modern environment, modern JavaScript. So there is like an ecosystem around it. There are tools around it. There are ways that the language evolves and things like this. So don't be frustrated if you cannot follow everything that is done today. As long as you manage to get through all the lessons, like there's huge kudos to you guys already. Okay? So I'll basically be doing an introduction on JavaScript and also something called Node.js. My name is Min Ong, in case you haven't mentioned. And I'm on Twitter at Ongmin, you can feel free to reach me. I'm a bit sloppy with notifications, but I try my best. I have so many chat apps, it's crazy. So like what I was saying just now, like what do you get yourselves into? Like some of you might be sitting in this room thinking, oh my god, what am I doing here on a Saturday afternoon? I can be like out hanging out with friends. I can be doing stuff. What am I getting myself into? Or you're getting yourself into like gathering new knowledge and like having a lot of fun, to be honest. Like even if you don't want to become a professional software programmer in the future, you can do a lot of things with JavaScript. And it'll be very helpful in your life. It might even help you in your work, you know? Well, you probably would use something else like Python, but you know. The thinking, it helps. So you have nothing to fear, because all of us are here today to help you work through this. And yeah, so nothing to fear. Coder Kitty is here. So usually when I get like, I need to chill out a little bit, my cat hangs out with me when it's coding. So right now you might not get that joke, but you'll get it later. If you've ever worked at MPM, then you know sometimes it takes forever to install stuff. So that's really my cat, not the internet. So what are we covering today? I won't go too much into depth into the history of JavaScript, because you can read all those things. But just to really talk a little bit about it. And then also we'll be doing two things. JavaScript is a language that is multi-coded. If there are any words I say that you don't understand, feel free to ask the TAs, ask me, Google, stuff like that. So JavaScript is very, I'll call it flexible. Why it gets a lot of hate sometimes from people who are more traditional computer science backgrounds. It was created in like maybe 10 days, something like that. And then the web just took off running with it, and now you can't get rid of JavaScript. It's really important. If you go and look at all the adoption rates, the number of repos and stuff that is written in JavaScript, it's really a good time for JavaScript right now. And there's also a community of people trying to make it into a stronger language, more multi-purpose, used everywhere. So we'll be trying to cover it to let you know traditionally JavaScript began in the browser, but now you can use it on the server side as well, which makes it very exciting. So we'll just be walking through with you a few things, concepts of using JavaScript on the web, for example, as well as then using it on the back end, what you call back end, which I'll demystify a bit later. So first, a bit of story time. As you can tell, I like to tell stories. Okay, so how many of you have heard of Java? I don't feel shy, you know, like I'm doing my best to not feel shy about standing in front of everyone. Okay, so we'll get someone. So you're going to hear commonly when you say, oh yeah, I'm learning JavaScript. I'm writing JavaScript. Some people without the background might say, oh, Java, I know that. You know, stuff like that. I just want to emphasize before we begin today, Java and JavaScript are distinctly different things. They are completely different languages. They just share the same name. So I love the analogy when I began. It's to a hamster as Java as a JavaScript. It's completely different. Okay, and you see Java used, for example, a lot in enterprises, for instance. So the year was 1995. This guy called Brandon decided to make a language within 10 days. So now we're basically living off this language. The web you're on mostly is powered by this language. Your browsers all come with JavaScript in it. That's why it's such an amazing language for the web. So the browsers can handle JavaScript very efficiently. And it's the de facto language of web. So if web, for some of you who are like graphic designers and already know about jQuery and stuff, that is kind of maybe one of the strong reasons to learn this language because you can do a lot of things on the web with JavaScript. It's the de facto language. Even though you'll hear like people saying, oh now there's something called Rust and you can write all sorts of other language on it. JavaScript is still the thing where you can come and build something and run it on the web. It allows you to do things like making websites interactive. So whenever you're clicking something and something pops up or like you changed some toggles and something else changed on the page, that's mostly all JavaScript. You can do a bit of it with CSS, but that's a lot of JavaScript involved. So basically it runs in all browsers out of the box, whether it's Chrome, Firefox, Safari, it's in there. At different levels of support, this is the complication. So anyways, just to give a bigger overview of generate these three simplistic concepts. Last week we covered HTML and CSS. So how I like to think about these three topics whenever I talk to someone new to programming. So I know we have a mixed audience today. So I'm going to try to reach out to those that if you're new to this, come along with the journey as well. And if you already know something, also be able to come along on the same journey today. So HTML gives you structure. Basically it's like how you structure your page, things like that. There are elements in it, things called elements. There are like syntax, like you can learn last week called divs, p, nav, main, stuff like that. And then there's CSS, which gives you a look and a little bit of interaction as well. Things like on mouse over, on hover and things. Whereas for CSS you also have background images, you have colors, you can do animations. CSS is getting very, very powerful now. And then we have JavaScript, which is basically the language that you use to do more stuff. They're not just something very like saying, OK, changing color. So JavaScript gives you more control, more flexibility to do things. So I just do JavaScript into like one, two, three. I might change my mind tomorrow on what the one, two, three is, but just to understand the concept a bit more of what this thing, this scripting language called JavaScript is. So JavaScript has different types of data. So you'll see later, but basically code is at its main purpose, telling the computer what to do. That's it. When you're writing code, you're communicating with in a way that the computer understands what to do for you. Computer understands to open a new tab, computer understands to load something, computer understands to compress the tab, your images, things like that. Code is just a way of communicating. So it's like you're learning a new language like Arabic for you to learn French, for you to learn Hokkien, whatever language you want to learn. So to tell, to be able to communicate with a set of people who understand this. So it's the same. You're trying to communicate with the machines on how to do something. So when you communicate, sometimes you need a few features, right? You need the ability to do things. You need the ability to explain what a thing is. So in that sense, like a group of objects, like we learn in school, liquids, solids, air, right? So you have solids, for example, but solids are a very broad concept. The ability for me to stand here is because this ground is solid, right? So you have that data thing, something called data types. So in programming, everything is kind of like information control, information manipulation, information storage. That is what it is. Like behind all your computers and everything, it's just a bunch of like maybe binary codes doing stuff. So therefore there are things called data types. Data types is a meaningful grouping of information like numbers, booleans, which just represents true or false. Strings, which is basically this is a string, for example. You see a lot of strange things on my computer. JavaScript has different types of data types. Just remember this. You go more into detail later. It allows you to do things, to have interactions, to do calculations, to make your life easier. And you can run on both browsers and servers. So if you look at very like things that are dated for maybe more than like nine years ago or more, you might say, oh, they might say only like, oh, JavaScript is for the browser, blah, blah, blah. You can do stuff, but now you can use it on the servers as well. Because of Node.js. So I know there are some of you who are here to learn React. So you might be sitting in a room thinking like, I know all of this already. I'm sorry if I use English and you don't understand. Just ask me. I know all of this already. I just want to learn React. But let me just tell you like when you master JavaScript, you will be able to do React way better. So React is like probably the most popular web framework library. At the moment. But you will see that in history, not all of them are accurate, but you know, this is just a whole bunch of logos of other things that have come around. Libraries come and go, you know, like time and tide. It sweeps the ocean shores. Something like that. So there are different ways. And now we're running on the React wave. So running along with React, there's also older screw things like, I'm not older screw. I'm so sorry, Amber developers. Like Amber, there's Angular too. Or even more now. It's very hard to keep track because things are constantly changing. Which is one of the things I want you to take away with today. Because like today's knowledge, two years later, you got to update it. Things change all the time. People are involved. They want to change stuff. They have different opinions. So frameworks happen because people want to do things differently. So right now the wave is React. So learn React, but also master JavaScript. And then you will have career longevity. Well, afterwards you need to master other languages and other concepts, of course, not just JavaScript. But I'm saying frameworks come and go, learn React. It's very good. I'm a professional React developer, not very professional sometimes. But basically it will help you learn a lot more things. They come and they go. So we call this concept vanilla JavaScript, modern JavaScript. Vanilla just means plain vanilla. So JavaScript, it just works. And it's basically bread and butter for a software programmer, a web developer, not software programmer. Any of you know what the difference between a front and a back end is? Roughly, just like Agar kind of knowledge. Who don't know what front and back end is? Who is too shy to raise their hands? Irony is like, oh no, doesn't make sense. So anyway, if you want to put it... So today the idea is not to go through like a whole computer science kind of thing. The idea is just to give you concepts so that when you go into the world, into the internet, you can pick up things because you kind of understand the concepts. Just re-emphasizing this. So front end is basically the things that are visible to you. You're looking at your laptop right now. The browsers you have open looking at my wonderful slides. It's basically front end work. And then back end is where all more powerful machines, more powerful machines do different things such as serve your file to the internet in a very efficient way, store your information and things like that. So it's a very simplistic split. Don't need to get too confused or too pedantic about what front end is, what the back end is, stuff like that. Just know that thing of back end is the invisible things. The front end is the visible things. So you hear another concept. People say I'm a full stack developer. Some people are really good full stack developer. Sometimes you're just kind of like a full stack developer. But it basically means someone who can do both front and back end. I call myself a 0.75 full stack developer because my back end is kind of weak, to be honest. There's like a whole world out there that's also very interesting for waiting for you to explore in the future. But a more CS background would be very helpful. So the front end is a very, front end and JavaScript together are very accessible languages of people who are new to programming. It's just a great place to begin, a great place to start, no matter where you want your career to be going. So the format today is for me to preview a little bit about the topic first. Then you guys do the hands-on, the exercises, and then I will go into depth to explain. Because when you're reading the exercises or the lessons, you see a lot of new concepts. And every other line, like when I was learning, every other line I was like, what is this? What is this? What is this? And I'm just like, what? Boom! My brain exploded, you know. So don't try to grasp everything so much. It's like learning a language. You repeat, you learn something, you learn how to say a phrase, how are you, stuff like that. You just learn it first. And then later on the decomposition of understanding each piece will come. So just run with it, follow the exercises. If you don't understand everything fully, that's fine. Go back and look into it again when you're trying to build your apps for next week or stuff like that. But then after you try all these things, then I'll explain a bit more into the concepts. If there's anything I didn't cover, feel free to raise your hands. Feel free if you feel more privately to ask the TAs. They are here to help you guys on the journey today. And basically like I said in the beginning, keep calm and keep coding. Across all of these. So these are the exercises I believe you all have ready on your computer. If any of you don't, please open it. Make sure you cloned it. It's on your local machine, local machine. That means computer. Does everyone have this? If anyone needs more time, please raise your hands. So we just take half a minute. Give you a bit of space to digest my crazy monologue. If anyone needs help getting this repo onto your computer. Your friendly TAs are totally available waiting to help. Anyone else needs help getting the exercises on? So if you need help, just raise your hand at any time and the TAs will approach you. I'll just carry on here. So before we begin like the mindset just to reiterate again, because I feel that that's the most important takeaway for today. Programming is a long journey. It's not a matter of you coming here to learn like one plus one equals two. Code is basically just telling the computer what to do. Very simple. Code is not some like mythical bunch of characters that you write on the computer and boom, something happens. It's basically just a language to tell your computer what to do. The purpose is that it does two broad things. One is that it does some work. For example, calculations, processing all that stuff. And another is that it helps you to coordinate work. Like saying if this is happening, do that. If that is happening, do this. Something like that. So two broad categories, the calculations and then achieve control flow. Environment is just to state that programs, whatever you're running in your computer, it doesn't run in thin air. It's running within your machine, the limitations of your machine, the setup of what you're using and things like that. So sometimes if a code works on one machine and not on the other, that is the reason because the environment is different. That's why it's important to note things like versioning and all that stuff, but you don't have to think about it today. That's for your knowledge in the future. And I also want to state, I do JavaScript. I help to run the JavaScript meetups in Singapore. Meetup makes me interested. It doesn't mean because I think it's the best language. It was just the most accessible one for what I want to do. There is no best language. Some people will differ. Just kindly smile and say, I differ. So every language has its advantage and purpose. There are stuff that are better for hardware. You're going more low level. And then there are languages like JavaScript, which is great for interacting with your browser. It's very easy to write. You can keep it very light, very low template if you want, things like that. And then you have Python, which is easy for you to do calculations and all that data stuff. So every language was designed with a strong purpose for doing particular things. Sometimes you can do multiple things with it. But yeah, so understand the language and the reason why it is. So don't forcibly try to do C++ on the internet. I do it at work, but whatever. The different purpose. So try to do animations with another language. Just making your life difficult. So go with the language that works for that purpose or what you're trying to achieve best. There is really one way, which for example you can be like, oh, how do I add two strings together like I said here? There are actually many ways to do it. So what we learned today, then you can go home and you'll be like, how do I combine strings together? And then the internet will show you another way. So this is just to let you know there are multiple ways to do the same things. Because people have opinions and the web is developed by people and so things happen. So pick the way that suits you best that you think is most efficient, that you're comfortable with, that you understand fully how it works and just like run with it. You don't have to learn all 5,000 ways on how to loop through and away in different ways. Run back, forward, low, whatever. Just pick the way that for you in the beginning when you're learning how to do it, learn it, use it. And just acknowledge that there are other ways to do the same thing. People differ. If someone tells you this is better, you can try it out. But go with the way that you feel is comfortable for you right now. And then try to advance step by step. So like I said, little victories every time on programming. Master what you know, then carry on the next piece and then the next piece and the next piece. And finally, like I mentioned, community drives the development of all these frameworks, the language and everything. And even learning. If you think of programming or computing as someone sitting behind a computer all alone, then it's massively different. There's actually a lot of people sitting behind the computers all alone. Okay. What? My dictionary opened. Works for English. Okay. So finally, I'm my oblivious babbler and now we can get started. Okay. So open the repo. We call this kind of thing repository. A repository is like a library concept. You have like something. It's just a meaningful thing. So this is called a repository pre bootcamp workshop to 2019 on GitHub. GitHub is where a lot of developers host code. You can use it. You can do it on different other areas like get lab and things like that as well. But this is just where a lot of code is hosted. You can even write things. This is called markdown, which is a type of file. So you just write text, you know, it's like a TXT file. This is an MD file. Okay. So let's get started. So going to part one. Phone's bigger. Oh, yeah. I like small phones. So maybe I would recommend simultaneously having this GitHub browser open as well as the slides. But you don't need to look at the slides. So having this, your VS code editor open and slides if you like. The slides don't involve, doesn't really help you with your exercises. It's just for backfilling some knowledge afterwards. So really focus on this piece on the browser. So let's begin lesson one, how to print things on screen. So can you please all open your VS code? I'll do it on the side here so I understand what you're doing. As you already have learned last week HTML, basically just the model of how your document is going to be like. So please do this. Raise your hands if you need help. Have you guys all gotten to this piece where you have this on your editor? Who doesn't yet have this open on your editor? Can the TAs go around to check the computers as well? Not to force you guys, but like following along would really help. So create a new project. Call it MyJavaScript. And then create a brand new file and paste this piece of code in. Just copy and paste it. I need to close my timeout and stuff. Your visual studio code editor and copy and paste it in. If your screen is not black with a bunch of colors on it, that means you're not doing it right. It should feel a bit familiar from last week. Everyone gets it? Cool, cool. So I'm going to carry on. Raise your hands if you need help. If you can't find your editor, if you want to copy paste and stuff like that. If you copy paste and there's no color on the document, it's because you haven't saved it as the file type. So what is very helpful about editors is that it gives you colors depending on what you're writing, so that programmers can spot codes and mistakes in your code very quickly, very intuitively. You say the color of this is wrong, or then you kind of know, like, oh, I forgot to close my tag. I forgot something. Save the file index.html. Command save. I need to change this to my JavaScript. So then double click on this file, or I always copy paste. I'm on Chrome. Damn it. And you should see this. You will see this little line of lonely code saying, pass this on your screens. Awesome, awesome. If you don't and you need any help, please raise your hands. If it's not showing up, please raise your hands. If you can't find the file, you don't know what path to get to, so please raise your hands. Help is needed here. Switch. So essentially a browser is just a way for you to read files. Whether the files come from the internet or from your machine, a browser is just a way for you to read files. You can test out if you like. You can say, like, hello cats, you save it. You refresh it. Refreshing is just telling the browser to re-read the file. Then you see the update. The line is updated and that's it. So if anyone is not there yet, please raise your hands. The TA will come and help you. I'll move on to exercise 1.2, which is let's learn to customize. So not just write aesthetic strings. So we go back to Visual Studio Code in the index.html file. Let's change the JavaScript portion. So as you can see this word, this tag is called script. Let's change this portion inside. So you have script. Copy and paste this portion in. Just delete this whole thing. Are you so big? Then save. So delete the line from just now. There's one thing that I used to do which is code hoarding. So when I'm doing exercise, I used to keep all the pieces of code like the precious little pieces of silver and gold in my thing. That's not the right approach. Like, man, that would make your life so difficult. So if you want to, you can always go back to the exercise to copy and paste. So there's no need to hold on to that piece of code that you did previously in the previous exercise. Delete that piece. That says document right. And copy and paste this one in. So your file ought to look kind of like mine. So you click command save, command S with just a shorthand. You'll find developers use a lot of shortcuts. I'm actually very, I'm actually a bit inefficient about this because I don't use too many shortcuts, but you really should, because you can do things very fast. It's like using a computer. So command save, very basic. Go back to the file and refresh. And you should see this prompt. It's called a prompt, like alert, you know? Do you all get this on your screens? This is exciting. It's like interaction, you know? So put your name in. So my name is Min. Type okay. And oh my god. So personalized. Like these two is great. You laugh, but actually kind of, this is how the process of your computer or your Gmail knowing. Hi Rebecca. And like, welcome back, you know? So you get to have interactions. You get to input your name, your address and stuff when you're ordering food on delivery. And you're putting your address and your unit number and stuff like that. That is all interaction. So we should have that. Except mine says Min, not Michael. So this is just one way of, so you might have a few questions on what is document? What is window? What is this thing called prompt? We will demystify all of that later. I know that these questions are there because when I begin, it's all in my mind. So these are just some ways of, like I said, there are many ways of doing exactly the same thing. This is just one way of getting some information from the user. In the future, you could be using other ways to get that same pop-up effect. There is actually not a window prompt. This is actually just like a div where you type in the input and that's the same behavior. So today, what we're working with, we are working with window.prompt. Okay? So on each of the exercises, there's a bit of more information on MDN. It's my favorite website ever. It's kind of like a love-rate relationship, but now I really, really, really, really love MDN. It's where you get more information on exactly what a particular thing that I'll put it this way. So windows.prompt. What is this, you know? So MDN is very in-detail information about it. So MDN is designed for both professionals and beginners and everything. So there are parts where they are a bit mind-boggling. Just skip them, go to the examples, okay? So when you go and refer to MDN, for example, you'll see something called syntax. Syntax is just a way to write something. So result equals windows.prompt message default. So when you see things inside brackets, you are basically just passing a variable. I'll demystify this later, okay? You're basically just getting input, and then it will tell you what those parameters are, if you want to know, and what does this thing return you? So windows.prompt will return you a string of what you input. Okay? And you have things like examples. But I would recommend getting comfortable with all of these first, and then when you're curious about a particular thing and what it does, then you start to go in there. Don't try to digest everything. Like even today, I don't try to digest everything because it's too much information. I go to the examples, I try them out, I get the answers and that's it. And at the most, I look at the syntax, so I know what to put inside a particular method. You call this functions methods. Anyone not following? So if at any one point, you feel like you're not following the exercise anymore and you don't want to raise your hand in front of the class, just raise your tears will come to you. I will not go over and terrify you. So we move on now to exercise 1.3. Let's do some clicking. So objectives. So if you look at the titles, they are actually kind of funny. I had a lot of sneakers. I didn't write that, my code that. So now we're going to learn how to do something like you learned last week maybe writing a button. A HTML button. That will trigger JavaScript code. Very exciting. So let's go back to the Visual Studio Code. Inside your index.html. Like I said again, don't code hard, just delete it. But if you want, you can create multiple file names instead of just index.html. You can say lesson 1.1 underscore 2 underscore index.html. So you can keep all that pieces if it makes you feel better. Or like you just like to be able to go through them again later. But I recommend always not keeping old code. So let's copy and paste this piece. That includes a h1 tag and a button. Come and see. Write it in the body tag. Like I said, delete this. Should I delete the script? I think it's not nothing to do with the thing. Yeah. We'll just have a refresh. Are you guys ready to refresh? Boom! This is a headline. So notice just now we wrote a lot of things inside this thing called the script tag. Now we are going into the body tag. So the script is like JavaScript. It sits within the body of the html file. But in the body, it can take a lot of stuff that is independent of the html scripts. So this is roughly what it should look like. I leave a lot of lines just to make sure it's very visible. Generally when you're doing professional work, you try not to do this. Hi, it's up to you and your colleagues. Everyone has their own quirks. So you have this piece and then you ought to see this on your browser. Do you get this as a headline? How many of you are here? Okay, so that's most. How many of you need another minute? No? So if you don't know, just raise your hand please. The TAs took time off their Saturdays. They're here to help you. Professional developers are very expensive per hour. So they're really like helping you out for free. This is not the time to be shy. Okay, so add this beside the script tag. So say you go to the TLC button and then when you click it, boom, the headline goes red. I'm doing all of these exercises at the same time that all of you. So if anything goes wrong, then I'll have the same problem. So this changed because this is the concept of like, so in programming, you try to reuse a lot of things. So there are things that are really very basic like having a div, which is like a container, having a p tag, which is like for you to write paragraphs of text. And then you have things like buttons, which is to get interaction. So I'll just be a bit more explicit because I'm not sure everyone, I think there were maybe one or two people who didn't come last week. So that's a button. So on the button, there are a few inherent methods that you can use. There's inside the specifications of a button. So like I said, a lot of things are about specifications. The language is a standard. It's just like English, grammar is a standard, like a dictionary is a standard. All those kind of things are standardized. So there's a bunch of non-standard things you can do in the future when you know things better. But in terms of some common methods that a button needs to have, a button needs to be able to have an on-click function so that you can interact with it. So this method's name is on-click, all small. Please remember that in programming, like your casing is super important. The computer is extremely literal. If you think about it, the computer doesn't generally try to understand what's going on. It does exactly what you tell your computer is like your servant. I'm sorry for using this concept, it's very medieval. So basically you have on-click, you do something to tell the document, hey, find my element by this ID headline. Then you go look for the H1. Not because I mentioned H1 here, but because it has the ID headline. Oh yeah, I'm so stupid, I could do that. I used the arrow. Just like standing here like this. So it has an ID called headline. And note carefully that the casing is headline with a capital L. This is something called chemo casing. So in different languages, there are different conventions on how you write multi-word words. So this is called chemo casing because chemo, bumps. So after the first one, then the next ones are bumps. Whereas in CSS, for example, you tend to do what you call kebab casing, which is like a text dash, a text dash. So there are different funny namings for this. You'll get multiple different names for the same thing. But this in JavaScript, we use chemo casing. But generally HTML, you don't like chemo casing, but it's fine. So then on document, when you get an element, so each one of these is called an element. Like a button is an element, for example. And then there are a bunch of, like I mentioned, meaningful properties that they have. Like on style, which is basically referring to its style. That's a property color. And you change it to red. So nowadays, besides things for the designers that are here, there are other ways to specify colors like RGBA, hex codes and stuff. But it also inherently understands some common color names. So like red, golden rod, yellow, marine, things like this. So there are some colors you just need to Google, HTML, CSS colors, and then you can use a bunch of default ones. So you change that to whatever color. When you click on that button, it will change into that color. If you want to experiment with hex codes, you can also put it in there. Hex codes is just another way of specifying colors to greater specificity. So just for fun, pink. It turns pink. So basically you're just telling the button to change the color of this element to pink. And color refers to text color. So that's what happens. So if you want to read into more details, again, there is MDN over here. But I won't go into details. So click is something you definitely need to know very well. Okay. So like I promised, I'll come back to demystify some things after the lesson. Oh, what is presentation shortcut? Oh, enter. Oh, this is weird. Oh, because I'm not signed in. I made it. So I'm trying to be conscious of time. So what is Visual Studio Code? Visual Studio Code is just a way for you to write code. It is created by Microsoft. It is very powerful. It allows you to work with different languages. You can install things like extensions that help make writing code easier. You can change the color of how you want your code to be. It doesn't affect what it finally comes out to. But while you're writing it, if you prefer a certain color scheme to help you spot things better, you can do that. There are other options as well, which is Atom, which is more lightweight. A lot of people who write JavaScript only write that. And then you have something more full-featured called Webstorm. You don't need to go into that. It's expensive right now. And it's mostly for professionals. So it has a lot of other features that you could want to use. So just to let you know, even something as simple as writing your code, you have different tools you could potentially use. But Studio VS Code is a very good one. And a lot of people know it. Not because you're in Microsoft right now. Or maybe you also use it. I actually use two or three. I actually use two code editors at work. Don't ask me why. So document. What is document? Do you guys know? No. So I think it's similar to the concept we have last week. So document basically is just a way for you to be able to assess your HTML's content. So when you say document, there are some inherent methods to find elements in this document by your ID. This is wrong. I'm so sorry. There shouldn't be a hash here. Because ID already refers to hash. I wrote just randomly wrote. So then you can get something with an ID called pricing model. A model is just something that pops up on your screen. We call it models. So basically when you write HTML, for some of you who already have some knowledge, I just wanted to make sure it covers a bit more range. So your HTML will get passed. And then it will come into this model. And then you'll be able to run through it, find the different pieces that you have written inside the HTML code. It's a bit sticky. So what is a window? So you saw just now window.prompt. So window is basically just the browser you're in right now. Not the browser but just that specific tab. So it's like a particular, if you want to think about the environment that your file is in right now. So it gives you access to a lot of global things like prompt. So prompt didn't come from your script. It came from your tab, the window.prompt. That's why you should be able to, that's why you'll be like, how come I can write so many things that I never included inside my code? It's because a bunch of other people wrote it already and they've grouped it in a way that's meaningful to you. So things like cookies, for example, windows. You'll use windows.locustorage to store your cookies, get your cookies, things like that. So in every new tab is actually represented by its own windows object. So if you're new, you don't need to understand this. You just need to kind of know the concepts that such different kind of scopes, we start to call them scopes that exist. So moving on now to lesson two. So you'll find the link here very conveniently included by Mike. Do all of you have Chrome? We'll be opening something called the console. So when you're on Chrome, for example, click view. I always just type my shortcut. View, oh, first Firefox. Developer tools? JavaScript console. Because I had it open already. So if one of you prefer to type shortcuts, it's command option i. Do you have this thing on your Chrome browser called console open? If you need help opening it, please ask. It's a very strange area that normally people don't open to. But it's there in your Chrome. And you can actually go and open it on all websites because it's part of the browser, not the site. So we'll be there right just before you go to the break. I'll bring the key for Mike's birthday. Okay. So you'll be able to see any error, except he said he saw the console is fine. So we're running just that page. If you don't go back, I'll leave you there. So you're doing something wrong with me. I don't know. I don't know. So the rest of the site is in the dark. Okay. Do you want to clear it? There's actually a computer that will not pass the sign. Let them go home. So you just click that and clear the errors for you to try that. So you should have a blank screen to start with. So when you open the console, naturally it's actually kind of small below the page. Just like drag it out so you have a big screen. Okay. Anyone that's not here yet? Actually all of you are not here yet because physically I'm the only one here. Okay. Let's begin. So like I mentioned in JavaScript, there are different types of data types. So data types is just a meaningful grouping. It's saying things like... So this is not encoded by in real life. You have things like numbers. You have alphabets. That same concept goes into JavaScript, for example, or other programming languages like numbers and strings, or characters even. But in JavaScript, we just use strings. So there are some mentioned over here, like Boolean. Boolean sounds very fancy, but it basically just means true or false. It's one of my favorite words because it rolls off the tongue very funnily, Boolean. So integer is basically just a number. Float is another number concept you will see, which basically means decimal point numbers. You will see this kind of distinction more in other programming languages or in CS basics. But in JavaScript, we just deal with it as numbers. So things like doubles is basically just a type of... Just decimal point numbers. And these are called primitives. Because when you think of the English word primitives, you think of cave people, for example. If you say something is very primitive, it means it's very basic. It goes back to the roots. That's what primitive means. Primitive is something that is not an object, and it has no methods, I think. Okay, so don't get confused over here. Because this is a primitive type, but in JavaScript, they will give you some methods and meaningful things as a global thing called number. But that's not the actual concept of number. Just to make your life easier. So type in the console the word true, which is Boolean. True is true. Mind blown. True... I won't confuse you now, but it's quite funny. And then there's only false. False is false. Oh goodness. But if you want to have some fun later of why this is an important thing, it's because when you're trying to evaluate something, like you're trying to say person. A person is tall, is man, is funny. Then you will do an evaluation. Is this a good boyfriend candidate? Is tall, is man, is funny, if you like men. So that's how the evaluation happens. And then when you do, if you want a combination of all those criteria, you do something called end. So is tall, true, is funny. I just got engaged, I'm really happy. So it's like this. So then you have end. So it evaluates to be all true, so that's true. But if one of them, the last one, is funny, fails. Whoa, true, true, false. There's two truths and one false, why it becomes false? You know, it's because it fails all criteria. So I won't go into details into this today, but you'll start to see these kind of concepts of end or or. When you're writing code in all languages. So that is the concept of Boolean and how useful it can be. Because you can do true or false. There's double pipe. And you get true because it will be like, if your criteria for a partner is just is funny or is tall, if it just matches one of them, you get back, okay, that works. Sorry for senior energies. Okay, so that is the concept of Boolean, true and false. Are there any other types for Booleans? No, awesome. So now we talk about numbers. So if you want to clear the console, you can press Command-K. Shortcut. Windows? Our Windows, I don't know. I'm a Mac user forever. It's okay, in fact, it's okay. Oh, sorry, control, yeah. Your Mac, Command-K, our Windows, Control-K. I thought it's a trickier question. Okay, so we have numbers. Okay, so type numbers. 999, that's a number. It comes back numbers. 10.9, that's also a number. If you want to see what something is, you type type of 10.9. You go back, the console will tell you there is a number in different voices, depending on your mood. So for example, if you type, oh, have you tried to type of Boo? Boolean's a function. So if you want to figure out what type a particular thing is, you type type of space, that thing, and then it will tell you what type it is. Boolean. There's something called big int. You don't have to know it right now. It's because of the precision problem in calculating in computing. It's just for very, very big integers. So unless you're doing it with money in the bank and you don't want money to go missing or have too much money, that's not true. Then you do such things. Otherwise normally as a web developer, I don't do big int because I don't work for banks. If any of you work for banks, that was not a diss. I love banks. So now at number three, have you guys all tried type of 999? It's a number. So next, moving on to the next concept. So the first time we talked about Boolean. Second, we talked about numbers. Now we talk about strings. A string is just like a meaningful collection of characters, alphabets. So a string can be consisted of just one letter. It can be consisted of five million letters. It's a very big string. So here's a string. You must put them into quotes. Hello world. That's a string. So string is a primitive, but in JavaScript there are some methods that they added to it so that you can instantly know. If you write something in double quotes, this is a string, and I'm going to attach a bunch of very helpful methods for you. A method is just a way of doing something. So you'll see things like two uppercase. So if you're super excited about tag ladies, but then you get the word like this and you're like, I want to make this uppercase. So you type two uppercase. And then you do the open parenthesis. A bracket is called parenthesis. Close parenthesis is basically just to execute the method. So normally you have a bunch of methods, properties that dot something like this. But when it's a function, which is a method, you do this to execute it. Not execute it, but execute it. So I'll do this. Boom! And the string becomes all capitals. So right now we're looking in isolation how to manipulate these kind of different data types. So try it and then you'll be able to apply this concept as you go along. So all of this is not going to be kept by the file. It's not going to go anywhere. They only persist as long as your window is open and when you close it, it's gone. But that's fine. Just open it again, do whatever you want and then close it, you know. And then you can do other fun things like repeat. But for repeat, let me use the emoji. So again, you want to clear. You type command K or control K for Windows user. Emojis are now supported as strings. In strings. And you can type repeat. And then boom! I get a whole row of emojis. Then you can put cats, whatever you want. Or you can just write normal text. To the ha for space. Remember that if you put space, that space is inside the string too. So that will count as the length of the string. So this is one method, for example, to tell how long is this word.length. So there are a lot of very meaningful things that you can do with these kind of inbuilt methods. So repeat. 100 times. You know, I want to laugh, but I'm too lazy. Can you edit one string that you already... You can. But that's an interesting thing because we will touch that later. So right now this is just like sitting on the console. But if you want a way to get back this information, you assign a variable name to it. So you can always reference it. So let me try that. So all right. Variable laugh equals to ha. It doesn't matter undefined. The second line is just because what it's returning and it returns nothing. Just ignore that concept. For those that know, then you would know. And you can try laugh. The console already knows that laugh refers to that string. So you can always call it laugh. Because imagine if you're dealing with a whole piece of text. A huge one. You don't want to type that whole thing over and over again. So computing is about being able to do things more efficiently, refer back to it and do it. So we can type laugh.repeat. And then you get the string. Ha ha ha ha. So you can do all sorts of things with a variable. So you can get it back again. But if you want to get this string which returns, you'll be like long laugh. So it's fine to be a bit lost right now. I forgot the number. Basically, for instance, if you want to refer back to something, you start to see in the exercises later. I'm jumping ahead of the gun, but it's fine. So let's sing equals to laugh a space. Let song equals to sing repeat 10 times. So you repeat the same string 10 times. And then when you type the variable name song, you'll get the whole thing. La la la la la la la la. It's very nice. Yeah? What's undefined is because that particular line of command doesn't really return a code. It just does something for you. What it basically does is it takes laugh, repeat it 10 times, and do something called assigning it to song. The variable name song. So variable is a very abstract thing. It's just like saying this is a bucket called song. I put whatever I want into it. So now you have the word strings. So if you do a really long one as well, you can do things like repeat. So play around with it when you get home. So instead of quick brown fox jumps over the lazy dog, you replace the word dog with monkey. So the quick brown fox jumps over the lazy monkey. So this is the method called replace for strings. So again, like if you go into MDN strings, you'll see on the side like a whole bunch of things that you can do to lowercase. You can find the one replace. Here, for example, then you click replace. And this is the example. Okay? So I need to move on. So if you click this link, that's what you get. The MDN documentation. Numbers with decimals are basically just called floats. But in JavaScript, we just call it all numbers. But in other concepts, other languages, you might hear things like floats and things like that. And then there's another primitive called now, which is basically just now. Now just means now. It means it doesn't now. I don't know how you want to say now, but now means it doesn't exist. It's just like the void, you know? It's nothing. What's a better concept for now? Now basically means false, but it's not a false. Does that make sense? Like a false is an actual answer. A false is saying it's true, it's false. Now it's just like almost like not applicable. It just doesn't exist. It's just a primitive type. You'll come in useful next time. And you actually see a lot of behavior for the terms now. You'll see things like undefined. It's also a type. Undefined just means it's not defined. If for example, when you're writing a variable like this, it returns undefined because you didn't define what it should be. So normally what you do is you say, hi, it was 160 and then it returns 160. So undefined is just a type of data. It hasn't been defined yet. So now moving on to exercise 2.2. I'm talking too long for each topic. So I need to go a bit faster. If you're lost or anything, just raise your hand please and the TA will come and help you. So there's other types of data that is interesting that is not just primitive. Like I said earlier, primitive is a very basic kind of information. We have other things called an object. So in JavaScript, you either have primitives or you have objects. And objects can be a whole bunch of things. An array is an object. All sorts of things are objects. So you don't need to know this in too much into details. If people make jokes about how in JavaScript everything is an object, that's pretty much why because it distills down to an object. An object is basically, if you want to think about it since syntaxally speaking, syntax just means the way it's written. It's basically just these two things we call curly braces. They look like the moustache but it's just curly braces. So we're going to this one called object. So in your console, please press command K or control K to clear it out. Like I said, don't hang on to old code. Throw it all away. Get new ones. So we type this. Remember we had the type off just now? If you want to be sure you're typing an object, object. It says object. So let's copy and paste this into the console. This is an object. And in the console, it's actually very helpful because it helps you to be able to interpret and to see what you're dealing with easier. So you can just press down. It has made it very neat for you already. So you can easily see what is an object's property and the value or key. An object is typically what you call like a key value pair. So a key is just something that is like an abstract information like your name is key. Your ID can be a key stuff like that. And then what you actually assign inside is the value. So that is the object. It's a meaningful grouping of information or purpose or functions. So it's something that you start to compose to make your life easier. And then like I mentioned, I'm going to clear like what I was talking about. Something called variables. Again, variables are just a way to have and hold on to a reference to something. So you can always hold on to a reference. Like for example, the word mic is also a reference. It's a reference to this entity human being here called mic. Is this too abstract? But it's correct. So your name is a reference to refer to you. A name is not you. If I change my name to Rose tomorrow, I'm still me myself. I just have a different reference. And what is interesting about reference is that it's a shared reference. So a lot of things are shared like concepts. So a number is shared. The idea of a name is also a shared thing. So think about it like that. So that's what a variable is. A variable is a reference to something that can change. But it's a fixed reference to something that will change. So you don't need to keep tracking the thing that is changing. You just remember the variable's name. Makes your life really easy. This is fundamentally probably the most important thing to me. Variables, functions. So let's try this out. Take this into your console. By typing the word var, you're trying to declare that I'm saying that I'm creating a variable called user. And I would tell this user to be this object. So copy and paste it. You can type it as well for practice. Because actually, as you go along, you start to actually remember all the syntax of everything you're writing. You don't have to copy and paste so much. But in the beginning, it's fine to copy and paste the work first, then to fiddle around with it. Change the name if you like. Change the email if you like. Put your own name in it. Stuff like that. So that in the future, when we try to get the word users, this is the fine part now. So in objects, when you type a dot, this allows you to access the property. So off that variable called user. So if I type user, it really knows that user has the property, email, and name. It's not convenient. It's extremely convenient. You won't always get this on your IDE, for example. Not always you have this kind of stuff. But on a console, it's helpful. It knows. So if you say I want to retrieve the user's email, you do this thing called dot. Access the property. And then you get the value which was assigned to the email. So if you change the value of the email, you'll get the new one too. So there are two ways, in general, to access the property of an object. One is through this dot, and the other is through square brackets. So you can type in. This also gets you the thing. But remember that email here needs to be a string, so you put it in the quote. A double quotation will also work. But if you write user, without this thing, it will think, what is this other reference? It doesn't exist. So in an object, in those, you reference it like this in the object. So two, like I said, there are many ways to do the same thing. This is just two ways of getting the values inside an object. You can do a dot, or you can do a square bracket with a string inside of the property's name, the key. So if you want further reading, we have this, okay? Still with me? Anyone confused? Because I'm sure it's how confused. Okay, it's good. It's really good news. So this is the last part before we go on to number three. So lesson two of data types. Another very, very important one. There are so many types, okay? I will cover it later. Data types, data structures. So two very important things you need to know when you're trying to program for the front end. Objects and arrays. And arrays is basically just like a meaningful collection of things. It's like, this is a bucket, and it collects stuff. And you can put all sorts of things in it. In JavaScript, we are very type loose. So in the same bucket, for example, I can put numbers, I can put strings, I can put objects, I can put whatever I want. In some other languages, for instance, you will need to only be able to put strings inside an array or list. Only be able to put numbers inside an array or list. But in JavaScript, it's very, very flexible. That creates a bit too much flexibility sometimes. But when you know how to use it and play and run with it, it's very powerful. So this is what we call an array. An array is essentially two square brackets and stuff in it, a collection of things in it. So it's like, I like to think of objects, for example. An object is like a library book. It has a name, which is JavaScript 101. And an array is basically a bunch of those books. So inside an array, you have different book titles. So it's like a shelf for you where you put all the books you want inside. That's essentially what it is. It's just a linear shelf. So copy and paste this into the console. And very conveniently, the console even told you, like, hey man, this array is seven strings long. I have seven stuff long. One, two, three, four, five, six, seven. Uh-huh, that's correct. There will be some confusion later when you deal with the word. The term index, but that's not an index. This is just length, okay? So you can, like I mentioned, in JavaScript, it's very flexible. So you can put whatever you want inside. And then you can do this thing called push, for example. So you take an array of numbers and you push five into it. And then when you get new array, oh no, it gives me my length, okay? That's because the array method push returns length. But actually, your new array has these five things in it. Okay? Oh no, I forgot how to access. I'm getting mental freeze. How do I show the array after push? You get an array first, then you do push. Ah, okay. Let's try again. Array. Oh yeah, okay, I may eat it. Hi, sorry. I remember I don't do this. Okay, so you get the try again array. You do a push. And then try again array. And then you grab it again and you'll see that there are five things inside. Okay? So that's where a bit of confusion happens. Because sometimes the method doesn't return you the thing you're trying to create. Sometimes the method will return you a string. So you need to know what something does. So a push actually can do a push at the same time it adds in something for you. But when you want to grab the value of it, you might get something else. Okay? So two things can happen at the same time. So for those that have already written some JavaScript or jQuery, sometimes some kind of confusion comes in there. Exactly what I was doing just now. Okay, conscious of time. So let's do a recap. Data type. Have anyone heard of the terms data type? Hey, all of you should have heard of it. Because you're like sitting here in this room and I'm going data type, data type, data type, data type. There's also something called data structure, which is something a bit more abstract. Okay? So for data types, which is basically like I mentioned, a class of information and they share certain kind of similarities, like numbers, they're all very similar strings, they're all strings, stuff like that. And then there's something called data structure, which you don't need to know. This is a CS concept. It's an abstract way of organizing data to do something more efficiently. So you hear things like an array, which is the one you need to know. And then you hear other types of data structures, like link list, graphs, stuff like that. It's just a way to make computing more efficient. So if you want to assess, for example, if you need to write a piece of information faster than you need to be able to assess it, you use a certain type of data type. If you want to be able to find information faster, you organize the information in a different data structure. Okay? Don't need to know this. In the future, when you hear it as you go along, then you just kind of know that it's just an organization of information to do something easier. So with different operations, you have different type of data structures. But for JavaScript, all you need to know is the data types and arrays and objects. So in JavaScript, there are seven primitives and something called an object. A primitive, like I mentioned again, is basically just something very basic. You have something called Boolean true-false. You have now, which is now, just know. You have something undefined, which is actually also a type, numbers and strings. And these two are pretty new. In modern JavaScript, you don't need to know about it. You most likely wouldn't use it. And most of you are not using symbol. If you work with big numbers, you work with big int. But just remember, this five is good enough. And then the idea of objects. So in JavaScript, an array, for example, is also an object. That's a story for another time. So like we've run through a little bit already, how to work with data types in JavaScript. JavaScript has very conveniently added a lot of methods and properties to make your life easier when dealing with it. So for example, if I want to add two strings together, I can do that. If I want to change things to lowercase, I can make all uppercase, all lowercase. If I want to deal with numbers, I have ways of doing that. So let var const are just all ways of declaring variables. It's just three different ways of declaring variables. Same, not the same thing, but almost the same thing. If you are not sure, use var. If you want the value to change, use let. If you want the values to never change, use const. Just the simple rule. And then you can even ask if new height is a number or not. So it's not a number. That's another kind of method that you commonly see. Sometimes you're typing something and you ask, is it a number? It will say nan, not a number. Numbers to string, because 500 is not the same as that 500. It looks like 500 to you, but those two things are different. This is a number and this is a string because it comes in quotes. And so they have very different methods that come with them, very different ways of treating them. Sometimes you need to send a number as a string, so you'll convert it to a string before you send it over the internet. So the most useful thing that you can take away today is that there are objects and then there are arrays. So like I mentioned, the library concept, so you can let a book equals to title, cats page 509 page. So that's a meaningful description of what a book is. And then in the library, you have an array of different titles. So it's just a way for you to collect different stuff in a meaningful way that makes sense to you. So a library is a term that makes sense to you. A library is a collection of books. So I have a collection of each one of these books. I can even take this reference here, this variable name and put it inside here and you would know this is a collection of books that includes this title, cat, cats. So object is something that describes one thing. And array is a collection of something. Like I said. So for those who are further along in learning jQuery, JavaScript and stuff like that, there are a lot of methods that are attached to this concept. So if this is new to you, it's fine to not understand what I'm talking about. Okay? Perfectly normal. So there are a lot of very helpful things that you can use in JavaScript like to freeze an object, which means you can't change anything of it to assign it, which means to combine them together. So basically object.assign, assigns this little object here, these two values, the values that are inside, stuff like that. Okay? And then to type object.keys for x, you just grab all the keys for the object. So for those of you that have already tried out JavaScript and understand the concept of objects and stuff, there are a lot of methods that in JavaScript that are new or not so new that you can use to make your life easier when dealing with them. Because code is all about efficiency. It's not all about efficiency, but fun too. And then for arrays, so you have a whole bunch of helpful methods, like the one we tried just now, push, which is basically adding something to the end of the array. And then you can also do something called looping through an array, which means to take a library, for example, and start to look from the first, second, third, four, five, six, seven, eight, nine, ten, to find something. Like I say I go through a library, I go sequentially to loop through it. I go from the first book to find the title, cats. Search, search, search, search, search. That is what you do when you're doing things like for each or for each. Okay? Map is to do the same thing, but to, for example, if you want to do that and then return a new array which changed something. Okay, so there are, there are all sorts of things you can do with data and information, and there are subtleties as to the different methods and what is more efficient or makes more sense to be using. A lot of times you can use different methods to do the same thing, but the methods were each designed to do a particular thing better. So that is the distinction that comes along when you're more familiar with the language in general, not just in terms of syntax and stuff, but in terms of concept of exactly what you want to do, there are more efficient ways of doing it if you like. And then on all very basic things like an object and array, you have things like checking its length, how many books are there inside your library, is array, checking whether or not x is an array, okay, things like that. That is helpful when you're trying to deal with things that you didn't declare, for example, like maybe the server sends you back something, you want to check is this an array, and you do things like array, check is array, library. So for those of you that want to go into more information, MDN, Global Objects Array, then you'll see more methods, all the things that you can do with it. So we're almost at break time already, so hang with me for a little more. We're moving on to lesson three. Why when I'm talking I get game show host voice? I cannot help it, even at work I do things. I'm a bundle of fun at work. Okay, so is anyone not clear about the whole idea of data types? There are some, there are basically primitives and objects in JavaScript. Data types that are important for you to remember is the number, string, undefined, now Boolean. And then for objects, remember the idea of an object and array. Okay, this is already really powerful for you. So let's go back to code. Oh my game show voice. God. Okay, so like we've already previewed earlier because of your question of the idea of what variables are. So hopefully this lesson will be a bit clearer. So some jokes that Mike put in, let there be variables because you can use the word let to say let variables. I saw all his titles, I was like oh my god, every one of them is terrible, but also really good at the same time. I'm ashamed. I know it's really funny, I keep laughing. So the objective is basically just to learn how we can deal with data very efficiently and to be able to always keep like a reference to them. Okay, there's the concept of mutable and immutable. Mutable means that it can like mutate, you know, like X-Men mutate, stuff like that. And then it's immutable. I'm immutable and sadly, yeah. No superpowers. So where somebody else can mutate, you know. So some variables should not be able to change. Like I mentioned earlier when you use the word const, it refers to constant. So a constant multiplier for example is two times. So like a constant interest rate is a fixed one if you want to do that. So you keep the words constant. So these things should not change. So basically like we mentioned, variable is just a container of data that you put into it. You assign it and you want to call it this name. You want to call this... So basically what happens is like when you're working with things, you give it abstract concepts. Like I mentioned, Mike is an abstraction of a person not to be too philosophical. Yeah. So let's see what else there is. Yes. So a variable name, please don't have any space. That's why there was camel casing like I mentioned earlier to be able to differentiate, to remember between a multi-word variable to read it easier. That's why you do camel casing. But do not leave space. If you leave space, the computer interpret that as variable name ended. Okay. So how you're writing the importance of spacing, syntax and all that kind of semi-colon things. It's just a way for the computer to understand you better. A computer is like a very simplistic... Well, not nowadays, but essentially at its root, it understands things in a very fixed way. It's like a very stubborn machine. You just got to work with it. So let's try this in the console. We have already tried it, so I'm going to go a bit faster. So we have variable name. So when you do that, you're actually declaring the existence of this variable. You're just saying, hey computer, there's a variable called name, and it's coming soon. I don't know what is inside right now, but something will be in it later. So the computer will keep summarizing this little thing called memory, this name variable. And you can also try... No, I can't. It's the same thing. Is that going to work? So, can we declare maybe? So variable name, you can try Elisha Tan. That means your variable's name is name. Your variable's name is name. And the value inside is Elisha Tan. Elisha Tan was the one that walked in out. She organized this, started this. You'll see her again. So there are some concepts you're going to hear, like declare, initialize. In the future, you're here instantiate. You're here assign, stuff like that. They all sound like the same thing. Essentially, they do all... They sound like the same thing, but because computing people like to be very specific, so particular things have very specific names to it, just know that there are different kind of actions, essentially. But, you know, life goes on, you can know about this one year later. So basically, when you write, when you declare a variable name and you give it a value at the same time, you're initializing it. I'm not mistaken. Okay? So then you can also freeze it. So if you don't want name to change, because Elisha loves her name, so const name, and that name will never... You cannot change it anymore. Let's try that. Okay? So if I want to redefine this name, I want to give it a new value. I'll be like changing name to min... You can't do that, because it's a const. Because you have declared to say... It is to say, computer, please protect this variable for me. It's a const and it will never change. So it will stop you from your own mistakes. Okay? So that's why it's meaningful to be able to have these words called const and let. Because let tells the computer, you are going to change whatever value it is. And then when you declare a variable, you say const, that means the computer will protect you from yourself to say, alright, you can't change this, that means what you're trying to do. Whereas var, you can change. So var was the original version, and const and let came in later as the language evolved. So I like to think of variables as containers. It's like, you know, as a trailer chest. So if the let variable means you can still put things in the trailer chest, or change things in that trailer chest. Right? So whereas if it's a constant const, means that you already put stuff in the trailer chest, it will lock it up. It means you can't change it anymore. Right? So that's what would be much imputable. It cannot be new data or be able to change. Right? So you find that you use let on the same variable name twice. You actually throw an error. So you've already declared that variable. So you cannot re-declare the same variable name. Right? But you can overwrite the data that's inside that. Right? So you can try now let name they try to use the word let name something you should throw an error. Right? Because you've already declared it somewhere you've created the container somewhere and you think you already created the container so don't try to re-create it. It's only that. Right? Because there is no use to have a reference if it can refer to all sorts of different things at the same time. It's a meaningful abstraction to refer to something that you understand the entity of, I'm sorry to say it like this person, Mike. So we're almost at the end. For those of you who's brothers are bursting mine is, so I'm going to try to be fast. So basically the concept of variable is for you to be able to deal with data meaningfully pass it around, change it, pass it around some more and stuff like that. So a variable is just a reference to store information. Okay? Like you said, treasure chest, put information in it. My treasure chest name is gold treasure chest. That's my variable's name. So you can assign all sorts of different types of data inside it in JavaScript. You don't have to declare the type before but those of you have some background you don't have to declare the type a variable can allow you to take any kind of data types. Whereas for other languages for example you kind of need to say this variable can only store this type of information. Okay? Only store numbers. So then you cannot store any other types of the computer what you're trying to do. So in JavaScript there's a level of flexibility in writing this kind of things. So there's the concept of declaring like we mentioned earlier. So when you first introduce the idea of these variables to the computer, sorry I keep saying computer I just say it very simplistically you're basically declaring name as a variable exist. When you initialize it it means that you are declaring and also assigning a value to it at the same time initially that's why it's called initialization. So they sound like big words but actually if you look into it most of the time they kind of make sense. So declaring is like saying hey name and then initializing is like hey name equals cat. That means I give you initial value in the beginning. And then you have the other term called assigning which means to give it a value. Okay? It can be initializing you're actually assigning a value to the variable or later on you can reassign a value to the variable. Name can change to min if you do a let name can change to min, Elisha, Mike Soojin, anyone. Okay? So basically there are three keywords when dealing with variables. The most traditional one is var. This is the most supported since a long long long time. And these two came along with ES5 remember. So later you understand the concept of ES which is ECMA script. It's basically just a standardization of JavaScript that adds more and more features every year by a group of people called ECMA International. So these things are kind of new but nowadays these two are fully supported. So there is a symbiotic relationship between all this stuff as well as the browsers things like that. Sometimes some features were created in a particular version of the JavaScript already but the browsers don't support it yet that's why sometimes you'll see this particular type of writing doesn't work in the browser yet. But these ones do. And later there will be a website I'll introduce called Can I Use in case you want to check and try more newer things but for now I recommend just sticking to either var, let const like fit it. I think there are only three ways to assign to declare. Okay. So now we're going into our break time unfortunately I'm going to have to cut the break time a little bit right because let me look at the yeah so now it's break time so I'm going to start doors are not closed let me make sure if anybody walks past like oh god I just want my favorite jumpers okay it's a pixel jumper So now going on to lesson 4 I hope that bit of food and toilet break had but in the end we still had 30 minutes so I broke my own like oh come back in 15 minutes I'm so sorry about that so I hope you had time to let that marinate in your head but variables data types, something called functions and stuff like that so this will be the more hands on part of part one where you'll get to fiddle around, don't have to listen to me tell very lame jokes to myself all day so I didn't know why this title might erode this so adding artificial intelligence so to use the word very loosely is essentially like guiding stuff to happen okay so it's basically about controlling the flow of things so abstract my god so let's see what this is so the hands on part now please create a new file and name it lesson 4.html lesson 4 so rightfully you should have saved each of the lessons if you wanted to save them as lesson 1,2,3,4 and then copy this extremely long piece of text copy paste click control s or command s to save and refresh wrong file so oh no space so you should essentially see this yeah so again open up lesson 4 copy paste this piece of code it's actually a complete piece of page into your your vs code control save open that file directory in your browser you should see something like this a little block that needs some help feel free to get help from your TAs they have eaten some food and drank water or tea and coffee put them to work kidding kidding what is going to happen here is that I'm going to go through a bit of everyone's ready I guess most people are ready because can use phone and click already so must be okay la okay so I'm going to go through this piece of code if you're going to call it a piece it's actually a full thing a little bit explain what the different pieces are link them back to what I've mentioned earlier in the lessons 1 to 3 and then let you off into the world to play with it okay and then we will carry on and I'll come back and explain more information so let's let's review this in completion my says I talk too long so I need to let you guys try so this is I'm kidding so this is a HTML file remember that there's like just go back in the recap there's things called the header like from last week and there's the body body is where all these things you want to render on the page will start to go into inside body there's something called a script tag where you can put in JavaScript in body you can put in the other HTML kind of elements so let's look into the script area so starting from the top you'll see so sometimes you want to write stuff inside the code to tell your colleagues stuff or to remind yourself that what this thing does in the beginning I wrote so much comments there was something very funny a colleague was coaching a brand new fresh grad 2 weeks back he said this and I can't forget it he's like so he's very senior he's like I want to see more code than comments in your code you reminded me in the beginning oh god I wrote so much comments as much comments as my code so basically one thing is when you start to code as you go along you build a bit more you get a better feeling of things you should be able to name things in ways that read very naturally so code is not meant to be awkward or like very strange terms and stuff like that actually if you name your methods properly like get data from names get data from names back and forth that's a bit like a mouthful but it's very clear what it's trying to do and when you start to code professionally you need to remember you're not the only one touching the code base you have colleagues as well and some of them have more violent tendencies so you need to make sure that it's very easily legible not just to your colleagues but also to yourself one month, six months, one year later come back you can see it so when you write your code to be something very clear and not just method one, method two variable one, variable two variable one, two, three, four like that you should be able to come back and read it and it will read like something that makes sense to you so for the pieces that you really cannot sometimes we start to write things like comments to communicate the information or additional pieces of information that doesn't go into the code those are what you see here so this is like a single line way to comment so when you type a devil slash in front of something the interpreter will know how is that a better word I'll just say the computer will know not to ignore this piece, this line of code and then when you want like a multi-line you can write slash star, slash star so that's what I do this so basically remember we're talking about initialization which is when you declare the variable and also assign it a value at the same time this is what is happening sometimes when you see code you start to see things like semicolons behind to terminate the line in javascript nowadays because of python influence I think people stop writing semicolons I'm still a big semicolon writer because they feel like it's cleaner so you actually don't have to because they don't know to include the semicolons for you behind but traditionally you try to write things very explicit and that's what you write especially if you don't write things in clear lines you just send them all into one line without any breaks, you need the semicolons so this line says let my to-do basically it's saying hey this is my to-do list it's an array and then when you see that it's an array you know okay there's going to be a bunch of stuff that's going to go in there this is a good kind of data structure to use and then remember with array there are some methods called push which is to add the thing into the list in sequence so when you push what happens when you write code like this to say these four lines of push what will happen is it will evaluate from top to bottom in this particular case to say hey add to the array get the task get along T second buy more cat feed pet the cat before leaving the house today my cat gets very anxious if I don't and then fourth attend the Tech Ladies pre-bookend workshop too which is why you're here so that's on your to-do list so that's what happens when you're adding things to an array then we go to line 34 which basically just means hey look through the html that I've written to look for an element that has the id my list which you'll see here so these are the html tags that you've written and things like that you assign this particular list ul it's called an unordered list so basically it's just a way of classifying a bunch of a list of information so remember that different types of html elements have different purpose a h1 is a big header so it will come with a certain features of things like big text bold font and stuff like that when you go down the category and you go into h6 for example you know that's a smaller header smaller fonts smaller colors things like unordered list ul and inside you have li's which is just a list item for example so each of these have meaning and a particular set of things that come with it like whether or not this is a display block element or a display inline there's some presets that you can overwrite and stuff but in general there's a purpose for this so because we're going to make a list we've chosen to use an unordered list here with an id my list we're just saying hey look for this element inside my html file my list element so you grab it so then basically the computer would know to find this piece so they know what you're trying to reference to when you create this variable and this is a constant one means you're not going to change where you want to assign your list to you know you specifically want to put it in this one so there's no need to change it so now for the fun part of stuff this is on line 36 basically a for loop which allows you to go through a particular piece of code multiple times so to go through the array and do something with it so that's what you call looping the behavior is called looping I'll explore more in details later to give you a bit of information clarify with me if there are some parts which are not clear what the code is trying to achieve and then you can do it yourself so basically this is a for loop to say hey my current item is this so by this point in time after having gone through these four lines mine to do this inside would have a whole bunch of objects with this stuff in it already so when you get here the current item is basically saying hey look at mine to do this and look at this number so on mine to do this for example like just now we had an array of 1, 2, 3, 4 each of them have a sequential index number to refer to in the array because you want to be able to find a particular thing that you want and if you know for example I just want to loop through the entire array I'll loop through all the indexes of the array what is interesting though is that somebody very evil decided to name the first element index 0 so there's always a problem with off by 1 and stuff like this so this is very important for you to remember sometimes you might loop through your arrays and you're starting with the index 1 and you're like I seem to be missing something that is why because the first item inside an array is index 0 the last item in the array is the length of the array minus 1 okay so index 0 is like ground 0 I mean there are some things in life or internationally that we take for granted like in Singapore how like the what you call ground floor is level 1 whereas in Europe for example the ground floor is level 0 and then the second floor what we know as second floor is first floor let's just say I got really lost but that helped me to remember like index can actually start with 0 because remember there are different conventions in different places it's not just how things are in Singapore so by saying this it's saying hey grab this current item with this index number starting from here so let index number start with 0 then you start to evaluate until then you start to do this thing inside this curly brace this whole thing because this fallout includes the whole thing so let's start with index number 0 let's do this whole thing until the index hits less than the full length remember I said because it starts with index 0 the last item in an array is actually the length minus 1 so you can do evaluations like less or less than equal but if you try to do less than equal the length of the array you are going to get a mistake because nothing exists in the last piece so what you do is you just typically do less than the length of the array so you just mix things a little bit easier to write as well but a little harder to grasp in the beginning so what you're doing is you let this you do this loop inside each time you are running through you do a plus plus so this is the criteria you start with index 0 you do this thing does this criteria still meet if you still meet a plus plus do it again that is actually how it works so inside this thing you have LED emoji so you kind of know emoji would change current item type current item remember that current item refers to the item inside the array which is this one for the first one which is index 0 it's going to evaluate the word type so remember in objects it's a meaningful grouping of properties so you start to evaluate okay let's check current item which is the first one for example we will restart first current item type let's check the type this is a switch case which I will explain more in detail later so it will basically just try to match whether or not it fulfills that case inside this string here it has a very specific syntax that you just need to remember or just look up so type is going to evaluate one by one and see whether it matches so first one it hits already it's shopping so the emoji is going to be the shopping emoji and so if it hits it means you will skip the rest of this one okay so then when you go on to create a new list element you do for example document.createElementLi which is like a list item which sits inside ul okay so it's very typical that ul has something like this and then there's li first item it's not javascript second item this is generally what a list looks like there's the oh is it too small? hey you can't see things do just flag okay there's such thing as ordered list unordered list stuff like that but here we just go with unordered list because we want a way to control the thing okay so generally what is happening is that you are getting this which is currently empty right now nothing inside oh no so lonely and then you're inserting elements inside which is the li stuff okay so this is what you're trying to achieve let me delete that ooh so you're checking if the current element is done so done false okay if it's done then you will give it a class name done which then I assume you will style in a certain way which includes cancelling it out but if it's not done then it's just paranormal so then so what you're going to do is you're basically saying hey document create this element type called li for me um this element type I want to assign a class name if the status is done and then for each one I want to give a text okay so you inside li you insert the emoji which you have found to going through this switch case and you include the name of the item which is this one so essentially what you're trying to achieve is to in an empty list insert each one of these ones um depending on the type first insert the emoji here and then get the name of the task okay so if the item is status done there will be a specific class to it called done and that done would create a strike truth is that what you wrote yeah because if you have the class then the text declaration name is slide true I can also change it to color red anything I want um and then inside the my list element which is the original one the ul remember you will append child so each one of these are called child so there are some relationships like parent child relationship so when something sits inside another element it is called a child element okay so for those of you familiar with jQuery that's where you get a lot of this kind of dorm assessors with like parent child sibling all that kind of stuff I'm just surprised they didn't write like hey get grandmother element you know something like that instead of get parent parent parent parent parent parent parent item so um let's see if I miss anything okay so just a recap this is what the code does it's now time for you to try it out play with it remember the different elements that are involved over here um you can also involve some of the CSS starting that you've done previously you can change the color of the things that are done you can make it like gray if you want things like that um so just just go ahead and try it um five minutes so five minutes just fiddle around I'm going to quit talking so you guys can actually focus on playing with it if you need any help raise your hands to TAs I'm fully ready and operational like robots okay then instead of five minutes I did 15 so I hope that was enough time uh to kind of like grass and play around do you feel like you understand a little bit better of what I've been speaking about earlier through doing the exercise if yes say yes okay good uh you might also be a little bit more confused right now because instead of just understanding theory you actually need to type it you realize there are little things like opening tags closing tags you put the child inside stuff like that that's perfectly normal to be slightly confused uh so basically all these things are just to show you like how do you take a piece a group of data a collection of data for example and then insert dorm elements so insert things into the page so that it shows up you know and you don't have to keep writing the same thing again because uh so for example if you write HTML traditionally uh I guess you can call it decorative it basically is very verbose you're writing every single thing and your HTML file becomes like ginormous because like whatever you're trying to build you need to write every single piece again and again and again and so in the old school way the HTML file is huge so by using JavaScript you're able to repeat the same behavior of what you want to write over a huge collection of information so you don't have to write it yourself and it's also dynamic because when you change the data source or the data that you're using like the whole page can change without you having to go into this HTML file and changing stuff okay so that's the reason of connecting things like a way of collection information information collection alright so let's move on to lesson 5 it's a safe how not to repeat yourself I've been repeating myself all day so let's exercise 5 by 1 so there's this thing in programming where you say we call it dry so it's not to say like my humor is very dry it's to say don't repeat yourself okay so essentially like when you're coding the whole point is to make things very maintainable very efficient and clear to other people so the less lines of code you write to do everything you need to do the more maintainable it is because there are less places where errors can happen and as you go along you'll start to appreciate the more sustained your code is the easier for you to find the problems of where a particular issue is coming from we call that debugging so you're going to spend a lot of time debugging so if you have just now used that previous piece of code and you're trying to change something and it didn't work according to how you're expecting and so you started thinking to yourself alright where did I go wrong what does this piece of code do that is essentially the process of debugging it's something that a lot of us spend most of our day doing and hopefully as time goes by you spend less and less time doing that but it's an extremely important skill to be able to pinpoint where a problem comes from within your code or someone else's code so we have this concept called so as it goes along we start to have things called functions for example functions is just a way to do one particular action or it can be you can group multiple behaviors to go into a function but so you don't have to rewrite the same behaviors you want to happen again and again you write it into a function so for example just now the thing that's happening inside a for loop you can group that into a function as well to call it creating elements creating new to-do list item like that and then you can add in all that things so let's create a file named lesson 5.html be very careful when you're writing the syntax you can literally just copy it lesson 5.html remember that dot indicates file extension and that's a html file so if you name it correctly for .html your vscode will know to interpret it as a html file and you'll give you the correct lynching and colors and all that stuff okay so please copy this piece and put it into a file named lesson 5.html you can see like vscode knows when it's .html you see the little icon changes you know so it's quite fun later we have another and then along with it create another file called lesson 5.js put it into the folder so you can see based on your file extensions like your vscode will even tell you hey this is a different type of file so that's really convenient when you're trying to find things quickly and you know what you're dealing with so copy and paste this whole piece of code into the html file the html one not the javascript one paste it click save and then inside the javascript file that's why it's .js copy and paste this whole piece as well and save it close your lesson 4 file so you don't get confused look at my lesson 4 do it together 5.html in the browser you'll see something like that is everyone here not in this room but here see things are very abstract that's programming make it less abstract so most of you are here already if you're not and you're struggling to get to this piece please raise your hand your TAs are very helpful and ready to help Kira and say ok maybe one of you tell me something that's on your to-do list for today one to-do list for today so everyone is just going to go home and go home to Noa and hock in that's what I do go home to realize that's my hobby so what I'll do is click in you see my cat picture so what is happening here that allows this to happen previously your previous piece of the lesson 4 it shows you how it renders and all that but how do you have this interaction for this to show up what has happened is that you created a html file and you referenced an external script and this is where it happened so previously you saw that the script tag was written inside the body for example but you can also load this file inside the head you call it load the file similarly it's a similar behavior you can do for CSS you can also make it into a separate file and then load it into the document in the head so this is what happened so in the past what happens was like html files basically got too big everything was inside this dynamos 2000 line piece and it got really hard to debug, really hard to maintain like multiple people need to work on the same file that just doesn't work out so what happens is you basically try to maybe modularize something so you try to put things into a meaningful area on its own so that you know this piece of file does this thing this piece of file does that thing and this piece of something does another thing so like the CSS file will handle my styling for me of a particular type of styling this particular script is for me to be able to add an item to my list so you name it accordingly so that you can start to isolate each of these behaviors into meaningful kind of objects on its own file so you can actually put multiple ones and they will load in sequence in general if you don't do anything else special so on the right hand side here you see lesson 5.js this is pretty much essentially well it's not totally the same but you see a bit of the same things of what it does here so each of these grouping of behavior here for example is called a function like I mentioned function is one thing that is supposed to do if you want to be strict it's supposed to carry out one behavior not one behavior is in one line of code but one type of behavior like for example for me the idea of a function means function would be one of them buying groceries it sounds like one line of code but it really isn't it involves me getting dressed brushing my teeth going out the house, getting to the shop by walking walking into the right grocery shop with the ingredients, paying for the card and then making it back home that is one meaningful action of calling buying groceries so that is one function that I have for example means is able to buy groceries because inside that piece of repeatable code I know what to always do and where to go my favorite supermarket and stuff so that is essentially what is called a function it's a meaningful grouping of behavior in code so in general it is good behavior to return something from a function depending on your paradigms as well but it's fine also for it to not specifically return something okay like you're going to see this here for example the function called reset form it carries out a behavior but it doesn't exactly return you something so you're able to write functions in different manners to execute them so it's really up to you how you want to write it so the second example you see add new to do actually does return this is a simple return that just returns true which probably just means like hey this function worked so return true okay so by default this one if you don't write return it's just going to return now and now undefined zero and false they basically all evaluate to uh not really a Boolean they evaluate to saying no okay so basically they all kind of evaluate the same way so there is true and there is false and in that behavior a few of these things behave in the same way to say hey nothing happened or it failed or whatever so it will by default return now okay now means like doesn't exist so let's just take a guess at what these functions do quiz time so what does line okay so the reason why there are so many numbers on this slide it's really just for you to be able to quickly reference to see where in the code you're talking about and so the the ID can tell you which line has something gone wrong and stuff like this okay so it's very common to refer things to buy lines so let's look at line 10 of the JS file anyone tell me what line 10 is supposed to do if you can means that Mike did a great job naming the thing I'm going to stand here until I get one so basically it displays the to do list is that correct what do you guys think display to do that's actually an accurate interpretation of exactly line 10 but I mean but I also meant the whole function this is correct so basically yes what it does is like previously in the script of lesson 4 what it does is it goes in to find my list element which is that UL with the my list which is inside this file which you don't see it loops through it, assigns it an emoji creates the the LI item that goes into that UL defines whether or not it is done by giving it a strike true styling creates inner text which is basically the text that goes inside the LI with the emoji, the current item's name which is for example for me go home to relax and hang out with my cat and then my list element you append the child my list element so basically it's not just really just displaying it's also kind of creating it for you at that moment but this is essentially what it is it displays the to do list exactly like what you send so let's try line 47 ooh just now I added lines so the lines might change so what does line 47 do what the function do not the line, you look at the two pieces inside and what does it do so this is essentially what it does it goes to the document it looks for the element id to do text field and then it finds it it's an input field which is the one where you input all the text and then you reset the value to say nothing so when you're typing in actually what is happening is whatever you're typing in is going into this input so in this function what it does it resets it which means it takes the string out replace it with an empty string if you see two like quotations like this or like this these are just empty strings there's nothing inside and then it also resets so basically to do category field so we look for this one it looks for the id which is the select which is basically this one and it resets the value to others which will then just show you this one so that is what the function does do you start to get the hang of the idea of what functions do how they should be grouped that they should execute like one particular type of behavior moving on we are applying 52 add new to do what does this function do can somebody walk me through the lines of code if you're comfortable doing so can you walk me through what is happening from line 52 to 61 it's a code walkthrough anyone brave enough to try it's okay to get it wrong you know oh yeah cool so in line 2 to 3 in the text field if the length is 0 then if the button was pressed nothing will happen but if the length of the field if you add characters or something then the text will be filled and will be pushed to the list that's great according to the category and the class will be added because it's false does everyone follow yeah? thank you so for this line like she mentioned what is happening is like sometimes you check whether or not there's even a reason to do this if the input didn't change or there's nothing input maybe I shouldn't add it otherwise you end up adding a lot of strange kind of values this is one particular pattern people like to do they do, they check to see if do I even need to execute this function that's great and then finally we have line 63 which is this one Sheldon did you cover event listener last week? this is an extra bonus question does anyone know what an add event listener is? or anyone wants to tell me? maybe some know but don't want to tell me so I'll just carry on so basically what is happening when you do add event listener is you're telling you're telling well specifically your document okay so you're telling you're assigning to this piece of document an event listener which will look for a particular thing and then add a function to it it sounds like a mouthful but this is essentially what is happening so that when that event happens that function will execute okay so this is a very big high level one normally you can do things like you add event listeners to a button or stuff like that this one you add to the document don't content loaded so when the don't content loaded means that the html what you know as the html file basically loaded, it valid past everything so then it will then execute that callback function we call that a callback function because it's an anonymous callback function which basically means this function just sits there until it's ready to be executed okay so this is what it does better if I'm standing at the computer than staring at the screen so basically when the document loads the this function will execute so if first you will do something called you will display the to dos you'll find you will go to the document, you will create a constant reference variable called to do form by looking for in the document here for this thing called a to do form there's one thing I like to do to make things easier even though I can already see in this example so I just command find and then it will highlight for me what I'm talking about when I'm stepping through my code okay so you create a reference called to do form and then you add to that form a listener called submit okay so this is one where it's not such a high level it's a very specific adding a particular type of listener to a type of participant so this one is for submitting the form specifically so what is happening is it renders this it adds to the form this whole thing is a form this whole thing is a form it adds to it a submit function which has a callback it's fine to be confused about why it's called callback or what it's a callback function but you just essentially know that it is a function that will execute when something goes on okay there are some default behaviors that happen when you click a button for example or you click submit and things like that so this line you will see around in the future you don't really have to know it so much it's basically just saying hey browser prevent the default event that's gonna happen I want to overwrite that with what I want to do instead so then you create two more variables called todo text you will look in the document for the id called todo text field which is this one we should talk about earlier the value and then it will basically display which means it will kind of basically create this element again and after it's done reset the form resetting the form is just resetting this part and not here so this is where you can see the functions come into place and where they are executing it if you just type the name of the function function to do nothing happens you need to add the parenthesis behind the function in order to execute it so this display to do is essentially this one the one on top here so what you are saying is you are asking it to run this bracket here is very different than when you are executing this is just a syntax for a function unfortunately this is just the part where you have to remember how to write a function a function you declare to your code say I am writing a function with this name the brackets there are just for you to pass in some parameters and stuff and then the square bracket is the body of what executes in that function the ability to take things in here like for example id numbers emoji if you want to override it you can pass it in a function like this and then what will happen in this id and emoji is it will show up here for example but of course you need to create a reference to an emoji so I just really enjoy looking for an emoji oh no I closed it do things every day that make you happy oh he did already have so I will create another one so it exists the possibility if you write the code in another way okay if you want to pass in a particular type of variable or values to a function so this is what happens over here I can pass in an emoji and I can replace this emoji with this emoji instead of the emoji that happens here so I can set new emoji and just replace with this one so all of them will then become cats and here I don't even need to name it differently because there's something called scope okay so variable namings are relevant to the scope of the function you're inside so I can actually have the same name but refer to different things so that's called scoping it's a separate concept that you can learn in the future but basically this is what will happen if I'm not mistaken this should work oh I broke it oh because I had id there's nothing so I've overwritten all of them with a cat emoji so this is how functions work they're very powerful and you can write it in the way that suits what you want to do okay and so a function that doesn't have a name is called anonymous function surprise surprise okay is everyone still floating in the South China Sea I don't know do you kind of get the ideas of what functions are the idea of grouping a script into a separate file that you try to cluster behaviors in different functions you assign them a meaningful name and they do a group of behavior that does they achieve the objective that your functions call and that you can also pass specific values into functions for example to overwrite what is already written inside that function which is what commonly happens yeah and functions usually you can return a value or you can don't return a value if you don't return a value it returns now by default functions are basically your fundamental building block as well no one likes my new emoji okay okay okay so exercise 5.2 please open your lesson 5.js file and replace the code in it not all the code only the function called display to do okay so I very carefully and gingerly copy and paste this particular one I look for specifically only this one when you click the function you will see that your your editor will open up it will highlight for you where is the beginning and end of that function otherwise it's very easy to get lost between where is the beginning and end of another function sometimes because you have so many curly braces and stuff like that so that is usually what happens that present people don't deal with so you take this piece only this piece which is the display to do the ends here you delete it and then you paste the new one in what's the difference ah oh fancy create the link very fancy this is a bullet point so rotate if you hover your mouse over the function display to do on the left and you go to do as the left you will find a little shadow on the arrow there you click it, it actually collapses and then the entire function will be one line right so and right now if we go to the top line 10 you go to line 10 right now there is a little arrow thing that appears because that actually collapses that line so you can then delete that line one by one rather than every single arrow to not be careful or you do that so sometimes if your code disappears only because you collapsed it so just open it that happens so as everyone copy and pasted it and refreshed your index.html oh yeah there is a new function that you add copy and paste this one toggle to do and just pop it at the end of the file I prefer to pop it here okay same so two things replace the display to do function and add a new function at the bottom called toggle to do right wow so exciting not sarcastic not sarcastic very exciting okay is everyone here have you copied and pasted replace the display to do this one and also added the toggle to do I see a couple of nods now so I'm going to carry on if the page is not rendering rendering there is a term as expected please raise your hand the TAs are free to help you they are very happy and eager to be helping so please feel free don't feel pysay, don't feel shy about it that's what they are here to do today okay so as you can see now you can toggle the to do this so if you click it by mistake you're like alright I can't do that it's not fixed whether or not it's done you can use the same to do this every single day if you're attending exactly this workshop to every single day buy to to buy more cat feed pet the cat before leaving the house so I did what is happening is that we have modified the display to do to add a hyperlink to them done we add something called an A it's a better name than the A but basically the tag since it's just like two open triangles with an A in it and it usually has a href whatever that's usually what you call a link so that's why you call it a name link element so then you wrap up your to do item in that so there are different ways to be able to get interaction it's not just with buttons that you can do that with links and you can add event listeners to them to do certain things so there is a flexibility over there regarding what particular you want to do with an element you try to work with the purpose of an element first and then after that you add on customizations and stuff you want to do with it because what the what has been shipped is always more efficient about you write yourself in most cases so try to work with what the purpose is go with the flow of the purpose of a button of a link and stuff like that okay so on this what you're doing is you're wrapping it with an A tag and then you add an event listener called a click this event listeners are specific so you try not to invent them yourself most of the time the idea is that it should be common things like page load, clicks stuff like that, hovers so what is happening is like when you click on them what you do is you execute this function called toggle to do which you add over here which has a new parameter inside called items sequence and then you refresh and display the to do list so what's happening is when it's toggling is that it would go to that list look for the property done here and it will toggle this value so the opposite of true is false the opposite of false is true yeah the opposite of true and false is false the opposite of true and false is true that that's got to do with the confusion I talked about earlier about how you evaluate true, false, false, true so basically this is what happening so the toggle to do list over here will manipulate the data and change it so that when you request for a re-displaying of the items you would see the change that's why you get this do we have time to do this exercise move certain lines so we can think about how you want to move certain functions inside the display to do this into smaller functions so that it's more maintainable and it's much more obvious what each of them does like for example getting emoji you can move the whole switch case into a function that returns you only the emoji so the inside your display to do list your function gets shorter so then you know specifically how my getEmoji function is responsible only for returning me an emoji as long as I give it a type like a to-do type so there are some things you can do please try that yourself so to recap lesson 4 and lesson 5 this is the idea of what about flow calling artificial intelligence so basically the idea is just like if this do that like if this is true, circuit is close you pass it through this like about instead this one is maybe always true things like that so the idea is basically just to direct your information flow direct your behaviour flow the idea of flow like I said code has different purpose doing calculations and controlling flow so the if else is basically saying if something do that so you have seen this in the code right now that's on your computer if the status is done for example or if in the input to reset form or to add to do if the length is nothing or zero whatever then don't do something so this helps you to check for a certain behaviour before doing things so if else if hungry eat else don't eat and then the emoji switcher was what we saw just now it's called a switch case it's very common in different languages basically you just try to match your variable to whether or not it matches that case and then you return something it's important to remember to include the word break for that case if you don't want it to flow into the other cases if not it might end up heating all the others as well so these are just some little peculiarities so in lesson 5 we talk about the concept of don't repeat yourself so being dry basically something to lose my voice so being dry basically so one of the ways you can do that is to write functions so you don't need to copy and paste the same kind of code to do again and again and again you group this particular behaviour into a meaningful function that you can just call again and again when you need the parenthesis so you execute them by writing the function's name and with parenthesis behind it so that will execute the function for you so that can essentially cut down a hundred line maybe a twenty line code that you want to use into just one line and you re-execute the same piece again so it's very predictable what happens there's less places for errors to happen mistyples, all that stuff so just going back a little bit out of what just JavaScript of coding JavaScript for example now for those who used to know it we have the syntax of the traditional kind of functions we call them just there's actually no particular name for it if you guys know let me know I just call it a regular function basically that's when you write this thing like function, then you give it a name you can pass it in a parameter if you want then you do whatever you want to do inside if es6 5 always forget what we came about is the error function so this is just to introduce to you guys so when you see next week a react and stuff so you might be able to see code examples online it might get a bit confusing when you look at React and sometimes people write it with the declarative one and sometimes people write it with the error one so this is essentially what it is they do the same thing, there's a slight difference in terms of the scope but you don't need to know this right now because you don't need to know this right now because you'll get the joke in the future so basically this is what is happening this is essentially the same thing short of a this so what you can do like we talked about already, let this variable name to do this which means tell the API which I talk about later to get me an article, I'll give you the article's id number and then you return me the article you can tell me an object with different properties of what's in the article, the name the page to author, the writer stuff like that and then I'll just return the article so this is what a function does it does something very specific which is get article from the server okay so just two ways to write it the error function or not so try to master one of them first maybe traditionally try to start with the first one but it's all up to personal preference so coming back about the not repeating your code so much we do things like loop like the for loop that I spoke about so it's very simple basically what is going happening is you go into it you check if the condition is still max which is the second piece of the for loop if it's true then you do the action and if you condition, once you finish the thing, you go back and check condition still true and then you do it forever so what is happening if you write your condition wrongly you could end up in this loop forever in your computer crash, boom okay that's a fun one so generally try not to go there so you wouldn't encounter this with JR so much other languages you will have that problem so condition checking if false then it terminates so basically we say the loop terminates that's a term so that is what a loop is if criteria is still fulfilled if criteria is still met execute and you come back check criteria still met execute if criteria is no longer met it just exists so there are modern ways of writing it like I mentioned with someone just now there is a traditional for loop which is very common everywhere but in javascript you have things like array.map, array.for each so different ways of looping through something very specifically so I just wanted to add in a bit of a bonus on convention in javascript that I mentioned earlier already the camel casing this is generally the way that you name your variables or SUFC the examples in the functions we do this thing called camel casing because variable names need to be contiguous don't leave spaces between the words semicolon is in other languages of stuff you won't see that in python I think just to indicate that this particular line of code is finished, evaluate it separately from for the next it's not a continuous line okay so I like it basically just as good behaviour okay so that was like a huge mouthful and now we have to move on to part 2 oh I thought short break after this one yeah it says there's a 1 to 3 then you get to break I'm a robot this time you want to do it are you guys ready to soldier on are you guys ready to soldier on soldier on or soldier there's more food right now a lot of food should we go for 15 minutes you want to eat now yeah are you okay okay fill your bellies, refresh your mind because there's a lot to cover for the next one and this is a fun one you actually get to build stuff oh so loud I'm not looking I'm just talking to myself so loud every time you change the direction of the mic things change mic's mic so yeah so now we're going to go into what I was talking about the front and back end earlier about how the visible things just to put it very loosely you can call them the front end and the visible things you can kind of call them the back end there are even funnier concepts back end for front there's front end there's back end and there's always funny things that comes up now like back end for front end and stuff like that to differentiate the back end for front end from the back end back end sorry I have to entertain myself with this kind of thing so we're going to look into node I thought for this one it's slightly more useful for me to run through the information at the same time with the exercises because to go back to it later I might completely lose you that's not what I want to do can you guys see the slide is it big enough so because of time and whether or not it is actually super helpful I'm going to skip lesson 2 it's not particularly interesting if you want to be a web developer it's just basically to tell you that you can run stuff in your command line generally you don't do this in day to day life but you can run it anywhere you want so let's start on lesson 1 basically the point is that you can run javascript on node so what exactly is node we don't need to go too much into the bars all the keywords because then each keyword means something so that's a bit different but basically we're just saying like node.js enables you to use javascript on the server because it's the server side runtime you don't need to know about all the other stuff so basically what it allows you to do is that now you can create a lot of server side tools applications and stuff like that using javascript because obviously like I mentioned javascript was meant for browsers and in the front end it comes in built now you can also use it on node and like I said code doesn't run on its own it's not just like some magical box where code exists code exists in different kind of situations it is one of them they have built something that enables you to use javascript which is just basically a language on server side as well so basically the idea of node is to allow you to use js outside of the browser so what is the concept of the terminal this thing you have called bash terminal on max for example and stuff so essentially you can use the terms interchangeably I'm not sure if actually there is a big difference between the terminal and console so basically it just gives you access it's like a shell access I'm sorry like tell me if I'm losing myself trying to think about how I would want to understand this a couple of years ago it's an interface in order to get into your machine like into your machine so I call my computer my machine basically I call all of these things machines they are essentially machines so let's do this so open your terminal and the terminal gives you access to basically your OS do you know where it is can you see this so on your bar you'll see this little icon that I'm dragging out just to show you here open your terminal please and mac is called terminal windows I don't know what you call windows I don't know what you call on the mac bring up your spotlight so we use command space and type terminal I'm trying to drag it up okay on the windows just open your from the start and type command from or command so you'll see your black screen pop up terminal it looks like this you'll tango again so for mac users might be a white screen for windows users might see a black screen instead of course you can also customize the color but that's a subject for a different day yeah so I like to wish myself have a wonderful day so it prints every time I open it but this is not the computer I use on a daily basis so basically what you can do is if you have already done install fast you can type the version this will tell you the version of node you're running it should be 10.16.0 that's a new LTS my things are very outdated so you shouldn't be version 8 but just for extra information you can have several different versions of node on your computer I use something called MVM so you can change between different node versions different node versions support or come in with so don't need to think too much about it right now but basically node is just the layer that you really on top of kind of so you have different versions you can switch between them depending on your project's dependencies so what your project depends on so you'll commonly hear that your project depends on a particular version of node and after and you generally don't hear a particular version of node and before because as it goes along you tend to get more things very cool so now if you want to get into the fun part you can type node and then you see this little triangle starts to open up it basically means you can start to write like you can start to write things in it so inside this terminal space you're entering into the JS environment so you can start to write things so now this is the fun part so like in the browser for example there was the console that we saw earlier that supports it out of the box that you can write whatever you want if you're inside the terminal you can also type node so that you can start to write or just do like little things and things like that generally what we do is I don't tend to go into this but you can start to write whatever you want like hi hey the name equals to name so basically you're replicating the same kind of behavior environment that you had in the console in the browser earlier this suggests to show you that you can access node on your terminal so we're going to quit it by typing control C two times or you can also type dot exit one of the most fun things is learning how to exit things in your terminal there are some inescapable things could be very messed up it's the most common question on stack overflow how to escape things okay there's a facebook group for check ladies if you get stuck anything just write one of us will reply and say hey this is the solution if you're going to find it on stack overflow okay so this is basically just telling you what node is it's just an environment that allows you to write javascript okay on the server side on your machines I call these machines so I won't go into details but let's try next basically you can do what we're doing like the let name because whatever that was from part one from the previous lesson to go into it so you can write javascript here now so that is just to let you know that hey you can do this now like in the console in the browsers oh I'm really cold now moving to lesson two so we're going to just try running a javascript in the command line just to show you how to do it let's create a new file name lesson2.js so please open up your vs code again I'm going to close this off we call it lesson2.js I'm going to delete my test app copy and paste this information into the file all these seem very dry right now but like oh no I shouldn't have gone through this but it's fine I'm going to go quicker because I'm not going to explain it but it's just to tell you that hey you can run this file in your command line so you're going to see in my directory in my terminal I'm here already so how I get into things is I type cd so when I type lls you can see all the files that are inside right now there's something called lesson2.js if I want to run it I'll just I have auto-complete so I'll just do this I type note.js lesson2.js so it will prompt me so basically what is happening is here I'm asking hey note please run this file for me it's a javascript file and then I get to do things like what's your name and I'll say my name is min min the clumsy and then it will tell me like hey your name is min the clumsy this is exactly the one from here small okay so this is basically just to show you go back and try you can run a script inside using note are you able to execute the file so you probably need to find the folder from inside your terminal first for me the what you want so remember I asked you all to save your folder in your desktop so what you do in your for-packed users you just type cd space 30 brace slash desktop you basically get to your folder for windows users for windows users so c-h-d-i-r c-h-d-i-r c-h-d-i-r I think it's something desktop this is why I wanted to skip this I forgot yeah yeah yeah so for for windows users so this is the folder it's actually in d-i-r in windows which is to show you the content of your directory d-i-r is the content of a directory probably should have added this yeah I should have added it actually there's a shortcut go back to your visual studio code you click on view view terminal actually you can right click open in terminal okay so it's here but it will not open into a separate one you run inside your v-s code so it's directly in the folder if I type l-s to find the files inside for windows you can type d-i-r then you can just type node lesson to .js this is just saying like to get to this window was it terminal or view terminal so it's right click here open in terminal I think all goes for everyone else to open the terminal just run the file for fun also l-s means so basically the concept of like it's just a way for you to traverse through your file folder these are just commands in the terminal normally developers we use a lot of that because it just makes life a lot easier than clicking folders opening, looking and stuff it's just fast to type so we can go very fast like this so basically what is the command line you normally will see things like command line interface l-i stuff like that it's basically just for you to type commands directly and the idea of a directory is basically just like where your files are these are just terminologies to remember sorry I didn't anticipate this complexity sorry about that I wanted to skip but I totally forgot then I was like once I started oh crap but now you know you can actually run the files index.js so maybe on index.js you do some calculations and stuff like that and you want to run the calculations and you have no index.js and you'll run the file for you remember to return so you get a value okay now for fun part let's go into MPM we're gonna carry on so the TAs will help out those who still need any help so how many of you have heard of the term MPM how many of you have used MPM everyday all day all night so basically you're just a package manager so what is happening it gives you a bit more not just about JavaScript but also the ecosystem that exists around it and why it's such a vibrant community right now it's because of sharing code so on MPM it is one of the places that allows you to share code anybody can push a package onto it try not to be evil I know I have friends that make funny packages just for fun as a joke so basically a lot of code a lot of the basic things that you do are usable like something as simple as like maybe calculating big numbers that can be a package something as simple as my other friend packages there are a lot of packages when you look under the hood there are like 5,000 that's underestimate there are a lot of different packages that each project uses so that is what we call the environment not environment we call the ecosystem of JavaScript it's not just about the language itself but also all the packages and modules that are available for you to reuse so you don't have to do the same thing again and again so something as simple as like cloning an object that can be a package on its own and that package can just be something that is 20 lines but everybody uses that because it's well supported and it's well maintained and you know it's pretty much relatively bug free because when you try to write a lot of things yourself especially as a beginner you'll write a lot of bugs into it because you miss all the catch you don't have to catch all and all that stuff so that's why more established people or just anyone that has written something that they think they want to share as a function they just push on MPM as a package so that's why we hear you're going to hear similar things like Yarn and Bower and stuff they can also but that's not so much a package thing but they can also help you do all these things so MPM is basically this thing we've got MPM JS there are also others some scandal going on so what's very fun about the JS community or actually the internet community whatever is that there are always some kind of gossip and scandals and this is happening and these people are betraying the trust of other people and it's just very exciting and very very fun so now there's some scandal going on about MPM because they're like you're losing your soul to money and things like all sorts of this stuff it's really fun so anyways then you'll be able to see this is what we call MPM so you can do it through the command line because there's an MPM CLI and think of the term dependencies as basically projects that your project depend on that's pretty much what it is you import these projects or other modules as your dependency so that you can use the code that they export so you don't have to rewrite a lot of things so that makes things very if anyone you have done Ruby on Rails and stuff I mean this kind of behavior is very common actually all languages so let's try to create a new MPM package we really want to create an MPM package we're not going to push it too so this is pretty much in line with the idea of being modular and not repeating yourself should we do an MPM package hmm there's not much value in it yeah so basically the idea is that you can create you can modularize some of your code and things into something you call an MPM package and then import it as a dependency in your other projects so it's quite interesting because you're basically building different Lego blocks and then you can plug and play into your things and stuff like that so that's why people like to write things like packages so this is an exercise that people who are already a bit more experienced in JS and stuff you can go ahead and try even if it's new to you just go ahead and copy and paste and run the exercise you're just basically creating like a new package JSON so I'll go into the meat of sorry for vegetarians I'll go into the meat of the part 2 right now which is to explain to you a bit more about the server things so is anyone not unclear about my explanation for MPM so MPM is basically just a way for you to manage your dependencies of your project because you want to reuse code that other people or yourself have written that has been pushed onto the internet with a specific name so you can't have the same name as another package or else MPM will clash for example so something like React is an MPM you also use it as a MPM package for example React Router you install it as MPM package all sorts of things that you can use as an MPM package so you just write it okay so I believe you touch a lot more about that next week so then you'll get more familiar so let's move on to lesson 4 intro to express JS so basically what is the idea of express so let me match it just yeah okay so basically what is happening nowadays is that you don't just write an index.html and then let it sit like a static file on the internet you do something called serving your files you serve your static files you serve whatever so express is just a very lightweight framework a very lightweight framework to do that for you so you can write things like routes you can write a server to serve your files, your projects and stuff like this it's very powerful depending on how you're using it it's very commonly used as well so ideally basically if you want to do web development you should get familiar with the concept of express there are also other alternatives but express is what is shipped together with node just by default it's a standard defecto one now so basically the idea of a server is just a machine that serves you files okay the term is kind of unintuitive but it's pretty much just what it is okay and so one of the reasons why a lot of things are moving now to the server for example in servers you can control the powers of those machines that you're using I'm sorry I keep using the term machines but I really like it so their browsers have limited processing ability so if you want to do things that are really intensive for example go through a lot of data and all that kind of things it's better to put it off into into a server somewhere wherever you want to locate it to do all that processing for you and then simplify the response and give it back to you because you keep doing that in your if you keep doing a lot of very intensive activities inside the browser like your users screen will start to hang, it starts to slow down when you click something it just loos forever all that kind of stuff so you try to move all that kind of behaviors where possible or where meaningful into a server but that depends on your network time as well there's always some kind of playoff and judgments that you're doing over there when you're deciding what to move to the back and what you're keeping in the front okay I use the terms freely so I'm not sure if maybe sometimes the term is not very clear so maybe the term like client, do you guys know what it is? okay so client is not really like a person it's not like someone you're serving whatever client is basically just a way for you to access something it's very simple but these are very regular jargons that I use like client client can be like a browser stuff like that so it allows you to access things so that is what we call clients so you can have a multi-client application and then API I've always found the term API is very hard to understand I'm like what is the application programming interface it took me forever to really understand fully what it's supposed to mean I just know what the API is but I'm trying to break down the word application programming interface and I'm like what does this mean like sometimes the terms are really like dry like who names this stuff but basically the API is just a way to for a service to say hey interact with me this way so when you have two different services or two different things you want to two different like entities that want to interact with one another the API will expose itself to say okay I have I give you some methods some functions which is like change my name change input data send me stuff you can do it in this way that's generally what the idea of an API is it's like a unified way of interacting with the entity okay so you see the term API across all the different things you might see with regards to like endpoints which is basically like a maybe a set service as APIs you see like other things will have APIs so this is basically the core idea of it it's an exposed protocol it's an exposed set of ways of interacting with the entity so let's go into Express.js so there's there's exercise 4.1 and exercise 4.2 exercise 4.1 is more manual which will show you how to like write it from scratch copy paste all of that so try this when you're at home today we're going to use something called Express Generator which will generate all these files for you it's just to remind you as well that people have created a lot of tools and packages it's another package to make your life easier to generate all these things for you okay so you can write it from manual if you like if you're one of those people that enjoy writing this stuff or you can jump straight to Generators like for example if we react create react app is also a generator it just creates all the files for you and then you can run with it okay so let's go into your terminal this is where I need to sit so you might have noticed by now already that the VS code has a terminal in it if you like but otherwise you can also open it as a traditional terminal by command space type terminal for windows I always forget how but anyways I'm just going to do it here so I'm familiar with it here so what I'm going to do is first I'm going to create a directory so this command make directory means to create a folder for me it's very simple there are all these jargons but eventually you realize kind of what they mean it's just like hey make a folder for me okay make there so I'll make a there called my app too okay and then I'll type cd which is basically to like the city's time for change directory I don't know but it basically means to go inside that folder so after you make there please type no spaces in this term I'll type cd my app too okay that means I've gone into that folder so it's essentially the same when you're opening the very traditional folder like the finder like this you're essentially doing this inside your command line you're going into like folder stuff you're just doing it through the command line it's the same what you call this kind of interactive things are called GUI graphical user interface it just makes interacting with the computer a lot easier for most modern humans modern humans not ancient humans sorry so it just makes dealing with things in a graphical manner much easier whereas traditionally actually in the past you can just type everything like this so it's the same thing typing cd is the same as me double clicking into that folder here for example okay is everyone here is everyone inside the folder called my app too or whatever you named it so you should be able to see this is like your machine's name your computer's name and then this is the folder's name and this is just my username so you're all in it cool cool in it to win it who is in the folder already and so the rest I assume you need a bit more time are you in the folder okay cool so that's two thirds any questions in the meantime I know this part is running a bit faster but it's also the slightly more confusing part when you think about creating a web application when you say creating things like css, html all that kind of stuff it's very intuitive because these are things you see but now you start to go into the parts which are a bit more abstract but serve a very good purpose too so these things like servers how to write routes and stuff like that takes a bit of time to grasp if it's a new thing to you so if you like to go ahead already you can go ahead and install the express generator so type mpx express generator you can also just copy and paste the command so you don't do it wrongly remember to copy and paste it line by line not together you need to do mpx express generator first let it run and then do the npm install so type enter and then npm goes off to do all this job so once it's done, it has terminated then you'll get here does mpx work for you all of you so basically when you type mpx express generator you're saying hey go and fetch this package for me that's it you haven't installed it yet it's just saying go to the central repo where it is an npm scratch that thing for me mic okay go ahead the npm the depot but you haven't, have you installed all this stuff yet uh let's go up okay let's go down I cannot just copy and paste you can just type npm start don't need to type the depot npm start enter oh that's because we're windows can you allow access it's supposed to say it has started do you mind if I I'm not familiar with windows though yes mpx express generator you're inside the file, you typed it, you installed tried to start in in vorona windows it just stops at the bin does the depot command run on windows that's the problem I don't know I think okay just open your local browser and see if anything happened there local browser oh yeah open the browser type here type here go to localhost 3000 oh sorry what you can go here copy and paste this address it works already it's just because the debug thing maybe the mic terminal specific thing but npm start is everywhere so I don't even need the asterisk no that just means start which means all thank you is this installed which was your last yep it means it's done so you can type npm start now this is mine you might see like nothing is happening I was like what is this that's fine and then you go and open the localhost 3000 okay I got this after the mpx after the mpx express generator there is this oh you need to type sudo so we need someone to help you because it means so sometimes your file directions are protected so that could be the case one of the instructors will do so I'm so I'm going to carry on I see a lot of people have already started going on with the express generator and stuff so let me get there as well so now that we are here we do mpx oh you need help not sure oh that's fine it doesn't just type npm start okay so what is happening is when you get to mpx express generator you can also mpm but it's fine use mpx mpx express generator just goes to fetch that particular project for you that module and then when you type npm install it will start to unpack and install the stuff into your computer for you it will install all the project dependencies for example and stuff like that and then you will be able to then run it so it's a very important step to always remember when you install when you take a package already you fetch a package you must remember to install it because it won't like go and fetch all the other dependencies that it runs on because if every time it ships it ships as a gigantic thing with all the dependencies that's going to take forever so this is just a more efficient way of doing things okay and also to control basically the source of the code so for those with windows this debug thing will not work for you so just type npm start that's good enough spin this up so this is the joke with my cat npm installing because sometimes when it's really big it takes a long time so you just kind of hang out so now please go to your browser like some of you have gone already copy and paste or click this address sorry ignore me oh I haven't started it so type npm start then you'll see like oh wow why nothing like happening but actually it's working okay so yes I'm packed it no this giving it to you so what you're going to see is under this folder called myapp2 this is what fetching the express generator has done for you it has created essentially like a skeleton that you can use to put in your code to serve it so you just spun up your first server exciting times these are milestones you know like little things they're super important woo it's like you created your first like index.html page you started working with CSS created your first script spun up your first server even though it's just on your computer the same concept eventually you take it and then you get a computer sitting elsewhere to spin that up for you please go to express.js and read the information on the generator it just makes your life a lot easier and essentially when you open the term localhost 3000 localhost just always refers to the current computer you're on okay the current machine that you're on is called localhost and the 3000 is the port number that exposes this out so sometimes they'll tell you open localhost part 8000 port 5000 96 that's just a port okay localhost means your current machine so it has been configured right now to show it to you on 3000 so you see it on 3000 okay that's just where the information is coming out from I'm sorry I'm running over time but we are getting to the last part of things if anyone needs to leave early can you let me know are you guys good to stay for a while more I'll try to make it faster so this is the fun part where basically you just kind of run off and create your first app okay so you have spun it up already it's ready for you to fiddle with and include your to do app in later any questions for me at this point this is where we bring together the part 1 and part 2 from today into an app any questions who is still listening to me can you raise your hand who is not listening to me can you raise your hand this is the grand finale so right now we are going to be building your web app it's not just the index.html page this comes with a server and there are routes and things you can change and you'll start to be able to see the difference between actually the page of a server because it can be different places but over here this is a back end for front end I call it bff I'm really easy okay so open your vs code you close all the irrelevant stuff oh crap don't close your terminal please because it's running so move the to do list file from earlier just now into this application let me show you how okay it's the same thing but I'm just going to open a new one so it's clear so inside this vs code it is only the express skeleton with the static file serving everything available to you here so there are some things that you don't have to touch bin you ignore no modules are just where all your dependencies are installed don't go into there it's like a never ending hold there are public public assets that you want to serve like specific images and stuff style sheets you can write whatever you want in it it will be applied to your stuff views are essentially what we called your index.html so these are what people see we call them the views over here it's jade it's just a templating way so there are many ways to do the same thing different people have different opinions some people like to write it specifically some people just like to use templates so they can shorten the amount of code they write and it will be interpreted for them it's jade interpreted okay it's interpreted so if you go into localhost 3000 you essentially see this you see it says the title is express welcome to express this is essentially what is happening inside the jade thing okay there are different ways of doing things for different libraries on our frameworks so over here their preference is just for jade. I personally don't use jade but I think I can kind of guess what they're going at so basically this is just saying hey here's the blog content my battery my I want a h1 element that is equals to the variable called title don't get scared when looking at this right now because this is just a new way of writing html it's just supposed to reduce the boilerplate code okay so you just need to know like what is happening is that app.js which was created for us is serving this file to you right now it's serving you the index.jd which is like an index.html okay where that is happening it is doing this okay so what is happening over here you can't write these kind of things inside the front end generally it will happen in the future right now you can't write it like this this is how you write backend stuff so if you want to say like hey I need all these dependencies inside usually you start with the app.js that's a very standard thing to use these are each of them you are requiring each of these these modules and they are all installed for you because you have package.json that specifies what your dependencies are you need to use the express dependency because it's the generator it's not actually express itself it used express you want to install jd which is your templating one Morgan and cookie puzzle and things like that every project that involves npm will have package.json which will help you to control your dependencies and keep track of including the versions and stuff like that it also helps you to specify your start scripts so start for example under the hood users node it goes to node actually opens up your bin okay so it just serves whatever is inside here don't let you know too much about it just know that when you type npm start it will be served so generally when things are a bit hidden from you we call this magic you just kind of know what it does really I'm not curious Ruby and Rails have a lot of magic base which some programmers at the beginning is really good and it's very easy and all that stuff but sometimes when you try to debug things and there's too much magic you need to really dig into it and when it's magic it's like where do I start looking but this is just one easy way to get started with express the express hosted so when you go on app.js you require each of these packages which is familiar because you'll see it it either comes together with express or it's from your package.json writing like this require is actually looking for a local route a local file so when you write things like it's okay to be lost now because this is a brand new concept okay you're going to see this as you go along just remember the way of writing this is what you write on the server not on the front end scripts so this bunch are just the dependencies that you're going to be using in this file to say hey I require these dependencies for this file just bring in for me then you can bring in the other static files that you have written like routes for example so you'll load these two files routes and users okay wow it's getting route later so then we will use this to create a reference to the express instance that we are using right now so it's saying hey run an instance of express for me I'll call it app so this app is basically a copy of what is going on with express so then you need to set some views for example and we go it through this directory called views so this is just like a global thing so you need to look at the photo called view and then you set a view engine called jade that's just what we call engine setup yeah genuinely I don't do and then you can require and configure stuff so I want to use a logger my logger environment I want to use a development environment things like that and then you will also app.use what comes out of this method of express.json if there's any one point where you don't know what's going on you can always do something called debugging or console logging debugging sorry debugging is for front end console logging and these are pretty much very standard things so when you want to declare to express the static route for my static items it will be you tell them hey please do it here this is the folder where my static assets will be things like images and style sheets and stuff anyway there's a different concept between static files and non static files okay and when you're doing what you call routing, routing is basically just finding directions in the photo structure so when you're looking at a web page and you see so much slashes as well it's pretty much the same as you looking on your own computer in the viewfinder and finder to see all the slashes you're basically just navigating between things and files just that in the browser there is a funky way of interpreting your URL with the slashes you can insert index and all that kind of things but it's actually the same concept what you're trying to do is you're trying to get to something that is specific you're trying to get to a place okay and these are just standard error handlers that they create so that it will render error if something is wrong and then in the back end we definitely need to do things like module.export so it's like if you write in the more modern way you're going to see things like export default modules, blah blah blah stuff like that okay so let's get to the more fun part and the less boring part of stuff so this is the what you call the index.html of things so there are two things to note over here because right now what you're seeing in this project encompasses both the front and kind of the back end of stuff that's not really the back end how do I explain back end for front end yeah but this thing about okay just back and front end so this thing alone is having both okay so your views are basically your front, your public is your front as well and then your routes and all the things that go on behind that talks to APIs that fetches information for you all of that you call that the back end so when you're working on a project like this whatever you're changing on the front end when you refresh it will change hello when you refresh it's going to update itself but when you're changing things on the back end you kind of in this instance you kind of need to re-run the application you need to kill it and the npm start again for the things that go on in the app.js because you're affecting it itself you're not just affecting the files that it's serving you are changing stuff I know it sounds very abstract to you right now but it will start to clear as we go along as you go along so over here if we say what is referring to here in this template is title that's because over here I have to explain okay I think I'm going into too much details for you right now but anyways what is happening is when you are telling a router hey how to get where and what router is just how to get to something and if you do if you just type like this it essentially is evaluating to this which then gets here and this will tell you to hey response rendered what title welcome to change the variable welcome to Singapore you're not going to update because it is on the back end but when you kill it and you do it again it will come back I just wanted to show you a little bit of the difference between the so remember control C is to kill stuff on your computer and then you start it again and then it will update itself based on what information was fetched from the back end to push to the final okay so that's just a bit of distinction when you're feeling around with things yourself so now you're free to go and try to add this stuff so please copy your html and lesson .js into the public folder over here can you put it into the javascripts just put here yeah so just copy and paste this whole thing into this one okay I'm just going to drag it in boom boom yeah you just drag and drop two files html file check html and html and lesson file js into the public folder right what is in there then you can start to you can try to show the files in the browser no need to restart oh no oh no I need to go to the bathroom okay I'll be able to serve your lesson 5 files from your local host right so you just need to go to the local host colon 3000 and slash lesson 5 from html so you should be able to see the file right okay is anyone having issues with loading the file no okay you do need to restart the server so you just pop it, controls the start the server and then start it again and then you should be able to see the file yeah so inside whenever you make a significant change to the files in your local application you do need to restart it we don't really cover it over here there are actually ways for you there are ways for for you to do development work where once you type changes it will actually restart the server but it's not the scope of today's lesson so yeah okay yeah yeah so so so so so so so so so so so so so do I go to this the console and type html yeah you restart the server and then you should work you should work with so I should be looking by you try to do the you try to do the you try to do the gs you try to do the gs so so so so you so so you do need to reset it so do you think I can send so is anyone not here yet you close in with one You shouldn't on it man, I'm serious. Does everyone kind of get the idea that your server is the one serving your files and exposing them on the route? I'm going to try to wrap up in the next 10 minutes where you're going to try to build this thing yourself. I'll also be talking to you a bit more about APIs. So this is really the last leg. I promise I'll try to make it faster. But these are interesting stuff. It's a bit more dry but this is where things get very powerful. When you start to be able to write APIs and use them and all that kind of information. So what you should have now is you should have an expose on your route lesson 5, your to-do list from previously. 5.2, we're basically going to build an API and when we're working with APIs, we use an app called Postman. Most of you have installed that already. It allows you to test, try and use routes, endpoints. So inside your folder, please go to routes and add a new file called to-do.js inside the routes folder. Routes folder is this one. So write to-dos.js and then copy and paste the file, the information here into to-do.js. Remember to save the file app.js and add these two lines. It's also to put the route import here. So it's together with the others. And over here you see, you're basically called to-dos. This is not a browser route. It's an endpoint route. Build the server and restart it, okay? Like I mentioned earlier, when you change front-end things, what the server is serving itself, you can just refresh and you will just reload. But when you change things on the actual server, the app.js, you need to restart things. So command or control C in your terminal and then run npm start again. Nothing will change here. Start your Postman app. Postman is this one. Click import. You're looking at it right now. Mike has included this file called to-dos.json. Json is just like a JS kind of information object. It's just a format. So on your Postman, please open up to this folder. This folder is not inside the app itself. It's inside the folder with all the nodes. Okay. This is just a collection of, it's like a Postman collection so that you can share this kind of endpoints and information between developers. So click on this file and open it. You click on collections over here. You will see the three new endpoints that were imported automatically. You can write them yourself here as well if you know how to configure them. But the easiest way to start and to share between colleagues is really just to either have the same account, enterprise account, or you just import their collection. So this is what you call router endpoints. Not router endpoints. You call it endpoints, API endpoints. And they are ways for you to interact with information that is in your server. So this is not the same path as the one in your browser. Completely different things. Please don't mix them up. Over here you need to write your HTTP method of what you want to do. I'll explain later on a little bit. You have things like put, post, delete, stuff like that. And so this is how you're getting information from a specific endpoint that is exposed to you on the internet or on your own computer. That's how you interact with it. Again, this route is different than the one that you see on your browser. But right now my server is on localhost 3000. And remember we wrote here slash to dos. What is happening is that it's showing up here. So you'll go to read this file. I mean it includes it, not read. This one, which then define on the root of to dos what happens. And if I say for example on postman, this is a get. It will then refer to the router method get and execute what's inside on this one. So let's send it off. And do you see in the response, you're gonna get the information that was sitting on your server. Okay, and most people still with me. So this is extremely powerful because this is how you deal with information. You exchange, you update it, you create it. And then you start off somewhere off in the interwebs. And so like for example, if you want to build an app using YouTube, you want to get the content from YouTube. YouTube will have a bunch of APIs, which I said just not application programming interfaces that allows you to do things. Like to fetch videos or search for videos. They will return you usually in a format that looks like a JSON like this with the links, the names and all that stuff. And then you'll get this information and populate it inside your view. Okay, and view is something like the index.html, the jade. There are several different kind of ideas, but view is essentially what you're seeing. So this is an extremely powerful concept. When you get familiar and you're able to use it, you learn how to use APIs. That's really where you get up to the next level. In building a full app. Or you can choose to just specialize and be a front-end, pure front-end developer. So fun that you don't need to touch APIs. But generally that's not what happens. Okay, so what you have just done is you have created a new what you call a REST API for managing to-do list. So isn't that exciting? You just created like an API, a REST API. Is it too dry to be like exciting? I don't know, I find it really exciting. So I was there. So just with more context. So what we have done through review on the last part to do this API is actually quite close to the tenfold task. The second of the two tenfold tasks that you can choose from is the second one which is the back-end API. So we see which is, I think you're not wrong, it's the fast timing stuff. So we can actually use that. So there is a basis to kind of work on the back-end task. If you like, you can try that. But I understand not all of you will be able to do that. So which is why most of this tutorial of REST workshop is mostly focused on front-end. So that last bit is just for those who might be interested in the back-end bits, right? And then there are ways to fetch things more specifically. Normally when you write to-dos, you can even fetch things like your ID. So there are two ways. You can submit the ID number in the body or you can write it in the path. So if you want to test it with Postman, you write 0. But you need to, these are things to challenge yourself if this is something you're already kind of comfortable with then in order to fetch one particular part of the information maybe just this one object and not the entire collection. Okay, so let's round it up. Thanks for staying with me. So basically what exactly is a router? A router is just something that redirects you, okay? Directs you to this, directs you to that. I call it simply like this. So on the endpoints, you have some... The concept of CRUD and REST are not interchangeable but they are very... You can basically think of it as a similar thing. We call this endpoint... We call it something like a CRUD app if you can do four basic behaviors which you can create it, read it, update it, delete it. And there's kind of like a bit of a corresponding HTTP method like we saw just now on Postman. Remember to always change the method that you're trying to use on the endpoint. When you're writing your thing, you write router.get. It's different than writing router.post, router.put. It's different. But it's very easy to forget when you're writing the routes and stuff like that to forget to update the method. So remember, so then you get things like router.post, router.get, router.put, router.delete. This is basically just a read kind of function. This is a destructive one that delete stuff. Put is when you're trying to update something completely. Post is usually when you create or when you update something. Okay? If anything is not clear, please feel free to post just on the TechLadies Facebook group for questions. Say you're referencing this slide, like I need some clarification. So that's it. You build like a full app which is from the front end and the back end. Okay, that's like a great thing to be have done in five hours. So I just want to introduce you a little bit more of two other concepts and then we're totally done. One is open source, the idea of sharing your code with the rest of the developer community and the rest of the internet. So a lot of things are open source. React is open source. All that kind of things are open source. Express is open source. It is done by a group of people, sometimes sponsored by companies as well in order to put it out there to advance the computing and the internet for us. So that's what it's called open source. Okay, if you hear these kind of things, just remember. So it's basically like people taking their pro bono time, most of them to contribute towards projects and stuff that everyone else can use. Some people are paid to be specifically open source. That's fine. And then like I mentioned earlier, what is the difference between the concept of ECMAScript and JavaScript? ECMAScript is basically just a standardized version of JavaScript that is determined by the ECMAR International, which is a group of people that come around and say, like, oh, I want to add these features into the stuff. It goes through a lot of a lot. So you submit a proposal. It goes through a lot of around evaluations, everything. It's involved with people from the industry. They get their input, stuff like that. And then sometimes the methods will then make it into the language. Okay, so you'll start to see things like ES6, ES7, whatever, the kind of stuff. It just means a different version. You just need to search because sometimes it's not fully supported by the browsers yet. Some browsers are slower at adopting new standards than others. Chrome, Firefox are generally very well on top of things. If something doesn't work on a particular browser, you can go to this website called Can I Use, which you'll then check, for example, array.4H. Can I still sign this? 4H, okay. It's just 4H. This is a very basic one. So almost all browsers were created it. So then you can see, all right, IE Edge, all of them support this. You can even check things like CSS, selectors, whatever. Then you can see, like, oh, sometimes some things are only CSS Musk, for example, for the designers here. They're only partially supported by Edge, not supported by IE, and things like this. So remember, like, technology is like a whole bunch of moving pieces going on at the same time. It's not static, yeah? And that's it. But I hope you took a lot out of this. There's a lot of things to digest. So I hope we have tried to equip you with different pieces of information. So when you try to do the assignment or you go out into the world to learn more stuff, you will be able to understand them with a broader picture. Okay, thanks. Oh, no voice.