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.
Buttons with Divs
Loading...
En provenance du cours de Duke University
Programming Foundations with JavaScript, HTML and CSS
4071 notes
Duke University
4071 notes
Cours 1 sur 5 dans Specialization Java Programming and Software Engineering Fundamentals
À partir de la leçon
JavaScript for Web Pages
Rencontrer les enseignants
Susan H. RodgerProfessor of the Practice
Computer Science
Robert DuvallLecturer
Computer Science
Owen AstrachanProfessor of the Practice
Computer Science
Andrew D. HiltonAssistant 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.
© 2018 Coursera Inc. Tous droits réservés.
