본문 바로가기
반응형

분류 전체보기

 (35)
HTML 제어하기 2 _ dataset 속성 사용, 탭 메뉴 제어(QnA 혹은 공지사항), 배너 슬라이드 1. dataset 속성 2. 탭 메뉴 제어 3. 배너 슬라이드
HTML 제어하기 1 _ 자바스크립트로 HTML 태그 / CSS 스타일 가져오기 1. HTML 속성 제어 HTML 태그 : Element 값이 있는 속성 : Atrribute 값이 없는 속성 : Property const mytag = document.getElementById( " ・・・・ " ); mytag.hasAttribute( name );ﾠﾠﾠ➞ﾠ속성의 존재 확인 mytag.getAttribute( name );ﾠﾠﾠ➞ﾠ속성 값 받아오기 mytag.setAttribute( name , value );ﾠﾠﾠ➞ﾠ속성 값 변경 mytag.removeAttribute( name );ﾠﾠﾠ➞ﾠ속성 값 제거 2. CSS 속성 제어 개별 속성을 하나하나 제어 class 단위로 제어 const mytag = document.getElementById( " ・・・・ " ); mytag.s..
이벤트 _ 이벤트 리스너, 이벤트 핸들러, 마우스 이벤트, 키보드 이벤트, form 이벤트, 브라우저 이벤트, 트랜지션 이벤트 1. 이벤트란? 프로그램이 겪는 어떠한 사건 -ﾠ사용자의 클릭, 마우스 오버 -ﾠ페이지 로딩 직후, 페이지 종료 직전 ➥ 자바스크립트가 제공하는 브라우저 관련 기능 안에 다양한 이벤트를 감지하는 기능이 구현되어있다. 2. 이벤트 리스너 ( 多 사용 ) 어떤 이벤트가 발생하기를 기다렸다가 이벤트 발생 시 연결된 ' 콜백 함수 ' 를 호출해주는 기능 객체 . addEventListener( ' 이벤트 이름 ' , 콜백 함수 ) ; ➥ 객체 : html 태그 ➥ 이벤트를 감지하는 것은 자바스크립트 안에 이미 내장되어 있지만, ﾠﾠ어떤 이벤트가 발생했을 때 수행할 동작은 웹페이지마다 다를 수밖에 없으므로 ﾠﾠ페이지마다 개별 구현이 필요하다. 3. 이벤트 핸들러 ( 少 사용 ) HTML 태그의 속성 형태로 존재하..
비동기 처리 _ 추첨 기능, 콜백 헬, promise, async await 1. 비동기 처리란? 상위 코드가 작업이 종료가 되지 않아도 다음 코드를 실행시키는 것 예를 들어 어떤 버튼을 클릭하여 실행될 때 ' 10초 ' 가 걸린다고 가정했을 때, 그 ' 10초 ' 가 걸리는 동안 다른 버튼을 클릭하는 등 다른 활동이 가능하다. 하지만 자바스크립트가 비동기 처리가 아닌 동기 처리이면 ' 10초 ' 가 지나야 다른 활동을 할 수 있다. 2. Promise 자바스크립트 " 콜백 헬 " 에서 벗어나게 해주는 함수 작업이 ' 성공했을 때 ' 와 ' 실패했을 때 ' 의 코드를 완벽히 분리 가능 " promise " 를 가동하기 위해서는 " promise " 객체를 리턴하는 함수가 필요 3. Async ~ Await "promise " 함수를 좀 더 깔끔하게 정리 " promise " 객체..
예외처리 _ Syntax Error, Runtime Error, 고전적 예외처리, try-catch-finally 구문, 에러객체를 활용한 예외처리, 에러클래스를 활용한 예외처리 1. 예외처리란? 사용자가 적는 값이 정해진 규칙에 준수하지 않을때 일부러 에러를 발생시키는 것 논리적 구조로 대비할 수 없는 예외 상황에 대응하기 위해 " try - catch - finally " 문법 구조로 처리 예외처리를 사용하는 이유 : 예를 들어 사용자값을 받아오는 ' 회원가입 ' 같은 경우에서 정해진 규칙대로 입력하지 않았을때 에러가 발생하도록 규정하기 위해 2. 고전적인 예외처리 프로그램이 실행하기 적합하지 않은 파라미터가 전달된 경우, 미리 약속된 값을 리턴하는 방법 ( 프로그램의 성공, 실패 여부를 리턴값으로 판단 ) 3. 기본적인 에러 핸들링 " try " 코드 실행 후 에러가 없다면, " try " 안의 마지막 줄까지 실행되고, " catch( error ) " 블록은 건너뜀 " t..
내장기능 _ Date - 지난 날짜 계산, 남은 날짜 계산, 디데이 계산, 달의 1일 요일 계산, 달의 마지막 요일 계산, 달의 마지막 날짜 계산, 달력 만들기 1. 지난 날짜 계산 올해 1월 1일부터 며칠이 지났는지 계산 2. 남은 날짜 계산 올해 12월 31일까지 며칠이 남았는지 계산 3. 디데이 계산 4. 달의 1일 요일 계산 5. 달의 마지막 날 요일 계산( Date의 index 0으로 계산 ) 5. 달의 마지막 날 날짜 계산( Date의 index 0으로 계산 ) 6. 달력 만들기
내장기능 _ Date - toDateString, toISOString, toLocaleString, toLocaleDateString, toLocaleTimeString 1. Date . toDateString( ) 현재 날짜를 ' 문자열 ' 로 변환 2. Date . toISOString( ) 현재 날짜를 ' ISO 8601 ' 형태로 변환 3. Date . toLocaleString( ) 현재 날짜를 ' 형식문자열로 날짜, 시간 ' 을 리턴 4. Date . toLocaleDateString( ) 현재 날짜를 ' 형식문자열로 날짜 ' 을 리턴 5. Date . toLocaleTimeString( ) 현재 날짜를 ' 형식문자열로 시간 ' 을 리턴
내장기능 _ Date - setYear, setMonth, setDate, setHours, setMinutes, setSeconds 1. Date . setYear( ) 현재 날짜에서 변경한 ' 년도 ' 를 리턴 2. Date . setMonth( ) 현재 날짜에서 변경한 ' 월 ' 을 리턴 3. Date . setDate( ) 현재 날짜에서 변경한 ' 몇 일 ' 을 리턴 4. Date . setHours( ) 현재 날짜에서 변경한 ' 시 ' 를 리턴 5. Date . setMinutes( ) 현재 날짜에서 변경한 ' 분 ' 를 리턴 6. Date . setSeconds( ) 현재 날짜에서 변경한 ' 초 ' 를 리턴

티스토리툴바