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.
Buttons with Divs
Loading...
Do curso por Duke University
Programação e a Web para Iniciantes
3866 ratings
Na lição
JavaScript for Web Pages
Conheça os instrutores
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.
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.
© 2018 Coursera Inc. Todos os direitos reservados.
