자바스크립트 입문, 객체2- 내장객체(2)

○ 배열 객체

여러 개의 데이터를 하나의 저장소에 저장하기위해서는 배열 객체(Array Object)를 생성하면 된다.

var 참조변수 = new Array();
참조변수[0]=값1; 참조 변수[1]=값2; 참조 변수[2]=값3;...참조 변수[n-1]=값n

var 참조 변수 = new Array(값1, 값2, 값3, ...값n)

var 참조 변수=[값1, 값2, 값3, ...값n]

 

○ 배열 객체에 저장된 데이터 불러오기

참조 변수[인덱스 번호]

 

배열 객체에서 사용 할 수 있는 메서드와 속성

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

<script>
    var arr_1 = ["혜화","사당", "길음" , "미아"];
    var arr_2 = ["비트", "이더", "리플"];

    var result = arr_1.join("-");
    console.log(result);
    // 배열에 저장된 값을 지정한 문자로 연결하여 하나의 문자열을 반환

    result = arr_1.concat(arr_2);
    console.log(result);
    // 2개의 배열을 하나의 배열로 만들어 반환

    result = arr_1.slice(1,3);
    console.log(result);
    // 배열의 1번 이전의 인덱스 요소를 잘라내고, 남은 값을 반환

    result = arr_1.sort();
    console.log(result);
    // 배열의 값을 오름차순으로 정렬

    arr_2.reverse();
    console.log(arr_2);
    // 배열 순서를 거꾸로 뒤집는다.


</script>

<script>
    var blueArr = ["동대문","시청", "서울역" , "영등포"];
    var greenArr = ["신촌", "홍대", "성수"];

    blueArr.splice(2,1, "삼성", "강남");
    console.log(blueArr);
    // 2번 인덱스부터 1개의 데이터를 삭제한후, 
    // "삼성", "강남"을 삽입

    var data1 = greenArr.pop();
    var data2 = greenArr.shift();
    // greenArr 배열 마지막 인덱스의 데이터를 data1에 저장한다
    // greenArr 배열 가장 앞쪽 인덱스의 데이터를 data2에 저장한다

    greenArr.push(data2);
    console.log(greenArr);
    // data2에 저장된 데이터를 greenArr 배열의 마지막 인덱스에 밀어넣는다

    greenArr.unshift(data1);
    console.log(greenArr);
    // data1에 저장된 데이터를 greenArr 배열의 가장 앞쪽 인덱스에 밀어넣는다

</script>

○ 문자열 객체

문자열 객체(String Object)는 문자형 데이터를 객체로 취급하는 것으로, 자바스크립트에서 가장 많이 사용한다.

 

○ 문자열 객체 생성하가

var 참조 변수 = new String(문자형 데이터)
var t = new String("hellow javascript");

var 참조 변수 = 문자형 데이터
var t = "hello javascript";

<script>
    var t = "Hello Welcome to inkor blog tistory blog"
    document.write(t.charAt(6), "<br/>") // 인덱스 5에 저장된 문자를 불러온다
    document.write(t.indexOf("blog", 23), "<br/>") // 문자열 왼쪽에서부터 제일 먼저 발견된 "blog" 인덱스 값 반환
    document.write(t.lastIndexOf("blog"), "<br/>") // 문자열 오른쪽에서부터 왼쪽 방향으로 제일 먼저 발견된 "blog" 인덱스 값 반환
    document.write(t.match("inkor"), "<br/>"); // 문자열 왼쪽에서부터 제일 먼저 발견된 "inkor"과 일치되는 문자를 찾아 반환합니다.
    document.write(t.search("blog"), "<br/>"); // 문자열 왼쪽에서부터 제일 먼저 발견된 "blog"의 인덱스 값을 반환
    document.write(t.substr(5,7), "<br/>"); // 문자열 인덱스 5부터 7글자를 가져온다
    document.write(t.substring(10,15), "<br/>"); // 문자열 인덱스 10부터 15이전까지의 문자를 가져옵니다.
    document.write(t.replace("blog","website"),"<br/>" ); // 문자열 왼쪽에서부터 제일 먼저 발견된 "blog"를 "website"로 치환
    document.write(t.toLowerCase(),"<br/>"); // 문자열의 영문자가 모두 소문자로 바뀐 문자열을 반환
    document.write(t.toUpperCase(),"<br/>"); // 문자열의 영만자가 모두 대문자로 바뀐 문자열을 반환
    document.write(t.length, "<br/"); // 문자열의 문자 총 개수를 반환. 이때 공백도 문자로 취급한다
    
    var s = t.split(" "); // 공백 문자를 기준으로 문자를 분리. 분리된 문자열은 배열에 저장되어 s에 할당
    document.write(s[0], "<br/>"); // s의 인덱스의 0에 저장된 문자열을 출력.
    document.write(s[4], "<br/>"); // s의 인덱스의 0에 저장된 문자열을 출력.


    var str = "H"
    var t = str.charCodeAt(0, "<br/>"); // 변수에 저장된 문자열 중 0번 인덱스의 "H"의 아스키 코드값을 반환
    document.write(t, "<br/>");  //"H"의 아스키 코드값을 출력
    document.write(String.fromCharCode(72), "<br/>"); // 코드값 에 해당하는 문자를 반환

</script>

 

○ 예제들

<script>
    // 영문 이름 대문자로 바꿔 출력하는 예제
   var userName = prompt("영문이름을 입력해주세요");

   var upperName = userName.toUpperCase();
   document.write(upperName, "<br>");

   // 연락처 입력후 정보가 노출되지 않도록 **** 처리하는 예제

   var userNum = prompt("연락처를 입력해주세요");
   var result = userNum.substring(0, userNum.length - 4) + "****";
   document.write(result, "<br>");

   // 이메일 유효성 검사 예제
   var userEmail = prompt("이메일을 입력해주세요", "");
   var arrUrl=[".co.kr",".com", ".net", ".or.kr", ".go.kr"];
   
    var check1 = false;
    var check2 = false;

   if(userEmail.indexOf("@")>0) {
       check1 = true
    } // @를 정상적으로 작성했으면 check1에 true를 저장

   for(var i = 0; i<arrUrl.length;i++){
       if(userEmail.indexOf(arrUrl[i])>0){
           check2 = true;  
       }
   } // arr.Url 데이터 개수를 반환, 
   //입력한 이메일과 arrUrl의 단어를 비교하여 1개의 단어라도 일치하면 check2에 true를 저장

   if(check1 && check2){
       document.write(userEmail);
   }else{
       alert("이메일 형식이 잘못되었습니다.")
   }


</script>

-출처: 자바스크립트+제이쿼리입문 책 중

http://www.kyobobook.co.kr/product/detailViewKor.laf?ejkGb=KOR&mallGb=KOR&barcode=9791163030034&orderClick=LAG&Kc=