원철연 교수님 강의 메모
[참고 사이트]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference
https://www.w3schools.com/js/default.asp
1. JavaScript
- 객체 기반의 스크립트 프로그래밍 언어
- 웹 브라우저 내에서 사용
- 하이브리드
- Html 기반 :안드로이드, ios
- Netscape
- Node.js
- ES6 : 화살표 함수
1) 장점 :
단순함, 빠른 속도, 상호 운용성
- Autocomplete
- 많이 쓰이는 프로그래밍 언어
2) 단점 :
소스 코드 접근이 쉬움 (보안 문제 발생 소지), 에러 처리 및 디버깅 어려움, 브라우저 지원.
2. Caniuse (https://caniuse.com/)
- 서비스
3. 데이터
1) 데이터 타입
-
기본 데이터 타입 (primitive data type)
-
참조형 데이터 타입 (reference date type)
2) 데이터 저장
-
변수 : 변하는 값
-
상수 : 변하지 않는 값
4. VSC
- 데이터 저장 실습
- 개발자 도구
5. var, 적용범위, let
1) var
2) 적용범위
hello는 sayhello 함수블럭안에, 정의된 함수 실행.
uncaught referenceerror : 지역변수 console.log 적용 안됨.
- 디버깅 힘든이유 : 코드작성시문법 형식 자유로움 실행 하면 안되는 경우 빈번.
(Type Script 병행해서 사용하기)
3) let
빨간줄 에러메시지 표시
6. 변환 (Conversion)
- console.log();
- 한 데이터 타입에서 다른 데이터 타입으로 바꾸는것
- DB 저장전 filtering
1) 암시적 변환 (Implicit conversion)
- 자동
- e.g : script error
2) 명시적 변환 (Type conversion)
- 개발자가 강제로 특정 데이터 타입으로 변환
(교수님 명언 : 매일매일 새로우면 안되고 익숙해져야됨..)
3) 형변환 필요
- string : 문자열
(출처 : https://wikidocs.net/205) - NaN : (Not A Number)은 연산 과정에서 잘못된 입력을 받았음을 나타내는 기호
- null : 아무것도 없음
- 설명
date : object
string(number) 넘버변수를 스트링으로 타입표시 (데이터 타입 바뀜)
object를 스트링으로 바꿈.
bool_value : 문자열
7. 숫자 데이터 변환
- consolo.log
1) Number
undefined : NaN
Null : 0
true : 1
false : 0
String : 0, flotating-point 값, inteager값, NaN
- 예제를 통한 연습
undefined : 숫자형, NaN
null : 0
true : 1
false : 0
공백제거 1234
부동소수점 : 그대로 표시
0xf : 16진수 (15까지) 15=f
문자열 형태 : 알 수 없음.(NaN)
- 이진수 : 비트스트림
- 파이썬
2) parselnt
- string : 변환될 문자열
- radix : 정수 (2와 16사이의 진수)
(1+2) - Math 함수
- parseFloat : number보다 실용적.
- result
- 다양한 데이터를 숫자로 변환 가능.
3) Boolean
-
console.log(BooLean())
-
true
-
false
8. 주석 (Comments)
- 가독성
- 코드 설명
9. 연산자 (Operators)
연산자를 해야하는 이유 : 저장된 데이터 비교. (T/F), 산수, 값 할당.
1) 산술 연산자
-
2개의 변수를 가지고 연산
-
2개의 변수 선언
-
증가 : ++
-
감소 : --
-
지수 (exponentiaion) : **
-
Mathml
2) 할당 연산자
- 기존 변수에 특정한 값을 연산하는 작업을 수행
3+4=7
3+7-4=3
10x4=40
40x4=10
10/3=1
3) 비교 연산자
-
document.write("()비교:"()+linebreak);
-
결과는 T/F
-
코드표에 따라 적용 (아스키코드)
대소문자 불일치
서로 다르니?
4가 더 크니?
4가 더 작니?
서로 값이 같니? 자바안에서 형변화 (따움표) ==그대로 비교
따움표는 원래 문자열이라 ===(데이터 타입)
4) 논리 연산자
- &&:AND
- ||:OR (Enter 위에 있음.ㅋ)
- ! : NOT
- comp : compare
5) 조건 연산자 = 3항 연산자
- if ...else의 대용
- 표현식1?표현식2:표현식3
- 1이T면 2실행 F면 3실행
[예제를 통한 연습]
-
p1값
-
GPT제안
-
p2값
10. 흐름 제어
- flow_control
- 위에서 아래로 코드를 실행
- 첫번째 줄에서 시작하여 마지막 줄에서 종료
1) condition
- 조건에 따른 흐름제어 if
- T/F
- f절 T일때만 실행
2) if-else
- if(condition) {
실행할 코드 1;
} else {
실행할 코드2;
}
- condition이 T 코드1, F 코드 2실행
- 경우의 수
[예제]
- if=T
- else=T
3) else if
- 회원 등급에따른 구분
- 조건에 의한 분기처리
if(condition1) {
실행할 코드1;
}
else if(conditon2) {
실행할 코드2;
}
else if(conditon3) {
실행할 코드2;
}
...
else {document.write('');}
[예제]
4) switch
-
가독성 좋음
-
null이 아닐경우에만 inputData
-
논리 연산, 조건걸기
11. for
- 조건이 T인 동안 계속해서 특정 작업(code block)을 반복.
- 루프(loop)가 시작되기 전에 실행
[예제 1]
일주일에 3번 수업, 한달에 외우는 총 단어 수 계산.
-
document.write
-
조건이 T인동안 계속 특정 작업을 반복. 루프(loop)가 시작되기 전에 실행되는 부분으로 초기화 코드를 정의. 반복조건 (T)일경우 코드 블록 (code block)을 반복.
