반응형
1)배열의 메서드
1-1) concat
1-2) reverse
1-3)sort
1-4)push , pop
1-5) slice , splice
2) 함수
2-1) 선언적함수
2-2)익명함수
2-3)함수의매개변수
2-4)함수의리턴과 익명함수의 리턴
2-5) 자기호출함수
2-6) 콜백함수
3)객체
3-1)객체기본
3-2)객체2
3-3)객체의 추가 변경 삭제
3-4) 예제
3-5) 생성자함수
3-6) 프로토타입
3-7) 글씨를 읽는 기능
4)예제
1) 배열의 메서드
1-1) concat
배열을 합쳐주는 함수
객체의 변경이 이루어지지않음
적용하려면 새로운배열에 저장해야함!
<body>
<h3>배열관련 메서드</h3>
<h4>배열.concat(배열,배열....)</h4>
<div id="area1" class="area"></div>
<button onclick="concatTest();">확인하기</button>
<script src="ex14_배열2.js"></script>
</body>function concatTest(){
const area11 = document.querySelector("#area1");
const arr1 = ["사과","딸기"]
const arr2 = ["자동차","비행기","오토바이"]
area11.innerHTML = "arr1 : "+arr1 + "<br>";
area11.innerHTML += "arr2 : "+arr2 +"<br>";
area11.innerHTML += "arr1.concat(arr2) : "+arr1.concat(arr2)+"<br>";
area11.innerHTML += "arr1: "+arr1+"<br>";// arr1배열객체에 변화X
let arr3 = arr2.concat(arr2,[1,2,3]); // 새로운배열에 저장
area11.innerHTML += "arr3 : "+arr3;
}
1-2) reverse
배열의 순서를 뒤집는 함수
객체의 변경이 일어남 (새로운배열에 저장할필요 X)
<body>
<hr><br>
<h4>배열.reverse() : 배열의 요소를 역순으로 변경</h4>
<div id="area2" class="area"></div>
<button onclick="reverseTest();">확인하기</button>
<script src="ex14_배열2.js"></script>
</body>function reverseTest(){
const divEl = document.getElementById("area2");
const arr = [1,2,3,4,5];
divEl.innerHTML = "arr : "+arr+"<br>";
divEl.innerHTML += "reverse : "+arr.reverse() + "<br>";
divEl.innerHTML += "arr : "+arr;
//reverse는 arr객체에 변화를준다.(새로운배열에 저장할필요없음)
}
1-3) sort
문자의 크기순으로 정렬
(숫자배열은 그냥 정렬하면 순서가 이상할것임)
(내림차순의정렬은 reverse()를 이용하자)
<body>
<hr><br>
<h4>배열.sort() : 배열의 요소를 정렬</h4>
<div id="area3" class="area"></div>
<button onclick="sortTest();">확인하기</button>
<script src="ex14_배열2.js"></script>
</body>function sortTest(){
const divEl = document.getElementById("area3");
const arr = ["홍길동","김삿갓","유재석","하하","박명수","이이경"];
divEl.innerHTML = "arr : "+arr+"<br>";
divEl.innerHTML += "arr.sort() : "+arr.sort() + "<br>";
divEl.innerHTML += "arr : "+arr+"<br>"; //원본배열변경
//내림차순 정렬
divEl.innerHTML += "arr.sort().reverse() : "+arr.sort().reverse() + "<br>";
const arr2 = [30,21,101,18,1,201,40,7];
divEl.innerHTML += "arr2 sort : "+arr2.sort() +"<br>"
//배열내의 요소들을 문자열로 변경해 아스키코드문자 순서대로정렬함.;
//숫자 크기로 정렬이안됨
divEl.innerHTML+= "arr2 오름차순정렬 : "+
arr2.sort(function(left,right){return left-right})+"<br>"
//자바의방식(L-R : 음수 : 앞 , 양수 : 뒤)
divEl.innerHTML+= "arr2 내림차순정렬 : "+
arr2.sort(function(left,right){return -1*(left-right)})+"<br>"
}
1-4) push , pop
push : 값 대입
pop : 값 꺼내기(LIFO)
<body>
<hr><br>
<h4>배열에 값을 추가 , 조회 : push ,pop</h4>
<div id="area4" class="area"></div>
<button onclick="pushPopTest();">확인하기</button>
<script src="ex14_배열2.js"></script>
</body>
1-5) shift , unshift
배열.unshifht(추가할요소) : 배열의 맨 앞에 요소 추가후 배열의크기반환
배열.shift() : 배열의 맨 앞에 요소 제거시키고 제거된 요소 반환
<hr><br>
<h4>
6-1) 배열.unshifht(추가할요소) : 배열의 맨 앞에 요소 추가후 배열의크기반환<br>
6-2) 배열.shift() : 배열의 맨 앞에 요소 제거시키고 제거된 요소 반환
unshift , shift : FIFO
</h4>
<div id="area5" class="area"></div>
<button onclick="shiftUnshiftTest();">확인하기</button>
<script src="ex14_배열2.js"></script>function shiftUnshiftTest(){
const divEl = document.querySelector("#area5");
const arr = ["당구","야구","볼링","테니스"];
divEl.innerHTML = "arr : "+arr +"<br>"
arr.unshift("농구");//맨앞에 추가
divEl.innerHTML += "unshift 후 : "+arr+"<br>";
divEl.innerHTML += "unshift('탁구') 후 크기 : "+arr.unshift("탁구")+"<br>";
let del = arr.shift();//맨앞의 요소를 제거,리턴
divEl.innerHTML += "제거시킨 요소 : "+del +"<br>";
divEl.innerHTML += "arr: "+arr +"<br>";
}
1-6) slice , splice
배열.slice(시작인덱스,끝인덱스) : 시작인덱스~(끝인덱스-1) 까지 추출해 반환<br>
배열.splice(시작인덱스,제거수,[추가할 값]) : 배열의 요소제거 및 추가
<hr><br>
<h4>
7-1) 배열.slice(시작인덱스,끝인덱스) : 시작인덱스~(끝인덱스-1) 까지 추출해 반환<br>
7-2) 배열.splice(시작인덱스,제거수,[추가할 값]) : 배열의 요소제거 및 추가
unshift , shift : FIFO
</h4>
<div id="area6" class="area"></div>
<button onclick="sliceSpliceTest();">확인하기</button>nction sliceSpliceTest(){
const divEl = document.getElementById("area6");
const arr = ["Java","Oracle","HTML","CSS","JavaScript"];
divEl.innerHTML = "arr : "+arr +"<br>";
divEl.innerHTML += "<b>arr.slice(2,4): </b>"
+arr.slice(2,4) +"<br>";
//2번인덱스~3번인덱스까지추출해 반환
divEl.innerHTML += "arr : "+arr +"<br>";
//원본배열에 영향을 끼치진않음
divEl.innerHTML += "<b>arr.splice(2,2,'spring','MyBatis')</b> "
+arr.splice(2,2,"spring","MyBatis")+"<br>"
divEl.innerHTML +="arr : "+arr+"<br>";
//원본배열에 영향을 끼침
//Oracle을 MariaDB로 변경해보시오
divEl.innerHTML += "<b>arr.splice(arr.indexOf('Oracle'),1,'MariaDB')</b>"
+arr.splice(arr.indexOf("Oracle"),1,'MariaDB')+"<br>"
divEl.innerHTML += "arr : "+arr+"<br>"
}
2) 함수
2-1) 선언적함수
<body>
<h1>함수(function)</h1>
<h3 onclick="test1()">*선언적함수</h3>
<pre>
function 함수명([매개변수,매개변수,..]){
해당함수 호출시 실행시킬 소스코드;
[return 결과값;]
}
</pre>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area"></div>
<script src="ex15_함수.js"></script>
</body>function test1(){
document.querySelector("#area1").innerHTML +="test1함수호출됨 <br>"
}
2-2) 익명함수
변수|속성 : function([매개변수,매개변수,..]){
해당함수호출시 실행할 소스코드;
}
1.익명함수
1) 이름X 함수
2) 이벤트처리용
3) 호이스팅대상이 아님(코드중 항상 먼저 처리X)
4) 함수정의
(1) 일반익명함수
let val1 = function([매개변수..]){...};
(2) 화살표(=>)함수 (람다)
let val1 = ([매개변수..]) => {...}
5)함수호출
(1) val1(). 변수에익명함수를 저장 후 변수를 함수처럼 사용
(2) 이벤트에 등록된 익명함수는 이벤트발생시 호출
<body>
<h3>익명함수 : 이름이 없는 함수</h3>
<pre>
변수|속성 : function([매개변수,매개변수,..]){
해당함수호출시 실행할 소스코드;
}
특정 변수나 속성에 대입되는 함수 제시시 주로사용
(주로이벤트핸들러 작성시 사용)
</pre>
<button id="btn">실행확인</button>
<div id="area2" class="area"></div>
<script src="ex15_함수.js"></script>
</body>함수의 이름이 없음!
document.getElementById("btn").onclick = function(){
document.getElementById("area2").innerHTML += "이벤트핸들러 통해 실행<br>";
}
// document.getElementById("btn").onclick = ()=>
// document.getElementById("area2").innerHTML +="이벤트핸들러 통해 실행<br>";
2-3)함수의 매개변수
<!-- 정의된 매개변수 갯수보다 더 많이 전달 시 오류발생X 초과된 전달값은 무시-->
<!--정의된 매개변수 갯수보다 더 적게 전달 시 오류X , undefined상태-->
.매개변수와 인수 설명
1) 매개변수를 선언시 키워드 사용X . 변수명만 작성함
2) 인수 : 호출시에 전달된 값
(1) : 정의된 매개변수와 인수값의 갯수는달라도됨
(2) : 전달된 인수가없는 경우 undefined;
(3) : 매개변수 < 인수 : 매개변수크기만큼만 읽어냄(arguments에 전부저장은 됨)
3) 전개연산자
(1) 인수의갯수가 정해지지않은 경우 사용하는 연산자
(2) 매개변수를 배열로처리함
(3) 정의 : functinon test(..args){...}
4)arguments
(1) 전달되는 모든 인수는 arguments에 저장
(2) 배열처럼 사용 됨
<h2>함수의 매개변수</h2>
<div id="area3" class="area"></div>
<button onclick="test2('안녕하세요')">실행확인1</button>
<button onclick="test2(10)">실행확인2</button>
<button onclick="test2([10,20,30])">실행확인3</button>
<button onclick="test2(true)">실행확인4</button>
<!-- 정의된 매개변수 갯수보다 더 전달 시 오류발생X 초과된 전달값은 무시-->
<button onclick="test2('안녕하세요','홍길동이에요')">실행확인5</button>
<!--정의된 매개변수 갯수보다 더 적게 전달 시 오류X , undefined상태-->
<button onclick="test2()">실행확인6</button>
<script src="ex15_함수.js"></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+"<br>";
}2-4) 함수의리턴과 익명함수의 리턴
반환(return)
1)반환타입의 선언이 없다
2) return 키워드로 함수를 종료함 함수의끝(})이 실행되면 함수종료
3) 값을 반환해야하는경우
(1) return 값;
(2) return 함수();
함수의 리턴 : 값을 반환
익명함수의 리턴 : 함수를 반환
함수명()(); 의 형식으로 작성
<h2>함수의 리턴</h2>
<button onclick="alert(ran())">클릭</button>
<br>
<h3>익명함수를 return</h3>
이름 : <input type="text" id="userName">
<button onclick="test5()();">실행확인</button>
<!-- 함수가 리턴되므로 리턴되는 함수를 호출-->
<!-- test5()() : test5()를 실행 ==> () : 익명함수-->클릭 누를 시 : ran()의 반환값을 윈도우에 띄움
실행확인버튼 누를 시 test5호출 --> () 익명함수 반환
function ran(){
return parseInt(Math.random()*100+1);
//1~100사이의 랜덤값 구해서 반환
}
function test5(){
const inputEl = document.getElementById("userName");
return function(){
confirm(inputEl.value+"이 맞으신가요?");
}
}
2-5) 자기호출함수
자기호출함수
1. 함수의정의와 호출을 합침
2 함수를 정의 , 바로 호출될수있도록 구성
3 일반 익명함수와 정의와호출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//일반 익명함수를 정의하고 호출
(function(){
console.log("hello world");
})();
//화살표함수
(()=>{
console.log("hello world2")
})();
//자기호출이 필요한경우
let arr = [function() {console.log("안녕")},
function() {console.log("홍길동")} ];
(arr[0])();
(arr[1])();
</script>
2-6) 콜백함수
2.콜백함수(callback function)
1)함수를 다른함수의 인수로전달!
2)인수로전달된 함수를 콜백함수라 부름
3) 함수에서 호출되는 함수
<script>
function info(d1,d2){
console.log(d1,d2);
}
function func1(d1,d2,func){
func(d1,d2);
}
func1("안녕","하세요",info); //info함수 호출
//익명함수를 이용해 콜백함수 정의(주료사용하는방식)
func1("TO","BAD",function(data1,data2){
console.log("1:",data1),
console.log("2:",data2)});
//화살표함수이용
func1("TO","BAD",(data1,data2)=>{
console.log("1:",data1);
console.log("2:",data2);
});
</script>
3) @@ 객체 @@
3-1) 객체 기본
자바스크립트의 배열 : 자바의 List객체와 유사
배열은 인덱스이용해 요소를 사용할수있음
자바스크립트의 객체 : 자바의 Map객체와유사함
객체는 key값을 이용해 요소사용
객체(Object)
1.여러개의 값으로 구성된 하나의데이터
2.중괄호 {} 로 표현
3.하나의값은 쌍(pair)로 구성
{
"속성명" : "속성값" ,
속성명 : "속성값"
.... }
객체의 속성 조회법
1. 대괄호 : 객체명["속성명"]
2. .이용 : 객체명.속성명
<body>
<h1>객체</h1>
<h3>객체의 선언 및 사용</h3>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area big"></div>
<script src="ex17_객체.js"></script>
</body>function test1(){
//자바스크립트의 배열 : 자바의 List객체와 유사
//배열은 인덱스이용해 요소를 사용할수있음
const arr = ["망고",4000,"피클",["망고","설탕"]];
//자바스크립트의 객체 : 자바의 Map객체와유사함
//객체는 key값을 이용해 요소사용
const product = {
pName : "망고",
price : 4000,
kind : "피클",
ingredient : ["망고","설탕"]
}
console.log(product);
console.log(typeof product);
let div1 = document.querySelector("#area1");
//방법1 객체명.속성명
div1.innerHTML+= "<h4>방법1</h4>";
div1.innerHTML+= "product: "+product+"<br>";
div1.innerHTML+= "pName : "+product.pName+"<br>";
div1.innerHTML+= "price : "+product.price+"<br>";
div1.innerHTML+= "kind : "+product.kind+"<br>";
div1.innerHTML+= "ingredient[0] : "+product.ingredient[0]+"<br>";
div1.innerHTML+= "ingredient[1] : "+product.ingredient[1]+"<br>";
//방법2 객체명["속성명"]
div1.innerHTML+= "<h4>방법2</h4>";
div1.innerHTML+= "product: "+product+"<br>";
div1.innerHTML+= "pName : "+product["pName"]+"<br>";
div1.innerHTML+= "price : "+product["price"]+"<br>";
div1.innerHTML+= "kind : "+product["kind"]+"<br>";
div1.innerHTML+= "ingredient[0] : "+product["ingredient"][0]+"<br>";
div1.innerHTML+= "ingredient[1] : "+product["ingredient"][1]+"<br>";
}
3-2) 객체2
객체의속성으로 객체를 사용가능
객체의속성으로 함수를 사용가능
<script>
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)(); //obj.info의 익명함수 호출
(obj["info"])();
//객체의 속성확인
console.log("이름 : ",obj.name)
console.log("나이 : ",obj.age)
console.log("친구 : ",obj.friend.name ,
"| 번호:",obj.friend.phone )
console.log("취미 : ",obj.hobbies)
//반복문을 이용한 취미 출력
for(i=0;i<obj.hobbies.length;i++){
console.log("취미 " ,obj.hobbies[i])
}
</script>
3-3) 객체의 추가 삭제 변경
<script>
console.log("객체의 추가 변경 삭제")
//객체의 속성은 동적추가가 가능
let computer = {};//empty 객체
console.log(computer);
computer.model = "gram";
computer.price = 150; // 존재하지않는 속성이면 만들어서넣어줌
console.log(computer);
//객체의 속성 조회. for in 구문(숫자가아닌 속성값으로 조회시킴)
for(i in computer){
// console.log(i,":",computer.i)
console.log(i,":",computer[i])
//for in구문에서는 대괄호를 이용한 속성참조만 가능
}
//속성값 변경
computer.price = 999;
console.log("변경된 price :: ",computer.price)
//속성 삭제
delete computer.price;
console.log("price삭제 후 : ",computer)
</script>
3-4) 예제
<script>
/*
snack객체 이용해
목록으로 출력
1 code = A100
2 name = 홈런볼
3 price = 2000
*/
let snack = {
code : 'A100',
name : "홈런볼",
price : 2000
};
let div1 = document.querySelector("#snack");
let a = "<ol>";
for(i in snack){
a += "<li>"+i+"="+snack[i]+"</li>";
}
a+="</ol>"
//다른방법의 for문을 고민해보자
div1.innerHTML = a;
</script>
예제2)
객체를 요소로 사용하는 배열 조회
(2차원 배열처럼 arr[0].length 와같이 요소의길이를 알수없음)
for in 문을 이용하자!!!
for in : 객체의모든요소의 루프를 돌림
<body>
<div id="area1"></div>
<script>
//배열안에 객체넣기
let contacts = [
{name : '길동',phone:'010-1233-4242',email:"kildong@saf.com"},
{name : '삿갓',phone:'010-1523-6652',email:"sk@saf.com"},
{name : '재석',phone:'010-4523-8421',email:"JS@saf.com"}
];
/*
contacts배열 이용해서 #area1영역에 테이블로출력하기
*/
let a = `<table border=1><th>성명</th>
<th>번호</th><th>이메일</th><tr>`;
for(let i=0 ; i<contacts.length ; i++){
for(j in contacts[i]){ // i번인덱스의 객체를 루프돌림
a+= `<td>${contacts[i][j]}</td>`;
}a+=`</tr><tr>` //루프가끝날때마다 행바꿈실행
}
// for(j=0;contacts[i].length ; j++)와 같은 방식은 불가능(2차원배열이아님)
a+= `</tr><table>`;
document.querySelector("#area1").innerHTML = a;
</script>
</body>
3-5) 생성자함수
생성자함수를 정의해 객체를 쉽게만들어보자
생성자 함수
1. 객체를 만드는 함수
2. 보통 첫 글자를 대문자로 작성
3.함수정의
function 함수명([매개변수,..){
this.속성 = 매개변수;
}
4.객체 생성 .
let 변수 = new 함수명(인수,...)
<script>
//생성자함수 정의
function Product(code,name,price){
this.code = code;
this.name= name;
this.price = price;
}
//생성자 함수 호출 (객체생성)
//자바의 객체생성과 비슷함
let p1 = new Product('A100','유동곤',99999);
let p2 = new Product('B106','이이경',7699);
let p3 = new Product('J892','유재석',10000);
console.log(p1);
console.log(p2);
console.log(p3);
</script>
3-6) 프로토타입
공통데이터(값,함수등)를 프로토타입에 저장해서 사용가능 의미
공통데이터(값,함수등)를 프로토타입에 저장해서 사용가능
사용방법
1)생성자 함수 내부
this.__proto__.속성=값 or 함수
2) 생성자 함수 외부
함수명.prototype.속성 = 값 or 함수
생성자 함수 내부에 구현
this.__proto__.속성 = 값 or 함수
//생성자 함수 내부에 구현
function Korean(name){
this.name = name;
this.__proto__.nation = 'South Korea';
this.__proto__.capital = 'Seoul';
this.__proto__.slogan = ()=>{
console.log("빨리빨리")
};
};
let person1 = new Korean("길동");
let person2 = new Korean("춘향");
console.log(person1);
console.log(person2);
person1.slogan();
person2.slogan();
생성자함수 외부에 구현
함수명.prototype.속성명 = 값 or 함수;
//생성자함수 외부에 구현
function American(name){
this.name = name;
}
American.prototype.nation = 'United State';
American.prototype.capital = 'Wasington DC';
American.prototype.slogan =()=>{
console.log("i don't no......")
};
let person3 = new American("mark");
let person4 = new American("Jackson");
console.log(person3);
console.log(person4);
person3.slogan();
person4.slogan();
생성자함수 외부에 prototype 이용!!
Date객체에 요일을 반환해주는(getWeekNames)구현해보기
<script>
let now = new Date();
let weekNames = ['일','월','화','수','목','금','토'];
console.log("오늘은",weekNames[now.getDay()],"요일");
//Date객체의 prototype에 getWeekNames()함수 등록해보기
Date.prototype.getWeekNames = function(){
let weekNames = ['일','월','화','수','목','금','토'];
return weekNames[this.getDay()];
};
console.log(now.getWeekNames()+"요일");
</script>
3-7 ) 글씨를 읽는 기능
msg = new SpeechSynthesisUtterance()로 객체생성
msg.lang을 kor_KR (한국어) 설정
speechSynthesis.speak(msg);
<body>
<textarea rows="10" cols="50" id="intext">ㅎㅎㅎㅎ</textarea>
<button onclick="setlang('kor_KR');ttsTest()">읽기</button>
<script>
let msg = new SpeechSynthesisUtterance();
function setlang(t){
msg.lang = t;
}
function ttsTest(){
msg.text = document.querySelector("#intext").value;
speechSynthesis.speak(msg); //내용을 읽어 소리로표현
}
</script>
</body>
4 ) 최종 예제
문제1)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열 실습 문제 1</title>
</head>
<body>
<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 src="test1.js"></script>
</body>
</html>JavaScript
function arrayTest(){
let fi = document.getElementsByTagName("label");
let arr='';
for(i=0;i<fi.length;i++){
if(i==(fi.length)-1){
arr += (fi[i].textContent);//마지막 요소에는 , 를붙이지않아도됨
}
else{
arr += (fi[i].textContent+",");
}
}
let total = arr.split(",");//합쳐진 text를 , 를기준으로 배열만듬
let text = document.getElementById("text").value;
if(total.indexOf(text) == -1){//존재하지않는값을 조회 시 -1이반환됨
alert(text+'존재X');
}
else{
alert(text+"는"+total.indexOf(text)+"번에 존재합니다");
}
}
문제2)
주요메서드 : concat() , split(" ") , textContent
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<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>
<script src="test2.js"></script>
</body>
</html>function reverseTest(){
let a = document.querySelector("#stringla1").textContent.split(" ").reverse();
let b = document.querySelector("#stringla2").textContent.split(" ").reverse();
let aconb = a.concat(b); //a b를 붙인 후 새로운배열로반환
let total=''; // 문자를 담아놓을 변수
for(i in aconb){
total+= aconb[i];
};
document.querySelector("#print").innerHTML += total
}
문제3)
객체에 배열속성을 둔 후
배열.push를 이용해 계속 쌓은 후
배열을 출력해줌
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<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>
<script src="test3.js"></script>
</body>
</html>JavaScript
function input(){
let str = document.querySelector("#strInput").value;
animal.names.push(str);//객체의name속성배열에 push
document.querySelector("#strInput").value = " ";
//저장 후 쓴 글씨는 초기화
}
const animal = {
names: []
}
function printTest(){
document.querySelector("#print2").innerHTML = animal.names;
}
예제4)
textContent : 조회된 쿼리를 String으로변환배열.indexof(r) : 배열의 요소r을 찾아 인덱스를반환해줌
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<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>
<script src="test4.js"></script>
</body>
</html>function print2Test(){
let r = document.querySelector("#remove").value;
let a = document.querySelector("#add").value;
let str = document.querySelector("#stringla4").textContent;
//textContent로 꺼내야 String타입으로나온다
console.log(str);
console.log(typeof str);
let arr= str.split(" ");//텍스트를 배열로바꿔줌
if(arr.indexOf(r) == -1){
alert(r+"은 존재하지않습니다")
}
else{
arr.splice(arr.indexOf(r),1,a);
let total ='';
for(i in arr){
total += arr[i]+" ";
}
document.querySelector("#print4").innerHTML = total;
}
}
예제5)
필요한 함수 : querySelectorAll () : 모든값을 조회
display = 'none' : 태그의내용을 보이지않게막음display = 'block' : 보이게 함(기본값)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
fieldset {
width: 400px;
text-align: center;
background: #dbdbdb;
}
div.box {
width: 500px;
height: 50px;
box-align: center middle;
margin: 10px;
padding: 10px;
background: #ffcc00;
display: none; /*none으로 설정되어있음(보이지않을것임*/
}
</style>
</head>
<body>
<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>
<script src="test5.js"></script>
</body>
</html>function showDiv(t){
let s = document.querySelectorAll(".box");
//class가 box인 태그를 모두가져온다
console.log(s[0]);//확인용
for(let i=0 ; i<s.length ; i++){
s[i].style.display = 'none';
//가져온태그의크기만큼 루프를돌려 계속 none상태로 만들어준다다
}
console.log(t.id) //해당id를 확인해보기
document.getElementById(`${t.id}Box`).style.display = "block";
//id+Box의 이름을 가진 div를 display = 'block'으로변경
}
예제6)
객체와 객체의속성을 이용
+
생성자함수를 만들어 1개이상의값들을 객체에 넣을 준비 +
push함수를 이용해 배열에 값을 집어넣을수있음
+
객체.객체속성[i].객체속성의속성 으로 값을출력ex) Member.member[i].names;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#print{
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<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>
<script src="test6.js"></script>
</body>
</html>function insertMember(){
let names = prompt('이름 입력');
let age = prompt('나이를 입력');
let address = prompt('주소입력');
Member.member.push(new mem(names,age,address));
//객체의 속성인 member배열에 push해서 생성자를 쌓자.
}
const Member ={
member:[]
};
function mem (names,age,address){
this.names = names;
this.age = age;
this.address = address;
}
function printMember(){
if(Member.member.length == 0 ){
alert("입력을 먼저해주세요");
}
// for(i=0 ; i<Member.member.length;i++){
// let m = Member.member[i];
// document.querySelector("#print").innerHTML += `이름 : ${m.names}<br>`;
// document.querySelector("#print").innerHTML += `나이 : ${m.age}<br>`;
// document.querySelector("#print").innerHTML += `주소 : ${m.address}<br><br>`;
// };
for(i in Member.member){
document.querySelector("#print").innerHTML += "이름:"+Member.member[i].names;
document.querySelector("#print").innerHTML += " | 나이:"+Member.member[i].age;
document.querySelector("#print").innerHTML += " | 주소:"+Member.member[i].address+"<br>";
}
document.querySelector("#print").innerHTML += Member.member[0];
}
