JS 용어정리
자바스크립트 관련 용어 정리
1. 문자열 관련 함수
String.prototype.length: 문자열의 길이를 반환합니다.
const str = "Hello";
console.log(str.length); // 5
String.prototype.toUpperCase(): 문자열을 대문자로 변환합니다.
console.log(str.toUpperCase()); // "HELLO"
String.prototype.toLowerCase(): 문자열을 소문자로 변환합니다.
console.log(str.toLowerCase()); // "hello"
String.prototype.includes(): 특정 문자열이 포함되어 있는지 확인합니다.
console.log(str.includes("lo")); // true
String.prototype.split(): 문자열을 특정 구분자로 나누어 배열로 반환합니다.
const words = "Hello World".split(" ");
console.log(words); // ["Hello", "World"]
2. 배열 관련 메서드
Array.prototype.push(): 배열의 끝에 요소를 추가합니다.
const arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
Array.prototype.pop(): 배열의 마지막 요소를 제거하고 반환합니다.
const lastElement = arr.pop();
console.log(lastElement); // 4
Array.prototype.shift(): 배열의 첫 번째 요소를 제거하고 반환합니다.
const firstElement = arr.shift();
console.log(firstElement); // 1
Array.prototype.map(): 배열의 각 요소에 대해 함수를 호출하여 새로운 배열을 반환합니다.
const doubled = arr.map(num => num * 2);
console.log(doubled); // [4, 6]
Array.prototype.filter(): 조건에 맞는 요소로만 구성된 새로운 배열을 반환합니다.
const evenNumbers = arr.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2]
3. 객체 관련 메서드
Object.keys(): 객체의 키를 배열로 반환합니다.
const obj = { name: "Alice", age: 25 };
console.log(Object.keys(obj)); // ["name", "age"]
Object.values(): 객체의 값을 배열로 반환합니다.
console.log(Object.values(obj)); // ["Alice", 25]
Object.entries(): 객체의 키-값 쌍을 배열로 반환합니다.
console.log(Object.entries(obj)); // [["name", "Alice"], ["age", 25]]
4. 수학 관련 함수
Math.random(): 0 이상 1 미만의 난수를 반환합니다.
console.log(Math.random()); // 예: 0.123456
Math.floor(): 주어진 숫자 이하의 가장 큰 정수를 반환합니다.
console.log(Math.floor(3.7)); // 3
Math.ceil(): 주어진 숫자 이상의 가장 작은 정수를 반환합니다.
console.log(Math.ceil(3.1)); // 4
Math.max(): 주어진 숫자 중 가장 큰 값을 반환합니다.
console.log(Math.max(1, 2, 3)); // 3
Math.min(): 주어진 숫자 중 가장 작은 값을 반환합니다.
console.log(Math.min(1, 2, 3)); // 1
5. DOM 관련 메서드
document.getElementById(): ID로 요소를 선택합니다.
const element = document.getElementById('myId');
document.querySelector(): CSS 선택자로 요소를 선택합니다.
const element = document.querySelector('.myClass');
Element.innerHTML: 요소의 HTML 내용을 가져오거나 설정합니다.
element.innerHTML = "<p>안녕하세요!</p>";
Element.style: 요소의 스타일을 설정합니다.
element.style.color = "red";
Element.addEventListener(): 이벤트 리스너를 추가합니다.
element.addEventListener('click', () => { alert('클릭되었습니다!'); });
JAVA SCRIPT 용어정리
<script type=“text/javascript”> 자바스크립트 내용 </script>
-inline 방식 : 자바스크립트 한 두 줄 정도 소량일때 사용(태그에 이벤트 핸들러 속성을 이용하여 직접 실행 코드 작성)
<태그 명 on이벤트 = “함수명();”>
-internal 방식 : html파일 내<head>나 <body>안에 자바스크립트 소스 작성
<script>실행할 소스코드 작성</script>
-external 방식 : 자바스크립트 양이 많을 경우 자바스크립트 코드 부분을 외부 파일로 작성
<script src=“경로”> 태그를이용해 내용 삽입 후 사용
☆데이터 입출력
○출력
document.write(내용); 브라우저 화면 상의 페이지에 값 출력
window.alert(내용); 내용을 메시지 창에 출력 (window객체는 모두 적용생략 가능)
innerHTML= 내용; 태그 엘리먼트의 내용을 변경하여 출력
console.log(내용); 개발자 도구 화면의 콘솔에 출력
●입력
var변수 = [window.]confirm(“질문내용”); "예/아니오"의 결과를 얻을 때
var변수 = [window.]prompt(“메시지”); 확인/취소번튼이 있는 대화 창(return 입력내용)
☆HTML 태그 접근
○메소드
getElementById(“아이디명“) 태그의 id 속성 값을 이용, 태그 엘리먼트 객체의 정보를 가져 옴
getElementsByName(“이름“) 태그의 name속성 값을 이용, 태그 엘리먼트의 객체 정보를 배열에 담아 가져 옴
같은 이름의 태그가 여러 개 존재할 수 있기 때문 기본적으로 배열로 리턴
getElementsByTagName(“태그명”) 태그명을 이용 해당 태그들의 객체 정보를 배열에 담아 가져옴
var변수 = document.getElementById(“아이디명”);
HTML태그의 id속성 값은 페이지에서 유일한 식별자 역할을하도록 권장 (*return : 단일 값(id는 중복 허용 안 함))
var변수 = document.getElelemtsByName(“이름”); ( * 변수는 배열이 됨)
HTML태그의 name속성 값으로 객체 정보를 가져올 때 사용
var변수 = document.getElementsByTagName(“태그 명“); * 변수는 배열이 됨)
HTML태그의 태그 명을 이용해 태그들을 한꺼번에 가져와 순서대로 반환 (*return : 배열(태그 중복 가능))
☆기본문법
변수명 = 값; window.변수명, this.변수명 (선언 시 변수 명에 var를 붙이지 않으면 전역변수)
var변수명 = 값; 변수 선언 시 변수명 앞에 var를 붙이면 지역변수
typeof(“문자열값”) 또는 typeof(‘문자열값‘) →string
typeof(숫자) →number
typeof(참/거짓) →Boolean
typeof(객체) →object
typeof(초기값이 없는 변수) →undefined
typeof(function) →function
문자열(String)
toUpperCase() 모든 문자 대문자로 변환
toLowerCase() 모든 문자 소문자로 변환
length 글자 개수 조회용 멤버변수
indexOf() 찾는 문자이 순번(위치) 리턴
lastIndexOf() 뒤에서부터 찾는 문자의 순번 리턴
charAt() 찾는 위치의 문자 리턴
substring() 값을 일부분만 리턴
split() 토큰 문자로 분리한 문자열 배열 리턴
숫자number
Math.abs() 절대값 리턴
Math.random() 임의의 난수발생리턴(소수점)
Math.round() 반올림처리 후 리턴
Math.floor() 부동소수점 숫자를 정수로 리턴(소수점 자리버림)
Math.ceil() 소수점 자리에서 무조건 올림
기타자료형
-논리값(Boolean) true, false
-객체(Object) new로 선언된 사용자 객체와 자바스크립트 내장 객체
-undefined 변수 명이나 함수 명으로 선언되지 않은 식별자일 때 지정
-함수(function) 함수(메소드)를 가지는 자료형
* 연산자 우선순위: 최우선 > 단항 > 산술 > 관계 > 논리 > 삼항 > 대입
☆ 배열
var변수 명 = [값1(숫자), 값2(문자), 값3(객체), 함수 ….]; 다양한 타입의 데이터를 보관하는 변수 모음
var변수 명 = new Array(); 크기를 정하지 않은 배열 선언
var변수 명 = new Array(개수); 크기를 정한 배열 선언
var배열변수 = new Array(값1, 값2, 값3, …, 값n); :new연산자를 활용한 초기화
var배열변수 = [값1, 값2, 값3, …, 값n] [ ]를활용한 초기화
배열에 값 대입 : 배열[첨자] = 값;
변수에 배열 값 대입 : 변수 = 배열[첨자];
배열명.indexOf(“값”) 배열에서 요소가 위치한 인덱스 리턴
배열명.concat(배열명) 두 개 또는 세 개의 배열을 결합
배열명.join() 배열을 결합하고 문자열로 반환
배열명.reverse() 배열의 순서를 뒤집음
배열명.sort() 배열을 내림차순/오름차순 정렬
내림차순방법 : arr.sort( function (a, b){ return b-a; });
문자열 오름정렬(사전등록순서) : console.log(names.sort()); //오름차순정렬
문자열 내림차순
names.sort(function(a,b){
if(a > b) return -1; //음수값이 반환되면 자리교환
else if (a < b) return 1;
else return 0;
});
배열명.push(‘값’) 배열의 맨 뒤에 요소 추가
배열명.pop() 배열의 맨 뒤에 요소 제거
배열명.shift() 배열에서 첫 번째 요소 제거
배열명.slice(숫자,숫자) 배열의 요소 선택 잘라내기
요소 전체 제거 : arr.splice(0);
배열명.splice([index],제거 수, 추가 값) 배열의 index 위치의 요소 제거, 추가
배열명.toString() 배열을 문자열로 반환
배열명.unshift(‘값’) 배열의 앞에새로운 요소 추가
배열변수.sort(function(left, right)
{ return left-right; // 오름차순; 또는 return right-left; // 내림차순}
☆함수
소스코드의 집합 메소드,모듈,기능,프로시저 등
함수선언 : function 키워드 사용
- 선언적 함수 : function키워드에 함수 명을 작성하여 사용하는 방법
- 익명 함수 : function에 함수 명 작성하지 않고 변수에 대입하는 방법
- 호출 없이 바로 사용하는 스스로 동작하는 함수가 있음
function 함수명([매개변수]) { 처리 로직; [return 되돌려줄 값;] } : 선언적 함수
var f1 = function ([매개변수]){ 처리 로직; [return 되돌려줄 값;] } : 함수 선언
var f1 = function ([매개변수]){
( function( ) { 처리 로직 } ) ( ); 호출 없이 바로 실행
- 함수는 선언(정의)이 되어야 실행
- 함수 실행 : 원하는 기능에 대한 함수를 호출하는 것
return 값X -> 함수 명(); ,함수 명(인자 값1, 인자 값2, …);
return 값O -> var 변수명 = 함수명();, var 변수명 = 함수명(인자 값1, 인자 값2, …);
return [되돌려 줄 값] : 함수를 호출한 위치로
return 값(되돌려 줄 값) 미지정 시 undefined자료형으로 반환 됨
가변인자함수 : 매개변수의 개수가 변하는 함수, arguments배열에 자동 생성-> 저장
function 함수명(매개변수 명){ 매개변수 명(); // 호출 } : 자료형으로 매개변수 전달
내장 함수(동등비교연산자기호 사용불가)
eval(String) String을자바스크립트 코드로 실행
isFinite(number) number가 무한한 값인지 확인
isNaN(number) number가 NaN인지 확인
Hoistring : 함수선언식, ba변수 생성한 경우 적용 (최상위로 이동)
☆객체
- 키 값을 사용하여 속성(멤버변수)식별
- {객체} 생성 -> [ ], ' . ' 요소 값에 접근방법
- this : 객체 내에서 자신의 속성을 호출
- for in : 객체의 모든속성 출력(for, while 사용불가)
선언방법 var변수 명(객체 명) = { 속성(키 값) : 값,속성(키 값) : 값,속성(키 값) : 값 };
속성값 접근 변수 명(객체 명)[‘요소 명(키 값)’]; , 변수 명(객체 명).요소 명(키 값);
in : 객체내부에 해당 속성 확인
속성 명 in 변수 명(객체 명) // 있으면 true, 없으면 false
with : 코드를 줄여주는 키워드
with(변수 명(객체 명)){ 속성 명; }
※ 속성 및 메소드를 동적으로 추가/삭제 가능
- 추가
변수 명(객체 명).속성 명 = ‘값’;
변수 명(객체 명).속성 명 = “값“;
변수 명(객체 명).속성 명 = function(){ 메소드 로직; [return [리턴 값];] };
- 삭제 : delete(변수 명(객체 명).속성 명);
var변수 명 = [ ]; // 배열 생성
데이터 대입: 변수명.push({속성명: “값“, 속성명: “값”, …});
function 함수명(value1, value2, value3, …){
var변수 명(객체 명) = {
속성 명: ‘value1’;
속성 명: “value2”;
…
}
return 변수 명(객체 명);
}
생성자 함수 : new(키워드)로 객체생성, 생성자명의 첫글자 대문자, instanceof 생성자 확인가능
function 생성자명(value1, value2, value3, …){
this.속성 명 = ‘value1’,
this.속성 명 = ‘value2’,
…
}
함수활용 : 중복되는 메서드를 객체 별로 저장
생성자 : prototype 내부 객제 별로 저장 (중복저장x)
prototype 메소드생성 : 변수 명(객체 명).prototype.메소드 명 = function(){};
캡슐화
: 속성 선언시 this사용x -> 지역변수선언
: this 사용 setter/getter 메서드 작성
function 생성자 명(value1, value2, value3, …){
var속성 명 = ‘value1’;
var속성 명 = ‘value2’;
this.set속성 명 = function(){};
this.get속성 명 = function(){};
}
☆ 내장 객체
Object 객체 : 모든 기본 내장 객체가 상속받고있다
var object = {}; , var object = new Object();
Object 메소드
constructor() 객체의 생성자함수
hasOwnProperty(name) 객체가 name(인자)속성을 가지는지 확인
isPrototypeof(object) 객체가 프로토타입 검사
propertyisEnumerable(name) 반복문을 사용해 열거할 수 있는지 확인
toLocaleString() 객체를 호스트환경에 맞는 언어의 문자열로 변경
toString() 객체를 문자열로 변경
valueOf() 객체의 값
Number 객체 : varnum= 숫자; , varnum= new Number(숫자);
toExponential() 숫자를 지수 표시(문자열)
toFixed() 숫자를 고정 소수점 표시(문자열)
toPrecision() 숫자를 길이에 따라 지수표시 또는 고정 소수점 표시(문자열)
Number 속성
MAX_VALUE 자바스크립트가 나타낼 수 있는 최대숫자
MIN_VALUE 자바스크립트가 나타낼 수 있는 최소 숫자
NaN 자바스크립트의 숫자로 나타낼 수 없는 숫자
NEGATIVE_INFINITY 음의 무한대 숫자
POSITIVE_INFINITY 양의 무한대 숫자
String객체 HTML관련 메소드
anchor() <a>태그로 감싸서 리턴
big() <big>태그로 감싸서 리턴
blink() <blink>태그로 감싸서 리턴
bold() <b>태그로 감싸서 리턴
fontcolor(색상) <font>태그로 감싸고 color속성 주고 리턴
fontsize(크기) <font>태그로 감싸고 size속성 주고 리턴
italics() <i>태그로 감싸서 리턴
link(연결위치) <a>태그로 감싸서 href속성 주고 리턴
small() <small>태그로 감싸서 리턴
strike() <strike>태그로 감싸서 리턴
sub() <sub>태그로 감싸서 리턴
sup() <sup>태그로 감싸서 리턴
Date : 날짜를 관리 객체
vardate = new Date(); // 현재 날짜 시간
vardate = new Date(‘월 일‘);
vardate = new Date(‘월일, 년도‘);
vardate = new Date(‘월 일, 년도 시간(시:분:초)’);
get/setFullYear( ) 년도 반환 / 년도 저장
get/setMonth( ) 월 (0:1월 ~ 11:12월)
get/setDate( ) 일(1일 ~ 31일)
get/setDay( ) 요일(0:일요일 ~ 6:토요일)
get/setHours( ) 시간(0~23시)
get/setMinutes( ) 분(0~59분)
get/setSeconds( ) 초
get/setMilliseconds( ) 밀리세컨초(0~999)
getTimezoneOffset( ) 표준시와 현재지역 차이
get/setTime( ) 1970-01-01자정 기준으로 밀리세컨드
☆API형변환
string 내장객체 : 문자열과 관련된 메소드를 제공.
Number : 변환 불가능 문자가 포함되어 있으면 NaN을 리턴.
parseInt : 변환 불가능 문자가 포함 변환 가능한 위치까지 변환
parseDouble : 변환불가능한 문자가 포함 변환 가능한 위치까지 변환
논리형으로 형변환 변수, 리터럴(값)이 boolean 형으로 형변환이 가능.
( Boolean(값), if(값), 삼항연산자... )
값이 존재하는 것들은 true로 치환 : 123, -123, 3,14, "하이", 'ㅋ', 객체(new Date), []..
값이 존재하지 않는 것들은 false로 치환 : 0, -0, 0.0, "",'', null, unedfiend, NaN
엄격비교연산자 : 타입도 비교대상에 포함
=== 값과 타입이 모두 일치해야 true , !== 값과 타입이 다르면 true
짧은 조건문
a조건식 && b실행문 : a가 참일경우 b실행
a || b : a가 거짓일경우 b실행
num%2 == 0 && alert("짝수");
num%2 == 0 || alert("홀수");
삼항연산자 : num % 2 == 0 ? alert("짝수") : alert("홀수");
☆BOM(Browser Object Model)
window 객체 : window.open(‘주소’, ‘이름 또는 open방식’, ‘형태‘);
->브라우저 창에 대한 설정 JS 최상위 객체
window 객체 메소드
moveBy(x,y) 윈도우 위치조정(상대)
moveTo(x,y) 윈도우 위치조정(절대)
resizeBy(x,y) 윈도우 크기조정(상대)
resizeTo(x,y) 윈도우 크기조정(절대)
scrollBy(x,y) 스크롤 위치이동(상대)
scrollTo(x,y) 스크롤 위치이동(절대)
focus( ) 윈도우에 초점 맞춤
blur( ) 윈도우에 초점 제거
close( ) 윈도우 닫기
setTimeout(함수, 시간(ms)) 일정시간 후 함수를 한번 실행 / id값 리턴
setInterval(함수, 시간(ms)) 일정시간마다 함수를 반복 실행 / id값 리턴
clearTimeout(id) setTimeout( ) 함수 실행 종료
clearInterval(id) setInterval( ) 함수 종료
window.onload= function(){로직 구성}; 또는 작성된 함수 호출;
: 로드 완료시 자동으로 onload설정 함수를 실행
screen 객체 : client 운영체제 화면에 대한 속성 값
location 객체 : 브라우저 URL관련 객체(프로토콜종류, 호스트이름, 문서위치 등의 정보)
hash 앵커 이름(#~)
host 호스트 이름과 포트번호
hostname호스트 이름
href 문서 URL주소
origin 호스트이름, 프로토콜, 포트번호
pathname디렉토리 경로
port 포트번호
protocol 프로토콜의 종류
search 요청 매개변수(?~~)
메소드
assign(‘주소’) 새로운 페이지 로드( 뒤로 가기 가능)
reload( ) 현재 문서를 다시 로드
replace(‘주소’) 현재페이지를 새 페이지로 교체( 뒤로 가기 불가 )
navigator 객체
appCodeName 브라우저 코드명
appName 브라우저 이름
appVersion 브라우저 버전
platform 사용중인 운영체제
useAgent 브라우저 전체정보
cookieEnabled 쿠키가능성을 확인(true/false)
geolocation 위도와 경도를 출력
language 브라우저 언어
online 브라우저가 온라인/오프라인 환경인지 확인(true/false)
product 브라우저 엔진이름
☆DOM(Document Object Model)
HTML 태그를 객체화 JS에서 다루는 방식 모든 노드 객체 접근(요소, 메서드)
노드(node) : HTML 태그를 구조화(트리) 각각의 태그
- 요소노드(Elements Node) : 태그 그 자체
- 텍스트 노드(Text Node) : 태그에 기록되어 있는 문자
(* 텍스트 노드를 가지는 태그(h?, p 등)와 가지지 않는 태그(img 등)가 있음)
○텍스트 노드 있는 문서 객체 작성
요소노드 생성 →텍스트 노드 생성
→요소 노드에 텍스트 노드 추가
→body객체에 요소 노드 추가
document.createElement(태그명) 요소노드 생성
document.createTextNode(내용) 텍스트노드 생성
객체명.appendChild(node) 태그에 자손으로 노드를 추가
○텍스트 노드 없는 문서 객체 작성
요소노드 생성 →생성된 노드 속성 설정→body객체에 요소 노드 추가
객체명(변수).속성=속성값 태그 속성값 설정
객체명.setAttribute(속성명, 속성값) 태그에 속성값 설정
객체명.getAttribute(속성명) 태그 속성확인
객체명.appendChild(node) 태그에 자손으로 노드를 추가
객체 명.style.속성 명 = 속성 값; :문서 스타일 변경
document.removeChild(객체명) body태그 자손 태그 제거
객체명.parentNode.removeChild(객체명) 제거 객체 기준 상위객체의 해당객체 삭제
☆이벤트
- 고전 이벤트 모델
varh = document.getElementById(‘id명‘);
h.onclick= function{
수행 기능 설정;
h(this).onclick= null; // 한 번만 실행
};
-인라인 이벤트 모델
<h1 onclick=‘처리로직’></h1> 또는 <h1 onclick=‘스크립트 내 함수 호출‘></h1>
-표준 이벤트 모델
var h = document.getElementById(‘id명’);
h.addEventListener(‘click’, function( ) {수행 기능 설정 ; });
addEventListener(이벤트이름, 핸들러, 확장) 확장 : 버블링/캡쳐링
removeEventListener(이벤트이름,핸들러) 이벤트 삭제
-마이크로소프트 인터넷 익스플로러 이벤트 모델
varh = document.getElementById(‘id명’);
h.attachEvent( ‘onclick’, function( ){ 수행기능 설정; });
attachEvent(이벤트이름, 핸들러) 익스플로러에만 존재하는 메소드
detachEvent(이벤트이름,핸들러) 이벤트 삭제
기본 이벤트 : 태그 중 이벤트 핸들러를 기본적으로 가지고 있는 것
유효성 검사 : 사용자가 입력한 데이터가 양식에 맞는지 검사 ex. 비밀번호 확인
return false; : 기본 이벤트 제거 onsubmit이벤트 속성에 이벤트 핸들러 연결할 때
이벤트 전달
-버블링 방식 : 자식노드에서 부모노드로 올라가면서 이벤트 실행
-캡쳐링 방식 : 부모노드에서 자식노드로 내려가면서 이벤트 실행
(* 익스플로러는 지원하지 않음)
이벤트객체.stopPropagation() 익스플로러 제외한 브라우저
window.event.cancelBubble=true; 익스플로
☆정규 표현식(Regular Expression)
