Array

<script type="text/javascript">

document.write("<h3>Array객체의 생성과 length속성</h3>");

1. 배열생성1
 let arr = new Array();  arr ----> [10] [javascript] [programming]
 arr[0] = 10;
 arr[1] = "JavaScript";
 arr[2] = "Programming";

추가
 arr[5] = "자바스크립트가 재밌어요ㅇㅅㅇ";

접근(읽어오기)
 document.write('arr[0] = ' + arr[0] + '<br>');
 document.write('arr[1] = ' + arr[1] + '<br>');
 document.write('arr[2] = ' + arr[2] + '<br>');

길이
 document.write('arr.length = ' + arr.length + '<br>');

변경
 arr[0] = 20;
 document.write('arr[0] = ' + arr[0] + '<br>');

한번에 읽어오기
 document.write('<hr>');

 for(i=0; i< arr.length; i++){
 document.write('arr['+i+'] = '+ arr[i]+'<br>');
}

 
감소
 document.write('<hr>');

 arr.lenth = 3;
 document.write('arr배열의 현재 길이는 = '+arr.length+'<br>');
 for( i=0; i< arr.length; i++ ){
 document.write('arr[' + i + '] = '+ arr[i] + '<br>');

}

 

배열생성방식2
 document.write('<hr>');

 var strArr = new Array('관악산','설악산','지리산','백두산');
 for( i=0; i< strArr.length; i++ ){
 document.write('strArr[' + i + '] = ' + strArr[i] + '<br>');
 }

배열생성방식3 : [ ], 여러 데이터타입을 혼합하여 저장 가능
document.write('<hr>');
function adder(a,b){
let sum = a + b ;
return sum;
}
                                                       let mixArr[3] = new Date()
let mixArr = ['HTML/CSS', 100, 3.14, new Date(), adder(3,4) ];
for ( i=0; i< mixArr.length; i++ ){
 document.write( 'mixArr[' + i + '] = ' +  mixArr[i] + '<br>' );
}

</script>
</script>

---

<script type="text/javascript">

months - 1,2,3,4,5,6,7,8,9,10,11,12                        > 생성하고 반복문으로 "월"붙여서 출력하시오
days - "Sun","Mon","Tue","Wed","Thu","Fri","Sat"   > 요일을 붙여서 출력하시오
season - "봄","여름","가을","겨울"
images - 이미지1, 이미지2, 이미지3 저장               > 한장씩 배열로 접근해서 이미지 출력 

var monthArray = new Array( '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12' );
 for ( i=0; i<monthArray.length; i++ ){
 document.write( monthArray[i] + '월<br>' );
}

document.write('<hr>');

var daysArray = [ 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat' ];
 for ( i=0; i<daysArray.length; i++ ){
 document.write( daysArray[i] + '요일<br>' );
}
 
document.write('<hr>');

var seasonArray = [ '봄', '여름', '가을', '겨울' ];
 for ( i=0; i<seasonArray.length; i++ ){
 document.write( seasonArray[i] + '<br>' );
}

document.write('<hr>');
 
let imgArray = ['https://i1.sndcdn.com/avatars-000751960345-ath81o-t500x500.jpg' , 'https://media.bunjang.co.kr/product/165951534_1_1633222776_w%7Bres%7D.jpg'];
for ( i=0; i<daysArray.length; i++ ){
document.write( " <img src=' " + imgArray[i] + " '> " );
} 

</script>

---

<script type="text/javascript">
document.write("<img src=https://i1.sndcdn.com/avatars-000751960345-ath81o-t500x500.jpg width='300px' height='100%' >");

function f(){
return "안녕하세요";
}

let arr =[1,2,3,"자바스크립트",f(), new Date(), null, true];

document.write("<br>"+arr[5]+"<br>");

document.write("오늘은 "+arr[5].getFullYear()+"년"+(arr[5].getMonth()+1)+"월 "
+ arr[5].getDate()+"일 입니다.");

</script>

---

이차원 배열 : 행과 열을 갖는 배열

<style type="text/css">

table{
 width: 300px; height: 300px;
 background-color: lightgray;
 text-align: center;
 border-collapse: collapse;
 font-size: 12px;
}
#h {background-color:#DB7093; color: white;}
caption{
 font-size: 18px;
}

</style>

<script type="text/javascript">
  
                          열, td
행, tr      서대길   컴공   88  79
             김건부   수학   70  83
              허수     행정    92  95 

생성방법1
let s = [ ]

let student1 = new Array(
 ['서대길', '컴공', 88, 76], 
 ['김건부','수학',70,83],
 ['허수','행정',92,95],
 ['장하권','물리',85,92],
 ['노태윤','건축',97,88]
);

document.write( student1[0][0] );

생성방법2
let student2 =  new Array(   student2.length
 
new Array( '서대길', '컴공', 88, 76 ), student2[0].length
new Array( '김건부','수학',70,83 ),  student2[1].length
new Array( '허수','행정',92,95 ),     student2[2].length
new Array( '장하권','물리',85,92 ), student2[3].length
new Array( '노태윤','건축',97,88 ) student2[4].length
);

document.write("<table border='1'>");
document.write("<caption>성적테이블</caption>");

document.write("<tr id='h'><td>이름</td><td>전공</td><td>중간</td><td>기말</td></tr>");

반복문+배열값으로 td처리
  for( i=0; i<student1.length; i++ ){      행
document.write("<tr>");

for( j=0; j<student1[i].length; j++ ){

   열  

document.write("<td>"+student1[ i ][ j ]+"</td>")
}
document.write("</tr>");
}

document.write("</table>");


</script>

---

문자열 인덱스  

<script type="text/javascript">

var score = new Array();
var subject = "javascript";

문자열 인덱스로 값넣기
score["web"] = 75;
score["subject"] = 92;
score["project"] = 85;

document.write('score[web] = '+score['web']+'<br>');
document.write('score[subject] = '+score['subject']+'<br>');
document.write('score[project] = '+score['project']+'<br>');

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

for(const value in score){
document.write(value+"<br>");
}
document.write("<hr>");


</script>

---

<style type="text/css">

form{
 margin: 2px; border: none; padding: 5px;
 text-align: center;
 line-height: 40px;
 background-color: #24b8eb;
 width: 300px; height: 200px;
 box-shadow: 10px 10px 5px pink;
}
button {
 font-weight: bolder;
 text-shadow: 1px 1px 2px blue;
 border-radius: 10px;
 box-shadow: 2px 2px 0.7px lightgray;
}

</style>
<script type="text/javascript">

function compute(){
total = parseInt(form1['kor'].value) + parseInt(form1['math'].value);
avg = total/2;

alert((form1['strName'].value)+'학생의 평균은 '+avg+'입니다');
}

</script>
</head>
<body>
<h3>문자열 인덱스를 활용</h3>
<hr>

<form action=" " name="form1">
이 름 : <input type="text" name="strName" value=" " placeholder=" "><br>
국어성적:<input type="text" name="kor" value=""><br>
수학성적:<input type="text" name="math" value=""><br><br>

<button onclick="compute()">성적처리 결과</button>
</form>
</body>
</html>

---

<script type= "text/javascript">

let brands = ["애플","구글","LG","삼성","현대"];

for(const brand of brands){
document.write(brand+"<br>");
}

</script>