Thinking Critically about Your Program

Loading...

From the course by Duke University

Programming Foundations with JavaScript, HTML and CSS

3980 оценки

Duke University

Programming Foundations with JavaScript, HTML and CSS

3980 оценки

Course 1 of 5 in the 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.

From the lesson

Algorithms and Programming Concepts

Translating to Code10:12

Thinking Critically about Your Program4:08

Finding Bugs in Code9:34

Meet the Instructors

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
Assistant Professor of the Practice
Electrical and Computer Engineering

Now you're going to think about what it would take to turn

the Blue Devil into a Green Devil.

For example, to celebrate an environmental initiative on campus.

What code would go into the for loop to make the Devil green?

Specifically, we want to end up with a background still being white and

the foreground having a 0 for red, a 255 for green, and a 100 for blue.

Take a few moments to think about how to do this.

A first thought might be code that looks like this.

Here we set the red, green, and

blue components of each pixel directly to the values we want.

However, as the loop goes through each and every pixel, it turned them all green.

If instead you only set the green of each pixel to 255 and

the blue to 100, you get an image that looks like this.

This code made the foreground the right color, but

now we have a yellow background.

Take a few minutes to think about why this happened.

Did you realize that the background is yellow because it has a red value of 255,

making the overall color value of the background red 255, green 255, blue 100?

Because we did not change its red value, it kept the original one.

And since the background was originally white, that value is 255.

To make this work, we're going to need code that makes a decision,

using a conditional statement like we've seen before.

So that it can change the foreground, but not the background.

Here is one possible idea for an if statement.

If the blue is 255, this seems like a logical choice because the foreground is

blue, and we want to change only the blue pixels to green pixels.

Take a moment to think about what this code does.

Do you think it will accomplish what we want it to?

This code actually turns the background green but left the foreground blue.

That behavior is the opposite of what we wanted.

Doesn't that seem surprising?

It is important to remember that the computer only does what you tell it to.

Anytime your program does seem to behave oddly there is a good reason behind it.

We're going to take a closer look to understand what happened.

The white pixels in the image have 255 for red, 255 for green and 255 for blue.

Because each white pixel, has blue equal to 255.

Those pixels are set to green by this piece of code.

However, the blue pixels in this image are not pure blue.

They have 45 for red, 39 for green, and 225, not 255, for blue.

Accordingly, the condition is not true for the blue pixels, and

they are left unchanged.

To fix this program, you would need a condition that distinguishes

the foreground pixels, 45 red, 39 green, 225 blue,

from the background pixels, 255 red, 255 green, 255 blue.

There are many possible conditions we could write.

You could check if red is less than 200.

If green is 150, if blue is equal to 255.

Or many other possibilities.

Here, we made one such change.

We changed the code to check if red is less than 200.

This code produced a Green, Blue Devil image that we wanted.

Whenever your code does not do what you want, thinking about why it is behaving

a particular way is an important part of fixing it.

We'll talk more about debugging codes soon and

teach you how to apply a version of the scientific method to fix problematic code.

We'll also teach you how to invest some planning time at the start

of the programming task so you can write better code the first time and

spend less time fixing it at the end.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

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

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