TIL#01 생활코딩 JavaScript

 

01강

 

우리는 사용자와 상호작용하는 웹페이지를 만들고 싶다는 욕망이 생겼다.

 

HTML은 정적이다.

 

그래서 태어난 기술이 javaScript다.

 

무리한 비유를 해보자면

HTML이 정보라는 멈춰 있는 이미지를 그리는 것이라면 

JavaScript는 정보라고 하는 이미지를 마치 영화처럼 움직이게 하는 것이다.

 

02강

 

브라우저에서 오른쪽 클릭을 해서 검사라는 항목을 누르면 

엘리먼츠(elements)라고 써있는 것이 보이는데 

Elements는 태그라는 뜻이다.

 

/////

 

교훈

 

첫번째: 자바스크립트는 사용자와 상호작용을 하는 언어이다.

 

두번째: 웹브라우저는 한 번 화면에 출력되면 자기 자신을 바꿀 수 없지만

자바스크립트를 이용하면 바꾸는 것이 가능하다.

즉,'JavaScript는 HTML을 제어하는 언어'다 라고 하는 것이다.

 

이러한 특성이 웹페이지를 훨씬 더 동적으로, 다이나믹하게 만들어주는 것이다.

 

 

03강

기본적으로 JavaScript는 HTML 위에서 동작하는 언어다.

 

웹브라우저한테 HTML의 코드로 '지금부터 JavaScript가 시작됩니다'라고 알려주는 방법은

<Script>태그를 사용하는 것이다.

 

////////////////

 

<h1>JavaScript</h1>
<script>
  document.write('hello world');  <!-- 결과 : hello world -->
</script>

<h1>html</h1>
hello world      <!-- 결과 : hello world -->

 

자바스크립트로 적은 결과와 그냥 html로 적은 결과가 같으면 도대체 무슨 차이가 있냐고 할 수 있다.

 

하지만

 

See the Pen HTML과 JavaScript의 만남(script 태그) by egoing (@egoing) on CodePen.

 

1+1을 넣으면 HTML은 정적이기 때문에 영원히 1+1로 표시되지만

 

javascript는 동적이기 때문에 계산기처럼 동작할 수도 있다. 그 때문에 2가 나온다.

 

 

04강 

버튼을 만드는 태그는 <input>이다.

<input type="button" value="hi" onclick=:alert('hi')> 

<!-- type을 button으로 지정하면 버튼 모양이된다. -->
<!-- 글씨를 쓰고 싶으면 value라는 속성 값을 사용하면 된다.-->

 

 

HTML설명서에서는

 

1.onclick이라는 속성은 안에 javaScript를 사용해야한다. 

 

2.onclick의 속성의 속성 값은 웹브라우저가 기억하고 있다가

사용자가 onclick 속성이 위치하고 있는 태그를 클릭 했을 때

기억하고 있던 js코드를 js문법에 따라 해석해 거기 적혀 있는대로 웹브라우저가 동작할 것이라고 적혀있다.

 

 

웹브라우저 입장에서는 onclick 속성을 만나면

"alert('hi')를 기억하고 있다가 사용자가 이 버튼을 클릭하면 그 떄 실행해야지"

라고 생각하고 기다리다가 실제로 그런 일이 일어났을 때 실행 한다는 것이다.

 

이렇게 웹브라우저 위에서 일어나는 일들을 '이벤트(Event)'라고 한다.

 

웹브라우저에 일어나는 이벤트에는 무한히 많은 이벤트가 있을 것이지만 우리는 그 중에서 기념할만한

이벤트들을 10~20개 정도를 정해놨다. 

 

See the Pen HTML과 JavaScript의 만남 (이벤트) by egoing (@egoing) on CodePen.

onchange : 텍스트 안의 내용을 바꾸고 마우스 포인트를 바깥쪽으로 뺄 때 이벤트를 실행한다.

               바꾸지 않으면 실행되지 않는다.

 

onkeydown : 텍스트 안에 키를 다운하면 경고창이 나온다.

 

 

 

05강

 

우리는 JS를 실행하기 위해서 웹페이지를... 파일을 만들었다.

그런데 브라우저에서 오른쪽 클릭해서 검사 그리고 Console이라는걸 쓰면 

파일을 만들지 않고도 JavaScript 코드를 즉석에서 실행할 수 있다.

 

 

06강 데이터타입 - 문자열과 숫자

 

데이터 타입(자료형)

총 7개의 데이터 타입이 있다.

 

6개의 primitive(원시적인) 데이터 타입

1. Boolean

2. Null

3. Undefined

4. Number

5. String

6. Symbol( new in ECMAScript 6)

 

그리고 Object(객체)

 

///////////////////

 

Number(숫자)

String(문자 //정확하게는 문자열)

 

Number에서 아주 중요한 것은 연산이다.

 

+는

 

왼쪽에 있는 값과 오른쪽에 있는 값을 더해서 하나의 값을 만든다 -> 이항 연산자

 

이항 연산자 중에서도 산술을 하는 거기 때문에 ->산술 연산자

 

또 다른 산술 연산자는 여러가지가 있지만 사칙연산만 살펴보자.

 

2 -1 빼기

 

2*4 곱하기

 

6/2 나누기

 

String(문자 //정확하게는 문자열)

 

문자는 따옴표로 시작해서 따옴표로 끝나면 된다.

(큰 따옴표는 큰 따옴표로 끝내고 작은 따옴표는 작은 따옴표로 끝낸다.)

 

console

>"Hello world"

<"Hello world"

 

>'Hello world'

<"Hello world"

 

문자열에는 유용한 기능들이 있다.

 

console

>'Hello world'.length

<11

 

>'Hello world'.toUpperCaser()

<"HELLO WORLD"

 

>'Hello world'.indexOf('O')

<-1 // 찾을 수 없다는 뜻

 

> 'Hello world'.indexOf('o')

<4 // 0, 1, 2, ,3 ,4 - 4번째에 o이 있다는 뜻

 

> 'Hello world'.indexOf('world')

<6 // 6번째에서 world라는 문자열이 시작된다는 뜻

 

> '        Hello         '

< "        Hello         "

> '        Hello         '.trim

< "Hello" // 공백을 없애줌

 

 

///////////////////////

 

Console

 

>1+1 (숫자 데이터 타입)

<2 

 

>"1"+"1" (문자열 데이터 타입)

<"11"

 

 

7강 대입 연산자

 

'변수(variable) = 바뀔 수 있는 어떤 값'

 

console

>x = 1 ;

<1

>y = 1;

<1

>x+y;

<2

 

여기서 '=' 대입연산자라고 한다.

(오른쪽의 항의 값을 왼쪽의 변수에 대입한다. )

대입 연산자는 또 하나의 특징이 있는데 좌항과 우항을 결합해서 우항의 값을 만들어 낸다는 뜻이다.(몰라도 된다)

 

console

>1=2;

(x) uncaught ReferenceError: Invalid left-hand side in assignment

 

1에 2를 대입했다.

1은 언제나 1이기 때문에 에러가 뜨는 것이다.

 

X라고 하는 것은 대입 연산자를 통해 값이 바뀔 수 있는 변수지만

 

숫자 1은 언제나 1이기 때문에 Constant(상수)라고 부른다.

 

//////////////////////////////////

 

변수는 쓰는 이유는 무엇일까?

 

변수의 힘을 느껴볼 수 있는 아주 불완전한 예제를 하나를 보자.

3:12부터 예제

 

Console창에서 실행을 유보하고 싶을 때는 Shift+enter를 치면 된다.

 

변수를 사용할 때는 가급적 var이라는 키워드를 쓰는게 좋다.

없어도 비슷하지만 var을 쓰는게 조금 더 좋은 습관이다.

 

var name = 'leezhe'; // <- 이렇게 쓰자!

name = 'leezhe'; // <- 이렇게 써도 되지만...

 

이것의 장점과 단점을 알기 전까지는 그냥 항상 var을 쓰자.

 

 

 

08강 웹브라우저 제어

 

12강 제어할 태그 선택하기

See the Pen 주간/야간 모드 by egoing (@egoing) on CodePen.

document.querySelector(selectors); // 이 문서에서(document) 질의하다(query) Selector(css의 selector)

document.querySelector(selectors).style.backgroundColor ="color"; //배경색 바꾸기