[13] 230113 Ch. 8 자바스크립트 기초: 11. 배열 [K-디지털 트레이닝 13일]

230113 Fri 13th class

Ch. 8 자바스크립트 기초
진도: p. 310 ~  (교재: HTML5 + CSS3 + JavaScript로 배우는 웹프로그래밍 기초, 저자: 천인국)

HTML5+CSS3+JavaScript로 배우는 웹프로그래밍 기초 | 천인국 - 교보문고

오늘 배운 것 중 기억할 것을 정리했다.

---

지난 수업 때 배운 것 중 다시 기억할 것

1. <textarea>
The <textarea> HTML element represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable amount of free-form text, for example a comment on a review or feedback form.
예시)

<label for="story">Tell us your story:</label>

<textarea id="story" name="story"
          rows="5" cols="33">
It was a dark and stormy night...
</textarea>

• An id attribute to allow the <textarea> to be associated with a <label> element for accessibility purposes.
• A name attribute to set the name of the associated data point submitted to the server when the form is submitted.

출처: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

 

2.

if(조건식)      {       문장;      }

if (i==3){
break;
}​

if 뒤에 () 안에 조건 식 넣고 {} 닫는다. ();로 또 써버림. 

 

3. 아래처럼 div를 사용해서 가로형으로 만들 수 있다.

<div style="display:table; width:800px;">

<div style="display:table-cell">
<textarea rows="5" cols="50">
&lt; html &gt;
&lt; body &gt;
&lt; h1 &gt; This is a header. &lt; h1 &gt;
&lt; /body &gt;
&lt; html &gt;
</textarea>
<br>
<br>
</div>

<div style="display:table-cell">
<iframe src="source.html" width="420" height="80"></iframe>
</div> 

</div>

 

참고: [CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row)

---

Ch. 8 자바스크립트 기초

책의 목차
-자바스크립트의 소개
-자바스크립트의 용도
-자바스크립트의 위치
-문장
-변수
-자료형
-연산자
-숫자와 문자열 사이의 변환
-조건문
-반복문
-배열
-함수
-자바스크립트의 입출력

1. 배열(Array) p. 311

변수의 경우
var a = 10;
a = 20; 의 경우
a = 10에서 a = 20으로 덮여쓰게 된다>

배열은 a = 10 | 20 으로 된다.

변수 (variable)	배열 (Array)
데이터를 저장할 수 있는 곳 하나의 값을 저장할 수 있는 메모리의 공간. 하나의 변수에는 오로지 하나의 값만 저장할 수 있다.	대용량의 자료를 저장하는 기본적인 구조이다. 배열은 전체 집단에 하나의 이름을 부여한 다음, 각각의 데이터에 숫자로 된 번호를 붙여서 접근하는 방법이다. 배열을 사용하면 많은 값을 저장할 수 있는 공간을 할당받을 수 있다.
1. 선언 var a = 10;// a라는 변수에 10을 저장 var b = 20;// a라는 변수에 20을 저장 var c = 30;// a라는 변수에 30을 저장	1. 선언  var a = [10,20,30]
2. 호출 a  b c	2. 호출  a[0] a[1] a[2]

 

1.1 리터럴(Literal)로 배열 생성

리터럴은 변수의 값이 변하지 않는 데이터(메모리 위치안의 값)를 의미한다.

배열은 [ ... ]와 같이 대괄호를 사용한다.
객체는 {...}와 같이 중괄호로 선언한다. (객체(Object): 속성과 메서드로 이루어져 있는 하나의 엔터티(묶음))

배열에 저장된 값은 정수 인덱스를 가지고 접근할 수 있다. (0부터 시작)
반복문으로도 사용할 수 있다. 

예시)

<script>
var fruits = ["apple","banana","peach"];

document.write(fruits[0]+"<br>");
document.write(fruits[1]+"<br>");
document.write(fruits[2]+"<br>");

//반복문으로도 사용 가능하다.
for (i=0; i<3; i++){
document.write(fruits[i]+"<br>");
}
</script>

결과) 

---

1.2 Array 객체로 배열 생성

//비어있는 배열을 생성한다.
var fruits = new Array();

//배열에 값을 저장할 때는 인덱스를 사용한다. (0부터 시작)
fruits[0] = "apple";
fruits[1] = "banana";
fruits[2] = "peach";

//다음과 같이 생성시켜도 된다.
var fruits=new Array("apple","banana","orange");

var fruits = new Array();

fruits: 배열의 이름 
new: 새로운 객체를 생성하는 키워드
Array(): 배열을 나타내는 객체이다. 

ex)

var student = new Array(75,63,88);

 

1.3 자바스크립트 배열의 특징

하나의 배열에 여러 가지 종류의 객체를 혼합해서 저장할 수 있다. 종류를 다르게 하면서 저장할 수 있다. (자바는 안 된다.)

var comp = new Array();
comp[0] = "Apple"; //문자열
comp[1] = new Date(); //객체 (2023-01-03 12:03 형태로 뜬다)
comp[2] = 3.14; //정수

---

1.4 객체 Array의 속성과 메서드

가장 많이 사용되는 속성
ex) fruits.length

for (var i = 0; i < fruits.length; i++){
document.write(fruits[i]+"<br>");
}

fruits: 배열의 이름
length: 배열의 크기(속성) 

배열 요소를 반복하면서 처리할 때 사용한다.
ex) 변수 3개 중 2개가 빠지거나 추가되었을 때 length를 이용하여 자동으로 쓰려고 쓴다.

http://mwultong.blogspot.com/2007/05/javascript-sum-average-mean-array.html

예제) 학생 3명의 점수의 합과 평균 구하기
소수점 자리: .toFixed(원하는 소수점 자리)를 사용한다.
ex) avg(student).toFixed(3)

배열을 저장하는 방법은 3가지가 있다.

//[1] 배열 저장
var student = [75,63,88];

//[2] Array 객체 이용, 하나하나 저장
var student = new Array();
student[0]=75;
student[1]=63;
student[2]=88;

//[3] [2]룰 응용
var student = new Array(75,63,88);

코드1) 초기값을 sum, avg 다 0으로 설정하고, document.write(" ")를 for loop 밖으로 빼야 결과가 나온다.

document.write(" ")를 for loop안에 적으면 3번째 변수의 결과와 그 평균이 나온다. 

var student = new Array(75,63,88);
var sum = 0;
var avg = 0;

for (var i = 0; i < student.length; i++){
    sum += student[i];
}
avg = sum / student.length;

//for {}안에 document.write가 있으면 3번 출력된다.
document.write("학생의 총점은 "+ sum+"점이고, 평균은 "+avg.toFixed(3)+"점 입니다.:)");

코드2) 함수를 이용했다.

var student = new Array(75,63,88);

//배열 합계
//sum의 초기값을 설정해줘야 덧셈이 된다.
//sum=0+75+63+88
//sum = sum+student[0]+student[1]+student[2]의 값을 sum에 저장한다.
function sum(student) {
  var result = 0;
  for (var i = 0; i < student.length; i++)
//result=result+studnet[i]
 
    result += student[i];
  return result;
}
//배열 평균
function avg(student) {
  var sum = 0;
  for (var i = 0; i < student.length; i++)
    sum += student[i];
  return sum / student.length;
}

//for {}안에 document.write가 있으면 3번 출력된다.
document.write("합계: "+ sum(student)+ '<br>');
document.write("평균: "+ avg(student)+ '<br>');
document.write("학생의 총점은 "+ sum(student)+"점이고, 평균은 "+avg(student).toFixed(3)+"점 입니다.:)");
</script>

결과)

---