JavaScript

1.javascript의 개념

1. Web Page가 User와 Dynamic하게 상호작용하게하기 위함
2. Computer Language and Programing Language
   (program:음악회에서 시간의 흐름에 따라 연주되는 음악의 순서)

2.javascript

1. <input type="button" value="night" onclick="
   document.querySelector('body').style.backgroundColor='black';
   document.querySelector('body').style.color='white';
   "
   ---->이 부분에 javascript가 와야한다.
2. <script>
     document.write('hello world');
   </script>
3. event:클릭,변화(onclick,onchange,onkeydown...)
   <input type="button" value="hi" onclick="alert('hi')">
   <input type="text" onchange="alert('changed')">
   <input type="text" onkeydown="alert('key down!')">
4. Console:해당 Web Page에서 실행.
   Inspect에서 Elements 클릭 후 ESC = Console창 추가
   한번 실행했던 코드는 화살표-위 누를시 다시 나타남.
   실행 유보 시 (Shift + Enter)
   Console에서 document.querySelector(' ')로 검색 가능
   Console.log():가로 안에 있는걸 콘솔에서 출력
5. JavaScript에서는 ' '사이가 문자
   ' '.length:문자의 개수
6. Data Type(자료형)
   1.Number:이항 연산자(+ - * /)
   2.String:" "or' '
   3.Boolean: true or false 단 2개로 이루어진 자료형
   4.Symbol:
   5.Object:
   6.Undefined:
   7.Null:
   
7. String의 Properties
   ' '.length:문자의 길이
   ' '.toUpperCase():소문자를 대문자로
   ' '.indexOf():해당 문자가 몇번째부터 시작되는가(-1:없음,0:첫번째)
   ' '.trim():문자 중 공백 없애기
8. Number와 Srting의 덧셈 결과의 차이
   1 + 1 = 2
   "1" + "1" = "11"

3.Variable(변수)와 대입/할당 연산자

1. = : 좌우항을 결합해서 우항의 값을 만들어낸다.
2. Constant <-> Variable
3. 변수 사용시 var을 앞에 붙이는 습관 (이유를 알때까지)
   var name = 'leezche';

4.Conditional statements(조건문)

1. Comparison operator(비교 연산자):
   == : equal to
   === : equal value and equal type
   != : not equal
   !== : not equal value and or not equal type
   > : greater than
   < : less than
   >= : greater than or equal to
   <= : less than or equal to
   좌항과 우항을 결합하여 Boolean data(T/F)를 만드는 이항 연산자
   1 === 1 은 Number가 아닌 Boolean이다.
2. if(boolean){
     document.write("2");
   } else{
     document.write("3");
   }
   Boolean값이 true면 2,false면 3
3. if(여기는 JavaScript)

5.Refactoring(리팩토링)

1. this : 자신
   document.querySelector('여기가 if가 포함된 태그일 경우')
2. 중복의 제거
   var target = document.querySelector('body');

6.Loop(반복문)

1. Array(배열):순서가 있는 수납상자
   var coworkers = ["egoing","leezche"]
   document.write(coworkers[0]); ---> egoing
   document.write(coworkers.length); ---> 2
   document.write(coworkers.push("james"); ---> 맨 뒤에 추가
2. Loop(반복문)
   var i = 0
   while(boolean:1<3){
     i = i+3;
   }
3. Array + Loop
   var coworkers = ['egoing','leezche','duru','taeho','alex','merry'];
   var i = 0;
   while(i<coworkers.length){
     document.write('<a href="html.html'
     + coworkers[i] + '">' + coworkers + ' </li>');
     i = i + 1; }
4. document.querySelectorAll(): Nodelist를 출력(태그,태그.클래스 등)
5. var mode = document.querySelectorAll('a');
   var i = 0;
   while(i<mode.length){
     mode[i].style.color='powderblue';
     i = i + 1;
   }

7.Function(함수)

1. function nightDayhandler(){
     var mode = document.querySelectorAll('a');
     var i = 0;
     while(i<mode.length){
     mode[i].style.color='powderblue';
     i = i + 1;
   }
2. <input onclick="
     nightDayHandler(this);
   ">
   여기서 this란 nightDayHandler 함수가 속한 태그 input
3. this는 태그 안에 있는 상태에서만 태그 자신을 가리키고
   만약 this를 함수로 만들어 올리면 객체를 가리키게 된다.
   (Web Browser에서는 Window)
   따라서,this를 다른 '매개 변수'로 바꿔주고
   함수에 (this)를 넣어주면, 함수가 실제로 작동할 때,
   '매개 변수'에 this를 대입시켜서 계산한다.
   따라서 this = document.querySelector('#night_day')/ 자신이 속한 tag의 id

8.Object(객체)

1. Programing의 양대산맥:Function vs Object
   Function의 기반 위에 Object가 존재(심화)
2. 서로 연관된 Function과 Variable을 같은 이름으로 Grouping해서 정리하기 위한 도구.
3. document(객체).querySelector()(객체에 속한 함수=Method)
4. Object literal(Object 만들때 사용하는 기호)
   Object = { } (중가로)
5. Object 만드는 법
   var coworkers = {
     "programmer" : "egoing",
     "designer" : "leezche"
   };
6. Object 불러오는 법
   document.write("programmer: " + coworkers.programmer +"<br>");
7. Object에 Property 추가하는 법
   coworkers.bookkeeper = "duru";
   또는,coworkers["data scientist"] = "taeho";(띄어쓰기 사용가능)
8. Object Iterate(반복)
   <script>
     for(var key in coworkers){
       document.write(coworkers[key] + '<br>')
   }
   coworkers라는 변수가 가지고 있는 키값들을 가져오는 반복문
   Objcet = key, Array = Index
9. Object에서 Function정의법
   1.coworkers.showAll = function(){
   
   }
   2.var showAll = function(){
   
   }
   3.function showAll(){
   
   }
10. 결론
    1.Object에 소속된 값으로 function 지정 가능.
    2.Object에 소속된 function을 Method라 하고 Object에 소속된 Variable을 Property라 한다.
    coworkers.showAll = function(){
      for(fanxi in this){
        document.write(fanxi + ':' + this[fanxi] + '<br>');
      }
    }

9.library

1. library: 땡겨오는 것 / Framework: 직접 들어가서 작업
2. jQuery
3. UI(User Interface) / API(Application Programing Interface)

탈웹브라우저,탈웹

1. 웹페이지 스크립팅 - DOM
2. 웹서버: node.js
3. Google apps script
4. JavaScript ~('Hello world'); => web browser = alert, node.js = write, SpreadSheet = msgBox
   언어라는 공통 분모로 다른 환경에서 다른 일들을 할 수 있다. 환경에 따라 언어가 달라진다.
   따라서 JavaScript의 문법을 아는 상태에서도 각 환경에 맞는 단어를 구사할 줄 알아야 한다.
5. JavaScript로 할 수 있는 일들
   

   웹페이지 스크립팅 - DOM
   서버 측 스크립팅 - node.js
   브라우저 확장기능
   -Google Chrome extensions
   -Opera extensions
   -Apple Safari 5 extensions
   -Apple Dashboard Widgets
   -Microsoft Gadgets
   -Yahoo! Widgets
   -Google Desktop Gadgets
   -Serence Klipfolio
   Adobe PDF
   Tools in the Adobe Creative Suite,
   -Photoshop
   -Illustrator
   -Dreamweaver
   -InDesign
   OpenOffice.org
   Unity 게임 엔진
   Google Apps Script
   -Google Spreadsheets
   -Google Sites
   채팅 시스템
   -ChatZilla
   -XChat
   

6. JavaScript에 영향을 준 언어
   Java:기본적인 문법
   Scheme: 1급 함수(first-class-function) 함수의 인자와 반환값으로 함수를 사용
   Self: prototype 기반의 상속 개념.

10.기타

1. <script>는 바디 맨 밑에 넣는다.
2. CSS에서는 background-color이지만
   JavaScript에서는 backgroundColor(구문의 차이 주의)
3. " "안에 ' '를 넣으면 실행 오류. 반드시 ' '사용.
4. document.querySelector('body').style.backgroundColor='black';
   해석: 이문서의 선택할 것이 무엇이니('body')에 style="background-color;black" 을 넣을거야.
5. 토글(Toggle)
6. 프로그래머의 수치: 데이터가 바뀌었다고 로직이 바뀌는 것.
7. 파일로 나누어 정리
   <script src = "color.js"></script>
8. 검색어 추천
   
   1. Web Page의 특정 Tag 삭제 or 자식 Tag 추가
      document or DOM(Document Object Model)
   2. Web Browser 자체
      window 객체(Ajax: cookie,offline web application)
   3. 화상 통신 Web App
      WebRTC
   4. 음성 인식
      speech(API)
   5. 3차원 그래픽
      WebGL
   6. 가상현실
      webVR
9. 윈도우 메모장으로 저장: 파일형식-모든파일, 인코딩-유니코드
   맥 textEdit으로 저장: Format-Make Rich Text, 파일명 뒤에 .html 확장자를 붙인다.
10. Ctrl+Shift+J(윈도우), Command+Alt+J(osx) 키를 누르면 콘솔 탭이 선택된 상태로 개발자 도구가 실행된다.