JavaScript

function get_members(){return 'egoing', 'k8805', 'sorialgi', 'noi'; } members = get_members(); //호출시 memebers0,membrs1 ... for(var i = 0; i &

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80}; for(key in grades){ document.write("key : "+key+" / value : "+gradeskey+""); }객체

특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어. 문자열의 검색(추출)과 치환을 위해 지원함.ex) 어떠한 정보 속에서 url 추출 등원하는 정보 추출String.exec()var pattern = /a/;console.log(pattern.exec

//예제1 - $사용var pattern = /(\\w+)\\s(\\w+)/; //모든문자 공백 모든문자var str = "coding everybody";var result = str.replace(pattern, "$2, $1");console.log(resu

method(메소드) : 객체의 속성 값으로 담겨진 함수 (객체로의 함수사용)var numbers = 20, 10, 9,8,7,6,5,4,3,2,1;function sortfunc(a,b){ console.log(a,b); if(a > b){ r

Closure : 내부함수가 외부함수의 맥락(context)에 접근하는 방식function outter(){ var title = 'coding everybody'; function inner(){ console.log(title); }

Arguments : 전달받은 인자(매개변수)를 함수 내부로 전달하기 위해 사용되는 변수. (함수가 호출될 때의 인자 개수를 의미)function sum(){ var i, \_sum = 0; for(i = 0; i < arguments.length; i

scope : 변수의 값이 어디부터 어디까지 유효한지 판단하는 범위let say = 'Hello';function greeting(){ let name = 'keynene'; return say + ' ' + name;}greeting(); → 'Hello ke

Apply : 특정함수가 특정객체의 속성인 것처럼 활용 가능o1 = {val1:1, val2:2, val3:3};o2 = {v1:10, v2:50, v3:100, v4:25};function sum(){ var \_sum = 0; for(var name in

객체 지향 프로그래밍 : 좀 더 나은 프로그램을 만들기 위한 프로그래밍 패러다임으로 로직을 상태(state), 행위(behave)로 이루어진 객체로 만든느 것.재활용성을 높여줌 (재활용 용이하도록 '부품화'하는 것이 관건)추상화 / 부품화 / 인터페이스OOP의 문법을

Global Object(전역객체) : window, global 등 global scope 내 항상 존재하는 객체window : 브라우저 환경 전역객체 === global : 자바스크립트 환경 전역객체 '브라우저 탭'에 존재하는 자바스크립트의 전역 최상위 객체 (wi

Inheritance(상속) : 객체는 연관된 로직들로 이루어진 작은 프로그램으로, 상속은 객체의 로직을 그대로 물려받는 또 다른 객체를 만들 수 있는 기능을 의미함기존의 로직을 수정/추가 및 변경하여 파생된 새로운 객체를 만듦(객체응용)original 코드 변경으로

내장객체, 즉 자바스크립트가 기본적으로 가지고 있는 객체객체의 가장 기본적인 형태를 가지고 있는 객체아무것도 상속받지 않는 순수한 객체데이터를 저장하는 그릇모든 객체가 사용할 수 있는 function을 가지고 있음Math.random() : 0~1사이 소수를 랜덤으로

웹페이지를 자바스크립트로 제어하기 위한 객체모델자바스크립트에서 html 엘리먼트 호출 가능Window : 창 / Document : 윈도우에 로드된 문서document.getElementsByTagName()document.getElementsByClassName()d

문서노드 > 요소노드 > 어트리뷰트노드 > 텍스트노트 순으로 구성된 중첩관계

li.css('text-decoration','underline')요소.속성('설정인자','설정값')li.css('text-decoration')요소.속성('반환할 인자')

※ 상기 html코드를 아래 예제들에 적용classList : 객체가 가지고 있는 클래스에서 " "(공백) 단위로 구분하여 유사배열로 저장active라는 id의 클래스들을 " "(공백) 단위로 출력하는 예제.textContent : 객체/배열에 저장되어있는 요소를 반환

※ 상기 html을 모든 예제에 적용부모노드에서만 자식노드 선택하여 삭제 가능 (객체 본인 스스로 삭제할 수 없음!)

※ 상기 html 코드를 모든 예제에 적용

※ 상기 html 코드를 모든에 예제 적용replaceAll : 지정한 코드로 엘리먼트에 해당하는 내용 변경replaceWith : 엘리먼트를 지정하여 원하는 코드로 변경※ 주체가 다름

텍스트를 추출하여 편집

※ 상기 html 코드를 모든 예제에 적용html 코드 내 onclick event요소에 값 전달하여 구현2줄 모두 같은 inline방식의 코드이나, id값을 부여하여 .getElementById 함수여부 차이onclick event시 js코드 내에서 함수 실행.add

※ 상기 html코드를 모든 예제에 적용event가 여러 태그에서 중복하여 발생 시 호출되는 시점에서 가장 안쪽부터 진행할 것인지, 가장 바깥쪽부터 진행할 것인지 순서 정의 필요addEventListener('event 요소', '함수', '캡처링 여부')캡처링 tru

자바스크립트의 내장 evnet의 진행을 중단할 경우 사용event 진행을 무시하고 코드 작성 가능※ 상기 html 코드를 모든 예제에 적용

※ 상기 html코드를 모든 예제에 적용submit : form 입력값을 서버로 전달입력값이 없을 경우 event.preventDefault()(기본이벤트 취소)함수로 종료change : form값으로 원하는 요소 밸류값 변경result 값을 가진 p태그의 텍스트를 t

일반적으로 html코드 이전에 script코드를 호출하는 경우가 많은데,상기 / 문서로딩에러 / 부분과 같이 html이 실행되기도 전에 상단에서 js코드로 id값이 target인 요소를 찾는 경우 값을 찾지 못하여 에러가 발생함(null)이러한 문제를 해결하기 위해 내

※ 상기 html 코드를 모든 예제에 적용일반적인 이벤트 사용 기법인 addEventListener를 사용하여 event 실행jQuery 내장함수 중 ".on"을 사용하여 이벤트 실행

※ 상기 html 코드를 모든 예제에 적용on의 2번째 속성 selector : 2번째 속성값에 해당 이벤트를 발생a, li 태그 클릭 시 이벤트 발생하는 예제 (ul부분 클릭하면 이벤트 발생하지 않음 / 필터링)a, li 생략할 경우 ul태그를 포함한 모든 부분 클릭

객체 속성의 초기모델/원형객체에서 어떠한 속성을 무한생성하지않고 여러 개의 객체에서 이용가능한 속성의 형태1선언 n사용으로, 자원낭비를 줄일 수 있음프로토타입을 사용하지 않을 경우 비효율 : 객체를 생성할 때마다 함수/메소드를 무한생성해야 하므로 메모리/자원낭비가 심함

Constructor 이전에 공부했었던 'new'를 통해 객체를 생성하는 생성자를 의미 constructor 사용 전 코드가 길어지고 "불필요하고 의미없는 수정작업이 반복"됨 constructor 사용 후 constructor를 사용함으로써 불필요한 반복작업이

es6에서의 상속(Inheritance)은 extends로 명시하여 나타냄기능은 es6 이전 버전의 기능과 같으나 좀 더 명시적이며 간결해짐※ 상속하면 상기 noi처럼 PersonPlus만 호출하더라도 Person의 기능을 사용할 수 있음 (ex. sum) 즉, 자식클

※ 상기 자바스크립트 코드를 모든 예제에 적용 Call >#### method.call(this에 대입될 값, method의 인자값) >원래 정의되어있는 sum이라는 함수에 this값과 인자값을 할당하여 실행 Bind >#### method.bind(새로 생성할

type이 file인 input태그 <input type="file" /> 또는 API 요청과 같은 File 또는 Blob 객체를 편리하게 처리할 수 있는 방법을 제공하는 객체abort, load, error와 같은 이벤트에서 발생한 프로세스를 처리하는데 주로 사

Axios와 Fetch는 문법도 비슷하고 하는 역할도 동일한데, 토이프로젝트에서 API를 연동하기에 앞서 둘의 차이를 명확히 구분하고 싶어 정리한다.클라이언트와 서버 간의 데이터를 주고받기 위해 비동기 HTTP 통신을 하기 위한 문법임사용법과 기능은 비슷하지만 각각의

JavaScript에서 점 세개 라는 재밌는 문법이 존재한다. 일상 생활에서 ""는 축약 또는 함축의 의미로 쓰인다. 예를들면 음... , etc... 등등....🤔 재미있는 사실은, 이 의 의미가 JavaScript라는 언어에서도 거의 비슷하게 쓰인다는 것이다.