반응형
배열, 객체
자바스크립트의 배열은 크기가 고정적이지 않다 -> 자바의 ArrayList와 비슷하다
ex11배열.html
<!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>ex11배열</title>
</head>
<body>
<script>
//1. 배열 생성
// : 다양한 자료형을 담을 수 있다
// : 크기가 가변적
// let fruits = new Array();
let fruits = ['망고스틴🍋','사과🍎','샤인머스켓🍇'];
console.log(fruits);
// 배열 안에 있는 모든 데이터가 출력
// 망고만 출력
console.log(fruits[2]);
// 배열의 길이를 출력
console.log(fruits.length);
// 배열의 데이터를 추가하는 방법
// 1. 정확하게 인덱스 번호를 추가하는 방법
fruits[3] = '딸기🍓';
console.log(fruits);
fruits[5] = '체리🍒';
console.log(fruits);
//4번 인덱스가 비어있게 된다.
// 2. 마지막 인덱스 뒤쪽에 데이터를 추가하는 방법
fruits.push('토마토🍅');
console.log(fruits);
// 배열 슬라이싱 하기
// slice(시작인덱스,끝인덱스)
// --> 끝인덱스 직전까지의 데이터만 가져온다 (python이랑 같다)
console.log(fruits.slice(0,2));
// 끝값 2는 포함하지 않는다 -> 0~1인덱스 출력
console.log(fruits.slice(2,4));
// 배열 데이터 삭제하기
// splice(삭제할 인덱스번호, 삭제할 개수)
// --> 한번 삭제할 데이터를 되돌려준 다음에
// 배열안에 있는 데이터를 삭제
console.log(fruits.splice(0,1));
console.log(fruits);
console.log(fruits.splice(2,3));
console.log(fruits);
// 배열의 마지막 인덱스에 들어있는 데이터 삭제하기
fruits.pop();
console.log(fruits);
</script>
</body>
</html>
배열실습
ex12배열실습.html
<!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>
// 1. 과목 수를 한번만 입력받기
let num = prompt('과목 수를 입력해주세요');
let i = 0;
let score =[];
let title = [];
// 2. 입력받은 과목의 수만큼 과목명을 입력받기(반복)
for(i=0 ; i<num ;i++){
title.push(prompt('점수를 입력할 과목명을 입력해주세요 >>'));
}
title.push('총합');
title.push('평균');
//테이블 생성시 for문 한번에 넣기위해 배열에 총합, 평균도 추가
// 3. 입력받은 과목의 수만큼 점수를 입력받기(반복)
// ex) 과목명 점수 입력 >>
for(i=0; i<num;i++){
score.push(prompt(title[i]+'의 점수 입력 >>'));
}
// 4. 점수 총합 계산
let total_score =0;
for(i=0;i<num;i++){
total_score += parseInt(score[i]);
}
// 5. 점수 평균 계산
let avg_score = parseInt(total_score/num);
score.push(total_score);
score.push(avg_score);
//테이블 생성시 for문 한번에 넣기위해 배열에 총합점수, 평균점수도 추가
// 원하는대로 출력이 되는지 출력해서 확인
console.log(total_score);
console.log(avg_score);
// 6. table을 생성 (2행으로 고정, 열은 입력받은 과목 수 + 총합 + 평균)
// --> tag를 써야하니까 document.write 사용하기
document.write('<table border="1px solid black">');
document.write('<tr>');
for(i=0;i<title.length;i++){
document.write('<td>');
document.write(title[i]);
document.write('</td>');
}
document.write('</tr>');
document.write('<tr>');
for(i=0;i<score.length;i++){
document.write('<td>');
document.write(score[i]);
document.write('</td>');
}
document.write('</tr>');
document.write('</table>');
</script>
</body>
</html>
함수
함수: 특정기능을 수행하는 소스코드를 하나로 묶어 필요할 때마다 호출하여 사용하기 위한 구조
ex01함수기초.html
<!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>ex01함수기초</title>
</head>
<body>
<script>
// 호이스팅(Hoisting)
// 함수를 실행하기 전에 함수 안에 있는 모든 선언들을
// 전역으로 끌어올려서 전체 영역에서 사용가능하게 끔 만들어 주는것
// --> 최상단에 선언해주는 것
addNum(5,6);
// 자바스크립트에서 함수를 만드는 방법
// 1. 함수 선언문(function declarations)
// : 호이스팅(최상단으로 끌어올려지는 것)이 가능하다.
function addNum(num1, num2){
console.log(num1+num2);
}
// 함수 호출(사용)
addNum(4,5);
// addNum2(4,5);
// 2. 함수 표현식(function Expressions)
// : 호이스팅이 불가능하다.
let addNum2 = function(num1,num2){
console.log('두번째 함수',num1+num2);
}
addNum2(4,5);
// 3. Arrow function(화살표 함수)
// : ES6 version 지원가능한 함수
// : 호이스팅 불가능하다.
let addNum3 = (num1,num2) => {console.log("화살표 함수",num1+num2)}
addNum3(1,2);
// 매개변수가 하나인 화살표 함수
// : 소괄호 생략 가능하다.
let temp1 = num1 => {console.log("매개변수 하나",num1)};
temp1(4);
// 매개변수가 아무것도 없는 화살표 함수
let temp2 = () => {console.log("비어있는 매개변수")};
temp2();
// 한줄로 작성하는 화살표 함수
// : 중괄호 생략가능하다.
let temp3 = num1 => console.log("한줄로 작성",num1+num1);
temp3(4);
// 함수 수행 후 값을 되돌려주고 싶을 때
let temp4 = num1 => {return num1};
console.log(temp4(4));
// 함수 수행 후 값을 되돌려주는데 return 키워드 생략해보기
let temp5 = num1 => num1;
console.log("return 생략",temp5(5));
</script>
</body>
</html>
ex02함수특징.html
<!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>
//함수 표현식을 활용해서 함수 생성
let addNum = function(num1,num2,num3){
console.log('확인해보기',arguments);
return num1+num2+num3;
}
// 함수 호출
console.log("매개변수 하나 더 추가하기",addNum(1,2,3,4));
console.log("매개변수 하나 빼기",addNum(1,2));
console.log(addNum('운비','영표','현진'));
// 자바스크립트 함수의 특징
// 1. 매개변수로 들어오는 데이터의 자료형을 검사하지 않는다.
// --> why? 함수를 만들때부터 자료형을 지정하지 않는다.
// ex) addNum(1,2,3) / addNum('운비','영표','현진')
// 2. 매개변수의 개수가 일치하는지 확인하지 않는다.
// --> why? arguments객체(유사배열)를 내부적으로
// 매개변수의 개수만큼 생성
// --> 자바스크립트에서의 배열은 가변적이기 때문에
// 매개변수를 더 많이 넣거나, 적게 넣어도 arguments가 자동적으로
// 크기를 변화시킨다. --> 에러가 발생하지 않는다.
// 3. 매개변수를 적게 넣었다면 데이터를 할당받지 못한 매개변수는
// undefined 형태가 된다.
// --> undefined형태로 연산을 진행하면 NaN이라고 뜬다.
</script>
</body>
</html>
함수 실습
객체
이때 속성은 property, 동작은 메소드 라고 표현한다.
ex01객체.html
<!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>
let temp = function(){
console.log('잠을 잔다.');
}
// 객체 생성
var person = {
//property명 : 값 (python의 딕셔너리형태 키값 : 벨류값 의 형태처럼)
name : '김운비',
age : 20,
//method명 : 함수
eat : function(){
console.log('밥을 먹는다.');
},
sleep : temp
// 이때 소괄호 없이 쓰면 참조한다는 의미.
};
// 객체 안에 있는 property console에 출력
console.log("이름 : ",person.name);
console.log("나이 : ",person.age);
// 객체 안에 있는 method 사용
person.eat();
//person.eat으로 소괄호 안쓰면 참조한다는 의미로 eat을 사용 불가능하다.
person.gender = '여자';
console.log('성별 : ',person.gender);
// 추가한적 없는 property도 객체 생성시 변경 가능하게 설정했다면(var, let)
// 객체 생성 후에도 값을 추가 할 수 있다.
</script>
</body>
</html>
객체 안에서의 this는 객체 자체를 가리킨다.
또한 어디서 쓰이는지(함수, 생성자)에 따라서 역할이 달라진다.
반응형
'빅데이터 서비스 교육 > Java Script' 카테고리의 다른 글
| Java Script AJAX (0) | 2022.05.31 |
|---|---|
| JaVaScript jQuery (0) | 2022.05.30 |
| Java Script DOM (0) | 2022.05.26 |
| Java 입출력문, 조건문, 반복문 (0) | 2022.05.23 |