- 스코프 : 어떤 변수들에 접근할 수 있는지를 정의 ( function(){} 단위로 생성, 최상단 스코프 = Global 스코프)- 호이스팅 : var를 통해 정의된 변수의 선언문을 유효 범위(해당 스코프)의 최상단으로 끌어올리는 행위 ( 중요: 선언문만 끌어올리고 값은 끌어올리지 않는다.) 예제123456789var a = 1; test(); function test(){ console.log(a); var a =2; console.log(a);}cs 다음과 같은 자바스크립트 코드가 있을 때 출력결과는?? >>> undifined2 해설> 맨위의 변수 a는 원래는 test함수의 내부까지 값을 전달할 수 있었습니다. 만약 7번줄의 변수명이 a가 아니었다면 말이죠. a라는 변수를 test 함수내부에서 ..
자바스크립트 수행1. 태그검색 -> 2. 이벤트 추가 -> 3. 태그검색 -> 4. 태그 조작- 검색 & 조작에 사용된 도구 : BOM- 검색 & 조작에 사용된 도구 : DOM★ BOM - 미리 정해져 있는 트리구조를 사용(일부 태그만 제어 가능)- 태그마다 정해져있는 속성이 있다.★ DOM- Document Object model- 트리구조 사용 -> 해당 페이지의 소스에 의해서 결정된다.- 모든 태그에 접근 가능(**********)- 모든 태그마다 동일한 속성을 제공한다. DOM을 이용해 태그를 잡는 방법 1234567891011 Colored by Color Scriptercs 다음과 같은 body의 태그구조가 있다고 할때 (1) name속성으로 검색 - 배열반환var btna = document..
location 객체- window 자식 객체- 브라우저 보고있는 문서의 위치(주소,URL)를 제어하는 객체 location.href - 전체 URL 네이버로 페이지 이동하기location.reload(); - 새로고침, f5 history 객체- window 자식 객체- (현재 세션에 한해서) 브라우저의 방문 기록 접근/조작 객체 history.back(); -> 뒤로가기 버튼과 동일(브라우저) ***************history.forward(); ->앞으로가기 버튼과 동일 go(n) : n(양의 정수 ~ 음의 정수)history.go(-1);history.go(-2); location, history 에서 가장 많이 쓰이는 구문(상황) location.href(1) 페이지 이동을 위한 상황에서..
window 객체 - 브라우저(창)을 참조하는 객체 - BOM의 최상위 객체 - 예약어 제공 객체 - 창을 조작 HTML 태그가 다음과 같이 있을 때 12345678910111213141516 Colored by Color Scriptercs 클릭시 새창을 여는 버튼 클릭 이벤트 12345678910btn1.onclick=function(){ //window.close(); // 현재 window 닫기. // 창을 새로 띄우기(자식창) //window.open(URL,이름,옵션); //window.open("ex14_collection.htm","child","width=200,height=200,top=550,left=220"); //이것만 기억해두자 //이름은 중복창 제어용 child = window..
HTML 태그의 속성 제어 - 자바스크립트 개발자의 접근성을 높이기 위해서 HTML 태그가 가지는 속성을 동일한 이름으로 자바스크립트에서도 제공하고 있다.(input value -> txt1.value)- 속성의 대부분은 읽기/쓰기를 모두 지원한다.- HTML의 속성명이 유효하지 않으면 캐멀표기법(readOnly)으로 제공한다.- HTML의 속성값a. 숫자 -> 숫자b. 열거형 -> 문자열c. 색상 -> 문자열d. 플래그 -> 논리형(true,false) 예제보면서 공부하기! 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869..
키보드 관련 이벤트 - onkeyXXX- 폼 관련 태그들만 사용한다.(포커스를 가지는 태그에만 적용 가능) + 1. onkeydown- 키를 눌렀을 때 발생- 물리키에 반응- 현재 눌린 문자와는 상관없이 물리적인 키에만 반응 2. onkeyup- 키를 떼었을 때 발생 3. onkeypress- 키를 눌렀을 때 발생- 현재 눌린 문자에 반응- 문자 키에 반응 상황별 키보드 이벤트 예제들.. keydown 이벤트 등록- 눌린 키의 문자코드값을 알고 싶은 경우 이벤트 등록..txt1.onkeydown = function(){ console.log(event.keyCode); //문자코드값 : a -> 65}; keyup 이벤트 등록txt2.onkeyup = function() { console.log("key..
마우스 사용할때 발생하는 이벤트 - onmouseXXX 로 시작 1. onmouseover : 해당 객체의 영역위에 커서가 진입하는 순간 발생 2. onmouseout : 해당 영역에서 커서가 빠져나가는 순간 발생 3. onmousedown : 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생 4. onmouseup : 해당 객체의 영역에서 마우스 버튼이 떼는 순간 발생 5. onmousemove : 해당 객체의 영여겡서 커서가 움직이는 순간 발생 어느 버튼을 사용했는지?event 객체- 이벤트에 의해서 호출되는 함수에서 사용하는 예약어- 발생한 사건의 여러가지 정보를 제공 객체- 마우스 왼쪽 버튼에 반응if(event.buttons == 1){txt1.value="마우스 다운";} var txt1..
Event, 이벤트 - BOM에서 다루는 이벤트- 사건- 사용자(사람)와 상호작용하면서 일어나는 사건 > 마우스(키보드,터치,음성..)를 조작하면 조작에 대한 반응ex) 마우스 버튼 클릭 > 프로그램상에서 이벤트 발생(클릭) > 미리 준비해놓은 프로그래밍 코드 호출(실행)이벤트 처리 방식1. 정적 방식- 태그의 속성으로 onXXX 속성을 사용하는 방식- onXXX : 이벤트 핸들러(Event Handler)2. 동적 방식 : DOM이나 JQuery 사용시 이벤트를 script에서 할당 가능. body onload 이벤트- 브라우저가 태그의 모든 내용을 읽은 직후 발생하는 이벤트- 브라우저가 모든 태그를 인식 가능한 상태 > 모든 태그에 접근 가능한 시점- 사용자는 화면을 보기 직전 상태- 페이지의 모든 ..