본문 바로가기

웹개발

2022-08-22 국비지원 웹개발 10일차

<강사님>

지금은 완성이나 디자인보다 여러 가지 시행착오를 거치면서 해보는 게 중요해요.


if문 2~3 형식 등에 대해 배웠다.


미션. 지역과 성별을 input 태그로 입력받아 서울 여자라면 "참"을 아니면 거짓을 console창에 출력하시오.

 

미션. 구입 금액에 따른 사은품이 아래와 같이 지급되도록 프로그램하시오.

만원 이상 : 비누, 십만 원 이상 : 화장지, 오십만 원 이상 : 어린이 자전거, 백만 원 이상 : 성인 자전거


1. if문 2 형식

 

<script>

if (조건) {

  참일 때만

} else {

  거짓일 때만

}

항상 실행

</script>

 

if문 1 형식과 2 형식으로 각각 구현했다.

1 형식으로도 할증된 금액과 할증되지 않은 금액을 표현할 수 있다.

 

2 형식의 경우 prompt 창으로 값을 입력받고 그 값을 통해 계산 결과를 출력했다.

이 경우 더 간단하게 다양한 상황을 처리 가능하다.

 

2. if문 3 형식 (다중 if문)

 

<script>

if (조건 1) {

  조건 1이 참이면 실행

} else if (조건 2) {

  조건 2가 참이면 실행

} else {

  마지막 조건이 거짓이면 실행

}

무조건 실행

</script>

 

몸무게와 키를 입력받을 수 있는 텍스트 박스를 만든다.

실행 버튼을 만든다.

결과를 출력할 곳을 만든다.

 

스크립트를 열어서 왼쪽처럼 텍스트 박스의 태그 자체를 가져와 나중에 value값을 쓰거나

오른쪽처럼 처음부터 태그에 입력된 value값을 가져오는 방법을 사용한다.

버튼이 눌렸을 때 함수가 실행되고 if문과 논리곱을 사용해 출력될 내용을 입력한다.

출력할 곳에 출력한다.

 

if문 조건을 반대로 10000, 100000, 500000, 1000000 순서로 적었다면 5천만 원을 구매해도 10000원 상품인 비누가 출력된다.

첫 번째 조건이 만족하면 뒤에는 무시되기 때문이다.

3. 기타

 

(1) 명명규칙: 보통 파일이나 폴더명의 접두사를 사용한다.

ex) 학생정보 입력 페이지 -> std_input

 

(2) 카멜 타입 표기법: maxLength 같이 두 번째 단어부터는 첫 글자를 대문자로 사용.

 

(3) css는 적용 범위를 최대한 자세하게 선택해서 부여하고, 코드를 최소화시키는 게 좋다.

ex) #std_input> form h2 { } -> 아이디가 std_input의 자손인 form의 후손인 h2

 

(4) 코드는 보통 선언 -> 조건 -> 제어 -> 출력 순으로 작성한다.

 

(5) 숫자 나눗셈에서 보통 다른 언어는 정수/정수=정수지만 자바는 소수점이 생긴다.

그래서 정수/3.0 이런 식으로. 0을 붙여주는 습관을 들이면 좋다.

 

(6) 프로그램이 의도대로 작동하는지 극한값 테스트, 경곗값 테스트, 화이트 박스 테스트, 블랙박스 테스트 등 테스트를 해보는 게 좋다.