3) WEB - Javascript

HTML, CSS - 정적
JavaScript - 동적 - 사용자와 상호작용하는 언어이다.

- javascript가 HTML을 제어하는 언어다. 이러한 특성이 웹페이지를 동적으로 만들어준다. 

elements : 태그 
-- style 속성값으로는 무조건 CSS가 온다.  [중요한 이야기]
- javscript는 HTML 위에서 시작하는 언어 - document.write("") : HTML 화면에 글씨 출력 - javascript를 사용하기 위해서는 <script> 태그를 쓴다. 

---

event(사건)
onclick이라는 속성은 javascript가 와야 한다라는 것을 전제로 하고 있따. 
javascript는 웹브라우저가 값을 기억하고 있다가 클릭을 했을 때 동작할 거 라는 의미를 담고있다.

검색이 가장 중요하다. (javascript keydown event attribute)

---

크롬 개발 도구 (Console) : javascript를 Spring에서 쓰지 않고 테스트 크롬 개발 도구에서 테스트 할 수 있다.
console에서 실행시키는 javascript는 웹페이지에서 실제로 동작한다.

-- Elements에서 Esc를 누르면 Console 창을 show/hide 할 수 있다.
-- 나의 현실의 문제를 가볍게 가볍게 해결하는 방법을 찾는걸 했으면 좋겠다. 
(목표를 너무 크게 잡으면 배우는 입장에서 힘들 수 있음)

[javascript - 6.데이터 타입 - 문자열과 숫자]
- Number (숫자)
- String (문자열)

-산술연산자 
+, -, *, %(나머지), /(나누기) : 이항 연산자(왼쪽 데이터와 오른쪽 데이터를 산술한다는 의미에서)
- 문자
문자는 "" or '' 를 쓴다. 

----- 이해하는 것보다 익숙해는게 중요하다~!
- 데이터 타입을 정확히 하는것을 중요하게 생각해야한다. 

------------------------------------[프로그래밍은 언제나 극단적으로 생각해야 한다]-----------------------------------------
[변수와 대입연산자]
x = 1
x : 변수 
= : 대입연산자

* console에서 스크립트를 실행시키지 않고 유보하고 싶을 때는 shift + enter를 누른다.
- var : variable
- 상수 : 변할 수 없는 값

---

[제어할 태그 선택하기]

---

[자바스크립트가 무엇인가에 대해 이론적으로 다가가기] 

- javascript는 컴퓨터언어이면서 컴퓨터프로그래밍 언어이다.
- 프로그램 : 순서라는 의미가 있다. 
- 프로그래밍 : 순서를 만드는 행위
- 프로그래머 : 순서를 만드는 사람

순서대로 프로그램을 제작, 반복되는 과정 
HTML은 화면을 묘사하는 목적의 언어라서 시간의 순서에 따라 무언가를 할 의미가 없다.
Javascript는 시간의 순서에 따라서 웹브라우저의 여러 기능이 실행되어야 하기 때문에 
프로그래밍이라는 형태를 띄고 있고 이러한 내용이 HTML과 자바스크립트를 다르게 보게 하는
중요한 특징이다.

하나의 프로그램이 조건에 따라서 다른 순서의 기능들이 실행되도록 하는것 
toggle button: 하나의 버튼으로 두개의 기능을 수행하는 것

[리팩토링(refactoring) : 팩토링(공장) 이라는 의미]  
- 코드를 효율적으로 만들어서 코드의 가독성을 높이고 유지보수를 쉽게 하고 중복을 낮추는 
방향으로 코드를 개선하는 작업

코딩을 잘하는 방법 중 하나는 중복을 끝까지 쫒아가서 제거한다.!!!!

[배열과 반목문]
1.배열 

2.배열을 이용해서 반복적은 작업을 할 것

 -- while은 ()안이 false가 될 때까지 실행된다.
while(true or false){ }

즉, 반복문은 순서대로 실행되는 실행 순서의 흐름을 제어한다. (if문(조건문)과 함께)
반복문에서는 언제 종료시킬 것인가를 잘 생각해야한다.

---

[함수(FUNCTION)]

함수 : function  - 비유(수납상자 : 코드가 많아지면 코드를 잘 정리정돈 할 도구가 필요함 그것이 함수)
function 
Basic
Parameter & Argument
Return

[반복문을 쓸 수 없는 경우] 
 -연속적이지 않게 반복될 떄

중복이 많이 발생하고 그것이 연속적이지 않을때 
  ==> 함수가 필요하다. (함수 안에는 재사용하고 싶은 코드를 넣는다.)  

매개변수(parameter)와 인자(argument)
함수 == 자판기
함수 == 입력, 출력

입력 = parameter, argument 
출력 = return

인자(sum(2, 3), 2와 3은 인자)와 매개변수(function sum(left, right), left와 right가 매개변수이다.)로

출력물을 다르게 만들 수 있다.

[표현식(expretion)] 
i = 1+1 <= 표현식
함수를 예를 들면 
function sum2(left, right){
    return left+right;
}

document.write(sum2(2,3)+'<br>');
document.write('<div style="color:red">'+sum2(2,3)+'</div>');
document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

---

[객체 : Object]
객체는 굉장히 중요하고 어렵다. 
프로그래밍에서 함수, 객체가 큰산...?
객체는 함수와 대립되는 개념이 아니라 함수라는 것 기반 위에서 객체라는 것이 존재

객체가 가지고 있는 가변적인 얼굴들 중 하나만 말해줄것임
하나의 객체의 특성, 기능에 집중해서 객체가 이런거구나 하는 느낌을 가지고 앞으로 나아가다가 
객체의 여러가지 얼굴들을 하나하나 익숙해지는게 좋을 것 같다. 

객체의 얼굴 중 하나 

- 함수가 많아지면 함수와 연관되어 있는 변수들이 많아지면 복잡성의 한계에 도달하게 된다.
바로 그러한 한계사항에서 서로 연관된 함수와 서로 연관된 변수들을 그룹핑하여 정리정돈하기 위한 도구
- 함수만으로는 정리정돈이 되지 않을 때 사용

객체에 속해있는 함수는 메소드라고 한다. 
배열은 순서에 따라서 정보를 정리정돈한다는 특징이 있음.
배열은 정보를 담는 그릇 이면서 정보가 순서대로 정리된다는 특징.
순서 없이 정보를 저장할 수 있는 것 = 객체

객체 : 이름이 있는 정리정돈 상자라고 생각하자
객체는 중괄호 
배열은 대괄호 

[객체 만들기]  
var coworers = {
     "color" : "color"
}

[객체 데이터 가져오기]

coworers.color;

[객체에 데이터 추가]

coworers.bookeeper = "duru";coworers.bookeeper = "duru";
coworers["data scientlist"] = "taeho";

[javascript object iteration]  
for(var key in coworkers){} : coworkers의 key 값을 변수값으로 가져옴

[프로퍼티와 메소드]  
객체에는 함수 담을 수 있다.
객체에 있는 변수를 property라고 부른다. 
coworkers.showAll = function(){}

---