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
Script tag
Loading...
Из курса от партнера University of London
Responsive Website Basics: Code with HTML, CSS, and JavaScript
2841 оценки
University of London
2841 оценки
Курс 1 из 6 — Specialization Responsive Website Development and Design
Из урока
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
Познакомьтесь с преподавателями
Dr Matthew Yee-KingLecturer
Computing Department, Goldsmiths, University of London
Dr Marco GilliesSenior Lecturer
Computing Department, Goldsmiths, University of London
Dr Kate DevlinSenior Lecturer
Department of Computing, Goldsmiths
[MUSIC]
Hello again.
So in the last video we showed you the really important technique that make it
possible to change the webpage in response to user clicks and user interaction.
So, That's really powerful, but to make full use of it, we really
want to be able to write quite complex programs, and so far, all we've done,
each of the little bits of JavaScript we've done has only ever done one thing.
We want complex JavaScript that can do many, many things in response to users,
so I want to look at how we can make,
restructure our webpages to allow us to use more complex JavaScript.
So why can't we do that?
Let's recap what we've done before.
So we've got our HTML tag which has got onclick attribute and
we've got a script in here.
If we want to make the script more complex, we need to add more and
more JavaScript but it's gonna look really sort of clunky to have
a load of JavaScript inside a single HTML attribute.
We really want to be able to sort of expand that out.
We want to have actually a lot of space to write really sort of really quite complex
JavaScript code that has many, many lines and that does many things.
And we want to be able to lay it out nicely so we can read it well and
it's all very clear.
And putting it inside an attribute just doesn't allow us to do that very well.
So I'm gonna show you something else.
So in the last lecture we actually already had a look at the script tag.
And I'm gonna use that in a different way.
So last time we used the script tag to bring in
a JavaScript library to sort of import jQuery so we could use this in our code.
In this current time,
we're gonna create and use the script tag to start creating our own code.
So, here is what the script tag looks like.
It's called script.
It has a type.
That's really important.
The type of this script is text/ javascript.
What that means is that the script consists of text.
I mean it's typewritten text, and that text is a JavaScript program.
And most of the time when we're working with scripts, they will be JavaScript,
but actually in the next MOOC of this specialization,
we'll see an example where it isn't JavaScript.
And then, inside this tag, we have the actual script itself.
So, this is actual JavaScript code,
this is exactly the same JavaScript code we saw in the last video.
So, if you look at what this actually does, let's grab this script here,
called script tag, and load it up.
It just loads, I mean, you didn't even really even see that, let's
reload the previous page and load it.
It loads the page and it immediately
changes the hello to goodbye so it immediately runs that code.
Let's have a look at what that's doing and why it is.
As usual we're gonna import jQuery, we'll always do that in future.
We've got our body, but it no longer has an onclick attribute.
The code is no longer attached to this element.
And down here we've got the script tag and
that's changing the value of the HTML element.
And what it's doing is that's it's changing that,
it runs that script as soon as the webpage loads.
So that's why it's immediately changing it.
It's no longer attached to a particular sort of event, it's just there.
It's just running that script.
That isn't really what we want to do.
I mean, we still want to be able to respond to events, but
respond in a script tag.
And so, actually although the script tag does make it
easier to separate out the script and the HTML, and I hope you'll agree,
that code I showed you is clearer and more readable because the HTML elements
are more self contained and the script elements are more self contained.
We've lost the ability to respond to the event so
we need to link those two things back together and I'll show you how to do that.
The main thing we're gonna want to do is start by go back to the very first thing
we did when we started on JavaScript, which is look at calling a function.
The first bit of JavaScript we had is calling this function alert,
which triggered with the command hello.
And the way we did that is we included that in an onclick
event in our HTML.
And that was fine but as it got more complex,
it got more and more clunky to fit that into the onclick.
So what I'm gonna do now is show you how to, is to take that long,
complex code and create our own function that we can
then call in a much more simple way than the onclick.
So this is a very powerful technique because it allows us to bundle together
bits of code and really quite complex code, but then call it very simply just
with that simplicity we had of calling the alert function in the first place.
So it simplifies and streamlines the code.
So I'm going to replace the alerts we've got in that onclick
with a more complex function that I've written myself.
So this is what my function looks like.
I've called it sayHello and it's got various bits and
I'll take you through each bit of it one by one.
So this is, if in the previous slide we saw how to call a function with alert,
this is how to create our own function that we can call, just as we called alert,
one of the built-in functions of JavaScript.
So anything we can do with built-in functions in JavaScript,
we can extend by creating our own functions.
The first thing we have here is this word function.
And this, you need to have exactly the word function to tell JavaScript
that what you're doing now is a function so it knows what you're doing.
The next thing we have here is the function name, I'll call it sayHello.
Let's just remember that the function when we call it, the first thing we need
is the name of the function so that we can actually call that function.
So that's a really important part of the function, and as we see,
that's the first thing we get.
And then we'll note that the other big part we need is the arguments.
So we have the function name.
And inside these brackets which look the same as the previous one,
we have the arguments.
But actually we don't have any arguments here so the brackets are empty.
We still need the brackets.
We still need the brackets to tell JavaScript that there are no arguments,
but in this case we can have our empty brackets to say no,
we don't have any arguments.
We don't care about the arguments.
So we've got the two components that we've seen before when we called the alert
function, the name of the function and the arguments.
But we need one more thing which is the actual code that we want to run
when JavaScript calls our function.
And this is the code, the body, the content of the function.
It's just a bunch of JavaScript code.
In this case it's that one line of JavaScript code that I've shown you in
the previous video and these bits are really important so
we've got a new type of brackets, these curly brackets so
we'll see that different types of brackets are very important to our web programming.
So in HTML, we've got these angled brackets.
To call a function we've got these kind of standard curved parentheses.
We've got these curly brackets here and what these are doing
is telling us what the start and the end of the body of the function is.
So this is the start and the end of the code.
And once we've got the second curly brackets,
we know that that function is over.
We've finished our code.
And then, once we've got that function,
we can call it in the same way as our onclick function here,
as we've seen before, and I'll show you that in a more full webpage example.
So this is a complete webpage that does that, and
down here inside our script tag, we're defining our function.
It's got all the elements I just told you about.
In this case, I was just calling alert actually,
so it's not really doing anything new but,
we're essentially giving this another name that we can call up here.
So, while this function is still very small and
we're not actually really gaining anything from putting it in a function, we can
actually, once we've got it in this form, we can add lots and lots more code to make
it far more complex which is something well do over the next few videos.
But the important thing to note is in our onclick we're calling
our new function named sayHello, not a built-in function,
not something that's provided by JavaScript, but something we have created
that allows us to add our own functionality to an onclick.
And let's have a look at that back on the webpage, and
when we click on Hello, it gives us the alerts.
Nothing new in terms of functionality, but we've created a new structure for
the webpage that allow us to add more and more complex functionality and
make it easier to write complex, interactive webpages.
[MUSIC]
Ознакомьтесь с нашим каталогом
Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
