BlockChain

1. getElementById 

2. getElementsByClassName

3. querySelector, querySelectAll

자바스크립트에서 DOM은 HTML에서 document, 즉 html, css에 대한 정보들을 가지고 있다. 이때 html에서 구조를 구성하고 구성한 엘리먼트들에 대한 객체를 구할 수 있는 방법이다.

1. getElementById : ID 값을 이용하여 자바스크립트의 객체를 가지고 올 수 있다. 

<ul>
  <li id="hi">HI</li>
  <li id="bye">BYE</li>
</ul>

const hi = document.getElementById("hi");
const bye = document.getElementById("bye");


hi.style.color("red");
bye.style.color("blue");

이런식으로 id getElementById를 이용하여 html id를 찾아오고 폰트색상을 바꾸어 줄 수 있다.

2. getElementsByClassName : Class 값을 이용하여 자바스크립트 객체를 가지고 올 수 있다.

<ul>
  <li class="hi">HI</li>
  <li class="bye">BYE</li>
</ul>

const hi = document.getElementsByClassName("hi");
const bye = document.getElementsByClassName("bye");

hi.style.color("red");
bye.style.color("blue");

3. querySelector, querySelectAll

querySelector : 지정된 선택자와 일치하는 도큐먼트의 첫번째 엘리먼트만 반환, 일치하는 엘리먼트가 없다면 null을 반환한다.

querySelectAll : 지정된 셀러턱 그룹에 일치하는 도큐먼트의 엘리먼트 리스트를 나타낸다. 해당 선택자에 해당하는 모든 요소들을 가지고 온다. nodeList로 배영객쳉에 대해 for문 혹은 foreach문을 사용해야 한다. 

const x = document.querySelector(".hi");
const y = document.querySelectorAll("#bye");

1. 스코프

2.  Scope Chain

1. 스코프

자바스크립트에서 스코프는 '범위'라는 뜻을 가지고 있다. 스코프란 변수에 접근할 수 있는 범위라고 할 수 있다. 스코프에는 2가지 타입이 있다. 전역 스코프와 지역 스코프이다. 

전역 스코프는 전역에 선언되어 있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미이고, 지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서 접근할 수 없다는 의미이다. 자바스크립트는 함수를 선언할 때마다 새로운 스코프를 생성하게 된다. 그렇기 때문에 함수에서 선언한 스코프는 함수 내부에서만 사용할 수 있는 이것을 함수 스코프라고 한다. 함수스코프는 지역스코프의 예시라고 볼 수 있다.

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print();
console.log(a);

위 코드를 통해 지역스코프, 함수스코프, 전역 스코프를 알아 보도록 하자.

위와 같은 코드를 실행했을 때 어떤식으로 콘솔이 작용할까?  print() 함수 가 있고, console.log(a)를 실행하게 된다. 두 가지가 실행되었을 때는 print() 함수 내에 console.log(a)에서 지역변수인 a = 111을 출력하기 때문에 111이 출력되고, 이후 console.log(a)가 실행될 땐 전역변수 a = 1 이 들어가 1이 출력되게 된다. 고로 111 엔터 1 이 출력되는 것을 알 수 있다. 이때 우리는 지역스코프(함수 스코프)는 자신이 만들어둔 함수나 { }  블록스코프 내에서 작동하는 것을 알 수 있고, 블록스코프를 나오면 블록스코프 내에서 동작했던 지역변수 a 가 사라지고 블록 외부에 전역변수 a 가 동작하는 것을 알 수 있다. 

var a = 1; // 전역 스코프
function print() { // 함수 스코프
 console.log(a);
}
print(); // 1

다음 위와 같은 코드가 동작한다면, console 에는 무엇이 찍힐까 ?  이때 print()을 동작시킨다면,  print() 함수 내에 console.log(a)는 지역 내에 a 변수가 없기 때문에 전역변수 1을 출력하게 된다. 이는 Scope Chain 에서 일어나는 현상이다. 스코프 체인이란 가장 가까운 스코프가 묶여 있지 않다면 가장 가까운 변수 객체의 스코프 순으로 접근한다. 

2.  Scope Chain

스코프 체인은 일종의 리스트로 전역 객체와 중첩된 함수의  스코프의 레퍼런스를 차례로 저장하고, 스코프가 어떻게 연결되어 있는지 보여주는 것이다.  

>> 스코프 체인은 콜스택에 올라간 실행된 콘텍스트 내에서 있는 데이터 들에 대한 접근을 의미한다. 그러므로 실행된 함수 내에서만 지역스코프로 사용될 수 있고, 반면, 전역 스코프의 경우 상위 함수나 객체들이 데이터로 가지고 있다면 Scope Chain를 이용하여 사용할 수 있다. 

아래에 그림을 보면 왼쪽은 call stack, 오른쪽은 메모리힙이다. 이때 빨간색으로 칠해진 부분은 브라우저가 스크립트를 처음 실행 했을 때 모든 것을 포함하는 전역콘텍스트가 콜스택에 생긴다. 이후 함수를 호출하면서 그 위에 검은색 함수 콘텍스트(실행 콘텍스트) 들이 쌓이게 되는데 이때 콜스택 내에서 함수가 저장된 위치(주소값)를 따라 힙에 접근하고, 함수가 동작하면서 함수 내부의 데이터들이 호이스팅 된다. 또한 함수 내에서는 함수 스코프(지역스코프)를 이용하여 내부 변수들과 함수들에 접근 가능하다. 이때 만약 내부에 접근할 변수가 없다면 Scope Chain 이 자동으로 상위 함수콘텍스트들을 찾아 데이터를 접근하게 된다. 이것이 Scope Chain이다.

var a = 1; // 전역 스코프
function print() { // 함수 스코프
 console.log(a);
}
print(); // 1

결국 function print() 내에서 a 에 대한 값이 없기 때문에 상위 데이터인 전역 데이터를 Scope chain을 통해 가져오게 된다. 실제로 print() 함수를 실행하면 1이라는 데이터를 가져오게 된다.

etc) 함수 스코프 도움되는 사이트

https://ljtaek2.tistory.com/140

1. BOM (Browser Object Model)

WINDOW 객체 모델 구조 

1. BOM (Browser Object Model)

- 브라우저에 접근할 수 있는 객체의 모음

- window 객체를 통해 접근할 수 있다. 

- DOM 은 보이는 웹문서에 대한 내용을 접근한다면, BOM은 WINDOW 객체를 제어한다.

document : 현재 문서에 대한 정보

navigator : 브라우저명과 버전 정보를 속성으로 가지미

location : 현재 URL에 대한 정보, 브라우저에서 사용자가 요청하는 URL

screen :  브라우저의 외부환경에 대한 정보를 제공 

history : 현재의 브라우저가 접근했던 URL 히스토리

브라우저와 컴퓨터 스크린에 접근할 수 있는 객체의 모음이다. dom의 경우 html 구조의 형태를 문서화한 형식이라면 BOM은 브라우저에 접근할 수 있는 객체들의 모음이다.

1. WINDOW 객체 

2. DOM  (Document Object Model)

1. WINDOW 객체 

WINDOW 객체는 자바스크립트의 최상위 객체로 모든 객체가 소속된 객체이다. 

아래의 그림을 보면 WINDOW 객체 아래에 DOM, BOM, JavaScript가 최상위 객체인 WINDOW 객체 아래 소속되어 있다. 

우리가 어떠한 변수나 함수를 선언하게 되면 WINDOW 객체의 프로퍼티가 된다. 그 이유는 WINDOW객체는 최상위 객체로 모든 프로퍼티들을 포함하고 있다. 그래서 WINDOW.으로 시작하지 않아도 생략이 가능하다는 특징이 있다. 

하지만, let과 const 키워드로 선언한 변수는 블록스코프 이기 때문에 window 객체 내부의 블록에서 선언된 것으로 평가되어 전역객체의 프로퍼티로 활용되기 어렵다.(scope에 대한 내용정리는 차후 공부 후... 예정)

2. DOM  (Document Object Model)

DOM : 문서 객체 모델 

문서 객체 모델 이란 객체지향 모델로 구조환 된 문서를 표현하는 형식이다. 텍스트 형식으로 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. HTML 코드를 작성할 시 body 안에 img태그에 src 경로를 걸어야 브라우저가 제대로 인식한다. 구조를 바꾸어 마음대로 코드를 작성한다면 브라우저가 코드를 인식하지 못해서 렌더링을 할 수 없다. 브라우저가 웹 문서를 이해할 수 있도록 구성된 것을 DOM이라고 한다.

즉 문서들을 순서대로 구조화하여 트리구조로 구성한 것이 DOM이라 할  수 있다. 

document는 DOM 트리의 최상위 객체이다. 브라우저가 HTML 문서를 로드하기 전에 document 객체를 먼저 만든다. 그리고 document 객체를 뿌리로 하는 DOM 트리를 만든다. 

document 객체의 역할은 

프로퍼티로 HTML의 전반적인 속성을 나타낸다. 

메서드로 DOM객체를 검색한다. 

메서드로 새로운 DOM 객체 생성

메서드로 HTML 문서의 전반적 제어를 지원한다.

document의 메서드 

2-1) getElementById() : 아이디명으로 첫 번째 DOM 객체 리턴 

. innerHTML 형식으로 ID를 리턴하면 root ID 아래의 문서들을 모두 반환한다.

반면, outerHTML 형식으로 ID를 리턴하면 root ID를 포함한 모든 문서들을 반환한다.

2-2) getElementsByTagName() : 특정 태그명을 가진 모든 태그 컬랙션 형태로 리턴

2-3) getElementsByClassName() : 특정 클래스명을 가진 모든 태그 컬랙션 형태로 리턴

2-4) open() : 콘텐츠를 모두 지우고 새로운 HTML 콘텐츠를 쓸 수 있도록 열기

2-5) write(), writeln() : document에 HTML 콘텐츠 삽입, ln 이 붙은 건 write() 후 '\n' 추가출력 (빈칸하나)

2-6) close() : document 객체에 있는 HTML 콘텐츠를 브라우저에 출력하고, 더 이상 쓰기를 받지 않음

현재 브라우저에서 document.open() -> document.write() -> document.close() 순으로 하면 윈도우에 출력된 텍스트를 지우고 새로운 내용을 출력할 수 있다. 

1.  Javascript Function

기본적으로 함수라는 것은 수학에서는 

y = f(x)라고 많이 표현을 한다. 프로그래밍에서도 함수는 y = f(x)와 별로 다르지 않다. 

f(x) = 2x  라는 함수라고 정의해 보겠다. 이때 우리가 넣는 데이터는 x라는 인풋 입력값이고 

x라는 인풋 입력값에 2라는 데이터를 넣었을 때 테스트박스 즉 함수 내에서는 2 * 2 형식으로 함수가 작동한다. 이때 y = 4라는 출력값이 나오게 된다.   수학에서는 y는 정답 f(x)는 함수 x는 넣는 값이라고 표현한다. 이제 자바스크립트에서 함수가 무엇인지 알아보자.

1.  Javascript Function

function sum(num1, num2) {
  return num1 + num2;
}

자바스크립트에서 기본적으로 사용되는 함수의 틀이다. 자바 스크립트 또한 수학에서의 y = f(x)와 다르지 않다. 

function sum 이라는 함수를 만든다고 했을 때 f(x) = sum(num1, num2)와 같다. 여기서 함수내부를 자세히 보면

sum이라는 이름의 함수는 num1 과 num2를 입력받아서 num1+ num2를 더해주는 함수이다. 계산식은 sum 안에 들어 있는 { return 조건식} 형태로 이루어져 있다. 즉 function 키워드 뒤에 sum은 함수의 이름이 되고, num1과 num2는 우리가 입력하거나 주어진 입력값 return 뒤의 num1 + num2는 우리가 함수에서 계산할 조건식이나 계산식이고, 반환되는 return 값은 y값이 된다. 이와 같이 수학과 프로그래밍을 생각해 본다면 어떠한 방식으로 로직을 짤지 생각해 볼 수 있을 것 같다. 

수학 좀 열심히 할걸..

1. 깃 다운로드 

2. 깃허브 레포지토리 생성

3. 폴더 vscode로 열기 

4. 깃허브 사용 코드

1. 깃 다운로드 

구글 크롬에서 git이라고 치고 사이트에 들어가서 깃 다운로드 for window를 누른다. 맥북 유저는 macos를 누른다.

자신의 운영체제에 맞는 설치파일을 클릭해서 다운로드

2. 깃허브 레포지토리 생성

3. 폴더 vscode로 열기 

vscode에서 사용할 폴더를 열고 (ctrl + ~) 키를 입력하여 터미널을 연다. 

4. 깃허브 사용 코드

4-1 git init : 깃 init으로 사용할 폴더를 초기화한다.
4-2 git add . : 내가 작업한 작업파일을 동시에 올려주는 코드이다.
4-3 git commit -m "first commit" : 커밋메시지를 올리는 코드이다.

빨강 동그라미를 눌러 복사를 하고 자신의 git 레포지토리를 원격저장소에 등록한다.

4-4 git remote add origin https://github.com~~~

4-5 git push origin master : 자신이 설정한 마스터브랜치에 자신의 코드를 푸시하는 코드이다. 

푸시가 완료되면, 자신의 코드가 깃허브에 올라가게 된다.