본문 바로가기

화면 수업 정리

 (16)
HTML,CSS,JS 16일차 document에서 사용되는 이벤트를 정의마우스 이벤트 : click(), focus(), input(), change(), mousevoer(), moseout(), scroll() ...키보드 이벤트 : keyDown(), keyPress(), keyUp()기타 이벤트 : prevnetDefault(), target, submit()addEventListener('evnetName', callback Function)메서드를 사용하여 이벤트 구현을 권장- 이벤트 중복 부여가 가능하기 때문 키보드 이벤트keyDown : 키를 눌렀을 때keyPress : 키를 누르고 있는 시점keyUp : 키가 올라오는 순간 활용) 숫자야구 게임 만들어보기      게임시작 숫자입력 : 게임확인
HTML,CSS,JS 15일차 BOM :Browser Object Model :브라우저의 객체를 지칭하는 용어 (window 객체)DOM : Document Object Model :Html 문서의 객체를 지칭하는 용어 (body 안에 입력된 태그 객체)윈도우 종류와 브라우저 화면 배율 등에 따라 달라짐window.innerHeight : 툴바를 제외한 높이 window.innerWidth : 스크롤바를 포함한 너비 window 메서드 종류window.open('url','window name','option(size,scroll...)');window.close(); 창닫기alert(); / prompt(); input 포함 / confirm(); 확인/취소setInterval(function,millsecond);일정 간격 지속적..
HTML,CSS,JS 14일차 parameter (파라미터)파라미터는 개수 관계없이 사용가능 함수(메서드) 이름이 호출될 때 전달 사용파라미터의 개수가 2개 / 실제 값이 1개 처럼 파라미터의 개수가 불일치하여 받지 못하는 값이 있다면 undefined 처리값을 받아오지 못하는 파라미터가 undefined 처리가 되는걸 막기위해 기본값을 설정할 수 있음. => optional parameter모든 파라미터는 arguments라는 프로퍼티를 이용하여 파라미터를 관리 배열로 담겨서 관리optional parameter는 arguments에 저장되지 않음optional parameter는 다른 파라미터보다 뒤에 있어야 한다. (가장 끝에 존재가능)rest parameter : 남는(이외의, 여분의) 파라미터사용할 파라미터는 일반 파라미터로..
HTML,CSS,JS 13일차 try~catch 예외처리 프로세스 예상되는 에러를 try{code...} 영역에 배치를 하고, 만약 에러가 발생하면catch(err){code...}영역에서 처리하는 예외처리 프로세스try영역 : 에러가 발생할 수 있는 코드를 실행 자바스크립트에서 에러가 발생하면 에러 발생 라인부터 동작이 멈춤. 에러가 발생해도 다음코드로 넘어감.catch(err){ } : 에러가 발생하면 예외처리를 하는 곳.try~catch로 예외처리를 하면 프로세스가 멈추지 않고, 지속시킬 수 있음.finally영역 : 예외처리와 상관없이 무조건 실행되어야 하는 코드를 넣는 영역throw : 예외를 고의적으로 발생시키는 키워드 throw + 예외발생 후 처리코드ex)  클래스, 생성자, 객체  클래스 생성 기본 문법- 클래스는..
HTML,CSS,JS 12일차 데이터 구조화 => 구조화된 텍스트 => JSON많은 양의 데이터가 실시간으로 전달되어야할 때 가장 효율적으로 데이터를 보내는 방법JSON(JavaScript Object Notation) JavaScript 객체를 구조화된 데이터로 표현하기 위한 문자기반 표준 포맷웹 서버 () 화면 간에 데이터를 전송할 때 일반적으로 사용되는 데이터 포맷자바스크립트의 객체 형식이기 때문에, 구조파악이 쉽고, 제작도 쉽다.특히 웹 분야는 자바 스크립트가 모든 프론트에 호환된다는 점을 활용 데이터 수집, 출력, 활용 거의 모든 플랫폼에서 JSON을 활용하고 있음. ex) 네이버 증시사이트에 들어가서 거래상위 종목 데이터 구조화 해보기 const top = { '거래상위':[ ..
HTML,CSS,JS 11일차 배열자바스크립트에서 배열은 유동배열 (크기, 데이터의 변경이 자유롭게 사용가능)const myArray = [1,2,'a','b',{}];배열에 데이터 타입은 제한이 없음. 같은 타입으로 채우는것 룰배열의 사용 목적 : 관련있는 데이터를 묶어서 관리하기 위해myArray=[] : 초기값으로 빈 배열을 만든 후 데이터를 추가하여 사용index를 가짐 => 0부터 시작length => 배열의 총길이여러가지 데이터를 갖고있는 유사배열 : 혼합배열 배열 관련 메서드 유사배열에서는 사용제한이 되는 메서드들도 있음.array.push(value) : 배열의 마지막에 value를 추가 => 배열의 길이를 리턴array.pop() : 배열의 마지막 요소를 제거 => 배열의 마지막요소를 리턴array.shift() : ..
HTML,CSS,JS 10일차 날짜 관련 함수new Date(); => 오늘 날짜 반환 new Date(string); => string 날짜 형식으로 변환getFullYear(); 연도만 리턴getMonth()+1; => 0월부터 11월까지 +1getDate(); => 1~31 리턴getDay(); => 요일을 리턴 0(일)~6(토)getHours(), getMinutes(), getSeconds() : 시분초 추출toLocaleDateString() : 2024. 08.07. toLocaleTimeString() toLocaleString() 활용)  이름 : 주민번호 : 확인  수학관련 함수Math 클래스 : 반올림, 올림, 버림, 최대값, 최소값, 난수발생...Math.round(), Math...
HTML,CSS,JS 9일차 form 태그를 통해 데이터 받아오기input, textarea, select, html element 속성input => value 속성에 값이 맵핑 되어있음. value 속성을 통해 값을 js로 가져올 수 있음.select=>option, radio, checkbox value 값을 추가해주어야만 선택 값을 가져올 수 있음.value / innerText 값은 모두 string 처리됨.string 처리된 value값을 숫자로 사용시 변환이 필요활용 )  성적확인 이름: 국어: 영어: 수학: 성적계산 ..

티스토리툴바