Moving to CodePen

Loading...

En provenance du cours de Duke University

Programming Foundations with JavaScript, HTML and CSS

4407 notes

Duke University

Programming Foundations with JavaScript, HTML and CSS

4407 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

Upload and Display an Image7:49

Convert Image to Grayscale8:54

Moving to CodePen9:12

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

Let's look at how to use concepts, tools, and

programming to create an interactive Green Screen page.

We'll use HTML elements like canvas and inputs for files, and

buttons to create an interactive green screen page like this one.

You can see two images have been uploaded.

I'm about to press the create composite button.

That will combine the two uploaded images into one using green screen code you've

seen in the Duke Learn to Program environment.

There are several steps you'll need to take to use the code you developed

in the Duke Learn to Program environment and make it work in a web page.

You'll need to use HTML input elements to allow users to select files.

Those input elements need event handlers to connect the events to JavaScript code.

You'll need to create functions to load the images and global variables so

that all functions can use these images.

To make the green screen appear you'll use the drawTo method instead of print.

Finally, we'll show you how to protect your code with checks

to make sure that it works without error.

Let's look at the components of this interactive web page.

We'll look at the HTML elements first, and then we'll connect these to JavaScript.

You can see here that there are two standard canvas elements.

Each one has a border that's part of the CSS for the canvas.

There's one canvas where the foreground image will be displayed, and

another canvas for the background image.

You'll also see four input elements.

Two are file inputs for the images, and

two are buttons that change what you see in the canvases.

The file inputs are labeled with their purpose on the web page.

Upload a foreground image and a background image.

Two buttons are used, one to create the green screen composite and

one to clear the canvases.

Let's look in detail at HTML file elements.

We have two file inputs, one to upload the foreground image and

one for the background image.

Here's the HTML for these labeled images.

We'll review the HTML elements and the concept that you've seen before.

We create a file input to allow the user to upload and display an image file.

Here's the foreground file input and

there's also a file input button for the background image.

These file input buttons have unique IDs.

This will allow them to be identified as needed in the JavaScript code

that interacts with the web page.

We see fgfile for the foreground input and bgfile for the background input.

We connect these inputs to corresponding JavaScript to load and

display the image in a canvas.

We use the onchange event handler and call a JavaScript function.

Here we're calling, loadForegroundImage.

And here,

the event handler calls a JavaScript function named, loadBackgroungImage.

Let's look at the JavaScript code that's called when the user uploads an image.

Uploading and displaying an image use concepts we've seen before.

Here's the JavaScript function to load the foreground image.

The background image function is very similar, so we'll just look at this one.

We'll see that there's a global variable used for each image.

The foreground image is referenced by the global variable fgImage.

Here you see that fgImage is initialized to null,

initializing global variables is a good idea.

Using null will allow us to determine if an image has been loaded.

When the user clicks, they create composite button for example.

Null is a special value used in JavaScript and other languages to represent nothing.

You'll see this idea again later and with other programming languages.

Here we see that the code that accesses fgImage.

Notice it doesn't use the word var, because the variable fgImage is global.

The variable is assigned a new simple image element,

created from the file inputElement.

Here we see fg element used again to draw to the canvas element

that will be displayed on the web page.

We will also use many local variables, like var imgFile,

it references the file input for the foreground image.

We use that HTML element because it passes a parameter when we

create the simple image.

Using local variables with the word var is a really good idea.

Here, the local variable represents the canvas,

where the foreground image will be displayed.

When a value is accessed in multiple functions, making it global is required,

otherwise, make variables local.

To avoid losing track when you have hundreds of variables,

which might happen in the mini project.

Let's look at the JavaScript code to create the green screen composite.

We're going to look at the steps to create the green screen composite.

We'll need some basic ideas from image processing that you're seeing in

the Duke Learn to Program environment.

We've adapted these for use in a web page, when the user uploads an image, and

then processes the image.

For example we need to check that the user has uploaded two images,

before clicking the create composite button.

We accomplish this by checking to be sure that the foreground image is ready to go.

If the global variable fgImage is null,

the value it's initialized to when it was made global,

then the user hasn't clicked the upload foreground image button we just saw.

Because that JavaScript creates a non-null version for fgImage.

It's also possible that the user has uploaded the image, but the image hasn't

been completely constructed, large images take time to create.

The method .complete allows us to determine

if the image is completely loaded.

Here it says not complete, that's the bang or exclamation point.

And if it's not ready because either it's null or

it hasn't finished loading, we'll need to let the user know.

We do this by displaying an alert, indicating the code won't work.

We check both the foreground image and

we check the background image before creating the green screen composite.

Now let's look more closely at the code to create the composite.

Here's the JavaScript code adapted from the Duke Learn To Program or

DLTP environment to create a green screen composite.

The first step is to create new image with the appropriate width and height.

It will be the composite of the foreground and background image.

The new image is initially all black, so we need to set each pixel by looping all

for all the pixels of the foreground image and copying either a foreground pixel or

a background pixel depending on how green the pixel we're looping over is.

Here, we see that if the pixel's green value is greater than the sum threshold,

we use the background pixel in the new image we created.

And if it's not greater than the threshold, we use the other pixel.

We'll also need JavaScript to display the new image in a canvas.

Notice that the threshold variable,

green threshold must be global, because it's not defined here with the word VAR.

Let's look at the final steps, we'll need to display or

draw the new composite image to create a canvas element with the image in it.

We'll use the .draw2 method, before making sure that the image appears.

We know it will because we've checked to make sure that the image is loaded.

And we'll clear the canvas elements before drawing so

that we show only one image, the green screen composite.

Let's take a look.

Your working green screen page allows the user to interact by uploading images.

One for the foreground and one for the background.

We have to wait for those images to load and be displayed.

Then we'll click the create composite and watch the green screen be created.

We can see that the button stays clicked.

It takes some time to create this composite.

Then we see it, riding dinosaurs, we can also clear them.

There are no dinosaurs, where do they go?

We know that combining two people, and dinosaurs can be lots of fun.

You will also get to have lots of fun when you use the green screen program

to create your own green screen composites.

Have fun with programming.

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.

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

Télécharger dans l'App Store

Disponible sur Google Play