본문 바로가기
javascript

자바스크립트

비오는시골길 2013. 10. 24. 11:07
반응형

substr, substring, slice

<HTML>

 <HEAD>

<style type="text/css">

</style>

<script language="javascript">

window.onload=function(){

}

</script>

 </HEAD>

 <BODY>

<script>

var a="abcdefghij";

document.write(a.substr(1,2)+"<br>"); // 1< x <=2

document.write(a.substring(1,2)+"<br>");// 1< x <2

document.write(a.substring(3,-1)+"<br>");

//음수를 갖고 있기 때문에 처음부터 3개의 문자열만 출력

document.write(a.slice(0,2)+"<br>");

//첫번째 인덱스를 포함해서 두번째 인덱스를 포함하지 않는 수를 출력

document.write(a.slice(1,-2)+"<br>");

//첫번째 인덱스 포함 뒤에서 두번째 인덱스를 포함하지 않는 사이의 숫자 출력

</script>

</BODY>

</HTML>


====substring 관련 예제=====

ex) 주민번호 앞자리를 누르면 년 월 일이 분리되는 로직~

<html> 

 <head>

 <script>

   window.onload=function(){        //두번째 이벤트 처리 방식을 사용했다.

b.onclick=function(){

t2.value=t1.value.substring(0,2);

t3.value=t1.value.substring(2,4);

t4.value=t1.value.substring(4);

}

   }

 </script>

 </head>

 <body>

 <input type="text" id="t1"> 

 <input type="button" id="b"><br> 

 <input type="text" id="t2">년 

 <input type="text" id="t3">월 

 <input type="text" id="t4">일

 </body>

</html>

====================================================================================================

문자열을 객체화 시킬때 필요한 구문

<html> 

 <head>

 <script>

   window.onload=function(){ 

b.onclick=function(){

var s=document.getElementById(t.value);   //document.getElementById 기억할것!!!

s.style.backgroundColor="orange";

}

   }

 </script>

 </head>

 <body>

  <input type="text" id="t"> 

<input type="button" id="b">

  <div id="divObj1">aaa</div>

<p>        //단락 구분 태그

  <div id="divObj2">bbb</div>

 </body>

</html>

===================================================================================================

#split매서드

: split매서드를 이용하면 지정한 문자를 기준으로 값을 분리할 수 있다.

아래와 같은 로직은 A를 기준을 두고 split을 하여  abc,def,ghi 라는 결과값을 출력한다. 

ex1)

<HTML>

 <HEAD>

<style type="text/css">

</style>

<script language="javascript">

window.onload=function(){

}

</script>

 </HEAD>

 <BODY>

<script>

var s="abcAdefAghi"

var s2=s.split("A");

document.write(s2);

</script>

</BODY>

</HTML>

============

ex2)

<html> 

 <head>

 <script>

  window.onload=function(){

b.onclick=function(){

var array=t1.value.split("/");

container.innerHTML=array[0]+"-"+array[1]+"-"+array[2];

}

}

 </script>

 </head>

 <body>

  <input type="text" id="t1" value="2013/10/24">

  <input type="button" id="b">

<div id="container"></div>

 </body>

</html>

===============================

!!! for in 구문                        

var str="";                          

   for(변수 명 in 배열){              

var str+=배열[변수명];

}

=================================

<html> 

 <head>

 <script>

  window.onload=function(){

b.onclick=function(){

var s=t1.value.replace("/","-");

var s2=s.replace("/","-");

container.innerHTML=s2;

}

}

 </script>

 </head>

 <body>

  <input type="text" id="t1" value="2013/10/24">

  <input type="button" id="b">

<div id="container"></div>

 </body>

</html>

====================================================================================================

509쪽 참고 년도 구하기


<html> 

 <head>

 </head>

 <body>

  <script>

  var a=new Date();

//document.write(a);

document.write(a.getFullYear());   //년도를 구해온다. 

document.write("<br>");

document.write(a.getMonth()+1); //월 을 구한다. 월은 0이 1월로 인식하기 때문에 +1을 넣는다

document.write("<br>");

document.write(a.getDate()); //날짜를 구한다. 

document.write("<br>");

var str=["일요일","월요일","화요일","수요일","목요일","금요일","토요일"];

var c=a.getDay();    //요일은 일요일은 0, 월요일은 1, 화요일은 2. 배열에 넣어 요일을 출력한다.

document.write(str[c]); // 4

 </script>

 </body>

</html>

====================================================================================================
책 500p 참고

<html> 
 <body>
  <script>
  var s="abcabcabc";
    //012345678
document.write(s.indexOf("bc")+"<br>"); 
document.write(s.lastIndexOf("bc")+"<br>"); 
document.write(s.indexOf("aaaa")); 
 </script>
 </body>
</html>


문자열 처리 에 관한 메서드

CharAt()           : 인덱스 위치의 문자를 알아내는  메소드
concat()           : 문자열에 내용을 추가 할 때 사용되는 메소드
indexOf()          : 찾는 문자열의 첫 인덱스위치를 알아내는 메소드
lastindexOf()     : 찾는 문자열의 마지막 인덱스 위치를 알아내는 메소드
slice()             : 문자열의 순서에 따른 분리를 해주는 메소드
split()              : 매개변수의 입력기준에 따른 문자열을 분리해주는 메소드
Substring()       : 매개변수의 입력기준에 따른 문자열을 분리해주는 메소드
substr()           : 매개변수의 입력기준에 따른 문자열을 나타내주는 메소드
toLowerCase()  : 문자열을 소문자로 바꿔주는 메소드
toUpperCase()   : 문자열을 대문자로 바꿔주는 메소드   
====================================================================================================

Math 객체는 수학 작업을 수행 할 수 있습니다.


Math 객체 사용 예
round() : 소숫점 이하를 반올림 해 줍니다.
1
2
3
4
5
6
7
8
9
10
11
<html>
 <body>
  <p id="demo">버튼을 누르면 2.5 값이 반올림 됩니다.</p>
  <button onclick="myFunction()">Try it</button>
  <script>
   function myFunction(){
    document.getElementById("demo").innerHTML=Math.round(2.5);
   }
  </script>
 </body>
</html> 

random() : 0~1 사이의 수를 임의로 추출 합니다.
1
2
3
4
5
6
7
8
9
10
11
<html>
 <body>
  <p id="demo">클릭 하면 0~1 중 아무수나 나옵니다.</p>
  <button onclick="myFunction()">Try it</button>
  <script>
   function myFunction(){
    document.getElementById("demo").innerHTML=Math.random();
   }
  </script>
 </body>
</html>

0~1사이의 소숫점만 추출 하므로, 이를 다양한 정수로 표현 하고 싶다면
아래 와 같이 코드를 변경 해 주면 됩니다.
1
2
3
4
//결과 값에 10을 곱해 0~10 까지로 범위를 넓히고
var x = Math.random()*10; 
//소숫점은 반올림 해 버립니다.
document.getElementById("demo").innerHTML=Math.round(x);

max() : 둘 중 큰 수를 반환 합니다.
1
2
3
4
5
6
7
8
9
10
11
<html>
 <body>
  <p id="demo">클릭하면 5와 10중 큰수를 보여 줍니다.</p>
  <button onclick="myFunction()">Try it</button>
  <script>
   function myFunction(){
    document.getElementById("demo").innerHTML=Math.max(5,10);
   }
  </script>
 </body>
</html>

min() : 가장 작은 수를 추출 합니다.
1
2
3
4
5
6
7
8
9
10
11
<html>
 <body>
  <p id="demo">클릭하면 5와 10중 작은수를 보여 줍니다.</p>
  <button onclick="myFunction()">Try it</button>
  <script>
   function myFunction(){
    document.getElementById("demo").innerHTML=Math.min(5,10);
   }
  </script>
 </body>
</html>


Math 오브젝트의 레퍼런스는 아래 링크서 확인 가능 합니다.


Math 개체
Math 객체는 수학 작업을 수행 할 수 있습니다.
Math 객체는 여러 가지 수학적 상수와 메서드가 포함되어 있습니다.

Math 메서드와 속성을 사용한 예제
var x=Math.PI; //파이값 구하는 구문
var y=Math.sqrt(16); //4/1


수학 상수
자바 스크립트 Math 객체에서 액세스 할 수있는 8가지 수학 상수를 제공합니다. 

Math.E
Math.PI
Math.SQRT2
Math.SQRT1_2
Math.LN2
Math.LN10
Math.LOG2E


====================================================================================================

array객체

525p

cancat()        : 기존 배열에 배열을 추가해 줍니다.

join()            : 배열값을 하나의 문자열로 바꾸어 줍니다.

reversek()     : 배열의 위치를 반대로 해줍니다.

slice()          : 배열을 분리시켜 줍니다.

sort()           : 배열을 정렬해 줍니다. 


join() 매소드 활용

<HTML>

 <HEAD>

<style type="text/css">

</style>

<script language="javascript">

window.onload=function(){

}

</script>

 </HEAD>

 <BODY>

<script>

take=new Array(5);

take[0]="나는";

take[1]="죽어도";

take[2]="지는건";

take[3]="못참는다.";

document.write(take.join(" "));

</script>

</BODY>

</HTML>

====================================================================================================


push매서드

: 배열의 맨 마지막에 요소를 삽입한다.

var b= new Array(1,2,3,4);

b.push(5)

document.write(b);


==shift, pop==

<html> 

<head>

</head>

  <body>

  <script>

var queue=new Array(1,2,3,4);

queue.push(5);

document.write(queue.shift()+"<br>");    //먼저 입력된게 먼저 출력된다. 

document.write(queue.shift()+"<br>");

document.write(queue.shift()+"<hr>");


var stack=new Array(1,2,3,4,5);

document.write(stack.pop()+"<br>");    // 나중에 입력된게 먼저 출력된다. 

document.write(stack.pop()+"<br>");

document.write(stack.pop()+"<hr>");

  </script>

  </body>

</html>

 참고 :http://kes3583.blog.me/90159002932

====================================================================================================

생성자 선언방법

ex1)

<html> 

<head>

</head>

  <body>

  <script>

function Dog(str,age){

this.name=str;

this.age=age;

this.toString=function(){

return "이름:"+this.name+",나이:"+this.age;

}

}

var a=new Dog("뚱이",10+"<br>");

document.write(a); // 뚱이,10

var b=new Dog("똘망이",12);

document.write(b);

  </script>

  </body>

</html>

-------------------
ex2)
<html> 
<head>
</head>
  <body>
  <script>
function Dog(str,age){
this.name=str;
this.age=age;
this.toString=function(){
return "이름:"+this.name+",나이:"+this.age;
}
this.eat=function(eater){
return this.name+"가 "+eater+"를 먹는다";
}
}

var a=new Dog("뚱이",10+"<br>");
document.write(a); // 뚱이,10
document.write(a.eat("사료"));
  </script>
  </body>
</html>

ex3)
<html> 
<head>
</head>
  <body>
  <script>
function StringBuffer(){
this.array=[];

this.append=function(str){
this.array.push(str);
}
this.toString=function(){
return this.array.join("");
}
}

var buffer=new StringBuffer();
buffer.append("abc");
buffer.append("def");
buffer.append("cc");

document.write(buffer); // abcdefcc
  </script>
  </body>
</html>


반응형

'javascript' 카테고리의 다른 글

with 키워드  (0) 2013.11.26
객체와 배열의 차이  (0) 2013.11.26
<a>문서연결,문서내연결,상자위치 지정,이벤트 처리방식,String객체  (0) 2013.10.22
# 노드관련 메서드 (insertBefore,replaceChild,removeChild,appendChild)  (0) 2013.10.20
innerText,innerHTML의 차이점?  (0) 2013.10.20

'javascript' Related Articles

티스토리툴바