Buttons with Divs

Loading...

Do curso por Duke University

Programação e a Web para Iniciantes

4720 classificações

Explore Related Videos

At Coursera, you will find the best lectures in the world. Here are some of our personalized recommendations for you

Duke University

Programação e a Web para Iniciantes

4720 classificações

Curso 1 de 5 em Specialization Programação Java: Introdução ao Software

In this course, you will use computers to creatively design web pages using HTML and CSS. You will then use Javascript to develop programs and algorithms--ways to get the computer to solve problems. As you progress, you will master the programming process that will be used through the remainder of the courses in this Specialization. After completing this course you will be able to: 1. Make a web page with HTML and CSS; 2. Explain the high-level process of developing a program; 3. Think critically about how to solve a problem; 4. Solve programming problems with Javascript, including if/else and looping constructs; 5. Use Javascript to manipulate images and process data; and 6. Recognize debugging as an application of the scientific method. By the end of this course, you will complete a mini-project where you will use Javascript to create your own images algorithmically and a website you have built with HTML, CSS, and Javascript.

Na lição

JavaScript for Web Pages

Introduction3:13

Buttons with Divs6:37

Changing Pages Interactively7:46

Using HTML5 Canvas10:13

Inputs and Events8:27

Conheça os instrutores

Susan H. Rodger
Professor of the Practice
Computer Science
Robert Duvall
Lecturer
Computer Science
Owen Astrachan
Professor of the Practice
Computer Science
Andrew D. Hilton
Associate Professor of the Practice
Electrical and Computer Engineering

We'll start learning how to use JavaScript to interact with the content on a webpage

by looking at simple examples of HTML and CSS, and

then adding JavaScript to these simple web pages.

By starting with a simple web page,

you'll be able to understand how adding interactivity works.

We'll start by creating a very simple web page and then adding JavaScript to it.

The first version of the web page will only use HTML and

CSS with two div elements styled by CSS using class IDs.

We'll introduce a new HTML element, a button and we'll connect this button to

functionality that eventually will interact with elements of the web page.

Clicking the button will cause different actions determined by you, the program.

You'll write code using JavaScript that will be able to control and

interact with the web page.

In the code you'll see in this lesson,

you'll use a JavaScript function that executes when a button is pressed.

Recall that a function is a piece of code that can perform complex steps and

it's not invoked on an object.

We'll start with this simple example that simply alerts the user when a button is

clicked, but your JavaScript code will get more complex as you learn more.

And based on these simple first examples, we'll build towards an understanding of

how to combine HTML, CSS and JavaScript as well as how to

import JavaScript libraries, so you won't have to write all the code yourself.

You'll learn how to access different elements in a web page programmatically

using JavaScript to change text, to change color, to add new elements and more.

Hopefully, CodePen looks familiar.

HTML in left window, CSS in the middle window and

JavaScript that's currently blank on the right.

There are two divs in the HTML window with width and

font size specified in the CSS window.

The div with ID d1 is specified by CSS to have a background color of light blue and

the div with ID d2 is specified to have a background color of yellow.

This is the simple web page we'll begin to make interactive.

Let's look at how to create an HTML button and

program it to have an effect when it's pressed.

We'll use a new HTML tag, the input tag.

It's similar to the image or img tag you have seen before that displays media

as an image, because this tag doesn't have both a start and an end tag, but

rather one tag with options with in the tag.

The first tag element is the type of input.

In our first examples, we'll only use button as the type of input.

But later, we'll see that you can use color choosers as a type of input, so

that users can choose a color as part of interacting with a web page.

And there are other types of inputs we'll see as well, including sliders,

file uploaders and more.

The text displayed in the button is specified by the value element in

the input tag.

As you can see here, the word change will be displayed in the button.

You'll also need the onclick event attribute

to tell the button what to in the case of a certain event.

In this case, the user clicking the mouse.

Other examples of common HTML events are when a web page is loaded or

user has moused over text or an image or an input field is changed.

For example, when you type in a password.

The keyword onclick is an HTML event attribute that indicates

the JavaScript that follows should react in event of a click.

This calls an event handler,

which specifies what will happen when the button is pressed or clicked.

In this case, the onclick event will cause an alert to be displayed.

Let's see what this looks like in CodePen.

As you can see, the CodePen environment pops up an alert box with a message in it.

The input tag is specified that the text of the message in the onclick

event handler.

The user will need to dismiss the alert box before more events can be handled.

Let's take a look.

Here the user's clicking a button that causes the alert box to pop-up and

then the user dismisses it, but

what if the alert where in more complex set of instructions?

Rather than using alert directly in the input tag,

we'd like to be able to use JavaScript to handle the events generated by the button.

We could do this by writing a JavaScript function,

which is already done yourself We'll call this function dochange.

In the body of the function, we'll show the alert with the text clicked button,

then we can call the function for the onclick event.

The HTML input creates the element that the user interacts with.

And when the user clicks or presses the button, the event handler associated

with the onclick event, the JavaScript is triggered or invoked.

Here, the event handler is connected to the JavaScript code by calling

the dochange function we just wrote.

Let's see this in CodePen.

First, we write the function dochange.

It has curly braces, because that's what we need in a function and

then we'll copy and paste the alert code into that page.

That is the JavaScript function that we just wrote.

We'll change the text, so that we know it's a JavaScript function that's called.

So in the onclick event handler, we'll call the function do change,

but we'll edit the text in the alert box.

Let's see what happens when the button is pressed.

Now, we can see that the event is different.

This is a simple example of a good way to start.

We saw how to use an HTML element to allow a user to interact with a web page.

We created a button, but we'll see later that there are other types of input.

We saw how to create an event handler for

the event of a user clicking on the button.

Because JavaScript commands can sometimes be complex,

we learned how to create a function that can be called by the event handler.

You'll write JavaScript in the JS or JavaScript paneling CodePen, but

you'll be able to use the knowledge you gain with HTML, CSS and

JavaScript to create pages that you can be deployed,

that you can deploy anywhere on the web not just within CodePen.

And you'll be able to use your knowledge of loops, variables and

its statements to interact and modify web pages.

Have fun.

Explore nosso catálogo

Registre-se gratuitamente e obtenha recomendações, atualizações e ofertas personalizadas.

O Coursera proporciona acesso universal à melhor educação do mundo fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.

© 2019 Coursera Inc. Todos os direitos reservados.

Baixar na App Store

Baixar no Google Play