목차
0. 자바 스크립트 (javascript) 란 ?
- 웹 페이지에 생동감을 불어넣기 위해 브라우저를 대상으로 만들어진 프로그래밍 언어 (스크립트 언어)
- 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부름
- 스크립트 : 컴파일 없이 보통의 문자 형태로 작성 가능, 실행 가능
1. 자바 스크립트 파일을 HTML 파일과 연동하는 방법
<!-- html 파일 -->
<body>
<script src = "자바스크립트 파일(경로)"></script>
</body>- body 태그 안에 script 태그 작성! ⇒ (속성 src = “파일명 (경로 포함)”)
1-1. 출력 결과 확인
- 브라우저의 개발자 도구 (mac : cmd+option+i / window : F12) 에서 console 탭에서 확인 가능!
2. 자바 스크립트 기본 문법
2-0. 출력 : System.out.println()과 유사
console.log(출력하고 싶은 값);2-1. 변수
var animal; // 변수 선언
animal = "monkey"; // 변수 초기화
var 동물 = "animal"; // 변수 선언 & 초기화2-1-1. 상수
const car = "자동차"; // 자바의 final과 유사
car = "레이싱카"; // 에러 -> 상수는 변경 불가!2-1-2. 변수 → 동적 타이핑
- 변수가 담는 값에 따라 형(타입, type)을 동적으로 바꿈
var fruit = "string Fruit"; // 스트링(string) 타입
console.log(typeof fruit);
fruit = 2; // 숫자(number) 타입
console.log(typeof fruit);
2-2. 데이터 타입
- String : 문자열
- ex) “hello world”, “20”, “a” 등
- length, charAt(인덱스), split(구분문자열)
- Number : 숫자
- ex) 10, -10, 3.14 등 (정수, 실수, 음수 등 구분없음!)
- 문자 → 숫자 메서드 parseInt(문자열) , parseFloat(문자열)
- Function : 함수
- Array : 배열
- Object : 객체
- Boolean : 불린 타입
- undefined : 정의되지 않음
- null : 널
📌 undefined vs null
- undefined : 값이 초기화 되어 있지 않은 상태
- null : 값이 비어있음을 의도적으로 표시한 상태
2-2-1. 타입 확인
typeof 변수
2-3. 배열 Array
var fruitList = ["사과", "바나나", "포도"];
console.log(fruitList); // ['사과', '바나나', '포도']
console.log(fruitList[0]); // 사과
console.log(fruitList[1]); // 바나나
console.log(fruitList[2]); // 포도
- 자바와 동일하게 인덱스로 배열 접근
2-3-1. 배열의 내장 프로퍼티와 메서드
fruitList = ["사과", "바나나", "포도"];
// 배열의 길이 반환
fruitList.length;
// 배열의 맨 뒤에 요소 추가 => 내장함수 push()
fruitList.push("딸기");
console.log(fruitList); // ['사과', '바나나', '포도', '딸기']
// 배열의 맨 앞에 요소 추가 => unshift()
fruitList.unshift("레몬");
console.log(fruitList); // ['레몬', '사과', '바나나', '포도', '딸기']
// 배열의 맨 앞 요소 제거 => shift()
fruitList.shift();
console.log(fruitList); // ['사과', '바나나', '포도', '딸기']
// 배열의 맨 뒤 요소 제거 => pop()
fruitList.pop();
console.log(fruitList); // ['사과', '바나나', '포도']
// 배열의 요소 인덱스 반환 => indexOf()
console.log(fruitList.indexOf("사과")); // 0- length : 배열의 길이 반환
- push() : 배열의 맨 뒤에 요소 추가
- unshift() : 배열의 맨 앞에 요소 추가
- shift() : 배열의 맨 앞 요소 제거
- pop() : 배열의 맨 뒤 요소 제거
- indexOf() : 특정 요소 인덱스 반환
2-4. 함수 Function
// 함수 선언
function add (a, b) {
return a + b;
}
// 함수를 변수로 선언
var addFunc = function (a, b) {
return a + b;
}
// 함수 호출
add(1, 2);
var sum = add(3, 4);
var sumString = add("hello", " world!");
2-5. 객체 Object
var person = {
// 객체의 프로퍼티 -> 키 : 값 형태
name: "홍길동",
age: 20,
skills: ["JS", "JAVA", "SQL"],
// 객체의 메서드
sum: function(num1, num2) {
return num1 + num2;
}
}
console.log(person);
// { name: '홍길동', age: 20, skills: [ 'JS', 'JAVA', 'SQL' ], sum: [Function: sum] }
console.log(person.skills); // ['JS', 'JAVA', 'SQL']
console.log(person['skills']); // ['JS', 'JAVA', 'SQL']
console.log(person.name + "은 " + person.age + "살입니다."); // 홍길동은 20살입니다.
2-6. 연산자
2-6-1. 산술 연산자
// number 타입
console.log(20 + 10); // 30
console.log(20 - 10); // 10
console.log(20 * 10); // 200
console.log(20 / 10); // 2
console.log(20 % 10); // 0
// string 타입
console.log("20" + "10"); // 2010
console.log("20" - "10"); // 10
console.log("20" * "10"); // 200
console.log("20" / "10"); // 2
console.log("20" % "10"); // 0
- String 타입의 연산 ⇒ + 제외하고 number 타입의 연산과 동일!
2-6-2. 증감 연산자
var num = 10;
// 전위 증감자
console.log(++num); // 11
console.log(--num); // 10
// 후위 증감자
console.log(num++); // 10 (다음 줄에서 11이 됨)
console.log(num--); // 11 (다음 줄에서 10이 됨)
2-6-3. 비교 연산자
console.log(10 == 20); // false
console.log(10 === "10"); // false
console.log(10 !== "10"); // true
console.log(10 > 20); // false
console.log(10 >= 20); // false
console.log(10 < 20); // true
console.log(10 <= 20); // true
📌 == vs ===
- == : 값이 같은지 비교
- === : 값 뿐만 아니라 데이터 타입도 같은지 비교 </aside>
2-6-4. 논리 연산자
- 자바와 동일
- && : AND
- || : OR
- ! : NOT
2-7. 조건문
- if 문
- if-else 문
- if-else if-else 문
if(age < 10) {
console.log("어린이 입니다.");
} else if(age < 20) {
console.log("청소년 입니다.");
} else {
console.log("성인입니다.");
}
2-8. 반복문 - for, while
- for 문
for(var i=0; i <= 9; i++) {
console.log(i);
}- while 문 (do-while 문)
while(num<10) {
console.log(num);
num++;
}
do {
console.log(num);
num++;
}while (num<10);'FE' 카테고리의 다른 글
| [JS] JavaScript - 이벤트, 이벤트 핸들러 (0) | 2024.08.11 |
|---|---|
| [JS] JavaScript - DOM (0) | 2024.08.11 |
| [CSS] CSS 기본 정리 (0) | 2024.08.11 |
0. 자바 스크립트 (javascript) 란 ?
- 웹 페이지에 생동감을 불어넣기 위해 브라우저를 대상으로 만들어진 프로그래밍 언어 (스크립트 언어)
- 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부름
- 스크립트 : 컴파일 없이 보통의 문자 형태로 작성 가능, 실행 가능
1. 자바 스크립트 파일을 HTML 파일과 연동하는 방법
<!-- html 파일 -->
<body>
<script src = "자바스크립트 파일(경로)"></script>
</body>- body 태그 안에 script 태그 작성! ⇒ (속성 src = “파일명 (경로 포함)”)
1-1. 출력 결과 확인
- 브라우저의 개발자 도구 (mac : cmd+option+i / window : F12) 에서 console 탭에서 확인 가능!
2. 자바 스크립트 기본 문법
2-0. 출력 : System.out.println()과 유사
console.log(출력하고 싶은 값);2-1. 변수
var animal; // 변수 선언
animal = "monkey"; // 변수 초기화
var 동물 = "animal"; // 변수 선언 & 초기화2-1-1. 상수
const car = "자동차"; // 자바의 final과 유사
car = "레이싱카"; // 에러 -> 상수는 변경 불가!2-1-2. 변수 → 동적 타이핑
- 변수가 담는 값에 따라 형(타입, type)을 동적으로 바꿈
var fruit = "string Fruit"; // 스트링(string) 타입
console.log(typeof fruit);
fruit = 2; // 숫자(number) 타입
console.log(typeof fruit);
2-2. 데이터 타입
- String : 문자열
- ex) “hello world”, “20”, “a” 등
- length, charAt(인덱스), split(구분문자열)
- Number : 숫자
- ex) 10, -10, 3.14 등 (정수, 실수, 음수 등 구분없음!)
- 문자 → 숫자 메서드 parseInt(문자열) , parseFloat(문자열)
- Function : 함수
- Array : 배열
- Object : 객체
- Boolean : 불린 타입
- undefined : 정의되지 않음
- null : 널
📌 undefined vs null
- undefined : 값이 초기화 되어 있지 않은 상태
- null : 값이 비어있음을 의도적으로 표시한 상태
2-2-1. 타입 확인
typeof 변수
2-3. 배열 Array
var fruitList = ["사과", "바나나", "포도"];
console.log(fruitList); // ['사과', '바나나', '포도']
console.log(fruitList[0]); // 사과
console.log(fruitList[1]); // 바나나
console.log(fruitList[2]); // 포도
- 자바와 동일하게 인덱스로 배열 접근
2-3-1. 배열의 내장 프로퍼티와 메서드
fruitList = ["사과", "바나나", "포도"];
// 배열의 길이 반환
fruitList.length;
// 배열의 맨 뒤에 요소 추가 => 내장함수 push()
fruitList.push("딸기");
console.log(fruitList); // ['사과', '바나나', '포도', '딸기']
// 배열의 맨 앞에 요소 추가 => unshift()
fruitList.unshift("레몬");
console.log(fruitList); // ['레몬', '사과', '바나나', '포도', '딸기']
// 배열의 맨 앞 요소 제거 => shift()
fruitList.shift();
console.log(fruitList); // ['사과', '바나나', '포도', '딸기']
// 배열의 맨 뒤 요소 제거 => pop()
fruitList.pop();
console.log(fruitList); // ['사과', '바나나', '포도']
// 배열의 요소 인덱스 반환 => indexOf()
console.log(fruitList.indexOf("사과")); // 0- length : 배열의 길이 반환
- push() : 배열의 맨 뒤에 요소 추가
- unshift() : 배열의 맨 앞에 요소 추가
- shift() : 배열의 맨 앞 요소 제거
- pop() : 배열의 맨 뒤 요소 제거
- indexOf() : 특정 요소 인덱스 반환
2-4. 함수 Function
// 함수 선언
function add (a, b) {
return a + b;
}
// 함수를 변수로 선언
var addFunc = function (a, b) {
return a + b;
}
// 함수 호출
add(1, 2);
var sum = add(3, 4);
var sumString = add("hello", " world!");
2-5. 객체 Object
var person = {
// 객체의 프로퍼티 -> 키 : 값 형태
name: "홍길동",
age: 20,
skills: ["JS", "JAVA", "SQL"],
// 객체의 메서드
sum: function(num1, num2) {
return num1 + num2;
}
}
console.log(person);
// { name: '홍길동', age: 20, skills: [ 'JS', 'JAVA', 'SQL' ], sum: [Function: sum] }
console.log(person.skills); // ['JS', 'JAVA', 'SQL']
console.log(person['skills']); // ['JS', 'JAVA', 'SQL']
console.log(person.name + "은 " + person.age + "살입니다."); // 홍길동은 20살입니다.
2-6. 연산자
2-6-1. 산술 연산자
// number 타입
console.log(20 + 10); // 30
console.log(20 - 10); // 10
console.log(20 * 10); // 200
console.log(20 / 10); // 2
console.log(20 % 10); // 0
// string 타입
console.log("20" + "10"); // 2010
console.log("20" - "10"); // 10
console.log("20" * "10"); // 200
console.log("20" / "10"); // 2
console.log("20" % "10"); // 0
- String 타입의 연산 ⇒ + 제외하고 number 타입의 연산과 동일!
2-6-2. 증감 연산자
var num = 10;
// 전위 증감자
console.log(++num); // 11
console.log(--num); // 10
// 후위 증감자
console.log(num++); // 10 (다음 줄에서 11이 됨)
console.log(num--); // 11 (다음 줄에서 10이 됨)
2-6-3. 비교 연산자
console.log(10 == 20); // false
console.log(10 === "10"); // false
console.log(10 !== "10"); // true
console.log(10 > 20); // false
console.log(10 >= 20); // false
console.log(10 < 20); // true
console.log(10 <= 20); // true
📌 == vs ===
- == : 값이 같은지 비교
- === : 값 뿐만 아니라 데이터 타입도 같은지 비교 </aside>
2-6-4. 논리 연산자
- 자바와 동일
- && : AND
- || : OR
- ! : NOT
2-7. 조건문
- if 문
- if-else 문
- if-else if-else 문
if(age < 10) {
console.log("어린이 입니다.");
} else if(age < 20) {
console.log("청소년 입니다.");
} else {
console.log("성인입니다.");
}
2-8. 반복문 - for, while
- for 문
for(var i=0; i <= 9; i++) {
console.log(i);
}- while 문 (do-while 문)
while(num<10) {
console.log(num);
num++;
}
do {
console.log(num);
num++;
}while (num<10);'FE' 카테고리의 다른 글
| [JS] JavaScript - 이벤트, 이벤트 핸들러 (0) | 2024.08.11 |
|---|---|
| [JS] JavaScript - DOM (0) | 2024.08.11 |
| [CSS] CSS 기본 정리 (0) | 2024.08.11 |
