7-1. 숫자형(number)
7-2. 문자형(string)
7-3. 논리형(boolean)
7-4. undefined, null
7-5. 심볼형(symbol)
7-6. 객체형(object)
0. Javascript에 들어가기 전
* Javascript 교육 간 사용할 에디터 : Visual Studio Code
교육에 사용할 폴더를 드래그해서 바탕화면 아이콘에 드롭하여 실행.
* VS Code Extension ' JavaScript (ES6) code snippets ' 설치를 추천.
Javascript 문법의 자동화에 도움을 주는 확장프로그램.
브라우저의 호환성을 고려하여 ES6 버전을 설치하는 것을 추천. (최신버전:ES10)
설치 후 [F1] 을 누름.
'코드 조각: 사용자 코드 조각 구성' 을 입력 후 클릭.
'@@@'에 대한 새 코드 조각 파일...' 을 입력 후 클릭.
'global-snippets' 입력 후 클릭.
처음에 보이는 텍스트를 삭제한 후, 필요한 내용을 작성. 아래는 예시본.
예시본)
' cl ' 을 입력 → ' console.log($1) ' 을 출력 + 소괄호 안에 커서를 위치
1. Javascript의 개요
웹 브라우저에서 실행되는 프로그래밍 언어로, 웹 페이지의 동적인 기능을 구현하는 데 사용.
HTML과 CSS로 구성된 정적인 웹 페이지에 대해 자바스크립트는 사용자와 상호작용.
새로운 콘텐츠를 동적으로 변경 및 로드, 애니메이션 및 효과를 추가하는 등의 작업을 수행.
또한, 자바스크립트는 서버 측에서도 사용될 수 있으며, Node.js를 사용하여 서버 측에서 실행될 수 있음.
이러한 기능은 자바스크립트를 다양한 애플리케이션 및 다른 플랫폼에서도 사용할 수 있게 함.
1995년. 넷스케이프 커뮤니케이션즈: 네비게이터 브라우저가 90%이상의 점유율
1996년. 브렌던 아이크가 동적인 프로그램을 개발하기 위해 모카(언어)를 10일만에 개발.
네비게이터2에 탑재(모카 → 라이브스크립트 → 자바스크립트)
M/S 익스플로러의 jscript 호환성 문제로 크로스 브라우징 이슈가 발생.
크로스 브라우징(Cross-Browsing) 다양한 웹 브라우저에서 웹 페이지가 동일하게 보이고 작동하는 것. 웹 브라우저는 각각 다른 엔진을 사용하여 HTML, CSS, JavaScript 등의 웹 기술을 해석하고 실행함. 이에 따라, 같은 웹 페이지를 여러 웹 브라우저에서 열면 다르게 보일 수 있으며, 일부 기능이 작동하지 않을 수도 있음. 이를 위해서는 다양한 웹 브라우저에서 테스트를 수행하고, 호환성 문제의 해결, 웹 표준의 준수, 브라우저마다 다른 기능에 대한 대응 방법을 찾는 등의 작업이 필요함. 모든 사용자가 동일한 경험을 제공하며, 사용자들의 만족도와 웹 페이지의 접근성을 높일 수 있음. |
1997년. 자바스크립트는 ECMAScript(비영리 표준화기구 ECMA 인터내셔널)로 명명됨.
ECMAScript JavaScript를 표준화한 스크립트 언어의 국제 표준. JavaScript를 기반으로한 스크립트 언어 규격을 제공. JavaScript가 지원하는 기능들을 표준화하고, 새로운 기능들을 추가함. 이러한 새로운 기능들은 브라우저에서 사용할 수 있는 최신 JavaScript 기술을 정의함. JavaScript 엔진은 ECMAScript 규격을 기반으로 구현됨. 따라서, ECMAScript 규격에 따르는 JavaScript 코드는 모든 JavaScript 엔진에서 동일하게 동작함. 이를 통해, 웹 브라우저 및 서버 사이드 개발에서 표준화된 JavaScript 코드를 작성할 수 있으며, 이는 코드의 이식성과 유지보수성을 향상시킴. |
1999년. 비동기적(Asynchronous) 서버와 브라우저가 데이터를 교환할 수 있는 통신기능
Ajax(Asynchronous Javascirpt and XML)이 탄생.
2005년. 구글이 발표한 구글맵에 Ajax기술을 사용 → 크롬 발표 (V8 자바스크립트 엔진 탑재)
AJAX(Asynchronous JavaScript And XML) 웹 애플리케이션에서 비동기적으로 데이터를 요청하고 받아오는 기술. 웹 페이지를 다시 로드하지 않고도 서버로부터 데이터를 가져와서 동적으로 웹 페이지를 업데이트할 수 있게 해줌. 예를 들어, 웹 페이지에서 사용자가 검색어를 입력하면 AJAX를 사용하여 서버로 검색어를 전송하고, 서버에서는 해당 검색어에 대한 결과를 XML 또는 JSON 형태로 반환함. 이후, 이 결과를 자바스크립트를 사용하여 동적으로 웹 페이지에 표시할 수 있음. 구글 지도와 같은 다양한 웹 애플리케이션에서 사용되며, 현재 많은 웹 애플리케이션에서 필수적인 기술 중 하나. |
2006년. jQuery 등장으로 크로스 브라우징 이슈 해결.
2009년. Node.js의 등장. 탈브라우징(웹브라우저를 벗어나 서버사이드 애플리케이션의 개발에도 사용).
Node.js 서버 측 자바스크립트 런타임 환경으로, Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임. 자바스크립트를 서버 측에서 실행할 수 있으며, 비동기적인 이벤트 기반 프로그래밍을 지원하여 대규모 네트워크 애플리케이션을 개발할 수 있음. 매우 빠른 속도와 확장성을 제공하며, 대규모 데이터를 처리하고 다중 사용자 요청을 처리하는 데 적합함. 또한, NPM(Node Package Manager)과 함께 제공되어, 수많은 오픈 소스 패키지와 모듈을 제공하며, 이를 사용하여 개발 시간과 비용을 줄일 수 있음. 다양한 기능과 높은 성능, 확장성으로 현재 많은 기업 및 개발자들이 다양한 웹 애플리케이션과 서비스에 사용. |
SPA(Single Page Application) 하나의 HTML 페이지에서 필요한 데이터만 로드하고, 자바스크립트를 사용하여 동적으로 컨텐츠를 업데이트하는 웹 애플리케이션. 전통적인 멀티페이지 애플리케이션과는 다르게, 페이지 전환 없이 사용자 경험을 제공함. 일반적으로 React, Vue.js, AngularJS와 같은 프론트엔드 자바스크립트 프레임워크를 사용하여 개발됨. 단일 페이지로 구성되어 있으므로, 초기 로딩 시간이 빠르고, 서버에서 보내는 데이터 양이 적음. 이러한 이점으로, SPA는 모바일 애플리케이션에서 많이 사용됨. |
Typescript MS에서 개발한 오픈소스 프로그래밍 언어. JavaScript의 상위 집합 언어로서, 정적 타입 검사, 클래스, 인터페이스 등의 객체 지향적인 기능을 제공. JavaScript와의 호환성이 높으며, 자바스크립트의 모든 라이브러리와 프레임워크를 사용할 수 있음. 또한, 코드의 가독성과 유지보수성을 향상시키는 기능들을 제공. AngularJS와 함께 많이 사용되며, 현재는 React, Vue.js, Node.js와 같은 다양한 프로젝트에서도 널리 사용되고 있음. |
2. Javascript의 특징
* 객체 기반의 스크립트 언어.
* 대소문자를 구별.
* 문장 끝에 세미콜론(;)을 사용. (ECMA 6부터는 생략이 가능함.)
3. Javascript의 실행순서
위에서 아래로 실행. (인터프리터 방식의 특징)
<head></head> 사이에 넣었을 경우
html문서의 시작 → <head>에 있는 <script>를 다운로드/실행 → body에 있는 HTML 태그를 실행 → 끝
의 순서로 진행.
(외부에 있는 script 파일을 사용하고 이 파일의 다운로드가 늦는 경우, 빈 화면이 보일 수 있음.)
<body></body> 사이(</body> 바로 이전) 에 넣었을 경우
html문서의 시작 → body에 있는 HTML 태그를 실행 → <script>를 다운로드/실행 → 끝
불완전한 HTML이 먼저 보여 잘못된 UI가 표시될 수 있음.
이러한 이유들로, Javascript 파일들의 위치를 잘 파악하고 넣는 것이 중요.
<script async>를 사용할 경우
html문서의 시작 → <script>를 동시에 다운로드/실행 → body에 있는 HTML 태그를 실행 → 끝
script 파일이 여러 개 있는 경우, 먼저 다운로드된 script 파일을 먼저 실행하게 됨.
script 파일이 서로 연관성이 있는 경우, 하나의 스크립트만 실행했을 때 문제가 발생할 수 있음.
이러한 문제로 <script async>는 잘 사용되지 않음.
비동기적(Asynchronous) 어떤 작업을 실행할 때 해당 작업이 완료될 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 방식. 이러한 방식은 작업이 실행되는 동안 다른 코드를 실행할 수 있으므로, 시스템 전체적인 성능을 향상시킬 수 있음. 예를 들어, 웹 페이지에서 서버로 데이터를 요청할 때 데이터 요청이 완료될 때까지 대기하지 않고 다른 작업을 처리하는 것. 이러한 경우, 데이터 요청이 완료되면 콜백 함수를 호출하여 데이터를 처리할 수 있음. 더 효율적이고 성능이 우수한 애플리케이션을 개발할 수 있다는 장점이 있음. |
<script defer>를 사용할 경우
html문서의 시작 → <script>를 다운로드/실행 → body에 있는 HTML 태그를 실행 → 끝
html이 먼저 시작된 후 script 파일의 다운로드/실행을 동시에 진행.
script 실행은 페이지의 구성이 모두 끝날때까지 지연됨.
script의 순서에 따라 실행됨.
불완전한 HTML이 보일 확률이 없음.
실제로 가장 좋은 방법은 2)와 4)를 합해서 사용하는 것이지만, 많이 사용되지 않음.
4. Javascript의 출력
Web API Console을 통해 브라우저 Console 창에 출력.
<script></script> 사이에 사용하여 출력
<head></head>, <body></body>에 <script></script>를 넣어 사용.
예)
<head> <title>1. 자바스크립트 출력</title> <script> console.log('안녕하세요. Javascript 1'); </script> </head> <body> <h2>자바스크립트 출력</h2> </body> |
<script src="파일명"></script>를 사용하여 출력
외부 자바스크립트인 .js 확장자 파일을 사용.
예)
| <head> <title>1. 자바스크립트 출력</title> </head> <body> <h2>자바스크립트 출력</h2> <script defer src="./1_외부자바스크립트.js"></script> </body> |
| < '1_외부자바스크립트.js' 파일> console.log('안녕하세요. Javascript 2'); |
5. 변수
데이터를 저장할 수 있는 메모리공간.
값이 변경될 수 있음.
JavaScript의 변수는 type이 없음.
★ 항상 let 키워드를 사용하여 변수를 선언해야 함.
let
지역변수, 전역변수의 구별이 확실함.
같은 이름의 변수를 선언할 수 없음.
let 변수명 = 값 ; (한줄) 또는 let 변수명 ; 변수명 = 값 ; (두줄) |
var
유연한 변수 선언 방식.
지역변수, 전역변수의 구별이 없음.
같은 이름의 변수를 선언할 수 있음.
console.log(num);
var num = 10;
{
console.log(num); // 전역변수 num = 10
var num = 20; // 지역변수 num = 20
}
console.log(num) // 전역변수 num = 20
과 같이 오류가 발생하는 치명적인 단점이 있음.
거의 사용하지 않음. 사용하면 안됨.
6. 상수
한번 선언된 상수는 다시 재정의할 수 없음 → 값을 재할당할 수 없음. (python에서의 tuple과 유사한 개념.)
const 상수명 = 값 ; (변수와 달리 두줄로 사용할 수 없음.) 예) const num = 10 ; |
JavaScript에서 상수를 권장하는 이유:
* 해킹 방지 목적.
* 개발자 실수 방지 목적.
<head> <title>상수</title> </head> <body> <h2>상수</h2> <script> // const str; // str = '김사과'; 구문 오류 발생. (Uncaught SyntaxError: Missing initializer in const declaration) const str = '김사과'; console.log(str); // Javascript 객체(object) 생성 방법. python의 dict 작성법과 동일. const obj = {id: 'apple', name:'김사과', gender:'여자'}; console.log(obj.id); // 객체(object)의 요소들 확인 방법. console.log(obj.name); console.log(obj.gender); // obj = '오렌지'; // console.log(obj); 오류 발생. 상수이므로 새로운 객체의 추가가 안된다. (Uncaught TypeError: Assignment to constant variable.at 3.상수.html:23:13)) obj.id = 'banana'; obj.name = '반하나'; console.log(obj.id); console.log(obj.name); // 상수 객체 내부의 값은 변경이 가능. (정확히는, 내부의 값을 가리키는 주소의 변경.) </script> </body> |
7. 데이터 타입(Data Type)
프로그램에서 다룰 수 있는 값의 종류.
JavaScript는 선언 시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음.
JavaScript의 타입 유연성을 해결하기 위해 Typescript가 탄생.
7-1. 숫자형(number)
정수와 실수를 따로 구분하지 않음. (python과의 차이.)
모든 수를 실수 하나로만 표현.
| const num1 = 10 ; const num2 = 11.11 ; const num3 = 10e6 ; // 10의6승 console.log(num1) ; console.log(num2) ; console.log(num3) ; console.log(typeof(num1)) ; type : number console.log(typeof(num2)) ; type : number console.log(typeof(num3)) ; type : number |
7-2. 문자형(string)
''(홑따옴표), ""(쌍따옴표), ``(백쿼트)로 둘러싸인 문자의 집합.
예) num = 10
"입력한 숫자는" + num + "입니다.";
`입력한 숫자는 ${num} 입니다.`;
→ "입력한 숫자는 10입니다." 로 출력
const num4 = 10; const num5 = 5; const str1 = 'Hello JavaScript'; const str2 = 'Hello World'; const str3 = '10'; console.log(num4+num5); // 15 출력. console.log(num4+str1); // 10Hello Javascript 출력. console.log(str1+str2); // Hello JavaScriptHello World 출력. console.log(str1+' '+str2); // Hello JavaScript Hello World 출력. console.log(`Javascript에서는 문자열을 쌍따옴표 또는 따옴표로 둘러싸인 집합을 의미`); // 줄바꿈 그대로 반영하여 출력. console.log(`str1: ${str1}, str2:${str2}`) // str1: Hello JavaScript, str2:Hello World 출력. console.log(num4+str3); // 1010 출력 console.log(num4-str3); // 0 출력 (str3이 자동 형변환이 발생하여 10으로 인식하여 연산이 가능해짐.) console.log(num4*str3); // 100 출력. 곱하기, 나누기도 자동 형변환이 가능. |
7-3. 논리형(boolean)
참(true)과 거짓(false)으로 표현되는 값.
false, 0, '', "", null, undefined는 모두 거짓(false)으로 판정함.
false가 아닌 값은 모두 참(true)으로 판정함.
첫글자가 모두 소문자로 표현. (python에서는 모두 첫글자가 대문자.)
const b1 = true; const b2 = false; const b3 = (10 > 5); // true 출력. const b4 = (10 < 3); // false 출력. console.log(b1); console.log(b2); console.log(b3); console.log(b4); console.log(typeof(b1)); // boolean 출력. |
7-4. undefined, null
undefined: 타입이 정해지지 않은 타입을 의미. (변수 선언 후 값이 정해지지 않음.)
null: null을 저장한 값. 값이 없는 것.
let num; console.log(num); // undefined가 출력. let obj = null; console.log(obj); // null이 출력. |
let num; console.log(num); // undefined 출력 console.log(typeof(num)); // undefined 출력 let obj1 = { } ; console.log(obj1); // object 출력 console.log(typeof(obj1)); // object 출력 ( { } 의 내용이 비어있어도, 타입은 object.) let obj2 = null; console.log(obj2); // null 출력 console.log(typeof(obj2)); // object 출력 |
7-5. 심볼형(symbol)
python에는 없는 JavaScript 고유의 타입.
유일하고 변경 불가능한 기본값을 만듦.
객체 속성의 key로 사용.
예)
const sym1 = Symbol('Apple'); // Symbol('Apple') 출력 const sym2 = Symbol('Apple'); // Symbol('Apple') 출력 console.log(sym1 == sym2); // 값이 같은지의 여부를 비교. 각각의 identity값이 상이하므로 false가 출력. console.log(sym1 === sym2); // 데이터 타입과 값이 같은지의 여부를 비교. 각각의 identity값이 상이하므로 false가 출력. |
const sym1 = Symbol('Apple') ; const sym2 = Symbol('Apple') ; console.log(sym1) ; // Symbol('Apple') 출력 console.log(sym2) ; // Symbol('Apple') 출력 console.log(sym1 == sym2) ; // false가 출력 console.log(sym1 === sym2) ; // false가 출력 const sym3 = sym1; console.log(sym3 == sym1) ; // true가 출력 (같은 곳을 가리키는 주소를 저장) console.log(sym3 === sym1) ; // true가 출력 (같은 곳을 가리키는 주소를 저장) |
7-6. 객체형(object)
어떤 속성을 하나의 변수에 저장할 수 있게 해주는 집합.
key, value pair 구조로 저장됨.
| const user = {userid:'apple', name:'김사과', age:20} -------- -------- key value |
자바스크립트의 변수는 type이 고정되어있지 않으며 같은 변수에 다른 type의 값을 대입할 수 있음.
let user = {userid:'apple', name:'김사과', age:20} let user = '김사과'; |
(type을 객체형 → 문자형으로 변경이 가능)
const user = {'userid':'apple', 'name':'김사과', 'age':20} ; console.log(user) ; // 'userid':'apple', 'name':'김사과', 'age':20 console.log(user.userid) ; // apple console.log(user.name) ; // 김사과 console.log(user.age) ; // 20 console.log(`유저의 아이디는 ${user.userid}, 이름은 ${user.name}, 나이는 ${user.age}입니다.`) ; // 유저의 아이디는 apple, 이름은 김사과, 나이는 20입니다. |
8. 자동 타입 변환
특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용.
const num4 = 10 ; const str3 = '10' ; console.log(num4 + str3); console.log(num4 - str3); console.log(num4 * str3); console.log(num4 / str3); |
NaN(Not a Number) 정의되지 않은 값이나 표현할 수 없는 값을 의미. 숫자로 변환할 수 없는 연산을 시도했을 때 출력되는 오류. 예) const char = '삼십'; result = char - 10; // result의 값은 NaN |
9. 타입변환 함수
강제로 타입을 변환할 수 있음.
Number(): 문자형 → 숫자형.
String(): 숫자형/불린형 → 문자형.
Boolean(): 문자형/숫자형 → 불린형.
Object(): 모든자료형 → 객체형.
parseInt(): 문자형 → int형.
parseFloat(): 문자형 → float형.
| console.log(10+'문자열') ; // 10문자열 console.log('3' * '5') ; // 15 console.log(1-'문자열') ; // NaN const num1 = '10' ; const num2 = '5' ; console.log(`현재 num1의 타입: ${typeof(num1)}`) ; // 현재 num1의 타입: string console.log(`현재 num2의 타입: ${typeof(num2)}`) ; // 현재 num2의 타입: string // Number(num1): number, 10 console.log(`Number(num1): ${typeof(Number(num1))}, ${(Number(num1))}`) ; // String(num1): string, 10 console.log(`String(num1): ${typeof(String(num1))}, ${(String(num1))}`) ; // Boolean(num1): boolean, true console.log(`Boolean(num1): ${typeof(Boolean(num1))}, ${(Boolean(num1))}`) ; //object, 10 console.log(`Object(num1): ${typeof(Object(num1))}, ${(Object(num1))}`) ; // parseInt(num1): number, 10 (javascript는 int형이 없음 → number형으로 출력) console.log(`parseInt(num1): ${typeof(parseInt(num1))}, ${(parseInt(num1))}`) ; // parseFloat(num1): number, 10 (javascript는 float형이 없음 → number형으로 출력) console.log(`parseFloat(num1): ${typeof(parseFloat(num1))}, ${(parseFloat(num1))}`) ; console.log(`num1 + num2 = ${num1 + num2}`) ; // 105 (문자열끼리의 합이므로 연결) console.log(`num1 + num2 = ${Number(num1) + Number(num2)}`) ; // 15 console.log(`num1 + num2 = ${parseInt(num1) + parseFloat(num2)}`) ; // 15 |
Web API 브라우저에서 제공하는 API. (Application Programming Interface) 웹 기반의 서비스를 다른 애플리케이션에서 사용할 수 있도록 인터페이스를 제공하는 것 프로그램들과 기능들의 상호 통신 방법을 규정하고 도와주는 매개체. |
사용자에게 메시지를 표시하고 응답을 받을 수 있는 함수.
alert():
확인을 기다림.
alert('안녕하세요 자바스크립트!') ; |
comfirm():
확인이나 취소를 누르면 그 결과를 Boolean값으로 반환.
const result = confirm('확인 또는 취소를 눌러주세요') ; console.log(result) ; |
'반환' result 일 경우는 '변수'에 담아주어야 함.
'확인'을 누르면 true가 출력, '취소'를 누르면 false가 출력.
prompt():
사용자가 입력한 문자열을 반환.
const result = prompt('당신의 이름을 입력하세요') ; console.log(result) ; 현재 나이를 구하고 싶은 경우 const year = prompt('당신의 출생년도를 입력하세요') ; console.log(2023 - year) ; const num1 = prompt('첫번째 숫자를 입력하세요') ; const num2 = prompt('두번째 숫자를 입력하세요') ; console.log(num1+num2) ; // 100200 출력. (받으면 모두 string으로 가져와 문자열이 되어 연결됨.) console.log(Number(num1)+Number(num2)) ; // 300 출력. |
'반환' result 일 경우는 '변수'에 담아주어야 함.
입력한 내용이 출력됨.
TIP
* CSS, JavaScript가 웹페이지에 제대로 반영되지 않을 경우 해결하는 방법.
1) [F12], 새로고침 버튼을 마우스로 홀드한 상태에서 '강력 새로고침'을 선택
2) Ctrl + Shift + R
* JavaScript는 최신 문법을 공부하여 사용하는 것이 좋음.
