▶ 자바스크립트(JavaScript)
웹브라우저에서 웹 객체를 제어하기 위한 스크립트 프로그래밍 언어.
→ 웹의 Element를 제어한다.
HTML : 정보
CSS : 디자인
JavaScript : 정보와 디자인을 제어한다.
자바스크립트의 특징
- 모든 웹 브라우저에서 사용 가능한 유일한 언어.
- React, Angular, Vue.js, Backbone.js, JQuery 등 고급 라이브러리의 기반 언어
- Back-End 영역까지 확대 (Node.js)
- 데스트톱 및 모바일 애플리케이션의 개발에 확대
- 애플리케이션 내장 언어로 활용 – Google Apps, MINECRAFT 등.
* JavaScript 표준
ECMAScript (유럽컴퓨터제조협회), ES6를 주로 사용.
▶ 브라우저의 모든 기능(사용자 기능, 시스템 기능, Element set)을 JavaScript가 Handling 할 수 있다.
<head>에서 handling.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
console.log("Hello World")
alert('HI World')
</script>
</head>
<body>
</body>
</html>
<body>에서 handling.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
</script>
</head>
<body>
<script>
document.body.innerHTML += "<h1>Hello world</h1>"
document.body.innerHTML += "<h1>Hello Korea</h1>"
</script>
</body>
</html>
* REPL(Read - Eval - Print loop) 단일 사용자의 입력을 취하고 이를 평가(실행)하고 결과를 사용자에게 반환시키는 단순한 상호작용 컴퓨터 프로그래밍 환경이다.
▶ 사전 지식
Expression과 Statement
- Expression(표현) : 값을 만들어 내는 코드
EX) 4+5
- Statement : 표현식이 모인 문장, 또는 값을 만들지 않는 문장
EX) console.log('abc');
- 세미콜론은 ASI에 의해 자동을 삽입되나 명시적으로 붙여준다.
주석
- // : <script> 영역에서 사용한다.
- /**/ : <script> 영역에서 사용한다.
- <!-- --> : 비 <script> 영역에서 사용한다.
** ASI : Automatic semicolon insertion
코딩 스타일
- JAVA의 코딩 스타일을 그대로 사용한다.
VSCode 멀티커서
- Ctrl+Alt : 키보드를 이용한 멀티 커서
- Alt+클릭 : 마우스를 이용한 멀티 커서
VSCode 폰트변경
- consolas 폰트가 기본이나 한글+영문 사용 시 글자 크기가 맞지 않음.
- D2 Coding : https://github.com/naver/d2codingfont
- D2 Coding-Ver1.3.2-20180524.zip 1.3.2 배포 다운로드
- 압축을 풀고 D2CodingAll\D2Coding-Ver1.3.2-20180524-all.ttc 실행
- 설치 버튼 클릭
- VS-Code의 설정에서 Font Family를 D2Coding으로 수정
▶ DATA TYPE
자료형의 분류
- 기본형 (Primitive type)과 객체형 (Object type)으로 분류한다.
- ES6에서 Symbol type이 기본형에 추가되었다.
String type
- “string”와 ‘string’를 둘 다 사용 (전통적으로 ‘string’을 사용)
- ES6에서 template string기능이 추가되면서 `string` (backtick)도 사용
- 문자열 합연산 : 문자열 + 문자열
- 인덱스 연산 : [n]
- 길이 : .length
number type
- 숫자형
- 20, 20.5 등으로 표현, 정수형과 실수형의 구별을 하지 않음.
- +, -, *, /, % 연산 사용
boolean 자료형 (bool자료형)
- true, false
- 논리 연산자 적용
- !, ===, !==, >,>=, <, <=
- &&, ||
- ==, != (피연산자의 자료형이 다를 경우 형변환이 발생)
- && (AND) 두 조건이 만족하면 true.
- || (OR) 한 조건이 만족하면 true.
- AND연산이 OR연산 보다 높은 우선순위를 가진다.
- 가시성을 위해서 true || (false && true)로 표기한다.
자바 스크립트는 최대한 결과를 출력하려는 성질을 가지고 있기 때문에 결과에 대해서 100% 신뢰해서는 안된다.
1 == '1'의 답은 숫자와 문자의 비교이기 때문에 비교가 불가능하다.JavaScript에서 비교를 할 땐 ===을 사용해야 한다.
typeof()
- 자료형의 검사
- typeof(1) → number
- typeof(“a”) → string
변수의 선언
- var : ES5의 선언 방식, 모든 변수를 var로 선언, 바꿀 수 있음
- let : ES6의 선언 방식, 일반 변수, 값을 바꿀수 있음
- const : ES6의 선언 방식, 상수화 변수, 선언과 동시에 초기화
<body>
<script>
var value1 = 'apple' //ES5
let value2 = 'nike' //ES6 일반변수
const vlaue3 = 'Micro' //ES6 상수와 변수
</script>
</body>const
- const는 바뀔수 없는 변수, 한정자, 개발자로부터 변수를 보호한다.
- const inputValue = prompt('값을 넣어라.', 'Value');
- const inputValue = prompt 의 리턴값
** var는 중복 선언, 스코프문제 등으로 점차 사라지는 추세이며 구형 코드에서 많이 사용. ES6는 ES5를 호환한다.
*Memory Leak : 컴퓨터 프로그램이 필요하지 않은 메모리를 계속 점유하고 있는 현상이다.
데이터의 입력
- prompt(), 문자열 입력
<body>
<script>
const input = prompt('please input your message.', 'message')
alert(input);
</script>
</body>
- confirm(), boolean의 입력
<script>
const input = confirm('Are you ok?');
alert(input);
</script>
▶ 자료형 변환
number형으로 변환
Number(data)- Number(‘123’) → 123
- Number(‘abc’) → NaN (Not a Number)
- “52” - 0 → 52
- "52" + 1 → 521
- true - 0 → 1
표준적으로 모든 언어는 내부적으로 Flase는 0으로 정의한다. 하지만 ture는 "false가 아닌 값"으로 정의한다.
String 형으로 변환
String(data)- String(54.22) → “54.22”
- String(true) → “true”
boolean형으로 변환
Boolean(data)- Boolean(0) → false
- Boolean(NaN) → false
- Boolean(null) → false
- Boolean(425) → true
▶ 예제
cm를 입력받아 inch를 출력하는 코드를 작성하시오.
<body>
<script>
const input = (prompt('Write down the cm to convert to inch.'));
let inch = input/2.54;
alert(cm + 'inch');
</script>
</body>
원의 반지름을 입력받아 원의 넓이를 구하는 코드를 작성하시오.
<body>
<script>
const input = (prompt('Write down the radius at which you want to find the area of the circle.'));
let area = input*input*3.14;
alert(area);
</script>
</body>
사과, 복숭아, 딸기 를 unordered list로 출력하는 element를 자바스크립트로 출력하는 코드를 작성하시오.
<body>
<script>
document.body.innerHTML = "<ul> <li>사과</li> \
<li>딸기</li> \
<li>복숭아</li> \
</ul>"
</script>
</body>
* \ : JavaScript의 개행문이다.
\
'JavaScript' 카테고리의 다른 글
| [JavaScript] 재귀함수(재귀호출) (0) | 2022.04.11 |
|---|---|
| [JavaScript] unshift, Array.isArray (0) | 2022.04.10 |
| [JavaScript] 함수, 파라미터,재귀함수, 디버깅, +예제 (0) | 2022.04.10 |
| [JavaScript] split, 조건문, 반복문, sort (split, if else, switch, for, while, continue) 예제 (0) | 2022.04.07 |
| [JavaScript] Array(배열) 예제, (length, push, splice.. ) (0) | 2022.04.07 |