개발하는 냥이 (=ↀωↀ=)

: 객체 생성시 값의 초기화 : 객체의 프로퍼티 삭제 소스 //객체의 키는 "" 옵션. 특수문자가 있는 경우에는 필수. var member = { id : "hong", email : "hong@gildong.com" }; console.log("member1 : ", member); //프로퍼티 동적 추가 member.name = "홍길동"; //기존에 이름이 동일한 프로퍼티가 있다면 값을 변경 member.id = "kang"; console.log("member2 : ", member); //member의 name 프로퍼티 삭제하기 delete member.name; console.log("member3 : ", member); //member 객체 삭제하기 - 안됨. 객체 내에 프로퍼티만 삭제 가..

개발/JavaScript 2018. 12. 3. 18:20

객체는 문자열로 이름을 붙인 값들의 집합이다. 동적으로 값을 저장 (프로퍼티) 값을 추가하는 2가지 형태 - 객체.프로퍼티명 = 값 - 객체["프로퍼티명"] = 값 소스 "use strict"; // 빈 객체 생성하기 var member = {}; var member = new Object(); console.log("member : ", member); // 값 추가하기 member.id = "hong"; member["email"] = "hong@gildong.com"; // 프로퍼티 값 꺼내기 console.log("member : ", member); console.log("member.id : ", member.id); console.log("member.email : ", member["ema..

개발/JavaScript 2018. 12. 3. 18:08

스크립트의 모듈화 - 함수이용 조건을 매개변수로 넘겨주는 경우 소스 var data = [ 3, 9, 27, 81, 43 ]; //30보다 큰 숫자들을 배열에 담는다 var rList = []; for (var i = 0; i 30) { rList.push(data[i]); } } console.log("30보다 큰 값 : ", rList); //10보다 작은 숫자들을 배열에 담는다 for (var i = 0; i < data.length; i++) { if (data[i] < 10) { rList.push(data[i]); } } console.log("10보다 작은 값 : ", rList); //배열에서 조건에 맞는 데이터를 새로운 배열..

개발/JavaScript 2018. 12. 3. 17:11

ES6 (ECMA6) - 파라미터 디폴트 설정하기 파라미터에 디폴트 값을 설정해서 간편하게 파라미터 값이 없는 경우 초기화를 시킨다. 소스 function fn(num1, num2) { /* * if (!num1) num1 = 0; if (!num2) num2 = 0; */ // ||는 앞이 거짓일때 뒤에 실행 (간편조건식) num1 = num1 || 0; num2 = num2 || 0; console.log("num1 : " + num1 + ", num2 : " + num2); } fn(); fn(100); fn(100, 200); //ES6 부터 초기값을 설정 가능(Java 외에 다른 언어들은 지원됨) function fn2(num1 = 0, num2 = 0) { console.log("num1 : ..

개발/JavaScript 2018. 12. 3. 17:05

현재는 비권장하는 함수 (예전에 많이 사용되었으니 참고) (성능저하) eval("자바스크립트 엔진이 해석할 수 있는 문자열") "use strict" 사용시에는 eval()을 사용 할 수 없음 JSON 형태의 문자열일 경우에는 JSON.parse(JSON문자열) - ES 5부터 추가 json등으로 js 결과값을 받을 때 변환시 eval() 사용됬었음.. "{result:10, items:[{title:'a'},{title:'b'},{title:'c'}]}"; ex> var naver = eval(data2); - naver.result... naver.items[0]... 소스 var data = "var i=10 ; var j=20 ; var sum=i+j; "; var data2 = '{"result..

개발/JavaScript 2018. 12. 3. 15:15

자바스크립트의 중요기술 - 스코프 체인(실행 컨텍스트를 지역->전역에서 찾아 씀), 프로토타입 체인, this, 클로저 클로저(closure) - 함수내의 지역변수를 함수 외부에서 사용할 수 있게 하는 기술 - 생명주기가 종료된 함수의 변수를 참조할 수 있게 하는 기술 소스 function outer(val) { var msg = "당신의 메세지 : " + val; return function() { return msg; }; // 함수를 리턴 (콜백함수) } var fn = outer("하이~"); // out에서 반환한 함수를 받음 console.log(fn()); 결과 당신의 메세지 : 하이~ 소스 function nextID() { var id = 1; return function() { retu..

개발/JavaScript 2018. 12. 3. 14:37

브라우저에서 제공되는 document 객체 활용 - CSS 선택자에 해당하는 엘리먼트 하나만 가져온다. var ele = document.querySelector("CSS 선택자") 엘리먼트 속성 - innerText : 태그가 텍스트로 적용 - innerHTML : 태그가 해석되어서 적용 html 소스 DOM API 연습하기 - 1 클릭해봐... 랜덤변경 CSS 선택자에 해당하는 모든 엘리먼트가 반환됨.. var eles = document.querySelectorAll("CSS 선택자") html 소스 연습하기 - 2 사과 배 포도 딸기 클릭

개발/JavaScript 2018. 12. 3. 13:07

- 특정한 시간 뒤에 함수를 실행시킴(콜백함수) id setTimeout(콜백함수, 밀리세컨드단위의시간) - 등록된 정보를 취소하기 clearTimeout(id); var id = setTimeout(function () {}, 10000) - 10초뒤에 함수 실행하는 동작에 대한 id를 반환 console.log("setTimeout 설정 후..."); 소스 function fn() { var date = new Date(); var time = date.toLocaleTimeString(); // 현재 지역 시간 정보 console.log(time); var id = setTimeout(fn, 1000); // fn 함수가 끝나기전 재호출.. 1초마다 // 취소하기 clearTimeout(id); }..

개발/JavaScript 2018. 11. 29. 14:06