JavaScript 썸네일형 리스트형 [부스트코스] 자바스크립트 객체 객체 - key, value 구조의 자료구조이다. - javascript로 데이터를 표현하기 위해서는 Array, Object를 사용한다. - Object형태는 {}로 그 자료를 표현하며, 서버와 클라이언트 간에 데이터를 교환할 때 Object포맷과 비슷한 방법으로 데이터를 보낸다. 객체 선언 var obj = { name : "crong", age : 20} console.log(obj["name"]); // crong console.log(obj.age); // 20 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Working_with_Objects#%EA%B0%9D%EC%B2%B4_%EC%83%9D%EC%84%B1%ED%95%98%EA%B8.. [부스트코스] 자바스크립트 배열 배열의 선언 자바스크립트 배열의 선언은 간단하다. var a = []; //배열 안에는 모든 타입이 다 들어갈 수 있다. 함수도 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있음. var a = [1,2,3,"hello", null, true, []]; new Array() 문으로 선언할 수도 있지만, 보통은 간단히 '[]'를 사용한다. 배열에는 length 속성이 있어 그 길이를 쉽게 알 수 있다. 배열에 원소 추가는 index번호와 함께 추가할 수 있다. var a = [4]; a[1000] = 3; console.log(a.length); // 1001 console.log(a[500]); // undefined 배열은 push메서드를 통해서 뒤에 순차적으로 추가할 수 있다. var a = [4.. [부스트코스] JavaScript Debugging 프로그래밍에서 디버깅은 버그를 잡는 것을 의미한다. 프로그래밍을 하다보면 내 코드가 버그가 없으면 좋겠지만 생기기 마련이다. 이를 빠르게 해결하는 것이 프로그래밍 생활을 좀 더 건강하고 즐겁게 할 수 있는 방법이다. 자바스크립트는 런타임(실행) 단계에서 실행되는 언어이기 때문에 보통 브라우저에서 디버깅을 많이 한다. * valnila js : 프레임워크 없이 실행되는 자바스크립트 디버깅 컨트롤 Pause, Continue : 첫 번째 버튼은 평소에는 Pause 버튼 상태인데 브렉포인트가 잡힌 상태에선 Continue 버튼이 됩니다. 다른 브레이크포인트가 잡힐 때까지 코드를 진행 Step over next function call : 스텝 오버는 코드 라인을 한 스탭 진행하는데 현재 실행 라인에 함수 실행.. [부스트코스] Browser Event, Event object, Event handler Event 브라우저에는 많은 이벤트가 발생한다. 브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할때도 이벤트가 발생한다. 이벤트를 브라우저가 발생시켜주니, 우리는 그 때 어떤 일을 하라고 할 일을 등록할 수 있다. 다시 말해, HTML 엘리먼트별로 어떤 이벤트가 발생했을 때 특정 행위를 하고 싶다면, 대상 엘리먼트를 찾고 어떤 일을 등록하면 된다. 이를 자바스크립트로 구현할 수 있다. 이벤트 등록 이벤트 등록 표준방법 - addEventListener() var el = document.getElementById("ouside"); el.addEventListener("click", function() { //do something }, false); .. [부스트코스] DOM과 querySelector DOM 브라우저에서는 우리가 열심히 코딩한 HTML코드를 해석해 DOM(Document Object Model)이라는 객체 형태의 모델로 저장한다. 그렇게 저장된 정보를 DOM Tree라고 한다. 결국 HTML element는 Tree형태로 저장된다. 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘들다. 그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API를 제공한다. 브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공한다 . getElementById() ID정보를 통해서 엘리멘트를 찾는다. querySelector() DOM을 찾는데 특히 유용한 qu.. [부스트코스] 자바스크립트 window 객체(setTimeout) window객체 브라우저 개발을 하다보면, window라는 객체가 있다. window에는 많은 메서드들이 존재하며, 아래첨 사용할 수 있다. window는 디폴트에 개념임으로 생략 가능하다. window.setTimeout() setTimeout() // window는 전역객체라서 생략가능하다. setTimeout 활용 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고도한다. 자바스크립트는 함수를 인자로 받을 수 있는 특징이 있다. 참고로 함수를 반환할 수도 있다. function run() { setTimeout(function() { var msg = "hello codesquad"; console.log(msg); //이 메시지는 즉시 실행되지 않습니다. }, 1000); } r.. [부스트코스] 자바스크립트 함수 호출 스택 함수 호출 아래 함수를 실행해보자. run이 호출되고 그 다음에 printName이 호출된다. // 함수의 호출. function printName(firstname) { var myname = "bell"; return myname + " ," + firstname; } function run(firstname) { firstname = firstname || "Youn"; var result = printName(firstname); console.log(result); } run('kim'); // bell, kim 함수호출과 Stack 메모리에서는 우측의 Call Stack에서와 같이 순서대로 쌓이게 된다. bar 함수에서 foo를 호출한 후 foo함수의 결과를 받아올 때 까지 bar함수는 메모리.. [부스트코스] 자바스크립트 함수 "자바스크립트 잘 이해하고 있다는 것" === "자바스크립트 함수를 잘 이해하고 있다" 함수의 선언 함수는 여러개의 인자를 받아서, 그 결과를 출력한다. 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다. 파라미터가 1개일때, 인자의 갯수가 0개만 넣어 실행하면, 이미 정의된 파라미터는 undefined라는 값을 갖게 된다. 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문이다. // 함수의 호출. function printName(firstname) { return "name is" + firstname; } console.log(printName()); // 출력 결과 : name is undefined console.log(printName('bellroute')); // 출력.. 이전 1 2 다음
