데이터 : 추가, 삭제, 검색, 정렬, 수정
array : push, splice...
json : 직접 객체 생성
- 객체명={속성:값, ....}
- function 클래스이름(인자..){
this.속성명=인자...
}
- obj = new 클래스이름(인자값)
[문자열 객체의 핵심 멤버함수]
s="나는 자랑스런 태극기 앞에";//s=new String("나는 자랑스런 태극기 앞에") s1="hello";
s2="hi";
console.log(s.charAt(3));//세번째 글자 출력
console.log(s.indexOf('스런'));//'스런'이 시작하는 index 출력
console.log(s.indexOf('헬로'));//문자열이 없을 때 -1 출력
console.log(s1.concat(s2));//s1과 s2 두 문자열 연결해줌(=s1+s2)
console.log(s1.toUpperCase());//대문자로 변환 후, 출력
console.log(s.substring(3, 9));//3,4,5,6,7,8번째 글자 출력(9는 출력X)
console.log(s.split(' '));//''안의 문자로 문자열 잘려서 출력 |
arr = [10, 20, 30, 40]; //arr.push(50);//맨 끝에 50추가
//arr.splice(1, 1, 100)//20삭제하고 100추가
n=arr.length;//배열의 개수(속성)
console.log(arr);
ar1=arr;//shallow copy
// ar1=arr.slice(0)//deep copy
ar1[0]=100;
console.log("slice", ar1);//100, 20, 30, 40으로 출력
ar1=arr.slice(2);//index:2인 속성부터 출력
console.log(ar1); |
arr=[10,20,30,40,50];
arr.forEach(efn);//forEach는 매개변수로 함수 가짐
function efn(v, i) {//v:배열 값 i:index
console.log(v, i)
}//#1 함수 정의 후 호출
arr.forEach(function (v, i) {
console.log(v, i);
})//#2 바로 함수 호출
arr.forEach((v, i) =>{
console.log(v, i);})//#3 lambda식 |
arr=[10,20,30,40,50];
for(n=0; n<arr.length; n++){
console.log(arr[n])
}
for(n in arr){
console.log(arr[n])
}
for(n of arr){
console.log(n) } |
jarr=[{'name':'홍길동', 'age':20},
{'name':'이순신', 'age':30},
{'name':'임꺽정', 'age':40},];
jarr.forEach(jfn);
function jfn(v, i) {//value, index
console.log(v, i);//값 출력하고 싶으면 (v.name, v.age)
} |
arr=[10,20,30,40,50,60,70];
farr=arr.filter(fFn);//filter함수 : 탐색, 검색
function fFn(v, i) {
console.log(v, i);
/*if(i%2==0) {//index를 2로 나누고 나머지가 0일 경우
return true;
}*/
/*if(v>30){//value가 30보다 큰 값일 경우
return true;
}*/
/*if(i>=2 && i<=4){//index가 2이상 4이하일 경우
return true;
}*/
}
console.log('farr:', farr); |
jarr=[{'name':'홍길동', 'age':20},
{'name':'이순신', 'age':30},
{'name':'임꺽정', 'age':40},
{'name':'정난정', 'age':50},
{'name':'테스트', 'age':60}];
farr=jarr.filter(fFn);
function fFn(v, i) {
//console.log(v, i);//json과 index 출력
/*if(v.age>=40){//나이가 40 이상일 경우
return true;
}*/
/*if(v.name.indexOf('정') != -1){//이름에 '정'이 있는 경우
return true;
}*/
}
console.log('farr:', farr); |
[정렬]
<script>
//배열
arr=[100,20,30,400,50,60,70];
arr.sort(sfn);//callback함수 호출
function sfn(a, b) {
return a>b;//오름차순으로 정렬
return a<b;//내림차순으로 정렬
}
console.log(arr);
//json
jarr=[{'name':'홍길동', 'age':30},
{'name':'이순신', 'age':10},
{'name':'임꺽정', 'age':20},
{'name':'정난정', 'age':50},
{'name':'테스트', 'age':40}];
jarr.sort(jfn);
function jfn(a, b) {
//return a.age>b.age;//나이순 오름차순 정렬
return a.name>b.name;//이름순 가나다 정렬
}
console.log(jarr);
</script> |
Date 객체
날짜와 시간 작업을 하는데 사용되는 가장 기본적인 객체
new Date(); 현재 날짜와 시간
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function init() {
dt = new Date();
console.log(dt);
y = dt.getFullYear();
m = dt.getMonth() + 1;//1월을 0으로 보기 때문에 getMonth()+1해줘야함
d = dt.getDate();
h = dt.getHours();
mi = dt.getMinutes();
sec = dt.getSeconds();
s = `${y}년 ${m}월 ${d}일`;//formatString 쿼타
s1 = y + "년 " + m + "월 " + d + "일";
s2 = `${h}시 ${mi}분 ${sec}초`;
console.log(s);
console.log(s1);
console.log(s2);
//mydiv.innerText = s;//DOM 완성되기 전이기에 init함수 필수!
}
</script>
</head>
<body onload="init()"><!--DOM이 완성되면 onload 실행-->
<div id="mydiv">표시</div>
</body>
</html> |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*function fn() {
setTimeout(cfn, 3000);
//setInterval(cfn, 2000); //계속 호출
}
function cfn() {
mydiv.innerText="대한민국";
}//#1*/
/*function fn() {
setTimeout(function () {
mydiv.innerText="대한민국";
}, 3000);
}//#2*/
/*function fn() {
setTimeout(() => {
mydiv.innerText="대한민국";
}, 3000);
}//#3 lambda 식*/
s="나는 자랑스런 태극기 앞에";
arr=s.split(' ');
n=0;
function fn() {
setTimeout(cfn, 3000);
myInt = setInterval(cfn, 2000); //계속 호출
}
function cfn() {
if(n==3){
n=0;
}
mydiv.innerText=arr[n];
n++
}
function fn1() {
clearInterval(myInt);
}
</script>
</head>
<body>
<div id="mydiv">표시</div>
<button onclick="fn()">확인</button>
<button onclick="fn1()">종료</button>
</body>
</html> |
[Number 객체]
a=10.341592;//a=new Number(10);
console.log(a.toFixed(2));//소수점 아래 2번째 자리까지 출력
console.log(a.toPrecision(4));//소수점 제외 숫자 4개 출력
s=a.toString();
console.log(s, typeof s);
b=parseFloat(s); console.log(b, typeof b); |
//s="i like phone like programing"; //console.log(s.indexOf("javascript"));//앞에서부터 찾는다. //console.log(s.lastIndexOf("javascript"));//뒤에서부터 찾는다.
//reg=new RegExp('[a-z]ike');//패턴에 해당하는 것들 중에서 첫번째 것만 찾아준다. //reg=new RegExp('[a-z]ike', 'g');//g옵션 주면 해당하는 것 다 찾아준다. //reg=new RegExp('p[a-z]+', 'g'); //s1=s.match(reg);//s에서 reg 패턴에 해당하는 것을 찾아서 array로 return 해준다. //console.log(s1[0], s1[1]);
/*a=10;//new Number(10) s2='abc';//new String('abc') arr=[];//new Array() j={};//new Object() reg=/p[a-z]+/g;//reg=new RegExp('p[a-z]+', 'g')) s1=s.match(reg);//s1=s.match(/p[a-z]+/g)*/
/*s="i like phone like programing"; s1=s.replace(/p[a-z]+/g, "love");//패턴에 해당하는 것을 찾아서 love로 바꿔준다. console.log(s1);//바뀐 문자열 return해준다.*/
/*s2="hello-korea hi#like"; ar=s2.split(/[- #]/g); console.log(ar);*/
/*s="i like korea"; console.log(s.substring(2,4));//substring과 slice 같다. console.log(s.slice(2,4)); console.log(s.substr(2,3));//index:2부터 3개를 가져온다.*/ |
[Math 객체]
console.log(Math.PI);
console.log(Math.abs(-10));//절대값 출력
console.log(Math.pow(2,3));//2의 3제곱=8
console.log(Math.ceil(33.76));//올림
console.log(Math.round(33.76));//반올림
console.log(Math.floor(33.76));//소수점 이하 버린다.
n=Math.random()*10;//0.xx~9.xx 사이 숫자 나온다.
console.log(Math.floor(n));//소수점 이하 버려서 0~9사이 숫자 나온다. |
[try catch]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> /*function div(a,b) { if(b==0){ throw "0으로 나누면 안됨" } return a/b; }
try{ rst=div(10,5); console.log(rst); }catch(err){ console.log("에러:", err) }*/
/*function isValid(v) { if(v==""){ throw "값을 입력하세요."; }else if(isNaN(v)){//isNaN : 숫자가 아닐 때 throw "숫자를 입력하세요."; } return v; }
function fn() { try{ my=isValid(myin.value); mydiv.innerText=my; }catch(err){ console.log("에러:", err); } }*/
</script> </head> <body> <div id="mydiv">결과</div> 숫자 : <input id="myin" type="text"><br> <button onclick="fn()">확인</button> </body> </html> |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function fn() { aa=document.getElementById("mydiv"); //aa.innerText="코리아"; //mydiv.innerText='코리아'; bb=document.getElementsByClassName("myc");//HTMLCollection bb=Array.from(bb);//HTMLCollection을 Array로 변경한다.
/*bb.forEach(function (v, i) { console.log(v); v.innerText="대한민국"; })//forEach문*/
/*for(n in bb){ //for(n=0; n<bb.length; n++){ console.log(n) //bb[n].innerText="대한민국"; }//for in문*/
//bb=Array.from(bb); //console.log(bb[0]); //bb[0].innerText="대한민국"; //bb[1].innerText="대한민국1"; } </script> </head> <body> <div id="mydiv">테스트</div> <div class="myc">테스트1</div> <div class="myc">테스트2</div> <button onclick="fn()">확인</button> </body> </html> |