DOM이란?
DOM(Document Object Model):문서 객체 모델. HTML 태그들을 하나씩 개체화한 것. XML이나 HTML 문서에 접근하기 위한 일종의 프로그래밍 인터페이스
DOM의 데이터타입(Datatype)
먼저 DOM 객체의 구성 요소부터 알아보도록 하겠습니다.
프로퍼티(property) : DOM 객체의 멤버 변수입니다. HTML 태그의 속성을 반영합니다.메소드(method) : DOM 객체의 멤버 함수입니다. HTML 태그를 제어합니다.컬렉션(collection) : 정보를 집합적으로 표현하는 일종의 배열입니다. 예를 들어 children 컬렉션은 DOM 객체의 모든 자식 DOM 객체에 대한 주소를 가집니다.이벤트 리스너(event listener) : HTML 태그에 작성된 이벤트 리스너(onclick, onchange 등)들을 그대로 가집니다.스타일(style) : 이 프로퍼티를 통해 HTML 태그에 적용된 CSS 스타일 시트에 접근 가능합니다.
<데이터타입>
짝수 판별 코드
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > if_02 </ title >
< style >
</ style >
</ head >
< body >
< script >
let num = Number ( prompt ( '숫자넣어주세요' ));
if ( num % 2 == 0 ) {
alert ( num + "은 짝수!" );
} else {
alert ( num + "은 홀수!" );
}
document . write ( "sdfsdf" + "<br>" + num );
</ script >
</ body >
</ html >
<꿀팁>
자바스크립트 작업 도중 중간 중간 코드에 대해 테스트가 필요할때 활용할 수 있는 유용한 사이트가 있습니다.
1.w3schools
https://www.w3schools.com/
W3Schools Online Web Tutorials
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
Try it yourself를 들어가시면 테스트하고 싶은 코드를 자유롭게 활용하실 수 있습니다.
2.jsfiddle 넷
https://jsfiddle.net/
JSFiddle - Code Playground
jsfiddle.net
다음과 같이 활용할 수 있어요(대략)
점수 분류 코드
특정 점수에 대해 분류하는 코드
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > if_02 </ title >
< style >
</ style >
</ head >
< body >
< script >
let num = Number ( prompt ( '숫자넣어주세요' ));
if ( num == 100 ) {
alert ( num + "이네요 대상!! 축하합니다!" );
} else if ( num >= 90 ) {
alert ( num + "최우수상! 축하합니다!" );
} else if ( num >= 80 ) {
alert ( num + "이네요 우수상! 축하합니다!" );
} else {
alert ( "탈락 아쉽습니다" );
}
document . write ( "sdfsdf" + "<br>" + num );
</ script >
</ body >
</ html >
<label> 태그 정리
<label> 태그사이에 위치한 text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장됩니다.
<label for=""> 와 <태그 id="">값은 서로 그룹을 형성합니다.
HTML label 태그
<label> 태그는 <input> 태그를 도와주는 역할입니다. <input> 태그가 디자인 하기 힘들 때 <label> 태그로 연결해서 쉽게 디자인하거나 클릭 편의성을 높일 수 있습니다.
예시를 보면 <label> 태그는 단순히 <p> 태그와 같은 단어 입력처럼 보일 수 있습니다. 그런데 아래 예제에서 글자 부분을 클릭해보면 키보드 커서가 우측의 text 창에 표시됩니다.
<label for="babo">여기를 클릭하세요.</label>
<input type="text" id="babo">
label for 사용법
<label> 태그는 for 속성을 사용해서 <input> 태그의 id 속성에 연계해서 사용합니다. label의 for값과 input의 id값을 일치시키면 됩니다.
<label> 태그의 for 값이 baboya이고, <input> 태그의 id 값이 baboya로 동일해졌습니다.
하하하라고 적힌 문자 부분을 클릭하면, text 속성값의 입력창에 자동으로 커서가 생성됩니다.
비밀번호 확인 여부 코드
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< style >
</ style >
</ head >
< body >
< label for = "passBox" > password: </ label >
<!-- 라벨은 글자 장식용! - text, checkbox, radio 등은 클릭 가능 영역이 텍스트로 확장됨-->
< input type = "text" id = "passBox" >
<!-- id는 자바스크립트용으로! -->
< button id = "btn" > check </ button >
< div id = "result" ></ div >
< script >
let btn = document . getElementById ( "btn" )
// id와 동일한 변수명을 보통 지어줌
// btn이라는 tag 명을 들고 온거
btn . onclick = function () {
// btn을 클릭하면 함수를 실행하겠다
let passBox = document . getElementById ( "passBox" ). value ;
// 함수안에 있는 내용이 passBox와 동일하면 passBox 변수를 실행하겠다
// 이때 .value를 붙혀줘야 passBox 함수를 실행!!
let result = document . getElementById ( "result" );
// 함수안에 있는 내용이 result와 동일하면 result 변수를 실행하겠다
if ( passBox == "abc" ){
result . innerHTML = "환영합니다" ;
} else {
result . innerHTML = "암호가 틀립니다"
}
}
// 실제 로그인을 실행하는 코드를 작성한다면 sql에서 자료를 갖고 옴
</ script >
</ body >
</ html >
<문자 일치여부 판독>
2개의 문자열을 입력받아 2개의 문자가 동일한지 동일하지 않은지 출력하는 프로그램
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Document </ title >
< style >
</ style >
</ head >
< body >
< label for = "num1" > 첫번째 문자: </ label >
< input type = "text" id = "num1" >
<!-- id는 자바스크립트용 -->
< label for = "num2" > 두번째 문자: </ label >
< input type = "text" id = "num2" >
< button id = "btn" > check </ button >
< div id = "result" ></ div >
< script >
let btn = document . getElementById ( "btn" )
// btn id를 btn 변수에 줘
btn . addEventListener ( "click" , function () {
// click을 명령할때마다 onclick과 다르게 무한으로 함수를 실행하겠다
let num1 = document . getElementById ( "num1" ). value ;
let num2 = document . getElementById ( "num2" ). value ;
let result = document . getElementById ( "result" );
if ( num1 == num2 ) {
result . innerHTML = "일치" ;
} else {
result . innerHTML = "불일치"
}
});
</ script >
</ body >
</ html >
<if심화 계절 판별 문제 >
숫자를 입력받아 숫자가 3~5 "봄“, 6~8 ”여름“, 9~11 ”가을“, 12~2 ”겨울“을 , 다른 숫자이면 “잘못입력하셨습니다”가 출력되는 프로그램 구현
<! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > if 계절 심화문제3 </ title >
< style >
.out {
width : 16rem ;
height : 16rem ;
background-color : burlywood ;
display : flex ;
justify-content : space-around ;
align-items : center ;
flex-direction : column ;
border-radius : 30% ;
}
.outBox {
width : 13rem ;
height : 5rem ;
background-color : tomato ;
justify-content : center ;
align-items : center ;
font-weight : bold ;
color : white ;
}
button {
width : 5rem ;
height : 2rem ;
}
button:hover {
filter : brightness ( 80% );
/* 밝아져라! */
cursor : pointer ;
/* 마찬가지로 마우스가 올라갔을때인데 마우스모양이 손가락 모양으로 변함 */
}
button :active {}
.relBox {
width : 7rem ;
height : 2rem ;
background-color : whitesmoke ;
border-radius : 10% ;
display : flex ;
justify-content : center ;
align-items : center ;
}
</ style >
</ head >
< body >
< div class = "out" >
< h3 > 계절을 알아볼까요 </ h3 >
< div class = "outBox" >
< label for = "num" > 월: </ label >
< input type = "text" id = "num" >
</ div >
< button id = "btn" > 확인 </ button >
< div class = "relBox" id = "result" ></ div >
<!-- let result = document.getElementById("result");에서 작동됨 -->
</ div >
< script >
let btn = document . getElementById ( "btn" )
btn . addEventListener ( "click" , function () {
let num = Number ( document . getElementById ( "num" ). value );
// value 매우 중요 !!!
let result = document . getElementById ( "result" );
if ( num >= 1 && num <= 2 ) {
result . innerHTML = "겨울"
} else if ( num >= 3 & num <= 5 ) {
result . innerHTML = "봄" ;
} else if ( num >= 6 & num <= 8 ) {
result . innerHTML = "여름" ;
} else if ( num >= 9 & num <= 11 ) {
result . innerHTML = "가을" ;
} else if ( num == 12 ) {
result . innerHTML = "겨울" ;
} else {
result . innerHTML = "잘못입력하셨습니다." ;
}
});
</ script >
</ body >
</ html >
로그인 판독 문제
아이디와 비밀번호를 입력받아 아이디와 비밀번호가 동일하면 로그인 되었습니다를 출력
아이디가 틀리면 아이디가 틀렸습니다
비밀번호가 틀리면 비밀번호가 틀렸습니다를 표시하는 프로그램 구현
