쵸화의 코딩배우기

document.createElement

지정된 이름의 HTML요소를 만들어 반환하는 메소드이다.
HTML요소가 만들어지고 또 반환되었다고 하여 해당 요소가 바로 웹브라우저 화면에 추가되는 것은 아니다.
자바스크립트 단계에서 만들어져 있는 요소를 화면에 표시하는 작업을 추가로 해줘야한다.

예) document.createElement(‘div’)
document.createElement(‘p’)

append(‘’)/appendChild(‘’)

appendChild는 DOM 내 개별요소(노드)에 자식 요소를 추가할 때 사용

사용방법 : target.appendChild(추가할 자식요소)

append는 타겟요소에 자식요소를 추가한다는 것은 같으나 차이점도 있다.

차이점

• append는 요소에 노드객체 또는 문자열을 자식요소로 추가할 수 있다
  appendChild는 노드 객체만을 추가할 수 있다.
• appendChild는 추가한 자식노드를 반환한다.
  append는 반환데이터가 없다.

append()/appendChild()를 여러번 반복하는 법은 앞에서 배운 반복문을 활용하면된다.

DOM

렌더링 (Rendering)

웹 브라우저는 HTML문서를 해석하고, 화면을 통해 해석된 결과를 보여줌
해석한 HTML코드를 화면을 통해 보여주는 과정

*브라우저는 HTML코드를 해석해서 요소들을 트리형태로 구조화해 표현하는 문서(객체)를 생성한다.
이를 DOM이라고 하며 브라우저는 DOM을 통해 화면에 웹 콘텐츠를 렌더링

DOM(Document Object Model, 문서 객체 모델)

웹콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에
대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스(interface)

DOM 접근 방법

브라우저 객체 window의 document 속성은 창이 포함된 문서를 참조한다.
즉, window.document는 현재 브라우저에 렌더링되고 있는 문서를 의미
이 속성을 이용하면 해당 문서에 접근할 수 있다.

querySelector("선택자")

선택자를 인자로 전달받아 해당 선택자와 일치하는 문서내 첫번째 요소를 반환

• 일치하는 요소가 없는 경우 → null 값을 반환합니다.
  인자로 전달되는 선택자는 문자열 타입의 ‘유효한 CSS선택자’를 의미한다.

요소.textContent

해당 객체(요소)가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.
요소가 포함된 텍스트 콘텐츠를 받아오거나(읽거나) 변경할 수 있다.

• 새로운 텍스트를 해당 요소에 할당시킬 수 있습니다.

DOM 메소드 및 속성

DOM요소를 선택하는 매서드(document)

• .querySelector(’선택자’)
  선택자를 만족하는 첫번째 요소를 반환(선택)
• .getElementById(’id속성값’)
  id속성값을 가진 요소를 반환(선택) (id: 고유값)
• .querySelectorAll(’선택자’)
  선택자를 만족하는 모든 요소들을 배열에 담아 반환(선택)
• .getElementsByClassName(’class명’)
  class명을 가진 모든 요소들을 배열에 담아 요소를 반환(선택)
• .write(x)
  전달 인자로 전달한 내용을 문서에 추가 작성

선택한 요소에 접근하는 메소드(Element)

• .textContent
  요소가 가진 텍스트 콘텐츠를 반환
• .innerHTML
  요소 내에 쓰여진 HTML코드를 텍스트 형태로 반환
• .className
  요소의 class 속성값을 반환
• .style
  요소의 style 관련 속성 값들을 반환
• .title
  요소의 title 속성값을 반환합니다.

Java Script(자바스크립트)

HTML은 마크업 언어,CSS는 스타일 시트언어이다.
자바 스크립트는 로직을 더해서 동작 구현 등을 하는 프로그래밍 언어이다.
자바스크립트는 서버개발, 어플리케이션 개발 등 다양한 목적을 위해
사용할 수 있는 팔방미인 언어이지만, 주된 활동 분야는 역시 ‘웹 개발’ 이다.

웹 개발이란?
인터넷을 통해 서비스되는 웹사이트를 개발하는 일!

자바스크립트의 역할

웹사이트 개발에 있어, 자바스크립트의 역할은
-웹브라우저 및 하위 객체가 가진 기능을 구동하거나
-HTML/CSS를 통해 렌더링된 화면을 조작할 수 있다.
위와 같은 역할을 정상적으로 수행하기 위해서는,
자바스크립트 코드를 올바른 위치에 작성하는 것이 중요하다.

자바스크립트 작성 위치

웹페이지에 자바스크립트 코드를 적용시키는 방법으로는 두가지가 있다.
-HTML문서 내부에 작성하기
-자바스크립트 파일을 만들고, 그 안에 작성한 코드를 HTML문서에 연결하기

자바스크립트 동작원리&출력

스크립트 동작 원리

자바스크립트는 프로그래밍 언어로써 소프트웨어적 대상에게 명령을 내리는
역할을 수행한다. 여기에서 소프트웨어적 대상이란,
웹브라우저, 웹 요소, 웹 스타일 등을 의미한다.
명령을 내리고픈 대상에 자바스크립트 명령을 전달하면, 다음 절차대로 작업이 이루어진다.
입력 → 처리 → 출력
자바스크립트 명령문으로 어떤 처리를 지시하고자 하는 대상을 가리켜
‘객체’라고 한다.

입력, 처리, 출력

• 입력: 객체에게 어떤 작업을 수행하라는 명령을 전달한다.
• 처리: 객체가 주어진 작업을 수행한다.
• 출력: 객체가 작업을 수행한 결과를 사용자에게 반환한다.
  →화면에 결과를 보여주거나 데이터상태를 보여주거나 변경하는 것도 반환

자바스크립트의 모든 명령문은 대부분 위와 같은 절차에 따라 수행한다.
그리고 자바스크립트에는 다양한 객체
(소프트웨어적 대상= 웹 브라우저, 웹 요소, 웹 스타일)이름이 미리 정의되어 있어 사용자는 이를 어떻게 사용하는지만 알고 있으면 된다.

객체 다루는 방법

자바스크립트가 제공하는 객체 이름을 선택하고, 뒤에 점(.)을 붙인 다음 전달하고자 하는 명령을 적어준다. 그러면 입력,처리,출력의 절차가 시작된다.
객체 명령의 두 가지 유형

구체적인 예 한가지
웹브라우저는 소프트웨어 세계에 존재하는 사물, 즉 객체이다.
자바스크립트-웹브라우저에 명령을 전달할수있는 객체이름이 window로 정의

windoe.alert(‘X’)

windoe.alert(‘X’)명령문은 웹브라우저에게 ‘경고창에 X 라고 쓴 다음 화면에 띄워줘!’라는 명령을 전달한다. X에는 사용자가 원하는 내용을 입력하면된다
예)windoe.alert(‘warn’) - ‘warn’이라고 쓰여진 경고창이 나타남

주석

1. //주석이다 – 주석을 한 줄밖에 쓸 수 없다.
2. /주석이다/ - 주석을 여러 줄에 걸쳐 쓸 수 있다.
3.  

콘솔 출력 & 자료형 개념 소개

콘솔(console)

브라우저의 디버깅 콘솔을 의미한다.
브라우저의 하위 객체이므로 브라우저 객체를 통해 접근할 수 있다.
-객체 뒤에 .을 찍으면 객체가 가지고있는 데이터에 접근할 수 있다.

디버깅 콘솔

웹브라우저의 개발자 도구를 열면 나오는 ‘콘솔’메뉴가 있다.
이때 나타나는 화면이 디버깅콘솔
-자바스크립트 코드를 테스트(점검)할 수 있다.
*웹브라우저에 접근할 수 있게 해주는 객체 window는 콘솔을 비롯한 다양한 하위 객체 및 데이터,메소드 등을 포함하고 있다.
사용자의 편의를 위해 window.를 쓰지않아도 있는 걸로 인식한다.

colsole.log(‘X’)명령문

디버깅 콘솔에게 ‘콘솔창에 X라고 써줘’ 라는 명령을 전달한다.
X에는 사용자가 원하는 내용을 입력하면 되지만 자바스크립트 문법으로 표현할 수 있는 테이터만을 입력할 수 있다.

colsole.log(‘X’)
콘솔.기록한다.(자바스크립트에서 문법적허용 유형 데이터-대표적;숫자)

자료형

자바스크립트에 데이터를 표현할 때 사용하는 몇 가지 형식이 정의되어 있다.그 형식들을 통들어서 ‘자료형’이라고 한다.
(주요 자료형; 숫자,문자열, 불리언, 다양한 목적과 형태의 객체)

자료형(숫자)

정수(양의정수, 음의 정수)와 실수(소수까지 모두 포함)로 구분할 수 있다.

-산술연산도 물론 가능하다. 두 개의 숫자 데이터를 피연산자로 받아서 하나의 숫자데이터를 결과로 반환(명령문이 결과값처럼 사용되는 것)한다.
-여러개 늘어져있을 경우 일반 연산처럼 곱셈, 나눗셈을 우선시한다.

*typeof : 뒤에 오는 데이터의 타입을 알려줌
예)typeof 3 : 3의 타입, 따라서 숫자(number)

자바스크립트에는 변수 생성시 사용하는 3가지가 있다.
그 3 가지에는 'let', 'var', 'const'

하지만 이 3가지 중에서도 더이상 사용하지 않는 것이 있는데,
그것이 바로 오늘 이야기해볼 'var'이다.

기존에는 var를 적극 활용하고 사용해왔지만,
2015년 ES6에서 새 문법인 let과 const를 지원하게 되면서 var의 사용을 지양하라고 했다고 한다.

var에게 어떠한 문제가 있어서 새로운 문법을 제시하면서까지 사용을 지양하게 되었을까?

1.변수의 재선언

var는 같은 이름의 변수를 재선언 할 수 있다.
이렇게 되면 보기에도 복잡하고 실수를 할 수도 있는 상황이 발생한다.
실수를 하였을 때 한 눈에 확인하기에 어려움이 있다.

let과 const는 같은 이름의 변수의 재선언을 허용하지 않기 때문에
이러한 상황을 막으며 코드의 안정성을 높일 수 있다.

2.호이스팅(hoisting)

var로 선언된 변수는 선언 이전에 적혀있는 부분에도 접근할 수가 있다.
이 상황은 var를 사용하여 생긴 부작용이라고 볼 수 있다.
let과 const는 이를 자체적으로 막아주어 의도하지 않은 상황을 막을 수 있다.

3.스코프의 문제

var는 함수스코프를 가지며, 블록스코프는 지원하지않는다.
즉, 블록 내부에서 선언한 var 변수를 블록 외부에서도 접근할 수 있다.
이렇게 될 경우 의도치 않은 변수를 사용하게 되거나, 변수의 충돌이 일어날 수 있다.
let과 const는 블록 스코프를 따르게 되면서 이러한 문제점을 막았다.

정리해서 생각해보면 var는 옛날에 사용하던 옛날언어이다.
여러 부작용이나 단점들을 피드백하여 고친 후 새로 지원된 언어가
let과 const라고 생각하면 된다.