JavaScript 고유 태그를 활용하여 HTML에서 JavaScript 작성 가능
JS는 변수 선언을 var와 const, let으로 하고 변수 타입은 JavaScript가 자동 지정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var apple = '사과';
var apple = '애플';
console.log(apple);
var banana = '바나나';
var BANANA = '빠나나';
console.log(banana);
console.log(BANANA);
var my_name = '홍길동';
var $my_name = '홍길동';
var myPhoneNumber = '01012345678'; // camel
var my_phone_number = '01012345678'; // sanke
var MyPhoneNumber = '01012345678'; // pascal
var strMyPhoneNumber = '01012345678'; // hungarian
</script>
</body>
</html>
타입
number : 숫자, 정수, 실수 구분 X
string : 텍스트 문자열
boolean : 논리적 참과 거짓
undefined : 값이 할당하지 않은 변수에 암묵적 할당 값
null : 값이 의도적으로 없다는 것을 명시할 때 사용하는 값
symbol : ES6에서 추가된 타입
java와 다르게 JavaScript 배열은 길이 추가 가능
배열의 인덱스로 접근하여 값 추가 및 수정 가능
배열은 1차원만 가능한 것이 아니라 무수한 차원을 표현할 수 있음
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 배열의 생성
var fruits = ['딸기', '포도', '복숭아', '사과'];
// 배열의 길이 확인
console.log('배열의 길이 : ' + fruits.length);
// 배열 데이터 수정
fruits[2] = '수박';
// 배열 데이터 추가
fruits[4] = '파인애플';
// java에서는 안되지만 JS에서는 array 길이 추가 가능
// 배열 데이터 확인
console.log(fruits);
// 배열 마지막 추가 (인덱스 모를 때 )
fruits[fruits.length] = '맹고';
// 배열 요소 참조
var apple = fruits[3];
// 배열의 반복문 처리
for (i = 0; i < fruits.length; i++){
console.log(`${i+1}번째 과일 : ${fruits[i]}`);
}
// 학생들의 4과목 점수(국영수탐)
var kim = [2, 6, 3, 5];
var lee = [100, 89, 55, 67];
var park = [24, 35, 46, 21];
var student = [kim, lee, park];
var ourstudentscores = [
[2, 6, 3, 5],
[100, 89, 55, 67],
[24, 35, 46, 21]
]
console.log(ourstudentscores);
console.log(ourstudentscores[2]);
// 3번째 학생의 전체 점수
console.log(ourstudentscores[2][2]);
// 3번째 학생의 3번째 점수
</script>
</body>
</html>
pop() : 배열의 마지막 요소를 제거하고 제거한 요소를 반환
push() : 배열의 끝 위치에 요소를 추가
shift() : 배열의 첫번째 요소를 제거하고 제거한 요소를 반환
unshift() : 배열의 첫번째 위치에 요소를 추가
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var foods = ['볶음밥', '자장면', '짬뽕'];
console.log(foods);
// pop
var lastElement = foods.pop();
// 짬뽕을 빼서 lastElement에 넣어줌
console.log(lastElement);
console.log(foods);
// push
foods.push('파슷하');
foods.push('보쌈');
console.log(foods);
// shift
var firstElement = foods.shift();
console.log(firstElement);
console.log(foods);
// unshift
foods.unshift('마라탕');
console.log(foods);
</script>
</body>
</html>
indexOf()
includes()
slice()
reverse()
join()
concat()
splice()
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var foods = ['마라탕', '초밥', '오뎅', '돼지고기', '한우'];
// indexOf()
var idx = foods.indexOf('초밥');
var result = foods.includes('돼지고기');
console.log('탐색 결과 : ' + result);
console.log('===========================================');
var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
// slice)_
var sliced_arr = arr.slice(3, 7);
console.log(sliced_arr);
// 3,4,5,6 으로 slicing됨
// 3부터 7미만
// reverse()
var copyArr = arr.slice(0);
copyArr.reverse();
console.log(copyArr);
// join()
var foodStr = foods.join();
// 배열의 요소를 문자열로 연결
console.log(foodStr)
console.log('=====================================');
// concat()
var arr1 = [10, 20, 30];
var arr2 = [100, 300, 500];
var concatArr = arr1.concat(arr2);
console.log(concatArr);
// splice()
var foods = ['마라탕', '마라샹궈', '양꼬치'];
var delFood = foods.splice(1,2);
console.log(delFood);
console.log(foods);
foods.splice(0,1, '치킨', '파슷하');
// 0번 인덱스부터 1개를 지우고 치킨, 파스타 추가
console.log(foods);
foods.splice(2, 0, '피자');
// 2번 인덱스부터 0개를 지우고 피자를 추가(위치를 지목해서 추가할 수 있음)
foods.splice(2);
console.log(foods);
// 개수를 지정하지 않으면 시작 인덱스 뒤에 있는 요소 모두 삭제
foods.push('보쌈', '닭발', '대창');
var input = '보쌈';
var idx = foods.indexOf(input);
// 인덱스 값 가져옴
if (idx >= 0){
foods.splice(idx, 1);
// idx부터 값 하나만 삭제
console.log('삭제완료');
}else{
console.log('데이터가 없습니다.');
}
</script>
</body>
</html>
JavaScript는 {property:value}로 Object 생성 가능
Obejct의 Property를 참조하기 위해서는 Object.property or Object[’property’]로 참조 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 객체 생성
var dog = {
name: '저글링',
kind: '리트리버',
age: 3,
favorite: ['간식', '산책']
};
var cat = {
name: '마린',
kind: '페르시안',
age: 2,
favorite: ['낮잠', '츄르', '실뭉치']
}
console.log(cat);
// 객체 프로퍼티 참조
console.log(dog.name);
console.log(cat.name);
console.log(cat.favorite[1]);
dog.favorite.push('밥');
// 객체 프로퍼티에 참조해서 값을 넣을 수 있음
console.log(dog);
console.log('===========================================');
// 프로퍼티 참조 다른 방식
console.log(dog.kind);
console.log(dog['kind']);
// 객체 참조를 여러 방식으로 할 수 있음
// 프로퍼티 값 수정
dog.age = 5;
cat.favorite[1] = '캣잎';
console.log('====================================');
// 프로퍼티 동적 추가
dog.owner = '이제동';
cat.owner = '이영호';
// 프로퍼티 삭제
delete dog.owner;
console.log(dog);
console.log('======================================');
// for ~ in : 객체 반복문 사용
for (var key in dog) {
console.log(key);
console.log(dog[key]);
// 진짜 dictionary네
}
console.log('=======================================');
// 객체의 프로퍼티 키의 존재 유무 확인(in 키워드)
var flag = 'kind' in cat;
console.log(flag);
</script>
</body>
</html>