학습>
컴퓨터 공학>
모바일 및 웹 개발>
Programming Foundations with JavaScript, HTML and CSS개 강좌를>
Changing Pages Interactively

Loading...

Changing Pages Interactively

Programming Foundations with JavaScript, HTML and CSS

듀크대학교

Java Programming and Software Engineering Fundamentals 전문 분야에서 5의 강좌 1

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.

강의 계획서 보기

배우게 될 기술

Html, JavaScript, Cascading Style Sheets (CCS), Html5

강사:

Susan H. Rodger
Professor of the Practice
Robert Duvall
Lecturer
Owen Astrachan
Professor of the Practice
Andrew D. Hilton
Associate Professor of the Practice

스크립트

Let's look at how to change a web page interactively using JavaScript.

This interactivity will be the basis for programming a green screen algorithm

in a web page and for being creative in designing your own web page.

To change a page, you'll need to write JavaScript code to access elements like

h1 tags or div elements or other tagged elements in a page.

It's possible to access all the elements with an h1 tag, for example, or

with an li tag or any other HTML tag.

It's also possible to access individual elements by an ID or

a group of elements by a class.

We'll mostly use IDs to access HTML elements since IDs are distinct and

every element must have a distinct ID.

In contrast, many elements can share the same class.

In our examples, you'll see how to add a CSS class to an HTML element like a div.

This will allow you to change the background color or the width or

the height of an element.

It's also possible to change the text displayed in an element or other features.

Let's look at a simple example of changing a web page using interactive JavaScript.

We'll use two CSS classes, each specify a different background color for a div.

By clicking a button, you'll use JavaScript to assign a CSS class

to each div, making the divs change appearance, and

go from no background color to different background colors.

The basic idea is to programmatically access each div using the IDs,

and change the CSS associated with the div.

We'll explore this at a high level and then look at the details.

Here you saw the divs change color.

You may remember that each div has a different ID.

One, which displays Hello, has the ID d1 as you can see here.

The other, which displays Goodbye, has the ID d2.

Recall that the onclick event attribute tells the page to create an event handler

to execute the JavaScript code that follows.

You'll be able to use JavaScript to access the div or

whatever other element you tagged with the ID d1.

That makes it possible to change the features of an element as we'll see.

In this example, the JavaScript function is called changecolor.

Let's take a look at that function by looking at the JavaScript.

The JavaScript function changecolor is shown here.

Remember that it's called when a user clicks on the button, that is,

interacts with a web page.

The JavaScript function is changecolor.

Remember that it's called when the user interacts with the web page

because its function is called or

invoked by the onclick event handler, which calls the function changecolor.

The JavaScript method getElementById

is used to access an HTML element using its associated ID.

You may remember that a method performs an operation on an object and

is proceeded by a dot.

In this case, the method getElementById

uses the HTML document to access its element.

The label document refers to the entire HTML web page.

The getElementById method has one parameter.

Here, it's d1, the ID label associated with a particular HTML element.

The getElementById method returns this HTML element

with the ID label that was passed as a parameter.

That's the div element with the word Hello because the associated ID label is d1.

We need to create a variable to store this returned HTML element.

Here, that's shown by var dd1.

Now that variable can be used to access the element and change its color.

The next line creates a similar variable called dd2.

This stores the HTML element returned by

document.getElementById when it's passed the parameter d2.

Next, to change the background colors used in this page,

we need to set the background color for each div.

We'll do this by setting the CSS class for the div.

The line of code dd1.className gets blueback

is what changes the color of the div with the ID d1.

Remember, this div was stored in the variable dd1.

The attribute className is one of the characteristics of an HTML element

that can be accessed in JavaScript.

As we'll see in later examples, there are many other attributes of HTML elements

that you can also change by accessing them with JavaScript.

These attributes are sometimes called fields.

They're accessed using the dot notation in a JavaScript program.

The code assigns the className blueback

as the class of the div stored in variable dd1.

As you can see in the CSS panel of the CodePen page that we've shown here,

the class blueback has a specific background color.

If other CSS characteristics were part of this class blueback,

these characteristics would also be part of the div labeled d1 as a result of

assigning the class blueback to the variable dd1 in JavaScript.

The next line similarly assigns the class yellowback to the variable dd2,

which is storing the HTML element with ID d2.

Again, in action, using the onclick event handler to call the JavaScript

function changecolor assigns these CSS classes to the chosen HTML elements,

and we see the background change.

It's also possible to change other attributes of HTML elements like the text

associated with an element.

This function changetext

uses a very similar approach to what we just saw with changecolor.

The first two lines create variables to store HTML elements, and

these are exactly the same lines as we just saw with changecolor.

Just as before, to access or

access attributes of an HTML element, you'll use the dot syntax and

the name of an attribute or field that will be used in JavaScript.

The attribute shown here .innerHTML accesses the HTML content

within the element, in this case, that's everything inside the div, which is text.

This line of code dd1.innerHTML gets

Bonjour changes the text of the HTML element accessed by the variable dd1.

That's the same HTML element whose ID is d1 which used to show the word Hello

before the code executed and will now show Bonjour after the code runs.

It's worth pointing out that while dd1 is an HTML element,

a div specifically in this case, in general,

it's just an object like a CSS style or simple image are objects.

You can always use documentation to find out what methods operate

on different objects.

In actions, here you can see what happens when you click on the changetext button.

An onclick event handler calls changetext, the JavaScript function we just saw, which

accesses the HTML inside the divs and sets it to new text, Bonjour and Sayonara.

We'll provide some resources to show how you access other attributes

using JavaScript as you practice making web pages and changing them interactively.

Bonjour and sayonara.

Coursera 소개

세계 최고의 대학교와 교육 기관의 최상위 강사가 가르쳐주는 강좌와 전문 강좌를 듣고 온라인 학위를 취득하세요.

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera는 세계 최고의 교육에 대한 보편적인 접근 기회를 제공하며, 최고의 대학 및 기관들과 제휴하여 온라인 강좌를 제공합니다.

© 2019 Coursera Inc. All rights reserved.

앱스토어에서 다운로드하기

구글 플레이에서 받기