Explore
For Enterprise
Join for Free
Log In

예술 & 인문학
비즈니스
컴퓨터 공학
데이터 과학
정보 기술
건강
수학 및 논리
자기개발
물리 과학 및 공학
사회 과학
언어 학습
학위
수료증

Explore all of Coursera

검색
포 엔터프라이즈 (For Enterprise)
로그인
무료 회원 가입

Changing Pages Interactively

Loading...

Programming Foundations with JavaScript, HTML and CSS

듀크대학교

4.6(5,277개의 평가) | 180K명의 학생이 등록함

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

검토

4.6(5,277개의 평가)

5 stars
3,751 ratings
4 stars
1,105 ratings
3 stars
260 ratings
2 stars
73 ratings
1 star
88 ratings

AN

Nov 02, 2016

I've been learning Javascript with lots of different online courses over the last 2 years and this is the first one that presented the information in such a way that I could understand it. Thanks!

SP

Aug 12, 2018

This is an amazing course! I've learnt a lot of things just in 4 weeks and really proud of myself. Everyone should do this course as it teaches basics of coding which can help you in any field.

수업에서

JavaScript for Web Pages

Introduction3:13

Buttons with Divs6:37

Changing Pages Interactively7:46

Using HTML5 Canvas10:13

Inputs and Events8:27

강사:

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 카탈로그 살펴보기

무료로 참여해 맞춤화된 추천, 업데이트 및 제안을 받아보세요.

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

© 2019 Coursera Inc. All rights reserved.

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

구글 플레이에서 받기

Coursera
소개
리더십
직업
카탈로그
수료증
MasterTrack™ 수료증
학위
포 엔터프라이즈 (For Enterprise)
정부용

커뮤니티
Learners
Partners
Developers
Beta Testers
Translators

연결
블로그
Facebook
Linkedin
Twitter
Instagram
YouTube
기술 블로그

이상
조건
개인정보 보호
도움말
접근성
보도 자료
문의하기
디렉토리
계열사