Day 32~34 - javascript(String 객체, 개미수열 실습, 형변환 함수, animation)

 

String 객체

 

문자와 관련된 함수

function stringTest01(){

var str01 = 'String';
var str02 = 'Test';

var str03 = str01 + str02;
var newString = str01.concat("a","b","1",false);

var joinString = ["10","20",10].join("/");

}

str01과 str02 모두 문자열 str03은 StringTest가 되고 newString은 Stringab1false가 된다. 말 그대로 concatenation

false도 concatenation으로 문자열이 된다.

 

joinString 은 10/20/10이 된다 conjunction과 함께 문자열로 만들어준다.

 

---

function stringTest02(){

	var double = 3.14;
    var int = 10;
    var str = "월요일";
    var boolean = false;
    var con = boolean + double + int + str;
    

}

13.14월요일이 된다. double과 int는 number이기 때문에 연산이되고 그 값에 월요일이라는 문자열이 더해지면서 문자열인 13.14월요일이 된다.

---

function stringTest03(){

var strVal = prompt("당신의 이름은?");
var span = documnet.getElementById("cmd");
if(strVal.match)/[2-9]/)) {

	alert("숫자 2~9 입력금지);

}

}

정규화 표현식 사용

 

---

 var objStr1 = new String('화요일');
 var objStr2 = "화요일";
 if(objStr1 ===objStr2){
	비교하면? 
 }

완벽한 비교 연산자 === 타입 및 값을 같이 비교한다.

objStr1과 objStr2를 비교하면?????????????

다르다. 하지만 '=='으로 비교하면 같다

---

function stringTest05(){
	var strVal = "문자열 추출, indexOf   :  lastIndexOf         "
	var coma = strVal.indexOf(",");
	var colon = strVal.indexOf(":");
    
    	var val = "oop:ooo:foo";
	var valSplit = val.split("o");
	console.log(valSplit.length);
	console.log(valSplit);
}

index를 통하여 문자열을 추출할 수 있다. subString은 java처럼 시작 index를 포함하고 마지막 index-1한다.

javascript는 마지막 값도 출력해준다.

---

개미수열

function makeAnt(s){

var str ='';
var char = s.charAt(0);
var cnt = 1;


for( var i=0; s.length; i++){
	if(char == s.charAt(i)){
    cnt ++;
    } else {
     str = str + char + cnt;
     char = s.charAt(i);
     cnt = 1;
    }
}

str = str + char + cnt;
 
 return str;
}

java 똑같이 개미수열 생성 로직 작성

---

function antStage(stage){

	var s = '11';
    
    for(var i=0; i<stage; i++){
   	console.log(s);
    s = antMake(s);
    } 
    
    return s;
}

반복함수 생성하여 입력받은 값만큼 개미수열을 반복한다.

---

function antPrint(){
	var inputVal = document.getElementById("antValue");
	
	var val ='';
	// 숫자만 입력받는 유효값
	
	if (isNaN(inputVal.value)) {//숫자가 아니면 true 반환
		alert("숫자만 입력해 주세요 ");
		inputVal.value ='';
		inputVal.focus();
		
	}
	//숫자 10이하만 입력
	else if(inputVal.value >= 10){
		alert("10이하의 숫자만 입력해주세요");
		inputVal.value ='';
		inputVal.focus();
	}

	else{

//		for(var i = 0; i < inputVal.value; i++){
//			val +="<span>"+antStage(i)+"</span><br>";
//		}
//		document.getElementById("antSequence").innerHTML = val;
		
		//2)createElement방법 tag를 createElement 함수를 생성 후 위치에 자식 node append 함 
		//붙여넣을 상위 tag 생성한다
		var div = document.createElement("div");
		
		//붙여넣을 하위 tag를 생성한다 
		for(var j = 0; j < inputVal.value; j++){
			var childDiv = document.createElement("div");
			childDiv.innerHTML = antStage(j);
			//생성된 자식 tag를 부모의 tag에 붙여넣는다 (append)
			div.appendChild(childDiv);
		}
		//documnet에 붙이고자하는 영역에 자식으로 append 함
		var print = document.getElementById('antSequence');
		print.innerHTML ='';
		print.style.background = "skyblue";
		print.appendChild(div);
	
	}
}

createElement....로 tag를 생성하고 그 위치에 자식 node를 append?(갖다 붙인다) 함

 

---

형변환 함수

 

가장 중요한 것은 화면의 모든 값은 string으로 받는 것이다

function numTest(val){
	console.log(val,typeof val);
	var cal = val + 10;
	console.log(cal);
	var cal2 = Number(val)+20;
	console.log(cal2, typeof cal2);
	
	var cal3 = new Number(val);
	console.log(cal3, typeof cal3);
}

여기서 val은 onclick="numTest(num.value)"로 받는다. id = "num"을 value로 사용한다

만약 3을 입력받았다면 var cal은 310을 console log롤 보여준다. 왜냐하면 화면의 값은 string으로 받는 것이기 때문에 

'3'+10이 되면서 '310'이 된다.

cal2 는 화면으로부터 입력받은 string 타입의 val을 number로 형변환하여 연산했기 때문에 23을 console log에서 확인할 수 있다.

cal3은 객체를 생성한 것이며 prototype이 number이고 object이며 Number{3}이라고 console log 확인 가능하다.

 

---

function intTest(val){

var vals = parseInt(val)+5;
console.log(vals);

}

입력받은 val을 통하여 intTest 함수를 실행하면 console log에서 문자형의 정수형태를 숫자형으로 바꿔준느 것 확인가능

예를들어 1212를 받았어 함수가 실행된다면 console log에서는 1217이 확인된다. 즉 parseInt를 통하여 string을 int로 변환해주기 때문에 concatenation이 아닌 숫자 연산이 발생

---

translate를 이용한 animate 

transform 과 translate 를 함께 사용한다

balls[i].style.transform = "translate("+pNum()+"px,"+pNum()+"px)"
		//이동 transform -> translate가 동작