오늘의 요약= 설계를 잘짜고 선택을 먼저하고 도구를 사용해라.
1. 개발의 큰틀을 배우다. 변수라는 상자에 필요한 data(자료,함수,객체,클래스)
-
js 역사
-
브라우저 실행 유일 언어
-
문서내용 동적으로 조작 위함.
-
쉽고 간단하게 사용 위한 최소한의 언어적인 (하이) 문법
- 발목을 잡았다. 영역 관리 필요 없었다. 현재는?
- 유연하다(불안정) 변수상자.
- past 변수 그냥 대입 가능 today let,var 넣어야함.
- 변수명으로 data의 종류를 적어주면 /유지 관리 하기 좋음.
-
파이썬
- 파이스크립트(js)
- 브라우저 번역 x -> 파이스크립트 탄생
- 기계조작(low)
- 통계가능
- 빅데이터 분석
- 인공지능
-
아직은 js가 우세.
정의어 변수명,함수이름 필요에 의에 어디서 어떻게 사용할지
이름만으로 용도를 해석 가능하게 작명한다.- 관례 규칙 (camel표기법(낙타))
- 영문자
- 첫글자 소문자
- 연결되는 단어에 첫글자를 대문자 사용.
- 다 소문자일 경우 _(언더바) 사용.(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 주된 기능은 웹문서의 조작에있다.
- 특정요소(Element)내용을 변경,검증,스타일을 변경 등의 작업
- 특정요소를 선택한다. -> 가능하면 변수에 저장하도록 한다.
-
document.getElement ~~(구분대상)
- document.getElementBy('구분대상id')
- document.getElementsBy(선택값){class|tag}('classname|tagname')
-
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(중천)
-
-
저장된 변수를 이용해서 원하는 작업을 수행한다.
- 내용 변경시 innerHTML 속성에 값 부여.
- 선택저장된변수.innerHTML = "변경하고자 할 내용"
- 선택된 요소의 내용을 읽어올 경우 (읽어온 자료를 임의의 변수에 저장)
- let box = 선택저장변수.innerHTML;
- 선택 요소 스타일 변경(값을 할당)
- 선택저장변수.style.변경하고자하는 속성='값 부여'
-
- 이벤트 등록
- 선택저장변수.addEventListener('이벤트 종류',동작할 함수명{함수내용});
- ex)== document.querySelector('#change').addEventListener('click', function(){
alert("버튼을 눌렀군요.")})
- ex)== document.querySelector('#change').addEventListener('click', function(){
- 선택저장변수.addEventListener('이벤트 종류',동작할 함수명{함수내용});
- 정해진 속성 은 소문자이다.
- 정해지지 않은 유저가 정하는 값은 명명법으로(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.
- 이전 더하기 계산기 복습
- 객체는 []하는게 좋다. 특수문자를 넣을 수 있기 때문에. .보다는
justdoil