목록WEB STUDY/JAVASCRIPT (81)
whatisthis?
객체(object)를 완성하는 구성품 = 프로퍼티 + 메서드. 객체는 빈 껍데기에 불과한다, 데이터를 의미하는 프로퍼티 (property) 데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메서드 (method) ___ 프로퍼티(property) 자바스크립트의 객체는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다. 키 (key) 프로퍼티를 식별하기 위한 식별자(identifier) 값 (value) js 내 모든 값 - 값의 default 값은 string(문자열) 이다. 변수선언만 할경우 자바스크립트 엔진이 강제적으로 undefined를 할당하기 때문에 에러가 생길 수 있다. _..
재귀 함수 함수 내에서 자신을 다시 호출하는 함수. vs. 콜백 함수 자바스크립트는 함수를 변수로 저장(함수 표현식)할 수 있기 때문에 함수 표현식에 의한 변수를 함수의 인수로 사용하여 매개변수에 전달할 수 있다. 이때 함수의 매개변수에 전달되는 함수 표현식의 변수인 인수를 콜백 함수라고 한다. 즉, 함수의 변수로 들어가는 함수를 콜백함수라 함! 보통 자바스크립트에서 웹 페이지가 서버로부터 데이터를 수신하기 위해서 AJAX(Asynchronous JavaScript and XML)를 사용할 때 콜백함수를 많이 사용함. ** 콜백 함수는 코드를 통해 명시적으로 호출하는 함수가 아니라, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 시스템에서 호출되는 함수임. 즉, 개발자는 함수를 등록하기만 하고 직접 ..
변수 선언 - let과 const와 var의 차이 우선, Hoisting과 Scope의 개념을 먼저 알아야 한다. cr: https://www.howdy-mj.me/javascript/var-let-const/ var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프 자바스크립트에서 var로 변수 선언이 가능했는데, 왜 const와 let이 나왔으며 이 둘의 사용을 권장할까? 이를 정확하게 알기 위해서는, 변수의 선언 및 할당 과정, 호이스팅, 스코프를 알아야한다. www.howdy-mj.me 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 자바스크립트는 매니지드 언어(managed languag..
JavaScript for...in Loop The JavaScript for...in statement loops through the properties of an object. Syntax for (let variable in object) { // code to be executed } https://www.w3schools.com/js/js_object_properties.asp JavaScript Properties JavaScript Object Properties Properties are the most important part of any JavaScript object. JavaScript Properties Properties are the values associated with..
document 객체 어떠한 태그를 삭제하고싶거나 자식 태그를 추가하고 싶을 때 DOM (Document Object Model) document 객체는 DOM의 일부이다. document 객체에서 찾지 못했다면 DOM을 살펴보자. window 웹페이지가 아닌 웹브라우저 자체를 제어 ex> 새 창 열기, 화면 크기를 js로 알아보기등 ajax 리로드하지않고 정보 변경시 cookie 리로드되어도 현재 상태 유지하고 싶을때 (개인화된 서비스) offline web application 오프라인에서도 작동하는 웹 webRTC 화상통신 웹앱 speech 사용자의 음성 인식, 음성 정보 제공 webGL 3차원 그래픽 게임 등 제작시
30. 객체 쓰기,읽기 배열 vs 객체 ** 배열 (Array) = 많은 정보를 순서에 따라 정리정돈. (이름은 없음) ** 객체 (Object) = 순서 없이 정보를 저장하는 것. -> 이름이 있는 정리정돈 상자. 객체 선언시 var 변수명 = { } 와 같이 작성한다. (cf> 배열은 대괄호 [ ] 안에 입력함) 예제. 1. 객체를 만드는 방법 var coworkers = { "programmer":"thisisyjin", "designer":"injung" }; 2. 만들어진 객체에서 데이터를 가져오는 방법 document.write("programmer :"+coworkers.programmer); document.write("designer :"+coworkers.designer); 3. 이미 ..
25. 함수 연속적이지 않은 반복문이거나, 중복이 1억번 발생한다고 치자. 이는 반복문으로만 작성할 수는 없고, '함수(function)'를 통해 작성할 수 있다. 예제. function two(){ document.write('2-1'); document.write('2-2'); } document.write('1'); two(); document.write('3'); two(); 함수의 선언 function two(){ 내용 } 함수의 실행 two(); 26. 함수 : 매개변수와 인자 자판기를 예시로 들어보자. 자판기에서 우리가 원하는 제품을 선택하면, 그 제품이 나오게 된다. - 우리가 제품을 선택하는 것 = 입력 (input) - 자판기에서 물건이 나오는것 = 출력 (output) ● Parame..
18. 리팩토링 중복의 제거 리팩토링 = 공장으로 다시 보내 개선. 코딩을 하고 나면 비효율적인 코드가 발생. 코드를 효율적으로 하여 유지보수를 용이하게 중복 제거 등 -> 리팩토링 document.querySelector('#night_day') 위 코드는 사실상 자기 자신(=input요소) 을 가리키고 있다. 이제 id를 이용하지 않고 자기자신의 값을 불러오기 위해서 this 를 이용할 수 있다. if(this.value === 'night'){ document.querySelector('body').style.backgroundColor = 'black'; document.querySelector('body').style.color = 'white'; this.value = 'day'; } 즉, 이..
12. 제어할 태그 선택 자바스크립트의 문법에 따라 웹브라우저에게 body태그를 선택하도록. 1. javascript select tag by css selector 라고 검색해보자. (즉, css 선택자로 태그를 선택하는 법) document.querySelector('선택자') document.querySelector('body') 2. 자바스크립트를 통해 스타일을 적용하는 것을 검색해보자. .style 3. 배경색 (background color)을 바꾸는 자바스크립트를 검색해보자. .style.backgroundColor document.querySelector('body').style.backgroundColor = 'black'; 4. 그 다음, 글자 색을 바꾸는 자바스크립트를 검색해보자. ...
> 편의상 강의 번호로 작성함. 6. 데이터타입 - 문자열과 숫자 JavaScript Data Types Boolean Null Undefined Number String Symbol [F12]-Console에서 1+1을 입력하고 엔터를 치면 아래와 같은 결과가 나온다. 1+1과 같이 항 두개를 이용한 연산을 이항연산 이라고 하고, +와 같은 기호를 '산술 연산자'라고 한다. ___ https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase String.prototype.toUpperCase() - JavaScript | MDN toUpperCase() 메서드는 문자열을 대문자로 변환해 반환..