typeof 연산자
자바스크립트에서 변수의 타입을 체크할 때 사용하는 연산자는 typeof 이다.
<h2>함수에서 데이터의 타입채크</h2>
<hr>
<button onclick="clickProcess(100);">숫자</button>
<button onclick="clickProcess('100');">문자열</button>
<button onclick="clickProcess(true);">논리값</button>
<button onclick="clickProcess(function(){ });">함수</button>
<button onclick="clickProcess([ ]);">배열</button>
<button onclick="clickProcess({ });">객체</button>
<button onclick="clickProcess();">????</button>
<script>
function clickProcess(p) {
if (typeof p == "number") {
window.alert("숫자 전달!!");
} else if (typeof p == "string") {
alert("문자열 전달!!");
} else if (typeof p == "boolean") {
alert("논리값 전달!!");
} else if (typeof p == "function") {
alert("함수 전달!!");
} else if (typeof p == "object") {
if (Array.isArray(p))
alert("배열객체 전달!!");
else
alert("객체 전달!!");
} else if (typeof p == "undefined") { // p == undefined
alert("전달된 아규먼트 없음!!");
}
}typeof 는 문자열로 결과를 전달하기 때문에 "문자열"과 비교해야한다
자바스크립트의 객체
var obj = {
name : "듀크",
eat : function(food) {
write(this.name+"가 "+food+"를 먹어요.", "h3")
}
}
obj.eat("바나나");
obj.eat("딸기");
hr()
write(typeof obj, "h2");
obj.project = "자바스크립트";
obj.study = function() {
write(this.name+"는 "+this.project+"를 공부해요.", "h3");
}
obj.study();
for(var key in obj) {
write(key + ":" + obj[key], "h3");
}
delete obj.study;
hr();
for(var key in obj) {
write(key + ":" + obj[key], "h3");
}obj라는 객체 안에 name이라는 변수와 eat 매소드가 선언되어 있음
자바스크립트는 파이썬과 마찬가지로 객체지향을 지원하는 인터프리터 언어기 때문에
객체를 만들 때 객체 안의 변수에서 반드시 this를 사용해야한다.
this - 사용된 위치에 따라서 가리키는 대상이 달라진다.
- 객체 안에서는 객체 자신을 참조한다.
- 이벤트 핸들러 역할의 함수안에서는 이벤트가 발생된 대상 객체(이벤트 타겟)
객체에 for 구문을 쓰게 되면 key값을 하나씩 받아오게 된다.
받아온 key 값은 인덱스처럼 사용이 가능하다.
DOM 프로그래밍
문서 객체 모델 (Document Object Model): 객체지향모델로써 구조화된 문서를 표현하는 형식
Document 메소드
Document 객체는 웹페이지를 의미합니다
웹페이지에 존재하는 html 요소에 접근하고자 할 때는
반드시 document 객체부터 시작해야한다.
HTML요소와 관련된 작업을 도와주는 다양한 메소드 제공
1.HTML요소의 선택
2.HTML요소의 생성
3.HTML 이벤트 핸들러 추가
4.HTML 객체의 선택
✅ HTML요소의 선택 관련 메소드
---관심있는 기술을 선택해 주세요--- Learn JavaScript Learn HTML DOM Learn jQuery Learn AJAX Learn JSON선택상자 만들기
<form name="fm">
<select id="choice" onchange="go();">
<option value="">---관심있는 기술을 선택해 주세요---</option>
<option value="http://www.w3schools.com/js/default.asp">Learn JavaScript</option>
<option value="http://www.w3schools.com/js/js_htmldom.asp">Learn HTML DOM</option>
<option value="http://www.w3schools.com/jquery/default.asp">Learn jQuery</option>
<option value="http://www.w3schools.com/xml/ajax_intro.asp">Learn AJAX</option>
<option value="http://www.w3schools.com/js/js_json_intro.asp">Learn JSON</option>
</select>
</form>
<script>
function go(){
location.href = document.getElementById("choice").value;
//location.href = document.querySelector("#choice").value;
//location.href = "http://www.naver.com/";
}
</script>onchange 이벤트 발생 시 go() 함수 호출
choice라는 아이디를 가진 element를 선택해서 value값을 가져옴
location.href=> 해당 웹페이지 url 주소로 이동
✅ HTML요소의 생성 관련 메소드
✅ HTML 이벤트 핸들러 추가
✅ DOM요소의 스타일 변경
var selectedItem = document.getElementById("even");
selectedItem.style.color="red";
✅ DOM요소의 내용 변경
var str = document.getElementById("text");
str.innerHTML = "요소의 내용을 바꿉니다."
let h1doms = document.getElementsByTagName("h1");
writeColor(h1doms,"h3","orange");//HTML Collection 객체 =>[object HTMLCollection]
writeColor(h1doms.length, "h3", 'blue'); //4
for(var i=0; i < h1doms.length; i++)
writeColor(h1doms[i].innerHTML, "h3", "red"); //[object HTMLHeadingElement] textContext가 더 적합
let h2doms = document.getElementsByTagName("h2");
write(h2doms.length, "h3");
writeColor(h2doms[0].innerHTML, "h3", "blue");
ex) h1 태그들을 선택해서 가져옴
getElementByTagName("h1"): HTML Collection 객체 =>[object HTMLCollection] 반환
HTML collection 객체들은 [object HTMLHeadingElement] 으로 이루어짐
각각의 객체에 innerHTML 이나 textcontent 를 해줘야 진짜 데이터를 가져올 수 있음
세 가지 이벤트 모델
1. 인라인 이벤트 모델
인라인 이벤트 모델 - HTML 태그에 on이벤트이름="처리코드"를 정의하는 방식
2. 고전 이벤트 모델
고전(전역) 이벤트 모델 - 이벤트를 처리하려는 HTML 태그의
자바스크립트 객체(DOM객체)를 찾는다.
DOM객체.on이벤트이름(소문자) = 함수
DOM객체.on이벤트이름(소문자) = null
3. 표준 이벤트 모델
표준(전역) 이벤트 모델 - 이벤트를 처리하려는 HTML 태그의
자바스크립트 객체(DOM객체)를 찾는다.
DOM객체.addEventListener("이벤트이름", 함수)
DOM객체.removeEventListener("이벤트이름", 함수)
