Buttons with Divs

Loading...

En provenance du cours de Duke University

Programming Foundations with JavaScript, HTML and CSS

5134 notes

Duke University

Programming Foundations with JavaScript, HTML and CSS

5134 notes

Cours 1 sur 5 dans Specialization Java Programming and Software Engineering Fundamentals

Learn foundational programming concepts (e.g., functions, for loops, conditional statements) and how to solve problems like a programmer. In addition, learn basic web development as you build web pages using HTML, CSS, JavaScript. By the end of the course, will create a web page where others can upload their images and apply image filters that you create. After completing this course, you will be able to: 1. Think critically about how to solve a problem using programming; 2. Write JavaScript programs using functions, for loops, and conditional statements; 3. Use HTML to construct a web page with paragraphs, divs, images, links, and lists; 4. Add styles to a web page with CSS IDs and classes; and 5. Make a web page interactive with JavaScript commands like alert, onClick, onChange, adding input features like an image canvas, button, and slider.

À partir de la leçon

JavaScript for Web Pages

Introduction3:13

Buttons with Divs6:37

Changing Pages Interactively7:46

Using HTML5 Canvas10:13

Inputs and Events8:27

Rencontrer les enseignants

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.

Explorer notre catalogue

Rejoignez-nous gratuitement et obtenez des recommendations, des mises à jour et des offres personnalisées.

Coursera propose un accès universel à la meilleure formation au monde, en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.

© 2019 Coursera Inc. Tous droits réservés.

Télécharger dans l'App Store

Disponible sur Google Play