공부하는 비오

if else 를 사용하여 오류를 예외로 처리할 수도 있지만, try catch를 사용하면, 디버깅 할때 혹은 코드를 살펴볼때, 한눈에 오류처리라는 것을 파악할 수 있음.(가독성) try { A } catch() { B} A를 실행해보고, 실행되지않는다면(오류가 난다면) B 실행. ex/ try{ new Array(-1); } catch(e){ alert(`오류정보 : ${e.name} , 오류메시지 : ${e.message}`); } **템플릿 리터럴 js에서 html의 문자열과 변수를 함께 사용하려면 ''과 +를 사용하여 연결시켜야했지만, 이 방법을 사용하면 좀더 간편하게 처리할 수 있음. - ' ' 대신 ` `으로 문자열을 감싼다. - 변수는 ${ } 을 사용하여 넣어줌. alert(`오류정보 : ..

JavaScript 2020. 6. 18. 14:23

연습 1. 이미지가 왼쪽에서 나와서 왼쪽으로 사라지는 슬라이드 load 메서드를 사용하지 않을 경우, 딜레이가 생김. 이미지가 다 로드되기 전 siblings().css가 시행되어, 적용되지 않은채 slide 함수가 실행됨. (img2,3,4가 사라지지 않은채 로드될때가지 화면에 남아있음) 이미지가 왼쪽으로 사라지고, 그 다음이미지가 오른쪽으로 나타나는 슬라이드. 연습 2. 이미지가 왼쪽에서 나와서 오른쪽으로 사라지는 슬라이드 animate 메서드는 중복 적용 x gird로 하늘색 박스 영역을 분홍색박스와 겹쳐서 0~3으로 설정하려했으나 안됨. 그래서 margin-left 값을 마이너스로 적용함. 이미지는 하늘색 박스 안에만 있음. 이미지가 왼쪽에서 나와 중간에 2초머물다가 오른쪽으로 사라지고, 다음 사..

jQuery 2020. 5. 29. 12:26

애니메이션 적용 원리 애니메이션 메서드는 함수가 적용된 순서대로 큐(queue)에 저장됨. 큐는 FIFO(First In First Out)형식으로 작동. (== 먼저 들어간 효과가 먼저 적용됨.) 제어메서드(ex. stop 메서드)가 왜 필요할까? 스탑메서드가 없는 경우, 파란 박스 위에 마우스를 올렸다가 뺐다가를 30회 반복했을 때, 마우스가 파란박스 밖에만 있어도 30회를 반복할 때 까지 애니메이션 실행. 스탑메서드가 있는 경우, 마우스를 상자위로 이동했다가 밖으로 옮길 때, 아직 박스가 다 늘어나지 않더라도 마우스를 상자밖으로 옮기면 늘어나는 것을 멈추고 원래 크기로 돌아옴. // 제어메서드를 사용할 경우, 사용자의 움직임에 따라 애니메이션이 바로 반응함. // 제어메서드를 사용하지 않는다면, 사..

jQuery 2020. 5. 28. 12:10

효과 메서드 사용법 $('요소 선택').효과메서드(효과 소요 시간, 가속도, 콜백함수); -효과 소요시간 'slow', 'normal', 'fast' 1000(1초), 500(0.5초) -가속도 'swing' : 시작과 끝은 느리고 중간은 빠른 속도로. 'linear' : 일정한 속도로. -콜백함수 : 효과가 끝난후 실행할 함수. 생략가능. 효과 메서드 숨김 hide( ) 요소를 숨김. fadeOut( ) 요소가 점점 투명해지며 숨겨짐. slideUp( ) 요소가 위로 접히며 숨겨짐. 노출 show( ) 숨겨진 요소 노출. fadeIn( ) 숨겨진 요소가 점점 선명해짐. slideDown( ) 숨겨진 요소가 아래로 펼쳐짐. 노출, 숨김 toggle( ) hide( ), show( ) 효과 적용. fade..

jQuery 2020. 5. 28. 10:38

focus blur focusin focusout focus와 blur는 선택요소를 직접 focus 할 경우 적용되고, focusin과 focusout은 선택요소의 하위요소를 focus할 경우 선택요소에 적용된다. 메서드 두개 사용 moseover, mouseout만 사용한 버튼1에서는 마우스를 버튼위에 가져다 놓을 때 'javascript'라는 문구가 화면에 나타나는 것을 볼 수 있다. mouseover과 focus, mouseout과 blur를 함께 사용한 버튼2에서는 마우스를 버툰위에 가져다 놓거나 키보드로 버튼을 선택하거나 마우스로 버튼을 선택(클릭)할 때 (focus) 'welcom'이라는 문구가 화면에 나타나는 것을 볼 수 있다. >>> 더 많은 경우(마우스외에 키보드를 사용하는 경우)의 호환..

jQuery 2020. 5. 28. 10:04

click dbclick hover 버튼1을 클릭했을 때, 텍스트1의 배경색이 변함. (preventDefault 속성을 사용하여 a의 링크 이벤트 사용중지.) 버튼2를 더블클릭했을 때, 텍스트2의 배경색이 변함. 버튼3에 마우스 포인터를 가져갔을 때, 텍스트3의 배경색이 변함. 버튼3 밖으로 포인터를 가져가는 경우, 텍스트3의 배경색이 다시 원래색으로 돌아감. mouseout mouseleave 내용1에서 마우스포인터가 벗어나면 배경이 노란색으로 변함. 내용4를 포함한 범위에서 마우스포인터가 벗어나면 배경이 분홍색으로 변함. mousemove 화면에서 마우스 포인터의 위치에 따라 값이 변함. scroll 스크롤의 위치에 따라 값이 변함.

jQuery 2020. 5. 27. 15:21

ready : 지정한 HTML 문서 객체의 로딩 완료후 이벤트 발생. (연동된 소스의 로딩 이전) load : 선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩 완료 이후 이벤트 발생. 직접경로로 이미지를 넣었을 때와 간접경로로 이미지를 넣었을 때 결과가 다름. 1. 간접경로(인터넷 이미지 주소)로 이미지를 넣은 경우. ready 1 : 0 load 1 : 300 2. 직접경로로 이미지를 넣은 경우. ready 2 : 300 load 2 : 300

jQuery 2020. 5. 27. 14:52

이벤트 발생시, 이벤트 핸들러의 매개변수에 이벤트 객체 생성. 객체에는 이벤트 타입에 맞는 속성과 메서드 포함. 이벤트 객체 생성 $('이벤트 대상 선택').이벤트등록메서드(function(매개변수){ 매개변수(이벤트객체).속성; } 이벤트 객체 속성 마우스 이벤트 clientX 마우스 포인터의 X 좌표값을 반환. clientY 마우스 포인터의 Y 좌표값을 반환. pageX 스크롤 X축의 이동거리를 계산하여 마우스 포인터의 X좌표값 반환. pageY 스크롤 Y축의 이동거리를 계산하여 마우스 포인터의 X좌표값 반환. screenX 화면 모니터를 기준으로 마우스 포인터의 X좌표값을 반환. screenY 화면 모니터를 기준으로 마우스 포인터의 Y좌표값을 반환. layerX position을 적용한 요소를 기준..

jQuery 2020. 5. 27. 14:21