Transcripts
1. Skillshare Course Introduction - JavaScript: Our, our, our arm. Who? I am so excited about this course, you probably have a ton of questions and we don't have a lot of time. So let me get into it. And one, why did I create this course? Well, let me put it this way. I started exactly where you are. I had no idea about coding. I didn't even know how HTML and JavaScript and CSS even existed. And I know the frustrations I googled so much. I read every article I was on blogs, I was on Quora, on Stack Overflow, and I was everyone. And I even did a fuse and some good ones that helped me along the way. But I also got frustrated. And then a lot of people just fly by some topics that they don't actually explain the underlying logic of what we're doing. So although I learned JavaScript, it just took me a very long time and like I said, and just kinda frustrating. Hence the reason for this course, I wanted to create an overall grandmaster jobs course. Of course, that structures JavaScript in a way that is understandable. But that gives you a solid foundation for learning much more complicated things too. What do you get out of this course? Well, like I said, I created this course to be an all encompassing grandmaster course. What does that mean? Well, that means you start from the complete basics. What is JavaScript? What is machine code? What is JavaScript engine? What does an interpreter? What is it a compiler in order to master jobs cuts in order to become a grandmaster? These are certain topics that you need to grasp. And what I found in my history of learning coding is that it's not to come across these topics, which is why I've put this altogether in one course, but it doesn't stop there. We also get more complicated. We get into variables, into functions, into objects, into arrays, into the different data structures in JavaScript. So rest assured, when you finish this course, you will be well on your way to becoming a true grandmaster in JavaScript. The examples, yeah, of course they are. What are you waiting for? Pitt that Enroll button. And let's get cracking. That's learn JavaScript together is going to be awesome. We're going to code together. I'm going to show you both online JavaScript consoles as well as an IDE that I use, an integrated development environment. Don't stress if you don't know what that is, we're gonna get into them forcing the subscribe. That's good. Let's get cracking. I guess that's my little leaf. I'll see you in the next lecture.
2. What is programming?: So let's start at the basics. Programming involves a lot of jargon and terminology, but don't panic, OK? Because once you understand the jargon, you'll find it surprisingly easy. And what is programming? Well, I mean, at the end of the day, programming is just a set of instructions that tells the computer what to do. And the good news for you and I is that these instructions are plain English and these instructions were just made up of tiny little commands. Again, you can call them commands, you can call them instructions, doesn't matter. And we refer to these commands or instructions as the programming Centex. But I don't know, jump ahead. We're gonna get into Syntex now and all that kind of stuff for now. I just want you to know that these commands are simple. Each command on its own is very simple, and they often the same for most different programming languages. So whether you programming in Giallorossi shop exactly etcetera a lot of them all heavy's same little nuances. So the benefit is, Once you learn this, it's gonna sit you on a part of becoming an excellent program and any language. Just take a step back. The important point that I want you to know from this is that programming is just a set of instructions. That's a that's just English, just words. So when you get frustrated and you will and when you stop pulling, you hear out, just stick back and go. You know what? I've obviously got the wrong words. Always got the wrong Syntex. I'm putting a full stop where shouldn't or Colon, which should be. And that's all I want you to get from this later. So those lecture is programming. It's just a set of instructions to tell the computer what to do in those instructions are written in English. Let's move on.
3. GIGO: when we program, we are giving the computer instructions to process one line at a time in the order that we give the computer those instructions and just a year away. There is an old phrase in this industry in many industries actually called gigolo, but basically it stands for garbage in garbage, out and in programming languages. We write these instructions by writing what a court statements and statements are kind of like sentences in English. And you can imagine if I go d d d lead you. That means nothing. And it's the same with programming languages. The computer is gonna process. What do you give it if you give a junk, it's just gonna throw Beckett. But at the end of the day, I just wanted you to be familiar with this terminology.
4. Programming is like learning English: So you're starting to wrap your head around programming what it is garbage in, garbage out that it's a set of instructions executed line by line. And we did mention this thing called Syntex. Syntex is just another word or another way to say how we write these instructions to computer. You know, I'm speaking English now. I've got a structure, my sentences in a certain way. Read a full stop at the end of each sentence. Well, was some programming languages. They want you to put a semi colon at the end of each instruction at the end of each command , it's the same thing writes. Instead of putting a full stop at the end of each intern, she put a semi colon, some programming languages, all Atticus, some languages, although case and use some languages to stunk it. So the question you probably asking was, Well, Clyde, tell me that syntax for Java script we're going to get for now, just understand what sin taxes and that most languages or most modern languages are trying to move away from very strict Syntex and where it is, JavaScript fit into this. We'll drop a skirt. K's a little so It's very forgiving, but they are some certain rules that you do need to be familiar off, and we're gonna get into those.
5. Order matters: We've just learned that programming is a set of instructions and each instruction tells the computer what to do. And even though each instruction might be tiny, might just give a small snippet and tell the computer what to do. But the important point that you need to grasp is that each instruction can be very small, but it needs to be very specific. And get this. The art off programming is to take a large idea, something big you want to do and break it into small, tiny steps. So programming work similar to giving someone directions. Let me give you an analogy. Say it is one person in a blue corn, another person in a red car and they're wanting to travel from point A to point B. You say to the blue cop, go up lift and then right in that order. But you give the red car off the same set of instructions position different order you say , go up right, and then left. What do you think's gonna happen? Well, you know what's gonna happen. Blue car's gonna end up on the left and the right God's gonna end up on the right. So what I'm trying to just get at your arrival. This very simple example is that the sequence off writing you instructions becomes vitally important. And if you mix these up, you're gonna get a very different result. And it's the same with programming. We giving directions to the computer. That's that. Instead of giving directions to a blue car red car, we're giving directions toe computer and the order off the instructions. The order of the commands is crucial because what the computer does is it processes each instruction line by line in the order that you write.
6. Recap: sure. So Okay, we've come quite a way. Um and I know I'm going a bit slowly and apologize for some of you, but trust me, you need to get these basics down before you can really master the language. But it's time to take a stick. And just remember what programming is very simple. Just a set of instructions that we give a computer to execute line by line. And these instructions Just a sequence of small commands that we give the computer one at a time line off the line. It could be two instructions. They commit 2000 instructions. It will be two million instructions and these rules in some Texas about how we write his instructions, which we're gonna get into. But before we can run, we need to walk. And unfortunately, we have to learn the stuff. And trust me. Once you learn these basics, you're gonna be well on your way to programming every single day because it's so much fun. So let's move on
7. HTML, CSS & JS - how do they all relate to each other: so the burning question you might be having right now is weight. Is Java script fit in yet? And before I can answer that, I just want you to think about programming languages in general because you and I know that they are hundreds off programming languages out there since the start of computing. But at any given time, they will, perhaps a dozen or so that all popular languages and as the years go by, different languages wax and wane in popularity and come and go somewhere a big hits. But most of them aren't so. This list off popular programming languages changes over time, right, But they will be honest. This list changes very slowly, and Java script is core. JavaScript is one of those languages that have been around for a very long time, and I can't see how Charles script will disappear. You know, it's in pretty much every single week page visit his job script off some form, but such all the script is just a programming language is one of many, and most program is during their careers will not learn one language, and the good news is for you and I is that Once you've learned one language, it's very quick and we'll not. I wouldn't say very quick. That's a lot. Okay, it's easier. Once you learn one language, it's easier to learn another language. And it's partly because, you know, the rules and sent Texas are largely the same with a few a few tweaks here and there. I'm gonna ask you a very cool question. What? You really are you listening? Okay, hold on to your cheek. I'm gonna ask you a very important question. Why isn't there just one language? Why only these myriad of languages? And the answer is drum roll, please. And let's jump into machine code now.
8. Introduction to machine code: So I'm sure you familiar with effect that computers can't actually understand words. There deal with numbers, ones and zeros, electrical inputs and programs stored on the computer stores. Sequences off buying remembers. And these numbers represent instructions. And we really know instructions or commands, same thing and knees roll numbers. This raw state of instructions isn't known in machine code, and this is true for all programming languages. So the question is, and you know, kind of lewd. It'd lost lectures. Why don't we all just write machine code? Well, for a few reasons, one is just about impossible. It's the miracle operations, tiny instructions that work on the smallest pieces of memory inside your computer. Even if you could write it, it's basically unreadable to anyone else. And to top it off, Cherry on the top is that machine curd works at the level of the CPI. So it just means you're gonna have to learn different types of machine code for different models off CP. And just before we move on, Teoh appease those of you who are curious. What does machine could look like? Well, when I say it a zeros and ones, I literally mean zero and once I mean, here's an example off what machine code looks like, and for a computer, this means something. But before we jump the gun, let's continue.
9. What is machine code? : cool. We moving on. We're moving on. Let's keep going. Hanging the guys Hang in there. Come on. We're going to get there soon. Okay? So machine cut writes. We know that machine code is basically zeros and ones that your computer can understand. The question is, now, what do I mean by your computer? Can understand it. Well, a computer is really just a process. Okay? The question now that I have as well how does your process understand the zeros and ones? How does that work?
10. What is a processor? : before we can actually appreciate the full power of Java script and how the computer actually reads the language and comported into machine code. I just thought, you know, we need to understand what a processes and was quite funny. I mean, I spent a lot of my time starting out coating for buried 23 years even really, truly understand what a process that WAAS. So I'm just gonna give you a quick overview. Okay? What is the proceeds again? You just need to realize that programming is not difficult. You just just lots of little pieces. Writer process is just one of those old pieces and a process, er is just a small chip against, like, a machine deck resides in computers and other devices. Your cell phones, radios and its basic job is just to receive input and provide up. But OK, in other words, let me rephrase it another way. I'll say it's a tiny machine that works in tandem with electrical inputs. Ah, but you probably just want to see one, right? Because you don't fully understand it and use a couple this job. Okay, Well, he has what it looks like. Cool. Just a small chip. Guess you could say that the process, er is the brains of a computer. It performs arithmetical, logical input output operations off the whole computer system. And we give this process instructions right, because the process there to work needs instructions. But unfortunately, and this is what sex with processes and assesses machine languages is that not all processes are the same and not all speak the same language. Which means we really don't want to be diving into writing at a process of level right at a low level. Which brings me on to our next topic.
11. Low Level Programming Languages: so humans aren't very good at working with Beiring. Numbers used in machine cut, right? I mean, come on. Who wants to go in Iraq? Programming languages in ones and zeroes. So they kind of make seats and then we take a step back and we're cool. Okay, so all these programming languages are really just a compromise. They really are just trying to bridge the get between us as humans rights, trying to just create something illegible so we can understand it versus what a computer needs in order to function, which is zeros and ones. And some languages are closer to this machine code than others. And these languages are kind of akin to what's known in the industry as an assembly language and in assembly language is known as a low level language. Why is it called low? Well, because you can kind of think about it that it's as low is, you know, to the process as possible, other than literally writing zeros and ones. And yes, yes, you know, the question you might be asking now is why don't we all just try to simply languages, right? It's executed much quicker by the computer and This is because the computer can directly understand assembly language and no trans pile er or translation of the program is required . And you also use efficient use of primary memory. So yacht justice alone, assembly language. My only hesitation and it's a very mess of hesitation is that assembly languages are difficult. OK, it's very machine dependent. Machine language differs from one computer Teoh a matter. It's difficult to program, It's difficult to modify, and it's very air prime. So for me, in this day and age, I don't think there's a real need to learn assembly language. I think you know, you get such good programming languages, Java script being no exception at all that allows you to actually write code. You understand. Others understand. But that is equally powerful. Is any other simply language
12. High Level Programming Languages: we saw kind of one of low level language was. Now, as we move away from the CPI and we go higher up the curve, we get into what's known as a high level language, and with high level languages, you tend to worry less about the actual hard way. And he's, I understand you get a whole lot of people out there that say, Listen, although it's easier to write, it can be slow and running because it's not optimized for the CPU at the CPU level, all right, But I'll be honest with you. I haven't encountered any problems. And in this day and age, compilers and transpire lawyers are so incredibly powerful, and I'm gonna be telling you what these are, so don't don't don't worry it. But these programs there convert javascript into machine code or very powerful and air. It's about very clever people. So at the end of the day, high level languages are just a lot more efficient for programmers. So the question you probably asking now is a well, waiters, Jarvis confident. Is that a low level language or a high level language? Well, wait for it. It's a high level language which is awesome and what makes so incredibly powerful. And now, as we move on, just bear in mind when we write JavaScript code we refer to this code as source code in the source code is also called a program, and this source code will eventually be translated in machine code so it can run on a computer. So we know this. We've we've been through it. We know machine can only understand ones and north, so we know when we writing texts as Java script. You and I both know that a green chili s together zeros and ones. What I'm trying to get across is that when I'm writing coded source code and when I'm programming or coding, I'm just meaning the same thing. I'm just meaning I'm writing code. I'm writing Woods
13. Recap: sure. OK, so let's take another state back. Okay? Unwind your mind. Let's just see what we've learned. So we've learned that machine quote God only speaks heroes and once right, which is at the process level, and they all those horrible languages that we don't want to touch in a little bit higher than that. You've got, you know, still lower level languages examples or C C plus plus and they just require deeper knowledge off how hard way and underlying CP use actually work. They more difficult to write from that point of view. And then you got high level languages which are very practical and very powerful, and this which almost group puts in.
14. How do you write JavaScript?: to start writing Java script or before you can start writing tar strips, these three big questions and the three big questions rate to the big how harder we write it. And by that I literally mean, where do we actually type words to heart? Is the source code convert to machine code? How do you get your JavaScript to be converted to machine code? And the last question is how to execute your JavaScript? So going on to the first question, which is relatively easy you only have to do is recorded source code is just text. So this means you can pretty much write your job. Scripted any ticks, data time you can Writer Inward writes a note pad. Anything else that suits your fancy. The important point to remember is that you can write off script anyway. Moving onto the second question is hard. A source code convert into machine code. This is something you need to be concerned about as a programmer. Well, I believe it's good, Teoh understand it. Like I said, I've got a firm philosophy and understanding the basics before you know, diving into the more complicated stuff. So, yes, I do think it's important for you to understand how your JavaScript is converted into machine code. Well, in order for me to tell you that you need to understand the difference between compiling and interpreting.
15. Compiled languages: we need to get our source code converted into machine curd somehow before it can run. And in two main ways of doing this, what's called compiling source curd and what's called interpreting the source code in most languages, your deal with will naturally fall into one of the other. But I think it's worth knowing the difference, because you're gonna be in culturing these times a lot in your programming career with a compound language. What happens is you righteous source code, and then you ever program called a compiler that will go through that source code and create a super file that contains the machine code. The end result is sometimes referred to as an execute herbal file because we can directly execute the user can directly from the file, and you're is a programmer. You get to keep your source code, and the user never sees it. Clyde, what are some examples? Well, okay programs, you know, languages such a C plus plus java. They need to be compiled before they run. All that means is that the source code is to pass through a compiler, which translated into bite code that the machine can understand and then execute. And when a program is compiled, it's offer compiled for a specific plateful. For example, Now be impactful, which will anywhere five in computers and other platforms said won't work on Apple computers. So what's interesting is that most high level languages today includes their own. Compile us or they have tool kits available that can be used to compile the program. If you want another example, I mean a good example of a compiler uses. Java is eclipse. It's an example of a compiler used to C and C plus plus. Is the TCC come on, depending on how big the program is that you take a few seconds or minutes to compile if Neuer's uncounted or being compiled then and execute, herbal file is created.
16. Interpreted languages: now with an interpreted language. On the other hand, you don't compile your source code before him. The program. It gives you a copy of that source code, and it will be the user's machine. That means it will be your machine, your computer that will interpret the source code whenever you want to run the program. So you can really tell that interpreter is different from a compiler and or something with an interpreter. Is it? Does this on the fly? We could think of it is going through your source code line by line and processing that source code on the fly fish Best Bush Bob's your ankle. All done. An interpreter doesn't save your source code into a separate machine code file. So you might be sitting there going. Okay, Course YSL nice and well in theory, but I've never My machines never been used as an interpreter to interpret. Language seemed to me. And by golly gosh, it actually has. And let's just take a step back and think about hard actually works. So when you go and visit a website, Okay. There Jarvis Cup gets into to your machine. Yes. And you know, you listen it's actually the browser to executes it, but you've been stored your brows on your machine, and this happens on pretty much every single website you visit into Google.
17. Compiled vs Interpreted languages: we've looked at intemperate Kurt. We look to compile Kurt. The question is now. What's better end with most things in life is not one clear answer. Which ones based? Well, they both have the goods, and they're both at the beds. Eso compiled code, as you can imagine, is optimized for the CPU, and as such, it's quicker generally on, and you don't have to send your source code to other people, so you can keep it very tight. On secretive. You want disadvantages with compilers as well there. And the biggest dishpan itches that if you compound on a PC debt execute herbal file that generated won't typically work on a Mac so infected, often used to be compiled separately for different kinds of CPU, even on the same platform. And when you're having to write code and for different CP used, that's an extra step so it takes you more time and time is money, so they must look it interpret, cut into Precor another hand. The biggest benefit before is that you don't really K what kind of machine is another end? Because you are not providing the machine cut with an interpret language. You are just seeing the source code, and you let the other side take care of it so it could be more portable and more flexible across platforms. This is what makes it so dynamic and awesome. Better also has its downsides. The quid pro quos that everyone has to have an interpreter installed on their machine that can actually convert that source code into machine good. It can also be a bit slower because you have to interpret every time the program is run and use. The source code is public because you're sending it to Iran. Who needs to run the program. And as you guessed that JavaScript is an interpret language machine good, it can also be a bit slower because you have to interpret every time the program is run. And, yes, the source code is public because you're sending it to Iran. Who needs to run the program. And as you guessed, this, JavaScript is an interpret language and
18. Intermediate languages: we've looked at compiled code. We looked at interpreted code, but there is 1/3 way of doing this, which is a bit of both instead of the compiled model where all the work is done upfront but can be a little bit inflexible, more than tripled model where all the work is done on the receiving end that it can be a little bit slow. Kind of do, often off. So what I mean by this? Well, I kind of mean a front. We can pilot part of the way to what's called an intermediate language, and this takes it as far along the way to machine code as it can get what's still being portable, often across platforms you can in distribute us, sending it to the people who need to run it and each person Iran's. It takes the lost tape to convert it into machine code on their computers, an intermediate languages also sometimes referred to as a just in time or just a compilation, and it sometimes also goes by the name of by Could
19. Programming recap: what? Whoa! I'm getting confused. Let's just take a stick back. So the process of converting your source code to machine code has to happen somehow. And it's just a question of how much of this happens on your machine when you coding versus how much of it happens on the other users machine and that determines with its compound. This is interpreted, for example, C C plus plus objective. See, these are all typically farmers compiled languages, so you need a compiler and stop, and the compiler can be downloaded for free. But they often bought into ID's The Good News, and I've mentioned this before. That Java script is an interpreted language, but now you are well on your way to understand in different types of Lamy just how Jolla script fits in. Why job script is such a powerful language in terms of hearts converted into machine code. And with that said, let's move on
20. Outro to programming: I know you probably see me. You go implied enough or just what is Java script code it. How does it fit in with HTML and the browser and the computer? So let's get into just before we do. I just want to congratulate you for I know it's been difficult. It's been a theoretical on even myself, not too much of a fan of theory. But I've tried to light in about trying to create interactive video to you getting into full swing of things, an enormous next section. That's fun. Let me introduce jobs.
21. HTML, CSS and JavaScript - Introduction: many people think it's all the script is a bad banks and that we only need it because it's built into old browsers. It's cool, these people wrong. Jobs cuts is an awesome language, and you actually have take companies giant tech companies all around the world spending millions of dollars to create very far stronger script interpreters. And what that means is that we can have forced Josko Brandt on environments. And what's really cool is that now you can use Java script on the back end. OK, up until about 10 years ago, JavaScript was very much predominantly, just a front in language. And then new wave development techniques called Ajax came along, and Ajax stands for asynchronous job script example. And in a natural, all that Ajax is is It's using Jaws ripped in the back end Beira Markup language called X M O, to make away page more responsive. What I mean by responsible. Think about learning new content on a webpage, but without making that re fresh examples, think about Gmail and hard lowers your emails or think about Twitter. Howard loads new tweet. It's viewed responsive and very quick. And get this this extra added functionality started to make drawl. A script in the past few years is seen an insane development in jobs inside the JavaScript Jason file form. It is pretty much used now to transfer daughter all over the Web node, which is a back end jobs trip server, cannot be used to create service. You got jobs. Trip libraries like must auction handled books that can create Josko templates in a very easy and intuitive way. You put frameworks like him back angular backbone. One of these frameworks are used to create thousands off crazy interactive websites. And these frameworks, this language withdrawal scoop languages literally push the limits of Java script way beyond what anyone thought was possible. Let's just put all of this aside for the moment. JavaScript is powerful, but it can be difficult to live. Can be difficult to learn any programming language if you've had no experience before. But the good news is that a lot of these languages all have the same logic. Loose tables, race functions, scopes, execution context. They all kind of s some their terminology. And once you get it for one language, it makes learning another language just so much easier and Java script because it's so powerful. Awesome first. So this section use a crash. Colson's office. It's kind of just sitting your mind dropped into understanding. How HTM. O CC's Angela script way All gonna get into cutting. We're going to get into a lot of cutting you. Do you need to understand the fundamentals first and custom makes Korean will find. It makes portrait of, you know, Sydney Prison. You just broke, you know, nothing hotter, you know, just memorizing fluids. I understand. I need to understand what's going on in the background, and it will make you much better program that you never make your last programming local settled The station is about. It's just setting the mood. Enjoy. Sit back and just try and soak in and understand how
22. Relationship between JS, CSS and HTML: we've got this far in the course without actually defining what Java script is. I like to say it's part of the Three Musketeers and what I mean by that Let's think about what the three core elements of every single website are. Can you guess? I'm sure you must noticed one of them html, that provides the basic structure of the website. See, ISS ISS is used for the presentation for mating and out. And of course, we've got your skirt, which is used to control the behavior of the different elements on the page. Now I just want to go over each one individually in a little bit more detail to help you understand roles that each play on a website and in once. We understand that I'll give you practical example of hard often. So let's start with a girl. HTM Oh html. That's at the core of every single page. And that's regardless of the complexity of the site of the number of technologies involved in building Net website. And it's an essential skill for any way professional, and it's a starting point for anyone learning how to create content on a website. And luckily for you and I. Html is, in fact, difficult to look, but let me break it up. The HTML stains. Four hypertext markup language. What do we mean by markup language? Well, rather than using a programming language to perform functions, HTML uses tags, a k A. Markups identified different types of content and the purposes that each served to the way pledge. So these tags thes small cups have pretty intuitive necks. We've got the heading tags. We've got the paragraph tags and CA tags, image tags I can keep going on and on and every website every week. Page is made up of a bunch of these HTML tags. Do noting each type of content on the page makes sense, right, And each type of content on the page is repped by these HTML tags. So that's HTML. What I mean by seizes seizes stands for cascading style sheets. Think about it this way. The HTML provides the rule tools to structure content on a website. See, a cease, on the other hand, helps to style. This content said appears in a nice way. It appears in a way that you and I intended to appear on the screen and these languages HTML and CSS. They kept separate from each other, and it's June shoulder website A bolt correctly before it's reformatted, you could look a HTML is the drywall and CSS is the paint. So all those colors and background images Yep, that's all thanks to CSS and see its face this language but a fixed entire mood and tone of the website, making it incredibly powerful. And it's very important skill for you tonight and remember what it stands for. It stands for cascading style sheets, and what do we mean by style sheet? Well, that refers to the document itself, and every Web browser has a default style sheet crisis. Every single webpage has at least one style sheet, and this is awesome to understand. So we don't not you, for the separate Nazis, is file every single site you have as a default starship. So, for example, my browsers default font is times new Roman. So if I visit a website with the designer, don't apply any styles off their own. I will see times New Roman, but obviously the false majority of websites visit don't have times. It's because we've designers started after the default style sheet. And then they overrode that with their own custom. CSS. And that's where the word cascading comes into play and a lot of people compared to a wonderful you know what? If you can imagine a huge, wonderful you know, I'm in Africa sitting at Victoria Falls. You just imagine this beautiful waterfall getting rocks on the way down, but only the rocks at the bottom effect, where that water will eventually end up flowing. And it's the same way with C. ASUs. It's only the last defined style sheet that informs my bras are which instructions rule of other instructions. And lastly, we have job script here, which is more complicated than html CSS. And it wasn't released until all also mid nineties and nowadays, Java script a supportable modern Web browsers and is used on almost every site on the whip to job script as a logic based programming language that can be used to modify the content and make it behave in different ways. Easy examples off confirmation boxes. You know there's boxes that pop up on your screen, a site that you've entered. We log in for a can. A confirmation box asking you to press OK or cancel their was made possible because of JavaScript. What about call to actions? You know, when you're scrolling down the site on, there's annoying boxes pop out to the left, asking you to do something. A byproduct. Click something that's job script. What about storing information when you fill out a form in your at your name and your name's Wally and at the end you purchase a product and you get a message saying Thanks, Woody. All my friends, that is also jobs. That is exactly how JavaScript is used on sites, and you can get very complicated with Java script. It could be good for security. You can make games with you can create special fix it. The list goes on. Let me now give you a practical example off what Java script is and hard fits into a website
23. Intro to User Agent Style Cheets: quickly. I just want to show you what I mean by browser having default CSS styles. What? I mean and let me prove it to you right now. Quickly. So let's create a HTML page quickie. Let's just get note. Pairs K and mistress type HTML body pair off. Hello, world close body close html. Okay, let's just say this to the D stop. Savior is Make sure you save it is taste dot h t mole. Otherwise it won't work. Where is it? Where is that? There it is. Yeah, okay. And let's give it a go here. This okay? Hello, world. You can see it's displaying over here. Let's just inspect this quickie, because this is what's interesting, right? I don't format that. Hello, Walt. I didn't but the margins at the top. You can see if you look closely this like a game. You just zoom in your for you. You can see this space here. This literally space. I didn't put that in the And when you inspect this, you can see here. There's a paragraph element and all these things here. The painting. I didn't do that. It's wouldn't do it. And you can see this word here. User agent style sheet. This means that this is the default style sheet applied by Google Chrome. In this case, that's what I'm using. And if you look at the bottom right, you can see he has times New Roman. Uh, no Montague's. Anyway, I'm sorry. Let me quickly move it. Uh, okay. There you go. So you can see here the bottom, right? It's time. Zero. So you got just wanted to prove it to you that Brussels have default CSS styles. Let's continue.
24. Practical example of pushing a button: Okey dokey. It's enough already. You probably sitting there just wanting a practical example off house all fits together. We know every website consists off html disease Angela, but how does it all fit together? And what is a practical example? Because I know if you're like me, you get frustrated not seeing it in action. Well, let me give you one, and I'll give you a very simple example. Let's say we have a button, a simple HTML button, which you can easily right in HTML with the tags button. What's gonna pop up on your screen? You guess that A boring old battle. But what if we want to despise this button up? Make it look nice? One option could be to make a blue. And what do you use for that? You guess that I see is this and I know it's I d. I'm just giving you an example here, but what do you think's gonna happen now when you go to click that button? Well, let's try nothing because you need jobs whipped. And that's the point I'm trying to get across. Yeah. What about if we wanted to push that button and change the weird. Push me to something like, I don't know, I've Bean clicked. How would we do that? The first thing you need to be familiar with when it comes to writing Java script is the well known script tag job script has to be inserted between script takes. So you're gonna be seeing this every single time, your JavaScript and when your browser goes through your code and it sees the script egg, your browser knows that it needs to interpret JavaScript. That's how your browser kicks in. That heart knows what to do with their code. So remember that the other thing you must remain that is that you can either right your travel script code directly between the script eggs. And we'll do that here just because it's a lot easier you'll see later. In this course, the more common way to do it is to actually write your drive script code in another file, and then your script eggs just have to point to that file or that euro. And now, for some awesome knowledge, did you know you can write other languages within the script tag? But generally everyone uses it for Java script, So when you go and you see old examples in other courses. Or when you start Googling, you might come across a script EG, where they've got a type attribute where they're type. Attribute is text forward slash javascript. But what you need to know is that you don't really need us. Why? Because that's old school. New HTML five specification Makes Java Script the default language farm within script TEX In other words, when your browser comes across a script take, it will automatically assume that that code is Java script. So now how do we write Java script? No one really taught me this, but I like to break it down into three broad categories. Step one, I think the father thing you're wanting to affect in some way in this case, we wanting to effect the button. So let's identify it using JavaScript. And don't worry about the Syntex will get into the Syntex and how we write offs for plate in this course. I just want you to understand the process. Step two. We need to tell Java script wing to run the coat. In this case, it's when we click a button, and lastly, we need to define what Heaven's win. The button is clicked, and this is where the meat of your job script happens. This is where you're gonna be writing the majority of your code. In our case, it's a very simple example. We just want the words to change on the button to I've being clicked. You've just written your first job strips. How awesome is that? And you can see it's not that difficult. It's literally just a few English words structured in a logical manner, which gets to result. That's all the job script is, and that has to be within the script. Techs just remember that. So now when we go and click it done this time, it's gonna perform as we expected. And this is obviously a very simple example. But I really hope it has solidified the concept of how jobs ripped houses is and how HTML fit in with each other. And you're probably wondering, how do you put the jobs continue occurred? Would files to put it in 100 reference. It'll don't worry. We're going to get into that for now. This is just a very important concept for you to grasp. I guess we don't let's move on
25. Scripting language: before we go further, you need to understand that Java Scripts is a scripting language, and what I mean by this is that you're all the script, cannot run on its own. In fact, the browser is responsible for running job script code, and we alluded to this earlier and have mentioned it before. That's all. The script is an interpret language, which means that it's run on the browser to run on the computers machine on the fly. So any user requests an HTML page JavaScript in it. The script is seen to the browser. It is then up to the browser to execute that code. And, of course, we know the main advantages of jobs scriptures that all modern Web browsers support JavaScript. So you don't have to worry about whether your site visitor uses Infinite Explorer chrome Firefox safari jobs. Trip will be supported, and the good news is that JavaScript also runs on any operating systems, including windows. Lie Next make, and we are going to be talking about engines. Job script engines these things that Randall's Rickard in the browser. But you know, engines can be complicated, but the basics off engines are easy. But anyway, I don't get in too much detail now on agents. I just wanted you to understand. Job script is a scripting language and cannot be run on its own. It has to be run by an engine on the brother.
26. Is JavaScript a safe language?: you might be sitting there and you might be thinking now, Java script is scary, but I'm here to tell you, see and think things. What's interesting with Java script is it's a safe language. It doesn't provide no level access to memory for your CPU because it was initially created for browsers, which don't require that. So the capabilities generally depend on the environment that you run Java script on. And when we typically think about JavaScript, especially when you're starting out at the stage, you thinking about it from a client to use a point of view from a browse appointed and need Java scrip cannot read fouls or right thing onto your computer. Java script in the browser can do everything but only related to whip page manipulation in direction with the user and the week's over. For instance, an in browser JavaScript is capable off adding new HD melter page, changing the existing content, modifying styles, reacting to use their actions during things on certain mouse, flex and point of movements, and keep prices simple run. It cannot execute any other programs. It cannot establish connection to another computer, of course, except download a new extra mile page of seemed mail. And what's very cool about this language on the frontin is that you cannot influence anything that's not contained by the browser. So you might be thinking, Why is this the case? Why, why's Charles have limited like this on the front een Well, Java scripts abilities are limited in the browser for the user safety for yours and Marseille, after the aim is to prevent a very nasty with page from accessing private information or harming your daughter, and that's good.
27. JavaScript vs Java: Now, before we move on, let's just discuss Java first. JavaScript. So right off the bet. Just bear in mind. JavaScript and Java are two separate languages. Java is to Java script. His hand is to a hamster. People often confuse Java and Java script, and maybe the reason is that Java script has actually borrowed a lot of ideas from Java. Rice is actually named after Java, and if we travel back in time about five years or so, this would be a simple comparison. It would have just been. Jarvis, a general purpose programming language and Java script, is used to make websites animated and fun. But now jobs trips growing up. We know that it's exploited, it's gone crazy. And the comparison between Java and Java script is more complicated. Perhaps the most fundamental difference between Java and Java script is that Java is considered a compiled programming language. JavaScript, on the other hand, is considered an interpret scripting language and the differences in the implementation we've been through this remember job is compiled into bite code and a grand on a virtual machine. Where is drama strip can be interpreted directly by browser in this in text, it is written, although if you look at any drastic apartment over the Web, you'll see that it's a unified. That's condensed. Barely read it. But this is the main difference just before we in. Let's just state a few more points between JavaScript and Java. One they both run on the browser Java script. We know this already runs on every single bras out there, and Java applets can also be run on the browser that they've been declining popularity for various reasons. Some, including compatibility and security, both can run on the server. Drama has long been a major workhorse off the week, with application service like Waves here, My Boss, Apache Tomcat running on a large portion of the wave application seen by uses today. And although a while ago, Java script wasn't that big in the service side of things, note has come out, and this has enabled jobs crippled application service to pop up all over the place. Both have libraries and frameworks, libraries and frameworks. Help program is by providing access to general and purpose specific code that can be re used over and over again, and both Jovan Jolla script on mature enough to have a wide range of libraries and framework options available. Next thing with mentioning is to stage first run time only debugging Jarvis compiled before it can be run. So if the any structural problems with the code they become apparent very quickly. And once it's running, ideas often enable the developer to attach to the JV m two d bag in real time. Hey, Mima Java! Script is not compiled in the same way. So Aled Bugs are founded. Raanta the debugging capabilities off job script a highly dependent on the execution environment, and this can vary quite a bit. We're right ones run evil. We versus Branching Madness. What I mean by this will drive a specifically designed to enable developers to write code once and deploy it any operating system without making changes. And in general, this does work is designed, although sometimes they hiccups depending on the J. Liam and the code use. And let's turn to Java script. Although job script has a standard through it, my script, it is much more susceptible to the differences and execution environments normally in the form of different browsers. And while it's frustrating for developers to write job script code for different environments. One silver lining is that the program itself can query the environment to decide what branch of CO two run for that specific environment. Aesthetic first dynamic type of chicken Java Use aesthetic type. Checking with the type of a variable is checked at compile time, so you, as a programmer, must specify the type into your double string ex cetera of any variable you create. Java script uses dynamic typing. So what does means is that it's not required for you and I to specify the type of variable we creating many pros and cons for the two differences between how Java doesn't and our job script does it. But the primary advantage of aesthetic type chickie right this is Java is that type ears are caught early in the development, and because the compiler knows exactly what Donna Tops are being used, code typically executes foster or end uses less memory. But the quid pro quo is that the prominent advantage off jobs ripped off dynamic type chickie is programmer productivity. You and I have free to design types at our leisure weaken were quickly and get the cut out there
28. ECMAScript - part 1: you may or may not have heard the term es six or Atmos crypt or years 2000 and 15. The problem is, it can get quite confusing if you don't understand what these terms mean. It'll started with Netscape, and for those of you don't know what needs scape was. It just used to be a browser. Infected used to be the most popular browser, and a company called a O. L acquired Netscape in 1999. Netscape asked a gentleman called Bring din, Iike to develop a language that resembled Java. Right? And they want to. This language for the wave of Netscape, like, however, decided that Charles too complicated with all its rules. And so he set out to create a simpler language that even a beginner could code. And this is evident in things such like relaxing the need to have a cynical on everywhere after the language was completed by, like, the marketing team of Netscape got permission to name a Java script. So in December 1995 Netscape announced Java script in a press release about a year or two after jobless cups release in the Rather, Microsoft's Internet Explorer took the language, and they also started making their own implementation. And they actually called a J script. At the same time, Internet scores dominating market and not long off the Netscape head to shut its project up . But before they shut down, Netscape decided to start a standard that would guide the path of JavaScript. Stay submitted the language to the European Computer Manufacturers Association. That's a bit of a mouthful, but there were trademark issues associated with the name Java script, and the standard became known. Is it MUS script, which is the name that it holds today? A script has had a few releases and in 1990 released Sikma script three before they went into hibernation for the next 10 years, enduring this 10 years, Microsoft dominated the scenes, but at the same time, they weren't improving the product, and he's Firefox was born. Firefox, by the way, was also lead by Ike, and a whole heap of other browsers, such as Cuomo, Oprah, eccentric Citrus started making the scenes. You know, a lot of people get confused between Sikma script and JavaScript, and where the script is the language and Java script as a dialect is arguable in my mind, kids like it's not important. There is no Kampala out there that grands crus script, So I believe dollars script is considered a language which implements a standard called script.
29. ECMAScript - part 2: the last part of this bonus section. I just want to clarify the different types, all the different versions of a strip, because this can get very confusing for a lot of newcomers in the space. Eight, my script releases new versions off the language all the time again. E S is just short for a script, and every time you see is followed by number. That's just referencing a version. So years, one years to industry and four, Those were all old version that have now been abandoned years five another and was released in 2000 and nine. And now we've got six was released in 2000 and 15. An ear six used to be the popular name, but a script decided to move to annual updates, and they don't want us calling it a year six anymore. So they said official name of it is he is 2015. So whether you refer to this year six or 2015 now basically the same thing and why, Yes, 2015 is the most popular versions because most browsers, or pretty much every browser, now supports years 2000 and 15 even though they are later versions off script brought now. Okay, so that's just a bit of awesome knowledge
30. JavaScript Engines - intro: We're just gonna talk about engines very quickly. We know JavaScript was initially created to make webpages alive to add awesome dynamic elements to away Pedj. As we continue with these sections and pictures, we're going to be getting deeper and deeper into Java script. We're going to be understanding mawr off what it does and hard works. So when we write Charla script activity, right, what a court programs Think about programs is a paragraph in Jarvis Cut we right and the scripts can be written on the HTML directly and scripts or just plain text. Nothing scary. We've already seen some of the past written, but the thing with the scripts is that these scripts can only run directly on my brother. On this, my friends means that there's some program written on the browser, an engine. It's running their JavaScript code, and this is what I quickly want toe lay out for you in simple layman's tips
31. Different engines: to put it very simply, a jaw script engine is just a program that executes JavaScript code. The engine, which is embedded in the browser, reads. And in karting talk, we just use the word passes instead of reeds. So the engine passes the Java script, the script that then converts or compounds the script to machine language and in the machine code runs and Iran's Pretty quick and the Engine applies optimization Zaun every stage of the process. It even watches. The script is it runs, analyzes the daughter that flows through it and applies optimization is to the machine's code based on that knowledge. And at the end, scripts are quite fast, and you and I have advantage off Google, Apple and various others, spending millions upon hundreds of millions of dollars developing really fast engines. And as with most things in the programming community, there's not just one engine. They are multiple engines out there and each engine each job, script, engine, implements of version of it mus script. And we already know that Java script implements that standard. This means as a prescriptive evolves, so do the angels, and the reason why they also many different engines is designed to work with a different browser. Hitless browser. Runtime like node. Whoa, I just said, Headless browser. You're probably familiar with a browser, but what's a headless browser? Well, it's actually a browser without a graphic user interface. They're useful for running automated against your wheat products. And we has node fit into all of this into the different service Notice, an asynchronous, event driven framework that allows you to use Java script on the server side. And since their jobs driven tools, they have to be powered by JavaScript engine. We know we've got different Java script engines. The question we have is well, which one should. So he has a quick summary off what angels are used for Java script. And as you can see, V eight is used for node and crow. And because of that reason, I want us to quickly expand a little on the V eight engine
32. What is the V8 engine? : we know what an engine is, What does it mean to do? So what's the engine that we should be looking at? Well, you could send it to major engines that are interesting. And why do I say to all? Because they're both leverage by native script and these two engines or rape kits JavaScript Core and Google's V eight engine. Now I don't really want to get into Java script core because it is an engine that handles code a bit differently, the one that I think we must concentrate on his V eight because this is very powerful. When it comes to node, Angela Scripter is really an awesome engine. Google Bolts V eight engine. It's written in C plus plus and also compiles and executes Java script source code, and the engine is used inside Google crime. Unlike the recent of the engines, however, V eight is also used for the popular node Js. Ron V eight was first designed to increase the performance of Java script execution inside the way browsers and in order to obtain speed, speed is everything you can agree with me, Fi eight translates JavaScript code into more efficient machine code instead of just using a normal interpreter. It actually compiles the code into machine coded execution by implementing just in time compiler. Like a lot of modern jaws, stripped engines do such a spider, monkey or rhino, which is Mozilla, by the way. The main difference. The other is that V eight doesn't produce by code or any intermediate code. It actually translates Java script into Machine code Di Ricky And what's really cool about V eight is it? It could be embedded into any c++ application, and this makes it incredibly powerful because C plus plus was designed to talk with your machine into do service I tasks. And as we know George script came from a beginning. Weight was only designed for browsers. So what this means is you can take your Java script running through the V eight engine or your C plus plus program, and you can literally convert that into machine code on the fly. How awesome is that
33. Remember, JavaScript lives in different environments: a quick word on Java scripts. And yes, we know that draws cooked is a programming language that would, you may or may not know is that your script lives in different environments. Specifically, we can break it down into three environments that lives in the browser that lives in the back end, a k a. The server, and it can live in a daughter base. It's used in all three of these environments in different ways and the different rules. And he's a different Syntex associated with each different environment. So in the browser, we've got the dawn, the document object model and JavaScript within this environment is referred to as client side JavaScript. And what are some of the things JavaScript deals with within this environment? Will, for example, what happens when the user clicks a better then Java script, get involved and manipulate the Dom in some way? What happens when we never get a menu, or what happens when you want a carousel of images to be displayed on your Web page? This is a lie Java script speaking to them dong to the browser. Then we also know George script can interact and live in the beckoned and a very, very common languages. Node.js is Angela script in this environment is called back in Java script, and it deals with things like what happens when someone clicks on the about US page. Then Java script is to speak to the server, and the server needs to deliver the about us page. I know there's a very simple example. I'm just trying to get the point across. And last but not least, we also have a daughter best. And of course, we can use Java script in this environment to in a very common daughter based scheme, and we can use with JavaScript is monger. DB and Java script again can live within this environment that has new language features available to it in order to do its job within this environment. What kind of jobs are talking about? Well, what happens when someone signs up to our site? When they fill out all that form information, we can use Java script to save the daughter to the daughter base. So there you have it. Java script is very dynamic, but what's interesting is that common JavaScript features like objects, functions, arrays, prototypes, inheritance daughter types all of these kind of things. They exist in every single environment, and they are largely the same. However, what's different is that in each environment, JavaScript is exposed to new functionality, new methods and properties that we have to be in excess in that specific environment in order to tell Java script to do its job for a specific purpose. I know it might be a bit confusing from now in this course, we're gonna be more focusing on the client side. JavaScript. But what do you learn? Like I mentioned Can carry across into a Wall Street. Hope you having fun, stay motivated, and I'll see in the next lecture.
34. Outro: who? Okay, let me just step away from a PC on outside. And I know what you're thinking. You're probably thinking right now. Then you need a haircut. Glad and the shape and miss your 100% correct. I might need to. But put that aside for now, and let's just take a stick back. This is only part one of this entire grand Master Siri's. We have only just begun and just think about what it is we've done before. We start coding Java script. You need to understand why we have Java script. And that's why we looked at what programming is we looked at machine code. We looked at compiled code. We now know the Java script is actually interpreted code. It runs in real time on your browser. It's pretty amazing, but we didn't stop there. We also looked at some JavaScript engine. Something has to run Java script and then we kind of looked agree. Java script fits in. You know, we looked at HTML. CSS is we just dropped a foot in, get quite confusing use first starting up and then we finally finished off. I just discussing the fact a Java script can live in different environments. It can live in. The browser can live in service side load, for example. And we can also use JavaScript to excess daughter basis. So it is a very, very powerful language. But if you're anything like me, you love seeing things in action. And that's why in the next part of the series we're going to be discussing, I have to write jobs in the console, so stick with me. I know this was a bit of a theoretical class, but it is going to get a little practical as we go forward. See you in the next loss.
CM Code_Zone, !false | funny, because its true
