티스토리 뷰
1. 함수
- Function 함수명 ( 매개변수1, 매개변수2, … ) { 실행문장; return 반환값; };
- 이때 매개변수1, 매개변수2 …로 지정된 변수는 지역변수로 지정된다.
- 호출할 때에는 함수명( 인자1, 인자2, … );으로 호출할 수 있다.
- 이때 인자는 함수를 호출할 때 전달하는 입력 값을 의미한다.
- 매개변수는 함수 호출문에서 전달한 이러한 인자 값을 받기 위해 선언된 변수로, 매개변수의 수와 인자의 수는 동일해야 한다.
- 무명 함수 / 익명 함수로 작성할 때에는 변수에 함수 표현식으로 작성하게 되며, 함수를 호출할 때에도 변수명을 통해서 호출하게 된다.
- 익명 함수 선언 : Var 변수명 = function ( 매개변수1, 매개변수2, … ) { 실행문장; }
- 익명 함수 호출 : 변수명 ( 인자1, 인자2, … )
2. 배열
- 여러 데이터 값을 저장하는 공간으로, 자바에서는 배열의 원소를 변경할 수 없었지만 자바스크립트에서는 가능하다.
- 인덱스 번호는 자바와 같이 0부터 시작하며, 원소로 함수를 가질 수 있다.
[ 1. 함수 선언 전 / 후 호출 (***) ]
<!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>자바 스크립트 - 기본 함수 호출</title>
</head>
<body>
<script>
var text1 = "함수 선언 전 호출";
var text2 = "함수 선언 후 호출";
printMSG(text1); // 2. 함수 선언 전 호출 (*****) - 사실상 함수 선언 후 호출이다.
function printMSG(msg){ // 1. 함수 선언 (*****)
console.trace(`printMSG(${msg}) invoked.`);
// 이때 `는 작은 따옴표가 아닌 탭키 위에 있는 것을 사용해야 한다.
// 이렇게 사용하면 ``안에 생성한 문자열 안에 매개변수 값을 넣을 수 있다.
// ES6 : Template String ( ex. `name : ${변수이름}` )
document.write("함수 호출 메세지 : " + msg + "<br>");
// document.write는 사용하는 것을 지양해야 한다.
} // printMSG
// 함수는 중요하기 때문에 가장 먼저 처리가 되어, 선언되기에 text1도 text2도 잘 출력된다.(**)
// 이때 msg는 매개변수이기 때문에, var가 없어도 지역변수로 처리된다.
// +가 아닌 ,를 사용해도 괜찮다.
printMSG(text2); // 3. 함수 선언 후 호출 (*****)
</script>
</body>
</html>[ 2. Onclick 속성으로 함수 호출하기 ]
<!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>자바 스크립트 - onclick 속성으로 함수 호출</title>
</head>
<body>
<script>
function printMSG(name, age){ // 함수 선언
console.debug(`printMSG(${name}, ${age}) invoked.`);
// document.write보다 이 방법을 사용하는 것이 좋다.
document.write("학생 이름 : <b>" + name + "</b><br>");
document.write("학생 이름 : <b>" + age + "</b><br>");
} // printMSG
</script>
<button type="button" onclick="printMSG('홍길동', 21);">학생 정보</button>
<!-- 인라인 방식으로 이벤트 속성으로 함수를 호출하였다. -->
<!-- 어떤 이벤트를 지정하였는지 개발도구의 이벤트 리스너에서 확인할 수 있다. -->
<p onclick="alert('저를 클릭하신것이 맞으신가요?');">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
<!-- p태그를 클릭하면 알림창에 해당 문자열이 출력해서 나타난다. -->
</body>
</html>[ 3. 익명 함수 (*****) ]
<!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>자바 스크립트 - 익명 / 무명함수 (람다식)</title>
</head>
<body>
<script>
var text1 = "함수 선언 전 호출 에러";
var text2 = "함수 선언 후 호출 에러";
// printMSG(text1); // 함수 선언 전 호출 에러
// 변수가 아직 선언되지 않았기에 에러가 발생하게 된다.
var printMSG = function(msg){ // 함수 객체 선언
console.debug(`printMSG(${msg}) invoked.`);
document.write("함수 호출 메세지 : ", msg, "<br>"); // 함수 표현식
} // printMSG
// 함수 표현식에서 함수명을 작성할 수는 있지만, 그 함수명으로 함수를 호출할 수는 없다. (**)
// 익명함수는 변수명으로 함수를 호출하게 되는데, 변수는 함수와 달리 먼저 생성되지 않기에 함수 객체인 변수가 선언된 후에 사용이 가능하다.(***)
// 함수의 1급 객체의 성질을 보여준다. -> 함수는 변수에 대입이 가능하다.
console.log(">>>>> printMSG",printMSG);
// printMSG 내의 함수 표현식을 보여준다.
printMSG(text2); // 함수 선언 후 호출 가능
</script>
</body>
</html>[ 4. ES6버전 익명 함수 + const / let 변수 (*****) ]
<!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>자바 스크립트 - 익명 / 무명함수 (람다식)</title>
</head>
<body>
<script>
var text1 = "함수 선언 전 호출 에러";
var text2 = "함수 선언 후 호출 에러";
// printMSG(text1); // 함수 선언 전 호출 에러
// 변수가 아직 선언되지 않았기에 에러가 발생하게 된다.
// ES6에서는 const변수와 let 변수( = 블록변수 / 지역변수 )가 새롭게 등장했다.
// (1) const 변수 ( = 상수 )
// : const 상수명 = 초기값;
// (2) let 변수는 자신이 선언된 블록 내에서만 사용이 가능하다.
const text1 = "함수 선언 전 호출 에러";
const text2 = "함수 선언 후 호출 에러";
// const변수는 상수와 같은 기능을 하기에 변경이 불가능하다. ( 자바의 final과 유사 )
var printMSG = function(msg){ // 함수 객체 선언
console.debug(`printMSG(${msg}) invoked.`);
document.write("함수 호출 메세지 : ", msg, "<br>"); // 함수 표현식
} // printMSG
// 함수 표현식에서 함수명을 작성할 수는 있지만, 그 함수명으로 함수를 호출할 수는 없다. (**)
// 익명함수는 변수명으로 함수를 호출하게 되는데, 변수는 함수와 달리 먼저 생성되지 않기에 함수 객체인 변수가 선언된 후에 사용이 가능하다.(***)
// 함수의 1급 객체의 성질을 보여준다. -> 함수는 변수에 대입이 가능하다.
console.log(">>>>> printMSG",printMSG);
// printMSG 내의 함수 표현식을 보여준다.
printMSG(text2); // 함수 선언 후 호출 가능
// ES6 : Arrow function을 이용하여 익명함수 만들기!! (***)
var printMSG2 = (msg) => {
console.debug(`printMSG(${msg}) invoked.`);
}
console.log(">>>>> printMSG2",printMSG2);
// ES6 : Arrow function은 자바의 람다식과 같은 기능을 한다. ( 생략 조건도 동일하다. )
var printMSG3 = (msg) => console.debug(`printMSG(${msg}) invoked.`);
// 이와 같이 람다식처럼 생략이 가능하다.
</script>
</body>
</html>[ 5. 함수 반환값 출력하기 (***) ]
<!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>자바 스크립트 - 함수 반환값</title>
</head>
<body>
<script>
var result;
// result의 경우 const 변수로 선언하는게 부적합한데, 그 이유는 선언과 초기화를 분리하였기 때문이다.
// 또한 값이 변하기 때문에 const변수로의 선언이 부적합하다.
// 변수명을 따로 result1 / result2로 선언하고 초기값을 준다면, const변수도 사용이 가능하다.
function add(name, n){
console.debug(`add(${name}, ${n}) invoked.`) // (******)
console.log(name, "학생이 1부터 ", n, "까지 덧셈 수행");
let sum = 0;
for ( let i = 1; i <= n; i++ ){
sum += i;
} // for
// i를 let변수가 아닌 var변수로 하면, i는 지역변수가 아닌 전역변수가 되어버리기 때문에 let변수로 작성하는 것이 좋다.
return sum; // return을 통해 리턴값을 함수 호출자에게 돌려준다.
} // add 함수
result = add('홍길동', 10); // 함수 호출
console.log("결과 :", result);
console.log(`결과는 ${result} 입니다.`);
result = add('이영희', 100); // 함수 호출
console.log("결과 :", result);
console.log(`결과는 ${result} 입니다.`);
document.write(`결과 : ${add('김철수', 95)}`);
// 이렇게 작성할 수도 있다. (***)
</script>
</body>
</html>[ 6. 익명 함수 활용 (***) ]
<!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>자바 스크립트 - 익명함수 연습</title>
</head>
<body>
<script>
// 익명함수 생성 (***) : 변수 = 매개변수 => 함수표현식
var calSum = (x, y) => { return x + y; };
var addup = (x, y) => x + y;
document.write(`결과값 : ${calSum(5, 10)}입니다.<br>`);
document.write(`결과값 : ${addup(10, 13)}입니다.`);
// 뷰 포트에 잘 출력되어도, 콘솔창을 통해서 에러가 발생하고 있지는 않은지 확인해야 한다.
</script>
</body>
</html>[ 7. 자바스크립트의 오버로드( 자바스크립트에서는 불가능하다. ) ]
<!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>자바 스크립트 - 오버로딩</title>
</head>
<body>
<script>
// 자바스크립트에서는 아래 함수 선언들을 보면, 동일한 이름의 매개변수만 다른
// 함수 오버로딩을 지원하는 것처럼 보이지만, 사실은 지원하지 않는다.
// 그렇기에 마지막에 선언된 동일한 이름의 함수가 최종 함수가 된다.
function add(){
console.debug(`add() invoked.`);
let sum = 1;
return sum;
} // add
function add(x){
console.debug(`add(${x}) invoked.`);
let sum = x + 1;
return sum;
} // add
function add(x, y){
console.debug(`add(${x}, ${y}) invoked.`);
let sum = x + y + 1;
return sum;
} // add
function add(x, y, z){
console.debug(`add(${x}, ${y}, ${z}) invoked.`);
let sum = x + y + z + 1;
return sum;
} // add
// 자바의 오버로드와 달리 자바스크립트에서는 동일한 이름의 함수의 경우 마지막에 생성된 함수만 존재하게 된다.
var r0 = add();
document.write(`함수 호출 인자 없음 : ${r0} <p/>`);
// 매개변수의 값이 undefined인 상태로 들어가자, NaN( Not a Number[ 숫자로 표현할 수 없는 상태 ] )가 출력되었다.
// 이처럼 매개변수의 개수에 맞게 인자를 주지 않아도 함수호출이 가능하다.
var r1 = add(1);
document.write(`함수 호출 인자 부족 : ${r1} <p/>`);
// 인자의 수가 부족하기에 NaN이 출력된다.
var r2 = add(2, 3);
document.write(`함수 호출 인자 부족 : ${r2} <p/>`);
// 함수는 호출이 가능하지만, 인자의 수가 부족하기에 NaN이 출력된다.
var r3 = add(4, 5, 6);
document.write(`정상적인 함수 호출 : ${r3} <p/>`);
var r4 = add(7, 8, 9, 10);
document.write(`함수 호출 인자 초과 : ${r4} <p/>`);
// 함수가 정상적으로 호출되며, 인자가 차례대로 들어가기에 7, 8, 9만 인자값으로 적용되어, 반환된다.
</script>
</body>
</html>[ 8. 인자에 따른 함수 실행 (****) ]
<!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>자바 스크립트 - 인자에 따른 함수실행 (***)</title>
</head>
<body>
<script>
function add(x, y, z){
console.debug(`add(${x}, ${y}, ${z}) invoked.`); // 콘솔 로그를 통해 정확히 어떤 값이 들어왔는지 확인해야 된다.
let sum; // block 변수 ( = 확실한 지역변수 )
// 각 매개변수의 값과 타입이 '정확히' undefined 상태인지 확인하여 ( === undefined ) (***)
// undefined가 아닌 매개변수들만 덧셈을 수행하게 하였다.
// undefined는 타입도 값도 가능하기에 가능한 일이다.
if ( (y === undefined) && (z === undefined) ){
sum = x;
} else if ( z === undefined ){
sum = x + y;
} else {
sum = x + y + z;
} // if - else if - else
return sum;
} // add 함수
var r1 = add(2);
document.write(`함수 호출 인자 부족 : ${r1} <p/>`);
</script>
</body>
</html>[ 9. arguments (**) ]
<!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>자바 스크립트 - arguments (***)</title>
</head>
<body>
<script>
function add(){
console.clear; // 콘솔창 깨끗하게 하기
console.group('add'); // console.clear 다음에 와야지 그룹이 망가지지 않는다.
let i, sum = 0;
console.log(`add() invoked.`);
// arguments : 함수블록 내부에서만 사용한 키워드로, 곧 배열객체(Array - like)이다.
// 함수 호출자가 전달한 모든 '전달 인자 값들'을 원소로 가지는 배열객체이다. (**)
console.log('\t + arguments', arguments);
for ( i = 0; i < arguments.length; i++ ){
sum += arguments[i];
} // for
document.write(`수행 결과 : ${sum}<p/>`);
console.group();
} // add 함수
add(2, 3);
add(2, 3, 4);
add(4, 5, 6, 7, 8);
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10);
// arguments는 전달받은 인자값들을 배열객체로 생성하여 활용한다.
</script>
</body>
</html>[ 10. 배열 리터럴( [ ] )로 생성하기 ]
<!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>자바 스크립트 - for문 2</title>
</head>
<body>
<script>
// 배열객체를 생성하는 2가지 방식 : 1. 배열 리터럴 2. 배열객체 생성
var city = [ "Seoul", "Busan", "Incheon"]; // 배열 리터럴
// 자바 스크립트에서는 함수를 원소로 넣을 수도 있다.
function printArr(){
console.clear();
console.group('printArr');
console.debug(`printArr() invoked.`);
console.log(`\t + arr.length : ${city.length}`); // length로 배열의 길이를 알 수 있다.
let i;
for ( i = 0; i < city.length; i++ ){
document.write(`배열 데이터[${i}] = ${city[i]}, 타입 : ${typeof city[i]} <br>`);
} // for
console.groupEnd();
} // printArr
printArr();
</script>
</body>
</html>[ 11. 빈 배열에 원소 넣기 ]
<!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>자바 스크립트 - for문 2</title>
</head>
<body>
<script>
// 배열객체를 생성하는 2가지 방식 : 1. 배열 리터럴 2. 배열객체 생성
var city = [ ]; // 배열 리터럴 방식으로 빈 배열 객체 생성
// 빈 배열에 새로운 원소를 인덱실 기법으로 얼마든지 추가 가능
city[0] = "Seoul";
city[1] = "Busan";
city[2] = "Incheon";
city[3] = "Mokpo";
city [6] = "Sejong";
// 이와 같이 인덱스 번호를 뛰어넘고 지정할 수 있으나, 지정하지 않은 인덱스 번호의 원소는 undefined가 된다.
function printArr(){
console.clear();
console.group('printArr');
console.debug(`printArr() invoked.`);
console.log(`\t + arr.length : ${city.length}`); // length로 배열의 길이를 알 수 있다.
let i;
for ( i = 0; i < city.length; i++ ){
document.write(`배열 데이터[${i}] = ${city[i]}, 타입 : ${typeof city[i]} <br>`);
} // for
console.groupEnd();
} // printArr
printArr();
</script>
</body>
</html>[ 12. 배열 - 공백 리터럴 ]
<!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>자바 스크립트 - 공백 리터럴</title>
</head>
<body>
<script>
// 배열객체를 생성하는 2가지 방식 : 1. 배열 리터럴 2. 배열객체 생성
var city = [ "Seoul", , "Busan", , "Incheon"]; // 배열 리터럴 - 공백 리터럴 포함
// 공백 리터럴은 undefined가 되고, 배열의 길이는 공백리터럴도 포함해서 카운팅된다.
function printArr(){
console.clear();
console.group('printArr');
console.debug(`printArr() invoked.`);
console.log(`\t + arr.length : ${city.length}`); // length로 배열의 길이를 알 수 있다.
let i;
for ( i = 0; i < city.length; i++ ){
document.write(`배열 데이터[${i}] = ${city[i]}, 타입 : ${typeof city[i]} <br>`);
} // for
console.groupEnd();
} // printArr
printArr();
</script>
</body>
</html>[ 13. 공백리터럴을 포함한 집계함수 사용 ]
<!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>자바 스크립트 - 공백 리터럴 2</title>
</head>
<body>
<script>
const com = [ 95, 88, , 72, 68, , 99, 82, 78, 85]; // 10명 중 8명의 점수만 입력
var getAvg;
function printAvg(){ // 배열의 평균을 구해서 반환
console.clear;
console.group('printA');
console.debug(`printAvg() invoked.`);
let i, sum = 0;
let n = com.length;
document.write(`${n}명의 점수입력<p></p>`);
for( ; i < n; i++ ){
sum += com[i];
} // for
return ( sum / n ); // 평균을 반환
} // printAvg 함수
getAvg = printAvg(); // 함수 호출
document.write(`평균 : <b>${getAvg}</b><p></p>`);
// 공백 리터럴에 undefined가 들어가자 배열의 길이는 10으로 출력이 되지만, 평균은 0으로 출력된다.
</script>
</body>
</html>[ 14. 집계함수에서 공백 리터럴 제외하기 (**) ]
<!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>자바 스크립트 - 집계함수에서 공백리터럴 제외</title>
</head>
<body>
<script>
const com = [ 95, 88, , 72, 68, , 99, 82, 78, 85]; // 10명 중 8명의 점수만 입력
var getAvg;
function printAvg(){ // 배열의 평균을 구해서 반환
console.clear;
console.group('printA');
console.debug(`printAvg() invoked.`);
let i = 0;
let sum = 0;
let n = com.length;
document.write(`${n}명의 점수입력<p></p>`);
let c = 0; // undefined가 아닌 원소 개수 카운트
for( ; i < n; i++ ){
if( com[i] !== undefined ){
++ c;
sum += com[i];
} else continue;
// undefined와 속성과 값이 다를때에만 sum에 더하게 하였다.
// continue는 무한 반복문을 생성할 수 있기에 조심해야 한다.
} // for
return ( sum / c ); // 평균을 반환
} // printAvg 함수
getAvg = printAvg(); // 함수 호출
document.write(`평균 : <b>${getAvg}</b><p></p>`);
// 공백 리터럴에 undefined가 들어가자 배열의 길이는 10으로 출력이 되지만, 평균은 0으로 출력된다.
</script>
</body>
</html>[ 15. 배열에 다양한 타입의 원소 넣기 ]
<!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>자바 스크립트 - 배열에 다양한 타입의 원소 넣기</title>
</head>
<body>
<script>
var x = 5;
var arr = [ 100, "Seoul", true, x]; // 다양한 타입
// x = 5로 출력되게 되는데, 그 이유는 이미 배열에 x의 값인 5가 들어간 후 x에 들어간 것이기 때문이다.
x = 10;
console.log(`배열 후의 x의 값 : ${x}`); // 이때에는 10이 출력된다.
function printArr(){
// console.clear();
console.group('printArr');
console.debug(`printArr() invoked.`);
console.log(`\t + arr.length : ${arr.length}`);
let i = 0;
for( ; i < arr.length; i++ ){
document.write(`배열의 데이터[${i}] = ${arr[i]}, 타입 : ${typeof arr[i]} <br>`);
} // for
console.groupEnd();
} // printArr
printArr();
</script>
</body>
</html>[ 16. 다른 데이터 요소 (****) ]
<!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>자바 스크립트 - 다른 데이터 타입 요소</title>
</head>
<body>
<script>
var arr = [ 10, 20, 30, 40, '50']; // 다른 데이터 타입 요소
function printArr(){
let i = 0;
let sum = 0;
for( ; i < arr.length; i++ ){
// 마지막 원소 '50'(String)과 더하게 되면, 이전의 숫자들의 합과 '50'이 문자열로 열결된다.
sum += arr[i];
} // for
return sum;
} // printArr
var result = printArr();
document.write(`배열 원소의 합 : ${result}, 타입 : ${typeof result}<br>`);
// 결과가 10050이 나오는 이유는 '50'을 제외한 원소의 값이 모두 합해진 뒤에, 문자열 연결로 50이 들어갔기 때문이다.
</script>
</body>
</html>[ 17. 배열 객체로 배열 생성하기 ]
<!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>자바 스크립트 - 배열 객체로 생성하기</title>
</head>
<body>
<script>
// 배열 객체를 생성하는 두번째 방법 : new 연산자 + 배열 생성자 함수
var city = new Array ( "Seoul", "Busan", "Incheon");
function printArr(){
console.clear();
console.debug(`printArr() invoked.`);
let i;
for( i = 0; i < city.length; i++ ){
document.write(`배열 데이터 [${i}] = ${city[i]}, 타입 : ${typeof city[i]}<br>`);
} // for
} // printArr
printArr();
</script>
</body>
</html>[ 18. 배열의 타입 ( instance of ) (****) ]
<!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>자바 스크립트 - 배열의 타입</title>
</head>
<body>
<script>
const city = new Array ( "Seoul", "Busan", "Incheon");
function printArr(){
// console.clear();
console.debug(`printArr() invoked.`);
console.log('>>>> Array :', Array);
// = if (Array.isArray(city))
if( city instanceof Array ){ // city의 타입이 Array 타입인지에 대해서 판단해 준다. ( 자바와 동일 )
document.write(`배열 객체가 생성되었습니다. <p/>`);
for ( let i = 0; i < city.length; i++ ){
document.write(`배열 데이터 [${i}] = ${city[i]} <br>`);
} // for
} else {
document.write(`배열 객체가 아닙니다.<br>`);
document.write(`데이터 : ${city} <br>`);
} // if -else
} // printArr
printArr(); // 함수 호출
document.write(`<p/> city 변수 타입 : ${typeof city} <br>`); // object
document.write(`배열 객체 확인 결과 : ${Array.isArray(city)} <br>`); // true
</script>
</body>
</html>[ 19.함수 다중 호출 (****) ]
<!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>자바 스크립트 - 배열 / 함수 호출 (***)</title>
</head>
<body>
<script>
var arrdata = [];
function insertArr() {
for( let i = 0; i <= 99; i++ ){
arrdata[i] = i + 1;
} // for - 배열에 1부터 100까지 입력
selectArr(); // 함수 호출
} // insertArr
function selectArr(){
for(let i = 0; i < arrdata.length; i++ ){
document.write(`${arrdata[i]}`); // 데이터 조회
} // for - 원소 하나씩 출력하기
addArr(); // 함수 호출
} // selectArr
function addArr(){
console.debug(`addArr() invoked.`);
var sum = 0;
for ( let i = 0; i < arrdata.length; i++ ){
sum += arrdata[i]; // 덧셈 연산
} // for - 원소의 총 합 구하기
document.write(`<p/> 배열 데이터 덧셈 연산 결과 : ${sum} <p/>`);
document.write(`<a href ='21_arr.html'>돌아가기</a>`);
}// addArr
</script>
<!-- 글로벌 이벤트 속성인 onclick을 통해서, 이벤트 핸들러 코드로 자바스크립트 함수호출 실행문장 지정 -->
<button type="button" onclick="insertArr();">배열 생성 / 조회 / 연산</button>
</body>
</html>[ 20. 배열의 활용 - 짝수인 원소 출력 ]
<!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>자바 스크립트 - 짝수번째 배열 원소 출력</title>
</head>
<body>
<script>
var arrdata = []; // 빈 배열 객체 생성
function insertArr(){
console.debug(`insertArr() invoked.`);
for ( let i = 0; i <= 99; i++ ){
arrdata[i] = i + 1;
document.write(`${arrdata[i]}`);
} // for - 1부터 100까지 빈 배열에 원소로 입력
} // insertArr
function delArr(){
console.debug(`delArr() invoked.`);
for ( let i = 0; i < arrdata.length; i++ ){
if ( i % 2 == 0 ){ // 짝수번째 데이터에만, 홀수번째는 유지한다.
arrdata[i] = 0; // 0으로 초기화
} else continue; // if - else
// 인덱스번호는 0부터 시작되기에, 실제로 짝수인 원소만 출력된다.
} // for
selectArr(); // 함수 호출
} // delArr
function selectArr(){
console.debug(`selectArr() invoked.`);
for ( let i = 0; i < arrdata.length; i++ ){
document.write(`${arrdata[i]}`);
} // for - 1. 배열의 원소를 순회하면서 출력
document.write(`<p>${arrdata}</p>`); // 2. 원소 한번에 출력하기
arrdata.forEach((v,i) => document.write(`${v}`)); // 3. 원소 출력하기 (***)
document.write(`<p>홀수번째 데이터 초기화 완료!</p>`);
document.write(`<a href='#22_arr.html'>돌아가기</a>`);
}// selectArr
insertArr(); // 베열 데이터 함수 호출
delArr(); // 짝수번째인 원소만 출력하게 된다.
</script>
</body>
</html>
728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 67일차 - 자바스크립트 ( 사용자 정의 객체 / 배열 객체 / Date 객체 ) (*****) (0) | 2022.06.02 |
|---|---|
| KH 66일차 - 자바스크립트 ( 배열 / 객체 ) (****) (0) | 2022.05.31 |
| KH 64일차 - 자바 스크립트 (***) (0) | 2022.05.27 |
| KH 63일차 - 미디어 쿼리 / 자바 스크립트 (***) (0) | 2022.05.26 |
| KH 62일차 - 변이효과 / 애니메이션 / 반응형 웹 (*****) (0) | 2022.05.25 |
댓글