코딩 공부 기록

자바스크립트1. Object.create(Object1)2. indexOf()가 -1을 반환하는 경우3. toFixed()4. mCustomScrollbar()5. jQuery를 사용하는 즉시 실행 함수 1. Object.create(Object1)새로운 객체를 생성하고 이 객체의 내부 [Prototype]을 매개변수로 받은 객체 Object1로 설정함-> Object.create(Object1)로 만드는 객체는 Object1 객체의 변수와 메서드에 접근할 수 있다. 2. indexOf()가 -1을 반환하는 경우indexOf()는 매개변수 안의 문자를 찾는 메서드인데, 찾고자 하는 문자가 없는 경우 -1을 반환한다.다음과 같이 사용하면 찾고자 하는 문자가 있는 경우와 없는 경우로 나누어 코드를 작성할 수..

*url 파라미터로 보낸 값의 키와 input 태그의 path 이름이 같으면 파라미터의 값이 input 태그 안에 출력된다. 여행 코스 구현을 위해 네이버 길찾기 API로 코스간 소요시간을 구하는 함수를 만들었다. 그런데 지도에 길을 표시하려면 자바스크립트를 사용해야 한다...자바를 쓰고 싶어서 티맵이 아니라 네이버 길찾기를 사용한 건데... 2시간동안 네이버 길찾기 만진 건 자바로 API 다루는 연습을 한 거라고 치자...속도가 느려서 연습해야 하기는 했다. JSONArray에서 JSONObject를 얻는 getJSONObject는 인덱스로만 사용할 수 있다. JSONObject에서 JSONObject를 얻는 getJSONObject는 키(객체 이름)로 사용할 수 있다. 티맵 API DB에 등록되어있는..

버튼을 클릭하면 display:none 되어있던 div가 나오는 코드를 만들었다. (div는 css에서 display: none 처리되어있음) 내 여행 코스에 넣기 코스 추가 그런데 버튼을 클릭했을 뿐인데 페이지가 이동하려고 하고 다음과 같은 오류가 출력되었다. org.springframework.dao.EmptyResultDataAccessException: Incorrect result size: expected 1, actual 0 콘솔 로그를 확인해보니 같은 페이지에 있는 리뷰 작성 폼이 제출되었고, 필요한 데이터가 모자라서 오류가 발생한 것이었다. 이러한 경우, preventEvent()를 사용해서 기본 동작을 막아야 한다. 스크립트를 다음과 같이 수정해서 해결했다. 함수의 첫줄에 코드 한 줄을..

자바스크립트 navigator 객체: 브라우저 버전이나 브라우저명 등 브라우저 정보에 관한 객체 navigator 객체 프로퍼티 appCoeName: 브라우저의 코드명 반환 appName: 브라우저명 반환 appVersion: 브라우저 버전 반환 platform: 플랫폼명 반환 userAgent: 브라우저의 코드명과 저번 반환 let browser = navigator.userAgent; alert(browser); let browserName = ''; if(browser.match(/Trident/)){ browserName = '인터넷 익스플로러'; }else if(browser.match(/Chrome/)){ browserName = '크롬'; }else if(browser.match(/Firef..

자바스크립트 history 객체: 페이지가 이동한 정보를 관리하는 객체 history 메서드 1) back(): 이전 페이지로 이동 back 2)forward(): 이후 페이지로 이동 forward 3)go(n): n이 양수이면 이후 페이지, 음수이면 이전 페이지로 이동 go

자바스크립트 screen 객체: 모니터 화면정보 관련 객체 screen 프로퍼티 width: 화면 너비 반환 height: 화면 높이 반환 availWidth: 화면에서 작업표시줄 제외 너비 반환 availHeight: 화면에서 작업표시줄 제외 높이 반환 colorDepth: 화면에서 사용 가능한 색상수 반환 pixelDepth: 화면의 색상 해상도 반환

location 객체: 웹브라우저의 주소 URL 관련 객체 프로퍼티: http://itedunet.com:8080/search?book=5#coding location 객체 프로퍼티 hash(#coding): 주소의 앵커명 반환 host(http://itedunet.com:8080): 주소의 호스트명과 포트 번호 반환 port(8080): 주소의 포트 번호 반환 ★pathname(/search): 주소의 패스명 반환 href(전체주소): 주소 값 반환 protocol(http:): 주소의 프로토콜명 반환 search(?book=5): 주소의 쿼리 문자열 반환 location 객체 메서드 1)reload(): 현재 페이지 다시 로드 reload 2)replace(url): url 값으로 이동 replace

BOM: Browser Object Model 자바스크립트의 BOM은 window 객체에 location 객체, screen 객체, history 객체, navigator 객체, document 객체가 속해있는 형식으로 구성되어있다. 이 포스트에서는 window객체에 대해 작성한다. 1. 윈도우 객체 생성 메서드 open(): 새로운 윈도우를 만드는 메서드 window.open('문서 주소', '윈도우 이름', '옵션=값, 옵션=값'); open() 메서드의 옵션 width = 픽셀값: 윈도우의 가로 너비 설정 height = 픽셀값: 윈도우의 세로 너비 설정 left = 픽셀값: 윈도우의 left 위치 설정 top = 픽셀값: 윈도우의 top 위치 설정 location = yes/no: 윈도우의 주소창..

1. 자바스크립트의 이벤트 연결 2. 이벤트 종류 3. 이벤트 객체 프로퍼티 4. 이벤트 객체의 메서드 1. 자바스크립트 이벤트 연결 자바스크립트에서 이벤트를 연결하는 방식에는 아래의 3가지가 있다. 1) 인라인 이벤트 연결: html 요소에 직접 이벤트 연결 2) 기본 이벤트 연결: html 요소를 취득 후 이벤트를 '객체의 메서드' 형식으로 연결 3) 표준 이벤트 연결: 객체.addEventListener('이벤트', 함수) 방식으로 연결 1) 인라인 이벤트 연결: html에서 연결 클릭 2) 기본 이벤트 연결: JS에서 연결 클릭 3) 표준 이벤트 연결: JS에서 연결 클릭 2. 자바스크립트 이벤트 종류 1)마우스 이벤트 click: 마우스를 클릭했을 때 이벤트 발생 dbclick: 마우스를 더블클..

자바스크립트의 Array 객체는 배열을 다루는 객체이다. 1. 객체 생성 let subject = new Array(10,20,'javascript'); //또는 let subject2 = [10,20,'javascript']; 2. Array 객체 내장 프로퍼티 length: 문자열의 개수 3. Array 객체 메서드 1)slice(n,m): 인덱스 n번부터 m-1번까지 배열 반환 slice(n): 인덱스 n번부터 끝까지 반환 let alphabet = ['a','b','c','d','e']; console.log(alphabet.slice(1,3)); //['b','c'] 출력 2)join(): 파라미터로 넣은 문자를 배열 요소에 삽입해서 반환 let alphabet = ['a','b','c','d'..