한바다
[JS]프롬포트,요소접근방법 등 본문
✔프롬포트
문자열을 작성할 수 있는 알림창
- 확인 버튼을 클릭할 경우 : 입력한 내용 전달
- 취소 버튼을 클릭할 경우 : null 값 전달
[프롬포트 실습]
<h1>프롬포트 실습하기</h1>
<button onclick="프롬포트버튼()">잔액확인하기</button>
<script>
function 프롬포트버튼() {
const 비밀번호입력 = prompt("비밀번호 확인하세요.");
// 비밀번호는 1234
const 잔액 = "$1,000";
//만약에 입력한 비밀번호가 1234 일치하다면 잔액 보여주기
if(비밀번호입력 == "1234") {
alert("비밀번호가 맞습니다. 잔액은" + 잔액+ "입니다.)
// else 를 사용해서 1234가 아닐 경우 비밀번호가 아니다. 라고 표현할 수 있지만
// 빈 값일 때 비밀번호가 일치하다며 넘어가는 오류 또한 방지하기 위해
// 비밀번호가 빈공간이 아닐 때 도 추가해주면 좋음
} else if (비밀번호 입력 != null) {
alert("비밀번호가 틀력습니다.");
}
}
</script>
✔반복문
- for 문
프로그램 흐름을 제어하는 제어문 중 하나 특정 코드를 반복할 때 사용하는 구문
끝이 정해져 있는 방복에서 주로 사용 (ex. 몇 번만 반복하고 끝내자)
[작성법]
for(초기실: 조건식: 증감식) {
조건식이 true인 경우 반복 수행할 코드;
}
for 문이나 for each 사용가능
-while 문
끝이 정확하게 정해져 있지 않은 반복에서 주로 사용
[작성법]
while(true인 조건식) {
조건식이 true일 경우 반복 수행할 코드;
}
＊ false가 나올 때 까지 무한 반복
- 분기문
반복문 수행 중 반복을 멈추거나 넘어가는 구문
break : (가장 가까운 / 감싸고 있는) 반복문을 멈춤
continue : (가장 가까운 / 감싸고 있는) 반복문의 시작으로 이동
-> 다음 반복으로 넘어감
✔배열
변수를 묶음으로 다루는 것. 자료형 상관 없이 여러 값을 한번에 다룸
JavaScript 배열 특징
1.자료형 제한X (String int 구분x, 보통은 한 가지 자료형만 저장)
2.길이제한X (자동으로 길이가 늘었다, 줄었다 함)
[배열 선언 방법]
1. const arr = new Array(); // 0칸짜리 비어있는 배열 생성
2. const arr = new Array(3); // 3칸짜리 배열 생성, 3칸 생성은 해주되 안에 있는 값은 비어있음
3. const arr = []; // 0 칸짜리 비어있는 배열 생성
4. const arr = [값1, 값2, 값3]; //3칸짜리 배열 생성 생성 각 칸의 값이 값으로 채워져 있음
✔요소 접근 방법
-DOM(Document Object Model)
웹문서(html)의 모든 태그를 객체 형식으로 표현한 것
(html 태그(body, hN, pre, span 등)를 javaScript에서는 객체라고 표현)
html 태그 = javascript 객체 ex> body 태그 = body 객체
-> html 문서 내에서 특정 태그에 접근 가능
특정 태그에 접근해서 속성값을 새로 만들거나 변경하거나 얻어올 수 있음
documet.getElemnetById("id이름값");
어떤 태그인지 알수는 없지만 id이름값으로 지정한 태그 정보를 가져온다는 의미
- DOM을 이용한 태그 접근하기
1. id로 접근하기 : document.getElementByID("id이름값");
-> id가 일치하는 태그를 얻어옴
2. class로 젒근하기 : document.getElementByClassName("class이름값");
-> class이름이 일치하는 태그를 얻어옴
클래스이름이 일치하는 태그가 많을 경우 (한가지가 아닐경우)
모두 가져와서 배열 형태로 저장한다음 전달
3. name으로 접근하기 : document.getElememtByName("name이름값");
- 태그 속성 정리
DOM을 이용해서 태그를 접근하고접근한 태그에는 추가하거나 수정하거나 제거하는 역할을 해주는 속성이 있음
textContent : 태그에서 자식 태그의 모든 태그 내용을 보여줌.
HTML 태그를 무시하고 텍스트만 가져오거나 설정할 때 사용
외부 공격을 방지할 때 사용.
innerText와 같지만 다른 방식으로 작동. 쓰임을 같음
innerText : 태그에서 자식 태그의 모든 태그 내용을 보여줌.
HTML 태그를 무시하고 텍스트만 가져오거나 설정할 때 사용
css를 새로 설정해서 적용하거나 추가적인 스타일 변경이 필요한 경우 사용.
외부 공격 방지는 하지 못함
value : input 이나 textarea 등의 값을 가져오거나 설정할 때 사용
이 외 체크박스 라디오 버튼 등 다양한 폼 태그 값을 다룰 때 유용.
태그 안에 소비자가 입력하거나 개발자가 입력해놓은 값을 가지고 오는 것
innerHTML : html 안에 html 만들어서 작성
style : html 태그의 스타일을 설정하거나 가져올 때 사용
스타일을 유동적으로 변경할 수 있음
색상, 글꼴, 배경색 등을 설정할 수 있음. 보이기 숨기기도 가능
className : html 태그에서 클래스이름을 가져오거나 설정 할 때 사용
createElement : 태그 생성하기 닫는 태그 표시 안해줘도 됨
예를 들어 div 태그를 생성하길 원한다면
document.createElement('div');
appendChild : 눈에 보이게끔 부모 태그에 새로 만든 자식 태그를 추가
메뉴리스트.appendChild(newItem);
id값 제거하고 작성하기 ul.appendChild(li);
메뉴리스트 = ul 태그 값
newItem = 새로 추가되는 li 태그 값