본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

 (226)
string.prototype.concat() concat() concat() 메서드는 둘 이상의 문자열을 결합하여 새로운 문자열을 반환합니다. concat() concat() 메서드는 둘 이상의 문자열을 결합하여 새로운 문자열을 반환합니다. 특징 설명 유형(type) String 버전(version) ES1 결과값(return) 문자열(string) 사용성 ★★★☆☆ 문법(Syntax) "문자열".concat(문자열, 문자열,....) 'javascript'.concat('reference') //javascriptreference 'javascript'.concat(' ', 'reference') //javascript reference 'javascript'.concat(', ', 'reference') //javascript, referenc..
[JavaScript] .appendChild() [JavaScript] .appendChild() .appendChild()는 선택한 요소 마지막 위치에 새로운 요소를 추가합니다. .appendChild() 는 선택한 요소 마지막 위치에 새로운 요소를 추가합니다. 문법(Syntax) 요소.appendChild("요소") 정의(Definition) .appendChild()는 메소드는 선택한 요소 마지막 위치에 새로운 요소를 추가합니다. 참고(Reference) MDN
[Javascript] 프로토타입 함수 프로토타입 함수 프로토타입을 사용하여 생성된 객체를 공유할 수 있습니다. 프로토타입 함수 프로토타입을 사용하여 생성된 객체를 공유할 수 있습니다. function 함수명(매개변수1, 매개변수2,.........){ this.속성명 = 새 값; } 함수명.prototype.함수명 = function(){ 자바스크립트 코드; } let 참조 변수(인스턴스 네임) = new 함수명(); Sample1 객체를 생성하는 예제입니다. 결과 이름: 웹쓰, 키: 174, 몸무게: 90,살좀 빼세요~~. html
[Javascript] 객체 생성자 함수 객체 생성자 함수 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수를 사용하여 객체를 생성합니다. 객체 생성자 함수 자바스크립트 엔진에 내장되어 있는 객체 생성자 함수를 사용하여 객체를 생성합니다. function 함수명(매개변수1, 매개변수2,......){ this.속성명 = 새 값; this.함수명 = function(){ //자바스크립트 실행 코드 } } let 참조 변수(인스턴스 네임) = new 함수명(); //객체 생성 let 참조 변수 = {속성: 새 값, 함수명 : function(){........}} Sample1 객체를 생성하는 예제입니다. 결과 이름: 웹쓰, 키: 174, 몸무게: 90,살좀 빼세요~~. html
[Javascript] arguments 함수 arguments 함수 arguments 함수는 매개변수를 사용하는 것처럼 사용할 수 있습니다. arguments 함수 arguments 함수는 매개변수가 없는 상태에서 데이터를 전달하여 함수를 호출하면 그 값은 배열에 저장됩니다. 그 값을 arguments라는 변수로 참조합니다. function 함수명(){ arguments; } 함수명(데이터1, 데이터2, ......); //함수 호출 Sample1 함수를 사용하는 기본 예제입니다. 결과 600 600 600 html
[Javascript] clientX clientX 마우스의 X좌표값을 반환합니다. clientX clientX는 브라우저를 기준으로 마우스의 X좌표값을 반환합니다. 스크롤을 무시하고 현재 보이는 화면을 기준으로 좌표값을 반환합니다. MouseEvent.clientY 비교(Compare) clientX : 브라우저를 기준으로 마우스의 X좌표값을 반환합니다. clientY : 브라우저를 기준으로 마우스의 Y좌표값을 반환합니다. offsetX : 이벤트 요소를 기준으로 마우스의 X좌표값을 반환합니다. offsetY : 이벤트 요소를 기준으로 마우스의 Y좌표값을 반환합니다. pageX : 문서 전체를 기준으로 마우스의 X좌표값을 반환합니다. pageY : 문서 전체를 기준으로 마우스의 Y좌표값을 반환합니다. screenX : 모니터 화면을 기준으..
classList.contains() classList.contains() classList.contains() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.contains() classList.contains() 메서드는 선택한 요소한테 클래스가 있는지 확인하고 불린을 반환합니다. 특징 설명 버전(version) ES1 결과값(return) 블린(true or false) 사용성 ★★★★☆ 문법(Syntax) "선택자".classList.contains("클래스 이름") //클래스 이름 포함여부 확인 documemt.querySelector("div")..
classList.toggle() classList.toggle() classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.toggle() classList.toggle() 메서드는 선택한 요소한테 클래스를 추가/삭제합니다. 특징 설명 버전(version) ES1 결과값(return) 클래스 추가/삭제 사용성 ★★★★★ 문법(Syntax) "선택자".classList.toggle("클래스 이름") "선택자".classList.toggle("클래스 이름", "클래스 이름",....) //클래스 이름을 추가하는 경우 documemt.querySele..
classList.remove() classList.remove() classList.remove() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.remove() classList.remove() 메서드는 선택한 요소한테 클래스 이름을 삭제합니다. 특징 설명 버전(version) ES1 결과값(return) 클래스 삭제 사용성 ★★★★★ 문법(Syntax) "선택자".classList.remove("클래스 이름") "선택자".classList.remove("클래스 이름", "클래스 이름",....) //클래스 이름을 추가하는 경우 documemt.querySelecto..
classList.add() classList.add() classList.add() 메서드는 선택한 요소한테 클래스 이름을 추가합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.add() classList.add() 메서드는 선택한 요소한테 클래스 이름을 추가합니다. 특징 설명 버전(version) ES1 결과값(return) 클래스 추가 사용성 ★★★★★ 문법(Syntax) "선택자".classList.add("클래스 이름") "선택자".classList.add("클래스 이름", "클래스 이름",....) //클래스 이름을 추가하는 경우 documemt.querySelector("div").classList..
classList.replace() classList.replace() classList.replace() 메서드는 선택한 요소의 클래스 이름을 변경합니다. classList는 읽기 전용 속성이며, add(), remove(), toggle(), replace() 메서드를 추가하여 사용할 수 있습니다. classList.replace() classList.replace() 메서드는 선택한 요소의 클래스 이름을 변경합니다. 특징 설명 버전(version) ES1 결과값(return) 클래스 이름 사용성 ★★★☆☆ 문법(Syntax) "선택자".classList.replace("클래스 이름, 새로운 클래스 이름") //클래스 이름 변경하기 documemt.querySelector("div").classList.replace("className..
setAttribute() setAttribute() setAttribute() 메서드는 선택한 요소의 속성 값을 설정합니다. setAttribute() setAttribute() 메서드는 선택한 요소의 속성 값을 설정합니다. 특징 설명 버전(version) ES1 결과값(return) 속성 변경 및 추가 사용성 ★★★★☆ 문법(Syntax) "선택자".setAttribute("이름, 속성") //속성 값 변경하기 documemt.querySelector("div").setAttribute("class", "attribute"); 선택자(selector) : 속성 값을 설정할 선택자를 설정합니다. 이름(name) : 속성 이름을 설정합니다. 속성(value) : 속성 값을 설정합니다. 정의(Definition) setAttribu..
[Javascript] isInteger() isInteger() 주어진 값이 정수인지 판별합니다. isInteger() 주어진 값이 정수인지 판별합니다. window.open(URL, Name, Option, replace); 옵션 옵션 설명 입력 height 새로운 윈도우 창의 높이 값을 설정합니다. 픽셀 width 새로운 윈도우 창의 너비 값을 설정합니다. 픽셀 left 새로운 윈도우 창의 왼쪽에서부터 위치를 설정합니다. 픽셀 top 새로운 윈도우 창의 위쪽에서부터 위치를 설정합니다. 픽셀 location 주소 입력창의 유무를 설정합니다. yes | no | 1 | 0 menubar 메뉴의 유무를 설정합니다. yes | no | 1 | 0 resizable 화면 크기 조절 유무를 설정합니다. yes | no | 1 | 0 status 윈도우의..
[Javascript] open() open() 윈도우 새창을 열어줍니다. open() open()은 새로운 윈도우 새창을 열어줍니다. window.open(URL, Name, Option, replace); URL : 새로운 윈도우 창의 주소를 입력합니다. name : 새로운 윈도우 창의 속성 또는 이름을 설정합니다 _blank : 새로운 윈도우 창이 열립니다.(기본값) _parent : 부모 프레임에서 열립니다. _self : 현재 페이지를 대체합니다. _top : 로드된 프레임셋을 대체합니다. name : 임의적인 이름을 설정합니다. Option : 새로운 윈도의 여러가지 속성을 적용합니다. replace : 히스토리 목록에 새 항목을 만들지 현재 항목을 대체할지 지정합니다. 옵션 옵션 설명 입력 height 새로운 윈도우 창의 높이..
[Javascript] Object 객체 Object 객체 Object 객체는 자바스크립트의 최상위 객체입니다. Object 객체 생성 var object = {}; var object = new Object(); Object 객체의 메서드 종류 설명 constructor() 객체의 생성자 함수를 나타냅니다. hasOwnProperty() 객체에 name 속성이 있는지 확인합니다. isPrototypeof() 객체가 Object 프로토타입인지 검사합니다. propertyIsEnumerable() 반복문으로 열거 할 수 있는지 확인합니다. toLocaleString() 객체를 호스트 환경에 맞는 언어의 문자열로 변경합니다. toString() 객체를 문자열로 변경합니다. valueOf() 객체의 값을 나타냅니다. Sample1 객체에 속성이 있으..
[Javascript] setTimeout() setTimeout() setTimeout() 일정 시간 후 함수를 한 번만 실행합니다. setTimeout() setTimeout() 일정 시간 후 함수를 한 번만 실행합니다. setTimeout(함수, 시간); 비교(Compare) 일정한 시간마다 함수를 반복해서 사용한다면 setInterval()을 사용합니다. 일정한 시간 후에 함수를 한 번만 사용한다면 setTimeout()을 사용합니다. 일정한 시간마다 함수를 반복해서 사용하는 것을 중지할려면 clearInterval()을 사용합니다. 일정한 시간 후에 함수를 한 번만 사용하는 것을 중지할려면 clearTimeout()을 사용합니다. Sample1 일정한 시간마다 함수가 실행되는 예제입니다. 결과 함수가 실행되었습니다. html 호환성(Comp..
[Javascript] setInterval() setInterval() setInterval() 일정 시간마다 함수를 반복해서 실행합니다. setInterval() setInterval() 일정 시간마다 함수를 반복해서 실행합니다. setInterval(함수, 시간); 비교(Compare) 일정한 시간마다 함수를 반복해서 사용한다면 setInterval()을 사용합니다. 일정한 시간 후에 함수를 한 번만 사용한다면 setTimeout()을 사용합니다. 일정한 시간마다 함수를 반복해서 사용하는 것을 중지할려면 clearInterval()을 사용합니다. 일정한 시간 후에 함수를 한 번만 사용하는 것을 중지할려면 clearTimeout()을 사용합니다. Sample1 일정한 시간마다 함수가 실행되는 예제입니다. 결과 함수가 실행되었습니다. 함수가 실행되었..
[Javascript] 가변인자 함수 가변인자 함수 가변인자 함수는 매개 변수의 지정없이 사용하는 함수입니다. 가변인자 함수 가변인자 함수는 매개 변수의 지정없이 사용하는 함수입니다. arguments는 가상 공간에 변수 값을 지정하여 배열 형태로 사용합니다. function 함수 이름(){ //실행코드 //arguments.length //arguments[i] } Sample1 화살표 함수를 사용하는 기본 예제입니다. 결과 15 15 html
[Javascript] 클로저 클로저 클로저 Sample1 화살표 함수를 사용하는 기본 예제입니다. html + 0
[Javascript]  내부 함수 내부 함수 내부 함수는 함수 안에 함수를 선언하는 함수를 말합니다. 내부 함수 내부 함수는 함수 안에 함수를 선언하는 함수를 말합니다. function 외부 함수이름(){ //실행 코드 function 내부 함수이름(){ //실행 코드 } 내부 함수이름(); } 외부 함수이름(); Sample1 화살표 함수를 사용하는 기본 예제입니다. 결과 함수가 출력되었습니다. 함수가 출력되었습니다. html
[Javascript] 콜백 함수 콜백 함수 함수를 변수에 저장하고 변수를 함수의 인수로 사용하여 매개변수에 전달하는 함수입니다. 콜백 함수 콜백 함수는 매개변수로 전달하는 함수입니다. Sample1 화살표 함수를 사용하는 기본 예제입니다. 결과 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. html Sample2 콜백함수를 이용한 오름차순 내림차순 예제입니다. 결과 내림차순 : 200,100,90,70,50,30,10,0 오름차순 : 0,10,30,50,70,90,100,200 html
[Javascript] 화살표 함수 화살표 함수 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 좀 더 간단하게 함수를 사용할 수 있는 함수입니다. 화살표 함수 화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 좀 더 간단하게 함수를 사용할 수 있는 함수입니다. () => { //실행문 }; 화살표 함수 규칙 매개변수가 하나인 경우 괄호를 생략할 수 있습니다. 매개변수가 두개 이상인 경우 괄호를 생략할 수 없습니다. 코드블록을 지정하지 않고 한 문장으로 작성시 return 문은 생략할 수 있습니다. 코드블록을 지정했을 경우 return 문은 생략할 수 없습니다. Sample1 화살표 함수를 사용하는 기본 예제입니다. 결과 1. 기본함수: func..
[Javascript] 템플릿 리터럴 템플릿 리터럴 템플릿 리터럴은 백틱(backtick) 문자 `를 사용하여 새로운 문자열을 삽입할 수 있는 기능을 제공합니다. 템플릿 리터럴 템플릿 리터럴은 백틱(backtick) 문자 `를 사용하여 새로운 문자열을 삽입할 수 있는 기능을 제공합니다. 이를 문자열 인터폴레이션(String Interpolation)이라 합니다. `${ … }` Sample1 템플릿 리터럴을 사용하는 기본 예제입니다. 결과 1. 함수가 실행되었습니다. 2. 함수가 실행되었습니다. 3. 함수가 실행되었습니다. 4. 함수가 실행되었습니다. html Sample2 배열과 템플릿 리터럴을 사용하는 기본 예제입니다. 결과 HTML은 1단계 입니다. CSS은 2단계 입니다. 3단계은 3단계 입니다. 공부하는 단계는 총3단계 입니다. h..
[Javascript] 재귀 함수 재귀 함수 함수 정의문 내에 함수를 다시 호출하여 실행하는 함수입니다. 재귀 함수 재귀 함수는 자신을 다시 호출하는 함수를 말합니다. 재귀 함수 재귀함수는 함수 정의문 내에 함수를 다시 호출하여 실행하는 함수입니다. 함수를 반복문처럼 사용할 때 사용합니다. function 함수이름(){ //실행내용 함수이름(); } 함수이름(); //함수호출 Sample1 재귀 함수를 사용하는 기본 예제입니다. 결과 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행되었습니다. 함수가 실행이 종료되었습니다. html
[Javascript] 리턴 값이 있는 함수 리턴값이 있는 함수 결과 값이 있는 함수입니다. 리턴값이 있는 함수 결과 값이 있는 함수입니다. ruture이라는 키워드를 이용하여 함수의 결과값을 출력하는 방법입니다. 리턴값은 실행문을 강제로 종료하는 역할도 합니다. function 함수이름(){ //실행내용 return 리턴값; } var 변수 = 함수명(); //함수호출 Sample1 함수를 사용하는 기본 예제입니다. 결과 1. 함수가 실행되었습니다. html 종료역할 하는 리턴 값 function 함수이름(){ //실행내용 return 리턴값; //실행내용 } var 변수 = 함수명(); //함수호출 Sample2 함수를 사용하는 기본 예제입니다. 결과 2. 함수가 실행되었습니다. html Sample3 함수를 사용하는 기본 예제입니다. 결과 3..
[Javascript] 매개변수가 있는 함수 매개변수가 있는 함수 변수를 통해 함수의 값을 전달하는 함수입니다. 매개변수가 있는 함수 변수를 통해 함수의 값을 전달하는 함수입니다. function 함수이름(매개변수1, 매개변수2,.....){ //실행내용 } 함수이름(매개변수1, 매개변수2,.....); //실행함수 Sample1 매개변수가 있는 함수 기본 예제입니다. 결과 function이 실행되었습니다. 30 html Sample2 리턴문을 이용한 매개변수가 있는 함수 예제입니다. 결과 100 20 html
[Javascript] 익명 함수 익명 함수 익명 함수는 변수에 함수를 설정하는 방법입니다. 익명 함수 익명 함수는 함수에 이름이 없기 때문에 변수에 넣어서 사용하는 함수입니다. 변수에는 숫자, 문자도 들어 갈 수 있지만 함수도 들어 갈 수 있습니다. var 변수이름 = function(){ //실행 코드 } 변수이름();//함수 호출 Sample1 함수를 사용하는 기본 예제입니다. 결과 function가 실행되었습니다. html Sample2 백그라운 색을 변경하는 예제입니다. html 배경색 바꾸기
string.prototype.replaceAll() replaceAll() replaceAll() 메서드는 문자열에서 모든 특정 문자열을 교체하여 새로은 문자열을 반환합니다. replaceAll() replaceAll() 메서드는 문자열에서 모든 특정 문자열을 교체하여 새로은 문자열을 반환합니다. 특징 설명 유형(type) String 버전(version) ES1 결과값(return) 배열(array) 사용성 ★★☆☆☆ 문법(Syntax) "문자열".replaceAll(찾을 문자열) "문자열".replaceAll(찾을 문자열, 변경할 문자열) "문자열".replaceAll(정규식) "문자열".replaceAll(정규식, 변경할 문자열) "javascript reference".replace('javascript', '자바스크립트') //자바스크립트 ref..
[Javascript] 기본적인 함수 함수의 사용형태 함수는 사용 형태에 따라 익명 함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다. 함수의 사용형태 함수는 사용 형태에 따라 익명 함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다. 기본적인 함수 function 함수이름(){ //실행 코드 } 함수이름(); //함수 호출 Sample1 함수를 사용하는 기본 예제입니다. 결과 function가 실행되었습니다. html 익명 함수 익명 함수는 변수에 함수를 설정하는 방법입니다. var 변수이름 = function(){ //실행 코드 } 변수이름(); //함수 호출 Sample2 함수를 사용하는 기본 예제입니다. 결과 function가 실행되었습니다. html 매개변수가 있는 함수 funct..
[Javascript] 이벤트 이벤트 이벤트란 마우스를 오버하거나 키보드를 입력할 때 발생하는 모든 동작을 말합니다. 함수는 조건에 맞으면 실행하지만 이벤트는 이벤트 발생시 실행하는 실행문입니다. 이벤트 자바스크립트에는 다음과 같은 이벤트가 있습니다. 애니메이션 이벤트 클립보드 이벤트 드래그 이벤트 포커스 이벤트 URL 이벤트 인풋 이벤트 키보드 이벤트 마우스 이벤트 페이지 전환 이벤트 PopState 이벤트 Progress 이벤트 storage 이벤트 터치 이벤트 트랜지션 이벤트 UI 이벤트 휠 이벤트 이벤트에서 쓰는 용어 이벤트 리스너 : 이벤트 속성에 연결된 함수를 나타냅니다. 디폴트 이벤트 : 요소가 가지고 있는 기본적인 이벤트를 나타냅니다. 이벤트 모델 : 이벤트를 연결하는 방법을 나타냅니다. Mouse Event 종류 설명..
1 ··· 3 4 5 6 7 8
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바