함수란?
• 목적을 가지고 작성된 코드 블록
• 데이터를 전달받아 처리한 후, 결과를 돌려주는 코드 블록
반복적인 코드를 줄여주며 코드 재사용과 유지보수가 용이해짐
함수의 구성과 호출
자바스크립트는 타입 (문자열 숫자 등) 상관 없지만 다른 언어는 문자열은 문자열만 숫자는 숫자열만 지정해야 하는 특성이 있음
실습)
대표적인 자바스크립트 함수
• eval() 함수
식을 계산하고 결과 리턴
var res = eval("2*3+4*6"); // res는 30
• parseInt() 함수
문자열을 숫자로 바꿔주는 함수
var l = parseInt("32"); // "32"를 10진수로 변환, 정수 32 리턴
var n = parseInt("0x32"); // "0x32"를 16진수로 해석, 정수 50 리턴
• isNaN() 함수
숫자가 아님을 나타내는 함수(Not A Number)
isNaN(32) // false
isNaN(“32”) // false
isNaN(“hello”) // true
isNaN(NaN) // true
| 전역 함수명 | 설명 |
| eval(exp) | exp의 자바스크립트 식을 계산하고 결과 리턴 |
| parseInt(str) | str 문자열을 10진 정수로 변환하여 리턴 |
| parseFloat(str) | str 문자열을 실수로 바꾸어서 리턴 |
| inFinite(value) | value가 숫자이면 true 리턴 |
| inNaN(value) | value가 숫자가 아니면 true 리턴 |
실습) 구구단 출력 함수 만들기
<body>
<h3>구구단 출력 함수 만들기</h3>
<hr>
<script>
function gugudan(n) { // 함수 작성
var m = parseInt(n); // 문자열 n을 숫자로 바꿈
if(isNaN(m) || m < 1 || m > 9) {
alert("잘못입력하셨습니다.");
return;
}
// i는 1~9까지 반복
for(var i=1; i<=9; i++) {
document.write(m + "x" + i + "=" + m*i + "<br>");
}
}
</script>
<script>
var n = prompt("구구단 몇 단을 원하세요", ""); // n은 문자열
gugudan(n); // 함수 호출
</script>
</body>
다이얼로그
자바스크립트 다이얼로그
- 사용자 입력 및 메시지 출력
종류
• 프롬프트(prompt) 다이얼로그
• 확인(confirm) 다이얼로그
• 경고(alert) 다이얼로그
prompt() 함수
prompt(“메시지”, “디폴트 입력값”) 함수
• 사용자로부터 문자열을 입력 받아 리턴
• 디폴트 값은 생략 가능
confirm() 함수
confirm(“메시지”) 함수
• “메시지”를 출력하고 확인/취소(OK/CANCEL) 버튼을 가진 다이얼로그 출력
• ‘확인’ 버튼을 누르면 true 리턴
• ‘취소’ 버튼을 누르거나 강제로 닫으면 false 리턴
alert() 함수
alert(“메시지”) 함수
• 메시지와 ‘확인’ 버튼을 가진 다이얼로그 출력
• 메시지 전달
화살표 함수(arrow function)
함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법
// 함수 선언문으로 함수 정의
function adder(a, b) {
var sum = a +b;
return sum;
};
// 화살표 함수로 정의
let adder = (a, b) => {
let sum = a + b;
return sum;
};
화살표 함수 왜쓰는데 굳이 ?
매개변수가 없는 경우
✔️ 중괄호를 생략 가능
- 코드가 한 줄인 경우에만! (코드를 줄일 수 있음)
매개변수가 1개인 경우
✔️ 소괄호, 중괄호 생략 가능
- 소괄호 : 매개변수가 한 개인 경우 생략
- 중괄호 : 코드가 한 줄인 경우 생략
매개변수가 2개 이상인 경우 (생략 불가능)
코드가 여러 줄인 함수 (생략 불가능)
코드가 한 줄인 함수
✔️ 중괄호 return 키워드 생략 가능
HTML DOM과 Document
HTML 페이지와 자바스크립트 객체
3가지 유형의 객체
자바스크립트 코드는 브라우저로부터 3가지 유형의 객체를 제공받아 활용
HTML DOM ( Document Object Model )
간단하게 DOM이라고도 부름
웹 페이지에 작성된 HTML 태그마다 객체(DOM 객체) 생성
목적
• HTML 태그가 출력된 모양이나 컨텐츠를 제어
• DOM 객체를 통해 각 태그의 CSS 스타일 시트 접근 및 변경
• HTML 태그에 의해 출력된 텍스트나 이미지 변경
DOM 트리
• HTML 태그의 포함 관계에 따라 DOM 객체의 트리(tree) 생성
• DOM 트리는 부모 자식 관계로 구성
DOM 객체
• DOM 트리의 한 노드
• HTML 태그 당 하나의 DOM 객체 생성
• 각 노드는 DOM 노드 또는 DOM 엘리먼트라고 부름
DOM 트리의 특징
• DOM 트리의 루트는 document 객체
• DOM 객체의 종류는 HTML 태그 종류만큼 있음
- HTML 태그 당 DOM 객체가 하나씩 생성
• HTML 태그의 포함관계에 따라 DOM 트리에 부모 자식 관계로 구성
브라우저가 HTML 태그를 화면에 그리는 과정
• 브라우저가 DOM 트리의 틀(document 객체) 생성
• 브라우저가 HTML 태그를 읽고 DOM 트리에 DOM 객체 생성
• 브라우저는 DOM 객체를 화면에 출력
• HTML 문서 로딩이 완료되면 DOM 트리 완성
• DOM 객체 변경 시, 브라우저는 해당 HTML 태그의 출력 모양을 바로 갱신
DOM 객체와 HTML 페이지의 화면 출력
DOM 객체의 구성 요소
• 프로퍼티(property)
• HTML 태그의 속성(attribute) 반영
• 메서드(method)
• DOM 객체의 멤버 함수로서, HTML 태그 제어 가능
• 컬렉션(collection)
• 자식 DOM 객체들의 주소를 가지는 등 배열과 비슷한 집합 적 정보
• 이벤트 리스너(event listener)
• HTML 태그에 작성된 이벤트 리스너 반영
• 약 70여개의 이벤트 리스너를 가질 수 있음
• CSS3 스타일
• HTML 태그에 설정된 CSS3 스타일 시트 정보를 반영
• DOM 객체의 style 프로퍼티를 통해 HTML 태그의 모양 제어 가능
DOM 객체의 프로퍼티와 DOM 객체 사이의 관계
DOM 객체 사이의 관계
• DOM 객체들은 DOM 트리에서 부모, 자식, 형제 관계로 연결
사용되는 프로퍼티 목록
• parentElement 프로퍼티
• 부모 객체
• children 프로퍼티
• 직계 자식들의 컬렉션
• firstElementChild 프로퍼티
• 첫 번째 직계 자식
• lastElementChild 프로퍼티
• 마지막 직계 자식
• sibling
• previousElementSibling 프로퍼티 : 왼쪽 sibling 객체
• nextElementSibling 프로퍼티 : 오른쪽 sibling 객체
DOM 객체의 주요 공통 프로퍼티
document 객체
document
- HTML 문서 전체를 대변하는 객체
• 프로퍼티
- HTML 문서의 전반적인 속성 내포
• 메서드
- DOM 객체 검색, DOM 객체 생성, HTML 문서 전반적 제어
• 모든 DOM 객체를 접근하는 경로의 시작점
• DOM 트리의 최상위 객체
- 브라우저는 HTML 문서 로드 전, document 객체를 먼저 생성
- document 객체를 뿌리로 하여 DOM 트리 생성
document 객체 접근 방법
| window.document 또는 document |
• document 객체는 DOM 객체가 아님
• 연결된 스타일 시트가 없음
실습) DOM 객체의 구조 출력 : p 객체
결과)
DOM 객체 다루기
DOM 객체 구분, id 속성
• 페이지 내에 같은 HTML 태그가 여러 개 있는 경우, id 속성 값으로 구분
• id 속성 값은 HTML 페이지 내에서 유일한 값이어야 함
• 동일한 id 값이 있는 경우
• 화면 출력에는 문제가 없음
• id 값을 이용해서 DOM 객체를 찾는 경우, 먼저 나온 태그가 항상 찾아지게 되는 문제가 있음
id 값으로 DOM 객체 찾기
document.getElementById()
다음과 같이 한 줄로 작성 가능
DOM 객체의 CSS3 스타일 동적 변경
• style 객체는 HTML 태그의 CSS3 스타일 시트 정보를 가짐
• style 객체를 이용하면 이미 출력된 HTML 태그의 모양 변경이 가능
• DOM 객체의 style 프로퍼티로 접근
• CSS3 스타일 프로퍼티는 다음과 같이 사용
• background-color → backgroundColor
• font-size → fontSize
실습) <span>의 CSS3 스타일 동적 변경
결과)
innerHTML 프로퍼티
- 시작 태그와 종료 태그 사이에 들어있는 HTML 컨텐츠
innerHTML 프로퍼티를 이용하여 <p></p>사이의 HTML 텍스트를 읽을 수 있음
• innerHTML 프로퍼티 수정 → HTML 태그의 컨텐츠 변경
실습) innerHTML을 이용하여 HTML 컨텐츠 변경
<body>
<p id="firstP" style="color: blue" onclick="change()">
여기를<span style="color: red">클릭하세요.</span>
</p>
<script>
function change() {
var p = document.getElementById("firstP");
p.innerHTML = "나의 <img src='puppy.png'>강아지입니다.";
}
</script>
</body>
결과)
this 키워드
• 객체 자신을 가리키는 자바스크립트 키워드
• DOM 객체에서 객체 자신을 가리키는 용도로 사용
<body>
<script>
function change(obj, size, color) {
obj.style.color = color;
obj.style.fontSize = size;
}
</script>
<h3>this 활용</h3>
<hr />
<button onclick="change(this, '30px', 'red')">버튼</button>
<button onclick="change(this, '30px', 'blue')">버튼</button>
<div onclick="change(this, '25px', 'orange')">여기를 클릭하면 크기와 색 변경</div>
</body>
결과)
DOM 트리에서 DOM 객체 찾기
1. 태그 이름으로 DOM 객체 찾기
document.getElementsByTagName()
태그 이름이 같은 모든 DOM 객체들을 찾아 컬렉션 리턴
예) <div> 태그의 모든 DOM 객체 찾기
2. class 속성으로 DOM 객체 찾기
document.getElementsByClassName()
동일한 class 이름을 가진 모든 DOM 객체들을 찾아 컬렉션 리턴
예)
실습) getElementsByTagName()
<head>
<title> getElementsByTagName() </title>
<script>
function change() {
var spanArray = document.getElementsByTagName("span");
for(var i=0; i<spanArray.length; i++) {
var span = spanArray[i];
span.style.color = "orange";
span.style.fontSize = "20px";
}
}
</script>
</head>
<body>
<h3>내가 좋아하는 과일
<button onclick="change()">누르세요</button>
</h3>
<hr>
저는 빨간 <span>사과</span>를 좋아해서 아침마다 한 개씩 먹고 있어요.
운동할 때는 중간 중간에 <span>바나나</span>를 먹지요. 탄수화물 섭취가 빨라
힘이 납니다. 또한 달콤한 향기를 품은 <span>체리</span>와 여름 냄새 물씬
나는 <span>자두</span>를 좋아합니다.
</body>
결과)
css 선택자로 DOM 객체 찾기
document.querySelector()
특정 id, class, name으로 제한하지 않고, css 선택자를 사용 하여 DOM 객체를 찾음
선택자에 해당하는 첫 번째 요소만 리턴 (딱 한 개만)
제일 많이 사용!
예)
실습) querySelector() - 1
실습) querySelector() - 2
document.querySelectorAll()
document.querySelector가 선택자에 해당하는 첫 번째 요소만 리턴하는 것과 반대로
동일한 css 선택자를 가진 모든 DOM 객체들을 찾아 NodeList 로 리턴 (여러개 가능)
콤마(,)를 사용하여 여러 DOM 객체를 한번에 가져올 수 있음
실습) querySelectorAll() - 1
실습) querySelectorAll() - 2
실습) querySelectorAll() - 3
문서의 동적 구성
DOM 객체 동적 생성
document.createElement(“태그이름”)
태그이름의 DOM 객체 생성
DOM 트리에 삽입
예) <div> 태그를 id=“p”> 태그의 마지막 자식으로 추가
DOM 객체 삭제
예) “id=myDiv”인 DOM 객체를 DOM 트리에서 삭제
실습) HTML 태그의 동적 추가 및 삭제
<head>
<title>문서의 동적 구성</title></head>
<script>
function createDIV() {
var obj = document.getElementById("parent");
var newDIV = document.createElement("div");
newDIV.innerHTML = "새로 생성된 DIV입니다.";
newDIV.setAttribute("id", "myDiv");
newDIV.style.backgroundColor = "yellow";
newDIV.onclick = function() {
var body = this.parentElement; // 부모 HTML 태그 요소
body.removeChild(this); // 자신을 부모로부터 제거
};
obj.appendChild(newDIV);
}
</script>
<body id="parent">
<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3>
<hr>
<p>DOM 트리에 동적으로 객체를 삽입할 수 있습니다.
createElement(), appendChild(), removeChild() 메서드를 이용하여 새로운 객체를 생성,
삽입, 삭제하는 예제입니다.
</p>
<a href="javascript:createDIV()">DIV 생성</a>
</body>
결과)
새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 4주차 블로그 포스팅
'Javascript' 카테고리의 다른 글
| [새싹 프론트엔드] 4주차 - 4 (0) | 2022.11.10 |
|---|---|
| [새싹 프론트엔드] 4주차 - 3 (0) | 2022.11.09 |
| [새싹 프론트엔드] 4주차 - 1 (0) | 2022.11.07 |
| [새싹 프론트엔드] 3주차 - 3 (0) | 2022.11.02 |
| [새싹 프론트엔드] 3주차 - 2 조건문 & 반복문 (0) | 2022.11.01 |
