So what exactly is JavaScript then?
Well, it is the third language
of those three main languages,
which you have to know as a web developer.
It's one of those languages which we can use
for writing code,
which is then sent back to us from a server.
But more specifically,
JavaScript is a programming language
that can be executed by browsers.
Well, that might sound unimpressive.
Wasn't that already the case for HTML and CSS.
Yes, Kind of, though there are always arguments,
whether HTML and CSS are real programming languages or not,
but we don't have to dive into that right now.
Of course they are after all, you build something with it.
But the main difference is that, With Java script,
you can solve a totally different problem
than you can with HTML and CSS.
And when it comes to that problem,
which I'll describe in a second JavaScript indeed is the
only programming language that can be executed by browsers
like this.
And that of course now brings us to the problem,
which is being solved by JavaScript. Why do we need it?
Well, we have HTML and CSS for defining our content
and the structure of that content
and for adding the semantics
and for styling the content then,
but we have Java script for actually changing the page,
After it was loaded
for adding interactivity to page you're currently viewing.
And that might be a bit hard to grasp.
So let me give you a concrete example.
I prepared a simple demo project here,
which contains some JavaScript code,
which you of course can't understand right now.
We're going to write this code together in this course,
but I'm giving you that code right now,
already so that we can see it in action so that we
understand why we might want to use Java script,
before we then learn it step by step.
Now,
if I start this project here by opening this HTML page,
with my life server extension again,
then we see something like this and I'm zoomed in
quite a bit here, which is why it is that big for me.
Now, here we get an input field, a label, a button,
and then this annotation,
this extra text next to the input field,
which should signal to us how many characters are left until
we exceeded the max length off that input field.
Because before we start typing here,
it is worth pointing out that this input field has,
the max length attribute on it.
We learned about dad and about those validation attributes
in the forums section.
And because we have that attribute on it,
we can't enter more than 60 characters,
but if I start typing here,
then you'll notice that this number here,
actually also updates as I continue typing.
And it's tells me how many characters I have left.
And once I reached 10 characters or less,
I even get an extra warning effect telling me,
that I'm running out of characters here.
And ultimately once I hit those 60 characters,
I can't type anymore,
now that's can't type anymore effect is coming directly from
that input field because of this attribute.
But this warning effect that orange background color,
and this life output here, that's JavaScript in action,
because what we actually do here is
we are changing what we see on the page.
We are changing the content and the structure of this page
with JavaScript behind the scenes.
I mean, it might not be that obvious, but keep in mind that,
this text here is not entered by the user,
instead it's output by the browser.
And yet it changes with every keystroke.
And that happens because behind the scenes,
JavaScript is doing some work.
It's watching what we enter here, counting our characters,
and then it updates detects here and to colors of this
text and the background color here based on the length of
our input.
And we can also see it as if we opened the developer tools,
the elements tab here. If I do that, then,
we see if I select this span here, that when I type here,
this text here actually updates as I type,
this purple flashing, which you see here in my output,
that means that this content of the webpage was updated.
It was updated by Java script. In this case,
if something flashes in purple here on the right,
it means that this HTML code is being updated,
is being changed. And of course it's not our original code.
That's being changed.
That's the code we as a developer wrote after all,
but it's the loaded code, the parsed code evaluated,
and displayed by the browser,
which updates here behind the scenes.
Well, and that's what JavaScript can do.
And it can do way more than that.
There are many possible use cases and applications,
and examples for JavaScript. You could, for example,
use JavaScript to fetch some data behind the scenes,
without fetching a brand new HTML page from a server,
to update some data, which has occurred,
visible on the screen.
For example,
think about pages that display weber or stocks data,
and update that data. Whilst you are on the page,
you could display a timer or set a timer behind the scenes
that does something once it expires.
Think about online banking,
where you sometimes are locked out after five minutes,
that's JavaScript doing some work. For example,
you could also validate user input
and show a more fine tuned,
tailored error message
and adding more fine tuned error styles.
Then you can do it with just the built in HTML and CSS
forums features. You could use JavaScript to display,
and manage more complex overlays,
which might be presented on the screen.
You could use it for reordering or hiding and showing,
or removing elements, which are on the screen.
And for example,
a list on your website where you can drag and drop items,
and they have, of course,
what you see on the screen changes,
as you are dragging and dropping,
you could also leverage Java scripts to keep,
parts of your websites,
or maybe even your entire websites up and running to a
certain extent, even if the internet connection is lost,
these are all things you can do with JavaScript.
And we're going to see many of these examples,
and other examples throughout this course,
once we know a bit more about Java script.