22-04-25 수업정리

HTML의 변수

x+y= 100  에서 x, y 처럼 대입연산자를 통해 값이 변화할 수 있다는 뜻으로 변수(variable)라고 한다.

숫자 100은 당연히 항상 100이기때문에 바뀌지 않는다는점에서 상수(constant) 라한다.     

 

 

HTML은 자바와 달리 변수타입을 지정해 줄 필요가 없다.

var, let, const 를 사용해서 타입에 상관없이 모든 데이터를 저장할 수 있다.

 

typeof 로 웹페이지 console에서 타입확인

 

조건문

• 문자가 포함되어있으면 Nan(Not a Number) 출력
• if문을 통해 입력된 숫자가 숫자면 실행  숫자가아니면 중단하고 다시 처음으로 가면서 입력칸에 focus 된다.
• HTML은 타입을 구분하지 않아서 숫자타입으로 변환하지 않아도 되지만 더 정확한 값을 위해 타입을 Number로 바꿔준다.  (변환하지 않으면 숫자 값이 입력되었어도 타입이 String 으로 뜬다.)

반복문

 

for문

 

입력된 단의 값을 전체 출력

입력된 단의 값을 테이블 형태로 출력

변수 danVal 에 제목으로 쓸 값 저장 (상단 고정을 위해 for문 밖에 선언한다.) 

※ HTML은 타입 상관없이 저장가능 해서 태그를 사용한 값도  저장가능하다.

부모태그인 <table>의 시작태그를 변수선언하고 자식태그들을 작성 후 마지막에 닫는태그</table>을 사용해서 변수를 다시 선언해준다. ( div나 다른 부모로 사용될 수 있는 태그도 가능할 듯하다.) 

 

while문

자바와 동일한 문법을 사용한다.

 

switch문

▶ 자바에서는 숫자만 사용했지만 switch문은 조건에 문자열도 사용가능하다.

switch문을 통해 선택한 버튼의 이미지로 변경

▶ 반복문 시작전에 값이 공백인 변수를 하나 선언해준다.

이 변수에 선택된 버튼의 이미지 주소를 저장해서

document.getElementById("img").src= srcVal;  

(이 문서에서 id가 "img1"  인 태그의 src 속성에다가 변수에 저장 되어있는 이미지 주소를 저장.)

그러면 그 태그는 저장된 주소에 있는 이미지를 출력한다.

1. 이미지 주소를 담을 수 있는 공백(값이 없는) 변수선언
2. 조건문으로 선택된 버튼의 이미지주소를 변수에 저장
3. 변수를 이미지태그의 src 속성에 저장
4. 선택된 이미지가 웹페이지에 출력

switch문으로 이미지를 한번에 변경하기 (배열 사용)

• id를 가져올때는 document.getElementById()  로 단수 형태인데
• tag와 class 는 getElementsByTagName()  ,  getElementsByClassName() 으로 s가 들어간 복수형태 이다.
• 그래서 단 한개의 태그나 클래스만 변수에 저장한다고 해도 배열 형태로 저장이 된다.
• 자바처럼 for문으로 배열의 전체 값을 출력할 수 있다. 그걸 이용해서 모든 인덱스에 같은 이미지 주소를 넣어서 출력할 수 있다.