Notice
Recent Posts
Recent Comments
Link
«   2026/06   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Archives
Today
Total
관리 메뉴

학습기록남기기

2022_05_24_JS_2일 본문

수업_정리

2022_05_24_JS_2일

backend_na 2022. 5. 24. 20:54
//prompt는 String 이고 , +prompt로 작성해야 숫자로 인식
var number1 =+prompt('첫번째 숫자를 입력하세요!');
var number2 =+prompt('두번쨰 숫자를 입력하세요!');

//alert 함수는 브라우저에 알림창을 띄웁니다.
alert(`입력한 숫자의 합은 : ${number1+number2}`);

--------------------------
//배열의 생성    인덱스 :  0  1      2        3
         var fruits=['딸기','포도','복숭아','사과'];

         //배열의 길이 확인
         console.log('배열의 길이 : '+fruits.length);

         //배열 데이터 수정
         fruits[1]='수박';
        console.log(fruits);

        //배열 데이터 추가 :자바스크립트는 배열의 크키가 고정되어 있지 않아 ,없는 인덱스 지정해서 늘리면 된다./
       fruits[4]='파인애플';
       console.log(fruits); 
       console.log('배열의 길이 : '+fruits.length);

       //배열의 길이를 모들때 , 데이터 추가 하기위해서 밑에 처럼 작성하는것이 편하다.
        fruits[fruits.length]='망고';

        console.log(fruits);

        //배열 요소 참조
        var apple=fruits[3];


        //배열의 반복문 처리
        for(var i=0;i<fruits.length;i++){
            console.log(`${i+1}번째 과일은 : ${fruits[i]}`);
        }
----------------------------------------------------


var week=['월','화','수','목','금','토','일'];

        //for -of는 배열의 값을 얻어낼 때 사용 .(객체에서는 사용 x)
        //자바의 foreach문(향상 for문)과 유사 
        for (var day of week) {
            console.log(day+'요일');
            
        }

        console.log('=====================');

        //인덱스가 나옴 
        //for-in 은 배열이나 객체의 index 혹은 key 값을 변수에 저장 
        for(var d in week){
            console.log(d+'요일');
        }


--------------------------------------
var foods=['볶음밥','닭강정','피자'];
        console.log(foods);

        //pop : 배열의 마지막 요소를 제거하고 , 제거한 요소를 반환합니다.
        var lastElement=foods.pop();
        console.log(lastElement);
        console.log(foods);


        //push : 배열의 끝에 요소를 추가 합니다.

        foods.push('파스타');
        foods.push('족발');
        console.log(foods);
        

        //shift : 배열의 맨 첫번째 요소를 제거하고 ,제거한 요소를 반환.
        var firstElement=foods.shift();
        console.log(firstElement);
        console.log(foods);

        //unshift : 배열의 맨 첫번째 위치에 요소를  추가 합니다
        foods.unshift('떡볶이');
        console.log(foods);


-----------------------
var foods=['떡볶이','오뎅','김말이','닭꼬치'];

        //indexof() : 배열 요소의 인덱스를 알려줌.
        // 찾는 요소가 없을시 -1이 리턴 된다. 
        var idx=foods.indexOf('김말이');
        console.log('찾은 인덱스 :'+idx); 

        // includes() : 배열 요소의 존재 확인 :true ,false 
        var result=foods.includes('김말이');
        console.log('탐색결과 :'+result);

        //slice () : 배열을 잘라냄
        console.log('-----------------------------------------');

        var arr=[0,1,2,3,4,5,6,7,8,9];

        var slicedArr=arr.slice(3,7);
        console.log(slicedArr);

        //reverse() : 배열을 역순으로 배치 
        var copyArr=arr.slice(0);  // 전체 범위 (원본 복사);
        copyArr.reverse();
        console.log(copyArr);


        //join() : 배열의 요소들을 연결한 문자열로 변환
        var foodsStr=foods.join();
        console.log(foodsStr);  //   , , , , 으로만 나옴

        //concat() : 배열을 결합
        console.log('-------------------------------');
        var arr1=[10,20,30];
        var arr2=[100,300,500];


        var concatedArr=arr1.concat(arr2);
        console.log(concatedArr);

------------------------------------
//splice() 배열의 특정 요소를 제거 
        var foods=['떡볶이','오뎅','김말이','닭꼬치'];
        console.log(foods);

        var delFood=foods.splice(1,2);  // splice(시작인덱스, 개수 ) 
        console.log(delFood);
        console.log(foods);

        foods.splice(0,1,'치킨','파스타'); //  0번 인덱스를 제거,그자리에 데이터 추가 
        console.log(foods);

        //삭제 요소 개수를 0으로 하면 , 삭제 없이 데이터 추가할 수 있다.
        foods.splice(2,0,'피자'); // 해당 위치 지목하고 데이터 추가만 
        console.log(foods);

        //개수를 지정하지 않으면  시작 인덱스부터 끝까지 삭제 
        foods.splice(2);
        console.log(foods);


        foods.push('보쌈','닭발');
        
        var input='보쌈';
        var idx=foods.indexOf(input);

        if(idx>=0) {
            foods.splice(idx,1);
            console.log('삭제 완료!');
        }else {
            console.log('데이터가 없습니다.');
        }


-------------------
//객체 생성   :  EL 6 이전 방법 
        var dog={
            name : '뽀삐',
            kind :'시츄',
            age:3,
            favorite:['산책','간식']
        };

        var cat={
            name:'야옹이',
            kind:'페르시안',
            age:2,
            favorite:['낮잠','츄르','실뭉치']


        };

        console.log(typeof cat);


        //객체 프로퍼티 참조
        console.log(dog.name);
        console.log(cat.name);

        console.log(dog.age);
        console.log(cat.favorite[1]);

        dog.favorite.push('꼬리흔들기');
        console.log(dog);

        console.log('==============================');

        //프로퍼티 참조 다른 방식
        console.log(dog.kind);
        console.log(dog['kind']);

        //프로퍼티 값 수정
        dog.age=5;

        cat.favorite[1]='고등어';
        console.log(cat);

        console.log('==============================');

        //프로퍼티를 동적으로 추가
        dog.owner='김철수';
        console.log(dog);

        //프로퍼티 삭제 
        delete dog.owner;
        console.log(dog);

        
        //for~ in (ES6)
        console.log('----------------------------------------------------');

        for(var key in cat ){
            console.log(cat[key]);  // cat.key 는  사용 불가능 !
        }

        console.log('----------------------------------------------------');

        //객체의 프로퍼티 키의 존재 유무 확인 (in 키워드)
        var flag='kind' in cat;
        console.log(flag);

'수업_정리' 카테고리의 다른 글

2022_05_26_JS_4일  (0) 2022.05.26
2022_05_25_JS_3일  (0) 2022.05.25
2022_05_23_ JS_1일  (0) 2022.05.23
2022_05_20_JSP_11일  (0) 2022.05.20
2022_05_19_JSP_10일  (0) 2022.05.19