Professional Documents
Culture Documents
Lecture6 720p en
Lecture6 720p en
BRIAN YU: Welcome back, everyone, to Web Programming with Python and JavaScript.
And last time, we took a look at JavaScript--
that language that ran inside of a user's web browser, client side,
and allowed us to do a number of things to make our web pages more interactive.
JavaScript enabled us to display alerts, to be
able to manipulate the DOM, the structure of the web page,
in order to add content or see what content was already there.
And it also let us respond to user events.
When a user clicked on a button or submitted a form or typed something
into an input field, we could have JavaScript functions
run that responded to those events in order
to make our web pages more interactive.
Today, we're going to continue that conversation, in particular taking
a look at user interface design, looking at some common paradigms in terms
of user interfaces and how we can leverage JavaScript
to be able to achieve those goals to create interactive user interfaces that
will be valuable when users are interacting with our applications.
So one of the more common paradigms, especially nowadays, in web programming
is the idea of single-page applications.
Thus far, if we've wanted to create a web application that
has multiple different pages, we've generally
done that via multiple different routes in our Django web application,
for example, where you go to slash something to get one page
and slash something else in order to get another page.
But commonly, using JavaScript, we have the ability
to create single-page applications where the entire web page is really
just a single page, and then we use JavaScript to manipulate the DOM,
to replace portions of the page with things we want to replace.
And this has a number of advantages, one of them being that we only
need to make modifications to the part of the page that is actually changing.
If, for example, you have five different pages,
but the general layout and structure of the page
is pretty similar, when you switch between pages
rather than load an entirely new page, you
can just load the part of the page that is changing.
And this is especially helpful for applications
that are changing quite frequently.
So let's take a look now at how we could implement, for example,
a very simple single-page application.
So let's imagine, for example, that we want a single-page application that
just displays three different pages, but all included in the same page.
I'll go ahead and create a new file that I'll call singlepage.html,
inside of which we'll include our usual HTML tags.