console.log("CAPABLE");

확인 단추를 클릭하면 응용 프로그램이 실제로 뭔가를 해보도록 하겠다. 이게 코드가 DOM에서 발생하는 뭔가에 반응하는 첫번째 시간이 될거다. 일단 그렇게 하려면 이벤트 리스너(event listener)가 필요하다. Event는 페이지에서 일어나는거다. 예를 들어 마우스 클릭, 마우스 무빙, 키 프레스 등 Event listener의 특징은 이벤트가 발생하길 기다렸다가 반응할 수 있다. 이벤트를 듣기 위해서는 먼저 이벤트가 발생해야할 요소를 선택해야 한다. 핑크색 박스안에 있는 이 버튼 요소의 이벤트를 들어야 한다. 이 Check 버튼말이다. 내가 관심있는 클릭이 여기서 발생할 것이다. 이 버튼을 클릭하면 뭔가 일어나야 한다. document.querySelector('.check'); html 파일로 ..

'use strict'; console.log(document.querySelector('.message').textContent); querySelector을 이용해서 이 메시지 요소를 선택했다. 선택된 요소로부터 텍스트 콘텐츠도 얻었다. 텍스트 콘텐츠를 얻는 것 외에 요소의 콘텐츠도 설정할 수 있게되었다. document.querySelector('.message').textContent = '👏 Correct Number!'; console.log(document.querySelector('.message').textContent); DOM 조작 DOM 메모의 텍스트 콘텐츠를 조작했다. document.querySelector('.number').textContent = 13; document.qu..

DOM 문서 개체 모델을 의미한다. 기본적으로 HTML 문서를 구조적으로 나타낸다. JS를 이용해 HTML 요소와 스타일에 엑세스해 조작할 수 있게 해준다. 예를 들어, 텍스트도 바꾸고 HTML 특성도 바꾸고 JS에서 CSS 스타일도 바꿀 수 있다. ∴ DOM은 기본적으로 HTML 문서와 JS 코드 사이의 연결점 HTML 페이지로 로드되면 브라우저가 자동으로 DOM을 생성한다. 이런 나무 구조물에 저장한다. 이 트리에서는 각각 HTML 요소가 하나의 개체이다. A paragraph with a link A second paragraph 사진은 tree structure이다. HTML의 각 요소에서 볼 수 있듯이 요소 노트와 DOM 트리가 있다. JS를 이용해 각 노드에 액세스하고 상호작용할 수 있다. D..

const jonas = [ "Jonas", //0번째 요소 "Schmedtmann", //1번째 요소 2037 - 1991, //2번째 요소 "teacher", //3번째 요소 [("Michael", "Peter", "Steve")], //4번째 요소 ]; 이 코드를 이용해서 for루프를 이용해 이 배열을 통과시킬 수 있다. 5가지 요소만 기록하면 된다. 일단 for문을 작성해보겠다. 일단 시작은 카운터부터 시작한다. for (let i = 0; 전통적인 counter 변수 이름은 오랫동안 i였다. 여기서도 i를 사용한다. 이번에는 0부터 시작한다. 왜? 배열은 0에 기반을 두고 있기 때문이다. 배열의 요소를 읽을 때 루프 코드를 작성하면 이해가 될것이다. for (let i = 0; ; i++) 모든..

if else문에서 컨트롤 구조가 있다고 언급했었다. 다른 통제 구조 중 하나가 고리(the for loop)이다. JS에서 기본 사항 섹션의 마지막 주제는 Loop이다. Loop는 모든 프로그래밍 언어의 근본적인 측면이다. 기본적으로 반복적인 작업을 자동화하게 해주기 때문이다. 즉 반복해서 수행해야 하는 작업들인것이다. 체육관에 가면 웨이트 트레이닝을 한다고 가정해보자. 특정 역도 운동 10번을 반복한다고 치자 어떻게 표현해야 할까? console.log("Lifting weights repetition 1 🏋"); console.log("Lifting weights repetition 2 🏋"); console.log("Lifting weights repetition 3 🏋"); console.log..

함수는 값의 또 다른 유형이다. 함수가 그냥 값이라면 그 값이 함수인 키 값 쌍을 만들 수 있다. 이 말은 즉 개체에 함수를 추가할 수 있다. calcAge: function(birthYear) { return 2037 - birthYear } }; const calcAge: function(birthYear) { return 2037 - birthYear } }; 첫번째 구문과 두번째 구문의 차이점이 있다. 첫번째 구문의 calcAge는 두번째 구문의 calcAge와 같은 정규 변수가 아니다. jonas의 객체의 속성이다. 따라서 위에서는 콜론을 사용하지만 나머지는 완전히 똑같다. 개체에 부착된 모든 기능은 메서드이다. function calcAge(birthYear) { return 2037 - bi..

공통된 특징으로는 점과 괄호 표기법을 활용한다. 1. 개체로부터 속성을 얻는 첫번째 방법: .표기법을 사용한다. 만일 성을 얻고 싶다고 가정하면? const jonas = { firstName: "Jonas", lastName: "Schmedtmann", age: 2037 - 1991, job: "teacher", friends: [("Michael", "Peter", "Steve")], }; console.log(jonas); console.log(jonas.lastName); jonas.lastName을 입력하면 된다. 그러면 저 성이 jonas객체에서 바로 나왔다. 저기에서 .은 연산자이다. .lastName에 있는 연산자가 jonas(지정한 이름)으로 속성을 검색하는 거다. 괄호를 이용해 똑같은 ..

개체(Objects) 또 다른 데이터 구조이다. 배열을 데이터 구조로 사용해왔다. 배열은 같은 변수에 다수의 관련 값을 저장하기 위해서이다. const jonasArray = [ "Jonas", //이름 "Schmedtmann", //성 2037 - 1991, //나이 "teacher", //직업 [("Michael", "Peter", "Steve")], //배열안에 배열 ]; [("Michael", "Peter", "Steve")] ← 배열안에 배열이 있다. 여러 값을 결합한 데이터 구조이다. 배열에서는 이 요소들에 이름을 줄 방법이 없다. 그래서 이름으로 참조가 안되고 배열에 있는 주문 번호로만 참조할 수 있다. 그 문제를 해결하기 위해서는?? 그래서 개체가 있는 것이다. (놀랍도다..) ● 개체에서..

배열 매서드(Array methods) → 연산이라고 생각하면 쉽다. Js에서 기본 제공 함수들이 있는데 기본적으로 배열에 직접 적용할 수 있다. 그것들을 배열 매서드라고 부른다. const friends = ["Michael", "Steve", "Peter"]; push push 매서드는 배열의 끝에 요소들을 추가한다. const friends = ["Michael", "Steve", "Peter"]; friends.push("Jay"); 친구를 입력하고 .push를 하면 배열 끝에 요소들을 추가한다. push는 본질적으로 함수이다. 옆에 괄호가 있다. 괄호는 우리가 호출하는 함수이다. push앞에 있는 .은 friends배열 자체에 연결되는 함수인걸 의미한다. ● push는 메서드이다. ● 기술적으로..

데이터 구조 → array(배열) const friend1 = "Michael"; const friend2 = "Steve"; const friend3 = "Peter"; 친구 3명을 적기 위해 변수를 3번 적었다. 만일 친구 10명을 적기 원하면 변수를 총 10변을 적어야 할까? 그렇다. 그렇다면 이것을 더욱 간단하게 할 수 없을까? 간단하게 작성할 수 있다. 어떻게? 이 모든 값을 한데 묶어서 더 큰 컨테이너에 넣는것이다. 위와 같은 과정을 하기 위해 JS에는 데이터 구조가 있는 거다. Array(배열)은 데이터 구조이다. Array는 큰 컨테이너같다. 거기에 변수를 입력했다가 나중에 참조할 수 있다. 과연 중요할까? 중요하다. 프로그래밍은 대부분의 시간 데이터 위주이니까 저장하고 처리하는 어딘가에서..