eReader example

Loading...

From the course by University of London

Responsive Website Basics: Code with HTML, CSS, and JavaScript

3052 ratings

University of London

Responsive Website Basics: Code with HTML, CSS, and JavaScript

3052 ratings

Course 1 of 6 in the Specialization Responsive Website Development and Design

In this course you will learn three key website programming and design languages: HTML, CSS and JavaScript. You will create a web page using basic elements to control layout and style. Additionally, your web page will support interactivity. At the end of the course, you will be able to: 1. Define the purpose of HTML, CSS and JavaScript 2. Make a simple web page using HTML 3. Use CSS to control text styles and layout 4. Use CSS libraries such as Bootstrap to create responsive layouts 5. Use JavaScript variables and functions 6. Manipulate web page content using JavaScript 7. Respond to user input using JavaScript In this course, you will complete: 2 assignments writing HTML, CSS and JavaScript, each taking ~1 hour to complete 4 quizzes, each taking ~20 minutes to complete 1 programming exercise~30 minutes to complete multiple practice quizzes, each taking ~5 minutes to complete Participation in or completion of this online course will not confer academic credit for University of London programmes.

From the lesson

Going deeper into JavaScript

Welcome to the final module of 'Responsive website basics'. <p>In this final section of the course we will define JavaScript variables and write simple JavaScript programs that use and change the values of variables. </p>We'll also write if statements to control the flow of a JavaScript program, use boolean variables in conjunction with if statements and write javaScript in the context of moderately complex web applications. <p> Enjoy! <p> - Matthew and Marco

eReader example13:56

Meet the Instructors

Dr Matthew Yee-King
Lecturer
Computing Department, Goldsmiths, University of London
Dr Marco Gillies
Senior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate Devlin
Senior Lecturer
Department of Computing, Goldsmiths

[MUSIC]

Well done.

You're really getting into depth in JavaScript, and

over the last few weeks of this course, you've learned HTML, CSS, JavaScript.

You're really getting to grips with web programming.

You will soon be ready to really go on and make your first full interactive website.

One of the things that we did was look at this really nice slideshow image gallery

example, and how that uses a lot of all those languages HTML,

CSS, JavaScript, used variables, used if statements, and

I really encourage you to download the source code and look through it.

Read through it. There are couple of things in

there that I didn't have time to mention in the videos.

I don't want you going away and thinking the things we given you are just for

making image galleries.

So, in this last lesson, I wanna go through another example,

which on the surface looks pretty different, but

actually behind the scenes the design, the functionality,

and more importantly the code, are really similar to what we have seen before.

So here it is.

It is an e-reader.

It's designed to read a book,

well in this case a play, Hamlet by William Shakespeare.

On the left hand side here we've got thumbnails of all the chapters, and

we are able to click on one of those and read it,

and we can scroll down and do the reading, and

when we reach the end of this scene, we can click on it to move forward.

If I actually want to move back to read the previous scene,

I can click on the left hand side of the window,

and clicking on the right hand side moves me forward.

So, it's just like a lot of e-readers work.

You've got a table of contents,

you're able to see the overall structure of the book, or in this case, the play,

and you've got a main reader panel, and clicking moves you forwards and backwards.

You should hopefully already see that, structurally,

this is very similar to what we were looking for.

Iit's a very different application area, but the structure is the same.

You've got a bunch of chapters in this case, not images, and

you aim to navigate either by clicking on them or moving backwards and forwards.

So, I'm gonna quickly give you an overview of the code.

Again, I'm not gonna go into full detail on this code because

you're gonna be able to download it yourself in the ZIP, and

I'd really encourage you to read it through.

It's fully commented.

All the code that you'll be able to download is fully commented, but

some of the examples I showed you in the videos didn't have comments,

just for space reasons.

So, here's the code.

It's got the usual libraries included.

It's got a bootstrap layout.

In this case, I've got one big row with two columns.

One column is for the thumbnails, the chapter outline.

The other column is for the main view.

Here I have chapter outlines.

I've actually got an unordered list.

It's actually got two classes, both these are for bootstrap.

It says it's a list group, that controls how bootstrap renders it.

That gives it that nice appearance, and it's scrollable.

I've given it an ID chapter list.

These are the actual elements in it.

We've got each of the chapter items this time is a list item,

kinda makes sense, this is a list.

I've got an ID, chapter zero, as you note.

Just as in the previous example, the ID contains a number.

It's got two classes, list-group-item, that's for boot strap,

that tells it how to lay it out, and chapter thumbnail, that's our one.

We're going to use that later in our own codes,

control the functionality of this page.

The contents is just the contents of that scene.

This is just the title page.

Let's make it a little bit smaller so it's a bit clearer.

As we'll see as we go down here, we've got the incomplete act.

This is a pretty big HTML file because I've got the first five scenes,

the first act of Hamlet's copied into this HTML file.

Occasionally, we stop to open the new chapter.

In some ways this isn't really the greatest way of doing it,

copying all the text into an HTML file, and, in fact,

if you go onto the next course in this specialization, responsive web design,

we'll actually look carefully about how to get around this, and

separate out the content, the text of the website from the structure of the HTML,

but for now we'll do it this way.

So, I can scroll down all the way through, and

the real business happens near the bottom

I'll show you, just before we hit the JavaScript, we've got this.

This is the div where the main text is gonna go.

It starts off empty because we're gonna fill it up using JavaScript,

not directly in HTML.

Also it's got this class, well.

Well is just this nice view that you have.

If we look at the actual page it's this nice grey indented view.

It's a bootstrap feature.

Then the important stuff in the script.

This is exactly the same.

We've got a counter variable.

Very similar here, we take one of the thumbnails.

We've got a click function which selects it.

The code is almost the same, except we're not setting the source attribute,

we're just directly setting the html.

So far very similar to our previous example, and this current example.

I've done a couple of special things.

One thing that was missing in the last example is actually by selecting on it,

when you clicked on an element,

it wasn't actually updating the value of the counter.

So, you could actually get lost.

So, you'd click on an element, but it wouldn't restart counting from that one.

Actually, to make it work properly, if you click on element three,

you need to set the counts to element three.

How do we do that?

Well, this line of code gets the id attributes of this,

which is the one element we clicked on, so that's the actual thumbnail we clicked on.

So we're getting it's id.

We know it's id ends in a number.

This is a little complicated bit of code that does two important things.

First it gets the last character in that id,

which we know is going to be zero, one, two, three, four,

and it's commonly characters bit of text, we turn this into a number.

Idslice.

So, slice is if you've got a string of text,

it gets a sub string of that, so only part of that text.

Passing in minus one just gets you the last character in it.

So, you've got a character parseInt, just turns that into a number.

You can look up both of these functions in JavaScript documentation, and

I really encourage you to use the JavaScript documentation in the future.

I can only tell you so much about what you can do in JavaScript.

There's so, so, so much more.

Go ahead and look up and find out, if you want to,

how do I join two strings together?

Look up Google, or Yahoo, or whatever, how do I join two strings,

and you'll get an answer.

It's actually the join function, but you don't need me to tell you that,

you can look it up.

There's lots and lots documentation out there.

So, that's one nice new feature that I've added,

the ability to properly update the counter.

This is pretty much the same as a previous example.

We've also got this click function on the main viewer, and as we looked

when we click the main viewer, what it does is it moves forward or backwards.

We don't have separate forward or backwards buttons.

We do need to know whether to move forwards or backwards, and

that depends on where we've clicked inside this viewer.

So, we need to do something a little bit special.

I've got this event.offsetX.

Event is an object.

It represents the event that happened when I clicked.

So, it's got some data that relate to the click.

The important thing I want to know is where was the click inside

the element I've clicked on, and that's given by this sub variable,

what we call member variable, called offset.x.

There are very different variants.

So, for example, if I want where did I do it on the entire page?

It's something different.

Look that up.

In this case it's offset x, and

what I want to do is figure out where offset x is on the element.

Is it on the left hand side or on the right hand side?

So, I take the width of this,

which is the entire sort of big main viewer, and multiply it by three.

So, that gives us a position that's 30% of the way across the viewer.

So if I'm 30% across the viewer, it means I've clicked on the left.

If I'm on the other 70%, it means I clicked on the right.

That's a nice way of doing it.

So, most of the time you're to be going forward, so

you'll want a bit more space for going forward, and

you'll only want to click on the left-hand side if you're going backwards.

So if I've clicked less than 30%, it means I'm going left.

So, I did counter equals counter minus one, reducing the count,

otherwise, counting forwards.

Then I'm doing the same things.

I'm using my if statement.

I'm doing what I did last time, which is, if I've reached the end, or

in this case the beginning, I need to do something special.

Actually, instead of looping around, in this case, I just want to stop.

So, if my count is less than zero,

it means I've gone beyond the beginning of it.

I just want to stay at zero.

I want to tell you one last clever bit, which is

this bit here, which is how I know I've reached the end.

In the last example, I just write that number four,

I knew how many one it is, but it's better not to do that.

It's better to just actually figure out, cuz I might change the number, and

I might forget to update the bit of code that says there's four.

So, I'm gonna actually get it directly from the fundamentals.

What I'm doing here is this bit of jquery, that's getting all of the chapter

thumbnails, so all the elements that have class chapter thumbnail,

and I'm doing dot length, and what that does is just tell me how many there are.

So, jquery chapter thumbnails dot length is the number of chapter

thumbnails I've got.

That's great, because I can use it directly.

Here we're saying, if we're more than the number of chapter thumbnails, so

we're more than the number of chapters, set the count to record, see,

make that a little bit clearer, chapter thumbnails dot length minus 1.

Because the chapter thumbnails, we actually always count from 0,

the last one is chapter thumbnails minus one.

That's just a sort of little odd feature.

I'll come back to that in the next course of this specialization to explain it.

Then the last thing we do is exactly the same as we did last time,

we just call click.

So, theres another complete example, and

what I really want to show you is that you've learned a lot of skills.

You know a lot of stuff now, and you've seen how to create a great gallery app.

It's not just about creating gallery apps.

All of those bits of functionality that you've learned and

the things you need to know how to do can be used in lots and lots of ways.

So, it's time now, not to just go and rebuild something I've built,

but be creative and think hard about how you can do something new.

As I've said just early on in this video, you

don't just have to follow what I've done in these videos, and what Matthew's done.

There's masses of documentation out there on HTML, CSS, JavaScript, and jquery.

Everything's out there.

If you want to know how to do something, just use a search engine, and

there's loads of explanations everywhere.

There's loads of support.

That's how I learn.

This is how I do it.

There's loads of cases in preparing this course where, I don't

actually know how to do something, or I couldn't remember how to do something.

It's like how do you do that again?

What's the jquery function to do this?

What's the right selective for that?

I just look it up.

Information's all there, so don't feel yourself limited by what you've seen.

Be creative.

Think what you want to do.

Go and look up in all this fantastic documentation, and

produce a website that you really can feel is your own.

So, really looking forward to seeing those websites, and really enjoyed teaching you.

[MUSIC]

Explore our Catalog

Join for free and get personalized recommendations, updates and offers.

Coursera provides universal access to the world’s best education, partnering with top universities and organizations to offer courses online.

© 2019 Coursera Inc. All rights reserved.

Download on the App Store

Get it on Google Play