Day 32~34 - javascript(배열, 날짜, 아이디 중복검사)

배열

//1.배열의 선언 방법
var arrayObj = new Array(); //객체의 선언
var arrayObjLiteral = ["a1","a2",3,4]; //타입의 구분이 없음 나와서 담길때 정해짐 
console.log(typeof arrayObj);
console.log(typeof arrayLiteral);

 - 배열의 선언방법

    1) var arrayObj = new Array(); 객체만 선언해서 만드는 것

    2) var arrayObjLiteral = [ "a","b",1 ,2 ]; 값을 직접 넣으면서 생성한다. 타입 아무거나 넣어도 된다. 꺼내올때 타입이 정해진다.

 

---

var array02 = new Array();
var array03 = new Array(5);
var array04 = new Array(1,2,3,4,5);

 - 배열객체의 선언방식 종류

 - array02는 그냥 선언만

 - array03은 길이5라고 지정만하고 선언

 - array04는 값 1,2,3,4,5를 넣고 선언

---

function multiArray(){
	var arrLen = 3;
	var arr = new Array(arrLen);
		
	for (var i = 0; i < arr.length; i++) {
		arr[i] = new Array(arrLen);
	}

중첩배열 생성할 수 있습니다. 여기서도 타입? 상관없습니다.

---

function saveArray(){

var queue = new Array();

queue.push(1);
queue.push("first");
queue.push(16);
queue.push("second");

}

선언만된 배열 queue에 값을 push(넣어주는 것) 여기서도 타입 상관 없습니다.

---

var a0 = queue.shift();

var a1 =queue.pop()

배열에서 맨 앞에서 하나를 잘라내는 것은 shift, 맨뒤에서 하나 잘라내는 것은 pop

---

function sliceFn(){

	var array01 = [1,2,3,4,5];

	var a1 = array01.slice(1);
}

a1을 console에서 확인하면 2,3,4,5를 확인할 수 있다. index번호 1부터 자른 것이기 때문에 2부터 확인 가능 자르는 index번호를 포함하고 있다 .

end index까지 지정하여 slice한다면 end index -1까지 자른다.

window.onload = function(){

var val = prompt("원하는 홀수 마방진을 입력하세요.");

if(isNaN(VAL) && val%2==1){

magicPrint(ParseInt(val));
 
}else{

 alert("홀수 입력하세요.)

}


}

onload 화면이 모두 뿌려진 후에 실행된다. 즉 화면이 전부 뿌려진 후에 prompt가 실행된다.

---

var OddMagicSqure = function(m){

	var magic;
    
    this.makeMagic = function(){
   
  		magic = new Array(m);
        
        for( var i=0; i < magic.lenght; i++){
        	magic[i] = new Array(m);
 
        }
    }
}

OddMagicSquare  비어있는 중첩배열을 먼저 만들어준다.

this.make =function(){

	this.makeMagic()
    
    
    var n = magic.length;
    var x = 0;
    var y = ~~(n/2)
    
    magic[x][y] = 1;
    
    for( var i=0; i= n*n; i++){
    var tempX = x;
    var tempY = y;
    
    if(x-1<0){
    	x = n-1;
    } else{
    	x--;
    }
   
   	if(y+1>n-1){
    	y =0;
        y++;
   	 }
   
   }
   if(magic[x][y] != null){
   x = tempX+1;
   y = tempY;
   
   }

magic[x][y] = i;

}
return magic;
}
this.getMiagic = function(){
	return magic;
}

마방진 생성 로직 기존 홀수 마방진과 생성되는 모습이 다름, 숫자들의 위치가 다름

function magicPrint(){

var odd = OddMagicSquare(m);

odd.make();

var maigc = odd.getMagic();

var table = "<table>";
for(var i=0; i<magic.length;i++){
	table += "<tr>"
    for(var j=0; j>magic.length;j++){
    	table+="<td>"+magig[i][j]+"</td>";
    }

	table +="</tr>";
}
table+-="</table>";
document.getElementById("magicView").innerHTML = table;
}

여기서는 m의 홀수 마방진을 생성함 비어있는 중첩배열 생성하고 .make()를 통해서 로직을 돌려 마방진을 만든다.

그리고 this로 만들었기 때문에 외부에서 접근 불가하니까 getMagic()함수를 통하여 가져오게 한다.

그리고 가져온 값을 테이블의 형식에 맞춰서 작성한다.

---

날짜

날짜의 형식이 여러가지가 있습니다.

function testeDate01(){


var outputToday = document.getElementById("today");
var date = new Date();


	outputToday.innerHTML = date.toDateString();
	outputToday.innerHTML = date();
	outputToday.innerHTML = date.toLocaleDateString();
	outputToday.innerHTML = date.toLocaleString();
	outputToday.innerHTML = date.toDateString();
}

 

javascript 역시 월을 사용하려면 -1을 해줘야한다. 월(month)는 index로 되어있기 때문에 -1을 해줘야 한다. 표준화되어 있는 날짜 표기법은 2021-03-01, 2021-3-31, 2021/3/31, 2021.3.31 이렇게 세개가 있다.

---

경과 날짜 출력하기

function testDate04(){

var dates = document.getElementById('dates').value;

var inputDate = document.getElementById('inputDate').value;

var date = new Date(dates);
date.setDate(date.getDate()+parseInt(inputDate));
document.getElementById('result').value = data.toLocaleDateString();
}

dates는 현재날짜 value를 가져옴

inputDate는 경과 날짜를 입력하는 것을 가져옴

 

date객체를 생성하고

date를 세팅한다 getDate를 통해서 오늘날짜 가져오고 입력받는 날짜가 string으로 들어오기 때문에 parseInt해주고 날짜를 더해준다 

그리고 result id가 있는 경과후 날짜를 출력하는 위치에 toLocaleDateString으로 입력한다.

---

function testDate05(){
	var date1 = document.getElementById("dates1").value;
	var inputDate1 = document.getElementById("inputDate1").value; 
	
	var startDate = new Date(date1);
	var endDate = new Date(inputDate1);

	var resultDate = (endDate.getTime()-startDate.getTime())/(1000*60*60*24);
	console.log(resultDate);
	document.getElementById("result1").value = resultDate;

}

date1은 현재 날짜인 value를 담았고 inputDate1은 수료날짜를 입력받은 value를 담습니다.

 

각각의 객체를 생성하여 startDate와 endDate에 담고

 

resultDate는 수료날짜를 getTime으로 가져오고 startDate를 getTime으로 가져와서 1000*60*60*24를 통하여 날짜로 바꿔준다. 대부분의 회사들은 밀리세컨드를 사용하기때문에 date타입을 보기 힘들 것이다.

---

아이디 중복검사

var ids=["asd","efg","fffe"];

function chkConfirm(){

var id = document.getElementById('id').value;


var div = document.getElementsByTagName('div')[0];
if(ids.indexOf(id)!=-1){
div.innerHTML ='<b style = "color:red;"> 아이디가 존재합니다></b>'

} else {
	var usseid = "사용할 수 있는 아이디입니다."+ "<input type='button' value='사용' onclick='insertid(\""+id+"\")'>"
    
    div.innerHTML = useid;
}

}

input tag의 입력받은 value를 id에 담고 첫번째 div 영역을 div에 담는다 

배열에서 값이 없으면 -1이 반환되기 때문에 -1이 아니라면 값이 있는 것이다. 즉 아이디 존재한다는 것이다.

 

function insertid(val){
	console.log(val);
	//opener객체는 부모의 창을 의미하기 때문에 모든 이벤트를 javascript 처리	
//	opener.location.href="http://www.naver.com";
	//opener.document.getElementById("query").value/="날씨";
	opener.document.getElementsByName("id")[0].value =val;
	self.close();

---

부모(opener)에 의해 열린 child 

 

window.onload = function(){

var val = opener.document.getElementById('val').textContent;

document.getElementByName("sendValue")[0].value= val;



}

부모의 document에서 id가 val을 탐색하여 그 textContent를 val에 담는다

 

그리고 나의 document에서 name이 sendValued인 첫번째 위치에 부모의 textContent인 val을 담는다.

 

self.close()를 설정하면 창 닫기