22.09.22.Thu - javascrpit 라는 벽을 만나다.

오늘의 요약= 설계를 잘짜고 선택을 먼저하고 도구를 사용해라.

1. 개발의 큰틀을 배우다. 변수라는 상자에 필요한 data(자료,함수,객체,클래스)

• js 역사

• 브라우저 실행 유일 언어

• 문서내용 동적으로 조작 위함.

• 쉽고 간단하게 사용 위한 최소한의 언어적인 (하이) 문법

  • 발목을 잡았다. 영역 관리 필요 없었다. 현재는?
  • 유연하다(불안정) 변수상자.
  • past 변수 그냥 대입 가능 today let,var 넣어야함.
  • 변수명으로 data의 종류를 적어주면 /유지 관리 하기 좋음.

• 파이썬

  • 파이스크립트(js)
  • 브라우저 번역 x -> 파이스크립트 탄생
  • 기계조작(low)
  1. 통계가능
  2. 빅데이터 분석
  3. 인공지능

• 아직은 js가 우세.

정의어 변수명,함수이름 필요에 의에 어디서 어떻게 사용할지  
이름만으로 용도를 해석 가능하게 작명한다.

---

• 관례 규칙 (camel표기법(낙타))
  1. 영문자
  2. 첫글자 소문자
  3. 연결되는 단어에 첫글자를 대문자 사용.
  • 다 소문자일 경우 _(언더바) 사용.(snake (뱀) 표기법)
  • 트렌드는 camel이다.

    ---

data type (상자에 담을 수 있는 자료의 종류)

• 자료
  • 단일 자료
    • 함수 (함수의 이름도 변수(상자)명이다.)
    • 클래스 (클래스 이름도 변수명이다.)
  • 묶음 자료 ex) 배열,문자열,객체(object),함수(method)
    • 표기 방법 ex) box1[n] n번째를 꺼내라.
    • 배열과 객체는 같다?
    • 배열에 소이름을 붙여 불러오면 객체. ex) jumsu.english
    • 변수 안에 변수 안에 변수 (러시아의 인형)
      • 변수는 무한히 넣을 수 있는가?
    • 객체는 이름을 붙여줘야한다.
      • 객체 의 표기는 . , [] 이다.
    • 그렇기에 배열 과 객체는 같다.

---

괄호 (그룹화,묶어주기) 표기 방법_기호가 중요하다.

• [] 배열
• {} 객체
• () 우선순위, 함수

  기호는 정말 중요하다.

{} 중괄호

• 함수에서는 명령 묶음 시작과 끝
• 자료일때는 객체다.
  • 이름을 명명한다. ex) {국어:100,영어:88,수학:99}

문자열은 예외다.

문자열은 단일자료 같이 처리한다. ex) "홍길동" 원래는 홍,길,동 묶음을 단일로 처리(불편하니까).

• 문자열 처리는 어렵다.

  ---

2.

• 객체자료는 속성명과 속성값으로 이루어진다.
• 문서객체
• 실습

3. 본질에 집중해라.

• 대소문자 구별 중요.
• 유지 보수위해 클래스네임 태그네임 보다, id를 해주면 좋다. 효율성
• 공통된 것을 찾아내는것이 본질이며 어렵다.(설계)
• 변수를 써야할 때, 쓰지 말아야할 때. 그것을 구분하는 것이 관건.
• 공통된 data를 변수에 넣어라.
• 그게 제일 중요하다.

4. 오전 수업 정리

• js 동작 환경 (html문서)

• 준비과정 - 위치:

  바로 위에 한다.

• 웹에서의 js 주된 기능은 웹문서의 조작에있다.

  1. 특정요소(Element)내용을 변경,검증,스타일을 변경 등의 작업

  2. 특정요소를 선택한다. -> 가능하면 변수에 저장하도록 한다.

     1. document.getElement ~~(구분대상)

        • document.getElementBy('구분대상id')
        • document.getElementsBy(선택값){class|tag}('classname|tagname')

     2. document.querySelector or querySelector All('css선택자'

        • ex1) id값 id인 문서 선택시 / document.querySelector('#id')

        • ex2) id값 id인 문서 선택시 / document.querySelector('.id')

          • document.querySelector('.id'): 첫번째 문서 요소만 선택.
          • document.querySelectorAll('.id') : 클래스 속성이 id 모든 요소 선택. 배열[]의 형태.

        • ex3) h1 요소 선택시

          • document.querySelector('h1') : 하나만.

          • document.querySelectorAll('h1') : 전부다.

          • ex3) div 안의 p 선택

          • document.querySelector('div>p') : 하나만.

          • document.querySelectorAll('div>p') : 전부다.

        • 현재는 querySelector가 대세이다.

          • document.getElement (노을)
          • document.querySelector(중천)

     3. 저장된 변수를 이용해서 원하는 작업을 수행한다.

        • 내용 변경시 innerHTML 속성에 값 부여.
        • 선택저장된변수.innerHTML = "변경하고자 할 내용"
        • 선택된 요소의 내용을 읽어올 경우 (읽어온 자료를 임의의 변수에 저장)
        • let box = 선택저장변수.innerHTML;
        • 선택 요소 스타일 변경(값을 할당)
        • 선택저장변수.style.변경하고자하는 속성='값 부여'
  • 이벤트 등록
    • 선택저장변수.addEventListener('이벤트 종류',동작할 함수명{함수내용});
      • ex)== document.querySelector('#change').addEventListener('click', function(){
        alert("버튼을 눌렀군요.")})
  • 정해진 속성 은 소문자이다.
  • 정해지지 않은 유저가 정하는 값은 명명법으로(camel,snake)

---

5.

• 복습
• 버그 잡는 법
  • 한줄 씩 확인해보기.
• 외부로 빼서 불러오기로 하자.
• 식별자=이름

6. datatype에 따른 연산자의 명령

  프로그래밍 언어의 기본적인 약속들(연산들 명령들) ->선생님 생각-> 후에 의미를 되새겨보자.

단어일 수도 있고, 기호일 수도 있다.
약속된 단어들은 대부분 유사하지만, 경우에 따라서는 많은 차이가 있을 수 있다.
약속된 기호들은 거의 대부분 같다.(미세하게 차이 있을 수있음)
약속된 기호도 모두 명령이며 연산자이다.
약속된 단어들도 모두 명령이며 연산자이다.

• 약속된 단어들의 예

  • let,if,for,const,var,function등등
  • 소문자 이다. 사용자가 지정하는 것만, 명명법대로.

• 약속된 기호들의 예

  • [],{},(),+,-,*,/,%,++,...
  • 약속된 기호는 위치에 따라서 다른 의미를 가지는 것도 있다.
    • ex) "나의 살던 고향은" + "꽃피는 삶"; 기호의 명령 두개의 항목 연결하라
    • 위치 혹은 data타입의 종류에 따라서 같은 기호여도 명령값이 다르다.
    • 숫자열 끼리는 더하라.
    • ex2) function 나는함수(){함수식} -> ()기호의 의미는 입력자료들을 묶어주는 의미
      • 나는함수() -> ()의 의미는 나는함수 라는 상자에 들어있는 내용이 함수이기 때문에,
        그 함수에게 일을 시킨다. 즉 함수호출 이라는 의미를 가진다.
      • (2+3)*4/2 -> ()안의 연산을 먼저 해라. 순서를 규정.

  언어에서 약속된 단어를 제외한 모든 단어는 사용자 정의어(식별자)라고 하며,  
  식별자는 모두 자료를 담고있는 상자이다. 
  그 상자는 먼저 만들어 놓고 사용하자.
  식별자를 만드는 과정에서는  
  상자에 담길 자료의 종류를 알려주는 예약어 or 예약 기호가 필요하다.

  • let ~
  • const ~
  • var ~~
  • function ---------()

• 예약어 식별자 식별기호

• let dataSample = []

  함수를 만들지도 않았는데 호출을 먼저 하지 마라.
  만들고 호출하는 순서를 지켜라.

---

7.

• 함수를 만들때, 순서를 잘 지켜야 한다.
• 짤때 콘솔 박스를 많이 써라
• 어려운데. 돌아가는거 보면 기분이 조아.

8.

• 이전 더하기 계산기 복습
• 객체는 []하는게 좋다. 특수문자를 넣을 수 있기 때문에. .보다는

  ---