JavaScript Tutorial For Beginners [Course] | Part 1

hey guys welcome back to the another video and in this video we are going to talk about javascript this is going to be a four part javascript crash course so this is going to be a long and an exciting journey we will cover a lot of javascript syntax and fundamentals so if you are a beginner and looking to start learning javascript programming then i recommend you to watch all the four parts of this crash course and make the most out of it if you are new then please check out my other crash courses i will add the links in the description below also make sure you subscribe my channel and press the bell icon so that you don't miss the upcoming videos on javascript crash course so let's get started so we will go through some slides and understand some facts and theoretical stuffs about javascript but in this quick introduction i want to answer three frequently asked questions by beginners about javascript and that is what is javascript what can you do with javascript how javascript code runs let's start with the first question what is javascript javascript is a high level just in time compile programming language just in time means you don't need to compile your code before running it it will be interpreted by the browser directly unlike java that if you want to run your code then you need to compile it first with a program called compiler and then you can run your code although java is very different language and most printers think they are same but no javascript and java are completely different programming languages javascript also confirms to ecmascript specification in fact javascript is one of the implementation of ecmascript specification although there are some other implementation as well like actionscript jscript but they are not very popular as javascript you can run javascript code on browser and server as well we will see in a bit next javascript is a dynamic typed language that means when declaring variables you don't need to specify type like string numbers which we usually do in c c plus plus java etc you just declare a variable with a value and during runtime the engine will decide the type according to the value javascript is also multi-paradigm you can write your code in many different ways you can write object-oriented code or functional code not unlike other languages where you need to write in a certain way and that's why javascript is one of the most popular programming language here are some of the stats published by stack overflow where you can see javascript is on the top of the list and big companies like twitter netflix facebook google and amazon hires a lot of javascript developers every year as they have built a lot of applications entirely using javascript now let's see the second question what can you do with javascript you can choose a career as front-end development where you will build ui interfaces and will be using frameworks like react angular view or you can choose a back-end development where you will write server-side logic deal with apis databases and real-time chat application using node.js express and the third option and the most popular one is full stack development where with a single programming language you can build both front end and back end and that's the beauty of learning javascript in today's world javascript is all over the place if you want to build web mobile applications or you want to build real-time chat applications you can also build desktop applications with electron js which is javascript library of building desktop applications or even games so now you must have realized how important is to learn javascript and the third question is how javascript code runs let's understand with a small example you have a simple javascript function that gives a sum of two numbers you don't need to worry about functions now it's just a theoretical concept so that you can understand how this code execution happens now when this application runs in the browser the browser renders the javascript code with some javascript render engine and these engine execute your javascript code line by line for chrome we have v8 javascript engine and for mozilla we have spider monkey there is another way of executing javascript code and that is node.js a runtime environment built on chrome v8 engine for executing javascript outside your browser so now you have good understanding of javascript let's see what are the topics we cover in this video we will cover the basics of javascript syntax and fundamentals we will also look on the variables data types operators and conditions we will look on the arrays objects how we write functions how we write loops constructor functions and prototypes and in the last we will see for the window object dome manipulation events and some feel of es6 so let's jump into the code all right guys so now we have a simple html document and first thing we are going to see is how we can add the javascript into our html document so we can add javascript into our html document using the script tag so i'm going to add a script tag here all right and the next thing i'm going to do i'll just simply write an alert and i will write js tutorial and this will simply give the browser alert on the screen so now if i save you can see that there is an alert saying js tutorial so so this way you can add your javascript code but usually we never add script tag in the head section because if you have any error in your script tag then the code execution will stop there itself and your html will not render on the screen so we always avoid adding the script tag on the head section and instead of that we add it in the body section so we add the script tags at the bottom of the body so here and the output will still be the same but it's always recommended to have a separate javascript file and you link that javascript file into your html document so we are going to do the same thing so what i'm going to do i'll just remove this alert and in the script tag i can add a source and i'm going to give these path of my script file so currently i don't have any so let's create a new javascript file so i'll create a new folder i'll name it js and inside the folder i'm creating a new file and i'll name it as script.js okay and now i will just link the file here i'm going to give a path it's in js and it's in script.js all right so now we have linked the javascript file and now we don't want this html file anymore because we are not going to write any html for now we we are going to do everything uh in the script file so let's go to the script file and now in the script file if i alert again so this time i'm going to write simple hello okay and now if i save it so now you can see that there is an alert on the browser with hello so now let's see what are the ways we can actually output our js code so obviously alert is one of the way you can do it and the next way you can do it if you want to accept some input from the user you can use prompt and when i use a prompt i'll just type what is your name okay and i i'll just comment the alert because now we don't want and if i save me now it's prompting me that give me your name it will take an user input so what i'm gonna do i'm gonna say the page and if i click ok nothing will happen because we are not doing anything with the user input but if you want to see what is the user input next way to output a javascript is the console and which is the most uh developers they use console to do debugging and to print any uh data in the console so let me add a console so what i'm going to do i'm just going to add a console log here and i'm going to add a console.log so that i can log what the data or what the input user has entered all right so now if i say the page and if i write okay then we can see it in the console but how we go to the console so to go to the console it's very easy you just have to do a right click you'll click on the inspect and inside the inspect you can see the first step highlighted is the element but you need to go to the console so this is the browser console and in the browser console you can see my name the page here and this is because we entered the page when it was prompted so you can see that it's on the line two the console is from line two and this is our line two so this is the console so in console i mean you can log a lot of different things so console log is one of the way just to log a simple data in your code so i will just add i am in script file so when i do this it will simply print it on the console but console has more methods i mean it's just not the log method but you can also have more methods so in this one i'm going to do is console.error if you want to console some error on the console you use console.error and when i say i will write i am n error and you can see that now this is is the error you have a different visualization when it's an error it's it's going to be have a red color and there's a cross mark similarly we can have a warning as well if you want to output the warning then we can have a console one and i will write i am a warning and now you can see for warning you have a yellow triangle and then it is the different color so this means you can see it's a bonding so apart from the warning you can also in log some normal information so i will add console.info and this is going to give me a normal text on the screen i am a info and it's going to give me a normal same so info is more or like similar to the log but from the name we understand if we need to output some information we use console info if we just need to do some output on the console then we can use console.log if we want to output the error we can use error and if we want to output warning we can use the one but these are not limited only four methods there are more i mean you need to check but i'm going to cover only four so i i'll just going to remove this and the next thing we are going to talk about are variables so in javascript you can declare a variable in three different types so earlier it was where but when es6 came the es2015 we say uh in es25 they introduce let and const so let's see what actually this where is what is this let and what is this constant and what actually the difference between them which one to use when and how to use so what i'm going to do i'm going to declare a simple variable x equals to 5 all right and then next i'm going to declare a let y is equals to 10 and the other one is i'm going to declare a const z is equals to 15. all right so i have declared three variables and so let me console them first so i'll write a console.log and i'm right x and i'm just going to copy paste this for y and z and you can see the outputs here but if i want to change the value of z let me assign z is equals to 20 now and if i save you can see i'm getting an error and that error is because of z is declared as constant and you cannot change the value of the constant so for the constant is clearly a difference that constants are something which has to be constant throughout your application the values cannot be changed so you declare all the variables as constant and you only change this constant to let when actually you know that this variable has to be changed late execution of the application so in that case you just change the cons to the let but now what is the difference between let and variable so when you declare something as variable or where it has a global scope that variable will go to the window object we're going to see what is the window object latest need to understand that when you declare any variable as where then it it is having a global scope but when you declare a variable with the let it will have a block level scope so to make you understand the block level scope what i'm going to do is i'm simply going to have a small if condition and if it is true then only i'm going to print the console of x and console of y all right and when i do so i'm just going to comment this out now all right so when i do this you can see that i simply get the same output because the condition is satisfied it's true and you will get x a and y i can declare a let y is equals to 5 here and i'm going to declare a where x is equals to 6 and if i save this time then the value of x and y will obviously it will change because i have overwrite the values which were previously declared but when i want to print these two outside of this and in this case i'm going to comment this out all right so when i print this outside the block of the my if condition you can see that i get and for the line number 17 which is the x i still can access x outside the if condition but for y i'm not able to access y outside the if condition and that is because when you declare a variable as let it will have a block level scope that means the variable y will only be available within this block if you try to access is outside the block you won't be able to access it but if but on the other hand if you declare a variable as where you can access it anywhere in your application because it's going to be added as a global scope it's not a good practice to add every variable to a global scope because then your global scope will get polluted and your application will behave not exactly how you want because you will never know what value of the variable is changed what time it's better to use constant everywhere but if something is not being fulfilled with the constant you change it to the let but you avoid using variables so these are the variables where let and constant all right so the next thing i'm going to show you is the operators so let's see what are the operators so javascript has a simple operators like you have in other programming languages like you can have let me add a console dot log and i'm going to simply add two plus two all right so these are some of the arithmetic operators and let me go to console back and if i add 2 plus 2 is 4 if i can use the multiplication it's going to give me 4 i can use sub subtraction it's going to give me 0 and i can use divide it's going to give me 1. so these are the arithmetic operators but apart from these arithmetic operators javascript also have an assignment operator and the assignment operator is if i write const x equals to 10 that means the equal to is an assignment operator and using the assignment operator we actually assign a value to a variable so this is the assignment operator and if i print this constant then i will get 10. apart from the assignment operator you can also use an increment operator so for increment i need to change the value let me change it to where and you add plus plus so when you add plus plus it is going to the actual value and when you do the next print then it's going to give you an 11 because it is incremented by one so if you want that first the value should be incremented and then it should be printed then you can add the plus plus here and i'll just remove this so in this case it's going to give me 11. all right similarly you can do the decrement operator so minus minus so first is going to take the current value it will do a minus minus to it that means it's going to decrement it by one and then it's going to print the value so when i save it i'm going to get nine all right so these were the operators we usually use in the javascript the basic operators next thing we will see the data types in javascript so javascript has primitive data types and non-primitive data types in the primitive data types we have the string we have number we have boolean we have null and we have un define we also have symbol but symbol is not which is generally uh used in i mean i have never used symbol by myself in in the coding so we we're not going to discuss symbol because it's not one which is being frequently used so let me assign some variable i'm going to give a name of of the page all right then i'm going to have an age as 29 okay then i'm going to have let is pro grammar i'm going to say it true yes i am a programmer then i'm going to say no value for no value i'm going to give null and then i'm going to give a let on assign and to unassign i'm not going to give any value to unassign all right so now if we want to see that the name is what is the type of the name then we are going to do console dot log and if i write type of name so if i write a type of name then it should give me string because i i have assigned the value string to the name so in javascript you you don't need to specify the data type you simply specify the value and when actually the code is executed the javascript engine on the runtime it will decide that it's a string out it's a boolean or it's a number so if i save it now it's going to give me a string which is actually name is a string so if i want to see about this then this should give me a boolean and yes it's giving me boolean so for for the numbers we in javascript we don't have floats or decimal we only have numbers so if if i have here let me give you here first i will give h i'm sorry we should not declare a variable with a capital so if i write if i want to see h it's going to give me a number but if i if i write minus 1 then also it's going to give me a number or if i write 0.5 it will still be a number because javascript doesn't have floats or decimals it treat everything as numbers so let me show you if if we see the type of no value then it's not going to give me a null it's going to give me an object because type of null is object and you don't ask me why why the type of null is object is actually a gotcha so it's an exception in javascript that when you try to check the type of a variable which is having a null value it's going to give you an object so let me check for the type of unassigned and i haven't assigned a value to an assigned variable so whenever you declare a variable by default you have an undefined value in it and when you add the value to it then it takes the value otherwise it will always give you an undefined as its value all right so so this is why we say that javascript is a dynamic type language because you don't need to specify the type of the variables when you declare the variables so if you want to have a type while declaration like let name should be a string then you should use typescript instead of javascript because typescript is a typed language and when you declare variables in typescript you need to specify the type of the variable you use so that that's another topic of discussion but i just wanted to say you that yes i mean typescript is the superset of javascript that means all the features of javascript will be there in the typescript plus typescript offers you some additional features all right so these were the data types and now next let's see about strings and string methods so what i'm going to do is i i'll just declare a first name and i'm going to give first name as the page all right then i'm going to give a last name and i'm going to give a last name as malvia and i'm also give going to create one more variable i'm going to give languages and the languages will be html css and java script so i simply created three variables and assigned some string values one thing i want to show that if you want to define a string you can also define a string as let name is equals to new string and i'm going to give as the page while we are also one of the way of declaring a string but we we never use this constructor object or the constructor function to define the string because now when you see that if if i'm going to write a console.log and if i want to have a type of if i write a type of first name it's going to give me a string but if i write the type of name it's going to give me an object and not the string so performance wise if you check on the performance it's always recommended to use uh the simple way and not the constructor function to declare ring it's not only for the string you you can do it for numbers booleans for all the primitive data type we saw you can do it all right so i just remove it because we don't want this part and now if i do this first name then i'm going to get string so there are some of the string methods which you can use on the string like if i want to know the length of it i can simply write length and i can get the length of my string okay you can also use concatenate so if i want to concatenate then i can use concatenate method and then i can use last name so this is going to concatenate and the other way you if you want to concatenate is you can use it is my first name is then if you want to concatenate with the variable then you then you put a plus sign here okay and then you add your variable first name and then you want to add a string again then you add a plus now you add a string here my last name is you add a plus and you write a last name and this is going to give that my first name is the page my last name is the page but there is a better way of writing using a template literal and that es6 way is it's very easy you write console.log and you use backticks and in the backticks you can simply write my first name is and when you have to have a variable value here you add a dollar sign then you add a curly base and you enter the variable name and then you simply write my name is the page and my last name is you can dollar and then you can add your last name and it's going to give me the same way so this is a much better way of writing you you avoid all the plus signs and then codes and again plus sign and again codes so now let's see some of these string methods which we can use if you want to have a substring of the complete string then you can do that as well so there are some of the methods in the string which you can play around with the strings so what i'm going to do i'm going to have a language and i'm going to do a substring okay and on the substring from where i want to have the substring so i'm need to give the first argument as a start so i'm going to give it from one and if i save it it is going to start from the one that means the index of h is zero the index of t is one and i need a substring which is starting from one so that's why it's starting from t m l and you can also add the second argument these starting from the one how many characters you want more so if i add that from one i want five characters more so that is going to take that from one which is one two three four five and the fifth one is a comma and then the space so if i write a six here i'm going to get the string till c so this is the sub string so there is a similar method called sub string and in that substring let's go and check the substring so i'm going to add language dot and i'm going to add the sub string but in the substring you you add the first and the last and it only picked the values in between not including the last one so let me give you one comma six so when i give one comma sick that means start from the first index and go to the sixth index but don't include the sixth one so that means if i start from the first index which is t and c is the sixth one in substring the last index is not included that means c will not be included here so this is the difference between sub str where you have a start and you have a number of characters as a second argument but in substring you have a start and you have an end but you don't include the end in the result next i want to show you is this split which is very useful and we we often use split so like i have a languages and i need to split based on the comma and when i split it i'm going to get an a new array of strings and now you can see that i got a new array of strings all right and one thing i want to show you also do a replace so if i add a console.log and i'm what i'm going to do i'm going to add languages dot replace and i want to replace the html with html5 all right and if i save now you can see the html string is replaced with html5 all right so so these were some of the string and string methods all right guys so we will take a break here and we'll see you in the part two of our javascript crash course but before you go don't forget to subscribe the channel and press the bell icon so that you don't miss the upcoming videos thanks for watching

Channel: Dipesh Malvia

Views: 4,059

Rating: 4.8938055 out of 5

Keywords: javascript tutorial, javascript, javascript tutorial for beginners, javascript crash course, learn javascript, understand javascript

Id: t6_waVDdG-E

Length: 31min 38sec (1898 seconds)

Published: Mon Oct 12 2020