JavaScript. day1

JavaScript

: 프로그래밍 언어이다. 서버개발, 어플리케이션 개발 등 다양한 목적을 위해 사용할 수 있는 언어이지만, 주된 분야는 웹 개발이다.
html이 웹 콘텐츠를 정의하고 css로 웹 콘텐츠를 스타일링하면, 웹 사이트의 동작이나 상호작용을 정의한다.

* JavaScript의 역할

• 웹브라우저 및 하위 객체가 가진 기능을 구동한다.
• html/css 를 통해 렌더링된 화면을 조작할 수 있다.

* JavaScript의 작성 위치

• html 문서 내부에 작성하기
  : html 내부에 작성할 땐태그의 안쪽 하단에

* JavaScript의 동작원리

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

• 입력 : 객체에게 어떤 작업을 수행하라는 명령을 전달한다.
• 처리 : 객체가 주어진 작업을 수행한다.
• 출력 : 객체가 작업을 수행한 결과를 사용자에게 반환한다.

JavaScript에는 다양한 객체 이름이 미리 정의되어 있어서 사용자는 이를 어떻게 사용하는지만 알고 있으면 된다.

* 객체다루기

: JavaScript가 제공하는 객체 이름을 선택하고, 뒤에 . 을 붙인 다음 전달하고자 하는 명령을 적어준다.
그러면 입력, 처리, 출력의 절차가 시작된다.

• 객체 명령의 두가지 유형
  객체.데이터 : 객체가 가지고 있는 숫자, 문자 등의 다양한 데이터를 사용할 수 있다. 객체가 가지고 있는 데이터(정보)를 가리켜 일반적으로 '속성'이라한다.
  객체.기능() : 객체가 가지고 있는 다양한 기능을 수행할 수 있다(괄호 필수). 객체가 가지고 있는 기능을 가리켜 일반적으로 '메소드'라 한다.

* 주석

• 한줄 주석: //
• 여러줄 주석: /* */

* 세미콜론 ; 의 기능

: 명령문 끝에 붙이게 되면 하나의 명령문이 끝났다는 것을 의미.
명령문은 한줄에 하나씩만 쓰는것이 좋은데 한줄에 두개를 쓰고싶다면 ; 으로 구분하고 쓰면된다.

* window

• window.alert(x) : 웹브라우저에게 '경고창에 x라고 쓴 다음 화면에 띄워줘' 라는 명령을 전달한다. x에는 사용자가 원하는 내용을 입력하면 된다.
  Ex) window.alert('warning')

* 콘솔(console)

: 브라우저의 디버깅 콘솔을 의미한다. 콘솔은 브라우저 안에 내장된 브라우저의 하위 객체이므로 브라우저 객체를 통해 접근할 수 있다.
웹브라우저의 개발자 도구를 열면 메뉴 중 콘솔 이라는 항목이 존재하는데, 이것을 누르면 나타나는 화면이 디버깅 콘솔이다.
디버깅 콘솔을 이용하면 자바스크립트 코드를 테스트 할 수 있다.

• console.log(x)
  : 디버깅 콘솔에게 '콘솔창에 x라고 써줘' 라는 명령을 전달한다. x자리에는 사용자가 원하는 내용을 입력하면 되는데, 자바스크립트 문법으로 표현될 수 있는 데이터만이 들어갈 수 있다.

! 꿀팁 1
: 우리가 웹브라우저에 접근할 수 있게 해주는 객체 window는 console을 비롯한 다양한 하위 객체 및 데이터, 메소드 등을 포함하고 있는데, 사용자는 편의를 위해 window.을 생략한 채로 코드를 작성할 수 있다.

* 자료형

: 자바스크립트에는 데이터를 표현할 때 사용하는 몇 가지 형식이 정의되어 있는데, 이러한 형식을 통틀어 일컫는다.

• 숫자
  : 정수와 실수로 구분. 더하기 빼기 곱하기 나누기 나머지 등 산술 연산이 가능하다. 두 개의 데이터를 피연산자로 받아서 하나의 숫자 데이터를 결과로 반환한다.
  ex) 정수와 실수를 콘솔창에 출력하기
  정수 : console.log(88)
  실수 : console.log(1.8)

* 변수

: 데이터에 붙이는 이름표이다. 변수를 이용하면 이름표를 붙여 둔 데이터를 기억해두었다가 필요할 때마다 재사용할 수 있게 된다.
변수의 선언과 초기화는 동시에 진행할 수도 , 따로 진행할 수도 있다.
변수가 생성되고 나면, 변수를 지정된 데이터 대신 사용할 수 있다.

• 변수의 선언
  let 변수명 = 데이터;
• 변수의 초기화 : 만들어진 변수에 첫 데이터를 지정하는 작업
  변수이름 = 데이터;

변수는 데이터를 기억하기 위해 사용한다. 변수는 한번에 하나의 데이터만 기억할 수 있으며, 기억하고 있는 값을 바꿔가며 사용할 수 있다.

* 변수에 데이터값 대입

: 대입 연산자 ' = ' 기호를 사용한다. 산술연산자와 같이 사용도 가능하다.
let 변수명 = 데이터1; //선언과 초기화를 동시에.
변수명 = 데이터2; // 새로운 데이터2를 대입
변수명 += 데이터3; // 변수명에 들어있는 값에 데이터3의 값을 더한 값을 변수에 저장한다.

* 변수명 규칙

• 오직 문자와 숫자, 그리고 기호 $ , _ 만이 포함될 수 있다.
• 변수명의 첫 번째 글자로 숫자가 올 수 없다.
• 이미 다른 뜻을 가지고 있는 단어(키워드)는 변수명으로 사용할 수 없다.

* 상수

: 수식에서 변하지 않는 값을 뜻한다. 변수와 반대되는 것으로 상수는 단 하나의 데이터만을 위해 사용하는 이름표로써 값의 변경이 불가능하다.
상수도 변수처럼 지정된 데이터 대신 사용할 수 있다. 상수 이름 짓기 규칙은 변수와 동일하다.
상수를 만들 때는 선언과 동시에 초기화를 해주어야한다. 그러지 않으면 데이터를 지정할 수 없다.
상수는 자신이 선언될 때 지정된 데이터로 고정된다. 선언 이후 데이터를 대입하려고 하면 에러가 발생한다.

• 상수의 선언
  const 상수명 = 데이터;

* 문자열 자료형

: JavaScript에서 문자열이란, '기호의 순차 수열'을 뜻한다. 문자, 숫자, 특수문자 등 다양한 기호를 조합해 만들 수 있는 '기호의 집합'이며, 따옴표로 시작해 따옴표로 끝나는 데이터이다.
큰따옴표, 작은따옴표 모두 가능하다. JavaScript도 문자열 연산 - 더하기 연산이 가능하다.
JavaScript에서 숫자와 문자열이 함께 연산되면 숫자가 문자열로 자동 변환되어 문자열 연결이 이루어진다.
Ex)
let string1 = '문자열에는 기호가 들어간다'
let string2 = "123456.."

* window.prompt(x)

: window 객체의 prompt(x) 메소드는 사용자로부터 문자열을 입력받을 수 있는 다이얼로그 박스를 열어주는 메소드이다.
괄호안에 x는 다이얼로그 박스에 띄울 메시지(문자열)을 전달할 수 있다.
prompt(x) 메소드는 실행 시에 사용자로부터 문자열을 입력받고, 입력받은 문자열을 자신이 사용된 곳에 그대로 '반환'한다.
즉, 메소드가 문자열로 바뀌게 된다.
Ex)
prompt("출력해줘")
const data = prompt("아무거나 써봐요") -> 문자열 입력하면 입력한 문자열이 상수값으로 들어간다.

* 템플릿 리터럴

: 문자열을 표현하는 또 다른 방법으로, 따옴표를 이용해 표현하는 방법에 비해 조금 늦게 추가된 문법이다.
템플릿 리터럴은 백틱()을 이용해 표현한다. 템플릿 리터럴은 반환값이 존재하는 자바스크립트 코드, 즉 표현식을 내장할 수 있는 문자열 표현법이다. 이는 문자열 내용에 데이터를 삽입한다는 것을 의미한다. 템플릿 리터럴로 표현한 문자열 내부에 플레이스홀더(${})를 기입하고, 그안에 데이터를 기입하면 데이터는 문자열의 멤버가 된다. 플레이스홀더에는 데이터를 반환하는 메소드 또한 데이터와 같이 취급할 수 있다. Ex) const str =이게 백틱`

---

const data1 = "데이터"
const str1 = 문자열 중간에 $[data1] 삽입하기

---

const data2 = 100
const str2 = `숫자도 문자열로 바꿔준다 : ${data2} "

---

const str3 = 메소드 데이터 반환해서 문자열로 만들기 : ${prompt('이건어떤데')}

* 문자열 포매팅

: 템플릿 리터럴을 이용해서 데이터를 삽입하고 삽입된 데이터를 이용해 문자열을 만드는 것을 말한다.

* undefined & null

: undefined는 아직 데이터가 정의되지 않음을 나타내고, null은 의도적으로 데이터가 없음을 나타내기 위해 사용되는 표현수단이다.
undefined Ex)
let num
console.log(num)

---

null Ex)
let num = null
console.log(num)

* boolean

: 숫자, 문자열과 같은 데이터 타입 중 하나이다. true와 false 단 두가지 값만 존재한다.
참과 거짓 여부를 나타내기 위해 사용하는 데이터이다. 파이썬과는 다르게 소문자로 써야한다.

* window.confirm(x)

: 사용자에게 확인과 취소 둘 중 하나를 선택하게 하고 선택에 따라 true 또는 false값을 반환하는 명령이다.

* DOM(Document Object Model)

: 브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성한다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링한다.
DOM은 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스이다.

* window.document

: 창이 포함한 문서를 참조한다. 즉, window.document 는 현재 브라우저에 렌더링되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다.
즉, DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다. 이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다.

* querySelector & textContent

: document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소를 반환한다. 일치하는 요소가 없으면 null 데이터를 반환한다.
인자로 전달되는 선택자는 문자열 타입의 '유효한 css 선택자'를 의미한다.
textContent 속성은 해당 객체가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다.
textContent를 통해 요소가 포함한 텍스트를 읽을 수도, 변경할 수도 있다.

querySelector Ex)
document.querySelector("p")
document.querySelector("#text")
document.querySelector(".text")

---

textContent Ex)
const p = document.querySelector("p")
console.log(p.[textContent])
p.textContent = "텍스트를 이걸로 바까라"