/*
이클립스 작업파일 화면 2개 : ctrl + shift + []
데이터[자료] : 문자, 숫자, 그림 형태의 단위
자료 증가 --> 메모리 증가 --> 돈 증가 --> 요구
-- cpu : 계산, 제어 등 하지만 저장은 X. -> 메모리에게 보냄 (저장하라고)
메모리[주기억 장치] : 실행 중인 데이터를 기억하는 장치 (휘발성 : 전기가 없으면 저장 X)
SSD/HDD[보조기억장치] : 영구저장, (비휘발성 : 전기가 없어도 저장 O)
ex) 게임이나 이클립스 설치 -> C:드라이브에 저장(보조기억장치)
=> 프로그램에 필요한 모든 자료[보조기억장치 저장]
=> 프로그램에 실행했을 때 필요한 자료만 가져오기[주기억장치]
메모리[휘발성] : 사용 중에만 저장 / 종료시 사라짐. : JS(자바스크립트는 휘발성)
-> 데이터베이스[비휘발성] : 데이터베이스
변수와 상수 : 데이터[자료] 1개를 메모리[주기억장치] 저장
배열 : 데이터 여러개를 저장
1. 배열 : []
2. 식별번호 : 인덱스 0번 시작 // []반 번호
3. 선언방법
let 배열명 = [요소1, 요소2, 요소3]
const 배열명 = [요소1, 요소2, 요소3]
ex)
let 학년3_2반 = ['유재석', '강호동', '신동엽', '김현수']
인덱스[순서번호 = 고유번호] => 유재석 : 인덱스 0 / 강호동 : 인덱스 1 / 신동엽 : 인덱스 2 등등.
학생길이[학생 수] : 4 (마지막 인덱스 + 1)
마지막 인덱스 : 3
4. 배열 길이
.length : 배열의 길이를 알 수 있음.
ex) 학년3_2반.length : 4
5. 요소[자료] 추가
배열명.push(새로운 요소) : 마지막 요소 뒤에 새로운 요소를 추가
배열명.splice(추가할 인덱스, 0, '새로운 요소'); : 해당 인덱스에 새로운 요소 추가
[기존에 있던 요소들은 한칸씩 뒤로 이동.] -> 자바는 자동적으로 인덱스 X
6. 요소 제거
- 인덱스 이용한 제거
배열명.splice(제거할 인덱스의 시작번호(삭제 시작번호), 제거 개수)
ex. 배열명.splice(0) : 모든 요소 삭제
배열명.splice(0, 1) : 0번 인덱스 1개 제거
배열명.splice(3, 1) : 3번 인덱스 1개 제거
배열명.splice(2, 3) : 2, 3, 4번 인덱스 제거
[제거된 요소 뒤로 한칸씩 당기기.] -> 파이썬이나 자바스크립트는 이렇게 자동적으로 해준다. (자바 X)
- 요소의 값으로 제거
값으로 인덱스 찾기 : 배열명.indexOf(데이터)
배열명.splice(배열명.indexOf(데이터), 1);
- 요소의 새로운 값으로 대치
배열명.splice(0, 1, '새로운 요소')
*/
/*let 변수 = 10;
console.log(변수);*/ //콘솔창을 닫으면 변수가 사라짐. (휘발성)
//1. 배열 선언 : 배열([])안에 , 구분해서 여러개의 자료 입력한다.
let 배열명 = ['유재석', '강호동', '신동엽', '김현수'];
//2. 배열 호출
console.log(배열명); //콘솔창에 출력
document.write(배열명); //html에 출력
document.write('<h3>' + 배열명 + '</h3>') //* HTML 마크업은 JS내에 문자열 처리
//3. 배열 특정 요소만 호출 : 배열명[인덱스]
console.log(배열명[0]); //해당 요소가 출력 -> 유재석(인덱스 0) 출력
document.write('<ol>') //순서가 있는 리스트
document.write('<li>' + 배열명[0] + '</li>'); //변수/배열 문자열 처리 X -> HTML 문자열 처리 O
document.write('<li>' + 배열명[1] + '</li>'); //변수/배열 문자열 처리 X -> HTML 문자열 처리 O
document.write('<li>' + 배열명[2] + '</li>'); //변수/배열 문자열 처리 X -> HTML 문자열 처리 O
document.write('<li>' + 배열명[3] + '</li>'); //변수/배열 문자열 처리 X -> HTML 문자열 처리 O
document.write('</ol>')
//4. 배열 길이
console.log(배열명.length + "명");
document.write('<p>현재 인원수 : ' + 배열명.length + '명</p>')
//5. 배열의 요소 추가
배열명.push('전현무');
console.log(배열명); // ['유재석', '강호동', '신동엽', '김현수', '전현무']
//6. 배열의 특정 요소 제거
배열명.splice(0, 1); console.log(배열명); //유재석 삭제.
// * 한줄에 두개이상의 명령어 작성시에는 ; 구분하기
//7. 데이터로 인덱스 찾기 -> indexOf() : 값으로 인덱스 찾기
let searchIndex = 배열명.indexOf('신동엽'); console.log('신동엽의 인덱스 : ' + searchIndex);
//8. 데이터로 요소 삭제
/*배열명.splice(searchIndex, 1);*/
배열명.splice(배열명.indexOf('신동엽'), 1); console.log(배열명); //신동엽 삭제
//9. 배열 내 요소 데이터 변경
배열명.splice(0, 1, '서장훈'); console.log(배열명); // ['서장훈, '김현수', '전현무] -> 강호동 자리에 바꿈
//10. 배열 내 요소 사이['서장훈' 과 '김현수' 사이]의 요소 추가
/*배열명.splice(0, 0, '유재석') *///맨앞에 들어감. -> 0개를 제거하고 새로운 데이터를 넣는다.
배열명.splice(1, 0, '유재석')
console.log() : console에서 log() 메서드로 접근하겠다.
document.write()
배열명.push()
배열명.splice()
배열명.indexOf()
→ 앞의 함수처럼 미리 만들어 있는 것을 API
<!-- 6. 배열의 활용 -->
<!--
HTML 이벤트 속성
onClick = "JS함수명()"
: 해당 마크업 클릭했을 때 JS 함수 실행
<마크업 속성 : "속성값">
1. 이벤트 속성
onClick = "JS함수명()"
2. value 속성 : input, select, textarea / div, span같은 것은 value 속성 없음!
3. innerHTML속성 : <마크업> innerHTML </마크업>
HTML 마크업 선택자 css js
<div class = "box" id = "root">
1. <마크업> div{속성 = 속성값} document.querySelector('div');
2. class .box{} document.querySelector('.box');
3. id #root{} document.querySelector('#root');
DOM 속성
1. html변수명.value : input, select , textarea 에 입력된 값 가져오기
2. html변수명.innerHTML = 'HTML형식' : <마크업> {이자리추가} </마크업>
클릭이벤트
1. html : <마크업 onclick="함수명()" > : 해당 마크업 클릭시 js에 존재하는 해당 함수가 실행
2. js : function 함수명() { 실행문; } : js에서 함수 선언[만들기]
-->
<h3>코드가 변경되면 코드 파일 ctrl + s 저장 후에 브라우저[크롬]에서 새로고침[ctrl + F5]</h3>
학생명 : <input type = "text" class = "studentName">
<button onclick="onAdd()" type ="button">추가</button>
<button onclick = "onDelete()" type = "button">삭제</button>
<ul id ="studentList">
</ul>
<script src = "6.js배열의활용.js"></script>
/*
1. 추가 버튼을 눌렀을 때 클릭 이벤트
*/
alert("JS 실행합니다.") // 1번밖에 실행 안됨.
//함수 밖에 만든 이유 : 함수가 실행될 때마다 선언하면 기존데이터가 삭제가 됨.
let studentList = []; //배열 선언, 초기 요소 없음[깡통]
let name ;
function onAdd(){
//1) function : 함수 정의 키워드
//2) onAdd() : 함수명 [아무거나 해도 되고, 중복 X]
//3) () : 인수 [함수 실행시 함수 안으로 전달받는 데이터]
//4) { } : 함수가 실행되는 구역
alert("클릭했습니다."); // 여러번 실행 됨.
/* 2. 입력받은 input value[값]을 가져오기 */
//1> HTML 마크업을 변수화 하기 = DOM [document = HTML]
// 1. class 명으로 해당 마크업을 JS변수로 가져올 때
//let HTML변수명 = document.querySelector('.클래스');
// 2. id명으로 해당 마크업을 JS변수로 가져올 때
//let HTML변수명 = document.querySelector('#아이디');
//마크업의 속성호출
//2> 1.HTML ----> JS => document.querySelector();
// 2. HTML <---- JS => document.write();
// HTML -> JS (서로 다른 언어들 간에 데이터를 주고 받을 수 있다.)
let studentName = document.querySelector('.studentName');
//sName 변수에 input 마크업 저장
/* 3. 마크업에서 값 가져오기 */
/*alert(sName.value);*/
// 4.마크업에 출력
studentList.push(studentName.value);
//console.log(학생리스트)
//1. 출력할 위치에 <ul> 마크업 가져온다.
let sList = document.querySelector('#studentList');
sList.innerHTML = '<li>' + studentList + '</li>'
} //1. 함수 끝
/* 클릭시 배열 내 요소를 삭제하는 리스트 */
function onDelete(){
//[입력부]
//1. 입력받은 데이터를 가져온다. <input> 가져와서 변수에 저장 [DOM 객체]
let studentName = document.querySelector('.studentName');
//2. <input>에 입력된 value[값] 가져오기
let deleteName = studentName.value
//3. 배열 내에서 값에 해당하는 요소 인덱스 찾기
let deleteIndex = studentList.indexOf(deleteName); //입력받은 이름의 인덱스를 찾아 변수에 저장
//4. 배열 해당 인덱스의 요소 제거
studentList.splice(deleteIndex, 1);
//[출력부]
// 1. <ul> 가쟈와서 변수에 저장 [DOM 객체]
let sList = document.querySelector('#studentList');
// 2. <ul> innerHTML 이용한 <ul> {여기에 데이터 넣기 } </ul>
sList.innerHTML = '<li>'+ studentList+'</li>'
}