자바스크립트(JavaScript)
1. 개발년도
1995년
넷스케이프 커뮤니케이션즈 : 네비게이터 브라우저(90% 이상의 점유율)
1996년
브렌던 아이크 동적인 프로그램을 개발하기 위해 언어를 개발(10일만에 모카라는 언어)
네비게이터2에 탑재(모카 -> 라이브스크립트 -> 자바스크립트)
MS의 익스플로러의 jscript 등장 -> 호환성 문제 발생 -> 크로스 브라우징 이슈가 발생
1997년
ECMAScript(비영리 표준화 기구 ECMA 인터내셔널) -> 자바스크립트에서 표준화
1999년
비동기적(Asynchronous) 서버와 브라우저가 데이터를 교환할 수 있는 통신 기능 Ajax(Asynchronous JavaScript and XML)이 탄생
2005년
구글이 크롬 발표(V8 자바스크립트 엔진)
자바스크립트 기반으로 구글맵에 Ajax기술을 사용
2006년
jQuery 등장으로 크로스 브라우징 이슈를 해결
2009년
탈 브라우징(웹 브라우저를 벗어나 os 애플리케이션 개발에도 사용)
Node.js의 등장
이후
SPA(Single Page Application) 개발
React, Vie, Angular
2. 자바스크립트의 특징
객체 기반의 스크립트 언어
대/소문자를 구분
문장 끝에 ;(세미콜론)을 사용(생략이 가능)
3. 자바스크립트의 출력
Web API Console을 통해 브라우저 Console 창에 출력
윈도우 : (관리자모드 F12키를 누른다)
맥 : command + option + i
<script> ~ </script>에 작성
외부 자바스크립트로 사용 : <script src='파일명'></script>
4. 자바스크립트의 실행 순서
인터프리터 방식이므로 위에서 아래로 실행
✓ JavaScript 파일 및 문장을 <head> ~ </head> 사이에 넣었을 경우
문서 시작 -> <head>에 있는 <script>를 다운로드 또는 실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
(HTML 실행되지 않은 상태에서 빈 화면이 보일 수 있음)
✓ JavaScript 파일 및 문장을 <body> ~ </body> 끝에 넣었을 경우
문서 시작 -> <body>에 있는 HTML 태글르 실행 -> <script>를 다운로드 또는 실행 -> 끝
(완벽하지 않은 HTML 문서가 먼저 보여 잘못된 UI가 실행될 수 있음)
✓ <script async>를 사용할 경우
문서 시작 -> <script>를 다운로드 또는 실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
(script 파일이 여러개 있을 경우 먼저 다운로드 된 script 파일을 먼저 실행하게 됨, script 파일이 서로 연관성이 있는 경우 하나의 스크립트만 실행하면 문제가 발생할 수 있음)
✓<script defer>를 사용할 경우
문서 시작 -> <script>를 다운로드 또는 실행 -> <body>에 있는 HTML 태그를 실행 -> 끝
(HTML 시작되고 script 파일을 동시에 다운로드/실행을 진행함, script 실행은 페이지 구성이 모두 끝날 때까지 지연, script 순서에 때라 실행)
# 윈도우, 맥 CSS 및 JAVASCRIPT변경 내용 관련하여 조치방법
CSS, JavaScript의 변경된 내용이 반영되지 않을 경우(캐쉬가 남을 경우)
윈도우
- F12키 -> 새로고침 버튼을 누르고 있는 상태에서 "강력 새로고침"
- CTRL + SHIFT + R
맥
- option + comman + i -> 새로고침 버튼을 누르고 있는 상태에서 "강력 새로고침"
- command + shift + r
주석문
// : 한줄 주석
/* 내용 */ : 여러줄 주석
VScode에서 js설치방법
익스텐션 설치
es6검색 -> JavaScript (ES6) code snippets (노란색) 설치
시작
1. 변수
- 데이터를 저장할 수 있는 메모리 공간
- 값이 변경될 수 있음
- 자바스크립트의 변수는 타입이 없음
- let 키워드를 사용하여 변수를 선언
EX)
파이썬
name = '김사과'
자바스크립트
let name = '김사과';
아주 옛날 옛적 변수 선언
var name = '김사과';
var
- 유연한 변수 선언 방식
- 지역변수, 전역변수와의 구별이 없음
- 같은 이름의 변수를 선언할 수 있음
console.log(num);
var num = 10;
{
console.log(num); // 전역변수 num = 10
var num = 20;
}
console.log(num); // 전역변수 num = 20
let
- 지역변수, 전역변수 구별이 확실
- 같은 이름의 변수를 선언할 수 없음
let 변수명 = 값;
또는
let 변수명;
변수명 = 값;
트랜스 컴파일러
- 과거 브라우저 및 특정 브라우저 버전등을 모두 사용할 수 있도록 해석해주는 라이브러리
- BABEL
상수(constant)
- 한번 선언된 상수는 다시 재정의 할 수 없음
- 값을 재할당 할 수 없음
되는 예시
const 상수명 = 값;
ex) const num = 10;
안되는 예시
const 상수명;
상수명 = 값; (x)
✓ 자바스크립트에서 상수를 권장하는 이유
- 개발자 실수를 방지하기 위해
- 해킹을 방지하기 위해
데이터 타입(Data Type)
- 프로그램에서 다룰 수 있는 값의 종류
- 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음
- 자바스크립트의 타입 유연성을 해결하기 위해 MS의 타입스크립트가 탄생
1. 숫자형(number)
- 정수와 실수를 따로 구분하지 않음
- 모든 수를 실수 하나로만 표현(소수점)
2. 문자형(string)
- '', "" 또는 ``로 둘러싸인 문자의 집합
let num = 10;
// "입력한 숫자는 10입니다."
console.log("입력한 숫자는 " + num + "입니다.");
console.log(`입력한 숫자는 ${num} 입니다.`)
3. 논리형(boolean)
- 참(true)과 거짓(false)으로 표현되는 값
- false, 0, '', null, undefined는 모두 거짓(false)로 판정
- false가 아닌 모든 값은 참(true)로 판정함
4. undefined, null
- undefined : 타입이 정해지지 않은 타입(변수 선언 후 값이 정해지지 않은 경우)
let num;
console.log(num); // undefined
- null : null을 저장한 값. 값이 없는 것
let obj = null;
console.log(obj); //null
5. 심폴형(symbol)
- 유일하고 변경 불가능한 기본값을 만듬
- 객체 속성의 key로 사용
const sym1 = Symbol('apple')
const sym2 = Symbol('apple')
console.log(sym1 == sym2); 값이 같은지 비교 true
console.log(sym1 === sym2); 타입과 값이 모두 같은지 비교 false
6. 객체형(object)
- 어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합
- Key Value pair 구조로 저장
const 객체명 = {키1:값1, 키2:값2 ... }
✓ 자바스크립트의 변수는 타입이 고정되어 있기 때문에 같은 변수에 다른 타입의 값을 대입할 수 있음
let user = {userid:'apple', name:'김사과', age:20}
user = '김사과'
자동 타입 변환
- 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용
const num1 = 10;
const str1 = "10";
console.log(num1 + str1); //1010
console.log(num1 - str1); //0
console.log(num1 * str1); //100
console.log(num1 / str1); //1
const ch = '삼십';
console.log(ch - 10); // NaN
NaN(Not a Number)
- '정의되지 않은 값이나 표현할 수 없는 값' 이라는 의미
- 숫자로 변환할 수 없는 연산을 시도
타입변환 함수
- 강제로 타입을 변환할 수 있음
Number() : 문자를 숫자로 변환
String() : 숫자나 불린 등을 문자형으로 변환
Boolean() : 문자나 숫자 등을 불린형을 변환
Object() : 모든 자료형을 객체형으로 변환
parseInt() : 문자를 소수없는 정수형으로 변환
예) parseInt('100.1') -> 100
parseFloat() : 문자를 실수형으로 변환
예) parseFloat('100.1') -> 100.1
자바스크립트 대화상자
Web API : 브라우저에서 제공하는 API(Application Programming Interface)
alert() : 사용자에게 메세지를 보여주고 확인을 기다림
confirm() : 사용자에게 메세지를 보여주고 확인이나 취소를 누르면 그 결과를 불린값으로 반환
prompt() : 사용자에게 메세지를 보여주고 사용자가 입력한 문자열을 반환
'Study > JavaScript' 카테고리의 다른 글
| JavaScript Day6 (0) | 2023.10.25 |
|---|---|
| JavaScript Day5 (0) | 2023.10.24 |
| JavaScript DAY4 (0) | 2023.10.22 |
| JavaScript DAY3 (0) | 2023.10.22 |
| JavaScript DAY2 (0) | 2023.10.21 |