1.개요
1)등장 배경
=>웹 페이지의 동적인 처리를 향상시키기 위해서 등장
- HTML: 웹 브라우저에 보여지는 내용의 구조를 위한 언어
- CSS: 디자인 적용
2)특징
=>스크립트 언어: 컴파일하지 않고 줄 단위로 읽어서 번역하는 언어
스크립트 언어는 아래쪽에 에러가 있더라도 에러가 발생하기 전까지는 수행을 합니다.
=>유니코드 기반의 언어이고 대소문자 구별
=>웹 브라우저에서 번역해서 실행
웹 브라우저마다 다르게 동작할 수 있음
=>동적 바인딩: 실행할 때 또는 데이터가 대입될 때 자료형이 결정
- 동적 바인딩은 장점이 많지만 컴파일 시간에 에러를 알 수 없고 어떤 데이터가 필요한 지 예측할 수 없기 때문에 개발자 입장에서는 반드시 좋은 것 만은 아님
- 동적 바인딩이지만 미리 자료형을 결정해서 에러를 파악할 수 있게 만든 버전이 TypeScript
=>객체 기반 언어: 클래스없이 객체를 만들어 사용할 수 있음
3)종류
=>일반적인 자바스크립트: ES6
=>ES6에 타입 기능을 추가한 TypeScript(자바스크립트의 슈퍼셋)
4)라이브러리
=>별도의 플랫폼없이 HTML 파일에 삽입해서 사용하는 라이브러리
- jquery
Cross Browsing 라이브러리
코드를 한 번만 작성하면 거의 모든 브라우저에서 동일하게 동작하도록 해주는 라이브러리
한 때 표준처럼 여겨졌지만 너무 무거워서 최근에는 사용을 금기시
- bootstrap: 반응형 웹(브라우저 나 디바이스 크기에 상관없이 동일한 크기를 제공하기 위한 방법)을 구현하기 위한 라이브러리
- d3js: 그래프 와 같은 시각화 라이브러리
=>node 같은 플랫폼 위에서만 실행되는 라이브러리
- SPA(Single Page Application): angular, vue, react -> next.js
- Web Server: express.js -> nest.js
- Hybrid App Library: ionic, react-native
- PC App: elctron
5)사용 방법
=>HTML 과 함께 사용
- 태그 안에 작성해서 사용: 인라인 방식
- HTML 파일 안에 <script> </script> 안에 작성해서 사용
- 별도의 js 파일을 만들고 <script src="스크립트 파일 경로"></src> 로 링크를 설정해서 사용
=>node 같은 플랫폼을 이용해서 사용
- js 파일을 만들고 node 명령을 이용해서 실행
6)주의 사항
=>자바스크립트는 HTML 과 순서대로 읽으면서 실행이 되므로 script가 뒤에 나오는 태그를 사용하는 것은 안됩니다.
=>; 은 필수는 아니지만 명령 단위로 붙이는 것을 권장하고 하나의 줄에 2개의 명령이 존재하면 반드시 ;으로 구분해야 합니다.
=>문자 와 문자열을 구분하지 않고 문자열로 처리
문자열 리터럴을 만들 때 ' ' 나 " " 도 구분하지 않음
=>Boolean 은 true 와 false
=>참조형 데이터는 null
=>자료형 유추 기능이 있으므로 주의
숫자 와 숫자로 된 문자열의 * 연산이 가능
데이터를 정렬하는 sort 함수의 경우는 모든 데이터를 문자열로 변환해서 sort
그냥 정렬하면 12 가 9보다 작음
=>주석은 // 와 /* ~ */ 사용 가능
<![CDATAp[문자열]]>: 문자열은 스크립트로 해석하지 말라는 구문
7)메시지 출력
=>document.write(내용): 이 내용은 HTML에 출력되며 태그 적용됨
writeln 도 같은 기능이지만 write는 모아서 해석하고 writeln은 명령어 단위로 해석
=>alert(내용): 내용을 대화상자에 출력
=>console.log(내용): 브라우저의 콘솔 창에 출력
node 플랫폼에서는 html 없이 작업을 하는 경우가 많기 때문에 node 플랫폼을 사용할 때는 console.log를 주로 이용
8)자바스크립트 학습할 때 준비
=>node를 설치
=>vscode를 사용하는 경우 HTML을 바로 실행할 수 있는 open in brower
9)코드 작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바스크립트</title>
</head>
<body>
<p id="before"></p>
<!-- 확장자가 js 인 경우는 script 태그 필요 없음 -->
<script>
//HTML의 마지막 부분에 추가해서 출력
document.write("출력 내용");
//Modal 대화상자로 출력 - 대화상자를 제거하기 전까지 다른 작업 수행 못함
//alert("대화상자");
//console에 출력
console.log("브라우저의 콘솔 창에 출력 - node의 경우는 터미널에 출력")
let before = document.getElementById("before");
before.innerHTML = "스크립트 이전";
//태그를 전부 다 읽고 난 후 수행
window.onload = function(){
let after = document.getElementById("after");
after.innerHTML = "스크립트 이후";
}
</script>
<p id="after"></p>
</body>
</html>
2.기본 문법
1)변수 작성: 초기값이 없으면 undefined
=>이름
- global 처럼 사용이 됩니다.
=>var 이름
- 예전에 주로 사용하던 방식
- 블럭 안에서 만들어도 블럭 외부에서 사용이 가능
- Hoiting(선언하기 전에 사용) 허용
- 동일한 scope에서 재생성 가능
=>let 이름
- 최근에 사용하는 방식
- 일반적인 프로그래밍 언어처럼 동작
2)상수: 변경할 수 없는 데이터이므로 반드시 초기 값을 대입
const 이름 = 값;
3)기본 자료형
=>Number: 숫자
=>String: 문자열
=>Boolean
=>undefined: 이름은 있는데 데이터가 없음
=>null: 참조하는 데이터가 없음
4)자료형 변환
자료형이름(데이터)
5)다른 언어에 없거나 다른 연산자
=> ===: 값 과 자료형 모두 일치할 때 true를 리턴하는 연산자
=> ??: 왼쪽의 데이터가 null 이거나 undefined 일 때 오른쪽의 데이터를 리턴
=>falsy 가 적용됨
숫자 0 그리고 null, undefined, NaN, 데이터가 없는 데이터의 모임은 false로 간주
false는 숫자 0으로 간주
=>&& 와 ||는 앞의 데이터에 따라 뒤의 데이터를 파악하지 않는 경우가 있습니다.
=>&& 와 ||는 결과를 리턴할 때 Boolean 으로 한 경우는 Boolean을 리턴하지만 Boolean 이 아닌 경우는 기존의 데이터를 리턴합니다.
3.제어문
1)주의할 점
=>제어문의 제어를 받는 문장은 { }으로 감싸야 하며 한 줄인 경우는 { }는 생략 가능
=>let으로 선언된 변수는 자신의 영역 내에서만 사용 가능
2)switch
=>값에만 사용하는 것이 아니고 연산식을 설정해서 true 인 경우 동작하도록 할 수 있습니다.
=>switch 가 블럭이고 case 는 블럭이 아님
3)for
for(처음 한 번만 수행되는식; 식이 수행될 때 마다 비교하는 식; 두번째 반복부터 수행되는 식){
반복할 내용;
}
=>두번째 식이 false 가 될 때 까지 수행
4)for ~ in
for(임시변수 in 데이터모임){}
=>임시변수에 데이터가 대입되지만 자바스크립트는 임시변수에 인덱스가 대입됩니다.
객체를 대입하면 속성이 하나씩 대입됩니다.
'Study > FrontEnd' 카테고리의 다른 글
| JavaScript(5) (2) | 2024.04.23 |
|---|---|
| JavaScript(4) (0) | 2024.04.23 |
| React(3) (0) | 2024.01.31 |
| React(2)-이벤트 처리기 (1) | 2024.01.30 |
| React(1)- Django + React.js Application (1) | 2024.01.30 |
