Script tag

Loading...

Из курса от партнера University of London

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

3130 оценки

University of London

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

3130 оценки

Курс 1 из 6 — 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.

Из урока

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

Script tag10:17

Познакомьтесь с преподавателями

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]

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., 2019 Все права защищены.

Загрузить из App Store

Загрузить в Google Play