개발 잘하기

문자열과 배열 데이터의 경우 '+' 연산자를 활용해 데이터를 합칠 수 있음. 그 외 '*'와 같은 산술 연산자는 적용되지 않음. 다만 숫자일 경우 형 변환되어 산술된다. 파이썬은 '*' 연산자를 통해 문자열과 배열 데이터 반복이 가능하다. console.log('20'+'10'); //'2010' (string) console.log('20'-'10'); // 10 (number) console.log('20'*'10'); // 200 (number) console.log('20'/'10'); // 2 (number) console.log('20'%'10'); // 0 (number)

1)arr.concat() 함수 인자로 받은 배열 데이터와 객체 배열 데이터를 합쳐서 새로운 배열 데이터를 반환함. const arr = [1, 2, 3]; const newArr = arr.concat('a', ['b', 'c'], 'abc'); document.writeln(newArr); // [1, 2, 3, 'a', 'b','c', 'abc'] document.writeln(newArr.length); // 7 2)arr1.push(...arr2) spread operator를 사용하면 push() 함수를 이용해서도 여러 개의 배열을 하나로 합칠 수 있습니다. (1)arr1.push() push() 함수는 배열 데이터의 마지막 item으로 추가하는 것으로, 파라미터로 전달된 배열은 연결이 되지 ..

1)배열 생성하기 예전 방식인 new 명령을 사용하는 방법과 리터럴 표기법(literal notation) 을 사용하여 생성하는 방식이 있음. //길이가 0인 예전 방식의 배열 생성 var myArray1 = new Array(); //길이가 10인 예전 방식의 배열 생성, 10개의 자리에는 아무것도 들어 있지 않습니다. var myArray2 = new Array(10); //예전 방식의 생성과 동시에 초기화 var myArray4 = new Array(1, 2, 3,"홍길동", "아무개"); //길이가 0인 literal notation 방식의 배열 생성 var myArray3 = []; //literal notation 방식의 생성과 동시에 초기화 var myArray5 = [1, 2, 3, "홍길..

1)indexOf(), lasatIndexOf() arr.indexOf(searchElement[, fromIndex]) arr.lastIndexOf(searchElement[, fromIndex]) (1)indexOf() 배열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는'첫번째' element의 index를 리턴합니다. (2)lastIndexOf() 배열 안에서 찾으려는 값(searchElement)과 정확하게 일치(===)하는 '마지막' element의 index 를 리턴합니다. (3)두 함수 모두 찾으려는 값이 배열에 없으면 -1을 리턴합니다. (4)예시 const arr = [1, 2]; let elementExistYn = true; if(arr.indexOf(3)..

반복문을 실행하다가 종료하는 방법으로 아래 세 가지가 있으며 각각 종료되는 범위가 다르다. 1)continue 반복문 실행 중 특정 i에 대한 실행문을 종료한다. 반복문 내 그 외 i에 대해선 명령문이 반복적으로 실행된다. const forContinue = () => { let sum = 0; for (let i = 0; i { let sum = 0; for (let i = 0; i 100) { break; } sum += i; } console.log(sum); // 105 }; forBreak(); 위 코드는 0부터 100까지의 수를 모두 더하는 함수이다. 그러나 sum이 100보다 커질 때 break문을 만나 이후 반복문은 종료되고 console.log(sum) 명령문으로 넘어가는 걸 알 수 있음..

1)문자열에 표시하려는 따옴표와 다른 따옴표로 문자열 표현하기 let str = "'안녕하세요?'"; 2)escape 문자('\') 사용하기 문자열에서 따옴표를 표현하기 위해서, 따옴표 앞에 '\' 문자를 붙여준다. let str1 = "\"홍길동님\" 안녕하세요?"; let str2 = '\'홍길동님\' 안녕하세요?'; 3)템플릿 문자열[back-tick(`)]로 감싸기 let str2 = `'홍길동님' 안녕하세요?`; let str3 = `'홍길동'님 "안녕하세요?"`; 4)참고 URL

1)개요 연산자에는 크게 산술, 문자열, 증감, 비교, 대입, 상함, 논리 연산자 등이 있음 2)산술 연산자 (+,-,*,/%) -,*,/의 경우 문자열로 표현된 숫자도 계산해준다. +는 안 되는데 아래 이유가 있음. "3" * "2" == 6 3)문자열 연산자('+' 심화) (1)+ 연산자는 숫자 외에 문자열과 다른 데이터도 연결해준다. (2)문자열이 아닌 데이터의 경우 연결되는 과정에서 문자열 형태가 된다. var string1 = 'hi' + 9; // 'hi9' var string2 = 3 + 4 + 'wow'; // '7wow' 재밌는 사실은 string2의 경우 '7wow'가 된다. 3과 4 먼저 연산하기 때문에 7이 되었다가 문자열이 만나 문자열 형태가 되었다. 컴퓨터는 순서대로 연산한다. ..

[JS] 키보드 Event - onKeyDown(), onKeyUp() 함수 Javascript에서 사용자가 키보드의 key 입력을 감지하여 함수를 호출하여 처리가 가능합니다. onKeyDown(), onKeyUp() 함수를 호출 시 KeyCode를 함께 사용이 가능합니다. onKeyDown() 함수 Javascript 프로그래밍 redcow77.tistory.com 아래 event type을 통해 키보드의 key 입력을 감지하여 evnet handler 함수를 호출할 수 있으며 KeyCode 함께 사용가능함. (1)onkeydown (또는 keydown) 키보드의 Key를 눌렀을 때 발생하는 Event 함수입니다. shift, alt, controll, capslock 등의 모든 key에 동작시 반응함..

때때로 이벤트 핸들러 함수 내부에서 event, evt, 혹은 e와 같은 이름으로 명명된 매개변수(parameter)를 봤을 것입니다. 이벤트 핸들러에 전달되는 매개변수는 event 객체 하나뿐이며 event객체에는 이벤트와 관련된 프로퍼티 및 메서드가 있다. 1)event Property (1)event.target && event.currentTarget ①Event.target: 실제로 이벤트를 발생시킨 요소 ②Event.currentTarget: 이벤트에 binding된 DOM 요소(addEventListener 메소드 앞에 기술된 객체를 말함) 아래 버튼 2개를 자식요소로 가지고 있는 parent 요소가 있다고 해보자. 만약 첫번째 버튼을 클릭하게 되면 결과는 아래와 같이 나온다. // HTML..

1)Event의 구성요소 (1)event target (대상) event가 일어날 객체(요소)를 말한다. (2)event type event의 종류를 의미한다. click, scroll 등이 있다. (3)event handler event가 발생했을 때 동작하는 코드를 말한다. 2)Event 등록방법 (1)Inline event target 태그 속성으로 지정함. (2)property Listener event target에 해당하는 객체의 property로 event를 등록하는 것을 말함. (3)addEventListener() event를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러 개의 event handler를 등록할 수 있음. addEventListener() 메서드는 이벤트 타입..

(1)Date()와 new Date() 차이 ①Date() new 키워드가 없는 Date() 함수는 인수를 무시하며, 현재 날짜 및 시간을 나타내는 문자열을 반환합니다. Date('asd') // 'Wed Dec 22 2021 19:58:27 GMT+0900 (한국 표준시)' Date() // 'Wed Dec 22 2021 19:59:10 GMT+0900 (한국 표준시)' typeof Date() // 'string' 참고로 date()로 하면 안 된다. Date()다. let a = date(); console.log(a); // Uncaught ReferenceError: date is not defined 객체가 아니므로 getMonth() 등 메소드 사용할 수 없음. let currentDay =..

1)firstChild와 firstElementChild - firstElementChild가 유용함 (1)개요 모두 선택된 객체의 첫 번째 자식 요소를 반환한다. (2)비교 firstChild는 first childe node를 element node 또는 text node, comment node로 반환한다. firstElementChild는 first child node를 element node로만 반환을 한다 (text와 comment nodes를 무시). 따라서 textContent에 접근하거나 style을 바꾼다든지 등등 HTML code에 반영을 위한 접근이 필요하다면 firstElementChild을 쓴다. The difference boils down to the difference be..

append() 관련 검색 중 제목에 담긴 메소드를 모두 활용한 코드 예시가 있어 보관 목적으로 가져왔다. HTML에 요소를 직접 생성하지 않고 JS로만 아래 사항을 구현했다. ①HTML 요소를 생성함. ②row class 요소 안의 자식 요소로 추가삽입함. ②innerHTML을 활용해 태그와 배열 item을 객체로 title 및 price property 활용함 ③배열 item을 객체로 순회할 수 있도록 forEach() 사용함. (1)HTML (2)JS let products = [ {id: 0, price: 70000, title: "꽃무늬 원피스"}, {id: 1, price: 50000, title: "데님 셔츠"}, {id: 2, price: 60000, title: "트러커 재킷"}, ]; ..

1) 요소 생성하기 - createElement() 인수로 "HTML 태그"를 입력한다. const hello = document.createElement( "h1" ) // 코드가 생성된다. 2) 부모자식관계로 요소 추가하기 - appendChild() 유용함 (1) append()와 appendChild() 둘 다 선택한 객체의 자식 요소로 인수를 (뒤에) 추가한다. document.body.appendChild(hello); // 태그 코드를 가진 hello라는 변수가 body태그 내부에 생성된다. 상기 메소드는 아래와 같은 차이가 존재한다. ①append() - 인수로 요소 외에 문자열(String)을 사용할 수도 있음. // DOMString 삽입 const parent = document.cr..

1) Date() 생성자 Date 객체를 생성한다. 인수로는 다양한 형태가 올 수 있다. 아래는 MDN에서 제공한 구문 예시다. new Date() new Date(value) new Date(dateString) new Date(year, monthIndex) new Date(year, monthIndex, day) new Date(year, monthIndex, day, hours) new Date(year, monthIndex, day, hours, minutes) new Date(year, monthIndex, day, hours, minutes, seconds) new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds) 실제 연..

1) 개요 Object 메소드에는 어떠한 타입을 문자열로 변환해주는 toString()가 있는데 Object가 JS에서 모든 타입의 조상이란 걸 생각하면 모든 타입은 어떤 형태로든 toString()이라는 메서드가 있다는 의미가 된다. 2) object의 toString() 실질적으로 object.prototype.toString()은 property 상관없이 [object Object] 문자열만 반환되므로 의미 없음. 그보다 문자열과 더하기 연산을 하면 문자열이 앞에 있든 뒤에 있든 문자열 아닌 타입이 문자열로 변환(toString())한다는 것에 의의가 있음. var o = new Object(); console.log('--> ' + o); // --> [object Object] 예를 들어, 위 ..

1-1) Javascript에서 기본 데이터 타입인 boolean, number, string 그리고 특별한 값인 null, undefined 빼고는 모든 것이 객체이다. 사용자가 정의한 함수도 객체이고, new란 연산자를 통해 생성된 것도 객체이다. 객체 안엔 proto 속성이 있다. 이 속성은 객체의 원형인 프로토타입 객체를 참조하는 역할을 한다. 1-2) 객체가 만들어지기 위해서는 자신을 만드는데 사용된 원형인 프로토타입 객체를 이용하여 객체를 만든다. 2) 프로토타입 객체에 getType()이라는 함수를 추가하면 멤버를 추가하기 전에 생성된 객체에서도 추가된 함수를 사용할 수 있다. 같은 프로토타입을 이용하여 생성된 joon과 jisoo 객체는 getType()을 사용할 수 있다. 3) 단, 프로..

1.Number 1) Number는 String, Array 등과 달리 관련 메소드를 실행하기 위해선 해당 숫자를 변수에 먼저 할당해야한다. //Number let a =123 console.log(a.valueOf()); // 123 console.log(1234.valueOf()); // 오류 발생함 //String console.log('갤럭시'.valueOf()); //'갤럭시' console.log('갤럭시'[1]) //'럭' //Array console.log([1,2,3].reverse()); //[3,2,1] 2-1) Number()를 함수로 사용하면 문자열이나 다른 값을 Number 타입으로 변환합니다. 즉, 다른 타입의 값은 Number() 함수를 사용하여 숫자로 바꿀 수 있습니다. 만..

1)자바스크립트의 객체 모델 DOM, BOM (1)브라우저 객체 모델 BOM (Browser Object Model) 브라우저에 대한 모든 내용을 담고있는 객체로서 브라우저에 관한 정보를 제공하거나 브라우저의 모양을 제어하도록 제공되는 객체들이다. 대표적으로 아래와 같은 객체들이 존재한다. window 객체(최상위 객체) - location 객체 (url 주소와 관련) - navigator 객체 - history 객체 (앞뒤 페이지 이동정보를 기록) - screen 객체 - document 객체 - string, boolean, object, number, function, array 등의 자료형 ①window 객체 ⑴개요 window 객체는 모든 BOM 객체들의 조상, 즉 최상위 객체(=전역 객체 =글..

(1)표준 내장객체와 전역객체 표준 내장 객체와 전역 객체는 서로 다르다. 표준 내장 객체는 전역 범위의 여러 객체를 일컫는다. 전역 객체는 엄격 모드를 사용하지 않을 땐 전역 범위에서 this, 지원하는 환경에선 globalThis를 사용해 접근할 수 있는 객체입니다. 전역 범위의 나머지 객체는 사용자 스크립트가 생성하거나, 호스트 응용 프로그램이 제공합니다 (2)Math 다른 전역 객체와 달리 Math는 생성자가 아닙니다. Math의 모든 속성과 메서드는 정적입니다. Math MDN 검색시 속성과 메소드만 나온다. ①속성 Math.SQRT2 ②메소드 Math.floor(x) (3)Object JavaScript의 거의 모든 객체는 Object의 인스턴스입니다. 일반적인 객체는 Object.protot..