코딩 공부 기록

자바스크립트 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'..

자바스크립트의 String 객체는 문자열을 다루기 위한 메서드를 제공하는 객체이다. 1. 객체 생성 var str = new String('개구리'); //혹은 var str = '개구리'; 2. String 객체 내장 프로퍼티 length: 문자열의 개수를 반환함 3. String 객체 메서드 1) charAt(n): 인덱스번호 n번인 문자 반환 var str = 'javascript'; console.log(str.charAt(3)); //a 출력 2)indexOf( ): 왼쪽부터 특정 문자를 검색해서 인덱스 번호 반환 var str = 'javascript'; console.log(str.indexOf('a')); //1 출력 //없으면 -1 출력 3)lastIndexOf( ) : 오른쪽부터 특정 ..

자바스크립트의 Number 객체는 숫자값을 나타내는 객체이다. 1. 객체 생성 var num = new Number(10); //혹은 var num = 10; 2. Number 객체의 메서드 1) toFixed(): toFixed(n)일 경우 n값만큼 소수점 자리수를 만들어준다. num = 88645.568745; console.log(num.toFixed(4)); 2) toString(): toString(n)일 경우 n진수로 만든다. num = 10; console.log(num.toString(16));

자바스크립트 객체의 데이터는 이름:값의 쌍으로 이루어져 있으며 이것을 속성이라고 한다. Java의 Map 또한 key와 value의 쌍으로 이루어져 있는 점이 유사하다. 자바스크립트 객체의 예시 var circle = { color : 'yellow', diameter : 100, radius : function(){ return this.diameter/2; } 객체에는 변수와 함수를 정의할 수 있다. Java와 다른 점은 변수를 선언하듯이 var를 사용한다는 것이다. 변수와 함수를 선언하는 형태도 조금씩 다르다. 객체정보에는 for...in을 사용해서 접근한다. var info = { subject : 'javascript', credit : 3, days : 20, tuition : 10000 };..

자바스크립트에는 자주 사용되는 기능을 제공해주는 기본 함수가 있다. 이것을 '내장 함수'라고 한다. 이 포스트에서는 다음의 6가지 내장 함수를 소개한다. 인코딩/디코딩 함수 숫자 판별 함수 유무한 판별 함수 숫자 변환 함수 문자 변환 함수 자바스크립트 코드 변경 함수 1. 인코딩/디코딩 함수 encodeURIComponent(): 영문, 숫자와 ()-_.~*!'를 제외한 유니코드 문자 인코딩 decodeURIComponent(): 원상태로 디코딩 인코딩은 글자가 깨지는 것을 방지하기 위해 포장하는 과정이라고 생각하면 된다. 영어를 사용한다면 문제 없지만, 한글과 같은 유니코드 문자를 사용할 때는 인코딩이 필요할 수 있다. 2. 숫자, 유/무한 값 판별 함수 isNaN(): 숫자인지 아닌지 판별. 숫자가 ..