Explore
For Enterprise
Join for Free
Log In

Kunst und Geisteswissenschaften
Wirtschaft
Informatik
Datenverarbeitung
Informationstechnologie
Gesundheit
Mathematik und Logik
Persönliche Entwicklung
Physik und Ingenieurwesen
Sozialwissenschaften
Sprachen lernen
Abschlüsse
Zertifikate

Alle Bereiche erkunden

Blättern
Suche
Für Unternehmen
Anmelden
Kostenlose Teilnahme

The Console

Loading...

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

University of London

4.5 (3,311 Bewertungen) | 94K Teilnehmer angemeldet

Kurs 1 von 6 in Responsive Website Development and Design Spezialisierung

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.

Lehrplan anzeigen

Kompetenzen, die Sie erwerben

Jquery, Html, JavaScript, Cascading Style Sheets (CCS)

Bewertungen

4.5 (3,311 Bewertungen)

5 stars
2,211 ratings
4 stars
775 ratings
3 stars
225 ratings
2 stars
63 ratings
1 star
37 ratings

JF

Feb 14, 2016

Bright instructors delivering succinct and interesting content, with quick-paced videos and quizzes make a great learning experience. I am really impressed! Thank you, University of London people!

SS

Jan 03, 2016

It's very good for beginner who already have hands in programming. it gives very basic and important concepts about HTML, CSS and javascript. it also gives a brief history of internet and HTML.

Aus der Unterrichtseinheit

Beginning JavaScript

Welcome to the third module of 'Responsive website basics'. <p>In this module we will write simple JavaScript programs and learn how to write programs that can respond to user input such as clicking on HTML elements. We will also take a look at JavaScript functions and use jQuery to manipulate web pages.</p>Finally, you will learn how to write your own javaScript functions including anonymous functions. <p> Looking forward to working with you this week! <p> - Matthew and Marco

The Console7:20

Unterrichtet von

Dr Matthew Yee-King
Lecturer
Dr Marco Gillies
Senior Lecturer
Dr Kate Devlin
Senior Lecturer

Skript

[MUSIC]

So we've got our first interactive web page in the last video.

Now I want to start taking you through other interactive techniques.

Now in this video I'm going to show you something very useful, that is not so

much for displaying the webpage itself, but it's a very useful

thing when you're programming to be able to find out what your programs doing and

quickly tests stuff in a complex program and it's something called the console.

So if you look at that browser, Matthew has

probably already shown you some of the developer tools.

So if we open up View, Developer, JavaScript Console,

I'm using Chrome here, each browser has something different.

I would advise using Chrome for this moot, just so you're using the same thing,

but you can look up the documentation of your browser if you

really want to use a different browser.

View, develop a JavaScript console.

Matthew has shown you something similar to this,

where you can sort of get underneath the hood of the webpage.

And this is quite a useful bit.

This part of it is where you can actually send messages out sort of print stuff out,

in order to see what's going on in your program.

So what I'm going to do here is actually do type some code in.

So you can actually type JavaScript in here.

Don't worry too much about what this is saying for now.

I'll go through in lots of detail.

But if I type that in, it says hello back to me, sort of, it prints that out

back to the console, which is fine in itself, but actually becomes very useful

when you can start getting your web page to do something similar.

So, what I now want to do is related different version of

this web page where it's still the same page,

it's still got the same H1 but clicking on it does something different.

And what it does is, is it prints hello to the console.

You'll see as I print it multiple times

to save space because it's exactly the same thing.

It's not printing it out again,

it's just counting the number of times I've printed it.

So let's have a quick look at this code.

Again it's pretty much the same as last time,

except we've got something else in our onclick and it's called console.log.

And I want to talk a little bit about what exactly that means.

Before I start looking at the syntax I want to

talk very briefly about the bits that can make up a web page.

In the previous example we talked about we showed you an alert.

An alert is just an alert, it's not part of the web page.

But most of what you're doing when you're web programming, it's actually about

interacting with specific things in your browser or webpage.

At the highest level, you've got a browser window, which is everything

in your particular window or tab, everything that relates to your webpage.

Within that window you've got your actual document, so this is the actual html that

you're currently displaying, and that document consists of a number of elements.

This simple document consists of one element, H1.

But there are other things in the window as well, and

the thing we just looked at is the console.

So, we can also interact with stuff that is not part of our document,

but part of the whole browser window.

Each of these things is what we call an object, so

that's something that we can interact with via JavaScript and

and that sort of interacting with individual objects

underlies the vast majority of what we're going to do in JavaScript.

So I want to just show you an outline of how you do that.

So this is the line of code that we put in our latest page.

It looks quite similar to the alert we had last time.

We're calling a function, just like the alert.

So this log is calling a function.

It's got an argument, hello.

Very similar to alert.

But we've got this other thing.

We've got this console, and that is why sort is an object

that represents the console bit of the web page.

So we're calling this function on this particular object.

That's important because it now ties functionality to things.

We're not calling it on the window, we're not calling it on the document or

an HTML element.

We're calling it on an object, but we could very easily, and we will,

in the next few videos, core functionality on particular html elements as well.

This particular functionality has been called on the console and

the last thing I want to point out is this dot.

That's really important.

That's what links between the object and the function we're calling on that object.

So we always need to put a dot, to join those two things together.

This is quite a simple line of code, but it, as I've said,

it does underlie everything we're going to do in the next few videos.

In fact, the rest of the specialization,

because most of the time we're going to be manipulating things in our web page.

And as we look at the next videos where we're gonna see that most of the time

we're gonna wanna manipulate elements and attributes and things like that.

And this technique is what we're gonna use.

But Console.log is a very simple way of doing that.

To recap then, if I reload the page,

every time I click here we're doing this console log.

And it's a good illustration of what I wanted to show,

which is calling functions and objects.

But it's also a very useful thing.

As you're developing webpages and testing them,

a really nice way of sort of starting out testing is to print stuff out to

the console before you do more complex JavaScript operations.

So in a sense, this is why I wanted to show it to you first,

because this is the way I would naturally start coding.

So, oh, I've got to respond to a mouse click.

Well, before I do all the complicated things I really want to happen,

let's make sure I can get that mouse click out

by printing to the console cuz I know that always works.

And then when I do some sort of more complex manipulation of the HTML elements,

I know that at least receiving a mouse click doesn't work, so

if I don't see anything,

it's the fault of the HTML manipulation code, not my mouse click code.

So I would also sorta make good use of the consoles as a debugging technique.

So with that, I think we're now ready in the next video to start properly

looking at how to manipulate your web page and create a truly interactive web page.

[MUSIC]

Durchsuchen Sie unseren Katalog

Melden Sie sich kostenlos an und erhalten Sie individuelle Empfehlungen, Aktualisierungen und Angebote.

Coursera arbeitet mit erstklassigen Universitäten und Organisationen zusammen, um Online-Kurse anzubieten und dadurch universellen Zugriff auf die weltweit beste Ausbildung zu ermöglichen.

© 2019 Coursera Inc. Alle Rechte vorbehalten.

Aus dem App Store herunterladen

Erhältlich bei Google Play

Coursera
Info
Leitung
Jobs
Katalog
Zertifikate
MasterTrack™-Zertifikate
Abschlüsse
Für Unternehmen
Für Regierungen

Community
Learners
Partners
Developers
Beta Testers
Translators

Verbinden
Blog
Facebook
LinkedIn
Twitter
Instagram
Youtube
Tech-Blog

Mehr
Nutzungsbedingungen/AGB
Datenschutz
Hilfe
Barrierefreiheit
Presse
Kontakt
Verzeichnis
Partnerunternehmen