JavaScript(4) 실습

<1> innerHTML 속성 이해하기 

• 화면 상의 버튼을 누르면 사용자로부터 prompt를 통해 문자열을 입력받고,
• 입력받은 문자열을 버튼 아래 화면에 표시하는 웹문서 작성하기

(이때 출력할 자리인 <p>요소에 innerHTML 속성을 이용하여 <h1>요소 추가 코드 작성) 

입력버튼 

prompt로 입력받기 

입력하기

버튼 아래 h1으로 출력하기 

출력도출 코드 

document.write()를 안해도 출력이 가능하다는 것을 알게 됨. 

<input type="button">으로 버튼을 만들고 버튼에 입력 버튼으로 보이고 클릭했을때 printWeb()함수를 불러오게 했다. 

출력할 <p>부분에 id를 부여했다. 본격 함수에 prompt로 문자열을 받고 <p>태그 안의 innerHtml에 h1태그와 문자열을 합쳐서 대입했더니 성공을 하였다. 

 

<2> 스타일 속성 변경하기 

• 자바스크립트를 사용하여 style 속성에 접근하여 배경색을 변경
• 두 개의 버튼을 만들고 파란색 버튼을 누르면 배경색이 파란색으로, 붉은색 버튼을 누르면 배경색이 붉은색으로.

원래 화면 

파랑으로 눌렸을 때 배경 변화 

 

빨강으로 눌렸을 때 배경 변화 

성공 코드 

button 태그에 각각 파랑으로, 빨강으로 버튼을 만들고 누르면 일어나는 일을 함수로 처리하였다. 그리고 각각의 함수에는 document.quertSelector로 배경을 나타내는 body 태그에 접근해서 버튼을 누르면 backgroundColor를 blue와 red로 변경하도록 코드를 짰다. 

 

<3> 계산기 만들기 

• 두 개의 값을 텍스트 위젯으로 받아서 덧셈, 뺄셈, 곱셈, 나눗셈하는 계산기 만들기.
• 이 때 요소로 연산자를 입력 받아서 계산한다. 

더하기

빼기

곱하기

나누기

해당 코드 

text를 담는 button을 세 개 만들고 각각에 id를 할당해서 앞 뒤는 입력한 값을 가져오고 하나는 계산해서 해당 값을 넣는 식으로 진행했다. 사칙연산 기호를 select - option으로 설정하고 select에 id를 설정해서 누른 것을 가져온다. 그리고 그것에 따라서 계산이 되는 calculate함수를 만들었다. document.getElementById('id')가 가장 핵심적으로 사용되었다. 

 

<4> 고양이 카페 사이트 만들기 

• prompt로 고양이 이름 입력하고 이미지 아래에 고양이 이름 넣기 

이름 다 짓고 났을 때 

해당 코드 

사진태그에 onclick를 넣어서 누르면 일어나는 give_name( )을 아래에 정의하였고 사진 아래 div 태그에 아이디를 지정하였다. 그 아이디를 함수 인자로 넣어서 innerHtml에 적은 이름을 대입하여 원하는 이름을 선택한 고양이 아래에 출력되게 만들 수 있었다.