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.  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.  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.  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 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 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.  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?  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.  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.  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 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.  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.  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.  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?  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.  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.  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.  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.  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?  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 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.  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.  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 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 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.  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.  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.  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 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