WEBVTT
00:00:04.845 --> 00:00:07.590
Hi, I'm Bob Tabor with
LearnVisualStudio.NET.
00:00:07.590 --> 00:00:11.964
In this lesson we're gonna cover
quite a few JavaScript language
00:00:11.964 --> 00:00:16.020
syntax items like variables,
data types, operators, and
00:00:16.020 --> 00:00:17.064
expressions.
00:00:17.064 --> 00:00:20.110
So we have a lot of work to do,
let's go ahead and get started.
00:00:20.110 --> 00:00:23.610
I want to start off
with our template.
00:00:23.610 --> 00:00:24.988
So, let's go ahead and
open that up.
00:00:24.988 --> 00:00:28.490
I'm gonna right click it, and
select open with Notepad.
00:00:28.490 --> 00:00:31.910
If you don't see that option,
then use one of the techniques
00:00:31.910 --> 00:00:34.830
that we used earlier, like
opening up Notepad first and
00:00:34.830 --> 00:00:41.240
then dragging the template into,
Notepad, I have it set up so
00:00:41.240 --> 00:00:44.904
that I can right click and
select Open with Notepad.
00:00:44.904 --> 00:00:47.790
That will be a little bit
of a shortcut for me.
00:00:47.790 --> 00:00:52.400
Feel free to add that
shortcut if you like.
00:00:52.400 --> 00:00:54.330
All right, and so
I'm gonna change the title.
00:01:00.480 --> 00:01:01.928
All right, and
00:01:01.928 --> 00:01:06.390
let's give ourselves
a little more room here.
00:01:12.869 --> 00:01:16.676
All right, and we're also
going to, in our head section,
00:01:16.676 --> 00:01:17.830
like we did before
00:01:24.895 --> 00:01:27.951
All right, now that we've
done all of our setup work,
00:01:27.951 --> 00:01:29.690
let's talk about variables.
00:01:29.690 --> 00:01:34.338
And we was this in the previous
video how we were able to create
00:01:34.338 --> 00:01:36.991
a variable using
the var keyword.
00:01:39.210 --> 00:01:42.675
So, here, I'm able to create a
bucket in the computer's memory
00:01:42.675 --> 00:01:44.400
called someValue.
00:01:44.400 --> 00:01:47.530
At this point, someValue
has nothing inside of it,
00:01:47.530 --> 00:01:50.270
it's empty, it's undefined.
00:01:50.270 --> 00:01:54.549
If we wanna put something in it,
we can do something like this.
00:01:54.549 --> 00:02:00.131
We use the equals sign operator
that is the assignment operator,
00:02:00.131 --> 00:02:02.769
so that I can assign
a value to my
00:02:02.769 --> 00:02:06.030
variable that's
called someValue.
00:02:06.030 --> 00:02:09.160
Now later on in
my program I can,
00:02:10.670 --> 00:02:16.050
Change what's in my
variable by reassigning it.
00:02:18.012 --> 00:02:20.844
Here I'm gonna change it to my
friend's last name jaworski.
00:02:22.630 --> 00:02:26.667
And then I can read the value
out of the bucket by simply
00:02:26.667 --> 00:02:29.010
referencing it by it's name.
00:02:29.010 --> 00:02:32.585
In this case I'm going to
send to screen an alert,
00:02:32.585 --> 00:02:35.590
somevalue, let's save this as so
00:02:35.590 --> 00:02:39.650
we don't accidentally override
our template that would be bad.
00:02:39.650 --> 00:02:46.470
All Files, and here, we wanna
do C9JS_05.html All right,
00:02:46.470 --> 00:02:51.352
now let's look,
double click, and
00:02:51.352 --> 00:02:57.820
we get a message box that
says jaworski, great.
00:03:01.526 --> 00:03:06.310
All right, so let's go ahead and
change our code.
00:03:06.310 --> 00:03:07.460
Now we have a couple of options,
00:03:07.460 --> 00:03:09.430
I can just completely
delete this code and
00:03:09.430 --> 00:03:11.390
start over from scratch.
00:03:11.390 --> 00:03:13.960
And that is definitely
an approach we took
00:03:13.960 --> 00:03:14.910
in the first lesson.
00:03:14.910 --> 00:03:19.472
However, we can also
comment out our code by
00:03:19.472 --> 00:03:24.419
just using two forward
slashes in a row like so.
00:03:24.419 --> 00:03:28.023
When we create code comments
we're basically telling
00:03:28.023 --> 00:03:31.960
the JavaScript compiler to
ignore this line of code.
00:03:31.960 --> 00:03:35.880
Don't process it,
just act like it never existed.
00:03:35.880 --> 00:03:40.710
Comments also have an added
bonus that we can do something
00:03:40.710 --> 00:03:44.380
like this to remind ourselves
of the purpose of a passage
00:03:44.380 --> 00:03:44.880
of code.
00:03:46.318 --> 00:03:51.562
First example, Second example,
00:03:51.562 --> 00:03:57.551
and so on, and nothing we type,
we can use any English,
00:03:57.551 --> 00:04:04.547
we can even put references to
web pages, And so on in there,
00:04:04.547 --> 00:04:08.272
and they will be completely
ignored by JavaScript and by
00:04:08.272 --> 00:04:12.570
the HTML5 document object model
as it's created, all right?
00:04:14.452 --> 00:04:17.588
There's also another way, if you
have multiple lines of code that
00:04:17.588 --> 00:04:19.884
you need to comment out,
let's just go ahead and
00:04:19.884 --> 00:04:21.510
get rid of all this for
the moment.
00:04:23.601 --> 00:04:26.830
We can use a multiline comment,
And
00:04:26.830 --> 00:04:32.830
to do that we use a /* that
starts the comment out process.
00:04:32.830 --> 00:04:37.832
And then we wanna make sure
it lines up so it's visually
00:04:37.832 --> 00:04:43.500
appealing to us and denotes that
all of this is commented out.
00:04:43.500 --> 00:04:48.690
We have to conclude
that section with a */.
00:04:48.690 --> 00:04:53.014
So to begin the section of
commented out code forward slash
00:04:53.014 --> 00:04:57.349
star and then to finish it star
or asterisk forward slash.
00:04:57.349 --> 00:05:00.820
And now all of this code will
be ignored, all right, so
00:05:00.820 --> 00:05:04.530
that's the two ways that we
can comment out code, great.
00:05:04.530 --> 00:05:08.209
Now, for another example,
up to this point we've just,
00:05:08.209 --> 00:05:11.136
in one line of code,
declared a variable, and
00:05:11.136 --> 00:05:14.741
then later on initialized its
variable or set its value,
00:05:14.741 --> 00:05:17.770
but we can do that all on
one line of code like so.
00:05:23.720 --> 00:05:25.080
All in one step.
00:05:29.795 --> 00:05:33.040
And you can see it indeed works.
00:05:35.754 --> 00:05:37.674
All right, so
now this is something,
00:05:37.674 --> 00:05:40.374
an idea that we're going
to introduce right now, and
00:05:40.374 --> 00:05:43.314
then later on I'll come back and
after we've got some more
00:05:43.314 --> 00:05:46.840
information under our belt I'll
explain a little bit further.
00:05:46.840 --> 00:05:51.646
You don't have to use the var
keyword, the var keyword is used
00:05:51.646 --> 00:05:55.814
to denote that we want
a function-scoped variable.
00:05:55.814 --> 00:05:59.580
If we want our variable to be
scoped at the global level,
00:05:59.580 --> 00:06:02.160
we can just leave
off the var keyword.
00:06:02.160 --> 00:06:05.420
So I can create
someValue = "tabor".
00:06:05.420 --> 00:06:07.226
And in this simple example,
00:06:07.226 --> 00:06:10.850
we’ll see no change in
the behavior of our application.
00:06:10.850 --> 00:06:14.763
However, when we start
working with more complicated
00:06:14.763 --> 00:06:18.592
applications that involve
multiple functions, and
00:06:18.592 --> 00:06:23.250
we are relying on the scope of
our variables to be honored.
00:06:23.250 --> 00:06:26.418
Using the var keyword will
become extremely important.
00:06:26.418 --> 00:06:29.419
Some would say that you should
never use global variables at
00:06:29.419 --> 00:06:32.250
all, therefore you should
always use the var keyword.
00:06:32.250 --> 00:06:35.677
So just keep in mind that you
will see some code out on
00:06:35.677 --> 00:06:39.586
the internet, where people
don't use the var keyword and
00:06:39.586 --> 00:06:43.338
just start referencing
the variable name without first
00:06:43.338 --> 00:06:45.767
declaring it with
the var keyword.
00:06:45.767 --> 00:06:49.349
That's because they are scoping
it, whether they realize it or
00:06:49.349 --> 00:06:53.190
not at the global level instead
of a function or a local level.
00:06:53.190 --> 00:06:56.150
All right, we'll talk about that
a little later once we've got
00:06:56.150 --> 00:06:57.488
some more information
under our belt.
00:06:57.488 --> 00:07:03.085
For now, always use the key word
var when creating a variable,
00:07:03.085 --> 00:07:04.150
all right?
00:07:04.150 --> 00:07:08.187
Now, we used a nomenclature
with a lower-cased s for
00:07:08.187 --> 00:07:11.610
the first letter of
the name of our variable.
00:07:11.610 --> 00:07:15.396
And then we use camel casing
from that point on, so it looks
00:07:15.396 --> 00:07:19.492
like a camel, where it ends and
begins with a lower case value,
00:07:19.492 --> 00:07:23.610
but then in between you might
see capitalization throughout.
00:07:23.610 --> 00:07:27.790
And the reason for this again,
it is a naming convention.
00:07:27.790 --> 00:07:30.993
Programmers like to use
conventions to convey to
00:07:30.993 --> 00:07:34.275
other programmers or
even to remind themselves,
00:07:34.275 --> 00:07:36.630
the purpose of
a name of something.
00:07:36.630 --> 00:07:41.495
Using this lower case s reminds
you that this is a locally
00:07:41.495 --> 00:07:43.151
scoped variable,
00:07:43.151 --> 00:07:47.510
it's not to be considered
global in its purpose.
00:07:47.510 --> 00:07:54.017
You can also start a variable
using an underscore,
00:07:54.017 --> 00:08:00.540
so we could call this
_someValue or _SomeValue.
00:08:00.540 --> 00:08:05.355
We could also start with a $,
$someValue,
00:08:05.355 --> 00:08:10.170
those are all legal,
but you can't do this,
00:08:10.170 --> 00:08:15.131
$ some Value, all right,
that's illegal.
00:08:15.131 --> 00:08:18.688
All right, you might notice
also in our previous code, and
00:08:18.688 --> 00:08:22.676
then the code that we've written
here, that every line that I've
00:08:22.676 --> 00:08:24.832
written Is ended
with a semicolon.
00:08:24.832 --> 00:08:27.882
That's an end of
statement character,
00:08:27.882 --> 00:08:30.219
or end of statement operator.
00:08:30.219 --> 00:08:32.757
You can think of it sort of
like a period at the end of
00:08:32.757 --> 00:08:33.976
a sentence in english.
00:08:33.976 --> 00:08:38.086
It's a complete thought, and so
you communicate that complete
00:08:38.086 --> 00:08:41.825
thought to the JavaScript
compiler by using a semicolon.
00:08:41.825 --> 00:08:45.296
You could actually fit multiple
commands on a single line and
00:08:45.296 --> 00:08:48.562
separate them each with a
semicolon if you wanted to, but
00:08:48.562 --> 00:08:52.060
that makes your code
a little bit unreadable.
00:08:52.060 --> 00:08:54.380
Now one of the departures
of JavaScript from other
00:08:54.380 --> 00:08:57.920
programming languages
is the data type
00:08:57.920 --> 00:09:02.300
is inferred by the value that's
been assigned to the variable.
00:09:02.300 --> 00:09:06.020
So, for example,
in this particular case,
00:09:06.020 --> 00:09:11.090
since we initialize the value or
the variable someValue
00:09:11.090 --> 00:09:15.870
as a literal string of text,
as denoted by the open and
00:09:15.870 --> 00:09:22.450
closing double quotes, someValue
will be a data type string.
00:09:22.450 --> 00:09:25.930
So, let's have some
fun with this, let us.
00:09:31.477 --> 00:09:35.484
Say var myValue = "bob".
00:09:35.484 --> 00:09:39.260
All right, and
then let's do this,
00:09:41.230 --> 00:09:45.180
we'll use another key word,
the typeof operator.
00:09:45.180 --> 00:09:50.391
Which will tell us what
the data type of myValue is,
00:09:50.391 --> 00:09:54.874
all right so
you'll see this in just a moment
00:09:54.874 --> 00:09:59.599
let's go ahead and
double click our example,
00:09:59.599 --> 00:10:04.080
and you can see that
the data type is string so
00:10:04.080 --> 00:10:09.049
by initializing our variable
to a literal string
00:10:09.049 --> 00:10:14.291
the data type automatically
becomes type string.
00:10:14.291 --> 00:10:16.160
Let's go ahead and
comment that out and
00:10:16.160 --> 00:10:17.468
then try another example.
00:10:27.522 --> 00:10:31.261
Now let's rerun our application,
and
00:10:31.261 --> 00:10:35.345
the second data type
is a data type number.
00:10:35.345 --> 00:10:39.206
So we now can create strings and
numbers, and
00:10:39.206 --> 00:10:43.990
notice that numbers have no
double quotes around them.
00:10:43.990 --> 00:10:47.508
If we were to add double
quotes around them,
00:10:47.508 --> 00:10:50.367
it's no longer
a number data type.
00:10:50.367 --> 00:10:53.985
It’s rather a string
data type and
00:10:53.985 --> 00:10:57.738
that’s probably
not what we want.
00:10:57.738 --> 00:11:02.294
So numbers can be added
together, but if we were to try
00:11:02.294 --> 00:11:06.866
to add strings together
that called concatenation.
00:11:06.866 --> 00:11:10.210
We'll get vastly different
results if we were to do
00:11:10.210 --> 00:11:11.697
something like this.
00:11:11.697 --> 00:11:16.680
Let's go ahead and
00:11:16.680 --> 00:11:21.667
comment that out.
00:11:41.218 --> 00:11:46.079
All right, so you can see I'm
creating two variables both of
00:11:46.079 --> 00:11:50.369
type number because I don't
add double quotes around
00:11:50.369 --> 00:11:54.393
the values that I'm
assigning to the variables.
00:11:54.393 --> 00:11:57.772
And then I'm adding those
two values together using
00:11:57.772 --> 00:11:59.462
the addition operator and
00:11:59.462 --> 00:12:02.620
then I want to display
the result in an alert box.
00:12:02.620 --> 00:12:08.034
So let's go ahead, and you can
see that the result is 3.26.
00:12:08.034 --> 00:12:12.096
One other note, I can remove
the .12 off of the end and
00:12:12.096 --> 00:12:15.600
just use whole numbers, And
00:12:15.600 --> 00:12:17.709
JavaScript doesn't have
a problem with that.
00:12:19.247 --> 00:12:23.351
See, some strange rounding
situation where, but
00:12:23.351 --> 00:12:25.171
otherwise no issues.
00:12:29.089 --> 00:12:34.658
However if we were to make
these into strings by adding
00:12:34.658 --> 00:12:39.990
double quotes around them
what will the result be?
00:12:39.990 --> 00:12:48.261
3.143, the 3 Is this value here,
so it treats my value and
00:12:48.261 --> 00:12:51.453
other value of the string, it
concatenates the two together.
00:12:51.453 --> 00:12:54.670
It basically just adds the
number 3 to the very end of this
00:12:54.670 --> 00:12:56.489
literal string of characters.
00:12:56.489 --> 00:12:58.875
All right, so
let's comment all that out.
00:13:04.493 --> 00:13:06.848
Let's get back to
the matter at hand here.
00:13:06.848 --> 00:13:12.079
The other data type that
we can use is a Boolean.
00:13:16.598 --> 00:13:19.147
And that's a true or
false value.
00:13:24.653 --> 00:13:29.483
Let's go ahead and
refresh, type is boolean.
00:13:29.483 --> 00:13:33.920
We can set it either to true or
to false.
00:13:42.748 --> 00:13:45.919
All right, but what if weren't
to set it to anything at all?
00:13:45.919 --> 00:13:50.904
What would the data type be if
we just declared the variable,
00:13:50.904 --> 00:13:53.659
but we never
assigned it a value?
00:13:57.774 --> 00:14:01.499
It would be undefined,
and undefined is basically
00:14:01.499 --> 00:14:05.827
a variable that we just simply
don't know what the data type
00:14:05.827 --> 00:14:08.439
is, nor
what it's value is set to.
00:14:16.876 --> 00:14:19.389
All right, and just to kind
of drive this thought home.
00:14:19.389 --> 00:14:26.086
What if we were to start off
with assigning our variable to
00:14:26.086 --> 00:14:32.643
a literal string using
the double quotation marks, but
00:14:32.643 --> 00:14:40.058
then at some point reassigning
its value to a numerical value?
00:14:40.058 --> 00:14:43.506
See what happens.
00:14:43.506 --> 00:14:47.468
You can see that the type
changes based on the value
00:14:47.468 --> 00:14:49.455
inside of the variable.
00:14:49.455 --> 00:14:51.823
So you know this
would never work,
00:14:51.823 --> 00:14:56.234
this example would never work in
a language like C# without some
00:14:56.234 --> 00:14:57.959
type coercion going on.
00:14:57.959 --> 00:15:02.050
However in JavaScript that's
just how the language works.
00:15:02.050 --> 00:15:03.491
Okay?
00:15:03.491 --> 00:15:07.411
All right so let's move on,
now I already said a moment ago
00:15:07.411 --> 00:15:10.453
that a semi-colon at
the end of a statement is
00:15:10.453 --> 00:15:14.135
the end of statement operator
it completes a thought,
00:15:14.135 --> 00:15:17.497
but not everything you
throw in JavaScript will be
00:15:17.497 --> 00:15:20.235
a complete thought,
only statements.
00:15:20.235 --> 00:15:23.896
And statements are made
up of expressions, and
00:15:23.896 --> 00:15:28.759
expressions are made up of one
or more operators and operands.
00:15:28.759 --> 00:15:30.971
So these are the syntax
rules of JavaScript and
00:15:30.971 --> 00:15:33.760
most programming languages
have similar kinds of rules.
00:15:33.760 --> 00:15:40.832
So, you can't just do
something like this, now.
00:15:43.935 --> 00:15:46.609
If you were to do something
like that, that line of code,
00:15:46.609 --> 00:15:48.242
JavaScript might just ignore it.
00:15:48.242 --> 00:15:51.609
It might not throw an error,
it might just do nothing at all,
00:15:51.609 --> 00:15:55.044
but JavaScript will be thinking
to itself what do you want me to
00:15:55.044 --> 00:15:55.852
do with this?
00:15:55.852 --> 00:15:58.204
It's a useless statement,
00:15:58.204 --> 00:16:01.933
it's not made up of
operators and operands.
00:16:01.933 --> 00:16:07.122
An operand is anything that
we give a name to like
00:16:07.122 --> 00:16:13.233
a function name or a variable
name or some sort of value.
00:16:13.233 --> 00:16:17.781
In this case a number,
in this case a literal string,
00:16:17.781 --> 00:16:20.317
in this case a Boolean value.
00:16:20.317 --> 00:16:22.918
And operators are things
like key words,
00:16:22.918 --> 00:16:26.486
they're like the assignment
operator, the addition or
00:16:26.486 --> 00:16:29.905
concatenation operator
depending on it's context,
00:16:29.905 --> 00:16:32.147
the end of line character and
so on.
00:16:32.147 --> 00:16:36.586
So, statements in JavaScript
have to actually do something.
00:16:36.586 --> 00:16:41.102
A properly formed statement will
either declare, initialize or
00:16:41.102 --> 00:16:44.467
assign a value to a variable Or
retrieve a value,
00:16:44.467 --> 00:16:48.651
like we saw earlier, or it will
call some sort of built-in or
00:16:48.651 --> 00:16:49.980
custom function.
00:16:49.980 --> 00:16:53.855
Or it will evaluate a value
against some other value
00:16:53.855 --> 00:16:58.360
to determine equality, like
we did with our if statement,
00:16:58.360 --> 00:17:01.260
back in lesson number two,
and so on.
00:17:02.500 --> 00:17:03.607
And so, operators and
00:17:03.607 --> 00:17:06.588
operands, we've already seen
several operators at work.
00:17:06.588 --> 00:17:07.932
We've pointed them out,
00:17:07.932 --> 00:17:10.200
like the assignment
operator we used here.
00:17:10.200 --> 00:17:12.509
This typeof looks
like a keyword, but
00:17:12.509 --> 00:17:16.520
is actually an operator, and
there is a bunch of others.
00:17:16.520 --> 00:17:21.233
For example, let's go back to
some other operators that you're
00:17:21.233 --> 00:17:23.469
probably very familiar with.
00:17:23.469 --> 00:17:29.288
So this goes var someValue = 5.
00:17:29.288 --> 00:17:34.224
And then let's go
someValue = 5 + 7, so
00:17:34.224 --> 00:17:39.308
we're using the addition
operator there.
00:17:39.308 --> 00:17:45.591
someValue = 5- 7, so
that's a subtraction operator.
00:17:45.591 --> 00:17:51.700
someValue = 5 * 7,
the multiplication operator.
00:17:51.700 --> 00:17:59.265
someValue = 5 / 7, so
that is the division operator.
00:17:59.265 --> 00:18:02.964
Here is an increment operator,
so using pluses
00:18:02.964 --> 00:18:07.956
next to each other will take the
current value of some value, and
00:18:07.956 --> 00:18:09.443
then add one to it.
00:18:09.443 --> 00:18:11.812
Similarly, we can have the,
00:18:16.040 --> 00:18:21.344
Decrement operator, two minus
signs next to each other.
00:18:21.344 --> 00:18:24.826
And we can use some
shortcuts syntax.
00:18:24.826 --> 00:18:28.052
So something like
the increment operator,
00:18:28.052 --> 00:18:32.071
we can take the value of some
value and then add 7 to it.
00:18:32.071 --> 00:18:35.017
So this is roughly the
equivalent of doing this line of
00:18:35.017 --> 00:18:39.272
code, = someValue + 7,
00:18:39.272 --> 00:18:43.650
we're just able to shorten
it with this syntax, okay?
00:18:44.920 --> 00:18:49.818
And the same would be true,
Of -=,
00:18:56.946 --> 00:19:04.745
*=, /=,
00:19:04.745 --> 00:19:07.980
and so on.
00:19:07.980 --> 00:19:09.245
All right, moving on, and
00:19:09.245 --> 00:19:12.150
I realize at this point, that
this example is not gonna work.
00:19:12.150 --> 00:19:14.210
We'll probably have to comment
out a lot of this code to
00:19:14.210 --> 00:19:15.130
actually get it to run.
00:19:16.150 --> 00:19:19.914
We've already talked about
string concatenation, let me
00:19:19.914 --> 00:19:23.533
just kind of make sure that
we're on the same page there.
00:19:23.533 --> 00:19:26.961
Concatenation, okay, so
00:19:26.961 --> 00:19:33.077
here we're going to go
someValue = "Bob" +.
00:19:33.077 --> 00:19:39.407
So the context determines
what this operator will do.
00:19:39.407 --> 00:19:42.376
Whether it will be math for
an addition, or
00:19:42.376 --> 00:19:44.109
string concatenation,
00:19:44.109 --> 00:19:47.581
where we'll actually
append strings together.
00:19:47.581 --> 00:19:52.357
In this case, I'm appending
together a literal string,
00:19:52.357 --> 00:19:57.043
Bob, plus an empty character,
plus Tabor, all right?
00:20:00.027 --> 00:20:02.645
We already took a look at this,
00:20:02.645 --> 00:20:05.878
where we're able
to take "Bob" +.
00:20:05.878 --> 00:20:09.930
Or actually, I don't think
we did this, let's do this.
00:20:09.930 --> 00:20:13.878
What happens in this case, where
we're talking something that's
00:20:13.878 --> 00:20:17.410
defined as a literal string,
and using the concatenation or
00:20:17.410 --> 00:20:19.920
the addition operator
to a numeric value?
00:20:19.920 --> 00:20:24.970
Which will it be, a string or
a mathematical operator,
00:20:24.970 --> 00:20:28.350
or concatenation or
a addition operator?
00:20:28.350 --> 00:20:30.307
Let's do this, let's get
rid of some stuff here.
00:20:32.864 --> 00:20:34.859
I'm gonna use that
mass-comment out.
00:20:37.261 --> 00:20:38.997
Multi-line comment character,
00:20:38.997 --> 00:20:42.500
to just comment out all of this
code we wrote prior to that.
00:20:42.500 --> 00:20:47.239
Let's go, var someValue,
and here,
00:20:50.154 --> 00:20:57.913
alert(someValue), let's
see what happens here.
00:21:01.939 --> 00:21:05.145
And let's refresh.
00:21:05.145 --> 00:21:06.596
All right, notice what it does.
00:21:06.596 --> 00:21:12.018
It treats 3.14 as a string, and
concatenates the two together.
00:21:12.018 --> 00:21:16.557
So there's some coercion
going on to say, well,
00:21:16.557 --> 00:21:21.866
since we can't add the number
Bob to the number 3.14.
00:21:21.866 --> 00:21:25.698
What we can do is change
3.14 to become a string,
00:21:25.698 --> 00:21:29.950
maybe that's what
the programmer wanted us to do.
00:21:29.950 --> 00:21:34.465
And so JavaScript then
concatenates, coerces 3.14 into
00:21:34.465 --> 00:21:38.211
a string, and then appends
them together, okay?
00:21:44.389 --> 00:21:48.077
All right, so we've already
talked about keywords,
00:21:48.077 --> 00:21:52.048
special keywords in the
JavaScript language, like var.
00:21:52.048 --> 00:21:55.701
And we've seen other
ones like the if,
00:21:55.701 --> 00:22:00.027
and we'll get to some of
the other ones later.
00:22:00.027 --> 00:22:04.199
There's also several
built-in functions and
00:22:04.199 --> 00:22:08.793
methods, we've talked
about the alert function.
00:22:08.793 --> 00:22:11.356
And notice that every
time we call a function,
00:22:11.356 --> 00:22:15.100
we use an opening and closing
parenthesis, now why is that?
00:22:15.100 --> 00:22:17.710
Because those parentheses
are operators,
00:22:17.710 --> 00:22:20.970
they're the function
invocation operators.
00:22:20.970 --> 00:22:24.600
If you attempt to just
call alert without that,
00:22:24.600 --> 00:22:26.210
I'm not even sure it will work.
00:22:26.210 --> 00:22:29.730
Let's just try it for fun,
let's see what happens.
00:22:30.930 --> 00:22:32.620
It might work, but
00:22:32.620 --> 00:22:35.720
we're not going to get any
results that we would expect.
00:22:35.720 --> 00:22:37.930
All right, it doesn't even work,
00:22:37.930 --> 00:22:40.160
because we didn't
invoke the function.
00:22:40.160 --> 00:22:42.600
We didn't call,
we didn't execute the function.
00:22:43.720 --> 00:22:45.330
In order to execute
the function,
00:22:45.330 --> 00:22:48.080
you have to have
the right operators,
00:22:48.080 --> 00:22:52.260
which are the opening and
closing parentheses.
00:22:54.070 --> 00:22:55.580
We'll talk more
about functions and
00:22:55.580 --> 00:22:58.960
the importance of these
parentheses when declaring or
00:22:58.960 --> 00:23:01.330
defining a custom function,
as well.
00:23:03.234 --> 00:23:04.029
All right, so
00:23:04.029 --> 00:23:07.343
we've covered a couple of
the built-in functions so far,
00:23:07.343 --> 00:23:11.003
like alert and getElementById,
in one of the previous lessons.
00:23:11.003 --> 00:23:13.286
We couldn't possibly cover
all of the built-in functions
00:23:13.286 --> 00:23:14.892
available in JavaScript
in this series.
00:23:14.892 --> 00:23:18.697
But if you want a reference
card, or some sort of listing,
00:23:18.697 --> 00:23:22.902
just go to Bing and search for
JavaScript built-in functions.
00:23:22.902 --> 00:23:26.891
And you'll find many different
sites that list dozens of
00:23:26.891 --> 00:23:29.636
built-in JavaScript functions,
and
00:23:29.636 --> 00:23:32.140
you can learn their
capabilities.
00:23:32.140 --> 00:23:34.970
Many of them are based
around mathematical
00:23:34.970 --> 00:23:38.270
type of functions or
dealing with strings.
00:23:38.270 --> 00:23:43.140
Like splitting them apart,
choosing sub sections or
00:23:43.140 --> 00:23:46.360
sub strings from a literal
string,and so on, all right?
00:23:46.360 --> 00:23:48.450
So one last topic
before we wrap up,
00:23:48.450 --> 00:23:51.140
and I wanna talk about
escaping strings.
00:23:51.140 --> 00:23:54.628
So what if, for example, we
want to do something like this?
00:24:01.989 --> 00:24:06.703
I wanna say,
my "so called" life.
00:24:06.703 --> 00:24:09.371
All right, what's going
to happen here, well,
00:24:09.371 --> 00:24:16.499
let's, Let's see what happens.
00:24:21.654 --> 00:24:23.189
All right,
nothing at all happens,
00:24:23.189 --> 00:24:24.534
because we have a syntax error.
00:24:24.534 --> 00:24:26.575
And the syntax error, well,
00:24:26.575 --> 00:24:30.014
let's let our F12 tools
tell us what happened.
00:24:33.856 --> 00:24:36.748
All right, so
we can see that it expected
00:24:36.748 --> 00:24:41.870
an end-of-line character, and
that's not all that helpful.
00:24:41.870 --> 00:24:44.801
But basically,
what it's telling us is that It
00:24:44.801 --> 00:24:47.378
expected this to be
one complete string.
00:24:47.378 --> 00:24:50.767
It would have expected the next
character to either be,
00:24:50.767 --> 00:24:54.082
to try to append something to
it, or to end the line, or
00:24:54.082 --> 00:24:55.830
whatever the case might be.
00:24:55.830 --> 00:24:58.965
Now we intended for this to
be One literal string, and
00:24:58.965 --> 00:25:02.449
in the middle of that literal
string to use that character,
00:25:02.449 --> 00:25:04.750
that double quote
character again, so
00:25:04.750 --> 00:25:07.500
that it prints it out to
the screen correctly.
00:25:07.500 --> 00:25:08.840
In order to get this
to work correctly,
00:25:08.840 --> 00:25:10.480
we're gonna have to use
an escape character,
00:25:10.480 --> 00:25:12.280
which is the backslash.
00:25:12.280 --> 00:25:14.970
When I use the backslash in
front of the double quote
00:25:14.970 --> 00:25:18.750
character in both of these
cases, it won't treat them as
00:25:18.750 --> 00:25:22.110
a double quote, it'll treat
them as a literal double quote.
00:25:22.110 --> 00:25:26.673
So that if we hopefully do this
right, refresh the page, you can
00:25:26.673 --> 00:25:31.080
see it embeds the double quotes
inside correctly, awesome.
00:25:31.080 --> 00:25:33.082
And there are some other ways,
00:25:33.082 --> 00:25:35.783
some other applications
of this as well.
00:25:35.783 --> 00:25:38.310
Let's comment that out and
go to the next line.
00:25:43.701 --> 00:25:44.653
And this time,
00:25:44.653 --> 00:25:48.380
I'm gonna create a literal
string by using single quotes.
00:25:48.380 --> 00:25:52.470
Now I recommend you always
use double quotes for
00:25:52.470 --> 00:25:53.440
literal strings, and
00:25:53.440 --> 00:25:56.160
single quotes whenever you need
to pass a value as an argument
00:25:56.160 --> 00:25:58.130
into a function,
talk more about that later.
00:26:00.080 --> 00:26:03.760
May not mean much to you now,
but you can declare a literal
00:26:03.760 --> 00:26:05.700
string by just using
single quote marks.
00:26:05.700 --> 00:26:06.630
So I can do this.
00:26:08.230 --> 00:26:10.590
I'm, and I'll come back
to that in a moment,
00:26:10.590 --> 00:26:13.000
pretty sure this will work.
00:26:14.080 --> 00:26:16.821
Let's go ahead and just get
this simple example working.
00:26:16.821 --> 00:26:22.114
And that works, but
what if I wanted
00:26:22.114 --> 00:26:27.238
to add the single
quote into this?
00:26:32.937 --> 00:26:33.962
And you can see,
it won't work at all.
00:26:33.962 --> 00:26:35.887
If we were to go to the script,
00:26:35.887 --> 00:26:38.850
we would get that
same error message.
00:26:38.850 --> 00:26:42.120
And the reason is because we
need to put the backslash
00:26:43.310 --> 00:26:44.100
single quote.
00:26:44.100 --> 00:26:46.170
That turns it into
a literal single quote,
00:26:46.170 --> 00:26:52.830
not a,
Literal string operator, okay?
00:26:52.830 --> 00:26:55.380
So now this will work.
00:26:57.273 --> 00:26:59.140
Yep, it does, great.
00:27:03.789 --> 00:27:07.510
And one last escape
sequence that we can use,
00:27:11.221 --> 00:27:17.556
With literal strings,
Is to use the line feed or
00:27:17.556 --> 00:27:22.965
the return character, so
\r is the return character and
00:27:22.965 --> 00:27:29.090
that's roughly equivalent to
the new line character, so \n.
00:27:29.090 --> 00:27:33.112
And we'll see
the results of this.
00:27:33.112 --> 00:27:34.770
Let's refresh one more time.
00:27:37.351 --> 00:27:38.673
Bob was here.
00:27:38.673 --> 00:27:43.091
It put each word on a separate
line, because of the return
00:27:43.091 --> 00:27:46.957
escape sequence or
the new line escape sequence,
00:27:46.957 --> 00:27:50.929
which in this particular
case is roughly the same.
00:27:53.000 --> 00:27:55.149
All right, so I think that's
enough for this lesson.
00:27:55.149 --> 00:27:58.890
In this lesson, to recap, we
talked about declaring variables
00:27:58.890 --> 00:28:00.840
and initializing their values.
00:28:00.840 --> 00:28:04.560
We talked about the data
types that are inferred for
00:28:04.560 --> 00:28:08.480
your variables based on the data
that is currently inside of that
00:28:08.480 --> 00:28:09.240
variable.
00:28:09.240 --> 00:28:12.284
We talked about a variable just
being a space in the computer's
00:28:12.284 --> 00:28:13.949
memory where we can
store stuff and
00:28:13.949 --> 00:28:15.512
retrieve it at some later time.
00:28:15.512 --> 00:28:18.404
We looked at what happens when
you don't have anything inside
00:28:18.404 --> 00:28:20.550
of a variable,
it becomes undefined.
00:28:20.550 --> 00:28:23.780
We don't know its type and
we don't know its value, right?
00:28:23.780 --> 00:28:28.772
Then we talked about the various
simple data types, string,
00:28:28.772 --> 00:28:30.404
number, Boolean,
00:28:30.404 --> 00:28:35.114
also the undefined data type
if that's truly a data type.
00:28:35.114 --> 00:28:38.542
We'll learn about some other
more complicated data types,
00:28:38.542 --> 00:28:42.101
like object, function, which
is really object, and array,
00:28:42.101 --> 00:28:45.543
which is really object, [LAUGH]
okay, a little bit later on.
00:28:45.543 --> 00:28:47.983
We talked about
the various operators and
00:28:47.983 --> 00:28:50.360
looked through just
quite a few of them.
00:28:50.360 --> 00:28:53.770
The mathematical operators,
some of the string operators.
00:28:53.770 --> 00:28:56.140
We looked at escape sequences.
00:28:56.140 --> 00:28:59.610
We talked about how to write
properly formed JavaScript.
00:28:59.610 --> 00:29:02.230
Expressions make
up statements and
00:29:02.230 --> 00:29:06.040
an expression is a combination
of operators and operands.
00:29:06.040 --> 00:29:08.832
We said operators
are things that have names,
00:29:08.832 --> 00:29:11.337
like our variable,
or they have values,
00:29:11.337 --> 00:29:14.428
like our literal strings or
our numerical values.
00:29:14.428 --> 00:29:17.765
And then the operators are all
those other things that we kind
00:29:17.765 --> 00:29:20.070
of glue those together with.
00:29:20.070 --> 00:29:23.360
And together,
they form complete thoughts or
00:29:23.360 --> 00:29:26.360
complete statements
inside of JavaScript.
00:29:26.360 --> 00:29:27.147
All right, so
that's enough for this lesson.
00:29:27.147 --> 00:29:28.460
We'll see you in the next one.
00:29:28.460 --> 00:29:30.170
You're doing great,
hang in there.
00:29:30.170 --> 00:29:31.665
Thank you.
00:29:37.356 --> 00:29:41.320
[MUSIC]