2023/06/30
JavaScript
: 웹 페이지(HTML)의 동적 처리를 향상하기 위한 목적으로 탄생함.
1987년 애플사의 HyperCard가 시초임.
자바와 자바스크립트는 사실 완전 다름.
특징 :
- 스크립트 언어로, HTML처럼 컴파일 없이 웹 브라우저를 통해 해석된다. (JS Interpretrer Engine)
- 동적 바인딩으로 실행할 때 메모리의 크기가 결정됨. (<-> 정적 바인딩은 메모리 크기가 결정되어 있음.)
- 객체 기반 언어로 클래스를 만들지 않고 객체를 바로 생성해서 사용하는 것이 가능하다.
- 플랫폼에 독립적이다. -> 실행 파일을 만들지 않음.
- HTML5 API의 기반 언어 (xhtml은 과거의 것)
웹을 할 때, spring을 많이 하세요.. 주로 대기업에서 쓴다고 합니다 ㅎ
자바 스크립트는 과거 바닐라 스크립트라 불리는 ES5, 이후 ESNext, MS가 Type을 넣은 TypeScript로 나뉜다.
현재는 다양한 라이브러리로 못하는 부분이 거의 없다고 보는 게 맞습니다.
자바 스크립트의 특징을 알아보았습니다.
이제 자바스크립트의 작성 방법에 대해서 공부해 보겠습니다.
- HTML내에 영역을 만들어서 사용
- 태그 안에 포함해서 실행 - 비추천
- 외부에 JS 파일을 만들어서 사용.
각 작성의 예를 들어보면
위와 같습니다.
first.js 내용은
디렉터리에 외부 파일을 만들어, 이를 가져오는 방식입니다.
src는 source로 사용하고자 하는 파일 등의 주소를 나타냅니다.
위와 같은 코드를 실행하게 되면, 실행하자마자 "시작하자마자 수행"이라는 말이 떠야 합니다.
이렇게 해서 각 방법의 간단한 예시를 알아보았습니다.
// 자바 스크립트 작성 규칙을 알아보겠습니다.
- 대소문자 구분
- 줄 단위로 읽어서 실행 (;을 할 필요는 없으나 관습적으로 하는 경우가 대부분)
한 줄에 2개 이상의 명령어를 사용하는 경우에는, 반드시 ;으로 구분해줘야 함
여기서 하나의 명령어는 =를 사용하거나 함수 이름()을 호출하는 것이다.
-> a + b + c -> 명령어 1개 / a = 10 b = 30 -> 명령어 2개 임으로 ;이 필요
주석
해석하지 않는 코드로 코드에 대한 보충 설명을 작성할 용도로 사용
1) 한 줄 주석 :
// 주석 내용
2) 블록 주석 :
/*
주석 내용
....
*/
3) 해석하지 않고 문자열로 처리
<! [CDATA [ 문자여여얼]]>
// Keyword와 사용자 정의 명칭
- keyword : 프로그래밍 언어가 기능을 정한 명령어나 기호
- 사용자 정의 명칭 : 개발자가 기능을 정하는 단어 (keyword는 사용자 정의 명칭으로 사용 불가), 문자로 시작해야 하고 _와 $ 는 사용이 가능, 숫자는 시작 문자로는 사용할 수 없지만 나머지엔 사용 가능, 중간에 공백을 포함할 수 없다.(_, $는 C언어 사용하던 사람들이 쓰던 것이였다.)
% 사용자 정의 명칭을 만들때는 변수의 이름 설정을 정말 잘해야 한다!! %
// DATA 분류
- literal : 프로그래밍 언어에서 데이터를 표현하는 방법 (10진법, 실수, bool, 문자열"" '', null)
- Mutable/Immutable Data : Mutatble 데이터는 변경가능이고, Immutable 데이터는 변경이 불가한 데이터이다.
- Scala/Vector DATA : Scala는 1개의 데이터, Vector는 0개 이상의 데이터
- 데이터 유형 : 정형(테이블 처럼 구조가 일정한 데이터, 그림도 포함), 비정형(텍스트, 음성, 일반, 등), 반정형(비정형처럼 보이나 메타 데이터를 포함하고 있어 정형으로 변경이 가능한 데이터, xml, json, yaml 등)
예를들어 은행에서 비밀번호를 두번 누르는 것은, 잔액조회는 immutable 로그인용이고, 출금은 mutable로 로그인한다.
// 저장하고 있는 데이터의 종류에 따른 분류
- value : 값 (scala 데이터 저장 시 value type으로 작동)
- reference : 참조 (vector 데이터 저장시 reference type으로 작동)
// 메시지 출력
- 대화상자로 출력 : alert(데이터)
- HTML 문서 내에 출력 document.write(데이터) : 여러 개의 write 가 있는 경우 모아서 출력, document.writeln(데이터) : 바로 바로 출력
- 검사 창의 console에 출력 : console.log(데이터)
ex)
// 데이터에 이름 붙이기
- 전역 데이터(global data) : 만들면 아무 곳에서 사용할 수 있는 데이터 --> 이름 = 값으로 지정해서 이름을 호출하면 값이 온다.
- 지역 데이터(local data) : 만들면 자신의 영역에서만 사용할 수 있다 --> var 이름 = 값(hoisting 이 가능하고 값을 변경할 수 있는 형태로 생성) / let 이름 = 값(hoisting이 불가능, 값을 변경할 수 있는 형태로 생성 / const 이름 = 값(값을 변경할 수 없습니다.)
- 값 변경 : 기존 이름 = 값 (컴퓨터는 값을 먼저 읽은 후, 이름을 마치 문처럼 그 값에 접근할 수 있게 함)
- hoisting : 이름을 만들기 전에 사용이 가능 한 것
- 데이터 종류 확인 : type of 확인대상
- 배열 : 동일한 형태를 갖는 데이터의 모임으로 하나의 이름으로 생성/ array(배열)은 확장과 축소가 안되고, list 는 가능, javascript의 배열은 list.
- 생성 방법 : let 이름 = [초기값 나열], let 이름 = new Array(값 나열), let 이름 = new Array(개수) : 여러 개의 데이터를 저장할 공간만 확보
- 각각의 데이터 접근
이름[인덱스], 인덱스는 0부터 시작
let names = ["adam", "강진축구"]
names[0] -> adam
names[2] -> 에러~
- 배열의 데이터 개수 확인 -> 배열이름.length
배열 이름을 출력하면 기본 자료형인 경우는 데이터가 전부 출력되고 기본 자료형이 아닌 경우는 자료형 이름이 출력됩니다.
- 데이터 종류 변환
-> 문자열을 숫자로 변환 : Number(문자열)
-> 숫자를 문자열로 변환 : String(숫자)
// Operator(연산자)
:연산을 수행해주는 명령어나 기호
1) 연산의 분류 :
- 산술 연산(Arithmetic) : 연산의 결과가 숫자로 리턴
- 논리 연산(Logical) : 연산의 결과가 boolean으로 리턴
- 단항 연산(Unary) : 데이터가 한개만 있으면 수행되는 연산
- 이항 연산(Binary) : 데이터가 2개 있어야 수행되는 연산
- 삼항 연산(Ternary) : 데이터가 3개 있어야 수행되는 연산
2) 연산자 분류 :
- ㅇ
- 할당 연산자 : 오른쪽의 데이터를 왼쪽의 이름이 가리킬 수 있도록 하는 연산자. 왼쪽에는 반드시 이름이 와야하고 오른쪽은 이름과 리터럴과 계산식과 함수 호출 모두 가능
- 산술 연산자 : +, -, *(숫자로 구성된 문자열을 가지고 *을 하면 실제 곱하기를 진행함.), /, %(실수로 나머지를 구하면 결과가 이상하게 나올 수도 있음.)
- 증감 연산자 : 정수 변수에만 사용이 가능함.(++는 정수 변수의 값을 1 증가, --는 정수 변수의 값을 1 감소) 이들은 변수의 앞과 뒤에 써도 가능하다. 그러나 두 값에는 차이가 존재할 수 있다.
- 비교 연산자 : 논리 연산자 >, < , >=, <=, ==, !=, ㅣ실수 데이터와 실수 연산의 결과를 동일성 여부를 비교할 때는 주의. 머신 앱실론 문제가 발생, 실 수 데이터를 검퓨터는 정확하게 표현하지 못하는 문제.
int a = 0
printf(++a + ++a) //c언어 -> 2+2
System.out.println(++a + ++a) //java -> 1+2
여기서 잠깐
'-1' 을 읽어보세요
단순히 '마이너스 1' 일까요?
물론 마이너스 1이기도 하지만, 컴퓨터에겐 -1은 가장 큰 수를 의미합니다. 이유는 다음에~
// 산술 비트 연산자
: 정수 데이터를 2진수로 변경해서 비트 단위로 연산한 후, 결과를 정수로 리턴하는 연산자.
- ~ (1의 보수) : 단항 연산자로 1의 보수를 구해주는 연산자
- ^(Exclusive OR - XOR) : 같으면 0 다르면 1, 비교하는데 사용
- &(and) : 둘 다 1이면 1, 그렇지 않으면 0, 데이터를 삭제하거나 여러 개의 조건을 만족해야 하는 것을 만들 때 이용
- |(or) : 둘다 0이면 0 그렇지 않으면 1, 데이터를 삭제하거나 여러 개의 조건 중 하나 이상 만족하는 것을 만들고자 할때 사용
- << : 왼쪽의 데이터를 오른쪽의 데이터 만큼 왼쪽으로 이동
- >> : 왼쪽의 데이터를 오른쪽의 데이터 만큼 오른쪽으로 이동
-> c언어와 java는 나누기를 <<, >>로 진행함.
1이면 True, 0이면 False....
</html>
-> 0.1을 1000번 더하면 100이 아님.
-> 1.0 - 0.8 == 0.2 => false 반환
// 비트 논리 연산자
- !(not) : True 는 False로, False 는 True로 변경해줌.
- && : 둘다 True인 경우만 True 이고 그렇지 않으면 전부 False
- || : 둘다 False인 경우만 False 이고 그렇지 않으면 전부 True
short circuit / don't care
&&는 앞의 조건이 False이면 뒤의 조건을 확인하지 않음.
|| 는 앞의 조건이 True이면 뒤의 조건을 확인하지 않음.
// 1~100까지에서 3의 배수이고 4의 배수인 숫자의 개수를 확인한다고 하자
let cnt = 0
1.
for(let i=1; i<=100; i++){
if(i % 3 == 0 && i % 4 == 0){
cnt = cnt + 1
}
}
이것과
2.
for(let i=1; i<=100; i++){
if(i % 4 == 0 && i % 3 == 0){
cnt = cnt + 1
}
}
이것중 몇번을 써야할까요? 둘다 상관없을까요?
물론 적은 수의 데이터일땐 상관이 없겠지만, 빅데이터 분석이 기준이라면, 2번의 코드를 사용해야 합니다. 첫 번째 조건이 True 인지 판단해야 하는데 3보다 4의 배수가 더 적기 때문에 더 빠르다고 할 수 있죠
// 복합 할당 연산자
이름 연산자 = 데이터
-> 왼쪽 이름의 데이터와 오른쪽 데이터를 연산한 후 다시 왼쪽 이름이 가리키도록 하는 것.
-> a += 7 // a = a + 7
// 삼항 연산자
boolean 데이터가 나오는 식 ? 값 1: 값 2
앞의 식이 true 이면 값1, false 이면 값2
let result = 10 > 5 ? 10 : 5 -> True 이므로 10을 가지고, < 부등호로 False 였다면 5의 값을 할당 받는다.
// 기타 연산자
- new : 생성자를 호출해서 객체를 생성
- this : 생성자 안에서 객체 자신을 가리키는 연산자
- typeof : 자료형을 리턴하는 연산자
- delete : 삭제하는 연산
- instance of : 객체의 자료형을 확인
- in : 속성의 존재 여부 확인
// 자바스크립트에서만 적용되는 연산
동일성 여부
- == : 데이터의 종류에 상관없이 값만 같으면 true --> 12 == "12" --> True
- === : 데이터의 종류도 같아야 true --> 12 === "12" --> False
Falsy : false 로 간주하는 데이터
- 숫자 : 0
- null
- undefined
- "" : 빈문자열
nullish operator
- 왼쪽의 데이터가 null 또는 undefined 이면 오른쪽 데이터를 대입
let r = 데이터 ?? 데이터
---- null 의 사용은 이름이 가지고 있는 데이터를 가리키는 상태를 해제시키는 것임. 즉 메모리를 다시 사용가능 상태로 돌려 놓는 것.----
너무 어렵네요,, 중구 난방 이지만 다시 복습해보며 보기 좋게 바뀔수 있도록 하겠습니다!
혹시나 오셨다면 감사드리고 더 좋은 글로 다시 돌아오겠습니다!
'LG 헬로비전 DX DATA SCHOOL > Web Programming' 카테고리의 다른 글
| React 애플리케이션 개발 (0) | 2023.07.31 |
|---|---|
| Django & React (0) | 2023.07.28 |
| JavaScript 기초 3 (0) | 2023.07.04 |
| JavaScript 기초 2 (0) | 2023.07.03 |
| LG DX DATA SCHOOL 1기 xhtml (0) | 2023.06.29 |
