FREE Javascript 6 Hour Full Course For Beginners 💻 [2021]

all right guys so i'm so excited to bring you this full javascript course where we're going to look at all of the basics of javascript i wanted to compile all my information together for this course and you know what i think you guys are gonna absolutely love it it's all free there's no caveats right here it's all in this video you're gonna get tons of content you're gonna get the history behind the language you're gonna get just so much more about this language that's incredible right so we're going to go from strength to strength at this point and hopefully this will launch either your programming career and i've got plenty more on programming itself like in your mind and not just the code itself and that's where i'm going to bring real value into your life i wish i had a course like this when i was starting out i wish that the concepts behind the language are also introduced not just the language itself because the concepts and the way in which a language works is the way that other languages also work in a very similar fashion and without that understanding or that quick version of history you'll have to sit through hours and hours of things hours of things constantly with reading materials and do you know how many people buy books this big they're massive they're huge they take hours of your life up right okay so yeah all right this is a six or seven hour long total freebie for you but what i want you to get excited about is the fact that i will also be launching from this a brand new course that will be a more advanced version as well and i'm going to give you more details on it later but right now you guys need to get those basics in your brain and there's also going to be more and more content that's going to come out it's amazing and what i've got planned for you and your future career you can't afford not to take these types of risks these types of things take the time to invest in yourself i mean literally it's free it's self-development it's also learning and growing in one of the fastest paced industries in the world once you know the concepts once you know the patterns and the basic things guess what you will grow in this industry phenomenally fast any product you want to make look how you can scale it make a product in javascript you can make apps now in javascript with a fully native user interface now these things will come right now you're on the basics but would you learn this language it's scalable it's one of the most scalable languages you can write it's the number one programming language in the world right now and pretty much all the employers are asking for javascript where most employers online where are their storefronts online running on the client side which you'll learn about that and of course they want the javascript now javascript's on the server as well you can run javascript like php you can run it actually on the server how amazing is it that you can learn one language and it scales over so many platforms you can build real-time applications in about 30 minutes now i have got so much exciting things for you i've got such a great future for you and it's gonna be unbelievable you're not gonna have to invest tens of thousands into an education and i'm gonna give you all this content but what i first want you to do is before if you really believe in this and you want to support this avalanche family and you want to support this message right now what you need to do is hit the subscribe button hit the ding dong bell so you get notifications and please join us on avilex and avilex academy both of these things are going to be platforms that are going to build your knowledge and share your knowledge we're going to create courses together in real time you're going to talk with all the community members we're going to talk about these things we're going to have a great community there so that when you do face a problem you will get an answer we've all had those things we'll just post it on stack overflow how long does that take to get a response well we can get a quicker response so the whole point about this is we're building a future platform for all developers i want you to start with your journey here because you're right as a beginner but this isn't the only course you should take there's also programming 101 as well we'll get to it we'll get to it but right now i want you to enjoy this course so let's get on with the course [Music] so we're going to take a look at the history behind javascript and the reason why we want to do this is because we want an insight into how there is a lot of names for this one language there's many names such as javascript live script mocha and also you've got jscript and ecmascript as well why do these names exist and what happened with the history of this language well first of all this language was created by a guy called brendan ike in 1995 and it was created in 10 days its development code name was mocha under the supervision of netscape and sun microsystems netscape was partnered with sun microsystems that designed the java language now he ignored the boss's instructions to design the language based on java instead he chose scheme and self these languages are not known to us today but brendan liked these languages because they were simple and easy to use and that's why javascript is so easy to use today when it was released the language was called livescript so mocha was the development name now when it's finally polished up and it's presented in the netscape browser it was called livescript then it was renamed to javascript as a joke to sun microsystems because the only part of the java language they used was the name sadly even though it's a joke many people have been confused by java and javascript being two very different languages or perhaps maybe some microsystems wanted their mark on that language then microsoft saw this and reversed engineered javascript however the name javascript and livescript was trademarked so they called it jscript and integrated it into the ie3 browser in 1996 the problem is we have all these different browser vendors giving the same language different names also the whole point to the web is that we create once and distribute everywhere so we needed a standards body to make sure the standards are kept between the browser vendors making it easy for us web developers once we write a script that'll work in netscape it would also work in internet explorer 3 and so forth so what they did was they went to the european computer manufacturer association hence the name ecmascript since es1 or ecmascript version 1 there has been many revisions the most notable is es5 in 2009 and now in 2017 we have es6 which adds additional features to this language you can visit the ecma website to find white papers on the standards of this language to understand how this language is supposed to work under the hood and what browser vendors should be adhering to so hopefully now you can see how this language was designed by self and schema and how it didn't actually incorporate anything from the java language however they called it javascript and then you have all these different names here for one language but i want to stress that mocha live script javascript and jscript are all the same language as well as ecmascript they're all referring to the same language but because these companies own trademarks on those names we have all of these different names for one language and also the biggest and confusing one is the fact that people mistake javascript for java they are two completely different languages and they have a completely different syntax and what do i mean by syntax well it's the way in which a language is written for example you could say french has a syntax they have certain symbols they put in their language and english has a certain syntax well programming languages have their own syntaxes the way in which you write the language and if you take a look at the way in which you write java and the way you write javascript they are very very different in the way that they are written understanding what the browser does with our javascript code is very important it gives us a tremendous understanding as web developers to really get under the hood and discover what happens with our javascript so very briefly all languages no matter what programming language it is is in a human readable format this is the syntax of the language this is for us the programmers however your computer doesn't understand this it understands machine code or what we know as ones and zeros so now let's understand the browser a little more with each application that you have most of the time it's made up of lots of little different applications that control certain aspects of the program it looks like one program but it's actually made up of many different programs so for example the browser has three main programs that we're interested in the first program is the dom parser and this takes our html code and it converts it into a structured page that we visually see the next program is this css parser that will take our css code and then it will make sure that our document layout is rendered correctly but truth be told even though we have the html and css syntax being passed here we actually combine these two together we have something called the layout engine or rendering engine inside of a browser which is actually just classed as one program and it takes both your html css and it does other things inside the browser as well and ultimately it renders the page as seen here and then finally we have another little mini program called the javascript engine now this javascript engine program can go by different names in different browsers but they're just code names they're just names for the javascript engine of that browser for example firefox has spider monkey google chrome has the v8 engine safari has nitro and ie has chikara so it doesn't matter what name we give our javascript engine its sole job is to take the javascript syntax that's in human readable form and convert it ultimately into machine code or ones and noughts so that our computer can understand our instructions so this is why we call it client-side because the files are being downloaded onto the client's computer and processed on the client's computer now if we take a look at the javascript engine specifically this is actually either going to be an interpreter or it's going to have compilation involved in there such as a jit compiler for example google's v8 engine and in fact a lot of javascript engines are jit compilers and what jit means is just in time and what that means is it takes your human readable instructions whatever instructions you want to execute at that specific time and it basically converts those instructions and they're actually very very quick they also do some optimizations as well now i've made a course on interpreters compilers jit compilers and so forth in my free programming 101 course which i definitely recommend you check out that video please do note though however that when the user downloads your html css and javascript files they are in human readable format so anybody can look at the source code however this is the whole point of the web that it's open it's flexible and it's expandable so there's no way of actually stopping somebody from looking at the source code and to be honest with you i've learned a lot by looking at other people's source code so by the web being so open it's very transparent and it works very well so help out other developers too [Music] console windows and interfaces are very important now i'm not on about xbox's playstations or any of the above or below i am on about a simple text interface that allows you to input commands and view outputs that's all a console is it's a simple text interface i like thinking of the console interface like the cool 80s kid that's a hacker and can go ahead on his really old computer and all he can see is giant text being typed out on the screen that's a console interface it's got no buttons it's got no cursor it's a standard text interface and yes your computers even though they do have graphical interfaces do allow you to open up a console window or console environment which will allow you to take a look at basic input text and basic output text from the command written or if you type the command in wrong you'll be able to see error messages and so forth if you run on windows you can open up the command prompt this is a console window if you're on mac you can open up your terminal this is a console window and if you're on gnu you can open up your terminal again which is a console window it's a basic interface but however don't let its simplicity fool you computers are very simplistic however the console interface even though it is very simplistic it is very very powerful your graphical user interface just hides all of those commands that are run so technically you don't have to be extremely geeky to use your computer however as programmers we like geeky and we like consoles and we like inputting text and viewing output because that's what being a programmer is all about so does javascript have its own console the answer is yes so what is this console well this console will allow you to type in javascript commands and those commands will be taken live to the javascript engine the just in time compiler compiled run and the returned output will be delivered back to you in a human readable format which is again just text this is very very powerful and the whole idea of programming is we understand exactly what we are getting back and throughout this course i'm not really going to be writing javascript files i may do here and there but overall we're going to be doing all the console work we just want basic input basic output and that way you can see everything live you can see what's happening in your just in time compiler but please do bear in mind that sometimes i will be writing javascript files and what you can do in your javascript files is log things out to the console window so you can run the script and you can take a look at the output again we'll look at all this later but however mainly we're just going to start out with just typing commands directly into the console window and also the console is extremely beneficial for debugging not just to view output but to view errors and warnings any errors compiling your javascript files or running commands directly in the console will appear in the console window so if there is any problem and your javascript isn't working the way you expected it you need to open up your console and take a look at those errors so how do we gain access to the console window well we open up the developer tools now every single browser that's on the market today comes with developer tools i'm just going to cover the most popular browsers so the first one is google chrome the number one browser in the world all you have to do is go to a web page i recommend going to a web page that doesn't have any javascript errors so i recommend going to avilex dot co dot uk and make sure you open a new tab up go to applex.com and then anywhere on the page right click and say inspect element when you do this the developer tools window will open this developer tools will actually let you modify the dom and even let you modify the css live on the page without having to refresh it but also you have the console tab and from there you can take a look at the console window and from there you can input commands and view the output of those commands you can also view errors and warnings now please do note the data that is displayed in my console window which is the google chrome console window may look different in your console window if you're using a different browser now if you are running firefox you need to right-click inspect element and from there you have all the same set of standard developer tools dom css and also you will have the console as well if you are running safari you need to go to the safari preferences and then you need to enable developer tools once you've enabled developer tools right click anywhere on the page and hit inspect element and if you are running internet explorer simply press f12 when you press f12 the developer tools will open up in either ie 8 9 10 11 and so forth and again all the standard set of tools but mainly we want to take a look at that all-important console window [Music] hi guys i hope you are finding this content really useful and adding value into your life and i'm serving you the way that i should be with that great service of knowledge and information and hopefully getting you excited about your career and i hope you can get the value that you need out of this and if you are and you'd like to contribute something maybe buying me a cup of coffee hit that kofu link in the description down below and you can donate like three dollars that will be enough to get me a nice cup of coffee and i can still keep making great content for you guys [Music] objects are extremely important when it comes to programming especially when you start to realize that there are some seriously complex applications out there that you may want to build someday but their complexity is based on simplicity which is objects objects have stumbled a lot of people but they are very very simple so let's start out with the real basics your program can only contain nouns adjectives and verbs that's it programming is very simple nouns are descriptive so take a look around you you live in an object-oriented world and each object has its own properties or nouns these describe the object so i'll take an apple for example so we have the nouns such as the width height colour and weight these are nouns but they're not good enough to describe the entire object you also need the adjectives as well such as the string red so when we combine the adjective red with the noun colour we know that now we have a red apple these key and value pairs or nouns and objectives are called properties next you have verbs verbs are performing an action which is a function that's exactly what a function is so you have nouns which is descriptive and verbs which are functions and functions like verbs for example could be eating the apple that's a verb also i could throw the apple that's a physical action so again it's a verb so verbs are functions now when a function is within an object it's still a function but we give it a different name we call it a method that's it so when we say method it simply means a function that is contained within an object that's it that's how easy an object really is so to give this some perspective what i want you to do is think of let's say creating a graphics editor a lot like photoshop i have a canvas and on that canvas i can have several images let's say i have three images in total on the canvas now what we have is three objects on the canvas three images and for each image i have the x and y coordinate where the image is placed then i have the width and the height of the image and i also have the image data itself so now that we have all of this data and it's correlated together all of these properties are encapsulated put together i have each object which resembles each image now let's imagine that objects didn't exist in programming which is just impossible but let's say they didn't how could i then group this data together the simple answer is i couldn't so for each object all of those properties will be let loose how do i know which property which noun describes which image the simple answer is i don't that's why objects are so important because they allow you to group information together that relate to certain aspects of your program that's why it's important now to really get this object orientation in your mind what you need to do is think about this in everyday life look around you look at all the objects you have just look at your computer take a look at the width the height the color the size of the keyboard the trackpad type so on and so forth again this is all very very important and then look at what you can do with the computer i can type i can smash the computer which normally that's under angry and then on top of that you also have a whole host of other verbs that you could do to your computer so that's the whole idea is the fact that when you group data together it becomes so paramount how important objects really are and if you don't understand objects you will not understand any programming language it doesn't matter what it is now to really ingrain this into your mind apply it to your everyday life just visually think of those braces and adding in the properties and methods of each object you come in contact with for example you wake up in the morning you go ahead and get the milk out of the fridge so i'm going to picture the fridge i'm going to open my curly brackets and then within there i'm going to take a look at a few nouns that describe this fridge so it could be the make of the fridge the size of the fridge and so on and so forth then on top of that i'm opening the fridge door that's a verb that's something that i'm doing to that object therefore i'm running a method on that object i'm opening that fridge door if you keep thinking like this in your everyday life i guarantee you object orientation becomes a breeze now the next level is embedded objects so we've already established that objects are very very simple but objects can contain objects just like in everyday life objects do contain objects again think of your computer that sat right in front of you well it's not just made up of one object it's not just clusters one object you may have a camera in your computer you have a screen you have a keyboard you have the trackpad each of which have their own nouns and verbs associated with each component in your computer and you can break it down and down and down and down and go as complex as you would like but then what i need to do is encapsulate all of those objects and components together into one object so here you can see it's all encapsulated into one object so this right here is a hierarchy of objects we're establishing an order of objects we have the sub-objects and the main parent object and when you think of something like a car engine and all the components of a car engine again you can go into some serious depth with your objects so we've understood one encapsulation encapsulation is grouping data together whether it be nouns and verbs or both and if you really want to remember encapsulation just think of a capsule that contains many chemicals and so forth that you stick in your gob and swallow then we have nouns and objectives which describe the object and verbs which are actions performed on that object and finally objects can contain other objects now if you understand all of this you will understand objects and if you apply this knowledge in your everyday life then objects will become more clearer to you as a programmer [Music] so what is the javascript syntax syntax is simply the way a program is written so we have all these different languages for example html the hypertext markup language has its own style that you write it in that's the syntax that's all it means that's what syntax means it means the way in which that language is written and that's defined by the creators of the language now there's going to be a very popular acronym an acronym simply means each letter is a word and that acronym is api and it will constantly keep popping up so we really have to understand what is an api api stands for application programming interface and every language on the face of the planet has its own api what is it well an api is simply a collection of functions and also properties as well so let's have a look at this we have the window object in javascript if we take a look at this in our console we can see that a window object has many functions these are methods these methods were not set up by us this was set up by the just-in-time javascript compiler so this program automatically defined these functions and properties in the window object in and of itself we didn't need to do anything for that window object to be defined it was already defined for us so in that case that is the javascript api in a nutshell it's just a collection of functions and properties likewise we can also have apis inside of apis for example let's say i download the all popular jquery library which probably most of you have come in contact with well jquery attaches onto the window object and you can see here with the dollar sign jquery is an api it has its own collection of functions and properties this is what's known as an embedded or extension api so that basically means that jquery needs the javascript api to define its own api so jquery is just using those native apis that come with javascript those native predefined functions and then it's using those in its own functions and creating its own style but it's not in and of itself a completely different language it's an api extension therefore it's adding on to or you could call it an embedded api that's what libraries are and whenever i create let's say an object within the window object because everything goes inside of that window object and we'll learn more about this later but whenever i create an object with my own methods or my own functions and my own properties i'm essentially creating an api you don't have to give it a name but you that's what you are doing you are creating your own api so remember javascript comes with a jit compiler that takes your human readable code into ones and naught and a jit compiler have their own native apis or predefined functions and properties right out of the box otherwise if it didn't you wouldn't be able to create your programs and you can extend onto the native api by creating your own api you could create your own library or even just creating a grouped set of properties and methods you are creating an api so again to pull up the window object simply go to your web browser go to any web page right click inspect element and then go to the console tab and from there you just type in window and that will bring up the window object now every single window doesn't matter whether the window is in a tab so you have many tabs or many different separate windows it doesn't matter each one of those windows or web pages has its own window object and each window object is isolated from the other so in essence one web page can manipulate the window object and add stuff to the window object that's different from the other one so each window each web page has its own window object then also what we have is the api or application programming interface a lot like when i'm interfacing with other people you can think of the people as the programs and we're interfacing back and forth and these programs encapsulate meaning put together their own apis such as their own properties and methods that you can invoke like for example with jquery you can actually start to set up a new jquery object and then start to modify it and so forth so jquery has got its own api it's all encapsulated together and of course you can have apis embedded inside of other apis we have the native javascript api and then we have the embedded jquery api then finally what you've discovered is about programming language execution programming languages can either be executed by an interpreter compiler jit compiler or aot compiler in the case of javascript it's a jit compiler and the jit compiler will take your instructions just in time when you need those instructions and it will take them off and it will convert them into machine code or gobbledygook ones and zeros that your computer's hardware can actually understand and it also does some other optimization processes as well so that is essentially how javascript and its syntax is used in the browser [Music] primitive just means basic you can think of like a primitive human being like a caveman it just means basic basic data and you will not be able to create an application without basic primitive data so let's take a look at this primitive data well first of all you have a string and you can define a string by the double quotes or you can also define a string by the single quotes as well now also with strings you may need to escape certain characters what do i mean by escape it means nullify certain characters so for example if i had the double quotes and i said he said and then what we typically have is the double quotes to define what somebody is saying so he said hello now you'll notice here we can see that this part is in red and this part is in red but this part is black and what that means is this is actually going to run in javascript and it's actually going to go out there and try to find a variable called hello and we'll talk more about variables later but what you have here is you have two strings one there and one there and this bit is javascript when you run this you'll get a syntax error i'm very sorry we can't find hello and also this is incorrect anyway you're not concatenating which means joining together so this is incorrect completely it's invalid so what we need to do is we need to say right i don't want to end the string there so i want to nullify this character and you do that by placing in a backslash you need to place that backslash right next to the character you want to escape so we're escaping this quotation mark character you also want to do the same here for this quotation mark and that's it and there you go so we have hello and there it is we have the hello right there in the string so you nullify the characters also what you could do is mix and match the quotation marks as i said you can define a string by single quotes so you could say hello world and then you could use the double quotes yup like that and you'll notice that if we start with a single quotation mark only an ending single quotation mark can actually end the string so the double quotation marks here don't affect the single quotation mark so this is actually good to mix and match the quotation marks that's why we can define a string with both single and double quotation marks it just makes it easier for us as programmers and likewise it's the same thing and the other way around hello world and then you can have single quotation marks and single quotation marks cannot escape or break out of the string of a double quotation mark nice and easy the other type of primitive is a number type now please do note with javascript the number type is the number type however there are two types of numbers you have whole integers such as 100 or 200 or 1. so these are whole integers they're whole numbers they're not fractional nor are they divided into a smaller section you so also what you can have here is floating point numbers so these are integers and then you have floating point numbers which is fractional numbers like 1.1 it has the decimal place in there or 100.256 this is again floating point numbers again these are all clusters the number type in javascript but you do have the two different types whole integers and floats now let's go ahead and take a look at boolean what does boolean mean well when you think about boolean think of a poor think of an ocean when something is boolean it floats and if something is not boolean it sinks and you only have one of the two it's either going to float or it's going to sink it's either negative or positive it's either true or false so when you define true you're not defining a string here because you've not got the quotation marks and if you put the quotation marks in you've now defined a string because it's highlighted red but when you actually have just the word true without the quotation marks you are defining a boolean and false which is also a boolean is it gonna float true or is it not false and that's the only state it's a light switch it's either on or off yes or no zero 1 true false and that's it it's either on or off and that's all the boolean means now you also have other primitive types as well you have null and undefined again these are not strings because there's no quotation marks there now what do these mean and these have caused a little bit of confusion well null actually could mean that there is no value assigned it means that it's empty it's void it doesn't have anything now why would you actually want to do that when we create variables it will make more sense but please do note these are primitive types null and undefined mean the same thing it's undefined or it doesn't have anything assigned it's completely empty it's void of anything of any value totally so again we'll come back to this later on of why you would want to do this but you may want to know if let's say you have a variable and we'll get into this later and if it's void if it actually contains anything if it doesn't contain anything it will be null it's still a value but it's a value that lets you know there's nothing in there it's completely empty finally you have the primitive type which is nan and you must spell it exactly like this capital n lowercase a capital n and what this actually means is not a number so if you wanted to check to see if let's say a variable or a part of your program has a number stored within it and let's say if it's not a number then you will get this primitive type returned it will tell you sorry it's nan it's not a number so you know not to use this variable or this value in your mathematical expression for example so nan just means not a number so there are your primitive types what you have first of all is a string either by single or double quotes you have integers which are whole numbers and you have floating point numbers which have the decimal place in them their fractional numbers then also you have boolean such as true and false next you have null and undefined and then finally you have nan which means not a number there are your basic primitive types and by using these basic pieces of data you have primitive data our programs need to store values and they need to pull up those values later on in our program just like you have short term memory inside of your mind while your computer also has short-term memory and it needs to be able to store values but we as programmers also need to pull those values out of memory when we need them memory is just storage so let's go ahead and take a look at creating a variable then a constant and then have a look at what this means for us as programmers so what we need to first of all do is to create a variable we use the var keyword now when you do this you're creating a box think of it like you're creating a box and the box needs a name because your program can contain thousands of boxes that contain all different values and you need to be able to identify what is inside of that box so let's go ahead and create a variable called name so this box now has a name now please don't make this a string because this is not actually defined as a string it's actually defined as a symbol it's a memory address think of it like this your house has an address the address isn't the house but it is a way to target your house so the postman can find you and post a letter through well likewise we want to find stuff in memory so this time what we want to do is we want to create a box and we want to give it an alias name so that then we can target this in memory we can find it we can point to it in memory so we're going to create a variable called name and then we're going to use the equal sign now the equal sign is the assignment operator it's a command to the jit compiler and we'll talk more about operators later but this command is going to say take whatever is to the right of this operator and assign it to the box so i'm going to say go ahead and define the string lawrence and then also we end with a semicolon and think of the semicolons as the full stop to your sentences just like in the english language when you write a sentence and you're finished you write a full stop that's what your semicolons are there for to say this statement this command that i'm giving to the jit compiler is finished so that is a command to the jit compiler to create a variable to create a new box label that box so that we can understand what that box contains we have a general idea so it's nice and easy for us to address that box target it and then we want to assign the value to the right of it now this could be a string a number a boolean it could even be null or undefined it could be anything that you would like it to be an object or an array but it needs to be one value that is then going to be assigned to the box it's going to be placed inside of it so we're going to take this string and place it inside of this box and there we go and then when i put in the name you'll see i say name so i've targeted i've focused on this value stored in memory and it's pulled out that value lawrence and that's nice and easy and as i said your program can contain thousands and thousands of boxes so we need to use our names wisely now when naming your variables please don't start with numbers or even a capital letter or you know any sort of special character but what you can do is you know you can have divides in here and so forth but try to keep it as simple as possible when creating your variable names and never put in spaces that's not allowed and never define a name as a string so that is how it works it's simply an addressing system now being a variable well you know what variableness is it means it changes its variable it changes in value so with this box i can actually assign a new value such as curtain and end with a semicolon because i've completed that statement now that command and what it will do is it will delete out the old value that was stored in that box and it will assign a new value turtan and now when i type it in you'll see it gives me turtan until let's say my program later on changes it to something else like so and then i can type in name and it will keep giving me that name until it's changed at a later date that's a variable now with variables you can also create a blank variable as well you don't need to assign a value straight away you can actually create a box waiting for a value to be stored now when i do this you'll notice it returns undefined it may return null don't forget null and undefined are primitive types they are values to say there is no value it's void it's hollow it's waiting for a value to be assigned in other words it's just an empty box it's just a way of telling you there's an empty box so if i now type in blank i'm just going to keep getting undefined until i actually change the value so let's go with blank and then let's say new value and what that will do is it will take out the undefined or null value primitive and it will put in a string for example or an object or an array which we'll talk about later on but basically what you need to understand is variables and constants are just ways of fetching data out of memory so that we don't have to type in really complicated numbers to try and find data in memory we can just type in a nice easy name now also javascript is a loosely typed language and what do i mean by that well it's loose on its data types so for example you could have a variable again we have the variable blank and blank contains a string data type like so so we can reassign a string however in some programming languages it will only allow you to assign a certain data type once you've created that variable and you've assigned a data type such as string you can only assign a string value to that variable whereas in javascript that doesn't happen it's loosely typed it's loosely typed data so you can change the data type such as instead of being a string it could be a number or instead of a number it could be a boolean and so forth and instead of that you could have an object or instead of that you could have an array and we'll talk more about this later on and so what that allows you to do is si and so what we're doing here is we're assigning different data types from string number boolean object and array to the same variable it's a loosely data typed language now the other type of box is a constant so you've got variables that change in value well you know something is constant it doesn't change it's the same today yesterday and forever so a constant is constant throughout the lifetime of the execution of the program once you've defined a constant and your program is executing the constant always stays the same so it's a constant and then you need to define a symbol name and address name so i'll just say last name and with this last name constant i'm going to say turtan now you cannot under any circumstances create a constant without assigning a value before we created a variable and we didn't assign a value that's because we can add a value later on but with a constant you can't add a value later on so when you create a constant and you create the name of the constant the symbol you can't then later on assign a value so your constant needs to have that value assigned straight away so you know what the value is you're more consistent in your thinking you know it's going to contain that value and that's what the value is and it's never going to change throughout the lifetime of your program and that's good for security reasons so nothing else can change that part of your application that memory address so we have a constant called last name and we're going to assign the value turtan into that box and then you'll see last name and there you go it has the value of turtan and it yeah i can keep typing up but if i try to assign a new value like a variable well don't forget it's look but don't touch it's constant in nature so if i try to assign a new name like lawrence it'll say i'm sorry you what you're trying to do is you are trying to assign a value to a constant and you cannot do that once you have a value stored within it it doesn't change it's still a memory address it's still a box it's still a pointer but this box is sealed it won't let you open it back up again and take out the value and put in a new value if you want to do that you need a variable and if you don't want to do that if you know that you're going to set the value and that's it then you use a constant that will help your application be a bit more robust now what you have to think of is that last name is a symbol and also you have the other one which was name these are symbols and in fact if i take a look at the window object and i expand the window object you have a whole host of names right here these are ways for us to access either a function or a value so we need an ability the programming language needs an ability to store all of this together and what it's actually called is a symbols table a symbols table is like a database and it stores all of these symbols these names that allow us to access values you can also think of a symbols table as a giant warehouse that contains all of these boxes and all of these boxes have got names on them and then we can go into the warehouse and we can find the box with the right name and think of the window object as this giant warehouse this warehouse where we roll up the shutters let's roll up the shutters and let's enter into this giant warehouse with boxes full of different names and you take a look at all these different symbol names that you can see here in purple but then also if you keep scrolling down and you keep scrolling down eventually you will find the symbol that you created name there's my box i can find my box in this gigantic warehouse full of boxes because it has a very specific name it has a unique name right here and there is my value and that's what it's doing is it's looking through this gigantic warehouse it's finding that box pulling that box out opening the box up and giving you the value back and then you can do what you need to do from there so this is actually what is the symbols table it is in fact just a database a warehouse and we have boxes which are variables and constants your variables vary in value your constants stay the same in value once assigned and of course variables can have different data types assigned to them they're loosely typed so you can have a string a number and so forth assigned to a variable assigned to that box it doesn't have to be of the same data type [Music] first of all what are operators well without operators you simply wouldn't have a programming language it wouldn't exist because you need operators and when you start writing programs when you look through your script and all the operators that you're using you'll realize that without operators a programming language becomes useless it's futile so what we're doing here is we are taking our human readable instructions this is an instruction where we create a variable called name and we assign it a value this is an instruction in a human readable format but the computer can't read that and understand it it needs to go through a jit compiler or something of a kind so you have aot compilers interpreters and so forth but that's not the point with javascript you have a jit compiler and that is a program that will read through like you would read a book and it executes your commands it puts your commands together and it executes them and that jit compiler will convert it into machine code or byte code that can be executed in the hardware now we also have something called operators you'll notice i said this is an assignment operator but what is an operator well an operator is a predefined function for the language it's a function defined in the jit compiler it will read through your code and when it reaches an operator it will actually run a function now what is a function well you can call a function a subroutine or a subroutine a function and we'll cover functions in detail later but what in essence are they well if a function is a subroutine just think of it like a subroutine for you making coffee in the morning when you go downstairs and you want to make a coffee you have a sub routine you put the water in the kettle you boil the kettle you pour the hot water watering and so forth and you go through all these things subliminally inside of your mind well these things are pre-programmed inside of your mind you can just do it naturally without thinking about it well with the jit compiler it's actually got these operators pre-defined ready to be executed in memory and it can be run right in memory so it's predefined functionality it's a pre-defined subroutine just like you going downstairs performing an action like making a cup of coffee functions are verbs their actions they're tasks that you can perform well of course an operator is a task something you're asking the compiler to do you're asking it to run a particular set of tasks to let's say create a box give it a name make sure that that box can have its value changed and then also what i want to do is open that box up and we want to assign a new value so this is what it is this is actually a function operators are functions and this is just one operator we've just got the assignment operator here but there are many other operators and you can have many operators in one statement so what we need to do is understand there is an order of precedence to which your operators are executed to which these functions are executed which are the more important operators so there's one type of operator but if you actually search in google mdn javascript operator precedence this page will be the first link and you can scroll down and you can see a table of all of the operators that you can use inside of javascript you also have the number which gives you the precedence if it's a higher number it means that that operator is going to be executed first before the other ones and it has a lower number it carries a lesser precedence so for example you've got at the highest order the parentheses or what's called the grouping operator and then you can keep scrolling down and you'll notice that we have our assignment operator which actually is very low right here and you can see what it does is it's right to left meaning it takes the value on the right and it assigns it to the value on the left so that is actually what is happening right here and by this table we can identify what is going to run before others and this is very important because you need to understand the order in which these operators will be executed so if you go ahead and take a look at this you have a mathematical expression for example so we have 5 plus two times three now if you just read it like a book from left to right you would get the wrong answer so let's take a look at this if i was to just read it like this five plus two is going to be seven and then times 3 is 21. let's go ahead and do this and you'll notice we actually get the answer 11. and that's because you don't read it left to right you understand that there is a precedence with these operators we have two operators here we have the multiplication and we also have the addition operators and it's not just in the way that this is written it's what operators take higher precedence get executed first just like a calculator and if you type this into a calculator you'll still get 11. and so mathematicians know about this there are a few different sayings for this but we go with bod mass and so this is how i remember the operators in a mathematical statement and the order in which they are executed so first of all you have brackets so brackets could be the round brackets known as parentheses they take the highest precedence and if you take a look at the mozilla developer network look at it look at this the grouping the parentheses right here have the highest precedence then you have what are known as powers now powers are actually a function call in javascript if you want to power a number times itself by itself so many times so we'll look at this one powers is a function call and if you take a look at the developer centers table right here you can see that 18 there's the next one a function call there's the name of the function then you have the parentheses and then you pass in values now we'll talk more about functions later on but that is the next order of precedence then after you have the powers you also have division and multiplication division and multiplication share the same precedence right here so if we scroll down there it is 14 multiplication and division whichever one comes first at that point they both hold the same precedence and then finally you have a and s for bond mass a and s is addition and subtraction and there it is addition and subtraction carry the same precedence as one another so it doesn't prefer executing one over the other so let's go ahead and look at this bond mass so we don't have any brackets we don't have any powers in this expression we don't have any division but we do have multiplication well we know that multiplication has a higher precedence than addition which is right here so multiplication gets executed first so 2 times 3 is 6 and then you say plus 5 which gives you 11 because the addition comes afterwards because it doesn't have a higher precedence so that's why you get the answer 11 instead of reading it left to right there is a precedence right here and so that is understanding that these functions in one statement you can have multiple operators and these functions or these operators are executed based on their precedence so let's try a bit more of a complex expression and return that and that expression returns the number 28 and i want to write out bod mass again in that order so i can see the order of the precedence so what you have here is first of all you have the power now you can't actually write an exponent which is a base number and then you have the exponent in the javascript syntax directly you have to invoke a function so this is actually the powers right here and i don't want you to get too hung up on function calls at the moment we will talk about functions later but all we're doing is we're passing in the base number and then we're passing in the exponent so the base number is two and then we tell the computer how many times we want to times the number by itself so it's two times two times two times two so it's two times itself four times so two to the power of four we have the division we have multiplication we have subtraction we also have the grouping operator and then also we have the multiplication operator as well so there is body mass now we need to go through it so first of all are there any brackets well yes there are there are these round brackets or parentheses and you can see there's only one operator inside of them which is the multiplication so this gets done 2 times 12 is 24. then we need to go to the next stage well we've got powers so with powers you've got math.power right here 2 to the power of 4 2 times itself 4 times is 16 then we need to go and look at any divisions well the next one is division so 16 divided by 2 is 8 then we have multiplication well there's no more multiplication left so there's only these operators left so what we need to do now is we have the addition and subtraction now addition and subtraction are on the same level there's no precedence over the other so we just read this left to right so we have eight plus one is nine minus 5 is 4 and then finally we say plus 24 so 4 plus 24 is 28. so when you follow this order this bod mass precedence if you will and understanding how these operators are triggered you understand how they work so what you have is again brackets so they're parentheses then you also have powers division and multiplication again division and multiplication are both on the same level it doesn't prefer one over the other it's just which one comes first and then addition and subtraction are on the same level so in this case we just carried on from there left to right there was no precedence over the other so that is actually what bodmas is and there are the mathematical operators and it fits in with bodmas and i believe there's also others as well called ped mass in america as well they also have their own names but it's the same type of thing parentheses exponents division multiplication and then addition and subtraction now very quickly i just want to talk about divide because you have two types of division they both carry the same precedence but what you have here is a regular division which is just the forward slash but you also have another type of division which is actually a remainder divide or the remainder operator it's also called modulus division as well and this will actually just give you the remainder of the division so for example we have nine and we want to divide it by five well we know that five can't divide into nine so we're left with a remainder of four it just provides us the remainder so it just leaves us what's left over and this is actually quite good for finding out odd and even numbers for example if it's an odd number and we try to modulus divide by two well we know that if any number can be divided by 2 that it is an even number 2 is an even number and it goes into all the even numbers so if we go ahead and return we know we get a remainder of 1. so this is an odd number but if i was to say 10 modulus divide 2 i know that 10 is an even number because 2 was able to divide that number up and there was nothing left over there was nothing and so that's it so it's actually quite good for finding odd and even numbers so we have the standard type of division which will tell you how many times a number will fit into another number and then also you have the modulus divide which will just give you the remainder it will tell you i've tried to divide this number into this one and if i couldn't fit or and if i couldn't and if i couldn't fully divide that number then it will just give you whatever is left so that is how it works now you know about operators are predefined functions in the jit compiler you know that operators have a certain precedence when they are executed and that's it so there are many assignment operators that we can use if we take a look at the mozilla developer network you can see that we have the assignment operators and they're all on the same precedence now i've already taken a look at the standard assignment operator that takes the value on the right and assigns it to the variable or whatever is to the left but you also have all of these other assignment operators as well now we're going to leave these assignment operators because these are bytewise operators and they're a little bit more complicated but you already know about let's say addition subtraction powers multiplication divide and the modulus divide as well so let's take a look at some of these first of all i can create a variable called number and i'm going to set that number equal to 20. so now we have a symbol name called number which is a memory address and it points to a certain address in memory a certain value in memory which is currently an integer 20. now we can take a look at the different assignment operators so again you just have the standard assignment operator that would just delete out the old value and assign the new value that's dead easy but what happens when we use let's say plus equals well what you're actually doing here is you are adding to the existing value so the existing value is 20 and we are adding this new value 30. so we're combining the values together and that's going to equal 50. so once it's done that it will then assign that value back to our variable so now number won't be equal to 30 it will be equal to 50. and likewise you can also have the subtraction so what we want to do is subtract 30 from 50 and assign it back which will leave 20. and then also you can have multiplication as well so we can say 20 times 2 which will equal 40. then also we can have divide as well so number divide by four so we're going to divide 40 by four and that's going to be 10. you can also have the modulus divide as well or the remainder so this will leave a remainder so if we try to let's say divide by four well how many fours can we fit into ten well you can only fit two fours into ten leaving eight and two remainder so there we go we now have two and you also have to the power of so we have the double asterisk for that so two to the power of four so that's two times itself four times so 2 times 2 times 2 times 2 is 16. so there you go there's the different assignment operators you've got the standard assignment operator that will take the value out and assign a new value and then you have all of these other assignment operators that will actually take the existing value on each one and it will either do addition subtraction multiplication divide modulus divide and you also have to the power of as well and you can go ahead and modify those values now you'll notice that most of these are arithmetic type operators these operators could be used for mathematical expressions and so forth but what i want you to understand is that even though we have the plus equals the plus operator doesn't just deal with numbers it actually deals with strings and let me demonstrate this to you if i have the string lawrence and then i would like to concatenate meaning join strings together i use the plus symbol in javascript so i can say now turten and end with a semicolon so i've got two separate strings as you can see defined by two separate quotation marks and i have the plus operator in between them and what that will do is it will join the strings together so that's quite interesting now what happens when you try to let's say concatenate a number you may be thinking well this should surely error because you've got a string on one side and you've got a number on the other side well let's hit return and you'll notice what it did was polymorphism now that is a big word what does polymorphism mean well you know that this operator is a function it's a function defined in the jit compiler now when you go downstairs and make a cup of tea or cup of coffee you can polymorph your sub routine your routine for making a coffee or a tea can change it can adapt its process can be different if you will for example you can make a tea and you can add more sugar to it or more milk if you're making tea for different people your sub routine is still make a cup of tea or make some coffee but it adapts it changes so you can add more sugar for somebody or change the amount of milk it's the same subroutine but it changes it polymorphs it adapts well likewise we have polymorphism here which means it can do and adapt to different situations it's ready to change and mutate so instead of being an addition operator that adds two numbers together this polymorphs and it can actually concatenate two strings together or if you have a string anywhere either to the left of it or to the right of it so if i had let's say a number to the right of it and a string to the left of it you will notice that what it does is it polymorphs it takes the number the integer and it actually converts it into the string data type it adapts think of polymorphism as a blob that morphs around it changes and adapts you think of it like play-doh it changes and adapts itself into different shapes that you push it into and that's exactly what i would describe as polymorphism it just changes and adapts to the environment that you throw at it so strings always take precedent once you have a string there on either side of the plus operator it will automatically change whatever is there whether that be a float it could be a boolean for example as well such as true again it will convert the boolean type into a string data type and combine them both together so that's what we call polymorphism now coming back to the assignment operator what you have here is i could have var name equals lawrence for example and now name is equal to lawrence and then i can say name plus equals and then we're going to say turton so what it's going to do now is it's going to look at the existing string and it's going to say right i need to concatenate meaning add on to join this string right here and assign it back to the variable and there you go it says lawrence turton so that is the plus equals assignment operator and the plus operator adapts itself it changes once it finds a string either to the left of it or to the right of it whatever other type there is whether it be a boolean whether it be an integer whether it be a float or whatever else it may be it will actually convert it into a string you'll even find that if you were to say null plus and then lawrence let's take a look at this it will actually convert the null data type into the string no it always converts it into a string so that is the plus operator and you now know about the assignment operators and you also know about polymorphism just think of it like play-doh you push the play-doh into different modes it fits it adapts it changes to suit its environment so far we've been working with the console window in the browser and when we work with this console window in the browser we can run very simple statements and commands but the thing is when we refresh the page we unfortunately lose all that data and even in the next lecture what i'm going to be doing is actually i'm going to be writing out functions and so forth so there's going to be lots of code here that we need to write out and i'd also like to keep this code so even if the page refreshed i have my code stored in a more persistent meaning a more dedicated space such as a javascript file or a dot js file this way my code can be stored and then it can be loaded in to different web pages and it will stay in the web page even if i refresh the browser now what we have here is called a code editor or ide which stands for integrated development environment it's simply a code editor that allows us and facilitates us in creating our scripts there are many code editors that are completely free this one that i'm currently using is called brackets and if you go to brackets dot io you can download this ide for free also please note this lecture does come with the source files so you can go ahead and download the source files for the current project which is the index.html file this is the html file that is displayed inside of the browser that you're currently viewing and then you also have the myapp.js file now the dot js symbolizes a javascript file this is where all of our javascript code will go and html is for our html markup and so currently this is what myapp.js file looks like now ignore all of this code because we're going to get back to it later but let's take a look at the index file you have the basic markup that you need to create a simple html page and what we have right here is the script tags now when you use the script tags what you're doing is you are linking to the javascript so we are linking to the my app dot js file so we're targeting this file and we're saying include all of the code and we want to execute the code that's in this file within our index.html page we're just creating a nice link there between the files now please do note you can write javascript in line so for example i can write script and you can write javascript directly in html so anything in between these script tags will be classed as javascript now let's say that when i load my page i want to display the string hello world in the console and i want to do that via this script here how do i do it well first of all we need to target the console window so you say console and then what you need to do is tell it to log something out so we do console.log and this is great for debugging if you ever want to check a variable or you want to check something in your scripts it's always recommended to log something out to the console when you log something it's like a ledger for example you have maybe a book with all of your accounts in it a legend you log each transaction out so that's exactly what we're doing we're logging some information some data out to our console window now don't forget the console window is text based only so you can't let's say display an image or something like that in the console but what you can do is display the text and so forth so i can say console.log and then we are invoking this function with the parentheses now i'll talk more about invoking functions later on but we say console.log and then we pass in the data so i'm going to pass in hello world and that's it so we save this now and when i hit refresh you'll notice it says hello world in the console window so we can actually communicate from the javascript to the console window and you can write javascript directly in a html page you don't need to actually have a separate javascript file but the reason why i want a separate javascript file is because i want to keep the logic this side of things all the application logic you know the calculations and the computations away from the markup i just want the markup to be the display and i want my application logic separate so now i can write some really advanced scripts and i can keep it away from my markup code this makes it easier for me to focus on my application logic the computation the mathematics all the rest of it and focus on my markup and this separates the concerns this is always what you want to do in programming you separate the concerns you want to keep things away from something else so if something's for presentation for visuals keep that in one file and if something's for computation and logic you keep it in a separate file and that actually will help you out now also why have i included the script right at the bottom of the body and why do i recommend it because let's say my javascript file here is let's say two or three hundred kilobytes which is fairly large and so that's quite a large javascript file and your javascript files can get very large so the reason why we don't include it in the top is because html is block loading so in other words it starts loading line upon line preset upon preset so it goes to the head then it goes to meta title script and what it will have to do is if your script is really large it's going to actually hold up the rendering because the body the body of the page is the bit that you can see in the browser now let's say my file is two or three hundred kilobytes well it's block loading so it's waiting there it's sitting there and it's trying to download all of the javascript and then it carries on when it's finished and then we get onto the bit this rendering whereas if i had my large javascript file at the bottom we start block loading line upon line precept upon preset and of course when we start rendering things out for example our header elements and all of our styling and all of our page all of the rendering all the visuals come through first which makes our page look a lot faster and then we load in our large javascript file or files into our html page it just actually makes it better for rendering as well so that's a quick tip and so i'm going to go ahead and save these out so now i've moved my console.log into the myapp.js file this file is now being linked inside of the index.html file and then finally when i hit refresh we get the exact same result so let's take a quick look at the console.log and see what we can log out where you can log out a string you could log out a number you could also log out true and false which is a boolean you can even log out primitive types like null and undefined like so so i can go ahead and save that and hit refresh and what's really nice about this is the fact that i can get the output and it can tell me what's going off inside of my script sometimes when you're writing your scripts don't forget it's not executing so you're only looking at what you've written and it makes sense to you but when you run it in the browser bad things can happen things that you weren't expecting and so what's really nice is to log the data out as you go along to figure out what's happening to the data is this function returning the right data is this variable containing the right information you can log out variable data as well so var num equals 10 and then i can log this out to the console so i can say console.log and then i can log out the num variable and we can go and save that and hit refresh and there is the num variable so it looked at that symbol that reference in memory and it pulled out the value then on top of that with the console.log you can do all of these things in one go so you can log out a string you can also have a standard integer or a floating point number you can also have a boolean such as true or false and then also you can have null and undefined and also i can log out let's say variables and outputs from functions as well which we'll talk about later on so there we go you just separate each value out with a comma and then go ahead and save it and hit refresh and you'll notice that one line is logged out all of those different values so you can log out multiple values you can log out multiple variable values and so forth so go ahead and have an experiment with console.log and that will help you later on in understanding the output that is provided [Music] functions or subroutines are tasks that our program can complete so you can call a function a subroutine or a subroutine a function but what i like to do is use the word routine or sub routine and the reason why i like using that is because we have routines in our daily lives for example when you want to make a cup of coffee or make breakfast you have routines for these things or when you want to leave your house you have a routine for locking all the windows and doors making sure everything is secure you have all sorts of subroutines that use in your daily lives and you have these subroutines waiting in your mind in memory when you need them and you just don't need to think about things but with programming we need to teach the computer we need to show the computer how to perform these actions we need to break down this subroutine whatever it may be into a set of instructions so that is where functions or subroutines come into play for example if i want to make a cup of coffee i have a sub routine for making coffee and when i think about that i think about this subroutine that i have where i pour the water into the kettle i boil the kettle i tip the water into the mug then i add my milk and my sugar and so forth now also when i think about this subroutine of coffee i think of it as adaptable changeable so please do understand that even though i have the abstract making coffee well yes that's on the abstract layer meaning it's basic it's very basic way of looking at something but the instructions need to adapt so for example i have a friend that comes over and says can you make me some coffee and i say absolutely now making coffee is the same when i'm running that set of instructions when i want a cup of coffee but my friend also wants a cup of coffee but it needs to be adaptable those instructions need to change he may have more milk he may have more sugar he may have a different combination and you may have many different friends that all want a coffee but they want it slightly different from one another so what you have in programming is the keyword function this tells the compiler that you want to define a subroutine you want to create that routine like a routines inside of your mind then you need a symbol name now don't forget if we have something that symbolizes something it means it's referencing something it's pointing to something and we know that symbols are just memory pointers they're addresses they're addressing something in memory so we need to actually give our set of instructions our list of instructions and name so we can find it in memory so once we've done that then you have the parentheses and the parentheses define parameters now parameters are just variables they're variables that can have values assigned to them when we execute our instructions and i'll come back to this in just a second but you can have as many parameters as you like then you have your curly brackets or braces and in between those braces you have your set of instructions these instructions are going to complete that routine so what i'm going to do is i'm going to have a set of instructions and then you can return something so when my subroutine is finished i can return the coffee just like when my friend says could you make me a cup of coffee i go off in the kitchen i do the subroutine i complete it and then i give something back i return with the cup of coffee now finally our programs need to be able to invoke these instructions now don't forget just like in your memory when we've defined this subroutine it's just in memory we haven't actually executed or performed the task yet all we're doing here is we're defining the execution context we're defining the instructions to run however we are not invoking these instructions until we want to make a cup of coffee just like this routine is inside of your mind to make coffee but it's not actually being executed until you want to make a cup of coffee so for example we call up the symbol name now you know when something symbolizes something like an address symbolizes the location to your house well likewise we have these symbol names and they allow us to address point to in memory our instructions that we have defined so we can call these instructions up and we can invoke them and we use the parentheses to do this also you need to pass in the values so how much sugar how much milk and so forth these are called arguments arguments are values and parameters are the empty boxes or variables waiting to store the data and then we can use this data in the execution of our instructions it makes it adaptable so that i don't have to write every subroutine out there for different combinations for example you've got maybe different amounts of sugar and maybe no milk or maybe milk and sugar what happens then do i have to write a subroutine for everyone no because i can pass in arguments values for each instruction that i want to run for each cup of coffee i want to make therefore my instructions are adaptable and that means that i can just write one subroutine that adapts depending on the coffee that i am making so that's what we have here we have a subroutine and we have it adaptable by the parameters and the arguments that are placed inside of the parameters they're just variables and then once we have finished executing our instructions we can return you can if you want to you don't have to return and output after all the computation is finished and also what happens to the parameters is those empty boxes are deleted out of memory think of it like we're putting it in the warehouse but the warehouse needs to be cleaned every now and again and what we want to do is we want to take these parameters these variables and we just want to throw them away we want to get rid of them in memory we want to clean the warehouse because we don't want these anymore we only want the parameters when we're executing the context otherwise what happens is we will fill up memory and we'll be wasting memory because we need to run this subroutine over and over and over again for each friend but we don't need to keep on storing these values once i've made the coffee it's done i don't need to say right i remember how much sugar is in there now that i give it no i don't need it anymore i can get rid of that data we always want to make sure that our applications are using as little data as possible or cleaning up ourselves as much as possible so what happens is once it's finished these parameters these variables get deleted out of memory now we know that parameters are variables they're empty boxes waiting for values and of course those values can vary when we execute so we know parameters are variables we also know that arguments are values bought why do i say arguments instead of values and why do i say parameters instead of variables well first of all you've got parameters if i say please add this parameter i didn't need to say to you in that sentence function you automatically knew because i said parameter that is a variable defined for an execution context you know i'm talking in context of a function you know i'm talking about a function and also i can say please pass in this argument you know i'm talking about a value that needs to be passed in when we're invoking a function i didn't need to say in that sentence invoke a function but you knew immediately because i said argument instead of value and parameter instead of variable that i am talking in context of a function i'm referring to pointing to a function and that is why we don't say variables and values we say parameters and arguments so here i have my existing application which i have the index and then i have the myapp.js file and the myapp.js file contains our make coffee function and in here you can see we have our parameters which are just variables that store values and then we also create a variable inside of the execution context inside of these curly braces now it's important to note that if you create variables or constants and so forth inside of these curly braces they are also temporary as well once we finish once we've got down to here we've executed all these instructions we delete all of the variables this variable right here these parameters all of this gets deleted out of memory and that's it we just keep the instruction set that's it so once we have created this we create a variable it just contains a simple string boil water that's the very first thing we do and then we're using the plus equals assignment operator that will concatenate our strings together so the next string we put together is pour into a cup then we add coffee granules and then i'm doing something interesting here we say plus equals and then we say add and then you'll notice i'm using the plus operator again this is concatenation but this time i'm not concatenating a string i'm actually adding in the value so let's say sugar contains the value of zero well actually what this is going to do is it's going to concatenate in the value of zero so it will convert this into a string and it will turn into one large string so no spoonfuls of sugar for example and there you go that's all it's doing so we just need the concatenation you'll notice the plus is on both sides as well so that's what we're doing in we're concatenating in the value the argument that's stored within our sugar parameter into the string and that's all it's doing right there so add x amount of spoons of sugar you can see now it's adaptable and then also we're going to do the same thing for the milk and i want a percentage sign so i'm going to put a percentage sign in there because milk is just going to contain an integer again so it will say something like add 20 milk and that's it that's all it's going to do so once we've done this we return the entire string all of these little pieces that make up our string our instruction set will return this entire string by returning this variable the instructions variable now don't forget this variable will be deleted after we have finished executing but the output the actual string will be returned and we can do whatever we want with this string once we have returned it so that's what we ultimately want back from our make coffee function or sub routine now if i go ahead and open up the index page into the browser and then i also take a look at inspecting it and going to the console i want to take a look at first of all the window object the window object again think of it like the giant warehouse full of all of the little memory pointers that we have and you'll actually notice that if i was to scroll right down and we keep going we do have a memory pointer in here for make coffee there it is make coffee is a symbol it's symbolizing meaning it's like an address it's pointing to our instructions in memory and it is in fact a function so we've got make coffee there is our instruction set and now we can invoke this now if i was to just invoke it within my script so if i was to say make coffee and then ask to say right pass in two sugars and we want 20 milk for my good friend here and i have to go ahead and save this what i would do now is try to take a look at this in the browser so let's hit refresh and if i open up the browser nothing happens so what we need to do is again export this out to the console so we're targeting this console interface this text interface and then we're logging out you want to log something you put it in a ledger and so forth we want to log out the output the return from this function which is the string so if i go ahead and now hit refresh and then when i look at this there you go it gives me the return boil water pour into cup add coffee granules add two spoons of sugar and 20 milk it just returns the string and it logs it out to the console window and likewise we can actually call it from the console interface because don't forget it's in memory it's in that window object we've got a symbol called make coffee that points to those instructions and then i can go ahead and say five and maybe i want fifty percent milk this time and you can go ahead and keep changing the values so that this is adaptable and that is what we're talking about with subroutines we define that routine it's in our minds and our minds can adapt this routine depending on what we're doing and then you can invoke that routine you can actually perform that subroutine that action and then you can keep changing it as you go along so that is subroutines [Music] objects and arrays are used throughout our entire lives and they'll also be used in our programs our programs typically represent objects in the real world so we need to make sure we understand objects and arrays you can see your television car and all of the other objects that you use throughout your daily life and they are obvious for what they are objects are obvious but you also use arrays and this may not have been so obvious in your daily lives but what do you use in your daily lives that are arrays well you could have for example a list of to-do's a shopping list a teacher that has a register full of names for the registered students in that class and all sorts of registers registers for your cars for your number plates and all the rest of it these are arrays to understand programming we need to understand when do we use the standard object and when do we use a special type of object called an array an array is an object but it's a type of object so first of all let's take a look at objects and couple it with obvious objects are obvious when you look at your computer your smartphone your television your car your house you can identify what it is it's obvious as an object and objects in programming what we first of all do is we put in the curly brackets or braces and within those braces everything is grouped together for example if you have a car you need the nouns and objectives to describe the car so the nouns will be the key name such as color and the adjective will be the value such as red so it describes the noun and by these nouns and objectives we can describe the look of this object and you can do that for all objects and these are called properties properties have a symbol name which point to a value in memory and we call these key names whenever those names are in an object and the values are the values stored in memory and that together the key in value pair is called a property but what happens when you need to perform an action on on the object you know that staring at your computer will do nothing you need to type and you need to click and likewise with a car you need to get in it drive it lock it unlock it open the sunroof turn on the radio do whatever it is that you want to do inside of that car so what you have is the subroutines or the functions that you can perform those actions that you can perform on the actual object itself now when you take a subroutine or a function and you place it inside of an object it's called a method and the reason why we do this is because uh if i say to you add this method you know immediately i am talking about a function or a subroutine that is within an object it's for an object so that is why we have these precise terminologies this is called a method where you have a key name don't forget it's a symbol it's pointing to something in memory and it's pointing to an instruction set a set of instructions you can perform on that object and so that's what we have that subroutine or that function and the reason why we're grouping these together by the braces is because if these values just floated randomly around our program and they were not grouped together by these braces then it will be pretty useless now also you have arrays now arrays are objects but they're just a special type of object just like a shopping list in your hand well the shopping list is an object but it's a list so whenever you think about a list a list of car names a list of products in the warehouse a list of names registered for a classroom a list of registration plates for the driving authorities it's a list it's iterable in other words it has elements that make up the complete object so for example a shopping list has lots of elements inside of it and these elements have numbers assigned to them now we define an array with the square brackets and we group our tasks our list together in the brackets and each element is assigned a number because we know typically what a shopping list will have a shopping list array will contain items found in store and also a to-do list would typically contain tasks each element will now be a task in our to-do list we understand the type of thing we're pointing to but you'll notice that each thing in the shopping list is unique it's identifiable and each is on their own an apple is not an orange and an orange is not an apple but yet we're grouping it in this shopping list this list that's pointing to different objects around the store that each element is assigned a number we need to be able to pick out and identify our elements in the array we need to iterate over so go one by one by one and it's zero indexed meaning the first element in the array has the value of zero and then we go up from there zero one two three now it's important to note that in javascript whenever you modify an array the key names are automatically updated these numbers are reassigned potentially if they have changed so the program actually organizes your elements for you and that's the beautiful thing about an array it will keep your list together it will keep those key names and the elements inside of the array will be your elements and you can take elements out and you can add new elements in and everything will be managed by the programming language recap objects are obvious we have objects defined by the braces or curly brackets and we have the nouns and adjectives that describe the object the nouns being the key names and the adjectives being the values and these are called properties properties describe the object then also you have the subroutines or the actions you can perform on that object and when you place a subroutine inside of an object it is in fact a method and again it has a key name a symbol name to point to this action this list of instructions to complete the action then we also have arrays arrays or lists they contain similar types of things such as names or car registration plates or items in a shop they contain similar types of things and they list out these similar types of things and each one of them is called an element so let's start programming this out and we are going to start with the my app dot js file now we can create an object in the console window but again to create an object we just open and close the braces this is called an object literal it literally means we're creating an object and there you go we've just made an object but there's no way to reference this later on in our program so it would have created this object and then it would have destroyed it out of memory because there's no way my program can later on point to it so if my program can't refer to this object later on it's a waste of time get rid of it get it out of memory again it's all about speed and decreasing the amount of memory your program needs to execute its tasks so i'm not going to create the object in the console window it's a bit too limited so let's go back over here and let's create a variable and a variable allows us to define a symbol name such as car and i can use this symbol name to target this object in memory and then i can end with a semicolon now i have an object right here and i can save it hit refresh and i can type in car and there it is there is my object but it's empty it doesn't have any properties i can't see it and know what it is i can tell that it's referring to a car type of object but we've got no properties to describe the object so let's go ahead and add those now the first thing we'll have is the key name color and then we have the value which is going to be red there is the noun and there is the objective that describes the noun and the key and the value pair is called a property it describes the object and also we assign values this time to key names via the colon and we can keep adding in more and more key names and if you want to add in another key name and value or another property then you need to put in a comma and then you can have another property such as speed for example is going to be 200. now i want another key and value pair but this time i don't want the value to be a primitive value or an object or an array i actually want it to refer to a subroutine or function so i have drive for example and drive is going to have a subroutine in it that will return drive and there we go we now have two properties and we have one method this key and value pair the value being a subroutine or function if that's the case that is a method so we've got properties and then we've got methods and so what we have now is the ability to save this refresh the browser and type in car and when we do this you'll notice we have the properties color and speed and we also have drive which is a function and this function is contained within this object called car so that is how you create objects then very quickly let's create a shopping list so i'm going to create another object called an array again we need to refer to this object later on in our program so we need to give it a symbol name so we can reference it in memory and then we can define an array by literally this is called an array literal by opening and closing the brackets that's called an array literal we're literally creating an array and this time you don't define the key names like this 0 and then you say lawrence for example the key names are already assigned for you they're automatically done you just want the values so right here this would be apple and then we have another item in our shopping list so we want to add in the comma again apple orange and so forth and let's have pair as well so you have all of these different items or elements within the array and then let's go ahead and save this and preview in the browser and we'll say shopping list and there it is shopping list apple orange and pair there is our list and you'll notice that when i open this up it is an object you can see the similar type of syntax with the colons and so forth with a regular object but this time it's actually assigned the numbers for us and the program will manage these elements if i was to delete orange out there for example pair would become one and so forth and it will manage those key names so it's easily iterable so that is how you define an object and that is how you define an array [Music] hi guys i hope you are finding this content really useful and adding value into your life and i'm serving you the way that i should be with that great service of knowledge and information and hopefully getting you excited about your career and i hope you can get the value that you need out of this and if you are and you'd like to contribute something maybe buying me a cup of coffee hit that kofu link in the description down below and you can donate like three dollars that will be enough to get me a nice cup of coffee and i can still keep making great content for you guys [Music] objects can contain other objects also arrays are objects you can think of it like a car engine or pretty much any object even your computer is made up of many many objects when we look at these objects we see one entire object we see the overall hierarchy but you can dig down deeper and deeper just like a mechanic takes a car engine to pieces you have the car object you have the engine and the engine has many objects inside of it including the head gasket pistons and all the rest of the rods nooks and crannies that go in there and then the steering wheel the interior the seats the headrests all the rest of it is all based on objects and when we group these objects together in a giant hierarchy we have one object but we understand that objects contain objects and that's how it works in programming as well so here we're going to start out with the myapp.js file and i'm first of all going to create a symbol a memory pointer and we're going to create a car memory pointer and we're going to assign the object whenever we reference car this will pull up this object in memory and then we want the make of the car for example we'll say volvo and then we have the speed 160 miles an hour so that's very quick but then also what i'd like to do is i'd like to put an engine into my car so let's go ahead and create an engine object now again i'm using the colon for assignment and then all i do is i put in another object and this object is still going to help describe this object if i know an object contains an engine for example i know that it's going to drive the car it's going to have some kind of movement so this is actually still called a property this key and value pair as we have key and value pairs right here this is still called a property so even if you have an object which is a standard object or an array object it doesn't matter it is still classed as a property so we are creating a property here the engine property and inside of here we can have let's say the size of the engine which is going to be a 2 liter there's a floating point number for you and then also we can say make and the mate can actually be from another manufacturer such as bmw and so forth and also we can have the fuel type as well the fuel type could let's say be petrol so there we go and we can keep going with this for example i could have pistons as well and again they can be an array for example and we can have an array of piston one like so and piston two now don't forget arrays are objects we must remember this so i could make this another standard object or i am instead making this an array because we have an array of pistons we have many pistons and typically every piston is the same so what i could do is as an array is a type of object don't forget it is an object type i can actually embed objects into the array so for example we can have an object for each piston now a car doesn't typically come with two pistons but this one does so we have the pistons we have an array of pistons and each piston is an object like so so objects can contain objects arrays contain objects and objects can contain arrays they're just classed as objects really to the programming language so now we have a list of all the pistons because they all carry the same similar type of thing and so each piston can let's say just have the maker we can have the maker and we can set that to bmw and you can go into even more detail by embedding more objects into this object and arrays and so forth you can just keep on going embedding objects inside of objects and you can see there is a hierarchy a hierarchy means a structure just like the food chain is a hierarchy or your place of work has a hierarchy with the boss sitting at the top and then it goes down to directors and other things like that so that is a hierarchy we have a structure in which our object is created so we have the main car object with these properties then we have the engine that's embedded inside of it this is another property but it's an object embedded inside of this so there we go we've embedded that then we have the size of the engine the make the fuel and so forth and then finally we have another object which is the array and the array has multiple piston objects inside of it so that really is the whole hierarchy for our car object now if i go ahead and save this and i open it up inside of the browser let's go ahead and type in car there is my car object so we referenced it in memory and you can see in the making the speed but then you can also see engine is an object and i can expand that and you'll be able to see we have the fuel and make and then also we have pistons now pistons is an array and it tells us how many elements are contained within the array this is really nice you can see here we have two elements two objects there's the first and then there's the second and don't forget to separate out each value with the comma and there it is i have an array and i have two objects so we have the first object with the index of zero don't forget it's zero index so this is the zero indexed object and again this could be a string or it could be a number it could be anything you really wanted it to be and there we go so we have an object maker bmw and then we also have the second piston object which is exactly the same let's change that to bmw 2 in fact so we can see a bit of a difference here so car open this up go to the engine go to the pistons and the second object with the index of one is maker bmw 2 and now the first one is make a bmw so now we have an entire hierarchy a structure and a stack and also i can create an array and again i'm going to create a memory pointer to my array and an array can contain a variety of things such as a string or a number or in fact it could contain another array so i can have another array and i can say embed and i can say 200. i can also come out of that so there's the string there's the number there is the embedded array an array inside of an array we have embed 200 and if i stack this down a little bit like so you'll be able to see each value on a new line and i can also embed an object inside of here as well so i can say car is going to be ford there is an object and again i can embed objects inside of objects arrays can embed objects and objects can embed arrays these are all properties by the way if it's not a function as the value it's classed as a property and here's something really cool is the fact that we have methods in objects so i can create a function or a method called drive and it returns the string drive so that is a method within our car object directly you could put this inside of the engine object and even what you could do is take this function right here and you can place it inside of an array so you can place functions inside of an array now what's important to note here is you don't have a name these are called methods because methods have a key name that we can define in a standard object and then we have the subroutine that will perform that particular action in an array we don't have that anymore we cannot define a name for our function in the same way it's given a number so let's take a look at this now let's take a look at the array so if i go ahead and refresh in car you can now see that we have drive and by the parentheses we can see that it is in fact a method a subroutine waiting to be executed and then also you have array now with array we have zero the first element is the string 100 is the second element with the index of one two is an array with two elements which is embed and 200 and you can see that there it has two elements zero embed one 1 200. then also you have the object as well the object that i've embedded has one property called car and the value ford and there it is then finally we also have the fourth element now you'll notice the fourth one is in fact a function and there is my function this is the drive function but i can't give it a distinct name the memory pointer is actually the number four this time not as in the standard object which the memory pointer was drive so that's it we've established that objects can contain other objects objects can contain the array type object and the array type object can contain objects and other array objects as well you can just keep embedding objects and arrays inside one another vice versa doesn't matter what order you do it in you can keep on embedding and embedding so go ahead and take a look at playing and experimenting and try to do this yourself try to make this hierarchy yourself write it from scratch and really learn how the syntax flows and how things can be embedded inside of other things try to do it for your computer or for let's say other components or other objects that you work with in your house try to make an object hierarchy whether it be a cabinet with drawers and so forth let's try to really learn this hierarchy and the syntax that goes behind it [Music] so we have a variable called car now let's say we're the mechanic and the program would like to actually pull out specifics about the car sometimes he wants to go to the bookshelf and pick a book out for that car so he can understand the mechanics of the car and he's got details so all he'd like to grab out is let's say the maker of the car such as volvo or he may want to know the speed so he understands what piston heads he needs or what type of engine he's working with so by this our programs need to be able to access members inside of an object now whether you have an array or whether you have a standard object they're made up of members now standard objects are made up of let's say properties or methods these are all members of this object you can look at this like a community a community of properties and methods and these are all classed as members of this entire object and also with the array for example you have these elements each element is in fact a member of the array that's the terminology we can use and if we take a look at what we have here in javascript we have an operator called member access and it's the dot symbol so this could be the object itself such as car and then we can access one of its members member access so we can access one of the members such as make or speed or even engine so let's go ahead and take a look at this what i can do is i can either write this out in the script which i can do or i can directly type it out in the console so let's target the console first of all so we're creating a reference in memory called car we made it here and now we're targeting it and we know that it finds it in memory but now let's go ahead and pull out make well this is a member make is a member so i'm going to say car.make and what it will do is it will look at this symbol first car and then it will access this symbol's value which this symbol points to a string in memory and again you can end it with a semicolon if you really wanted to and there it is it pulls out the string volvo now likewise you can log this out to the console so i can say console.log and again we have a memory pointer car dot and then make and end with the semicolon and that's it and if i hit refresh now you'll automatically see the string volvo appears and it came from myapp.js far right here on line 24 there it is line 24 and it shows me the actual string so we've just accessed first of all this symbol by typing in card then we've accessed one of its members with the dot syntax and then we type in the symbol name and so forth so we can also have car dot speed for example and you can even access let's say car.engine an engine is an object and in this object you have fuel and you have make and you have pistons and you have the size of the engine as well so here is our object now how do we access one of these members well you do the same again so car.engine refers to this object and then you use the dot syntax again and then after that you can type in one of the members you want to access inside of this object such as the size or the make which is bmw or the fuel right here which should be petrol so what we're doing is we are targeting the main hierarchy the very top of the tree the entire car object and then we're going inside of it we're always going inside of it with the member access and we're accessing each member and each level that we go into so each object we're using the dot syntax to access each level's member and you can keep going with this now also what about methods so for example i want to run or invoke the drive method how do i do this well if we say car dot and then drive they needed a name so we can target that subroutine and then with the parentheses we can actually invoke meaning run this function this subroutine and if i end with a semicolon car.drive and all it will do is return the string drive after all the computation after this execution context this list of instructions it only has one instruction and that's just simply to return the string drive so let's see what we get returned there we go and i've written dive instead of drive just notice that one right there so anyway we are returning the string drive now if you just say car dot drive without the parentheses notice what it does it actually prints out the function or the method that is contained within this object the same goes for regular functions as well it will just print out the actual syntax that's all it does so if you want to run it you need to make sure you put in the parentheses or round brackets then it will invoke this execution context it will run it and then it will deliver whatever is finally output from the computational function and you might have noticed this syntax may look a little bit familiar we've got car.drive but we've also got console.log and so what is this well we're looking at a symbol name called console and it's referencing an object because we have the dot syntax it has members if it has members it's going to be an object and then we have the member log which is a method it is a function that is being invoked by these parentheses and we're passing in arguments or values into this method let's take a look at this you go to the window object we open up the warehouse full of boxes and these boxes have memory pointers so that we can find these boxes and if i go ahead and scroll right down you'll be able to see there is a memory pointer called console that contains an object and in there you have all of these different things that you can use to look at memory and you can log information out and you can get info of certain information so this is the method that we're running there's lots of other methods that you can actually do to log out certain pieces of information like the time stamp and so forth if you want to check how fast your script is running and so forth so we're running this log method found in the console object and that's what we're doing right there in our script which will produce the string volvo because we're targeting this property in our car object and we're logging that value out to the console now let's get back to accessing multiple levels so you've got car then you've got the engine so we're expanding this object now we're in this object what we can do is we can target one of these properties and you'll notice one of these properties contains another object called array called pistons so i can say dot pistons like so and then with a semicolon and this will give me the array found here with two objects as you can see two objects one two this one has the index of zero and this one has the index of one which is bmw two so here we have an array now how do we actually access members of an array well if we take a look at car.engine.pistons and then say dot zero now zero is the key name you'll see there that is the key name for the first object let's see what happens we get an error that said unexpected number so what it's doing is it's treating this member access as though it were a number instead of a memory pointer i want it to treat zero as a memory pointer as a sim link or symbol link if something symbolizes something else which is the name of the box symbolizes that box a memory pointer well this in this case is actually being treated as a number not as a symbolic link as a reference in memory and or treated as a key name will so we actually have a huge problem here where we need to be able to access objects or elements inside of our array what about this array how do we pull out each individual value well this is where we have the computed member access the computed member access calculates and works out whatever is in between the brackets and whatever is returned is treated as a memory pointer whether that be a number it could be a mathematical expression it could be a statement in javascript so this is what we're going to look at in the next lecture in the previous lecture we tried to access one of the members inside of the pistons array we tried to grab one of these objects unfortunately it didn't work it treated it as a number instead of a symbol link or memory pointer now you have two choices you can try to access a member by the dot syntax or you could do it with the computed member access now this operator uses the brackets and inside of the brackets it computes and then it delivers the results so instead of using the dot syntax this time i want to now change it to the brackets so you either use the dot or you use the brackets but you cannot use both don't forget you use either this operator to access a symbol or a member or you use the brackets to access a member but you don't use both so you don't say dot brackets that's not allowed you use one operator or the other operator to access a member so now we're looking inside of the pistons array and we're grabbing the element with the id of zero which is this particular object so i can go ahead and take a look at this now and you'll notice it returns that object make a bmw now what happens when i want to actually target this property specifically and just return the string bmw which operator should we use now don't forget this is a standard symbol link or memory pointer with the word maker and what have we been doing prior we'll be we've been using the dot syntax to actually gain access to these members with a simple name it's only when it turns into a number this number is computed inside of the brackets and what's returned is a symbol link instead of a number type so what i can do now is use the dot syntax again so we're inside of this object then we're saying right i want to access a member inside of this object so we're going to the next member and that is going to be maker so now we're going to pull out the string bmw so you can mix and match you can either go with the dot syntax or if you come to let's say a key name that is a number such as an array then in fact what you want to do is use the brackets and likewise we can do the same for the array now the array is an array and each one of these members in our array has a number so for example you could pull out the string this has the index of 0 so i can say array and in the brackets 0 this will return not a number zero but a memory point is zero and so then we have string you can even pull out a function for example how do we invoke this function right here with this spelling mistake is we access it by its number by its id so we've got zero one two three and four so this is actually the key name 4 and then what happens then well if you just run it like so it just prints out the function how do we get it to run this execution context well how we get it to run this execution context is you target it and then you put in the parentheses and when you put in these parentheses it tells it to run this execution context notice what happens it runs and then of course it returns the wrong thing let's do that again drive and there we go it returns the string drive so this is quite nice now you know about mathematical expressions and statements when we write something out such as var a equals and then you put in a value for example you can in fact create a statement that is a statement it's a command it's a sentence you're giving to the jit compiler and it's executing and then also you can have mathematical equations such as one plus one minus one and what is that going to equal that is going to equal one or let's say minus two so we have all these operators here the plus and the minus operations you're going well i know that but this is a statement and this is also a statement now when you have the computed member access whatever is inside of the brackets is treated as a javascript statement so for example what i can do now is i can clear this out let's say that i target the array this time and i'm going to do something a little bit different inside of my brackets i'm actually going to write out a statement 1 plus 1 minus two so whatever is in between these brackets will be executed will be invoked and it will return the value zero so if i go ahead and hit return you'll notice that it returned zero this is like saying array returning zero the number zero and that will be used as the symbol link and there it is string so you can see that we can write mathematical expressions inside of here and also regular statements as well because don't forget you can actually use variables in your mathematical expressions so you can create a variable called a and it's equal to 10. we've created this symbol link in memory and it references the number 10. and then you can say a plus 1 minus 5 which will leave us 6. so we add 1 that's 11 take away 5 is six hit return and there you go you can use variables in your mathematical expressions just like you use variables algebra in maths so that we can change this and move things around so now let's take a and let's use it again so i'm going to say array and then we're going to say a so now we are pointing to this variable that i've created on the window object and then i can say take away five and then take away two so if i take away five that leaves five left and then we take away two that will leave three and what is the third member 0 1 2 and 3 is in fact our car object so let's go ahead and hit return and that's exactly what we get it's the same as typing array it computes what's inside of the bracket so a minus five minus two is equal to three and then it returns that as a symbolic link it executes that statement it's computing the statement whatever is inside of those brackets and there we go it's returning this so if we want to dynamically fetch something out of an object like writing an expression we can do this now what about let's say i want to access car and then i want to access the make symbol but this time i don't want to do it the traditional way so car dot make instead i want to use the brackets now here's the problem it's actually going to look for the variable called make which we haven't made this variable just like we called the a variable in our mathematical expression don't forget this is treated like javascript in between these brackets it's a statement so if i was to change this to let's say make you'll get an error because it's looking through the window object it's looking through the warehouse the window and it cannot find a variable called make but we do have this property here called make so if i was to say car and then i was to turn it into a string now what it will do is it will return this primitive value it will do the computation and there's only a string here and it will turn this string in to a memory pointer called make so you have car make and then you can see it pulls out volvo so please be very careful when you want to access certain properties with the computed property treat it like you writing a statement out like that saying make right here and you can see sorry it's not been defined just like we got right here it's like writing it outside of the brackets so it's computing what's in between there it's looking for variables and so forth and you can keep going with this so you have car and then you can access the engine object this object here and there we go we have that object and then you can go ahead and access the pistons as well so we can say pistons which is the array and we have an array of two objects the first one has the index of zero the other one has the index of one so let's go ahead and grab this out so i'm going to say pistons and then one and it will grab this element right here and then i can even use brackets again and say go grab the maker as well which stores the string bmw 2. so we go to car then we go to engine then we go to pistons then we access the second object in the array with the index of one then finally we go inside of the object and we grab out the maker property there which stores the value bmw to and you can do lots and lots of powerful things when you use the brackets and you can still invoke let's say subroutines as well so again i could say car and then i can access drive for example so now i'm accessing this method and then what i can do is i can invoke this with the parentheses after it and there it is it returns the string drive or if i don't put in the parentheses i can actually see the function syntax itself so that is the brackets you use brackets for let's say writing statements out this could be a mathematical expression you could also target a variable so i can say var pointer and pointer could be let's say make for example and then i can end with a semicolon and then i can say right target car and then i want you to go grab the variable called pointer and grab its value which has the string make so this will return the string make and that will return volvo it's the same as writing car it executes whatever is inside of the brackets so the bracket says right ah there's a variable called pointer and we return that value which is make so it's the same as writing make and then we return it so there is the value volvo again and if i was to change pointer now pointer is a variable so i can change its value to let's say speed so pointer is now equal to the string speed let's go ahead and say car brackets pointer and hit return and there we go now pointer is returning the string speed it's returning that in those brackets that computation it takes that string and it turns it into a memory pointer and there it is 160. so that is why we have the computational brackets you can also do all kinds of things like concatenation inside of here so for example let's say i have car and then we have en plus gin like so what will this do well it will concatenate the plus operator concatenates meaning joins together these strings so it will join together these strings which will be engine and it will return that and turn it into a memory pointer so i can say like so so this will be computed whatever is inside of the brackets and it will return the string engine which should return this object it's the same as writing car and then engine in the brackets and also what you can have is car dot engine so you have this ability to mix and match between the dot syntax and if you need a bit of computation in there such as the elements in an array that is a number or if you'd like to fetch a key via let's say a another memory pointer like a variable then you can do that with these brackets [Music] so now that we've created our hierarchy and we're able to access this hierarchy and pull data out of it what i'd also like to do is be able to create new symbols dynamically within my objects and i would also like to assign new values so again we're going to be using the console and you can run along with me and so what you have is the car and you can target the car and you know that this is a variable so car itself is an object but you could actually assign a whole new empty object or you could assign a string or anything else so it would actually delete out this object and it will assign a string to the car variable now when i call up car you'll notice it's a string it deleted this object for a string so that's entirely possible now on top of that what if i just wanted to change one of the values such as the string volvo that's being logged out to the console how can i actually change this well what you need to do is you need to again target what you want to assign so last time we targeted the entire car hierarchy object and we deleted that and we replaced it with a string but now what i'd like to do is i'd like to target a member called make and now we're targeting this member we can assign a new string such as forward and with the semicolon so it's going to target this symbol in memory and it's going to look at this value and it's going to change this value for the string forward and there we go so we have car dot make equals forward and now if you take a look at car we still have the object here but the make has now been changed to ford now also don't forget there are other assignment operators that we can use so for example we know that car.make contains a string and we know that we can use the plus equals operator so we're going to concatenate because we already have a string here and whether there's a string on the left side or the right side over here it will convert it into a string i could even put in a number right here such as 200. and when i do that you'll notice it converts the number into a string and there it is ford 200 and you take a look at the car object there it is make forward 200. so that is also the assignment operators don't forget about the other assignment operators for mathematics and so forth so for example you have car dot speed and again you can access it this way or you could access it with the brackets like so and we can say for example times equals two so two times 160 and that's going to leave us 320 take a look at car there's car the speed is now 320 miles an hour fastest car on the planet 4 200 there you go and you can also reassign let's say objects as well so we've got this engine object let's just very quickly say we're going to take the engine out so i'm going to say engine equals and then you can assign a new engine we can set that to new and when we do this take a look at car you'll now notice that we have engine and it's replaced this object with this significantly less complicated object that just has a property new engine so that is pretty cool and you can even reassign let's say the methods don't forget this is just a symbol name pointing to a method or subroutine or function so for example you could say car.drive equals and then i could just say drive since this subroutine doesn't really do much it just has the string drive so now when i look at car it is no longer a function it's just a standard string that's nice and easy but how do you create let's say a new key well how do i do that well we're starting out with car again fresh and we've got drive as a method you've got the engine object making speed but let's say that i would like the model so how do i put the model in here so i'm going to say car dot and then model you can think of this like saying var model you're creating a new symbol name because this symbol name currently does not exist within this object and then what we can do is we can assign a new model such as v60 for example so car dot model equals v60 let's go ahead and do this and now when i take a look at car you'll notice that it actually created the model symbol and it has the value of v60 so that is how you create just like you would create a new variable that's how you create a new key name a new symbol or memory pointer within this object very nice now also what you could do is say car dot color for example and let's say that i don't even put anything in here i don't assign anything car dot color well you'll notice it just says undefined sorry i didn't find that property and if we take a look at car you'll notice it didn't actually create that property so you need to make sure that if you want to create it you can't just create it like var color for example that will create a variable called color and that variable that symbol will exist but it will be undefined if however you want to create a symbol name a key name inside of an object then you need to assign it right then and there so i can say car dot color is equal to red and only at that point when you assign a value will it actually create that symbol inside of the object color red that's how you create a new property or member but we can also create new methods as well if you would like just treat it the same way so car dot stop this doesn't currently have a symbol link inside of our object and then we set it equal to so we want to create it and then we want to create a function for example that will return the string stop and when i do this i can hit return and then if i type in car you will notice that inside of car we now have the stop method also you can add and change things inside of the engine object so for example we can say car dot engine dot stop equals pretty much the same function again and we could say stop engine this time and then when we take a look at car open up car open up engine we targeted the engine then we actually created a symbol called stop that didn't exist and we set it equal to this subroutine and this is now a method in our engine right here this stop so that is actually very easy to do and you can change values in the engine and so forth so i can clear that out so that's how you create methods now finally how do you delete certain members so when i take a look at car let's say i no longer want color how do i get rid of this property well if i set car.color equal to null well that won't get rid of it it will nullify it in a way that it won't have a value it'll say there is no value but null is still a value and this symbol link is still here and it's a waste of time being here so how do we completely remove it well what you do is you use the delete operator and then you define the symbol link that you want to delete such as car dot color it will find that symbol link right there and it will just simply delete it out now this operator delete is a function don't forget in the jit compiler and if it manages to successfully run its operations then it will return true if it couldn't delete the particular property or method it would say false sorry i can't delete it so it did manage to delete it now i can say car again and now you'll notice there is no color property it's been completely removed this symbol link has been completely wiped out of the memory map now finally what we can do is you can also delete methods as well so you could say car dot stop so we can delete that method that we created hit return and then you can say car again and you'll notice that method has been removed we only have the drive method from now on so it's pretty much a death trap for a car so that is how you assign create and delete members within a standard object arrays however are a little bit different and we are going to take a look at modifying our array in the next lecture now let's take a look at modifying members of an array so the first thing i'd like to do is i'd like to change this string here so what i could do is we can type in array and then we have the brackets and the number that's returned is a now going to be a memory pointer and if i hit return it returns the string if i'd like to assign a new string i can use the assignment operator and say new string and you'll notice now when i open up my array it says new string and also don't forget you have your other assignment operators as well so now i've refreshed the page so array 0 is going to be the string and then i can say plus equals and then you have concat and you have all of these other assignment operators that you can use for strings and integers and if i take a look at array you'll notice it concatenated string and concat together and it gave us string and cat so that is assignment in arrays now also what we'd like to do is be very very careful when using the bracket syntax because an array is treated as an object so what you could do is say array and then you could say right i want to create a new element well that's fine if we know how many elements there are this is 0 1 2 3 and this is the one with the 4 as the memory pointer this function however if i want to create a new one then you could say five and then you could assign a new string value if i hit return i can now type in array and now you'll notice that i do have five and it does say new string but you need to be very very careful when using the brackets so if i was to say array and let's say i didn't know how many there were so i guessed and i said 20. well don't forget there is now five elements because i created a new one saying new string so now i'm saying array 20. so here it is i hit return now let's take a look at my array you'll notice right here it says after new string what we did was we created 14 undefined or null elements they're just nullified elements meaning they're empty they're pretty void and useless for example what we did was we created null 14 times like this and then after the 14 we actually have the value 2020 and even though when i open this up you'll see a zero all the way to five and then 20 it's just because these guys are null or undefined they're still there like i wrote it out like this they are still there in memory these values but it just shows us 20 because it's not null or undefined so we have 14 undefined or null elements in our rate and then we've got 20 20. so you can see how using the bracket syntax is not very good for arrays also you have to be very very careful again with the bracket syntax because what you could also do is not even use a number you could actually assign a string like this test and that can be equal to test like so you're probably going well that's not going to be very good because it's no longer a list type object where we've got numbers for each one of our elements and also you could do the same thing with the dot syntax because again arrays are objects so you need to be very careful how you modify them so let's do test two and test two so you can either use the dot syntax now we're using this regular symbol name or you could do it with the brackets with a string be very very careful what you do because now when i take a look at array you'll notice that this object now has test and test two now why is this really bad for arrays well arrays are supposed to be innumerable innumerable means countable so if i had let's say five five pound coins in front of me i can count one pound two pound three pound four pound and so forth i know what the next number is going to be countable but you can't count test and test two it's not obvious what they will be so this array object as a list is supposed to be innumerable that we can iterate over meaning go one by one by one and count over them but now we've ruined it because we have test and test two so be very careful how you modify your arrays now also there's something very interesting to note and i'm just going to refresh and get rid of this you will notice that when i create an array and i assign these elements we also have this property here now this property is a computed property in other words this value is dynamically assigned whenever we modify this array it will change the length property the length property tells us how many elements are in the array so we can see we've got one two three four and five elements in the array now the first element has the index of zero but it's still classed as an element we've got five elements in this array so it lets us know how many values are stored within and if i was to modify it so array five equals and then we can say new value now let's take a look at array again we now have five and you'll see the length is six because now we have the index of five but don't forget it started at zero if you wanna know the length it's actually six because this now starts at one then two then three four five and six so there are six elements in this array now and the way you actually pull out this property is you say array dot length and when you say array.length it returns the length of the array how many elements are stored within this object so how are we actually supposed to modify an array well if i pull up the array and then i also see a underscore underscore proto and this is the prototype object and i will talk more about prototype later but the actual javascript language created this for us automatically when we create an array it attaches another object onto it and it's called a prototype object which we'll talk about later but it comes with all of these different methods and these methods allow us to iterate over values it allows us to filter data inside of it it allows us to change and modify data in our array so this is all defined by javascript the language itself so what i'm going to do now is i'm actually going to start using some of these pre-built methods that i can run on this array object to modify it and change it so let's go ahead and just get rid of that let's say i want to get rid of the first element in the array that's that easy just type in array dot shift and what this will do is it will shift everything up one so let's go ahead and hit return and what this method does it doesn't take any values you just run it with the parentheses and it just returns what it deleted it deleted this element out of the array and now when we take a look at array you'll notice it says 100 so it starts with 100 right here now also what we can do is pop things off the end of the array so this is the last value now let's sync this up so we have new value and what we want to do is we want to pop that off the end of the array so i'm going to say array dot pop again it doesn't take any arguments which is values you just run the pop method and it tells you what element what member it deleted well it deleted this member and it just told us what it deleted by returning it and then i can say array and there we go we start with 100 and we end with the subroutine with the function just like we have here so that is how you take off the first element with shift and take off the last element with pop now also we can add new elements to the beginning of the array using the unshift method so we say array unshift and unshift actually takes the values these arguments that we're passing in will be elements inserted into the array so we could have a string you can actually pass in as many as you would like you can just keep going with this as many as you would like but you can have numbers you can have floating point numbers you can even have let's say functions don't forget and you could also have an object and you can even have an array so we're putting in all these different types we have one two three four five and six elements that we are inserting into our array so now you'll notice it returns the length of the array if i take a look at my array now my array is considerably longer and you'll see that the length is now 10 and what it did was it started here at the zero position and then it inserted all of those values right at the beginning and you'll notice that it kept everything in sync so if i go ahead and return this now you'll see that all of these numbers are correct they're all in sync and they all work and there is our first value set that we have here we put in an array we put in an object we have a subroutine that we defined then we have the floating point number and the integer as well and also the string so that is actually how you do it and again you don't have to have that many things you could just say unshift just have one if you really wanted to it depends on how many things you want to insert into the array so if i say insert now it's 11 take a look at array now we have insert right at the beginning and everything stays in sync so unshift is to add elements at the beginning of the array to add things to the end of the array we use push we can now say array.push and we can start pushing in values and again you can have as many values as you like separate each argument each value out with a comma don't forget because we're running a function so i could say 200 300 and again you could have an array could have strings you could have objects you could have subroutines and so forth so say array.push and what it will do is it will return the length and now we have 14 elements in our array what it did was it went right to the end here and then it pasted this in so now we have these elements as well in our array and if i take a look at this you'll be able to see that is exactly what it did 200 300 and string at the end so that's what push is therefore you can just add in one value or you could just keep going with as many values as you'd like to push in now also this may not be enough because let's say if i wanted to let's say add in values in between instead of going right to the start or right to the end i might want to go in the middle somewhere how do i now do this in javascript well you use the splice method and with the splice method you can do anything within the array so first of all i'm going to target my array and then i'm going to call the splice method and invoke it and the first thing we need to do is say what position do we want to start with well i want to start right here and delete out this array and also delete out this object so we start here so we go 0 1 2. this is where i want to begin and don't forget it's zero indexed so i'm going to say 2 and then you define how many elements you want to delete if i didn't want to delete any elements you can leave it at 0 but i want to delete this element one and this element two so i want to delete two elements from my array and that will do it so hit return and it tells you what you deleted it returns an array of what was deleted it deleted the array with two elements embedded in 200 so it deleted that one and then also it deleted the object as well this one and now if i take a look at array you'll see it has string 100 and the function just like we have here now let's say that i wanted to add in elements in the array let's say i want to start here this time and i want to add in elements how do i do that well you use the splice method again and again it's point and delete but this time i don't want to delete anything so i want to first of all take a look at my memory point to go 0 1 i want to start here so that's where i want to start then do i want to delete any elements no so i say zero then you can add in as many values as you'd like just like unshift or push you can add in as many values so it's point delete and then values so i can necessarily say hello and then i can say world and then i can add in a number an object an array a function whatever you want it to be and there we go and i can just keep going in this fashion but i'll leave it with these three and i'll copy that out and now you'll notice it returned an empty array that's because we didn't delete any elements from our array so it's just telling us sorry we didn't delete anything and now when i take a look at my array you'll notice it added it in it went here it started here and we didn't delete it we moved it down and we added in these three values then you have 100 and then you have function and that's exactly what it did you point then you say you want to delete and then you can also add in new values and you can also replace as well with the same technique so for example let's say i want to replace string and hello or even world and 200 let's make it a bit more complicated so again what we do with array.splice the first thing we do is where do we need to go well we need to go here this is where i need to start so 0 1 and 2. i need to start at position 2 i want to delete because i want to replace these two so i want to delete world and 200 and i can say delete those two elements and then i can replace them with either one element so i could say world 200 or i could keep adding in as many values as i'd like so let's just replace these two with just this string so let's go ahead and hit return it told us what it deleted it deleted world and 200 and then what it did was it placed in this value into our array so now it says world 200 and if we take a look at array there it is world 200 so the splice method is very powerful and it lets you modify the array in such a way that you can delete any particular amount of elements it allows you to place in new elements as well at any point or position [Music] functions are first-class citizens or callable objects in javascript you can think of these braces as containing a list of instructions and don't forget we define the objects via these braces called an object literal well you can think of this as defining an object but this object is a callable object it's invocable like if i called you by your name you're invokable i can catch your attention and i can run some instructions and that's exactly what we're doing here if i was to now save this and refresh the browser i can print out this callable object by typing its symbol name its memory pointer that i've given it here or i could invoke it by saying name with the parentheses and end with a semicolon this will invoke the callable object it will tell it to run those instructions between the braces the executable context or the callable object now also what can you do with objects for example you can embed objects inside of other objects so for example let's create a variable called obj and we're going to make an object again with the object literal the braces we're literally creating an object and it can contain object so i'm going to create the symbol name embedded and you can embed objects inside of objects well you can actually do this with functions or subroutines or callable objects so let's go ahead and create a function and then let's type in con cat and then what i'd like to do is i'd like to receive this particular string here now i don't actually have to do this but i'm going to come back to why i'm doing it like this later on so we have concat and then it's going to be name and then inside of here we can simply return a string with let's say mr and then i'm going to concat in name now at the moment all we've done is we've defined a subroutine inside of a subroutine or callable object inside of a callable object just like we have here and don't forget arrays are objects as well so you can embed arrays inside of arrays and objects inside of arrays doesn't matter you're just embedding you have this hierarchy of effectively objects and that's exactly what we have here we have callable objects nested inside of one another and if i was to save this all it would do is it would just run the name subroutine and it would only return lawrence turton the reason being is because i just defined this callable object i didn't actually invoke it yet this is still just defined i've not invoked it like concat so i can invoke this and what i'd like to do is invoke it with the full name like so and i and then i'd like to return the output the overall output from this subroutine so what exactly is going off here let's go ahead and hit refresh and then i want to run it to make sure it works and you can see it says mr dot which came from our concat function lawrence turton so what happened well we invoked it we called it first of all and it wants to run this list of instructions this callable object is now executing and it creates a variable called full name and it stores the value in memory lawrence turton which is the string then we create another subroutine an object inside of an object and this is going to be concat so concat is now the symbol name in which i can reference this subroutine and it receives an argument so an argument is a value it's going to receive this value lawrence turton the string and it needs a place to store it so we create in essence a variable a parameter that will store that string whilst we're executing and then it will delete that out of memory so i'm just going to go ahead and say right that name parameter contains that string and then we return from this subroutine when it's invoked the string mr and then we say plus well we've got name right here which we know that name contains the string and then i concatenate it together and then of course when we invoke it that will return the string mr lawrence turn and that's exactly what's happening so when you've invoked it it just returns that string back out again and so there it is that's the entire process that occurs and you can have objects inside of objects arrays are objects or arrays inside of arrays and you can mix and match and you can also have callable objects inside of callable objects and you know that as well speaking of objects inside of objects that you can have a standard object literal right here and methods are in fact subroutines or callable objects nested inside of an object and you have the same thing for arrays as well it's just the arrays don't have a method name they're just an element inside of the array now let's do something a little bit more tricky let's pull this back to its original state like so and let's say the full name here i actually want to turn it into a parameter and this parameter will receive an object like so so what i'm going to do is i'm going to invoke name and then i'm going to pass it an object and it's going to have the first name and then we're going to have last name so there is our object that will then be passed to this parameter this argument and then we can start to use it within our subroutine so now i can say return full name dot first name and then concatenate onto that full name dot last name so there we have it but if i was to refresh the browser it looks like nothing's happened and that's because even though we've invoked it we've not logged out the output to the console so you need to say console.log and then you would need to run and execute this callable object and then after it's run it will return the string lawrence turton because it concatenates those properties together and then it will log it out to the console so now if i hit refresh there it is the outputs logged to the console and so what happened well this object that was invoked and let's just simplify the syntax right here was invoked by the parentheses so we're targeting this callable object via its symbol name and then the argument was passed to the parameter and assigned and then what we're doing here is we're saying right return we're accessing that object and we're pulling out the first name property which produces the string lawrence so that produces a string lawrence we access the same object again and the last name property contains the string turten and then we're concatenating that together and then we're returning that to the console and so that's exactly what has happened here but now let's now pass in a callable object to a parameter just like you could create a variable that can contain an object a standard object you can also create a variable or constant that contains a callable object like so so you don't need to define the symbol name right there because this callable object is defined already by this symbol name so we can call it up via obj so you can actually put functions inside of constants and variables so let's take a look at now passing in a callable object now this callable object again doesn't need the name placing in here because it's going to be given a symbol name when it is assigned to the parameter so a function a callable object that is an argument does not need a name it will be given a name when it's passed in to my function up here and so there we go we now have name function and there is my callable object and let's say it returns the string embed wonderful so this callable object just returns the string embed and now let's go ahead and return whatever is inside of the full name and what we need to do again is say console.log and we need to log the output from this callable object to the console so save it hit refresh and you'll notice what it did was it printed out the function callable object that we defined here as an argument so what happened was we invoke this callable object this callable object received the argument this callable object and assigned it to full name and then what it did is we took full name and we returned it like so so we're literally returning a callable object here this function and so now when this function is finished executing this callable object it just returns this function here that is what's returned and that's what we have here now that's quite interesting it poses a new problem how do we actually execute this well you know that potentially what you could have done is executed it by putting in the parentheses so now we're not just returning the callable object and printing it out here we want to say right execute the execution context we want to run these instructions because we know that this callable object is in this parameter and this parameter can then be used to invoke that particular callable object by the parentheses so let's go ahead and save this now and hit refresh and you'll notice it says embed and that's exactly what it did so to recap functions are callable objects they are objects that contain a list of instructions that are to be executed when they are invoked they're invocable objects callable objects can be contained inside of objects so callable objects can be contained inside of callable objects and you can keep nesting your callable objects inside of one another and wherever you can pass in let's say an object so you can assign an object to a variable or a constant or you could assign a object to a parameter you could in fact change that object for in fact a function so now you can understand the architecture of objects you can also understand the architecture of callable objects memory hoisting is a feature of javascript and i first of all want you to focus on the two words first of all we have memory which we'll get to in a second but then also you have hoisting now hoisting is a feature of javascript and what does hoist mean it means lift up like a crane or if you wanted to change the engine in your car you need a hoist to hoist the engine out of the car so you can put the new one in so hoisting just means to lift up and the second thing we have is memory now what do we think of when we think of memory well we think of potentially symbol names names that refer to values that are stored in memory and these symbol names reference and point to certain values that are in memory and you can think of the jit compiler as a chef now when you think about your scripts don't think that they immediately execute they don't jit compilers are the chefs they need to prepare their ingredients before they can start cooking cooking is executing and preparation is the creation phase whereby it lexically reads through your code what do i mean by lexically well you lexically read through a book you start reading left to right in a lexical manner reading through the code and that's exactly what the javascript parser is doing it is in fact reading each and every character and it's taking a look particularly for syntax errors so it wants to know if when it starts executing there's gonna be errors then it won't bother and also it's not only looking for errors it's looking for symbol names here's a symbol name such as a variable or a constant name and also it's looking for the other type of symbol name that refers to a callable object it's still a symbol name and what happens is it takes these symbol names and it hoists them lifts them up now i do want to stress the fact that what it is not doing is it's not taking code and placing it above it is first of all going through the code line by line and typically you would think that executing straight away would cause an error and it would had there not been the creation phase the preparation by the chef the jit compiler because you can see that even though i'm executing this first in my script where i'm referring to the my name variable that hasn't been created yet as of line one and the print name hasn't been created yet as of line one but yet for some reason when i run it in the browser you'll notice it says undefined and also we get the string returned john doe from our callable object so what happened in the creation phase was that it started to create memory pointers now if it's a variable or a constant and it's just a symbol name it's actually undefined it's just like you saying var my name so that is all it's doing and it returns undefined it's just creating a memory pointer and currently it refers to a block of memory that's undefined or null you may get null or undefined it means the same thing there's no value that's been assigned it's just created the symbol name the pointer that's what it's done there now with functions it's different it did create this memory pointer this print name but as it is a function a callable object this execution context got hoisted so you can think of functions actually getting hoisted above like so they are really getting hoisted the whole body of the function the execution context of the function is lifted up now once it's done this it will actually create that function like so so let's take a look at it from a process where it starts it starts reading through it found that it created that in memory it found that symbol name that's associated with a callable object so it created that function this is the first creation phrase the chef that's preparing all of his ingredients ready to execute ready to cook then it goes through and it goes back up to the top again and it starts executing so then what happens is it starts executing this now my name does exist but it's not actually referencing anything and print name has been created this callable object has been hoisted and therefore i can paste this in now console.log my name and print name and then it executes and then it will produce undefined and john doe because don't forget on the first pass my name is now undefined however when i run it here of course it's going to say lawrence because it has now been created as of executing this line of code but prior to that it would be undefined and that's exactly what you have here when you run it undefined and the function was hoisted so we get john doe and also in every execution context you can think of this script as an execution context we are executing what is in this script this block of code that we've defined via our javascript file this is executing well we also have execution context as well callable objects have their execution context these also have hoisting so for example i can say console.log a and then i can say var a equals 100. now what are you expecting to log out in the console well let's save this and hit refresh you'll notice it logged out undefined on line seven and here is line seven and it's logging out undefined because what it did was it created the variable a and it created that symbol first so it reads through execution context as well and they also have hoisting and it's in effect saying var a up the top here and that is equal to undefined but of course we just say var a so it's creating it and then later on it's referencing that symbol name and assigning it but during that phase a still is undefined so console.log if we try to log it out is going to be undefined and that's what's happening inside of it and how can i tell this how can i tell it's memory hoisting because if you try to call a symbol that doesn't exist you get an error so if we save it there's no error it's just undefined but if i actually cut it out like so just cut it out completely look what happens reference a is not defined because it can't just randomly create it so it is hoisting but it's not executing this the assignment operator is just creating the memory pointer it's hoisting the memory pointer so for variables and constants it hoists only the memory pointer and it's just pointing to a blank piece of memory and also when it comes to functions well if that symbol name points to a callable object it hoists that to the top and don't forget that each execution context has memory hoisting within it when you execute it you can even do the same thing for an embedded function i can say embed and this will return the string hello so now i'm going to invoke it so i'm going to put in a comma and then i'm going to log this out in the console i'm going to say embed and then i'm going to execute it so let's save it and hit refresh and you'll notice that this entire function this symbol name referencing this callable object was hoisted lifted up above and that is memory hoisting now when you think about scope think about access for example you can have a mechanic that's going to repair a car engine and we know that objects contain objects they have scopes you can't just open up a car engine and then pull out a piston for example you need to take the engine to pieces you need to take the engine block head off and you need to dismantle the entire engine block so we understand that there is scope you can't just lift the bonnet up and pull out a piston there is ways in which you can access objects nested inside of other objects and that is exactly what scopes are whether it be a standard object or a callable object these are scopes they have their own access level they have their own defined perimeter if you will and some have greater access and some have more limited access depending on where that callable object is and where that object resides and that's all that scope means and just like objects in our program you know they have scopes you know you can't just type in for example engine and then we want to pull out the very first piston like so you couldn't do that you're just going to get undefined and the reason why you're going to get undefined is because it's not defined the pistons are not defined in this scope you can see this starting and ending braces in there in that scope pistons are not defined and so we don't have that access to that array yet but what we need to do is we need to take off that head gasket or you need to take off the engine block and so forth i'm not a mechanic so do forgive me on this one but what i need to do is i need to say right there's the engine there's the overall engine now we need to take off the head gasket for example and then we need access to the pots and in the pots there is an array right here and then we can access one of the pistons in our engine just like a mechanic knows that he needs to go through multiple objects to get the object that he needs to fix and repair and you as the programmer are that mechanic you're the mechanic that needs to be able to know how to access your objects and how to access them individually one by one and then you can pull the data out that is called scope it has an access level now don't forget that functions are also called callable objects they have their own scope they have their own execution context if you have a look here it is those braces again and you can tell those braces they have scope that's why our ide our editor right here can actually collapse the brackets because that is a scope like so so you go to engine then you go to head gasket then you go to pots and then you can access one of these elements so that is all to do with scope and functions have scope you'll notice we have function run expression and then what we have is we have a variable called a is equal to 10 and you also have an embedded callable object called add and this returns an expression it returns a which is defined outside of this callable object scope a plus 90. so i've created the variable in this function run expression but in this embedded function i'm actually calling up that symbol called a and we're going to say add 90 and we run that add callable object and it will return 100. a is 10 10 plus 90 is 100 that will then be returned when we execute this function so let's go ahead and what i want to do is actually run the function so i'm going to say run expression then we need the parentheses to invoke it and when you do you get the value 100 so this is what we have scopes for now let's say i created variable b so i created var b is equal to 90 and then i say a plus b so that should return the same thing if i save and refresh and we run it that's fine instead of the old equation i'm just storing the number 90 in the b symbol so what actually happens now if you try to do this on a regular object you wouldn't be able to do this for example if you said engine then you went into head gasket then you went into pots and then let's say you wanted to go back out and say right i want to target maker like so if you actually try to run this you would find it would return undefined in other words this memory pointer doesn't actually exist within this scope because that's the scope we're targeting which is this array and then it's trying to find the symbol name maker inside of this array and it can't find it we've only got zero and one so you can't do this with regular objects but callable objects are different callable objects go on to what is called an execution stack and what do we mean by this well if you think about it you have a stack of papers for example and each paper could be a function a list of instructions to run and we stack these papers up ready to be run and what's stacked on here is the execution context so first of all you have the run expression execution context and then also you have another execution context which is called add and this execution context is placed on the stack also now what's happening with these execution contexts well the run expression is first of all being executed and it creates the symbol a in the symbols table after we've finished the run expression execution context we have the add execution context but what it does is it doesn't just automatically delete something out of memory it says can potentially another callable object access the symbol a and the answer is yes it can so it leaves it in memory this is called a closure it encloses and it encapsulates and it keeps together all of the symbols that have a reference to them or could have a potential reference to them and also don't forget the ad execution context is going to create the symbol b as well and then what happens is we say return a plus b which is 100 so after all the execution is finished we have 100 returned now when we're finished there is something called garbage collection in other words can any other part of our application access those symbols after we've finished executing no it can't there is no other part of my application if i try to access for example the symbol a down here or i've already run the function here can i access a no you can't and you can't access b either so what's the point in leaving or wasting memory by storing these values and keeping these memory pointers because no longer can our application access it only these callable objects only what was in the scope of these callable objects could access potentially one of those symbols so now that we're finished with our execution it simply deletes those symbols out of memory that is called garbage collection it gets rid of waste symbols or symbols that we no longer need now also let's say that we run the add function and then we try to access in the outer scope in the run scope the variable b will this work based on what we have just seen the answer is no so let's go ahead and delete that and just hit refresh and then what i'd like to do is say run expression now when i say run expression it'll say sorry b is not defined so what happened well again we have this execution context and it runs this execution context first it does not run the add execution context after so what happens is it created a symbol called a which is equal to 10. there's nothing wrong with that but when it was in vote we invoked the add callable execution context but it just added it to the stack one below so all we have is a symbols table that has the a symbol b has not been created so when you invoke a function it doesn't mean that it's going to invoke right there dead center and that's where it's going to invoke no it's just pushing it onto the stack the stack of papers and each paper is a list of instructions and it's not run those lists of instructions yet it's not run the add list of instructions so that function hasn't been run and the symbol b hasn't been created and therefore we get this error so it runs this execution context then it runs the add execution context that is very important to remember just because you have it invoked here does not mean that it immediately invokes the subroutine right then and there it adds it to the stack and then it goes down the stack and you can have functions inside of functions just like objects inside of objects callable objects inside of callable objects and when you invoke each one you are in fact adding to the stack so for example if i had add and add then that would actually add the callable object twice onto the stack and we can have the parameter now b and then you can set one to 90 and the other one to 20 and you get different results out in the console and we can just log this out in the console so i can say console.log log this out and hit refresh run expression we get 130. so it created the outer execution context and it said right we need to run the system instructions right we want var a equals 10. it created that symbol then it noticed that we invoked the add subroutine twice and as we invoked it twice one with the value of 90 and the other one with the value of 20 it adds those into the stack with the argument values and that's what's happening here it's called the execution stack and yes you can have the same function repeated over and over and over again on that execution stack or what it is known as is the main thread and you can think about a thread of string with beads on it and each bead is your function and we just run each function we throw each bead off the thread and we get what's returned and we also have a temporary symbols table for the temporary execution context and when we encapsulate this main thread with this temporary symbols table this temporary database that stores symbols it is called the outer execution environment that is this environment it's a temporary environment in which our functions and those symbols which those functions have created just for the process of those functions and that is this environment in which we're executing these lists of instructions here and then it's cleared out it's only a temporary space for execution to happen in our javascript program so functions are callable objects callable objects have scope just like regular objects and you can have objects embedded in objects but callable objects are special in the fact that we have this temporary symbols table and the language feature is called a closure where any sort of symbol that's created inside of our execution stack as long as there is another callable object in there still in the execution stack it keeps the symbol it encloses everything together and it keeps those symbols whilst we are executing all those instructions on the execution stack or the main thread then once all of it's been executed it returns the final values and it does all of its operations it then clears out the symbols that we can no longer reference in our program once we've executed these lists of instructions we've done what we need to do with these instructions these instructions get thrown in the bin our instructions are in the bin and now we get garbage collection as well that deletes out these symbols so we're not wasting memory and that is also garbage collection and garbage collection is a big part of memory management so that we don't end up filling up all of the user's ram and crashing the browser and being very very inefficient in storage and javascript manages that automatically for you in javascript we have the global scope and what do we mean by the global scope well for example we have the window object now the window object is a scope you know that objects have scope and the window object is the highest level object and this object and all of its memory pointers so all of these symbols that are directly attached to the window object are globally available meaning they're globally scoped or they can be accessed anywhere in the script for example i can access engine because engine this variable is being created on the global scope it's the same as me going to the console and typing in for example engine equals and that will create a memory pointer on the window object and it will be globally available it will be available to this scope and it will also be available to this scope as well and that is only for symbol names that are directly attached to the window object that is a globally accessible object called engine and now what we can do is we can run this we have the run expression and again i'm just creating a variable and we're also creating an embedded subroutine called add and then we're invoking it and then what we're doing is we're saying console.log and then we say engine now what we have with javascript is something called inferred globals in other words if i infer something to you it means that i can suggest something for example i can deduce or conclude something from evidence reasoning rather than get this from an explicit statement now you know in javascript we write statements so we're kind of working on a conclusion we're trying to conclude something so what javascript is trying to do this jit compiler is it's trying to deduce or conclude where this memory pointer is and what it does is it starts to go up the scopes if it cannot find it so it tries to look inside of this scope for the memory pointer engine if it doesn't find it it goes to the next scope it won't find it we've only created a variable called a and that's it so it won't find it in this scope either so it will go all the way up to the window scope and it will find it there so i can pull out a globally accessible variable or constant or subroutine that's attached to the window object and so what it will do is it will keep going up and it will find it here let's go ahead and hit refresh and then i want to say run expression which will then also pop on the stack the add subroutine and then we console.log and then we are simply trying to find the memory pointer engine and it went all the way up to the global scope so it inferred that we just wanted to go up to the global scope so if it can't find it in its current scope it's automatically inferring suggesting that we want to keep going up the scopes until we find it so what happens when for example i say console.log a again the same type of thing happens it's still inferred global which means we keep going up until we reach the global scope if we cannot find the symbol but in this case we can so what it does is it says right we need to log out the a symbol it's not in this scope r but there is a symbol called a in this scope which is equal to 10 and it returns the value 10. so it stops there on that scope now what happens for example when i am to create a variable called engine and i'll set it to string engine and then what i want to do is log out engine let's go ahead and save this now and hit refresh what do you expect to happen well i say run expression and it says string engine and you'll notice that with our variable it said right let's try and find that symbol name in this scope ah we found it in this scope called engine and it stopped there and it printed that out to the console it didn't need to go anywhere up the chain it was directly defined in that scope but you'll notice that this globally available engine object is still perfectly fine it's still here we didn't change the global variable called engine you can think of it like this if we had a look at the window object we created the engine property and that is in fact an object that we created and then i created the run expression callable object so i've just fashioned it as an object here and then we have a is 10 because don't forget we created a variable inside of our run expression subroutine and then also we had the add subroutine and in there i created the engine property so that is in fact not going to affect this property each one of these braces has its own scope so we don't have naming collisions so that's also something that is very very good but this also means you have to be very careful as well when you've got inferred globals because what you have now is if i say right okay engine that's fine that could log that out to the console for example but what happens when i use the equals operator now you have to be very very careful i'm going to say new string let's go ahead and save this and hit refresh and then we're going to execute the run expression subroutine now we're not logging anything out to the console for now but now when i take a look at engine on the global scope it says new string and what it did was it looked at the memory pointer it looked for it in this scope said nope looked for it in this scope said nope and then it went out to the window object and it did find it but it did the assignment operator as well and it assigned that string and replaced the object that was residing within it this is why you have to be very very careful if you wanted to do that change a global constant or variable then that's perfectly fine or even a subroutine a global subroutine doesn't matter it's just a symbol name however if you need to create something within the scope you need to say var or use the constant keyword because that then means this is explicitly creating this symbol in this scope and none other if you just type in the symbol name without the declaration of the variable or the declaration of the constant prior then you will have an inferred global and in fact let's just say this let's just say test so now i'm going to go to test equals new string let's go ahead and save this now and hit refresh now what you have is an inferred global so i'm gonna run i'm gonna say run expression it didn't error you may be going what how come it did an error well we have the assignment operator here don't forget now what you have is an inferred global where it looks for test in this scope then it looks for it in this scope doesn't find it then it goes to the window object but it didn't find it there either but because we're using the assignment operator and we're assigning the new string guess what's happening let's take a look you go to window you go to the window object and then you type in test and lo and behold it's actually created that memory pointer test on the window object it created a global variable that is what's called clobbering the global scope imagine if i had five or six different variables two or three what you're doing is you're clobbering you're unnecessarily creating a larger window object and it's going to make it harder for the browser to really search through now don't get me wrong the browser is extremely quick and javascript is very fast at finding stuff in stored in memory pointers however what i would like to illustrate to you is we've just clobbered the global scope we've unnecessarily created the test test 2 and the test 3 symbols on the window object we've done that unnecessarily and that's very very bad you can have all sorts of naming collisions you can start overwriting data where it shouldn't so be very very careful if that's what you want to do that's fine and obviously if you just tried to point to the data so let's save it now refresh the browser so now the window object doesn't contain test at all so let's try and point to this let's hit refresh and then let's go ahead and run the expression you're going to get an error that says sorry i cannot find test so the reason why i error this time is because we're just pointing we're trying to find something in memory and basically you've got the librarian that comes back and says sorry i can't find this symbol however if you use the assignment operator you are now going to create a global symbol on the window object and assign whatever value is to the right of it so that is what is called infer globals you have the global scope and you also have callable objects scopes as well now this word is a context-based word in other words it has context it has a reference if i was to say look at this without a context well you simply wouldn't know what i was looking at you need context you need me to point to what i'm looking at like a memory pointer i could be pointing to a car engine or i could be pointing to a piston that i took out of the car engine or a stack of papers on my desk so we need context when we work with this when you open your browser window there is an environment that is established and that is the window object we create the window object that contains all of the default properties and methods that make up the javascript api however we also have the this keyword that is set up in memory and depending on where you use this keyword it will change and it will have a different pointer so first of all this by default points to the window object when you open a new tab it creates a window object for that window and then of course it just says that this memory pointer is just pointing to the window context so by default it's the window object and then it can change but how does it change so i've logged this out in the console let's just comment this out with the double forward slash and that will comment that line out and it will just nullify you can actually write english in this line it's just a nice way to comment your code you can add it in any way you'd like by the way i'm sure you've downloaded some of the lecture files and that's exactly what i've been doing i've just been adding in a few little comments in the code to teach people what i have done so now we have this object here and let's take a look at the property first of all so we say object dot prop now if this keyword is found inside of a property in an object it just points to the window object again it doesn't change its context likewise if i have an array and an array is an object and the first key is zero so we want to target this first element let's go to array and then pull out the zero indexed item which is the this keyword again and when i type that in you'll notice we get the window object again so if you have the this keyword within an object property or within an element in the array it's always pointing to the window object but what happens really with this context if it always points to the window object it's pretty pointless pardon the pun so what actually changes this context well it's actually callable objects callable objects allow us to change the this context so for example we have a method within an object and this method returns whatever this is pointing to so let's take a look at this object dot method and there it is you can see that it's no longer the window object this pointer is now going outside of the scope of the function by one so what it's doing is it's jumping outside of the function and it's going to the object that contains the method which is this object right here it's printing out that object that contains the prop property that don't forget has the this keyword which is targeting the window object and then it also has the method right there there it is so it's actually changing the context and you also have the same for arrays because arrays are a type of object array and then this is on the index of one this function and we want to invoke it so we put in the parentheses you'll notice it returns the array in which this subroutine is located and what about a globally scoped sub routine well if i go ahead and invoke it this subroutine is called global it fetches it out of memory it invokes it and it returns whatever this is pointing to and this is just pointing to the window object it steps out one don't forget just like our method it stepped out one into the outer scope and that was this object well now with our function it's actually stepping out one into the window context because this is a globally scoped function right here so this step out one from this context to this one and we get the window context nice and easy now also there are different ways you can invoke functions now you know about one way in which you can invoke a function for example we have said global so you just type the symbol name and then you invoke it that is how you invoke a standard functional subroutine however here's the really cool part you don't have to invoke a function that way you can see here i'm targeting global as if it was a callable object and notice the dot syntax just like we work with objects and we use the dot syntax to access members properties and methods within the object well we're using that same member access operator on this global or callable object and then we can use the call method so this is proof that functions are treated as objects in javascript and you can call the object invoke it and you can actually assign a value to this think of it like this equals object for example we are assigning the arguments value here so at the moment what i'm saying is i'm calling and invoking this subroutine and i'm telling the this context the context of this execution context will be of object so i'm taking this object right here that i created earlier and i'm passing that into the global function so let's go ahead and do the same thing now this isn't going to print anything out in the console but if i now run this code in the console you'll notice it changed this context actually b of the type object so now we've changed the context of this which you can do with callable objects and there's one more you also have the new keyword so you can say new global now this is interesting the new keyword comes before we invoke the function what does that do it adds a new this context so this by default with the global context is going to be window but it says no i want a new context i literally want a blank object that's what it's doing is putting in it's assigning a new object to the this keyword and that's what we have new and then you invoke the global subroutine let's go ahead and run that new global hit return and there you go and if you have global by default it points to the window object but it's how you invoke the function you can invoke functions in different ways you can use the call method on a callable object and pass in an argument and that argument will be assigned to this context it will define the context of this execution context then also you have the new keyword which is a new context a completely blank and empty object and we'll talk about why this is important later the standard way of invoking a function or subroutine by just calling it by its name and if you do this by default it will be the window object no matter even if it's an embedded subroutine like so if it's an embedded subroutine again the default of this will be equal to window again however if you have a subroutine within an object scope or an array scope it will return the object that invoked it for example you have object dot method and when you run that it the this context is going to be the object that invoked it or you could say array is one and then you can invoke it and again it's the object or array that invoked it that is the this context if you were to let's say embed this in here so let's go ahead and do one further let's say embed let's create an object and let's put this method inside of this object and then when i hit refresh let's say object dot embed dot and then we've got method now what will be the this context well it's the object in which the method was invoked from so we do have the main object but it was not directly invoked by that we also have the embed object this object this scope here and so this is now the context embed if i hit return you'll notice it returns the embed object that contains our method and if i put the embed property in here and set that to true let's say again i can just run that and you'll see it is the embed object that is being returned so if you're calling a method then it is the object that it was invoked from but please do note with methods you can use dot call so i can say dot call and then i can let's say make this context the array so i'm going to say array so now we're targeting our method here we're invoking it but we're invoking it via the call method and we're passing in the array we're telling the this context to equal array this time let's hit return and you'll notice what you have is the array being returned so you can change the this context of methods and also you can type in new and then we can invoke this method again it's just a subroutine that's placed within an object scope but now if i hit return again we change the this context that this context is a new object it is a new object like so and there is a new object that's returned this keyword now refers to a brand new context or contextual object so that's how you invoke it so it's number one where is the function placed if you're invoking it in the standard way like this or like this it is basically where is the function placed if it's placed inside of an object it will be the object that it has been directly invoked from if you invoke it with the call method it will be whatever you have decided you want this keyword to be targeted towards whether it be a method or whether it be just a standard routine or you have the new keyword and if you invoke a method or of course any other subroutine on the global scope it doesn't matter it's going to make the this keyword point to a new context now one final thing you also have let's say embedded subroutines so what i'm going to do is say console.log and i'm going to say right this comes from the global object and i'm going to log out whatever this is pointing to but then also i can have an embedded subroutine called sub and i can also say console.log and then we're going to console out from sub and we're going to find out what this is pointing to so let's run this little experiment and instead of saying return this let's go ahead and invoke sub as well as everything's going to be exported out to the console i'm going to hit refresh and i'm also going to delete this invalid piece of code here and then what i'm going to do is i'm going to run it so let's say we call the global method subroutine and we're going to call this subroutine and you'll notice we get well two different results first of all you say from global this is this console.log line and we're targeting this keyword and you can notice that it's targeting a new contextual object that we invoked it with we said new global and it's invoking it with a new global object then we created this subroutine we added it to the stack and invoked it but we said console.log from sub this and we say console.log from sub and you'll notice it's now referring to the window object so be very very careful because now this refers to the window object here and we'll talk more about why this is dangerous later on but also we now know that by default callable objects will go to the global scope because of the way it's been invoked it's just been invoked like that a standard way to invoke it we didn't say new sub if you said new sub then this would equal a new object but we invoked it like this it's how you invoke that callable object even if it's in another callable object it's how you invoked it well we invoked it that way and we know that way the this context by default this standard way of invoking is the window object so be very careful when you are using this keyword [Music] construction workers in the real world build things you give let's say a construction worker some blueprints and they will construct or build something like a building or a car or a plane or anything else that requires a blueprint so likewise what are these constructors in programming well these constructors in programming are in fact like construction workers now in the case of javascript we have constructor functions this is the typical way that you create objects in javascript but why do you need a constructor function why do you need a blueprint to create an object well we may have let's say a game and we have a player and the player is an object we can describe him and he has certain characteristics and this player goes through the map and he comes in contact with apples and when he touches an apple he gets more points so we want to have a constructor function for all of the apple objects that we want to construct throughout our entire program so we need to be able to create a constructor function so that our program can call upon this function dynamically and create an object from it and when we create an object or an instance that's all it means an instance just means a copy of it's a copy of the blueprint it's kind of like me having a blueprint for a building and what we do is we copy that blueprint over and over and over again we create an instance of the blueprint and likewise we're creating many objects from this constructor function so that's why we have constructor functions so our program can call upon this function at any time a user clicks a button it can generate an object for example a user goes to a new level we can randomly generate more apples there could be many instances of why we do if you were creating a graphics editor for example and you import an image i need a basic blueprint of data for that image to go into my main data store i need to keep track of all of the images the user is importing into my program whatever it is you're going to need some means of construction so that is why we have constructor functions so first of all i want to create a constructor function for the apples that are going to be produced throughout our game so i'm going to create a function which is a callable object and i'm going to call it apple now with the naming of your constructor functions please add in a capital letter to begin with and the reason why we do this is because it helps us identify that this is a constructor function whereas if it was lowercase it kind of just looks like every other function it's just a naming convention you don't have to do it with your constructors but it's ideal to actually have a capital letter with a constructor function then we can pass in some parameters now we're creating a template here for our apples but our apples can be placed at different positions they can be a different color and they can provide a different score to the user so even though we're constructing a single apple object from this constructor the values are going to be different i'm not just going to create a flat object and then they can change it later what i want to do is i want them to receive i want them to be able to create objects on the fly that have different values it's the same template but it's got different values so for example x y we need these parameters we also need the color and we also need the score as well now we need to do is take a look at this execution context and of course the context of this now you know when you actually invoke a function that is how you determine the this context the context of this execution context so with constructor functions you use the new keyword and then you invoke your constructor function why because we don't want this by default if you just call it like that to equal the window object that's bad we want to make sure that we assign a new context a new object context to this execution context like so and then we start adding in let's say properties and values and methods into this whatever you want to do it's just like referring to an object so for example let's go ahead and say this dot and so what i'm doing is i'm referring to this new object that i've assigned to the this keyword because of how i've invoked the constructor so when i'm using dot i'm accessing an object this contains an empty object a new object if you will and i can say right give me the x position and that's going to be equal to x for example there'll be a value assigned to x like so maybe the value of 10 or something like that and that value will get assigned to the object's x symbol so if i say x10 that's what we're doing here so please do note the difference this is the parameter pointer and this is the symbol contained within the object be very very careful this is the symbol pointer within the object and this is the symbol pointer for the parameter so there we go that's all this is doing this is just an object now just a new object that i can manipulate and play with so you've got y you've also got color and then also you've got score and all that's going to do is it's going to return the object now you can say return this if you really wanted to but to be honest with you the context it doesn't make sense because once we actually start invoking this execution context there's no need to say it it will by default return whatever sort of the value is in this function so actually we don't need to say return this it's just going to take a look at the context the current value and the current value is this object that we keep manipulating and if we keep manipulating it all it's going to do is it's just going to return this object wherever we invoke the function and it's going to invoke it with and it's going to return with all of the values we assign so let's go ahead and add in some arguments for our parameters so for example 10 and then we've got 20 on the y-axis and the color is going to be red and this one is going to give you 200 points now if i was to just save this and hit refresh you wouldn't see anything in the console you can log it out to the console for example you could just copy this and paste it in the console and you'd see that it does return an apple object you'll notice it has the name of the constructor function which is here and then it tells you what it returned well it returned an object with the x is 10 y 20 color red and score 200 just like the values we've passed in here well that's no problem but there is a little bit of an issue once you create this object here like that so it returns that object perfect how can my program later on reference this object it can't because there's no way for me to reference there's no symbol name to target that object in memory so what you actually need to do is make sure that when you invoke it you assign it a symbol name so i'm going to say var apple 1 and then when you invoke the function it's going to return an object and you can point to that object later on in your program using apple one so i'm going to now save that out hit refresh and say apple one there is apple one with our defined values and then you can start creating more instances meaning more copies of this object and they can all have different values each instance is independent from one another so for example this will return an object that's going to have these values so i can just copy and paste that in so we can have that and you can have another one and then you can have another one they could all be identical if you really wanted to but then you can start to change the values even then later on because each one is an instance it is a copy of we created this object from one function but each instance each object is unique just like for example you can have a macbook that's identical to another macbook but one macbook goes to another user and another macbook goes to a different user and you can change that macbook you can reinstall it you can do different things to it they're all objects so even though they come from one factory one construction house if you will or place then you take that and then you can change each one independently of one another it's the same thing here just think of this as the production line making objects then you've got each object then you can keep changing the objects what will happen is you will get different instances we now have three apple objects and we're passing in different values we're constructing that object each and every time of the same blueprint or constructor function and there you go just hit refresh apple 1 apple 2 and apple three and that's it you now have apple one with its own set of values and each one has its own values whether it be red green or pink and it has a different score 250 or 10 and so forth so you just keep going in this fashion where you construct objects and that's all you're doing you're just creating in essence a manufacturing line you are creating a place where you are defining the blueprint of an object and yes each object can have different values but it has the same structure if you will and yes you can even modify the structure if you wanted to which we'll talk about later but overall you're just creating objects from construct functions and your program can actually invoke this function by itself so it can mathematically map out where it wants to place these apples and then it can call upon this constructor function when it needs to and keep generating more more more more [Music] prototypes are actually unique to javascript javascript works with objects in a very specific way that other languages don't necessarily use but what are prototypes well prototypes are just shared objects they're objects that have properties and methods that can be accessed via a range of different objects and it's all down to how that object is constructed so let's first of all take a look at a constructor we have an apple constructor constructing apple objects with the color and the weight but also you can have methods in there such as eat and throw so we have a constructor function that will generate our apple objects and each instance is unique to itself we have the color and the weight however there are some members meaning some properties or methods that are not unique to this object for example eat and throw well you can eat and throw every one of those apples and it's not a unique thing verbs aren't unique in that sense just like we have cars with different colors styles and makers but what you also have is the verb drive and drive is not unique to any particular car it's just a verb that we have for that particular category of object so in lieu of that fact what we actually need to do is use a prototype object here a shared object for shared members our apple objects can have a prototype object associated with it with the eat and the throw methods they're not unique to each of those apple objects so there's no point having a copy of the eat and throw methods for each object we're just wasting memory here we're adding additional copies when we don't really need to do that we don't need it on the instance level so what is the instance level when you have an instance of something such as the constructor is the blueprint for an object and an instance is a copy of that object so when we run that function it returns an object that is an instance it's a copy and on the instance level it needs to be unique you need to be able to identify this object from other objects its properties and so forth you may even have unique methods but typically you don't find that so we want to now attach a prototype object to our constructor and what this does is when we attach this prototype object we are in fact defining a shared object so now all of our apple objects on the instance level for each copy has its own properties and potentially unique methods so everything that's unique to that object is on the instance level each copy has its own uniqueness but eat and throw are not unique to any one particular apple so we can put that in the prototype and then what can happen is when i access any one of those objects either apple 1 apple ii or apple 3 i can then ask it to access and invoke let's say the eat method what will happen is these objects are now linked together so we have one copy of the eaton throne methods but when i access one of those objects such as apple one two or three and i ask it for the eat method it will look at those objects and it'll say well i can't see that symbol name don't forget a symbol name is just a memory pointer and so we have a memory pointer here that doesn't exist in apple one so what javascript does is it automatically searches the prototype chain this is a chain of objects it's just a link of objects and every one of those apple objects is linked to that prototype object and it will look down this chain and it will find for every single one of those apple objects that symbol name in the prototype and we can invoke it so now i just have one eat method and one throw method in memory and everything that's unique is on the instance level everything that needs to be duplicated is duplicated and everything that doesn't need to be duplicated such as eat and throw well they just stay in one place and we just have one copy this saves a lot of memory and it's very important for large-scale applications for example jquery and lots of other popular javascript libraries use the prototype to make sure that they only have one copy of the verb of the subroutine and so forth and they can have lots of instance objects such as each apple object each copy and it's unique to itself so prototypes are objects and they're shareable objects they share their properties and their methods so that you can access those members via the instances that were created that's all it is now one final thing what about this that word is so important this is all based on context and as i have said before it is all about how it is invoked so just take for example apple one i go grab an apple one that is an instance of the apple constructor that's what was created from it and it's going to be linked up automatically with the prototype object associated with the apple object and i'm going to ask it to invoke the eat method and the eat method is going to have a this keyword reference well you need to look at how it was invoked to understand the context of this we need to know what this is pointing to so we know that it was invoked from the apple one object that's where we use the member access operator and we said apple one access the eat method and invoke it from that object so we now know that when we use the this keyword in a prototype object it's not just going to point to the prototype object it's actually going to point to the object in which the call was made which is apple 1. so you can think about that this keyword going back up the chain it points to the very first object that invoked that particular function call so if i was to use the this keyword in the prototype object it points back to the initial instance that invoked it and that is why we use prototype and that's why it's so unique and special in javascript and it actually does save a lot of [Music] memory [Music] hi guys i hope you are finding this content really useful and adding value into your life and i'm serving you the way that i should be with that great service of knowledge and information and hopefully getting you excited about your career and i hope you can get the value that you need out of this and if you are and you'd like to contribute something maybe buying me a cup of coffee hit that kofu link in the description down below and you can donate like three dollars that will be enough to get me a nice cup of coffee and i can still keep making great content for you guys [Music] so now let's take a look at the existing project that we currently have we have a constructor that allows us to construct instances of the apple object with the color weight eat and throw methods now the problem is that the eat and throw methods are not unique so they don't need to be on the instance level they're just verbs you can eat and throw any apple object so what i would like to do now is put them into a prototype object because now we have three copies of the eaton throne methods unnecessarily when there could just be one copy of this subroutine in memory rather than three copies of each for each instance and if we have more apples there will be more copies of these subroutines wasting memory so let's take a look at saving memory and making our application more manageable so what we want to do now is take a look at our callable object or subroutine called apple this is our constructor function that's building these objects if you take a look at the window object and take a look at the callable apple object you'll see that this constructor has a prototype property it is in fact a callable object don't forget javascript treats functions as callable objects and you have a few properties that you can look at but mainly we want to take a look at the prototype property so what i want to do now is target that subroutine apple or callable object and use the member access operator to access the callable object and i want to access the prototype property and then i want to set it equal to a new prototype object any property or method is going to be shared across each instance that is generated from the apple constructor so what we have is the eat and throw methods i can now cut that out of the main apple constructor functions execution context and paste it into the prototype this means that i'm only going to have this one prototype object in memory and one copy of the eat and the throw methods that will be shared across all instances all copies of the apple object and we're saving memory now let's go ahead and save this and then go into the browser and take a look at apple one and run the eat method for example apple ii and apple iii when we do this you'll notice that each one runs the exact same subroutine i can even then modify just one subroutine don't forget last time we were copying that subroutine or that method for each instance but now i can target my constructor function i can target the prototype and i can actually change the eat method for example or i could add a new property or a new method onto the prototype so i can change it and then when i run it again on either apple one two or three you'll notice that they're all pointing to the same subroutine that's in the prototype object now i want to use the this context this is a contextual word it needs context if i point to this in that sentence what am i pointing to i need a context of what i'm pointing to just like what is this that memory pointer pointing to so what i'm going to do is i'm going to change the eat method and i'm going to change that to return whatever this is pointing to now what i would like to do is refresh that in the browser run it and target let's say apple 2 and then i'm going to run the eat method now what's really important here is how is this method being invoked this is so important to understand that this context is the this context pointing to the prototype object or is the this context going to be pointing to the apple 2 object well the answer is it's going to be pointing to the apple ii object and why is that because that's the object with the initial invocation if you want to know what this context is you have to look at how that function was invoked and it was invoked meaning it was called up and told to run by the apple 2 object so what you see here with this context is it goes back up the chain that's really nice and the reason why that's really nice is because now you know that when you use the this context in the prototype object it goes out to the instance level so now i can change the color property for example or i could change another property or add a new property onto the instance level the unique level and change that object in particular which is really nice that means i can have one subroutine with this context and that this context will point to the instance level so if i invoked it from apple one it would now that this context be apple one and that this context for apple three would be apple three and so that allows me to go back up the chain and look at the initial object that invoked it and then i can change that object and that's actually how very popular libraries work such as jquery and other libraries they use the prototype object and this context and it allows you to go back up chain so if you want to take a look at apple one you have apple one and then you have underscore underscore proto underscore underscore now the reason why you have that that is the prototype object but you're not supposed to modify that object directly through the instance level you're not supposed to do that you have to let the javascript jit compiler actually link the object dynamically which is what we're allowing it to do here you should only be modifying prototype objects on the constructor functions themselves you shouldn't be doing it through the instance level and you'll probably find that this name may change in different browsers they really don't want you modifying the prototype object through this property but it's here as a reference it's here as a pointer if you will a link as in a prototype chain and a chain is made up of links so we've got links of objects so we've got our prototype object that we attach to the apple constructor that's being dynamically linked to and then also we have another prototype object that again is being dynamically linked to and you have a couple of methods and properties that you can actually access here so this is actually something that's very unique you can call a symbol name for example we have eaton throw and it will look down the chain and as soon as it finds that symbol name it will stop and it will invoke that value or it will return that value now finally what you have in this prototype chain is again it stops at the symbol name so let's say i modify just apple one and i'm modifying it on the instance level on the copy level actual apple one i'm going to modify and i'm going to create the eat property so now we have the eat symbol and it's pointing to it's referencing it's symbolizing this string in memory now what happens when i try to invoke the eat method well that's going to be a little bit of a problem because what's going to happen is it's going to look for the eat symbol and as soon as it finds the eat symbol it stops now just for apple 1 i've created the eat property and if i try to invoke a property you're going to get an error and say sorry it's not a callable object so actually what you're finding is here as soon as it finds the symbol name in that chain of objects it stops right there so now we have a block here because on the instance level we've got an eat symbol but in the prototype we've also got the eat symbol as well now it doesn't erase that symbol because if i go to apple two and call the eat method it looks for that eat symbol name and it will invoke it because it is on the prototype so it'll stop on the prototype but if it's on the instance level it will stop on the instance level so it's as soon as it finds that symbol name it stops and either returns that value or executes that value that callable object so be very careful about your naming and your symbol name so that you don't have symbol name collisions here you have a collision with apple one but not with apple ii and apple three apple one has an eat symbol on it and also the prototype has an eat symbol on it and so there is a collision between there and it may not produce the results that you're expecting when you start running your application so that's it prototypes are just shared objects they allow you to share properties and methods across a range of objects the prototype object is attached to the callable object the callable object that is the constructor and when you construct an object from that constructor it is automatically linked to that callable object's prototype object and that's it that link is dynamically established and that's it i just have to have one copy and then i can use the this context to go back out to the instance level to go to either apple one apple or apple iii and i can change those particular objects uniqueness so hopefully that's taught you a little bit more about prototypes subliminal conscience is constantly comparing values each and every day and one of those basic ways that it does this is for example when you want to cross the road first of all you may look right and see if there is zero cars on the road and then you want to look left and see if there's zero cars on the road to the left so you're doing this comparison we want to see no cars and then if both of those statements are true then we cross the road and we call these comparisons that we're doing here comparison operators in programming we the programmers are the subconscious even though your mind does this automatically we need to be able to program this and it's simply allowing our programs to ask questions we are asking does this equal this or does it not equal this is this greater than this is that greater than this so what we want to do is ask questions and by allowing our program to ask questions on certain data types and values you are enabling your program to think and you can change the way that your program functions based upon the conditions that you place within your program so we're just going to be doing a little bit of console work here so first of all we have the double equals comparison operator and it compares what is to the left of it and what is to the right of it so what we're going to do is we're going to compare let's say the number 10 like so so is 10 equal to 10 yes it is so it returns true now with comparison operators they always return a boolean value if what they have compared is correct it will return true and if not it will return false so is 10 equal to 100 the answer will be false also you can compare strings such as hello is that equal to the string hello like so and that's true but is it equal to hello with a capital h let's find out it returns false so this is case sensitive when it compares strings it's very very case sensitive it not only looks at the characters the values but also the casing as well very important when doing comparisons you can also have the floating point numbers like so so is 10.5 equal to 10.5 yes it is but it's not equal to 10.43 so that's going to be equal to false then also you have the null and undefined so null is equal to null and you also have undefined don't forget that when you see undefined or null in your program it just means that whatever piece of memory that you're trying to address has not really had anything specifically allocated to it now also you can compare the boolean value so you've got true and you've also got false which is equal to false as well but false is not equal to true so there are all of your primitive values you've got integers floating point numbers strings null undefined and so forth one to be very careful of is nan nan is a primitive data type however it doesn't actually compare so nan is not equal to nan it's false and we'll address this problem later on so be very careful and never use nan with comparison operators that is an absolute crucial must because you won't get a good comparison so never use nan directly now i want to talk about polymorphism remember polymorphism is like play-doh it's changeable it's adaptable we had a look at the plus operator when we said right okay 10 plus 10. well this is a function in the jit compiler that will take whatever's to the left of it and whatever's to the right of it and potentially add the values together so we're going to get 20 but that may not happen in every situation because it polymorphs for example we've got two different data types now the integer 10 plus the string 10 well that can't return an expression value it actually returns a concatenation so what it did was it said right this is a number but strings take precedent because strings can contain numbers and letters so what it did was it took the integer and it changed it into the string data type it polymorphed it changed it you think of it like a cast it's changing its cast it's data type it's ultimately retaining the same value but it's just changing the data type to try to compare it or in this case add it together which is going to concatenate when it comes to string so it's just concatenating those two strings 10 and 10 together producing 10 10 this string here well likewise the double equals operator does polymorph it will change the values when needs b so for example a good case is null is equal to undefined technically they're two different types of primitive values however null is equal to undefined so what it recognized was that null is kinda like undefined they both mean the same type of thing so it just polymorphed and in this case it's a good thing numbers and strings so i have the number 10 and the string 10. now what happens is if there is a string either to the left or to the right of this comparison operator a string always takes precedence why because strings can contain numbers and letters so you can can so you can turn an integer into a string but you can't turn a string into an integer or a number so that's what we're doing here is it's polymorphing it's changing the data type of that number and it's converting it into the string data type and comparing it so it's literally the string 10 is equal to the string 10 and that's true so to prevent this from happening what we can do is use the triple equals sign now this will not only check that the values are the same it will also check the data types as well so null and undefined even though they mean the same type of thing nothing's been allocated to that spot of memory they are different data types so now when i ask it is null equal to undefined it returns false because it's not only checking the value and it's not trying to change the value or the data type it's leaving the data types alone it's leaving the values alone and it's doing the comparison there's no polymorphism with the triple equals they are not equal to one another and likewise the number 10 is not equal to the string 10 in this case because there's no polymorphism this is a number data type and this is a string data type and therefore it's false they are not equal to one another so that's how you prevent polymorphism from occurring when trying to compare two values to make them equal now likewise you also have the is not operator sometimes you want to check to make sure that let's say a variable is not equal to null or undefined so what i can do is i can say is no not equal to no the answer is false they are equal towards one another but if i say is nor not equal to undefined we also get false again now if it returns false that means that they are equal because don't forget this is the is not operator is it not equal to this side so let's say 10 is not equal to 100 true it isn't equal but also the value of 10 is it not equal to the string 10. well that actually returned false so is the number 10 not equal to the string 10 it says false so that means they are actually equal don't forget that we're asking is it not equal is that true well it's actually returned false so they are equal so there's polymorphism happening here because we have the string 10 and we have the number data type 10. so again to prevent this we need to use the is not operator with an extra equal sign so we're going to say 10 is not equal to the string 10. so if you add that extra equal sign in there it's now going to check the value and it's not going to change the data type so now it's going to say true they're not equal 10 is a number that is a string they're not equal likewise null is technically not equal to undefined however if you use the single equal it will return false for example null is not equal to undefined that returned false meaning it's equal but technically they are not equal so that should be true so now is null not equal to undefined you'll notice it says true they are not equal null is a different data type to the undefined and we're just trying to compare them and find out the best ones so we're just trying to compare these values and we're trying to find out is the data type matching and also is the value matching as well so there is the double equals and the is not operator they polymorph and if you add an extra equal sign onto them they will no longer polymorph now also we have the greater than operator so is 10 greater than 100 so you can look at what is on left 10 isn't greater than 100 so it returns false but 10 is greater than 1 so that's going to equal true now you can also do this with strings as well such as hello is hello greater than the string hello well the answer is going to be false because this string isn't greater than this string they're both the same value but however if i had a few more but however if i had a few more o's onto my hello you'll notice it says true so this string is greater than this string on the right so that's that but you also have the greater than and equal to so you can say the number 10 greater than and equal to 10 because beforehand if you said is 10 greater than 10 no they're equal but what you can do is have greater than and equal to so if it's either greater than or if it's equal to whatever's on the right return true so 10 is equal to 10. you also can invert that around so is 10 less than 100 and that's true you can tell by this little point right here that's how i remember if it's the big one on the left hand side it's greater than if it's the little one it's less than is that less than smaller than this side which is bigger and it is so now we can also have is 10 less than 1 the answer is false it isn't and also you can say is it less than 10 well 10 isn't less than 10 so that's going to be false but you could say less than or equal to again just by adding in the equal sign well 10 is equal to 10 so that is true and you could also try to do this with strings now i don't recommend using the greater than and less than and less than equal to and greater than and equal to operators with strings because they are kind of funny so for example you can have the hello is it greater than for example hello that's going to be false now if i add a couple of those onto here it's going to be true this string is now greater than this string and you're thinking yeah because the length is longer in that string for example there may be more spaces more characters but what happens when i add a capital h onto this string well now it's false this string is no longer greater than this string which is showing me that it's not actually very good at comparing at comparing strings because i would consider that string to be a little bit greater than the string on the right so as you can see with these comparison operators you can sort of compare them and see which one suits best so take a look at the comparison operators and review them all you have the double equals the triple equals then you have the not equals and is not equal value and type then also you have the greater than less than greater than and equal to and less than and equal to comparison operators start playing around with them experiment with them see how they work and then come back to me in the next lecture [Music] so in the previous lecture we were asking questions like you'd ask questions when you want to cross the road is there no cars to the left or to the right and then we can cross the road after we've evaluated however you actually have the verb the execution of walking across the road we first ask the questions in our mind but then you actually have the verb of walking you are walking across the road well likewise we need to program this as well well in our program we have if statements and in here what we do is we write the condition in the parentheses so this is where we say right i want to look left and i want to look round i want to see if there's a green man showing so that i can cross the road but then also you're going to need the braces and the braces will define an execution context this is the action the verb the thing you actually want to execute so likewise this is what we're going to do here you define the instructions that you want to run so let's go ahead and define the condition so for example let's say i want to make sure that the green man is equal to yes like so so here we have a comparison operator we're asking a question we're evaluating the green man value this is this variable here that i've defined i want to look at that variable pull out its value and indeed the value will be yes and they are equal to one another and again make sure this is case sensitive so if i have a capital y here and a lowercase y there it's not going to be equal so be very very careful about evaluating strings so once i've evaluated it i can then log something out to the console so console.log and i'll say cross the road there's my verb my execution if you will and if i hit refresh it immediately went down it created these variables with the values and then it took a look at the if statement and it asked what is the condition for the execution and all it needed was the green man and it needed to be equal to the string yes if it is then log this out to the console across the road there it is so in fact this condition evaluated to true it's a truthy condition it's either going to be true or false the conditions have been met or they haven't so we have now a true if statement now if this was not true for example the green man is equal to no then unfortunately these strings won't match and therefore you no longer have a truthy statement you have a false statement so now let's take a look at this if i go ahead and save it and hit refresh nothing happens because it's not true and therefore we don't perform the action so this leads on to something else you can write as many if statements as you'd like with your different conditions but sometimes you want to ask a series of questions so for example if something doesn't work out then else if what if something else could be done so let's go ahead and say else if an else if statement again requires a condition and we can check for a different condition this time if the green man is on no i can still cross the road if there's no cars there so let's go ahead and say take a look at cars left and i want to see if cars left is equal to zero then i want to perform a different execution context this action down here so now i can go ahead and save this and i can hit refresh so the first if statement was false so this execution context was never executed the second conditional execution context while the conditions were met for this execution context because cars left is equal to zero so we can log out to the console or clear cross the road don't get me wrong you can have as many commands in here in this execution context just like a regular function so you can go ahead and save it and hit refresh and there it is it's a true statement but let's say if all of them fail so let's say that cars left is equal to one well car's left is one and is it equal to zero no so this is now a false statement therefore it's going to prevent any execution so it's now no longer going to execute anything but what you can do is say if all else fails so else doesn't need a condition it says look if all else fails then do this console.log and then we can say stay where you are and save that out and hit refresh so this statement was false so we don't execute that this statement was also false so we get rid of that and if all else fails so they did then execute this execution context which has no condition on it and we just say stay where you are and there you go we now have stay where you are so we've chained this and you can keep adding as many else if statements as you'd like and keep adding as many questions as you would like if you will but i just need these three conditional execution contexts chained together using if else if and finally else and again you can optionally add in else and you can optionally add in else if but one thing you do need to start out with is an if statement so now what i'd like to do is we have cars left right here and i'd like to ask a little bit more information with this conditional statement whatever is written in between these parentheses is called a conditional statement and it's just checking to see if conditions are true but we have cars left but we also want to check the right hand side of the road for any cars as well so what you have here is the ability to chain multiple comparison operators don't forget you got the asking just one question like is cars left equal to zero that's not really good enough because we also want to check the right hand side and i don't have to write a separate if statement because that just wouldn't work so what i can do now is use the and or the or operators now which one would be correct well and would be correct because you need one and the other whereas the or operator is one or the other if one side is true or the other side is true then go ahead and perform this action so let's take a look at this if i say and so i'm gonna say cars left is equal to zero and cars right is equal to zero then if both of these are true because we need this and this to be true in order to execute this execution context so we say console.log or clear across the road so let's go ahead and save this now and we hit refresh and it says sorry no that's still false stay where you are because cars left is not equal to zero cars left is equal to one so that is actually false now cars right is equal to zero you can see it there so that is in fact true however you need this side to be true and this side to be true so in this case we have on the left hand side a false return from that conditional operator and of course if you get one side false it's all false so that's going to return false from that and operator sorry you need both for it to be true however if you use the or operator it means one or the other must be true so if i save this now and hit refresh you'll notice it executed it did say console.log or clear across the road as you can see and that's because even though cars left is equal to false because it's not equal to zero so that's false and cars right is equal to zero which is true it says one or the other and it's gonna go with any truth if this side is false or is the other side true well it is so as long as one of those sides is true it will return true and it did however we know that roads have two sides to them unless you're on a one-way street and if you don't look both ways you could end up being flattened by two tons of metal so what we want to make sure is that we use the and operator here one and the other the left side has to be true and the right side has to be true the or operator says either the left hand side has to be true or the right hand side has to be true and that's it all right so i'm going to change this to the or operator again and i just want to mix and match this up and i also want to say is the green man equal to yes we're going to use the and operator again so what i want to do now is i want you to look at this conditional statement and i want you to tell me whether it will if true execute this execution context or it won't execute this context i want you to pause the video and i want you to again have a look at the mozilla developer network or mdn and we have all of these operators here that are defined don't forget in the jit compiler and they all have an order of precedence the ones with the highest number are executed first and you scroll all the way down and those are executed at the end so what i would like you to do now is look at that condition and then i want you to go through that entire statement and tell me whether or not this is true or false pause the video now and then you can come back and see if you were right so what we have first of all is we have the strict equality operators so if you take a look at this and i scroll down you'll see at level 10 we have the strict equality operator with the triple equals that's the one that currently has the highest precedence so we start with the first one on the left so is the green man equal to yes well the green man variable is equal to no so this is false and we want to take a look at cars left and then you also have cars right and again these operators here currently contain precedence well this one is to be evaluated next is cars left equal to zero well cars left is equal to one so this is going to be false then we have cars right and is cars right equal to zero well carl's right is equal to zero so this is true now we also have the and or the or operator so let's take a look at this if we can find it here we have first of all the and operator and then you have the or operator so we have six and five so we've got to go with the highest order which is the and operator so if you take a look at this we have the and operator false and false well don't forget for an and operator you need this side to be true and this side to be true so it's going to return false but you still have this or operator in here and if you take a look at that that's the next one the final one the or operator and it's going to say one or the other well this side is true so it doesn't matter it's one or the other either side could be true and with the or operator if either side is true it returns true so in fact the answer is yes it will with this current conditional statement actually return console.log or clear across the road let's take a look and see if we are right and there you go it says all clear cross the road now i'm going to change this because i actually want this to evaluate to false i want to make sure that there is a green man always showing and at least one side of the road is clear so what i do is i use the parentheses again these round brackets so i'm going to put in the parentheses like so and what happens is you've changed the order of the execution because whatever is in between these parentheses is going to be executed first and why is that because the grouping operator or the parentheses is in fact the most important operator in this statement as it currently resides at level 20. so it looks at whatever's in between these parentheses and evaluates what is in between them so if we take a look inside of the parentheses you have the strict equality operators which they take the highest order so what i want to do is we want to first of all evaluate it is cars left equal to zero while cars left is equal to one so that's going to be false then we also have the second strict equality operator is cars right equal to zero the answer is true and again we just wanted to check whether one side of the road was clear so that's okay so we want one or the other so this is the next operator to execute so this side is true wherever it finds a true on the or operator either side it's going to return true so the total evaluation from what's inside of the parentheses will return true inside of those grouping operators so it's evaluated everything and then it says and does the green man equal yes well the green man equals no so this is going to be false so you can see that by adding in those parentheses we've evaluated what was to the right of this and operator first and then we did what was to the left of it which is now false so with the and operator you need one and the other side of the operator to be true fortunately that isn't the case here so we now want to return false that will prevent this from executing then we have the else statement which will say stay where you are because the green man needs to be there so you can now see how adding in the grouping operator just like in mathematical expressions when we use the parentheses it evaluates what's inside of it first so hit refresh you'll notice it says stay where you are that is operators that's their precedence and that is basically where you have an execution context that is a conditional execution context it executes upon a condition being met and you can chain these execution contacts together likewise you could say right is the green man equal to yes so let's go ahead and change that to yes like so and then hit refresh and you'll see that the green man if it's equal to yes console.log cross the road and there it is you get the value out across the road so as soon as it finds a condition in a chain of execution context this is a chain of three execution contacts right here and if the first one is found to be true then it will just stop there execute that and return it and the other ones will be ignored so there we are execution based upon condition [Music] loops in programming languages allow us to have repetitive tasks repeated dynamically over and over and over again this helps us as programmers write efficiently so for example i could print each one of these names out to the console so i could say console.log and then we take a look at the class register like a teacher will pull out the register and then we start to iterate through it so we start at zero and then we go to one and then two so that is all of the indexes this is the zero index then you got one and then you got two and we can print out these strings these elements here in the array to the console save that and hit refresh now that's okay but the clash register could potentially change we could add names in there or actually delete names out of there on top of that doing it this way means i have to write it out line by line and as i said there's a problem with this because things can change things can be altered and that's not good for us so having a repetitive execution will prevent this from happening and it will allow our program to be more flexible so let's go ahead and take a look at the for loop and you'll notice with the for loop syntactically it looks very similar to the if statement where you have the parentheses and then also you have the braces and in the parentheses we define conditions and then also you have the conditional execution context that will execute when the conditions have been met and you can think of the if statement as a singular on its own so for example if this condition is met then run this instruction once but you can think of the for loop as a plural as multiple so for example the condition may be true for maybe two or three seconds whilst your program is executing so this condition while it's being met is like a plural it's running this execution context multiple times so you have the single version which if you just wanted to check something once and run something once you'd use if and if you would like a plural then you would use a loop for example now what do we do here with the loop well first of all you need an index why well when a teacher goes through a register for example we have a teacher with a clash register what she does is she starts ticking off boxes and saying right that's uh lawrence are you here tick the box johnny you're here tick the box jeff you're not here you know across the box but whatever there is there's an index for each one of those persons so she knows where she is in the register so likewise we have a teacher here and this teacher needs to know where they are in that register so what i'm going to do is create a variable called i which is index you could call it whatever you wanted you don't have to give it the name of i but i will and i'm going to set i equal to zero and yes you can define this variable within the parentheses so var i equals zero then we put an ending semicolon because that's actually one statement that's one part of it but the next part is the actual condition itself if this condition remains true then we continue to execute so what i want to do here is say is i less than the class register dot length now what have i just done here well this next part this next statement is a conditional statement now i at the moment is zero so zero is less than the class register.length now let's take a look at the array itself if you actually take a look at the class register don't forget they are objects don't forget that have the key names as the index so 0 1 2 but you also have the length property which tells you how many elements how many values are within this array and you'll notice it has three elements one two and three and this is actually quite nice because we're starting at zero and then we are taking a look at the length which the length tells us there's three elements in the array and this actually works quite nice so is i less than classregister.length so whilst i is less than the classregister.length we're just going to keep running this execution context but likewise you need to make sure that at some point this condition right here fails so if i always remains at zero this condition is always going to be true and it's always going to execute and you can see the problem there if you continually execute something constantly you're going to get an error in your program so at some point it does need to fail just needs to last the lifetime of the condition and then it does need to fail so what i'm going to do is say i plus plus and this will increment i incrementing just means add one so plus one plus one plus one plus one d incrementing means minus one minus one minus one minus one dead easy so we're eventually just going to keep on incrementing and if you keep adding one then it will eventually be great equal to the length of the array and at that point it will be false i will eventually be greater than or equal to the class register dot length it will no longer be less than and so this will eventually end up being false that's very important it's also important because we want to use i to access each one of these elements in the array so let's take a look at this we've defined an index counter so we've got something to store where we're at in this register then also you've got the condition in which if i is less than classroom.length we're not done we need to keep iterating over until we reach the end and then finally we just want to keep incrementing each time just like a teacher going through the register she is incrementing through the names one by one by one by one so what i want to do is console.log and then say class register and then i want to use the computed member access don't forget you can write a statement inside of here and you can actually pull out values and you can even use variables and yes we can use this variable i in our execution context for the for loop so please do remember that so i'm going to say console.log class register i and so let's take a look at what this actually produces i'm just going to hit refresh and you'll notice nothing changes it's still printing it out but this time i'm not having to write out line by line and if i add let's say a new name and save this now it's being printed out dynamically so what is actually occurring in this for loop first of all we have the class register what we're doing is we're setting up the variable i is equal to zero so we're starting at the zero index and we're saying is i less than class register dot length so i is currently zero that's what i is so zero is less than class register.length and don't forget that with your arrays this array here it is in fact an object and this object has the length property that tells us how many elements are in the array so if i go ahead and hit refresh again zero is less than class registered dot length which is three that just returns a value three so that's true so we're going to execute this execution context and it's going to say console.log class register i and it's going to look at the value of i and it's going to be 0. then after it's finished executing this context we say i plus plus so now i is equal to one and is one less than the array length which is three yes it is so we want to execute again and i is now equal to one and with console.logging the class register one which is john that's john there he's on the index of one and then once it's finished executing we add one again so now var i equals two and is two less than 3 yes it is so executed again console.log class register take a look at the value of i i is now equal to 2 and we want to print out the element with the index of 2. you got 0 1 and then two and jeff right there is printed out and that's it and then it's incremented again so now var i is equal to three now is three less than three no it's actually equal to three so now this statement is false and when this statement is false we no longer execute and all of that's just dumped out that's what's happening there is we're just simply iterating over meaning going one by one by one each value and all you need to do that is you need a counter to keep the index then you need to check the index to make sure that it's lesser than the length that you're trying to iterate through of an array for example and then you want to keep incrementing until you have finished so you are able to iterate which means go one by one by one and you can do iteration by two types you can increment and de-increment so at the moment we're incrementing we're adding one so we go one by one by one we start here and then we keep adding one and go up but d incrementation means that we start at the end and then we go down the elements in the array so that this is incrementation if i go ahead and just copy this out and then what we do is we just comment it out and paste it down below we add incrementation now what i'd like to do is invert this and de-increment so i'm going to say class register dot length minus one is it greater than or equal to zero and then we're gonna say i minus minus this time we're taking away one so let's separate these guys out a little bit so that we can see what we're doing if i save this now let's hit refresh and we should get an inverted list instead of going lawrence john jeff it should be jeff at the top so if i hit refresh there it is jeff john lawrence how did this work well we have an index again we need to make sure we have a place to start at and to keep incrementing through and in this case we're de-incrementing and place where we start and d increment through and then what we do is we say right class register.length is going to be three don't forget class register is an array object with the length of three right here but this right here jeff the very last element the very last index is actually two because it's zero indexed so we actually want to say right go get the class register tell me the length and then minus one three minus one is two that gives us the index of the last element in the array so that's what we've got there three minus one equals two that's going to point to jeff and if i change the length of the array it would be different so we have var i equals two then we're saying is i which is currently two greater than or equal to zero and that's true two is greater than zero so minus minus so we start with i being two and then you keep d incrementing so i will eventually be one and then you go down to zero and zero is not greater than zero however zero is equal to zero and so this statement is still true and so we can pull out the very first element in the array and finally i will be equal to negative one and when i is equal to negative one negative one is not greater than nor is it equal to zero so it's going to be false and that's it so that's how you can increment through and de-increment through the elements in your array now finally there's one last thing i want to cover which is the for in loop so this time i'm going to write four and then i'm going to create a variable called index and this index is going to be for the class register so what current index are we at in the class register and then we're going to have our for loop and we can say console.log and then we can say class register and we can access the class register array and we can pull out whatever is at the value of index so index to begin with is going to start at zero now please do note that the four in loop is incrementation it's not d incrementation so if you want to step back through your array you want to go from the last element to the first you need to write your for loops like this however if you want to increment you can write it this way but this way is very verbose meaning it's it's very stretched out you've got to write a lot of code compared to this guy which is a bit cleaner because we have the variable index equals zero this will be automatically incremented and we're saying right i want you to increment it for the class register so take a look at all the indexes in the class register and this variable here in which you just define the variable like that you don't actually use the assignment operator you just say var index and the index will automatically be assigned zero and then incremented one and then eventually two for our array because we only have three elements so that's all that this is doing it's just a memory pointer pointing to a number an index that we can access and as you can see this is incrementing it's starting from the beginning and going through so we say class register index and that's it we log out the class register and then we take a look at the index and it's going to be 0 1 and 2. hit refresh and there it is lawrence john jeff so this syntax is a little bit cleaner and that's called the four in loop and we're taking a look for the indexes in the class register so you can see how that like strings together like a really nice sentence just don't forget the var keyword in there because we need a variable we need a memory pointer to point to a value so saying console.log class register index there it is there are your different types of for loops i definitely recommend sticking with for loops because for loops are heavily optimized in javascript even in older browsers they are fast they are incredibly incredibly fast so please make sure you use your for loops for repetitive tasks hi guys i hope you're really enjoying the avilex content and i always want to go above and beyond that's why i'm creating the platform avilex academy abilex academy will allow us to grow and collaborate courses together rather than me creating it we can do it together we can have a community where we can go if we have troubles and problems and i'm also offering completely free when you sign up to cheat sheets extra information extra blog information extra tutorials podcasts and other things that will be available through the platform so sign up today with avilex [Music] academy [Music] es6 is short for ecmascript 6. the ecma body is the one that controls the standards for the language and they also bring out new versions of the language just like html has new versions as well as css well that's the same for javascript and you could also call it ecmascript if you wanted to and it's ecmascript version 6 or javascript version 6. and this new version allows you to define a new way to create a variable the first way which is the way we've already seen is a standard variable the new way is using let and also you have constants in either case you have symbol names these symbol names are just like an address to your house they allow you to address values stored in memory you're probably going well why do we need let well let has more respect for scope and we're going to demonstrate this but first of all i just want to demonstrate that in fact these are all symbol names you have the symbol name for the variable you have let symbol for the scoped value that string that we're storing and also you have the constant which is sim name symbol name is a variable container which means its value can vary depending upon what you assign you can assign a number or anything else so you can reassign the value to this memory address it's kind of like knocking down the house and then building a different house also with the let symbol you can also assign new values they are variables and now my let symbol will reference the new value placed in its memory address then you also have constants such as sim name that once set you cannot assign a new value and you'll notice that we get an error if we try to do such but why would i want to use let what's the whole reason behind it well let create symbols that respect the scope that they reside in particularly with conditional execution context so let's cut this out and then what i want to do is take a look at an if statement an if statement takes a condition and upon that condition being true it will execute whatever is in its execution context so we are in essence defining an execution context that's conditional and we want to see if it creates the symbol names where we expect it to be so i'm going to save this now and hit refresh first of all what about this variable here symbol name when i take a look at that it actually allows me to pull out that value from memory but that shouldn't have happened because this is the scope here that is the scope that's not the window object and what it did was it went out of that scope and it actually attached that symbol name to the window object and that's very bad because we're adding a global variable here and you could have all sorts of problems here naming collisions i could have another if statement down my script using the same symbol name thinking that the variables respect the scope but variables don't respect conditional execution context such as if statement execution context so that didn't work now what about the let symbol well we created that symbol name let symbol and you'll notice it says sorry it's not defined so the let symbol was defined within these braces and they are scoped it respected the block level scope you also have a constant you can also think of this as a block a block of commands that we're placing together and we're asking to execute it and it respects that block what about the constant as well constants also respect the scope of this conditional execution context and that's why you should use let if you want to respect the scope and also don't forget you also have other types of execution context such as for example a for loop so you also have these parentheses here and we're creating a variable called i and also let's paste in those instructions again so we have the variable and we also have let and we have constant let's see if variable respects this conditional execution context and also this variable here respects the parentheses let's go ahead and hit refresh let's see if i has been defined i has been defined and i is equal to five so it created this variable this symbol name on the window object it jumped out of this scope these parentheses here which is caused a huge problem because now my window object has a symbol name called i unnecessarily i don't need that symbol to be globally accessible also we have this symbol name here from the variable symbol name that also did not respect the scope so vars don't seem to be respecting conditional execution context scope however let's symbol for example that did let symbol sorry that's not defined it was defined within this scope private to this execution context also the constant which is sim name sim name also respected the private execution context of this for loop so it's private but var didn't and that's why you should use let and also let will solve that problem here now i'm using let for the symbol name i now if i try to access i it's going to say sorry that's not defined so it respects the parentheses and also respects the braces now i want to further stress that you have your functions right here now with functions respected so if i create a variable with a symbol name var symbol and then i assign a value and then i hit refresh you will notice that var symbol is not defined and if i run those instructions so i'm invoking that execution context and then i try it again you'll also get the same error so variables respect only the scope of a function's execution context but it does not respect anything to do with for loops or if statements when it comes to that you should use let wherever possible because it respects the scope of those execution contacts or conditional execution contacts to be specific [Music] in the javascript programming world you will hear a lot about the dom or dom or document object model and i want you to think of this like a representative for example you have an advocate such as a lawyer or a solicitor in a court of law and you have the person they're trying to defend the lawyer is not the person themselves however they speak on behalf of the other person there's an advocation well likewise we understand that this does happen in javascript let me just show you something if i go to the console and type in window we have an object this object is like to javascript the advocate it gives us information details apis on this particular window now we are looking at this entire window object here but we understand that this object isn't that window object it's not these buttons here and this button here and this address bar here it's an object so that javascript can understand it it can get details of this particular window it's an advocate it's a way of interacting and communicating with this window object well likewise you also have the dom as well all of these elements you've got html then you've got the header with some information in and then also you're going to have the body as well which is the visual representation you can see here we have the header one and you also have the included myapp.js script so you have all of these things here you have these nodes what are called nodes you can think of nodes like leaves on a tree a node is just a small piece of a larger system so you have the overall tree structure and then you have the little nodes which are the leaves and likewise you can think of the document here as the overall tree and you have lots of nodes lots of little leaves that make up the tree structure now likewise we do have an object that resembles this document here that allows us to access the document change the document so we can change what the user is visually looking at currently we've only been working really in the console and modifying data but what we haven't been doing is actually changing the visual data that is presented to the user now understanding data how to work with it modified is very important that's the first step but then you need to be able to present this data hand it back to the user and in that sense we need to be able to access the document that they're viewing so just as we have a window object which tells us all the information about this window we also have the document object and if you take a look at the window object you can see that document is actually a global symbol available to you so it's attached directly to the window you've got the overall window here and then you've got the document here and so the document object just as you can see when i hover over it you can see it highlights it for me automatically so we've got the overall document it tells me you know the url so where we're currently at you can see there it just gives us information it represents this document where's its location what's the active element in the document such as the body element which is the where we put in nodes we put in html elements that are visual to the user so you've got the document and then also you've got child nodes remember you have the overall tree structure which you when you look at this when you start folding things out what you have is a tree structure and you have nodes inside of there so you've got child nodes to the document and you've got the dot type there on the zero level that goes here that's the zero level and then also you've got html as well so you've got the html element that's the root element so if we go back to console we go into html and again we get details about the html element so for example base uri that tells us the file location you got you know the height of the html element the client width and so forth so you've got all sorts of information about this element it's not the actual visual element that you're looking at but it's an object that represents it that gives us details and actually allows us to modify it and within the html you also have child nodes so you go into the child nodes and there it is you've got the head the text and the body so if you take a look at the elements right here you have the head and you have the body so you can have a look at the head and you can modify stuff in the head for example which we've got the meta and the title so if you're going to console you can go into head for example and you can also take a look again at the information about the head element and inside of there you also have other child nodes so take a look at the child nodes in here you have text meta text and also title as well you have all this different information and i can actually modify the title of the document via html you have the inner html or inner text and there we go javascript essentials and that's showing up there in the browser and that is there javascript essential so it's giving us details about this specific node in my tree structure and that's it that's how i look at it and also you have within the html you've got child nodes and then you've got the head you've also got the body and the body is normally the one that you want to access so you go into the body and again you've got base uri you've got all sorts of information and also you have child notes because we've got the body element so you open that up now we can take a look at the child nodes which is the header one and also the script node so we can take a look at the header one node so go into console and just say child nodes it's an array and there it is we've got a header one and you'll notice when i hover over it this object is is linked to the visual representation of that node so i can hover over it say header one and again within header one i can take a look at changing the computer name i can take a look at the inner text the inner html and so forth and there's tons and tons and tons of information such as events and we'll take a look at events later on but you can see the document object model is where we have a document that's represented by objects and it's modeled upon how you've developed your html file so when you're developing your html file there is an object structure that is automatically generated by javascript and those objects represent those elements you've created so that's what document object model means it's not the actual visual thing that you're looking at but it is an object representation of the document so you can modify the document in javascript using objects and that will reflect back the changes to the actual document and in the next lecture i'm going to show you how to access this document and work with it so instead of saying document dot for example child knows and then i go into this array and then i say right go grab the first element in the array which is the html then i also want to take a look at the child nodes again now it's keeping track of this but this is not convenient this is not a good way to access the dom then i want to go ahead and try to accessing the body now and you'll see that it's printing out the html here and again these are objects you've just noted that these are objects but the console just prints it out in html format just to make it nice and easy for you so you can highlight things and then you need to go into child nodes again and then you need to do this and that this isn't convenient this is not the right way to access the document object model i want to let's say access the document object model via css selectors via their id via their classes and so forth this is so important because the reason why we want to do that is because if i start changing around let's say the nodes so now we have child nodes and then let's say let's say child nodes and i want to access the one on two let's say that's gonna be text let's try three that's script so i'm gonna say one there it is there's the html so you see even now i'm getting a little bit confused as to what elements are on which index is getting a bit confusing now so now i've selected my header one for example but if i go back to brackets and then i change my index.html let's add in a paragraph for example and now i'm going to say hello world well now the paragraph has taken over the javascript essentials id this was at one but now this paragraph could potentially be at the level of one so when you start modifying the html then this could break and that means your script can break because it's not targeting the right element so this isn't a good way of accessing the document object model the document object model is generated automatically we've got a ton of objects but the way we access the document is a lot like how we access it via css we use the css selectors and we target a specific element and then we style it well you can do the same thing in javascript and that's what we're going to do [Music] so we've discovered that trying to select elements by going manually through the document for example getting the child nodes and then taking a look at those child nodes and sort of going through the directory structure of the dom we can sort of access let's say the body element you can also access other elements in the body element but this is not feasible if i start adding elements and i start changing elements in the html page the indexes of these child nodes these chart elements can change i could add another paragraph element and now all the indexes have changed for all of these chart elements so what we want to do is make sure that we don't add any more problems and that our program is robust enough to target the right element so that we can display that information to the user so the way that we do this is you have several methods that come with the document don't forget document is a global variable and the document object has a prototype object attached to it and it also allows for a few methods as well so you have all sorts of properties that tell you about the document you can even attach events onto the document which we'll talk about later but also you have certain methods that you can run that allow you to target for example specific elements within the document object model so we want to try and find these objects that resemble or represent these html elements so at the moment we don't have anything specific we don't have any class names or id names all we have is tag names so let's try and find the tag names so i can say document dot get element and you can see yeah i've get element by id where we don't have any ids class name by name by tag name by tag name and it's also namespace whenever you see ns it means namespaced and you also have a few other selectors as well so we have get element by tag name and then i can simply provide the tag name that i want i want to get all the paragraph elements for example so i'm going to say right get all the paragraph elements and i put it in a string you don't put in the angle brackets you omit those but what you do is you just type in the name and there you go we've got one paragraph element and you'll notice it returned an array now whenever you see one of these methods return an array you know that it can return multiple objects so for example we're getting all the elements with the paragraph tag and we can hover over that you can see when you hover over that object that represents that dom element it also highlights it in the browser for you and again you could have several paragraph elements so you can have one two three and then three four five save that hit refresh and now when i run this again we have three paragraph elements that we're targeting here zero one and two so we have all of those paragraph elements that have been returned and we're targeting each one of those paragraph elements and you can modify those paragraph elements you can change them you can do whatever you like to them so get elements by tag name just allows you to target an element with a specific tag name if i wanted to target this header one for example i would type in header one and there it is hit return on that there you go header one now this is okay but we're going to select every paragraph or every header one in the document sometimes you want to target something specifically just like with css styling you target something by its id or you could target multiple elements by their class name because you've got get elements by tag name and whenever you see elements with a plural you know that it's going to return an array because there could be multiple objects returned however if we wanted to get an element by its id we need to first of all assign an id so i'm going to say id equals hello then you need to refresh the browser then we say document.getelement by id and this isn't a plural it's singular so you know it's just going to return the single object on its own that represents the element with the id of hello so you put in a string you don't put in anything else you just put in the id name that you provided and then hit return and there it is and if you wanted the actual object you'll notice it's actually printed out the html that's just to make it easy for you to read but if you use the dir function and say document dot get element by id and be very very careful about how you do this because again don't forget javascript is case sensitive so the i and the b and the e for example need to be in all caps otherwise you'll get an error and then we need to provide the id we're looking for which is again hello so when you do this it returns the object and the dir function make sure that the object is printed out as an object in the console and so now i can actually see that yes this is an object it's just doing that so that it's nice and easy for us to see and read in the console but in all actuality it is an object that it is returning that represents this piece of html right here which is our little hello paragraph so that's how you get an element by id but there are other cases in which you want to use class names because class names allow you to grab several objects with a specific class name so we can grab this paragraph and this header 1 via the class name of p class so let's go ahead and target p class so i'm going to hit refresh and then again i'm going to say document dot get elements by class name and again we have a plural here elements means that we're going to get an array return because there could be multiple elements with the same class name and even if there's only one element with that class name it will still return an array so please do note whenever you see elements it's guaranteed to return an array and then we need to provide the class name which will be p class and there it is p class and those two there it is you've got the paragraph element and then you've got the header header1 element with the class of p class and there it is they are objects resembling that html element and you can take a look at this object and go through it and see what properties and even methods are available because you also have prototype objects attached so you can get the class list children child nodes all the rest of it there's some fantastic methods that you can go through and you should really take a look at a lot of these because it's going to help you understand the document object model and what's available to you if you're ever unsure about something just sit and read just go through objects and you'll find all of these little keys and properties and methods available to you and you can understand things a lot more when you do this whenever i'm sort of new to a framework i'll just sit and read the code that it outputs and it tells me a lot about that particular framework and that's a top tip for you so that's why we have the paragraph and we have the header one both with the p class so you can get elements by id you can get elements by the class name and also you can get elements by their tag name so that's fine and there are many other things that you could do here so you've got get elements by id class name by their name so you could just give them a name reference by tag name and also tag name ns but you're probably going well that's fantastic lawrence but what about css selectors can i use css selectors to target dom elements and return that object just like i would in css where i target elements so let's go ahead and take a look you can say document dot query selector all you want to go with all because it provides you all the possible selectors and all the support as well query selector all you could just say query selector if you really wanted to and then provide the string and the string is going to be the css selector so if you wanted to select the element with the id of hello well if we know css you type in the hash and you say hello and there is my paragraph element now the query select all by the way will guarantee an array that will be returned it always returns an array even if you're selecting an element with an id so we're saying hello then also you could select an element via its class use the dot syntax and say p class and there it is it's selected both the paragraph and the header one with the class of p class but also you could combine them as well so you have hash hello and also i'd like to target all the elements with the p class as well let's hit return and there you go it's now returned yeah with the id of hello and both the elements with the class of p-class now i'm just going to give you an advanced css selector to finish off so what we can do is we can have the metadata that you can add so i'm going to say data content and we're going to say one two three and then also i'm going to have a header and i'm going to have a span in here right so what i want to do is i want to select this span directly and i also want to target this element here as well so these two elements we are going to target so let's go ahead and refresh the page so everything shows up where it needs to and then what i'm going to do is say document.query selector all and i'm going to provide the css selector string the first thing i want to do is target the paragraph element and i'm going to use the brackets and i want to say target the element with the attribute which is data high from content and not only can i check for the attribute i can also check that the attribute has the value of one two three and again be very very careful here you can see that i'm using single quotes on the outer edge and double quotes in the inner very very important because if this is single can you see what happens that turns into a number and you've got a string surrounding it by the left and the right there are two separate strings now that's not what we want we want this is one whole string so we can see by syntax highlighting that this is all red so it's all a string so i'm targeting the paragraph element with the attribute data content here and it must be equal to one two three as its value then i'd like to select some more elements and i want to select the header one so i can say right target the body element and then i want to target the header one element that's a direct child and i want to target that header one element via p class and then i also want to target the span element again this span element must be a direct child of the header one so the span is a direct child of the header one and the header one is the direct chart of the body and so this is what we're doing here so we've actually got a pretty advanced selector i'm just demonstrating what you can do so i'm just going to hit return and you'll notice it's returned both the paragraph with the data content attribute equal to one two three and also the span element which is here and it's been directly selected from the body straight down to the header one and that header one must have the p class class on it and it must also select the span right there and it returns it like so and if i was to take away that class for example would it still work the answer is no so if i hit return it's only going to give me the paragraph because it's looking at the body then it's looking at a header one with the class of p class that header one no longer has that class and so it's just gonna stop there so that is using the query selector also you can still use css selectors to target dom elements this is a more efficient way of doing it it's easier and the jit compiler itself is looking through the whole document object model and finding it for you this is very important so there is an advanced css selector obviously i know that you don't need to do this you know body.h1p class span but i'm giving you a demonstration of how you can use those advanced css selectors in javascript to target dom elements to pull that dom element out change the object modify that in the browser and away you go [Music] so now that we're introducing javascript and working with the dom we need to consider where our javascript is placed within the overall dom structure so it's important to note that html block loads you can think of all these elements as building blocks and they block load so this element loads then this one then this one then this one it goes one by one by one by one and it starts going through and rendering each element one by one by one by one but there is a significant problem with let's say if i have a large javascript file and i take this large javascript file and i put it in the head now this is perfectly fine you can do this but there's one significant problem if this javascript file is very large then it's actually going to have to wait until this javascript file has finished loading and then it's going to have to carry on rendering the page that means this part here the bit the user sees they can see the paragraph they can see the header one for example is slower for them to view whereas if you take the javascript file and you put it at the bottom of the body it means that they get to see these elements block load quicker but also it does something else it means that our script is ready to start modifying the html because it's block loading so i know all of these blocks of code these elements have loaded and it also makes sure that there is an object in the document object model the dom for those html elements and therefore when the document has loaded when all these elements have finished loading in i can then start modifying those objects searching for those objects whereas if i had the script in the head what i'd have to do is i'd have to tell this script to wait for the page to finish loading and then i can start modifying but i would rather not do that i would rather put it in the best position and i always recommend this now is put your javascript files at the bottom of the body tags so i'm going to go ahead and save this now and then i'm going to take a look at the myapp.js file we now know that the myapp.js file will execute when my header ones and my paragraphs and all the rest of those objects have been created so what i'm going to do is first of all i'm going to say document.getelement by id and i want to get the element with the id of hello this is perfectly fine if i refresh the page nothing happens you can log it out to the console if you wish to see that it is working so i can say console.log and log it out like so and go ahead and save it and there is my paragraph element being targeted now as you know this is just printing it out in fancy print we may just want the object itself so instead of using console.log use console.dir and dir will tell you to print out an interactive list so that you can actually view it for the object that it actually is so if i open this up you'll have the inner html and also the inner text properties as well now at the moment in html looks exactly the same as in a text but i'll show you the difference when we move on to the header one element but for right now if i actually wanted to change the text within the opening and closing paragraph tags for the hello paragraph here if i want to change it i can use either or i could use in html or i could use inner text but as i want to change the text specifically then i'm going to stick with inert text so i'm just going to take a look at going back and taking a look at the my app now we know that console.log has provided us the information that this is returning an object when you run this it returns an object now it's not a new object it's a reference to the object what i mean by that is it's just like a memory pointer it's finding the object it's not returning a new object it's the same object but it's just allowing you to point directly to that object in the document object model it's just a way to refer it it's just providing you in essence a pointer like a memory pointer and when you run this method it will return an object and then you can access the inner html or the inner text if you wanted to like so and you can modify its value let's go ahead and do that now let's say document.getelementbyid.hello and then i can say dot inner text because don't forget this part returns an object and this is accessing that object here we're accessing the inner text and we'll set it to new world so i'm going to go ahead and save that now and let's hit refresh and see what happens you'll notice now it doesn't say hello world anymore like it did before it's saying new world because i've just changed it and i can change it in the browser again so instead of actually just reassigning the entire text don't forget we can also have the plus equals and i'm going to change that to space order so what that's going to do is it's going to look at the existing value of the inner text which is new world and what we're doing is by that plus sign we're adding meaning concatenating these strings together new world we're concatenating them together to make one giant string new world order and we're assigning it back so i'm going to say plus equals and then i'm going to make sure that's a string hit return you'll notice it says new world order i needed to add that space in there but you can see that it concatenated those strings together so you don't have to completely replace the value you can use the existing value and add additional information onto it now on top of that if we go ahead and let's say copy this in here what we are doing is we're doing things actually in a very lethargic way for the jit compiler what i mean by that is we're doing work unnecessarily we have got two document.getelementbyids now when these methods are on you can think of it like somebody looking through a dictionary for a specific word well we're looking through the entire dom structure which is the dictionary for a specific word which is the element and the problem is that we are researching we're going back over ourselves again we've already found this element in memory this object that resembles that element but then we're doing it again and that doesn't make a lot of sense we should only do one search and then start modifying it so we know that really this is returning a reference to the object it's just a memory pointer so what we can do is we can give it a symbol name so we can access it easily so i'm going to say var p hello equals document.getelementbyid hello so now we're searching through our dictionary once finding the word once and then we can start to run potentially or change properties or run methods so for example now i can say p hello and this again will produce the exact same value as you can see so what i'm doing here is i'm establishing a memory pointer this is just a reference to the object in the document object structure it's not returning a new object it's just allowing us to point to that object in memory so it's searching through the document once to get the element by the id of hello and it's returning a memory pointer a reference in memory to where that object resides within our document and then when we refer to p hello we're just referring to that object it's just an easy way to access it access that object and now instead of running it twice we just run the search once and it also means that our script will run quicker now you can also modify the text via in html but why is there two different versions well in a text is just for the text that's presented to the user within the element it includes no html whatsoever so let's go ahead and clarify this if i wanted to let's say add in a html element we would say let's say span and so we're adding in some html here and i want to say hello world so we've got this span element i'm going to save it and hit refresh except it isn't a span element what's happened is it's escaped these special characters meaning it doesn't actually get recognized by the html rendering engine instead what it's doing is it's actually just printing it out as standard text in a text but in their html is a little bit different it will allow us to add in html so let's change this from in a text to inner html and make sure html is in all capitals so i'm going to go ahead and save this now and hit refresh and you'll notice it says new world order hello world and if i take a look at the elements i can see the paragraph new world order and then i can see the span hello world so instead of actually escaping the angle brackets and so forth and special characters so html wouldn't render it in html doesn't do that in html will allow you to place html content or create html content within the actual element itself so within html is a little bit different to in a text in the fact that you can actually add in more html also if you take a look at this if i say dir and i point to this object p hello if i take a look at my paragraph element with the id of hello you'll notice that we have with the inner html i can see the html whereas in a text i cannot see the html there's no span tags there it just gives me the text that is presented visibly to the user so that's why we have the differences in a text and in html allow you to do two different things now also you may have noticed that if we scroll down and again just read through these things because there's lots and lots of things here you have something called outer html and outer text so the outer text again is just presenting the text that's visible to the user but outer html actually allows us to take a look at the element itself the paragraph element here it lets us look at the outer html not just the inner html so any html inside of it but out html lets us look at everything outside as well the elements itself and what's inside of it as well so now i can actually change this from being a paragraph let's take a look at this i'm going to take a look at myapp.js and i'm going to change this so here is my outer html it's a paragraph element and what i'm going to do is just copy that out real quick and i'm going to say p hello dot outer html and i'm going to set it equal to a new out html string and be very very careful because if you use double quotes we've got an id attribute that uses the double quotes and it escapes out of the string so this executes this javascript when working without html always go with those single quotes and even within html as well so now what i want to do is paste this in and now my id attribute with a double quotes will not escape out of the single quotes and i need to just make sure this is valid and i'm going to change it from a paragraph to let's say a header 2 element so i'm going to save this now so it's going to replace the outer html with header 2 tags so i'm gonna save that and i'm going to hit refresh and we've got the new world order hello world in the header two so here's header two and there also is my span so that is how to modify the outer html you also have outer text as well if you wanted to and that would actually if we say outer text again notice that we are using html here but this syntax will actually be escaped meaning it won't be recognized by the html renderer so if i go ahead and save this now and hit refresh you'll notice that it turned it into simple plain text and it's not even an element anymore it's just a standard text within a html file which you can do but obviously that's not recommended so be very careful when using outer text because if you use outer text then you're going to strip away the tags that contain the text and it's actually going to turn it into just raw text in the html so i'm going to change that back to out html and i'm going to go ahead and hit refresh so there we go that is how you modify the contents of a particular element now last but not least what would you do for example if i wanted to select this span here well i could do document dot query selector all and i'm going to use a css selector string to target this so i'm going to say right target the header one element that has a span element within it so there is my memory pointer now you know that query selector all has the ability has the option of returning multiple elements so query selector all even though it may only be able to target one element it's still going to return an array and i'm again going to create a nice little pointer to it so i'm going to say span h1 and i'm going to set that equal to the memory pointer that's returned document.queryselector all so i'm going to go ahead and save that now and we'll hit refresh and if you go to the console you can say right dir and we want to log out span h1 and when i hit return it returns an array now be very very careful here because the array itself doesn't have an in html or out html well this object here the object at the index of zero is the span element object so if you were to say document.queryselectorall dot in a text or in a html it would error because you're pointing this returns to this array so if i was to say square brackets 0 now it's pointing to the zero element so document.selectoral is like opening up that dictionary we're looking for a specific word a specific element this span element and it's gonna return an array like so and then we're accessing that array and looking at the element at the zero index which is the span and then you can start to modify so i can say span header one and then of course i can say dot inner html and we'll just set that equal to new text and let's go ahead and save that now and then hit refresh and you'll see new text here because we targeted this span within the header one if you didn't do that then basically you won't have anything happen what you're actually doing is creating a new property on the array which is bad we don't want that so you need to say span header one zero then you're saying in html like so you can either put it here or here hit refresh and there we go new text here so be very very careful when working with for example get elements by class name get elements by tag name elements or query selector all always return an array and you need to make sure that you're targeting the actual dom object itself rather than the array of the returned references the return memory pointers and again this is so important when i say document.getelements by tag name and i get all the paragraph elements for example you are in essence getting memory pointers and these memory pointers are just a reference to the objects in the document object model they're not new objects they are the same objects it's just pointing to it's just referencing those objects in your overall document object model so keep going through it modify play around and experiment with the query selector all with the get them and buy id get element by tag name get them by class names and start modifying these elements and see what you can do [Music] okay so the goal of this lecture is to be able to style this header one element now currently at the moment it's only got the default styles applied to it i would like to add maybe some style to it by changing the font face maybe adding a background color and so forth but how do we actually do this via javascript we know how to do it via css but in a way javascript also has the same sort of syntax as css in css if we add in the style tags for example you target it via css selector which we can do you can say right target the header one element for example or you could give this an id of style and we can target it like so and then also you have the braces and this defines an object even in css this is an object because you have css properties and css values they're objects you can have the background color this could be something like blue or you could go one of the default colors or you could provide your own custom color you can change the font color as well if you really wish to maybe white or something like that and then also you have a whole host of other things you can do but you can see that the syntax itself does look like an object it does have properties and it does also have values as well a key and a value pair so let's go ahead and do this in javascript so i want to go to myapp.js and then i'm going to say document.getelementbyid and we gave it the id of style so let's go ahead and grab that element so now that we have the object we also need to refer to it because i don't want to have to keep re-searching through the document again it's a very lethargic task we don't want to keep doing that so i'm going to create a variable called el short for element and then what i'm going to do is i'm going to target the element and then i'm going to take a look at the style property which is actually an object i can take a look at the el there's my header 1 and if i type in dir and say look show me the actual object here in the console if i scroll down you'll notice that eventually we will have the style object and in the style object you'll be able to see you have all of these properties available to you so that you can start to modify all of the available css properties and you can go through all these css properties you can find out all sorts of potentially new properties that have come out object.fit orphans all sorts of properties that you can look at and modify under css they're all listed here and again be very careful here because in css we didn't have to put the quotation marks but in javascript you do because it is a string we're not looking for a variable called blue or a symbol called blue we're looking for the string blue and that will be assigned to the background color and then maybe i want to change the color of the font so i'm going to say el.style.color access the color property and assign the color white again making sure it's a string if it's a number it's a number and also let's say that i want to set the width just to demonstrate what we need to do so el.style.width and you're probably going well what could i do a number here well yes you can put in a number that may treat it as a pixel value so let's go ahead and save that now and hit refresh and you'll notice that it didn't actually change it so instead of saying 200 you need to actually provide the measurement that makes it a string so that's very important you need to make sure that you append the actual measurement so that's pixels ems points or whatever else you want you know you got millimeters centimeters all the rest of it so i'm going to say 200 pixels width and that way it will change it to 200 pixels width so be very careful again when assigning values here when it comes to width heights make sure you include the measurement and make sure that it is in fact a string and likewise with your colors here also you have rgba and all the rest of it all the other color modes that you have again all need to go as strings and that's it so that is actually how you style an element you target the element first of all you get that memory pointer then we can target the elements style property or object that object contains many properties which resemble css properties and then we assign values as you would assign values with css properties that's how we style an element and what did this actually do whenever you modify the style you're actually modifying the style attribute the javascript works with the style attribute you can see background blue color white width 200 pixels this all came from the modifications that i did in javascript and so that is where we get the modifications of styles now this is one way to style an element but i'm just going to comment all of this out so it will in effect nullify the code it's just not going to be interpreted and you can see that we go back to the average styling now typing el style is going to take quite a while so what we can do is instead of using that we can say el.style dot style text dot css text and it requires a text string and you can just provide a simple text string that you can modify the styles so we can say background is going to be blue color and the width so i've just provided a simple string that will style the element so hit refresh and there it is i can just do it all in one go with this css text and let's say we have some css already applied well then what you could do is you could take a look at using plus equals so now this string here is going to be added on to this string here and then we're going to assign it back to the css text so we're not going to erase any styles if you just use equals this string will replace this string but plus equals they will be concatenated together and assigned so in this case let's just set the height to be 200 pixels as well so i'm going to do that and we're going to save this now and hit refresh and it will also add the height if i get rid of the plus equals you'll notice it just simply changes the string it gets rid of all that and it only applies the height you can see if i hover over it it has the height of 200 pixels but it hasn't got the coloring in the style so let's add that coloring and style in there let's change that to 100 pixels height and there we are we have our nice little styling and that's both ways that you can style your element you can do it individually or you could do it this way and it's better off to do it with css text because if you have multiple styles what happens is the browser renders so every time you let's say change a style property and change to white it re-renders the element so we're triggering three re-renders here one two and three so it's saying oh change property render change the property render change the property render that makes it slow at rendering and it can make your page not as quick i know that it's not a big deal here but trust me later on down the line with proper web pages it makes a big difference so the idea is use css text you do it all in one go and then it renders when you apply that css text all in one block and you can see that basically css text is just applying to the style attribute notice the style attribute we didn't have that here there's no style attribute on this header one but now there is the style attribute and that's what javascript uses it uses the style attribute and it applies styles to our element and that is how you style elements in javascript now finally there may be something else that you may want to do so let's go ahead and save this now and hit refresh and then what i'd like to do is apply some styles and these styles are going to be computed styles so i'm going to target the element with the id of style and then i'm going to apply a background color of blue the font color of white and also i'd like to apply the width of 100 pixels and a height of 100 pixels so now that we've gone ahead and done that i'm going to save this and hit refresh and there it is i have these pre-defined styles here and what i'd like to do in javascript is be able to access those predefined or computed styles how do i do this to do this we have the get computed style function and what this function requires is the object that is the advocate for our element which we know we are targeting we are referencing this object via the el symbol so the el symbol is like a name tag for a person it's just pointing to that object in the document structure it grabs that object and then it gets the computed styles on that particular object or element and just before i refresh you can see that when you select something you also have this little window right here so you can select the element which i've selected it there header one and you can see here the computed styles you can take a look at all of the default options now don't forget the browser does give some default styling to a standard set of elements for example div elements are displayed as block level elements and header ones can be displayed as inline blocks or again block level elements it's all defaulted and you can see that by default for example i haven't set the display but it is a block level element this is set by default by the browser's preferences and if i take a look at my index html i didn't set the display property here so you have what's called the computed properties the computer properties are the css properties that i've applied to it and also the default properties as well now at the moment if i just refresh nothing will happen because it is running and it is working but you need to log it out to the console so it will grab this element it will get the computed styles it will return an object with all the computed styles and it will log it out to the console was window and here it is css style decoration we have the object in here and if you click on it you'll see all of these css properties and it also shows you the defaults as well such as margin and the position and all the rest of it so you have some default computed values applied automatically to this particular element now the computer properties are computed properties they are not the actual style properties that you're applying via javascript javascript applies styles for example via let's just add one style in here the background color is going to be yellow so i'm setting the background color in css that's not computed that is actually via the style attribute whenever you try to modify styles in javascript it's done via the style attribute it's not the computer properties the computer properties come from your css files and also from the browser's defaults but when you want to modify the styles through javascript you'll find it uses the style attribute now there's one more important thing sometimes people and i have also assumed this that i wanted to override the style attribute so we have the background blue here in the computer but here we have it set via javascript can we override the javascript because at the moment this style attribute is taking precedence over my computer's styles the answer is yes you can what you do is you use the exclamation mark important and when you use exclamation mark important it makes this value more important and thus it will actually now even though we have the background yellow via the style attribute this background property is more important now be very careful because if you do this on the style attribute and you say right i want that value to be even more important then there's no way you can override this you literally once you have background yellow this is really really important you can't override it at that point but if you don't have that then you can just use important on your computed css properties and it will override [Music] events are simply when something happens in our application and we want to run a set of instructions so what could this be well for example when the user clicks a mouse button or when the user presses a key or when the user touches their screen these are all events that can trigger subroutines a set of instructions or functions that run in our program we need this because we now have graphical user interfaces a lot like with your favorite graphics editor you have the ability to have the layers panel and you want to add a new layer well that button that you're clicking on has an event listener it's listening out for an event particularly a mouse event where you click on that particular button and then it runs a subroutine to add the layer to your current document this is what we're talking about with events and with graphical user interfaces with buttons and input text fields select drop downs we need to be able to listen out for events and then when that event occurs we have a subroutine a set of instructions that we want to run and we want to be able to define a subroutine to handle the action so let's take a look at the typical type of element that you would want to add events to in html which is form fields the user interacts with form fields and your application will respond when they change the value and what you can do with form fields is provide a name to either a set of form fields or a form field itself and javascript allows us fire itself to use the get elements by name and that allows us to select elements or form fields via the name attribute and in here we can provide the name cars and you'll notice it returns an array because we have elements which means plural that means it will return an array and on the zero index we have the object that resembles the select drop down with the name of cars so if you take a look at a standard dom object you'll find that if you scroll down you have all of these on symbol names on abort on aux click and you have all sorts of things on blur and you have the standard on click and you also have on dbl click that stands for double click so you have all of these events and all of these event names begin with the word on so these are all the possible events that you can attach to this one dom element and i just want to choose one of these now typically you need to look at what this element would typically entail well i can use my mouse on this and i can also actually use the keyboard i can tab onto it and i can also use the down arrow and also hit return to select a value so you can actually have mouse events and keyboard events on this particular element so let's take a look at a real simple one such as on click i have my on click event now firstly i want to show you how to do this straight in html so i'm going to say on click right here in html on this select element and then i'm going to set it equal now whatever is in between these quotation marks will be executed as javascript so i can say console.log and then i'll say you clicked me now one very important thing we are using double quotes if you use double quotes here you could end up escaping out of these quotation marks and you can see this has just messed everything up so be very very careful use single quotes in double quotes and vice versa don't use the same quote types so well now that we've gone ahead and done this let's hit refresh and let's click on this select and you'll notice it run console.log you click me so you can add inline events why is this a bad idea and why did developers shun it the reason why is because you want your application logic ideally in a separate file not in the same file as your markup and presentational code so instead of doing it this way i'm going to go to the my app and i'm going to create a select symbol and then i'm going to say search the document i want to search by name so get all the elements by the name of cars and don't forget this returns an array so we want to access the element on the zero index of the array and then what i want to do is i want to target that object and when you do this if i just go ahead and save this and just quickly hit refresh i can take a look at the select dom object and in here you have on click so i can just target this symbol name on click and you can see we do have a function and in this function we're actually just doing the console.log you can see it here that's what this is doing here so if i do this select dot on click equals what's going to happen is this assignment operator is going to take whatever is in on click right here this function that was provided by the html file and it's actually going to overwrite it with this function here so this means that i can only have one subroutine for the click event on this object and i'll show you how you can have multiple subroutines for this object with the click event in just a second now what i'd also like to show you is that all callback functions this is what they're specifically called we call them callback functions and the reason why we do is because it identifies the function as a callback it identifies it as a subroutine that's associated with an event so that's the special name for them and you'll notice that we have an event parameter now you don't have to provide this event parameter it's actually optional you don't have to provide it at all but however i do and the reason why is because it populates meaning it assigns to this parameter this symbol name an event object and that event object gives us details and information about the event that triggered this callback function let's go ahead and take a look at this when we log it out to the console so i'm going to say console.log and then i'm going to log out the event object let's take a look at what javascript actually did here so if i take a look at this on click symbol if i keep going down on click here we have my function that i've assigned here it has now deleted the function that it generated from html so that's now been overwritten we can only have one inline callback function second of all we have this function and it's automatically being given an object because it's a callback function it's associated with an event that event data will be logged out to the console when this event triggers so if i click it triggers the event it executes this execution context and it logs out whatever event is pointing to some people like just saying e or evt which is short for event it doesn't matter you just need to give it a name so that you can reference the object and in this particular object it gives you all sorts of information now depending on whether it's a mouse event or a keyboard event or a touch event you will get different information in this event object but javascript does this for you automatically and it's actually kind of nice it tells us information about for example let's say if it's a touch or click event it tells me where they've touched and clicked on the page relative to the element relative to the screen and so forth and it tells me all this information and also you have the ability to have a look at the path so you can see it's gone from the select and then it bubbles up this is what bubbles means it means it the event travels upwards bubbles true and this is where you get this path from you got the select and then it bubbles up to the body and then it bubbles up to the html and then it bubbles up to the document you know when you blow a bubble what happens is your bubble floats upwards well that's what's happening here in essence this event is flowing upwards it's going from the select and bubbles up and bubbles up and bubbles up to the window object and that's what's happening and likewise i can also see the source element the element that actually triggered the event itself and as you can see source element is equal to that select dom element so without further ado that is the inline events and all callback events pass the event object to the first parameter and that will give you information and details about the event itself now here we're using inline callbacks which i can only have one i can either have this on click or i could have this on clicking html but i only have one callback function being executed i would actually like multiple click events so what you can do is you can target your select drop down and use the add event listener this is not an inline event you won't be able to see this function in the object itself it's going to be defined by the jit compiler now one benefit to this is again we can have multiple events so i can have another click event they're probably going to mean lawrence this is not on click here it's just click well when we have our particular select drop down object which i can take a look at the source element here you take a look at the source element and you'll take a look at all of the ons you've got on before copy on click on close and so forth now this is just namespace so all these methods in effect are grouped in a namespace of on but we don't need this anymore because we're adding the event listener so if you want to say for example on click just get rid of on or if it's on drag again just get rid of the on there and just type in the event name itself so now let's go ahead and add in a callback function and this is going to log out something different so i'm going to say console.log and then log out clicked by addeventlistener and also don't forget you are past the event object just like inline gets the event object so does this all callback functions functions that will execute upon a particular user interaction or change within the document these callback functions will always receive an event object that gives you details about that information so i could also log out that object as well if i really wanted to but it again i just want to log this out to the console so hit refresh and when i click you'll notice we get the event object from the inline on click function and then also we have this callback function which logs clicked by add event listener and you'll see here it says clickbait event listener and you can add in multiple callbacks and just keep going with this so this one will be number two hit refresh now when i click the inline then you also have this event and also this event here which is how we do things now if you want to remove an event listener you would target the particular element in question and then you would say remove event listener and then type in the event name that you want to remove so i want to remove something from the click event and then you need to provide the symbol name that references the function the subroutine the callback function that you want to remove unfortunately these functions are anonymous so be very careful when you add event listeners if you are not going to remove that callback function that callback function doesn't need a name but currently there's no way for us to reference this in memory we always need symbol names memory pointers to reference something in memory well in this case it's anonymous i can't do it because there's no symbol name so in this case what i need to do is just go ahead and delete that because it's just adding more complication to this i need to define the function with a name so i'm going to say click callback and then i'm going to use that symbol name to reference this subroutine and i'm going to add it like so i'm going to add it by its reference name here then what i'm going to do is i'm going to remove that event listener so let's first of all see if this works so i'm gonna hit refresh i click you'll see it says clicked by add event listener so we have in fact attached this subroutine to the click event on this select element and then what i want to do is target that select element remove event listener from that element it's under the click event and then we need to provide the symbol name the symbol name is the memory pointer to those sets of instructions which is going to be click callback so we're adding it and then we're removing it let's see if that works and yes it did it added it and then it removed it and by the time i've clicked it it's already been removed that's how you add and remove and use the add event listener method so to add inline events you must target the element itself and then you have to choose the symbol name that is associated with the event that you'd like on click on drag you can take a look at those events and see which events match up to the element that you're using and then you can add in a callback function or callback functions receive the event object automatically this symbol name is automatically referencing an event object that's created by the jit compiler and then also you can add event listeners via the jit compiler it's managed in the jit compiler and remove event listeners and that means that you can add multiple callback functions to a single event and you can also have inline events right here in the dom [Music] as of right now we currently have no visible dom elements in our current document object model now what i could do is let's say add in a div element and style it with css but what i want to do is add this development in via javascript i want it to be dynamically inserted into the page so how do we do this well i'm going to save this now and i'm going to take a look at myapp.js file i'm going to create a variable called element and it's going to be equal to document.createelement and you need to tell it what type of elements you want to create so in this case it could be a div element it could be a video element it could be an audio element it could be any type of element that you can create within html so i'm going to create the div element and then what i'm going to do is i now need to attach it because if i save this now and hit refresh in the browser and i take a look at my console if i take a look at my element you'll notice it does print out the div syntax and if you wanted to take a look at the object representation of it in javascript this object resembles this element in the html so at the moment this element is not placed inside of the document object model we have just created this object but it's not been placed inside of the document but as of right now we can treat it like a regular dom object for example i can target the object that's been created and i can take a look at its style i can modify its css styles via css text and i can give it a few different things so we've got the width as for example 200 pixels then you've got the height which is going to be 200 pixels and then also you can have the background color and let's set that to blue then also we need to define where we want to add in then also you can define other things such as on click and then we're going to run a function and we'll get an alert dialog box that opens up and we'll say hello and once we've done this we then need to place it within the document so we need to decide where we're going to place it well i want to place it within the body i want to append it down here to the body so that we can actually see it being rendered in the browser so what i want to do is i want to take a look at the my.js file and then i want to take a look at the document.body this object right here the body object targets this body element here and we can append the child to it so i can say dot append child so we use the append chart method and then you need to pass in what child object that you want to append to the body so in this case it's going to be element which is this dom object here and i'm going to save that and hit refresh in here you have the div element that we created dynamically with the css text and also we have an on click event and when we click on it we get an alert dialog box with the message and if you take a look at this all we did was we took it and we appended it to the document so that we can actually see it it's actually placed within the dom structure you have the document object which resembles the entire document and then you have the window which represents the entire window that we currently reside in and here it is so it is now an object within our document object model and again you can take a look at the actual object itself so all we did was we took an object and we placed it inside of an object and you'll find it in there you can go down to dot body for example and take a look at it and it will be actually dynamically inserted into the document now let's very quickly just create a few elements just so that we can take a look at this so we can have let's say a div element and we're going to add some style to this now let's also change this element here as well to have a height of 20 pixels because i kind of want this all to fit in this little window here so i'm going to take a look at the index again and i also going to add a id onto it so we've got the id and that's going to be yellow and then let's also have a green development as well and what i'd like to do is just pop this in here we have the green element and that's going to have a background color of green so i'm going to go ahead and save this now and hit refresh so we've got our three div elements we've got the yellow one the green one which i have inserted manually and then we also have our appended one and you'll notice with the appended one it comes actually below the script tags so we have the script tags here and then appending is right at the bottom and what a pen child does is as the name suggests append child is it takes this object and it appends it as a child element so it takes the div element that we've created let's say out here and then it appends it into the body but what happens when you want to place something specifically within the document for example insert before and insert after so maybe i don't want to append it as a child element maybe what i want to do is actually place it specifically in between let's say these two div elements how do i actually go about accomplishing this well let's take a look at first of all targeting the id of the element so what i want to do is i want to take a look at just commenting this out that's a pending so what i want to do now is i want to take a look at what element i want to target i'd like to actually target this yellow element because when we do a pen child it appends the div right at the bottom let's say i want the div to be right at the top how do i do that well i need to target the parent node or element you can think of all these elements here as nodes nodes are just symbolic it just means something small that makes up a larger structure like leaves on a tree each leaf is a node and those nodes are attached to the tree and it's all a big node structure it's got structure to it and likewise we've got this here we've got the body element then we've got the divs and so forth so whenever you hear node it's just like symbolic of a smaller system like you can have lots of little computers that make up a larger server and a big server farm and each one of those computers is a node and then you have the overall structure so what we have is these nodes here for these dom elements and what i'd like to do is target this dom element and then insert before so what i want to do now is i want to take a look at the target so i'm going to say var target equals and then i want to target the object in the document so i'm going to say document.getelementbyid and we want to get the element of yellow which i'm targeting this development here then what we need to do is target the parent node i need to target this node and then i need to say where i want to place my div element in this node so let's take a look at that i'm going to say document.body so i'm targeting the parent node then i'm going to say insert before before and then you need to first of all provide the element that you want to insert which we know that we have created this object and we can point to it via its symbol name called element and then once i've done that i then need to say which element i want to insert my newly created element before so i'm going to say target so i'm going to target that yellow div and i'm going to insert my element before it so it's going to come right at the top of the body let's save this now and hit refresh and sure enough it does we targeted the parent node or element then we targeted the yellow div element and then what we said is take the blue development so by using a pen child and insert before you are able to place this dynamically created element anywhere within your document [Music] so here it is the final project where we start to combine multiple pieces of information and what i'd like to do now is i'd like to take a look at what we want to do in this project well first of all we have a few select drop downs we have these three select drop downs background width and height and here they are background has a selection of background colors then you can set the width and then also you can set the height but also what we have here is a div element and this development is currently visible with the standard width of 300 pixels and a height of 300 pixels in the background color of blue but we want to modify it so when we hit the set button this button right here we want to grab all of the input values that the user has provided for example set the height to 300 pixels but the width to 100 pixels and the background color to green when we hit set i want to modify this div element so that we set the background color we set the width and we set the height of this div hence the set button all of these have ids so we have the select drop down with the idea background width and height that's the css property name that we want to modify and then also we have the values to set that css property and then also you have that set button which when they click on it i want to set those values those stylings on my modify div so that's what we're going to do here now i want to take a look at the myapp.js file and i want to actually start programming this up so when i click the set button i want it to run a function so i'm going to create a function called set and we are going to provide some instructions uh but for right now i just want to create an alert dialog box that says click so once this has happened what i'd like to do is simply create an event listener and i want to attach it to that element so we're going to target the button with the id of set so i'm going to say document dot get element by id so we're nice and easy and we want to target the elements with the id of set and then i want to add an event listener and the event listener is going to be click so this isn't an inline event it is actually going to be an event listener managed by the dom so i can say document dot get them and buy id set add event listener when they click on it we're going to run the set subroutine so that is what we currently have here but what i'd like to do now is target all of my select drop downs and i'm going to add the name attribute so i can do this easily and call it css property so now i can target all of my select drop downs via the name attribute and how do i do that well first of all we need to create a symbol so we can reference the array that's returned so i'm going to say create the symbol name elements i'm going to say document.getelements and again if we have the s in here plural we're going to get an array by name get elements by name and what we want to do is we want to type in the name that want to get so that's css property get all the elements by the name of css property and then let's just log that out to the console so that we can see this so i'm going to say elements so i'm using that symbol name to find out the returned array or target the returned array and i'm going to hit refresh and hit the button so you'll notice now it went out it fetched all the elements all my select drop-downs and we logged that out to the console here it is logged out to the console we have the length of three zero one two and there's three elements there so that's why the length of three is there zero is the background then one is the width and then finally we have the height so we've selected all of our drop-downs lovely now we need is a for loop because what i want to iterate meaning go one by one by one each one go through each one and grab its value so i'm going to say for loop then i'm going to create another symbol name for the index and i'm going to use let because it respects the scope of the conditional and that is equal to zero then what we want to do is we want to keep this for loop live whilst index is less than the length of the array so i'm going to say index is less than and then we target the elements array this array here and we take a look at the length property like so so whilst index is less than the length value here then we're going to keep iterating through and of course we need the iteration part which is adding one so index plus plus so we add one every time we execute this execution context so now what i want to do is say console.log and then let's take a look at the index so i'm going to go ahead and save that hit set so you can see what happens is index starts at zero so we start at zero that's the first element in the array then we go to one then we go to two and that's it it stops after that because when index hits two it goes to three on the next run and that means index is three and element's length is also three so three is not less than three so that's a false statement it doesn't carry on after that point so that's perfect that's exactly what we want and so now we have the index what do we want to do to grab the elements out of the array well i'm going to let you think about that but again the way we do it is we target the array first of all the array contains the data right here this symbol name it has the array pointer and we need to look inside of that array and grab out the elements on each index and don't forget we have the computed member access because we need to actually use a symbol name as well we're going to use this index here and the index is going to be 0 1 or 2. that's what we have here with the index so now when i hit refresh it's going to when i hit set grab all the elements create the for loop loop through each index and there you go you got the three each one one is the background two and then three or zero one two perfect that's what we wanted but we want the value ideally so what do we do to do that well we say dot value all input fields or form fields like text input text area you've got select drop downs you've got multiple selects you've got radio buttons check boxes ranges all of those type of elements that can go in a form element have the value property and the value property contains its value as you can see here with these options you've got the value attribute here that provides the value to the value property in the object that resembles those html elements so if i hit refresh now and hit set we go through and you can see we've got green 100 pixels 100 pixels green 100 pixels and it's there twice don't forget so it has logged out each value if i change the value let's say green 100 and 300 set you can see it says green 100 300 it's only because the console doesn't like printing out more than it needs to so there we go it is now grabbing the values but our values are just the values we also need the css property name so let's do another console.log and try to get the css property name and as you know the id defines the css property name so let's go ahead and get that attributes value so for example we take a look at each select drop-down again that's what we need to do and what we need to do is say get attribute and we want to get the id attribute like so and hit refresh and hit set then you've got background green that's from the first iteration then we have width and also the value 100 pixels that's on the second iteration then you've also got height and the value of that select drop down on the third iteration zero one two perfect we've got the css property name so i'm going to say let again because it respects the scope css property equals grab that element and then get its id then also i'm going to create the second variable called css value equals and we grab the elements value like so and again we're just going to tidy up this code make sure it's accurate correct and you can even log this out to make sure that it's working so console.log we have the css property and we also have the css value and you can log that out hit set there you go background green width 100 pixels height perfect we've now logged that out to the console everything is working fine we're iterating over each one we're getting the value and we're also getting the property name now it's time to take a look at this div element here this div element which is with the idea modify is in fact going to be modify we want to change its properties so i'm going to say right take a look at myapp.js and we want to say document.getelementbyid and it has the id of modify so we're targeting this development and let's go ahead and create a symbol name so we can reference it later let div and there is the div element and what we want to do is take a look at the div element and what do we want to access we want to access the style object and then we need the css property but don't forget the css property is a variable that's how we're targeting the property name because we're getting the attribute and it's returning that value so that'll either be background width or height it's going to return that string here so i'm going to copy that and what do we need to use can we use this member access or this member access well it's this member access the computed member access because it needs to go and find this symbol name in memory and pull out the value and then once we have this css property we can assign this css value which is here the css value will be you know for example the drop down for this one will be green yellow red and so forth so that's all we're doing let's go ahead and save this now and hit refresh and i'll go through this code so that we fully understand it hit set and now you'll notice it's changed this div element to a background color of green and the width and the height 100 pixels i can go ahead and start changing it again and hit set and you'll get a different style so what have we done here first of all we've targeted the button then we've added an event listener called click when they click on it it runs the set subroutine then we're creating a variable that stores the array it stores the array of all of these select drop downs we're getting all the elements by the name of css property all of these three select drop downs then what we're doing is we're iterating through that array to target each individual select drop down we can't target all of them in one go you have to select each individual select drop down for each individual css property and value we want to modify then we go and take a look at each element in the array and we get its id attribute and that is the name of the css property we modify then also we have the css value which again we target each select drop down and then we pull out its value then we grab the div element and then once we've targeted our modified development we target the style object the style object associated with the development and then we can start to modify the css property now this is either going to be let's say background this will return the string background and we can access that particular property like so but we have to use the computer member access because we are in using a symbol name and there is some computation involved in that before we actually get the value out then we set it equal to the value that we have here that will for example be for the background it'll be green yellow or red we grab that value we assign it and then you do the same thing for the others you have height and then you have different values for the height and the width and so forth and everything is fine and it works perfectly and the nice thing about this is you can start to play around with html so you don't have to have background necessarily you could have border and you can set the value to 2 pixels green or 2 pixels yellow something like that and you know you could have different styles applied to this just by changing the markup code so your code here is dynamic now one final thing is when you develop programs you should always at the beginning look at and go through with the fine tooth tooth comb any wasted processes so for example do we really need to every time we click this button target all of the select drop-downs that's just like me opening up a dictionary finding all the words that i need or the elements that i need and then redoing it every time i click the button no i don't i only need to do that once so you should actually just do it once instead of every time i click the button likewise do i need to for example target the div element every for loop because don't forget this is again looking at the entire document object model looking through those objects and trying to find the element with the id of modify not a smart idea so we don't really want to keep on having to search through things like that so i'm just going to go ahead and provide all that information before we actually run the subroutine so let's go ahead and save it and then hit refresh and then set it's now a lot quicker because we're basically preparing stuff and whenever you come to programming prepare stuff before and that's why chefs can cook so much in a family meal takes a lot longer because when you're doing the family meal you're preparing stuff there and then but chefs they go in the morning and they prepare all their ingredients they prepare everything and that makes it much quicker when they're cooking and you can think of the subroutine as to cook and this stuff as your ingredients your recipe list you're getting everything ready so that you can use this data later on and you don't have to keep on searching through searching through or prep data even though it's insanely fast it's still going to be faster if you write your code properly and that's it hi guys i hope you're really enjoying the avilex content and i always want to go above and beyond that's why i'm creating the platform avilex academy abilex academy will allow us to grow and collaborate courses together rather than me creating it we can do it together we can have a community where we can go if we have troubles and problems and i'm also offering completely free when you sign up to cheat sheets extra information extra blog information extra tutorials podcasts and other things that will be available through the platform so sign up today with avilex academy [Music] hi guys i i'm so impressed at the fact that you've come through this now if you've cheated a little bit and maybe you skipped a little bit or maybe you're just taking this as a refresher from taking the course you know what thank you so much and thank you for going all the way to the end and even seeing my big ugly mug at the end of it because it's fantastic you know you really have put out or you've invested your time in this product and i hope that you will continue to invest your time with avalex and invest your love in our community in the vibrance that we can bring we've got a discord channel we can chat together we can build courses together we can have fun together and it'll be me building a lot of these things don't worry but i want to know from you i want to get to know you on a personal basis as well as just building things that are more valuable to you and who you are i can also do assessments as well sometimes people ask for stuff but in reality they don't need that stuff what they need is potentially me to look at what they want to achieve and then i can come up with the content that i think is mostly relevant to the community and will engage us all and bring us all up right software development is not one of those industries where we have mom and pop recipes and as soon as you get rid of mom and pop recipes it's valueless no the development community is all about just like sharing right okay if you can share and continue sharing over all of these things this is evergreen right this is evergreen stuff it's never going to end you know people say oh well what there's more programmers out there so what there's more websites out there there's more websites now than we know what to do with in fact i know for a fact that tomorrow if i wanted to drop this and go into a career i've got so many companies i can just phone up and say can i get a job the answer will be yeah of course and they will hire me right then and there just just my prior employers as well as if i want to go get a new job i can i know i can do it i've got the full confidence that i know i can do it so that's where i want you to be in your career it's kind of like if you don't suit me i can go anywhere i want to you can go remote you can go around the world this is really the only type of job that is fully remote that's pretty good there's other jobs like marketing things like that but programmers we can be fully remote why do we need to drive in yeah i'm trying to sell a lifestyle here that's greater if you're making 50 60 000 pounds a year right you want to be able to drive on those sunny beaches and you can still work at the same time you can holiday and work at the same time you can travel you can experience the world you don't have to be stuck in a 2x4 tiny little box office and we need to take these employees and say no i want to live my life but i want to live it on my terms and live it all around the world and i think that that is the beauty of this industry you just started with the apple extreme but if you've loved the content if you've really adored what we've done here i'd love you to hit that subscribe button go ahead and do it there's nothing wrong with it this content will be evergreen i promise you that i'm gonna give you things that you need to develop and i'm gonna give you stuff that i wish even at the level i am now i wish i had when i was 20 and when i was you know even 15 years old i was learning this when i was a 12 13 year old you know i was learning action script back then i wanted this knowledge this this type of stuff will save you hours hours of over research this thing will save you years it'll save you years because i knew action script then we transitioned to javascript and then no one really explained javascript and then it was really boring so it never kept my attention then i had to learn through trial and error process and you know we all started back then with jquery and jquery made things fun again right jquery was really fun and javascript was just never fun to me but now i know the fundamentals of javascript and then you can move on to more advanced things like ujs and react.js right these guys make it even more fun to create applications you can create very large applications in an extremely short amount of time so if you want to be there too join me on avilex academy join me and support this channel don't forget there is a subscriber there is a ding dong bell and i'm gonna thank you so much thank you for being here

Channel: Programming With Avelx

Views: 7,334

Keywords: Computer Programming, Avelx, javascript tutorial for beginners, javascript crash course, javascript tutorial, learn javascript for beginners, javascript course, javascript for beginners, free javascript course, best javascript course, best javascript course 2021, best javascript course on udemy, best javascript course for free, free java course for beginners, best javascript tutorial for beginners, full java course, full javascript course, full java tutorial, best java course

Id: gYZhIVCPlFY

Length: 397min 45sec (23865 seconds)

Published: Sun May 30 2021