Importance of Natural Resources

JavaScript Tutorial for Beginners: Learn JavaScript in 1 Hour [2019]

In this 3-minute introduction, I’m going
to answer four frequently asked questions about JavaScript.
What is JavaScript, what can you do with it, where does JavaScript code run and
what is the difference between JavaScript and ECMAScript. So let’s
start with the first question. What is JavaScript? JavaScript is one of the most
popular and widely used programming languages in the world right now. It’s
growing faster than any other programming languages and big companies
like Netflix, Walmart, and PayPal build entire applications around JavaScript.
And here’s the average salary of a JavaScript developer in the United
States. That is $72,000 a year. So it’s a great opportunity to get a good
job out of learning JavaScript. You can work as a front-end developer or a
back-end developer or a full stack developer who knows both the front end
and the back end. Now, the second question. What can you do with JavaScript? For a
long time, javascript was only used in browsers to
build interactive web pages some developers refer to javascript as a toy
language but those days are gone because of huge community support and
investments by large companies like Facebook and Google these days you can
build full-blown web or mobile apps as well as real time networking
applications like chats and video streaming services command-line tools or
even games here’s an example a third question where does JavaScript code run
javascript was originally designed to run only in browsers so every browser
has what we call a JavaScript engine that can execute JavaScript code for
example the JavaScript engines in firefox and chrome are SpiderMonkey and
v8 in 2009 a very clever engineer called Ryan Dahl took the open-source
JavaScript engine in chrome and embedded it inside a C++ program he called that
program node the node is a C++ program that includes Google’s v8 JavaScript
engine now with this we can run JavaScript code out
of a browser so we can pass our JavaScript code to node for execution
and this means with JavaScript we can build the backend for our web and mobile
applications so in a nutshell JavaScript code can be run inside of a browser or
in node browsers and node provide a runtime environment for our JavaScript
code and finally the last question what is the difference between JavaScript and
Eggman script well ECMO script is just a specification javascript is a
programming language that confirms to this specification so we have this
organization called a comma which is responsible for defining standards they
take care of this Eggman script specification the first version of
Eggman script was released in 1997 then starting from 2015
ACMA has been working on annual releases of a newest specification so in 2015
they released a kimono script 2015 which is also called ECMO script version 6 or
es6 for short this specification defined many new features for JavaScript alright
enough theory let’s see javascript in action so every
browser has a JavaScript engine and we can easily write JavaScript code here
without any additional tools of course this is not how we build real-world
applications but this is just for a quick demo so open up Chrome right click
on an empty area and go to inspect now this opens up chrome developer tools
here select the console tab this is our JavaScript console and we can write any
valid JavaScript code here so type this console dot log put a single code here
and then hello world another single code to terminate close the parentheses and
add a semicolon at the end now as you go through the course you’re going to
understand exactly what all this means for now don’t worry about it so now I’ll
press ENTER and you can see the hello world message on the console we can also
write mathematical expressions here for example two plus two we get four or we
can do something like this alert practices single coat yo enter and
here’s an alert in the next lecture I’m going to talk about setting up your
development environment for writing JavaScript code in order to write javascript code you
need a code editor there are various code editors out there including Visual
Studio code or yes code sublime text atom and so on
out of these my favorite is Visual Studio code that you can download from
code that Visual Studio comm it’s a very simple lightweight cross-platform and
powerful editor so if you don’t have Visual Studio code on your machine go
ahead and download it the other thing I wanted to install is note you can
download note from nodejs org now technically you don’t
necessarily need know to execute JavaScript because as I explained before
you can execute JavaScript code inside of a browser or EndNote but it’s good to
have node on your machine because we use that to install third-party libraries
and also later in this section I’m going to show you a preview of node so pause
the video now and download Visual Studio code as well as note once you’re done
come back continue watching to create a new folder call that J s
dash basics the name doesn’t really matter we just want to have a folder for
writing all the code in this course now drag and drop this folder into visual
studio code okay we’ve got this folder open let’s add a new file here index dot
HTML now you don’t really need to know HTML in order to take this course but if
you want to be a front-end developer you should know your HTML well now in this
file I want you to type an exclamation mark and then press tab this generates
some basic HTML boilerplate we don’t really care about any of this code here
we’re gonna use this as a host for our JavaScript code you’re gonna see that in
the next lecture so save the changes now open the extensions tab here
here in this box search for live server so live server is a very lightweight web
server that we’re going to use to serve our web application so install this then
you will have to restart Visual Studio code when you’re done go to the Explorer
tab right click index.html and select open with live server this will open up Chrome or your default
browser and point it to this address that’s where our web application is
served from now currently we have an empty page now to make sure that
everything is working properly let’s go back to visual studio code here in the
body section let’s add an h1 press tab and type hello world now save the
changes back in the browser we can see this page is refreshed automatically and
we’ve got the hello world heading here in the next lecture you’re going to
write your first JavaScript code all right now we’re ready to write our
first Java Script code in order to write JavaScript code here we need a script
element there are two places where we can add a script element we can add it
here in a head section or in the body section the best practice is to put the
script element at the end of the body section after all the existing elements
so here after h1 I’m gonna type script and press tab this is our script element
now why did I say that as a best practice you should put this script
element here well there are two reasons for that one reason is that the browser
parses this file from top to bottom so if you put this script element here in
the head section you might have a lot of JavaScript code there so your browser
may get busy parsing and executing that JavaScript code and it won’t be able to
render the content of the page so this will create a bad user experience your
user looks at your web page it’s white or blank while your browser is busy
parsing and executing your JavaScript code so that’s reason 1 the second
reason is that almost always the code that we have in between script elements
needs to talk to the elements on this web page for example we may want to show
or hide some elements so by adding the code here at the end of the body section
we’ll be confident that all these elements are rendered by the browser now
there are exceptions to this rule sometimes you’re using third-party code
that has to be placed in the head section but these are exceptions as I
told you before as a best practice you should add your JavaScript code at the
end of the body section now here we’re gonna write the same code that you wrote
in the last lecture console dot log hello world but we’re going to talk
about this in a little bit more detail what we have here is a statement a
statement is a piece of code that expresses an action to be carried out in
this case we want to log a message on the console all statements
in JavaScript should be terminated by a semicolon what we have here in between
single codes is called a string a string is a sequence of
characters now in JavaScript we also have this notation we can add two
slashes and this represents a comet so here we can add some description to our
code and this description is ignored by the JavaScript engine it’s not executed
it’s purely for documenting the code when you wanna explain to other
developers why you have written this code this way you don’t explain what the
code does because that should be clear in the code itself so here I don’t want
to write something like logging something on the console that’s so
obvious in the code right instead we want to explain why’s and a house so for
this demo I’m just gonna add a simple comment this is my first JavaScript code
now save the changes back in the browser we need to bring the console back up so
right click somewhere and go to inspect or alternatively you can use a shortcut
that is alt command an eye on Mac or alt control eye on windows that brings up
the console tab if the console tab is not immediately visible make sure to
select it here and here you can see the hello world message now while we can easily write javascript
code in between the script element in a real-world application you have
thousands or even millions of code we don’t want to write all that code in
line here we want to extract and separate our JavaScript code from our
HTML code let me give you a metaphor think of your house in your bedroom you
have your bed and your clothes you don’t store your clothes in the kitchen this
is what we call separation of concerns we have the same principle in
programming so we want to separate HTML which is all about content from
JavaScript which is all about behavior how should your web page behave what
should happen when we hover our mouse over a given element maybe something
should pop up maybe something should be hidden so we use JavaScript to implement
behavior so open up the Explorer window add a new file cut in index the j/s now
back in index dot HTML cut all this JavaScript code here and then paste it
in index J s now in this simple application we have a single file a
single javascript file in a real world application we have hundreds or even
thousands of JavaScript files later in the course you will learn how to combine
these files into a bundle and serve that bundle to the client now save the
changes back in index.html now that all our JavaScript code is in a separate
file we need to reference that file here so let’s add an attribute here SRC which
is short for source and set it to index that j/s so this tells the browser that
our JavaScript code is now in index that is save the changes back in the browser
you can still see the hello world message and that confirms that our code
is still working in the next lecture we are going to execute this code in node so in the last lecture we executed this
piece of JavaScript code inside of a browser in this lecture I’m going to
show you how to run the same code in node so I’m assuming that you have
installed node on your machine if not head over to node.js org and download
the latest version of node now if you’re on Windows open up command prompt if
you’re on Mac open up terminal and head over to the folder you created earlier
now in this folder we run node and pass the name of our javascript file that is
index dot JSON c node is a program that includes google’s v8 JavaScript engine
we can give it a piece of JavaScript code and it will execute that code for
us just like how we can execute some JavaScript code in a browser so node is
a runtime environment for executing JavaScript code now let me show you a
tip here in vs code we have an integrated terminal so you’re gonna have
to explicitly open up a separate terminal window so here on the top under
the View menu look we have integrated terminal note the shortcut here that’s
the shortcut for mac and windows you’re gonna have a different shortcut so
select this and here’s our integrated terminal pointing to the same folder
where we created our files so you don’t have to explicitly navigate to this
folder and here we can run node indexed at j/s as well now in this course we’re
not gonna work with node anymore because node is a complex separate topic in fact
I have a comprehensive course about node with 14 hours of content so once you
finish this course if you want to learn node you can always look at my note
course well hello it’s mahshar thank you for
watching my javascript tutorial I just wanted to quickly let you know that this
tutorial is part of my complete JavaScript course where you can learn
about all the essential concepts in JavaScript the course is packed with
lots of exercises and solutions and by the end of watching the course you will
also receive a certificate of completion in case you’re interested you can find a
link in the video description and if not that’s perfectly fine continue watching
as the next section is coming up let’s start this section by a discussion
of variables which are one of the most fundamental concepts in JavaScript and
any other programming languages in programming we use a variable to store
data temporarily in a computer’s memory so we store our data somewhere and give
that memory location and name and with this name we can read the data at the
given location in the future here is a metaphor think of the boxes you use to
organize your stuff you put your stuff in various boxes and put a label on each
box with this you can easily find your stuff right a variable is like a box
what we put inside the box is the value that we assign to a variable that’s the
data and the label that we put on the box is the name of our variable now
let’s see this in code so here in index Jas I’m gonna declare a variable now
previously in the old days before es6 we use the VAR keyword to declare a
variable but there are issues with var as you will find out later in the course
so going forward from es6 the best practice is to use the lead keyword to
declare a variable now we need to give this variable a name or an identifier
and this is like the label we put on a box so I’m gonna call this name and
finally we need to terminate this declaration with a semicolon now let’s
log this on the console and see what we get
so console that log name once again we need to terminate this statement with a
semicolon save the changes and here in the console we see undefined so by
default variables that we defined in JavaScript their value is undefined now
we can optionally initialize this variable so I’m gonna set this to a
string which is a sequence of characters like Marsh note that I’m using single
quote you can also use double quotes different developers have different
preferences but it’s more common to use single quotes for declaring strings in
JavaScript now when we save the changes instead of one
we see Marsh on the console so here in this example we have declared a variable
called name and we have set that to this value to this string now we have a few
rules for naming these variables here are the rules
first is that they cannot be a reserved keyword so in JavaScript we have
reserved keywords let is one of them you also have if else VAR and so on now
you don’t have to memorize this list if you try to use one of these names you’re
gonna get an error for example if I change this to if notice red underline
this is indicating that this is not a valid identifier okay so revert it back
now the second rule is that they should be meaningful we want to have meaningful
names like meaningful labels I’ve seen developers using names like a or PE or a
one or I don’t know X these variable names do not give us any clue what is
the purpose of these variables what kind of data are restoring at that memory
location so always use meaningful and descriptive names okay now back to name
the third rule is that they cannot start with a number so we cannot have a
variable like one name but again going back to the second rule why would you
want to call it variable one name it’s meaningless right so always use
meaningful names the fourth rule is that they cannot contain a space or – so if
you have multiple words you need to put them together here is an example let’s
imagine we want to declare a variable called first name so first name and note
that here I’m using camel notation so the first letter of the first word
should be lowercase and the first letter of every word after should be uppercase
this is what we call camel notation which is the convention we use in
JavaScript to name our variables another thing you need to know about these
variable names is they are case-sensitive so if I declare
another variable call it first name but make the F uppercase these two variables
are different but as I told you before if you stick to camel notation you
wouldn’t end up with a variable name like this and finally the last thing you
need to know about these variables is that if you want to declare multiple
variables there are two ways to do this you can declare them on one line and
separate them using a comma so first name and then last name now in this case
I have not initialized either of these variables they’re both undefined I can
optionally initialize one or both of them so I can set this to Marsh and I
can leave last name undefined or set it to my last name Hammad on e but the
modern best practice is to declare each variable on a single line so we
terminate this first declaration with a semicolon and declare the second
variable on a new line that’s the modern best practice next we’re going to look
at constants alright now let’s declare a variable
called interest rate so let interest rate and we set this to 0.3 now this is
the initial value we can always change that later so we can set interest rate
to let’s say 1 now if you log this on the console of course we’re going to see
the new value right so save the changes and here’s one on the console however in
a real-world application there are situations that we don’t want the value
of a variable to change because otherwise it’s going to create all kinds
of bugs in our application in those situations instead of a variable we use
a constant so the value of a variable as the name implies can change but the
value of a constant cannot change so here if we change let to Const now
interest rate will be a constant so when I save the changes you’re going to see
an error in the console on line 3 where we reassign interest rate so let’s have
a look save the changes and here’s the error
uncut type error assignment 2 constant variable we can see this error happen in
index dot JSP but if you click here you can see the
line in code where this error occurred so we cannot reassign a constant all
right now back to the console so here’s the best practice if you don’t need to
reassign constant should be your default choice otherwise if you need to reassign
a variable use let so you have learned how to declare and
initialize a variable now you might be wondering what are the kind of values
that we can assign to a variable well you have seen strings but we have more
types basically in JavaScript we have two categories of types on one side we
have primitives also called value types and the other types we have reference
types in this lecture we’re going to focus on primitives and you’re going to
learn about reference types later in the course now in the category of primitives
we have strings numbers bully ends undefined and not let’s look at each of
these in action so here we have a variable called name which is set to
your string what we have here is what we call a string literal that’s just a
fancy name for a string now let’s declare a variable and set it to a
number so let H be set back to 30 and by the way I’m not 30 years old but don’t
tell anyone okay so this is what we call a number litora
now let’s declare a boolean a boolean can be either true or false
so let is a proved to be true this is what we call a boolean literal and we
use this in situations where we want to have some logic for example if the order
is approved then it needs to be shipped so the value of a boolean variable can
be true or false and by the way note that both true and false are reserved
keywords so they cannot be variable names ok now you have seen undefined
before so I can declare another variable first name
if we don’t initialize it by default its value is undefined
but we can also explicitly set this to undefined but that’s not very common in
contrast we have another keyword that is not so let me declare another variable
and set this to no we use null in situations where we want to
please heed me clear the value of variable for example you may want to
present the user with a list of colors if the user has no selection you want to
set the selected color variable to know in the future if the user selects a
color then we’re going to reassign this variable to a color like red and then if
they click red again perhaps we want to remove the selection so we set this back
tool not so we use norm in situations where we want to clear the value of a
variable so these are the examples of primitives or value types we have
strings numbers boolean’s undefined and no now in es6 we have another primitive
that is symbol and you’re going to learn about that later in the course one thing that separates JavaScript from
a lot of programming languages is that javascript is a dynamic language what do
they mean by dynamic well we have two types of programming languages
static languages or dynamic languages in static languages when we declare a
variable the type of that variable is set and it cannot be changed in the
future in a dynamic language like JavaScript the type of a variable can
change at runtime let’s see this in code so back in the example from the last
lecture we have declared this name variable and we have set that to your
string so the type of name is currently a string but it can change in the future
let’s take a look so here in the console we can execute some JavaScript code we
have this type of operator and with that we can check the type of a variable so
after that we add the name of the variable in this case our name variable
so note that the type of name is a string now if we reassign name to a
different value like a number and check its type look the type is now changed to
a number this is what we call a dynamic language so unlike static languages the
type of these variables will be determined at runtime based on the
values that we assigned to them now let’s take a look at a few more examples
of the type of operator and by the way note that type of is another reserved
keyword so you cannot have a variable called type off so we can clear the
console by pressing ctrl + L so now let’s take a look at type of age it’s a
number now if you change age to a floating-point number and I know it
doesn’t make sense but let’s just stick to this for this example thirty point
one and then look at type of age it’s still a number so in JavaScript unlike
other programming languages we don’t have two kinds of numbers we don’t have
floating-point numbers and integers all numbers are of type number now let’s
look at the type of he’s approved it’s a boolean as I told you before what about
the first name let’s have a look type of first name it’s undefined and that’s
funny because the value of this variable is undefined
but this type is also undefined what does this mean well earlier I told you
that we have two categories of types we have primitives or value types and
reference types in the primitive types category we have strings numbers boolean
undefined and no so undefined is actually a type but is also a value in
this example because we have set first-name to undefined as a value it’s
type is also undefined okay now what about selected color let’s have a look
so type of selected color the type of this variable is an object what is an
object that’s the topic for the next lecture so you have seen all the primitive types
in JavaScript now let’s take a look at the reference types in the reference
types category we have objects arrays and functions in this lecture we’re
going to explore objects and you will learn about arrays and functions later
in this section so what is an object an object in JavaScript and other
programming languages is like an object in real life think of a person a person
has name age address and so on these are the properties of a person you have the
same concept in JavaScript so when we’re dealing with multiple related variables
we can put these variables inside of an object for example here we have two
variables name and age they’re highly related they are part of the
representation of a person so instead of declaring two variables we can declare a
person object and then instead of referencing these two different
variables we can just reference the person object
it makes our code cleaner so let’s see how we can declare a person object we
start with let or Const if we don’t want to reassign the person object and set it
to an object literal so this syntax we have here these curly braces is what we
call an object literal now between these curly braces we add one or more key
value pairs so the keys are what we call the properties of this object in this
case we want this person object to have two properties or two keys name and age
so we add name here that’s the key then we add a colon and after that we set the
value so maash now we add a comma and add another key value pair age 30 so now
we have a person object with two properties or two key value pairs name
and age and with that we don’t need these two variables now this lock person
on the console so that log person save the changes so
here’s our personal object again note the object literal syntax so we have
curly braces and in between them we have one or more key value pairs and these
are the properties of the personal object now there are two ways to work
with these properties let’s say we want to change the name of this person so we
need to access the name property there are two ways the first way is what we
call the dot notation so we add the name of our object in this case person dot
now you can see its properties we have age and name so we can change the value
of name to John now we can use the dot notation to also read the value of a
property so here on line 10 instead of login the person object we can log its
name property save the changes and in the console we get John the other way to
access a property is using bracket notation so bracket notation so instead
of dot we use square brackets and we pass a string that determines the name
of the target property so single or double quotes
but single quotes are more common the name of the target property is name so
we can change that to a same Mary again when reading that we can use the dot
notation or the bracket notation if we save the changes now we get Mary on the
console now you might be asking which approach is better dot notation or
bracket notation well as you can see dot notation is a bit more concise it’s
shorter so that should be your default choice however bracket notation has its
own users sometimes you don’t know the name of the target property until the
runtime for example in our user interface the user might be selecting
the name of the target property in that case at the time of writing code we
don’t know what property we’re going to access that is
going to be selected at runtime by the user so we might have another variable
somewhere else like selection that determines the name of the target
property that the user is selecting and that can change at runtime with this we
can access that property using the bracket notation in a dynamic way so we
pass selection here and we get the same result okay now if this is confusing
don’t worry you’re going to see this again in the future as you gain more
experience with JavaScript for now just stick to the dot notation because that’s
cleaner and easier next we’re going to look at arrays sometimes in your applications you might
be dealing with a list of objects for example the list of products in a
shopping cart or the list of colors the user has selected in situations like
that you use an array to store that list let me show you how so here I’m gonna
declare another variable called selected colors note that I’m using a meaningful
name I don’t have SC or some other weird name selected colors now we can
initialize this and set it to an empty array so these square brackets are what
we call array literal and they indicate an empty array now we can initialize
this array and add a couple of items like red and blue let’s Lock this on the
console so console the log selected colors save the changes so here’s our
array with two elements we can expand that note that each element has an index
and that determines the position of that element in the array so the index of the
first element is zero and the index of the second element is one so if you want
to access an element in an array we use this index here’s how for example let’s
say you want to display the first element in this array you use the square
brackets and then specify the index save the changes and now we have red now
earlier I told you that JavaScript is a dynamic language so the type of
variables can change at runtime the same principle applies to our arrays so the
lengths of arrays as well as the type of objects we have in an array are dynamic
they can change so aligned – we initialize this array with two elements
right now on line 3 we can add another element to this array so the array will
expand so let’s say selected colors of 2 that means the third item in this array
is going to be green now let’s display this array on the console
so we have an array with three elements so the length is dynamic it can change
also the type of objects we have in this array is dynamic so unlike other
programming languages where every item or every object in the array should have
the same type in JavaScript we can store different types in an array so we can
make the last element a number save the changes now we have two strings and a
number so the objects in the array as well as the size of the array are
dynamic now technically an array is an object so just like the personal object
we defined in the last lecture it has a bunch of key value pairs or properties
that we can access using the dot notation let me prove that to you so
here on the console let’s look at the type of selected colors so the type of
this array is an object so an array is an object in JavaScript so here on line
4 we can look at the properties of this array or this object using the dot
notation look these are all the properties defined in arrays in
JavaScript so every time we declare an array using square brackets that array
will automatically receive these properties we didn’t explicitly define
them they’re just somehow magically inherited from somewhere else we’re
going to learn about that later when we talk about prototypes now in this
lecture we’re going to look at one of these properties that is the length
property this property returns the number of items or elements in an array
so save the changes you can see we have three elements in this array now later
in the course we have a comprehensive section about arrays you’ll learn about
all kinds of operations we can perform on arrays for now all I want you to take
away is that an array is a data structure that we use to represent a
list of items in the category of reference types you
have learned about objects and arrays now let’s take a look at functions
functions are one of the fundamental building blocks in JavaScript a function
is basically a set of statements that performs a task or calculates a value
let me show you a couple of examples so I’m going to declare a function using
the function keyword now we need to give it a name let’s call that greet after
that we need to add parentheses that’s part of the syntax for declaring
functions and then curly braces now what we have here inside the curly braces is
what we refer to as the body of this function and this is where we add all
these statements to define some kind of logic in our application for example the
logic for this function should be to display a message on the console so here
we can add console the log hello world now note that here we have a statement
so we terminated with a semicolon but when we are declaring a function we
don’t need to add semicolon at the end because we are not declaring it like a
variable like this okay this is a function declaration right so now we
have a function we can call this function like this so we add the name of
the function and parentheses again and then semicolon to indicate that this is
a statement save the changes now we have hello world on the console but that’s
pretty boring what would we do this let me show you how to make this more
interesting our functions can have inputs and these inputs can change how
the function behaves so let’s say instead of displaying hello world we
want to display the name of the person here like hello John so we can add a
variable here in between parentheses we refer to this variable as a parameter
so this greet function has one parameter called name and essentially name is like
a variable that is only meaningful inside
dysfunction so inside of this function we can work with this name variable but
it will not be accessible outside of this function the name is an input to
this function so instead of displaying hello world we can display hello
then add a plus here to concatenate two strings so we can add name after now
when calling the great function we need to pass a value for the name variable or
name parameter more accurately so we can pass John here now we refer to this as
an argument so John is an argument to the greet function a name is a parameter
of the greet function it’s one of the things that a lot of programmers don’t
know they don’t know the difference between a parameter and an argument so a
parameter is what we have here at the time of declaration but the argument is
the actual value with supply for that parameter okay
now let’s save the changes so we have hello John now we can reuse this
function but with a different input so we can copy this line here and change on
to Mary save the changes now we have two different messages on the console now a
function can have multiple parameters so here we can separate parameters using a
comma so let’s add another parameter like last name now we can change our
console not blog add a space here and then display the last name
now when calling this great function we should pass another argument for the
last name right but let’s see what happens if we don’t do this so I’m gonna
save the changes see what we got hello John undefined
because as I told you before the default value of variables in JavaScript is
undefined so because we did not pass a value for the last name by default it’s
undefined so I’m gonna pass another argument here we separate them using a
comma John Smith and we don’t need the second call to the
greet function save the changes now we have hello John Smith now there is a cleaner way to write this
code on line three all these concatenations are kind of
ugly they’re getting in the way later in the course I’ll show you how to use
template literals to clean up this code for now don’t worry about it let’s look
at another example of a function so this function we have here is performing a
task so performing a task is task is to display something on the console but
sometimes our functions might calculate something so here is an example of a
function that calculates a value so again function let’s call this function
square this function should take a parameter let’s call that number now we
need to calculate the square of that number that is number times number just
basic math right now we need to return this value to whoever is calling this
function for that we use the return keyword that’s another reserved keyword
so you cannot have a variable called return okay now instead of calling the
greet function let’s call the square function so square we pass two now this
returns a value so we can use that value to initialize a variable for example we
can declare another variable called number and set it to a square of 2 and
then we can display that on the console save the changes so we get 4 now in this
particular example we don’t necessarily have to declare a separate variable if
all we want to do is to display the square of 2 on the console we can
exclude this variable declaration and simply pass square of 2 to console.log
so when the JavaScript engine execute this code first is going to call this
function it would get a value and then pass that value to console dot lock
let’s save the changes and look we still get 4 now I have a question for you how
many function calls do you think we have in this code we have to function costs
square of two is one function call let me delete this temporarily but consult
that lock is also another function call right because here we have parentheses
so recalling the log function which is defined somewhere and passing an
argument we can pass a simple string like hello or we can pass an expression
that expression can be a call to another function like square of two okay so this
is the basics of functions again later in the course we have a comprehensive
section about functions for now all I want you to take away is that a function
is a set of statements that either performs a task or calculate and returns
a value a real world application is essentially a collection of hundreds or
thousands of functions working together to provide the functionality of that
application hi there it’s me mosh again you seem to
be very enthusiastic about learning JavaScript so I want to congratulate you
for your determination for learning if you want to learn more from me I highly
encourage you to enroll in my JavaScript course you can watch this course online
or offline as many times as you want at your own pace the course comes with
plenty of exercises and solutions and you will also receive a certificate of
completion by the end of watching the course in case you’re interested the
link is in the video description have a great day and I hope to see you in the

Reader Comments

  1. Thank you very much. Mr.Mosh
    I come from THAILAND.
    Really I don't know in english. but i can learning JavaScript from your video.

  2. Thanks Josh
    You're simply the best.
    But I'm having a challenge with my VS. I downloaded from the same platform as recommended by you. But I discovered that live server is not, can I say, available. What do I do next?

  3. At 14:00 many of you are going to have a problem with figuring out the command prompt. The first step is to make sure that you save your index.js file. Next search for cmd in your search bar, and click command prompt. When the command prompt opens you will have to locate your folder. The easiest way to do this is to move your js-basics folder to the desktop. In the command prompt type: cd desktopjs-basics Then hit enter. After that all you should have to do is type: node index.js And it will print Hello World on the console. Your console may look different than what you see in the video if you have a windows os.

  4. Mosh, I am learning a lot. I am stuck on applying the code to Node. I can get it to work in PowerShell but I have tried for an hour to get it to work with Node. It is downloaded and installed correctly. All I'm getting is errors!

  5. hate how in coding theres this huge wall after learning the basics. what good are arrays, print lines and number adding when the objective is creating attendance tracking app or web shop basket for a checkout

  6. If you are confused at 14:00, then he basically says that open up the js-basics folder then press shift+right click and select open command window here. This is for the widows users.

  7. I feel bad for all of the people thinking they're going to be programmers in just a few days/weeks.
    If you're one of these people…STOP thinking like that. If you want to be a programmer… Well, you have to do shit like this all the time, every day.
    On top of that, you'll never be able to 100% master any language.

    If you like fixing things that constantly break & it feels like a puzzle game…Programming might be for you 😉

  8. Need help I have to do and interview for class anyone programming professionally I need to do an interview

  9. at 44:15 when you didn't pass any argument at the lastName parameter, it shows "Hello John undefined". Why did undefined went to the next line? why wasn't it in the same line with Hello John?

  10. Hi Mosh, I cannot find "Open with Live Server" on my windows 10. Already installed VS code and Live Server package. Would you mind kindly advise?

  11. Hey I know this probably wont gt responded to but im stuck my commands won't show up on the live servers please respond if anyone has any sort of solution.

  12. I am having an issue with the integrated terminal in VS Code. I am not able to type in the terminal. I am new to coding and don't understand how to resolve this. Can someone help?

  13. I KNOW I AM NOT SMART and I am sorry to complain.

    I guess One Of My Biggest Issues with Every JAVASCRIPT VIDEO I have ever seen is WHY Or WHAT FOR

    Every thing you are teaching Makes No Sense at all to ME.

    What are we Doing in THE CONSOLE ?? AND What does the Console Have anything to do with my web site ???

    Nothing you have said has made any sense to me because I can not visualize in my own mind what you are talking about and how any of this pertains to a working website.

    MAYBE IF SOMEONE could make a VIDEO and show what you are talking about in relation to a working web site.
    When I see an HTML video it is the basic makes sense as it is the basic building blocks of the SITE
    When I see a CSS video it makes sense as it is the DESIGN of the site

    When I see JAVA SCRIPT videos Every video starts talking in ABSTRACT LANGUAGE that seems to me pertain to WHO KNOWS WHAT and therefore I simply do not understand . The More I watch the more frustrated I get because I simply have no visual idea of what you are talking about or how it applies to a web site.

    TO ME THIS IS LIKE someone explaining how a rocket works but only never talking about the rocket but instead breaking down the metallurgy and fuel composition by atomic weight of the elements ( ????????? )

  14. All you ever do is tech from console and it is not helping can you tell me what is wrong with this script

    var fName = document.forms['contact']['firstName'];

    var fPhone = document.forms['contact']['phone'];

    var fAddress = document.forms['contact']['address'];

    var fEmail = document.forms['contact']['email'];

    function Customer(name,phone,address,email){

    this.cName = name;

    this.cPhone = phone;

    this.cAddress = address;

    this.cEmail = email;

    this.fullInfo = function(){

    return this.cName + " " + this.cAddress + " " + this.cPhone + " " + this.cEmail;



    var customerOne = new Customer(fName.value,fPhone.value,fAddress.value,fEmail.value);

    var customerTwo = new Customer();

    var CustomerThree = new Customer();

    document.getElementById('myBtn').addEventListener('click', function(){

    document.getElementById('output').innerHTML = customerOne.fullInfo();


    Here is the HTML and CSS so you can recreate
    <!DOCTYPE html>

    <html lang="en">


    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="style.css">




    <form id="form" name="contact" method="post" onsubmit="return Customer()">

    <textarea id="output"></textarea><br>

    <input id="name" type="text" name="firstName" placeholder="first name"><br>

    <input id="phone" type="text" name="phone" placeholder="Phone"><br>

    <input id="address" type="text" name="address" placeholder="Address"><br>

    <input id="email" type="text" name="email" placeholder="Email"><br>

    <button type="button" id="myBtn">Show info</button>

    <button type="button" id="send">Send Info</button>

    <button type="button" id="clearBtn">Clear info</button>


    <script src="test.js"></script>



    The CSS

    margin: 0px;

    padding: 0px;

    box-sizing: border-box;

    background-color: #ddd;



    background-color: #eee;

    padding: 20px;

    border: 1px solid 333;

    width: 50%;

    margin: 50px auto;


    #form > textarea{


    width: 100%;

    height: 200px;


    #form > button{

    color: #fff;

    padding: 10px;

    margin: 10px auto;

    background-color: royalblue;


    #form > input{

    width: 95%;

    margin: 10px 0px;

    padding: 10px;


  15. Why is this not working?



    <script language="javascript">


    function square()

    var a,Area



    document.write("Area of your square:" + Area)





    <form name="f1">

    Enter a number:<input type="text" name="t1">

    <input type="button" value="submit" onclick="square()">




  16. Everything was going great until around 14 mins because it kept saying that 'console' is undefined. Any fixes? I am on Windows 10 if that helps.

  17. Mosh's courses are on point! I learned C#, Python, SQL through him and now I'm learning Javascript. I study these things at university level and his lessons are better than some professors I've had in the US and Hong Kong.

Leave a Reply

Your email address will not be published. Required fields are marked *