☑️ 배열관련 메소드
✅ 배열.concat (배열,배열...)
const arr1 = ['사과','딸기'];
const arr2 = ['자동차','비행기','오토바이'];
area1.innerHTML += "arr1.concat(arr2) : " + arr1.concat(arr2) + "<br/>";
// arr1.concat(arr2) : 사과,딸기,자동차,비행기,오토바이 */
기존 arr1 배열 객체는 변경/적용 안됨.
area1.innerHTML += "arr1 : " + arr1 + '<br/>';
// arr1 : 사과,딸기
대입연산자를 이용하여 새로운 배열에 저장
let arr3 = arr2.concat(arr1, [1,2,3]);
// arr3 : 자동차,비행기,오토바이,사과,딸기,1,2,3
✅ 배열.reverse() : 배열의 요소를 역순으로 변경
const arr = [1,2,3,4,5];
divEl.innerHTML += "arr : " + arr +"<br/>";
divEl.innerHTML += "reverse : " + arr.reverse() +"<br/>";
divEl.innerHTML += "arr : " + arr; // 원본 배열 변경
--
arr : 1,2,3,4,5
reverse : 5,4,3,2,1
arr : 5,4,3,2,1
✅ 배열.sort() : 배열의 요소를 정렬하기(오름차순 정렬)
const arr = ["홍길동","김삿갓","이몽룡","홍길동","김삿갓"];
divEl.innerHTML += "arr : " + arr +"<br/>";
divEl.innerHTML += "sort : " + arr.sort() +"<br/>";
divEl.innerHTML += "arr : " + arr + "<br/>"; // 원본 배열 변경
--
arr : 홍길동,김삿갓,이몽룡,홍길동,김삿갓
sort : 김삿갓,김삿갓,이몽룡,홍길동,홍길동
arr : 김삿갓,김삿갓,이몽룡,홍길동,홍길동
내림차순 정렬
divEl.innerHTML += "reverse sort : " + arr1.sort().reverse() + "<br/>";
divEl.innerHTML += "arr1 : " + arr1 + "<br/>"; // 원본 배열 변경
--
reverse sort : 홍길동,홍길동,이몽룡,김삿갓,김삿갓
숫자 정렬
배열 내의 요소들을 문자열로 변경하여 아스키코드 문자 순서대로 정렬하여, 숫자 크기로 정렬이 안됨
const arr2 = [30,21,101,18,1,201,70,7];
divEl.innerHTML += "arr2 sort : " + arr2.sort() + "<br/>";
--
arr2 sort : 1,101,18,201,21,30,7,70
오름차순 / 내림차순
divEl.innerHTML += "arr2 오름차순 정렬 : "
+ arr2.sort(function(left,right) {return left - right}) + "<br/>";
--
arr2 오름차순 정렬 : 1,7,18,21,30,70,101,201
divEl.innerHTML += "arr2 내림 정렬 : "
+ arr2.sort(function(left,right) {return right - left}) + "<br/>";
--
arr2 내림 정렬 : 201,101,70,30,21,18,7,1
✅ 배열에 값을 추가, 조회 : push,pop
push(값) : 배열에 값을 추가. 배열의 크기 리턴
const arr = ["서초동","우장산동","역삼동","가산동","방배동"];
divEL.innerHTML += "arr 에 데이터 추가 후 배열의 크기" + arr.push("신도림동");
divEL.innerHTML += "arr : " + arr + "<br/>";
--
arr 에 데이터 추가 후 배열의 크기 6
arr : 서초동,우장산동,역삼동,가산동,방배동,신도림동
pop() : 배열의 마지막 값을 리턴. 배열에서 제거
divEL.innerHTML += "pop : " + arr.pop() + "<br/>";
// pop : 마곡동
arr.pop();arr.pop();arr.pop(); // 맨뒤 3개의 배열요소 삭제
// arr : 서초동,우장산동,역삼동,가산동
✅ 배열.unshift(추가할요소)
배열의 맨 앞에서 요소 추가 후 배열의 크기 반환
const arr = ["당구","야구","볼링","테니스"];
arr.unshift("농구"); //'농구' 값이 arr[0]에 추가됨
divEL.innerHTML += "unshift후 : " + arr + "<br/>";
// unshift후 : 농구,당구,야구,볼링,테니스
divEL.innerHTML += "unshift후 크기 : " + arr.unshift("탁구") + "<br/>";
// unshift후 크기 : 6
✅ 배열.shift()
배열의 맨 앞에 요소를 제거시키고, 제거된 요소 반환
let del = arr.shift(); // 맨앞의 요소를 제거. 리턴
divEL.innerHTML += "제거시킨 요소 : " + del + "<br/>";
--
제거시킨 요소 : 탁구
arr : 농구,당구,야구,볼링,테니스
✅ 배열.slice(시작인덱스, 끝인덱스) :
시작인덱스에서부터 끝 인덱스 전 까지 추출해서 반환해주는 메서드
slice() : 부분요소, 원본 배열에 영향x
divEL.innerHTML += "slice : " + arr.slice(2,4) + "<br/>";
// slice : HTML,CSS
divEL.innerHTML += "arr : " + arr + "<br/>";
// arr : Java,Oracle,HTML,CSS,JavaScript (원본 배열)
✅ 배열.splice(시작인덱스, 제거수, [추가할 값])
배열의 요소 제거 및 추가
splice() : 치환(변경), 원본 배열에 영향o
divEL.innerHTML += "splice : " + arr.splice(2, 2, "Spring", "MyBatis") + "<br/>";
// splice : HTML,CSS
divEL.innerHTML += "arr : " + arr + "<br/>";
// arr : Java,Oracle,Spring,MyBatis,JavaScript
// (HTML,CSS) → Spring, MyBatis 치환
divEL.innerHTML += "splice : " + arr.splice(1,1,"Mariadb") + "<br/>";
// splice : Oracle
divEL.innerHTML += "arr : " + arr;
// arr : Java,Mariadb,Spring,MyBatis,JavaScript
// Oracle → Mariadb☑️ 함수 (function)
✅ 선언적 함수
1) 함수의 이름이 있다.
2) 함수의 정의와 호출로 구분함
<!-- 클릭시 test1() 함수 호출 -->
<button onclick="test1()">실행확인</button>
<div id="area1" class="area"></div>
<script>
function test1(){ // 함수의 정의
document.getElementById("area1").innerHTML += "test1 함수 호출됨<br/>"
}
</script>
✅ 익명 함수
1) 이름 없는 함수
2) 이벤트 처리용, 변수에 익명함수를 저장해서 사용
3) 호이스팅 대상이 아님.
4) 함수 정의
(4-1) 일반 익명함수 : let val1 = function([매개변수...]) {...}
(4-2) 화살표(=>)함수 : let val1 = function([매개변수...]) => {...}
5) 함수 호출
(1) val(). 변수에 익명함수를 저장한 뒤 변수를 함수처럼 사용
(2) 이벤트에 등록된 익명함수는 이벤트 발생시 호출
<button id="btn">실행확인</button>
<div id="area2" class="area"></div>
<script>
document.getElementById("btn").onclick = function(){
document.getElementById("area2").innerHTML += "이벤트 핸들러를 통해 실행됨 <br/>"
}
</script>
✅ 함수의 매개변수와 인수
1) 매개변수를 선언시 키워드(var,let,const)를 사용하지 않는다. 변수명만 작성함
2) 인수: 호출시 전달되는 값
(2-1) 정의된 매개변수와 인수값의 갯수는 달라도 됨. (undefind 처리 or 전달무시)
(2-2) 전달된 인수가 없는 경우 그 값은 undefined로 됨
3) 전개 연산자
(1) 인수의 갯수가 정해지지 않은 경우 사용되는 매개변수 연산자
(2) 매개변수를 배열로 처리함
(3) 정의 : function test(...args){}
4) arguments 객체
(1) 전달되는 모든 인수는 arguments 객체에 저장됨
(2) arguments 객체는 배열처럼 사용됨
자료형에 상관없이 매개변수를 넣을 수 있다. (String. Int, 배열..)
<button onclick="test2('안녕하세요')">실행확인1</button>
<button onclick="test2(10)">실행확인2</button>
<button onclick="test2([10,20,30])">실행확인3</button>
정의된 매개변수 갯수보다 더 많이 전달시 오류발생. 초과된 전달값은 무시
*test2(value) : 매개변수 1개 상태, 2개 전달시 '홍길동입니다.' 무시
<button onclick="test2('안녕하세요','홍길동입니다.')">실행확인4</button>
...
document.getElementById("area3").innerHTML = arguments[0] + "<br/>";
document.getElementById("area3").innerHTML += arguments[1] + "<br/>";
--
안녕하세요
홍길동입니다.
정의된 매개변수 갯수보다 더 적게 전달시 오류발생안함. 매개변수값이 정의되지 않은 상태 : undefined 상태
<button onclick="test2()">실행확인5</button>
...
document.getElementById("area3").innerHTML = arguments[0] + "<br/>";
document.getElementById("area3").innerHTML += arguments[1] + "<br/>";
--
undefined
undefined<div id="area3" class="area"></div>
<script>
function test2(value){
console.log(arguments); // 매개변수 정보 저장 객체체
document.getElementById("area3").innerHTML = arguments[0] + "<br/>";
document.getElementById("area3").innerHTML += arguments[1] + "<br/>";
document.getElementById("area3").innerHTML += value;
}
</script>
✅ 함수의 리턴
1) 반환타입의 선언이 없다.
2) return 키워드로 함수를 종료함 함수의 끝(}) 을 실행되면 함수 종료
3) 값을 반환해야 하는 경우
(1) return 값;
(2) return 함수();
<button onclick="alert(ran())">클릭</button>
// 1~100 사이의 랜덤값 구해서 반환해주는 함수정의
<script>
function ran(){
return parseInt(Math.random() * 100 + 1);
}
</script>
✅ 익명함수 리턴
이름 : <input type="text" id="userName">
<!-- 함수가 리턴되므로 리턴되는 함수 호출 -->
<button onclick="test5()()">실행확인</button>
<script>
function test5(){
const inputEL = document.getElementById("userName");
return function(){ // 함수를 리턴
alert(inputEL.value);
}
}
</script>☑️ 자기 호출 함수
✅ 자기 호출 함수
1) 함수의 정의와 호출을 합친 형태
2) 함수를 정의하고, 바로 호출될 수 있도록 구상됨
3) 일반 익명함수의 정의와 호출
일반 익명함수를 정의하고 호출
(function() {console.log("hello World");})();
화살표 함수
(() => {console.log("hello World")})();
자기 호출이 필요한 경우
let arr = [function() {console.log("안녕")}, function() {console.log("홍길동")}];
(arr[0])();
(arr[1])();
✅ 콜백함수(callback function)
1) 어떤 함수를 다른 함수의 인수로 전달
2) 인수로 전달된 함수를 콜백함수
3) 함수에서 호출되는 함수를 콜백함수라 함.
함수의 정의
- 익명함수를 이용하여 콜백 함수 정의(주로 사용하는 방식)
function func1(d1,d2,func) {
func(d1,d2); //콜백함수
}
함수의 호출 (함수의 정의처럼 생겼지만 아님)
func1("안녕", "홍길동", function(data1,data2){
console.log("1:", data1);
console.log("2:", data2);
});
//화살표 함수를 이용하여 콜백 함수 정의(주로 사용하는 방식)
func1("안녕", "홍길동", (data1,data2)=>{
console.log("3:", data1);
console.log("4:", data2);
});
☑️ 객체
✅ 객체(Object)
1. 여러개의 값으로 구성된 하나의 데이터
2. 중괄호({})로 표현
3. 하나의 값은 쌍(pair)으로 구성
{
"속성명": "속성값",
속성명 : "속성값"
...
}
✅ 객체의 속성 조회
1. 마침표 : 객체.속성명
2. []대괄호 : 객체["속성명"]
✅ 자바스크립트의 배열 : 자바의 List객체와 유사
배열은 인덱스를 이용하여 요소 사용함
const arr = ["망고",4000,"피클",["망고","설탕"]];
// ['망고', 4000, '피클', Array(2)]
✅ 자바스크립트의 객체 : 자바의 Map 객체와 유사.
객체는 속성값을 이용하여 요소 사용함
const product = {
"pName" : "망고",
"price" : 4000,
"kind" : "피클",
"ingredient": ["망고","설탕"]
};
console.log(product);
console.log(typeof product);
--
{pName: '망고', price: 4000, kind: '피클', ingredient: Array(2)}
object
✅ 속성을 이용하여 접근
1.방법 : 객체명[속성명]
divEl.innerHTML += "kind : " + product["kind"]+"<br>";
divEl.innerHTML += "ingredient[0] : " + product["ingredient"][0]+"<br>";
2.방법 : 객체명.속성명
divEl.innerHTML += "kind : " + product.kind+"<br>";
divEl.innerHTML += "ingredient[0] : " + product.ingredient[0]+"<br>";
✅ 객체 생성하기
let obj = {
age:30,
name:"길동",
friend: {
name:"삿갓",
phone : "010-1111-2222"
},
hobbies: ["여행", "축구", "피아노"],
info : function() {
console.log(`이름:${obj.name}, 나이:${obj.age}`);
console.log(`이름:${this.name}, 나이:${this.age}`);
}
};
(obj.info)(); // 이름:길동, 나이:30
(obj["info"])(); // 이름:길동, 나이:30
✅ 객체의 속성 확인하기
console.log("이름:",obj.name,obj["name"]);
console.log("나이:",obj.age,obj["age"]);
console.log("친구:",obj.friend.name, obj["friend"]["name"]);
console.log("친구:",obj.friend["phone"], obj["friend"]["phone"]);
console.log("취미:",obj.hobbies, obj["hobbies"]);
for(let i=0; i<obj.hobbies.length; i++) {
console.log("취미:", i+1, ":",obj.hobbies[i]);
}
for(let i=0; i<obj["hobbies"].length; i++) {
console.log("취미:", i+1, ":",obj.hobbies[i]);
}
--
이름: 길동 길동
나이: 30 30
친구: 삿갓 삿갓
전화번호: 010-1111-2222 010-1111-2222
취미: ['여행', '축구', '피아노'] ['여행', '축구', '피아노']
취미: 1 : 여행
취미: 2 : 축구
취미: 3 : 피아노
✅ 객체의 속성을 동적으로 추가가 가능함
let computer = {}; //비어 있는 객체
//속성 추가
computer.model = "gram";
computer.price = 150;
console.log(computer);
// {model: 'gram', price: 150}
✅ 객체의 속성 조회. for in 구문으로 조회 (자바의 foreach 구문과 비슷함)
for(let c in computer){
// console.log(c,":",computer.c) //for in 구문에서는 마침표를 이용한 속성 참조 불가
console.log(c,":",computer[c]); //for in 구문에서는 대괄호를 이용한 속성 참조만 가능
}
--
model : gram
price : 150
for(let c in computer){
console.log(computer[c]);
}
--
gram
price
/*
snack 객체를 이용하여 #area1 영역에
목록으로 출력하기
1. code = A100
2. name = 홈런볼
3. price = 2000;
*/
let snack = {
code : 'A100',
name : '홈런볼',
price: 2000
}
let result = "<ol>";
for(let c in snack){
result += ("<li>" + c + "=" + snack[c] + "</li>");
}
result += "</ol>";
document.getElementById("area1").innerHTML += result;
✅ 속성값 변경. (추가와 같은 방법)
computer.price = 200;
✅ 속성 삭제
delete computer.price;let contacts = [
{name:"길동", phone:'010-1111-2222', email:'kildong@aaaa.bbb'},
{name:"삿갓", phone:'010-2222-3333', email:'sakgat@aaaa.bbb'},
{name:"몽룡", phone:'010-3333-4444', email:'mongyong@aaaa.bbb'}
]
console.log(contacts[0].name)
/*
contacts 배열을 이용하여 #area1 영역에 테이블로 출력하기
성명 연락처 이메일
길동 010-1111-2222 killdong@aaa.bbb
*/
let table = `<table border="1"><tr><th>성명</th><th>연락처</th><th>이메일</th></tr>`;
// contacts : 배열객체
// contacts[0] : 자바스크립트 객체
for(let i = 0; i <= contacts.length; i++){ // 배열객체 요소순회
table += `<tr>`;
for(let p in contacts[i]){
// contacts[인덱스][속성]
table += `<td>${contacts[i][p]}</td>`;
}
table += `</tr>`;
}
table += `</table>`;
document.getElementById("area1").innerHTML += table;☑️ 생성자 함수
1. 객체를 만드는 함수
2. 보통 첫글자를 대문자로 작성한다.
3. 생성자 함수의 정의
function 함수명(매개변수...) {
this.속성 = 매개변수;
...
}
4. 객체 생성
let 변수 = new 함수명(인수,...)
✅ 생성자 함수 정의
function Product(code, name, price) {
this.code = code;
this.name = name;
this.price = price;
}
✅ 생성자 함수 호출(객체 생성)
let p1 = new Product('A1000','홈런볼',1000);
let p2 = new Product('A1001','치토스',2000);
console.log(p1);
console.log(p2);
--
Productcode: "A1000"name: "홈런볼"price: 1000[[Prototype]]: Object
Productcode: "A1001"name: "치토스"price: 2000[[Prototype]]: Object☑️ 프로토타입(prototype)
1. 모든 객체들이 공유하는 메모리 공간을 의미함.
2. 여러 환경에서 공통데이터(값, 함수,...)를 프로토타입에 저장해서 사용 가능
3. 자바에서 static 클래스, 변수랑 비슷한 기능
4. 내가 만든 함수는 물론, 시스템에 등록되어있는 함수 또한 프로토타입 함수를 직접 제작할 수 있다.
5. 사용방법
✅ 생성자 함수 내부
this.__proto__.속성 = 값 or 함수;
function Korean(name) {
this.name = name;
this.__proto__.nation = 'South Korea';
this.__proto__.capital = 'Seoul';
this.__proto__.slogan = function() {
console.log("빨리빨리");
}
}
let person1 = new Korean("길동");
let person2 = new Korean("몽룡");
console.log(person1);
console.log(person2);
person1.slogan();
person2.slogan();
--
Korean {name: '길동'}name: "길동"[[Prototype]]: Objectcapital: "Seoul"nation: "South Korea"slogan: ƒ ()constructor: ƒ Korean(name)[[Prototype]]: Object
Korean {name: '몽룡'}name: "몽룡"[[Prototype]]: Objectcapital: "Seoul"nation: "South Korea"slogan: ƒ ()constructor: ƒ Korean(name)[[Prototype]]: Object
빨리빨리
빨리빨리
✅ 생성자 함수 외부
함수명.prototype.속성 = 값 or 함수;
function American(name) {
this.name = name;
}
American.prototype.nation = "United State";
American.prototype.capital = "Washington D.C";
American.prototype.slogan = function() {
console.log("unknown");
}
let person3 = new American("Jack");
let person4 = new American("Daniel");
console.log(person3);
console.log(person4);
person3.slogan();
person4.slogan();
--
American {name: 'Jack'}name: "Jack"[[Prototype]]: Objectcapital: "Washington D.C"nation: "United State"slogan: ƒ ()constructor: ƒ American(name)[[Prototype]]: Object
American {name: 'Daniel'}name: "Daniel"[[Prototype]]: Objectcapital: "Washington D.C"nation: "United State"slogan: ƒ ()constructor: ƒ American(name)[[Prototype]]: Object
unknown
unknown
✅ 오늘 요일을 출력하기
let weekNames = ['일','월','화','수','목','금','토'];
console.log(weekNames[now.getDay()]+"요일");
// 월요일
// Date 객체의 prototype에 getWeekNames() 함수를 등록하기
Date.prototype.getWeekNames = function() {
let weekNames = ['일','월','화','수','목','금','토'];
return weekNames[now.getDay()];
}
onsole.log(now.getWeekNames()+"요일");
// 월요일☑️ TTS
Text To Speech
<textarea rows="10" cols="50" id="intext">안녕하세요</textarea>
<button onclick="setlang('ko-KR'); ttsTest()">읽기</button>
<script>
let msg = new SpeechSynthesisUtterance();
// 언어 설정
function setlang(t) {
msg.leng = t;
}
function ttsTest() {
msg.text = document.querySelector("#intext").value;
speechSynthesis.speak(msg);
}
</script>☑️ Test
<p>
다음 보기에 있는 데이터들은 배열로 받고 하나의 배열로 합쳐보세요.<br>
이때 입력 필드에 배열에 있는 데이터를 전송하면 배열의 alert를 통하여<br>
배열의 위치를 알려주고, 없으면 "존재하지 않습니다" 를 알려주면 됩니다.<br>
</p>
<fieldset>
<legend>보기</legend>
<label id="la1">사과,바나나,당근</label><br>
<label id="la2">김밥,치즈,떡볶이,햄버거</label><br>
<label id="la3">환타,사이다,콜라</label><br>
<label id="la4">고양이,강아지</label><br>
</fieldset>
<br>
<input type="text" placeholder="찾을 문자열을 입력하세요" size=100 id="text">
<button onclick="arrayTest();"> 내용찾기 </button>
<script>
function arrayTest(){
let result = [
document.querySelector("#la1").innerHTML,
document.querySelector("#la2").innerHTML,
document.querySelector("#la3").innerHTML,
document.querySelector("#la4").innerHTML
].join(",").split(",");
let text = document.getElementById("text").value;
let found = false;
for(let i = 0; i < result.length; i++){
if(text == result[i]){
alert(result[i] + "는 배열 index " + i + "번에 존재합니다.");
found = true;
break;
}
}
if(!found){
alert("존재하지 않습니다");
}
}
</script>
✅ la1~4 의 textContent 를 result 배열의 객체로 저장
.join(",") : 배열객체 → , 기준으로 문자열로 변환 (하나의 배열로 만들기위함)
.split(",") : 문자열 → , 기준으로 배열객체로 변환
let result = [
document.querySelector("#la1").innerHTML,
document.querySelector("#la2").innerHTML,
document.querySelector("#la3").innerHTML,
document.querySelector("#la4").innerHTML
].join(",").split(",");✅ result 배열 중 입력값과 같은 요소의 index 번호 출력
let found = false : 배열안 같은 요소가 없는상태
*for문안에서 if, else 를 사용하면 배열를 끝까지 확인을 안하고 중간에 멈추는 문제 발생하여 !found 문 밖에서 처리
let found = false;
for(let i = 0; i < result.length; i++){
if(text == result[i]){
alert(result[i] + "는 배열 index " + i + "번에 존재합니다.");
found = true;
break;
}
}
if(!found){
alert("존재하지 않습니다");
}<p>
다음 보기에 있는 문자열을 가지고 정답과 같이 만드세요. (별도의 문자열을 쓰면 안됨)<br>
그리고 출력 부분에 출력하도록 하면 됩니다.
정답 : "brlove"
</p>
<fieldset>
<legend>보기</legend>
<label id="stringla1">r b</label><br>
<label id="stringla2">e v o l</label><br>
</fieldset>
<br>
<p style="border:1px solid red;" id="print">이 부분에 정답이 출력 될 수 있도록 하세요</p>
<button onclick="reverseTest();">실행</button>
✅ let arr3 = arr2.concat(" ", arr1).split(" ").reverse().join('');
concat() : 원본 배열에 적용이 안되어 새로운 배열에 적용
concat(" ", arr1) : " " 공백을 넣지 않으면 [ e v o lr b ] 붙게되어 공백 추가!
function reverseTest() {
let arr1 = document.querySelector("#stringla1").innerHTML; // "r b"
let arr2 = document.querySelector("#stringla2").innerHTML; // "e v o l"
let arr3 = arr2.concat(" ", arr1).split(" ").reverse().join('');
document.getElementById("print").innerHTML = arr3;
}<p>
문자열을 여러 개 입력 받은 후 출력 버튼 클릭시 입력했던 모든 문자열이 출력되도록 만드세요.<br>
예) 개구리 -> 입력, 바나나 -> 입력, 복숭아 -> 입력<br>
출력 : 개구리,바나나,복숭아
</p>
<fieldset>
<legend>입력</legend>
<input type="text" id="strInput">
<button onclick="input()">입력</button>
</fieldset>
<br>
<p style="border:1px solid red;" id="print2">이 부분에 정답이 출력 될 수 있도록 하세요</p>
<div id="result1"> </div>
<button onclick="printTest();">출력</button>
✅ arr.push(text);
input 함수 밖에 let arr 배열을 선언해야 입력받은 값을 push로 계속 추가/저장 할수있다.
document.getElementById("strInput").value = "" : 배열요소 추가 후 vale 값 초기화하여 입력창 초기화
<script>
let arr = [];
function input(){
let text = document.getElementById("strInput").value;
if(text !== ""){
arr.push(text);
document.getElementById("strInput").value = "";
}
}
function printTest(){
document.getElementById("print2").innerHTML = arr;
}
</script><p>
다음 보기의 문자열을 바탕으로<br>
삭제할 음식과 추가할 음식을 입력받아서 <br>
지우고,추가하는 코드를 작성하여라. (단, 1개씩 입력)<br>
<br>
예시) 삭제 : 당근 / 추가 : 타코야끼 <br>
결과-> 피자 치킨 햄버거 떡볶이 타코야끼 <br>
</p>
<fieldset>
<legend>보기</legend>
<label id="stringla4">피자 치킨 당근 햄버거 떡볶이</label><br>
</fieldset>
<br>
<input type="text" id="remove" size="25" placeholder="삭제할 음식이름을 입력하세요">
<input type="text" id="add" size="25" placeholder="추가할 음식이름을 입력하세요">
<p style="border:1px solid red;" id="print4">이 부분에 정답이 출력 될 수 있도록 하세요</p>
<button onclick="print2Test();"> 처리 및 출력 </button>
✅ stringla4 문자열 → 배열 전환
arr.split(" ") : " "(공백) 기준으로 배열로 전환
let arr = document.getElementById("stringla4").textContent;
let result = arr.split(" ");
✅ result.includes(add) - 배열요소 추가
result 배열 안 add 값이 있을경우 true, 없을 경우 false 반환
if(add !== ""){
if(result.includes(add)){
alert("음식이 이미 있습니다.")
document.getElementById("add").value = "";
return;
} else{
result.push(add);
document.getElementById("add").value = "";
}
}
✅ result.splice(index, 1) - 배열요소 제거
삭제할 음식의 index(result.indexOf(remove)) 순서에서 1개(자기자신) 제거
index !== -1 : 배열안에 삭제할 값이 있을경우 1~ ... / 없을경우 : -1 반환
result.join(" ") : join(" ")를 해줌으로써 출력시 , , , 삭제
if(remove != ""){
let index = result.indexOf(remove);
if(index !== -1){
result.splice(index, 1);
document.getElementById("remove").value = "";
}else{
alert("삭제할 음식이 없습니다.")
document.getElementById("remove").value = "";
return;
}
}
document.getElementById("print4").innerHTML = result.join(" ");
<p>
다음 입력 버튼을 클릭하면 이름,나이,주소를 prompt로 입력 받은 후 입력 받은 정보를<br>
member 라는 객체에 저장.<br>
이 후 출력 버튼을 클릭하면 member 객체 안에 있는 정보를<br>
출력 창에 출력되도록 만들어보세요.<br>
(단, 입력을 받지 않은 상태에서 출력 버튼 클릭시 입력을 먼저 해달라는 알림을 띄우도록 할 것)<br>
ex)<br>
이름 : OOO<br>
나이 : OO세<br>
주소 : XXX XXX XXXX ...<br>
</p>
<fieldset>
<legend style="color: red;">출력창</legend>
<div id="print"></div>
</fieldset>
<br>
<button onclick="insertMember();">입력</button>
<button onclick="printMember();">출력</button>
✅ prompt로 입력받아 meber 객체에 값 저장, null 값 입력시 알림창
member.age = prompt("나이 입력", "29") + "세" : 값 출력시 : 29세
let member= {};
function insertMember(){
member.name = prompt("이름 입력", "홍길동");
member.age = prompt("나이 입력", "29") + "세";
member.add = prompt("주소 입력", "서울시");
if(member.name == null || member.age == null+"세" || member.add == null){
alert("다시 입력 부탁드립니다.");
return;
}
}
✅ labels 배열를 생성하여 member 배열과 반복문을 돌려 요소 출력.
✅ const labels = { name: "이름", age: "나이", add: "주소" }
이 객체는 name, age, add라는 문자열 키(String Key) 를 가지고 있다. labels["name"] 처럼 문자열 키 를 사용
*name → 이름, age → 나이, add → 주소
✅ for (let i in member) { labels[i] + ":" + member[i] }
객체의 속성 조회. for in 구문으로 조회 (자바의 foreach 구문과 비슷함)
이름(name) : 이름 입력값
나이(age) : 나이 입력값
주소(add) : 주소 입력값
function printMember(){
if(member.name == null || member.age == null+"세" || member.add == null){
alert("입력을 먼저 부탁드립니다.");
return;
}
const labels = { name: "이름", age: "나이", add: "주소" };
document.getElementById("print").innerHTML = "";
for(let i in member){
if(member[i] !== null) document.getElementById("print").innerHTML += `${labels[i]} : ${member[i]}<br/>`;
}
}
<fieldset>
<legend>검색할 항목을 선택하세요.</legend>
<input type="radio" name="category" onclick="showDiv(this);" id="title"><label for="title">제목</label>
<input type="radio" name="category" onclick="showDiv(this);" id="date"><label for="date">날짜</label>
<input type="radio" name="category" onclick="showDiv(this);" id="writer"><label for="writer">작성자</label>
</fieldset>
<hr>
<div id="titleBox" class="box">
<form method="post" action="">
<label> 검색할 제목을 입력하세요 : </label><br>
<input type="search" name="title" size="50">
<input type="submit" value="검색">
</form>
</div>
<div id="dateBox" class="box">
<form method="post" action="">
<label> 검색할 날짜를 선택하세요 : </label><br>
<input type="date" name="start"> -
<input type="date" name="end">
<input type="submit" value="검색">
</form>
</div>
<div id="writerBox" class="box">
<form method="post" action="">
<label> 검색할 작성자 아이디를 입력하세요 : </label><br>
<input type="search" name="writer" size="25">
<input type="submit" value="검색">
</form>
</div>
✅ 선택된 객체(this 값)를 전달받아 css 추가
box.forEach(box => box.style.display="none") : box 클래스를 가진 요소 전부 display='none'; 클래스 추가
* 기본적인 for문보다 forEach문을 사용하여 간편하게 작업
document.getElementById(test.id + 'Box')
- test.id + Box : 체크선택 된 id값 <input type="radio" name="category" onclick="showDiv(this);" id="title"> : titleBox
function showDiv(test) {
// 모든 검색 입력란 숨기기
let box = document.querySelectorAll(".box");
box.forEach(box => box.style.display="none");
// 선택된 입력란만 표시
let selectedBox = document.getElementById(test.id + 'Box');
selectedBox.style.display = 'block';
}PS. 자바와 다른 매력이 있는 언어다. 자바는 T라면 자바스크립트는 F 이랄까?
'JavaScript' 카테고리의 다른 글
| [BCGD] 비전공자 백엔드 개발 도전기 (37) (1) | 2025.03.29 |
|---|---|
| [BCGD] 비전공자 백엔드 개발 도전기 (36) (0) | 2025.03.28 |
| [JavaScript] forEach/each/append/appendChild 총 정리 (0) | 2025.03.23 |
| [BCGD] 비전공자 백엔드 개발 도전기 (34) (0) | 2025.03.22 |
| [BCGD] 비전공자 백엔드 개발 도전기 (33) (1) | 2025.03.21 |