1. 역할
-
웹사이트의 주요 기능을 제작
https://www.apple.com/kr/imac-24/
https://greensock.com/gsap/
-
하이브리드앱 개발
-
node.js : 자바스크립트 언어로 구성되어있는 서버 개발을 도와주는 도구
-
자바스크립트 iot : 자바스크립트로 iot 구현 가능
2. 특징
- high level language : 인간에게 친숙한 개발 언어, 빠르게 습득할 수 있다.
※ low level language : 기계가 이해하기 쉬운 언어
3. 분야
-
자바스크립트 코어 : 개발 언어의 음법적인 내용
-
클라이언트 측 자바스크립트 : 브라우저 제어
-
서버 측 자바스크립트 : 서버 개발(node.js)
-
일반적으로 자바스크립트 코어,클라이언트 측 자바스크립트를 학습
4. 자바스크립트 적용방법
- script 태그 안에 직접 적용
console.log("“);: 괄호 안의 내용을 console 탭에 표시하고자 할 때 사용하는 코드
console.aaa("“);: Error
- js 파일 따로 생성하여 연동
※ js 파일을 연동할 때 사용되는 태그에 자바스크립트 코드를 넣으면 적용되지 않는다.
5. 주석 처리 방법
- 전체 주석 안에 전체 주석 사용할 수 없다.
- 전체 주석 안에 한줄 주석 사용할 수 있다.
6. 변수 : 데이터를 저장하는 공간
- 변수 선언, 변수 초기화
-
변수 선언 ＋ 변수 초기화
-
변수 동시 선언/변수 동시 초기화
-
모든 변수는 선언과 동시에 undefined 자동으로 할당된다.
-
변수 작성 요령
- 최소 두 개 단어의 조합으로 최대한 구체적으로 작성
- 하이픈은 자바스크립트에서 사용할 수 없다. (케밥 케이스)
- 케멀 케이스를 더 많이 사용한다.
- 첫글자에 제한적으로 특수문자를 사용할 수 있다.
- 알파벳 + 숫자 조합으로 만들 수 있지만 숫자가 앞으로 나올 수 없다.
7. 데이터 타입 = 데이터의 종류
- 원시 타입 : 문자열/숫자/논리/undefined/null
- 참조 타입 : 배열/함수/객체
7-1. 문자열 (String)
- console 창에 검은색으로 표시된다.
- 공백도 문자로 표시된다.
- 긴 공백 가능하다.
7-2. 숫자 (Number)
- console 창에 파란색으로 표시된다.
연산자
- 산술 연산자
- 할당 연산자
- 비교 연산자
- ==, != : 피연산자의 자료형을 자동으로 변환한다. 값만 비교한다.
- ===, !== : 피연산자의 자료형을 변환하지 않는다. 값 + 자료형을 비교한다.
- 논리 연산자
7-3. 논리 (Boolean)
7-4. null, undefined
- null : 변수 초기화로 명시적으로 빈 값을 변수 안에 할당한 상태
- undefined : 변수를 선언만 한 상태
- null과 undefined 차이점 1 ( typeof null = object 인 이유 : 버그 )
- null과 undefined 차이점 2 : 자료형이 다르다.
- null과 undefined 차이점 3 : 부정 연산자의 적용
- null과 undefined 차이점 4 : 사칙 연산자
7-5. 함수
- 함수 선언/함수 호출
- Parameter(매개변수), Argument(인수) : 모든 데이터 타입 가능
- 예시 1 : fullName
- 호출 시 인자의 개수가 맞지 않을 때
- return
7-6. 배열 (Array)
- 배열의 데이터 타입
- 배열은 가능한 동일한 데이터 타입을 가지는 것이 좋다.
- 배열은 가능한 동일한 성격의 데이터를 가지는 것이 좋다.
- 배열 안에 있는 배열 데이터에 접근하는 방법
7-7. 객체 (Object)
- 객체 안에 함수를 넣을 때 function 뒤에 함수명을 기입하지 않아도 된다.
: 메서드 (원래 함수와 별개)
: 예) log은 console이라는 객체 안에 있는 메서드이다.
원시타입, 참조타입 차이점
-
원시타입 : 원본/복사본이 서로에게 영향을 주지 않는다.
-
참조타입 : 원본이 수정되면 복사본에 영향을 준다.
8. 응용
1 ~ 6 숫자를 랜덤하게 가져오는 게임
[html]
<div id="color_bg">
<button id="btn" type="button">클릭</button>
</div>[style.css]
#color_bg {
width: 500px;
height: 500px;
background-color: black;
}
#btn {
width: 100px;
height: 50px;
background-color: purple;
font-size: 20px;
color: #ffffff;
line-height: 50px;
}[main.js]
var colors = [
'yellow',
'green',
'pink',
'#dc143c',
'rgba(123, 123, 123, 0.5)'
];
var bg = document.getElementById('color_bg');
console.log(bg);
var btn = document.getElementById('btn');
console.log(btn);
btn.addEventListener('click', function() {
// 0 ~ 4
var random = Math.floor(Math.random() * 5);
bg.style.backgroundColor = colors[random];
})-
클라이언트 측 자바스크립트(html, 브라우저 제어)
-
콜백 함수 : 호출 기호 없이 특정 조건 하에 호출되는 함수
->btn.addEventListener(): click 했을 때 함수를 호출 -
java에 css 적용하기
: background-color -> backgroundColor
: border-radius -> borderRadius
9. 주의사항
-
예약어 : var, typeof, function, null, undefined, false, true, console
예약어를 변수 이름으로 사용하면 Error -
여러개의 js 파일은 html에 연동된 순서대로 적용된다.
-
다른 js 파일에서 선언한 변수/함수를 다른 js 파일에서 사용할 수 있다.
단, 먼저 연동된 파일에서 선언해야 한다.
