4. 배열 요소 삭제 및 동시추가( .splice(시작인덱스 [, 삭제할 개수 ,추가할 값  ] ) )

말그대로 삭제와 동시에 추가가 되어서 원본에 변형이 일어납니다.

   4-1 시작인덱스만 씀 (시작 인덱스부터 끝까지 추출해서 내뺌)

//console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
method_= method.splice(2);
    console.log('원본배열:',method);
    console.log('생성된배열:',method_);

4-2 시작인덱스와 삭제 할 개수 설정(시작인덱스 부터 몇 개 삭제?)

//console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
method_= method.splice(2,2); //2번 인덱스부터 2개 요소까지 삭제
    console.log('원본배열:',method);
    console.log('생성된배열:',method_);

 4-3 시작인덱스 삭제 할 개수 + 추가까지!!

    추가는 시작인덱스에서 부터 추가된당!

//console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
method_= method.splice(2,2,'삼백','사백','오백');
    console.log('원본배열:',method);
    console.log('생성된배열:',method_);

 

4-4 삭제없이 추가만하기!

   역시 시작인덱스부터 추가가 된당

//console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
 method_= method.splice(2,0,'오백');  // 삭제없이 추가만 되는데 지정한 위치에 추가가 되네!!
    console.log('원본배열:',method);  
    console.log('생성된배열:',method_);

 

5.배열요소 찾기

    console.log(method); // 현재상황 Array(6) [ 100, 200, "오백", "삼백", "오백", 500 ]   
    console.log('5.요소찾기')
    console.log('오백의 인덱스번호(왼쪽):',method.indexOf('오백'));
    console.log('오백의 인덱스번호(오른쪽):',method.lastIndexOf ('오백'));
    console.log(method.indexOf('뷁'));

 

[ map 함수 ]

 배열 내의 모든 요소 각각에 대하여 인자로 전달 된 콜백 함수를 적용하여 새로운 배열을 반환
 배열의 모든 요소를 변경하는 함수 !!!
  ==> arr.map(callback(currentValue[,index[,array]]))[,thisArg]; 콜백함수는 내가 호출하는게 아녀,, 값의 수에 따라 알아서 호출 되는 겨  직접 보면 알껴

 

6. 배열의 요소 변경

 var arr=[1,2,3,4,5];
 var arr_ = arr.map(function(item,index) {  
    				console.log('인덱스값 확인:',index);
   				    return item*2; // arr의 요소들이 하나씩 item 으로 들어가서 연산 후 반환됨 
  				  });
    console.log('원본배열:',arr);
    console.log('새 배열:',arr_);

[ reduce 함수 ]

7.배열의 요소들 하나로 만들기

 데이터의 차원을 줄이거나 결과값을 줄여주는 함수!  변환 값을 하나로!! ( 거의 누적함수네??) 
  ==>arr.reduce(callback [,initialValue])

    console.log('7.배열의 요소수를 하나로 만들기');
    console.log('reduce 후 :',arr.reduce(function(pre,curr){return pre+curr}));
    // 초기의 pre값은 0 요소들이 curr으로 차례로 들어가면 기존 요소는 pre로 빠지고
    console.log('원본:',arr);  // 원본값은 변하지 않는군

 

[ join ( [구분자]) ]  : 구분자로 연결하기

8. 배열의 모든요소를 하나의 "문자열로" 만들기(줄이는 게 아님)

console.log('8.배열의 모든 요소를 하나의 "문자열"로 만들기');
console.log(arr.join());  // 구분자 없으면 그냥 통 째로 문자열이 됨
console.log('타입:',typeof arr.join())
console.log(arr.join('★'));

 

9.거꾸로 재배치(원본 변경O)

 console.log('9.배열의 모든 요소를 거꾸로 재배치 하기');
console.log(arr.reverse());
console.log(arr);

 

10.배열 정렬하기 !!

sort([콜백함수]) - 배열 안의 요소들을 정렬하여 반환 (원본 변경o)
   숫자일땐: - , 문자일땐: localeCompare
   function(인자1,인자2) {return 인자1-인자2};   오름차순
    function(인자1,인자2) {return 인자2-인자1};  내림차순

 숫자먼저 적용해보자

 console.log('10.배열 정렬하기');
 var newArr = [5,7,3,0,1,2,6];
 newArr.sort();   // 오름차순
 console.log(newArr);
 newArr.sort(function(x,y){return y-x;});  //내림차순
 console.log(newArr);

 

 문자열도 적용해보쟈

newArr=['가','소','구','차','퍼','허','삭'];
newArr.sort();  //오름차순
console.log(newArr);
//newArr.sort(function(x,y){return y-x;});이거 안됨
newArr.sort(function(x,y){return y.localeCompare(x);});  //compareTo는 없고 비슷한기능을 하는 이걸 쓰세염
console.log(newArr);

 

11 .배열의 여러 요소 한꺼번에 추가하기 .concat () (원본변경 X)

newArr.splice(0,newArr.length,5,8,4,9,2,7,1);  // 새로 셋팅
console.log('newarr:',newArr);
newArr_ = newArr.concat(19,6,3,10);  // 추가하고
console.log('newarr_',newArr_.sort(function(x,y){return x-y}));  // 정렬까지

 

12.순회하며 배열 요소 출력하기

  배열명.forEach()함수 

이거 for문이랑 비슷하넴넴넴

 console.log(newArr);
newArr.forEach(function(item /*,index*/){ // 인덱스 생략 가능!
			console.log(item /*,index*/);
   					 });
newArr.forEach(function(item ,index){
        console.log('요소:%s,인덱스:%s',item,index);
    	});

'학원 > JS' 카테고리의 다른 글

10/31 32-9 [JS] switch문  (1) 2022.10.31
10/31 32-8 [JS] IF문  (0) 2022.10.31
10/28 31-4 [JS] Array 주요 메소드 정리  (1) 2022.10.29
10/28 31-3 [JS] Array (for~ in문)  (0) 2022.10.28
10/27 30-6 [JS] Array  (1) 2022.10.27

[배열의 주요 메소드 정리]

var method = [ ] ; // 그냥 배열 변수선언

1.배열에 요소 추가 : 인덱스 지정 혹은 push()함수 혹은 unshift()함수
1-1 인덱스를 지정해서 추가
method[0] =100; => 0번방에 숫자 100 저장
1-2 push() 메서드 사용 : 배열의 맨 뒤에 추가
method.push(200) => 1번방에 숫자 200 저장
1-3 unshift()함수 : 배열의맨 앞에 추가, 기존 것들의 인덱스가 1씩 증가
method.unshift(300) => 0번방에 숫자 300 저장(1번방엔 100, 2번방엔 200 으로 밀려남)
출력해보면

 for(var i=0 ; i<method.length ; i++) 
   console.log('method[%s]:%s',i,method[i]);


2.배열에 요소 가져오기:인덱스 지정 혹은 pop()함수 혹은 shift()함수
2-1 인덱스로 꺼내기 :그저 출력만 함, 원본에 영향 x
console.log(method[1]);
console.log('인덱스로 꺼내온 후 배열 크기:',method.length); => 크기 3 ,원본 변화X
2-2 pop() 함수로 꺼내기 : 맨 끝에꺼 1개를 꺼내 옴, 진짜 꺼내와서 버려서 원본에서 사라져 버림
console.log('꺼내온 요소:',method.pop());
console.log('pop으로 꺼내온 후 배열 크기:',method.length); // 크기 2, 원본변화O
for(i in method) console.log('method[%s]:%s',i,method[i]);
console.log('꺼내 온 요소:',method.pop()); //100
console.log('꺼내 온 요소:',method.pop()); //300
console.log('pop으로 다 꺼내온 후 배열 크기:',method.length);
console.log('꺼내온 요소:',method.pop()); // 더 꺼내올 게 없음
console.log(method.pop() === undefined);


자 다시
method = [300,100] ; 여기서부터 시작 합시다. 배열로 0번방에 300, 1번방에 100 저장되어 있음
2-3 shift() 함수 : 맨 앞에서 요소 1개를 가져오고 배열에서 제거 (선입선출)
console.log('꺼내온 요소',method.shift());
console.log('shift로 꺼내온 후 배열 크기:',method.length);


3.배열 요소의 일부를 추출하기: 위에서는 1개씩만 꺼내왔따면 이번엔 범위로 꺼내오기 !

slice(start [, end] ) 함수 이용 인덱스 0부터 시작
start 인덱스부터 끝까지 혹은 start 인덱스부터 end-1(끝 인덱스 포함x) 까지 추출, 원본 변화 X

method.push(200);
method.push(300);
method.push(400);
method.push(500);
 console.log(method);//Array(5) [ 100, 200, 300, 400, 500 ] 현재상황
var method_ = method.slice(3);   
console.log('slice 후 원본배열');
for(i in method) console.log(method[i]);
console.log('slice 한(시작인덱스) 새로운배열');
for(i in method_) console.log(method_[i]);
method_ = method.slice(2,4);
console.log('slice(시작인덱스,끝인덱스) 한 새로운배열');
for(i in method_) console.log(method_[i]);
console.log('slice(시작인덱스,끝인덱스(음수)) 한 새로운배열');
method_ = method.slice(2,-1);
for(i in method_) console.log(method_[i]);
   
음수 인덱스: -5번 -4번 -3번 -2번 -1번
저장된 값: 100 200 300 400 500
양수 인덱스: 0번 1번 2번 3번 4번

 

 

'학원 > JS' 카테고리의 다른 글

10/31 32-8 [JS] IF문  (0) 2022.10.31
10/31 32-7 [JS] Array 메소드 이어서....  (1) 2022.10.31
10/28 31-3 [JS] Array (for~ in문)  (0) 2022.10.28
10/27 30-6 [JS] Array  (1) 2022.10.27
10/27 30-6 [JS] Operator  (0) 2022.10.27

자바에서 쓰는  확장 for문 같은 느낌!!

설명보단 바로 실전 투입이 이해가 잘 됨!

 

예제1.

어차피 나오는 결과는 같음 for~in문 쓰는게 더 간결하다!

var arr5=['가','나','다'];

console.log('[일반 for문 형식]');
for(var k=0; k<arr5.length;k++)
    console.log(arr5[k]);
        
 console.log('[for in 문 형식]');
 for(var index in arr5)
    console.log('인덱스:%s,요소값:%s',index,arr5[index]);

 

예제 2

컬렉션일 때!!

Value에 해당하는 값을 꺼내올 때는 obj.key 로는 쓸 수 없음 !! 대신 obj[key]라고 써야 함!

var obj = {name:'가길동',age:20,addr:'가산동'};
console.log('[for in]문');
for(var key in obj)     
    console.log('key:%s,value:%s',key,obj[key]);  //키 값도 같이 출력하고 싶어서 이렇게 출력 함

 

 

예제3. 최종보스(HTML5 과 자바스크립트 콜라보)

몇 가지 먼저 개념 정리

 

document.querySelector('#a')  : 함수의미는 a를 가진 요소를 다 찾는다는 뜻이래!

숫자를 출력할 때는

new Number(textNode.value) 이렇게 써도 되고

parseInt(textNode.value) 이렇게 써도 됨! 오 자스에도 parseInt가 있당!

숫자가 나와서 정리하는건데

숫자 인지 아닌지 확인할 땐

NaN으로 비교하는거 아니고 inNaN()함수로 확인해야 한다!

사용자에게 입력값 받을 때 쓰는 함수는 prompt() (자바에서 Scanner 역할 인 듯)

<fieldset>
        <legend>학생의 평균 구하기</legend>  <!--서버로 전송 안함 현재 페이지에서만 처리할 거-->
        학생 수 입력 : <input type="text" id="students" />
        <button onclick='getAverage()'>평균 구하기</button>
      </fieldset>  <!--- 여기까지는 html 영역--->
      <script>
        //배열선언
        var score=[];
        var textNode = document.querySelector('#students');
       // console.log(textNode,parseInt(textNode.value)); 함수가 정의 되어있지 않아서 입력값 받아도 노 쓸모임
          function getAverage(){     // 그러니 그냥 껍데기 뿐인 함수모양에 진짜 함수를 정의시키기
            console.log('사용자 입력값',parseInt(textNode.value));
        //  console.log('사용자 입력값',new Number(textNode.value)); 이거도 가능!
         
                //우선 사용자가 입력한게 숫자지 판단 해야함
            var numberOfStudents=parseInt(textNode.value);
     //     console.log(numberOfStudents == NaN) ; 이렇게 비교 노노노노
            console.log(isNaN(numberOfStudents));     //이거로 숫자 인지 아닌지 판단
            if(isNaN(numberOfStudents)){
                alert('숫자만 입력하세요!!'); // 숫자가 아닐 때 팝업창 띄워서 알려주고
                return;   // 다시 입력 받기
            }         
               //학생 수 만큼 점수 입력 총합 평균구하기
            var total=0;
 //         console.log(prompt('점수를 입력하세요')); 학생 수 만큼 점수를 받아야 하기 때문에 이렇게 받으면 안될 걸?
            for(var i=0; i<numberOfStudents ; i++){
                  score.push( parseInt(prompt(i+1+'번째 점수를 입력하세요')));
                  total += score[i];
             }
            console.log('[학생의 성적 출력]');
            for(var index in score){
                  console.log('%s번째 학생:%s',parseInt(index)+1,score[index]);
             }
             console.log('총점:%s,평균:%s',total,total/score.length);
        }
      </script>

'학원 > JS' 카테고리의 다른 글

10/31 32-7 [JS] Array 메소드 이어서....  (1) 2022.10.31
10/28 31-4 [JS] Array 주요 메소드 정리  (1) 2022.10.29
10/27 30-6 [JS] Array  (1) 2022.10.27
10/27 30-6 [JS] Operator  (0) 2022.10.27
10/26 29-7 [JS] Variable01  (0) 2022.10.26

Array

자바와는 다르게 여러 타입(자료형)의 값을 저장할 수 있는 자료구조(메모리)
오히려 자바의 컬렉션과 비슷함
배열의 크기가 고정되어 있지 않다. 값을 넣으면 넣는데로 늘어남

선언방법:
var 배열명 = new Array(); // var 배열명 = [ ] 이렇게도 가능
var 배열명 = new Array(배열크기);
var 배열명 = new Array(요소1,요소2,.....);

[배열 선언 방법1 -배열 크기 미지정]
배열 크기가 0인 배열이 생성됨
최종적으로 넣은 마지막 인덱스 값에따라 배열 크기가 결정됨.

var arr1 = new Array(); // var arr1 = [] ([]은 배열 리터럴)
console.log('arr1의 값%O,arr1의 타입:%s',arr1,typeof arr1);
console.log(arr1.length); //배열 크기 구하고
arr1[3] =100;  // 값을 넣어보고
console.log(arr1.length); //크기 커짐
arr1[5] = 200; // 중간 스킵해서 값을 넣어봐도
console.log(arr1.length); // 배열크기는 알아서 커짐(동적이다)
for(var i=0 ; i<arr1.length ; i++){
            console.log('arr1[%s]:%s',i,arr1[i]);
        }


초기화하기 : 여러타입을 넣어볼거임 다 들어감
기존 arr1[3]은 100에서 true로 바뀌었고
arr1[5]는 그대로 둠

arr1[0]=1;
arr1[1]=new Date();
arr1[2]=3.14;
arr1[3]=true;
arr1[4]= '자바스크립트';
for(var i=0 ; i<arr1.length ; i++){
   console.log('arr1[%s]:%s,타입:%s',i,arr1[i],typeof arr1[i]);
        }


여기서 값을 걍 더 밀어 넣어보면 알아서 늘어남

arr1.push(500);
arr1.push(600);
for(var i=0 ; i<arr1.length ; i++){
    console.log('arr1[%s]:%s,타입:%s',i,arr1[i],typeof arr1[i]);
        }
console.log('배열크기:',arr1.length);



[배열 선언 방법2-배열 크기 지정]
배열 선언 하면서 크기를 지정 해도 배열 크기는 가변적이라 중간에 값 넣어도 늘어남

    var arr2 = new Array(3);    
    console.log('배열크기:',arr2.length);  //처음엔 배열크기 3
    arr2[5]=100;
    console.log('배열크기:',arr2.length);  //늘리면 배열크기 6


[배열선언방법 3번째 -배열선언과 동시에 초기화 (new 사용)]
배열선언 동시에 값을 넣기
역시 중간에 값을 더 쑤셔 넣어도 들어감 크기도 커짐

var arr3 = new Array('가길동',20,'가산동',new Date());
console.log('배열크기:',arr3.length);
   for(var i=0 ; i<arr3.length ; i++){
      console.log('arr3[%s]:%s,타입:%s',i,arr3[i],typeof arr3[i]);
        }
arr3.push('010-2122-5555');
console.log('배열크기:',arr3.length);



[배열선언방법 4번째-선언과 동시에 초기화([ ]대괄호 사용(배열 리터럴))]
점점 값들이 복잡해지고 있으... 최종보스가 나온다..

 var arr4 = ['한소인',10,'자바전문과정',{소유주:'가길동',설립일:1970}];
 console.log(typeof arr4 );
 arr4[arr4.length] = 30;  // 뭘 또 쑤셔눠..
 console.log('배열크기:',arr4.length);
      for(var i=0 ; i<arr4.length ; i++){
        console.log('arr4[%s]:%s,타입:%s',i,arr4[i],typeof arr4[i]);
     }
 console.log(arr4[3]);  // 배열 3번방 값이 좀 독특하잖아 걘 좀 특별하게 꺼내보고 싶어짐

 for(var i=0 ; i<arr4.length ; i++){  // 타입비교 시 문자열로 비교해야한다.
     if(typeof(arr4[i]) === 'object' ){   // 3번방 혼자 object 이니 그것만 다르게 출력할거
         console.log('arr4[%s]:',i);
              for(key in arr4[i]){
                 console.log('%s:%s',key,arr4[i][key]);
              }
     }
     else
         console.log('arr4[%s]:%s,타입:%s',i,arr4[i],typeof arr4[i]);
  }

'학원 > JS' 카테고리의 다른 글

10/28 31-4 [JS] Array 주요 메소드 정리  (1) 2022.10.29
10/28 31-3 [JS] Array (for~ in문)  (0) 2022.10.28
10/27 30-6 [JS] Operator  (0) 2022.10.27
10/26 29-7 [JS] Variable01  (0) 2022.10.26
10/26 29-6 [JS]JavaScript 들어가기  (0) 2022.10.26

Operator

연산자 자바랑 진짜 거의 똑같음!!!
우선순위가 같을때는 왼쪽에서 오른쪽으로 계산
산술연산자 > 비교연산자 > 논리연산자
이런거도 다 똑같음!
다른거 위주로 집중해서 공부하면 될 거 같다!

1. 산술연산자

console.log(3 % 5 * 2 + 10 / 5);
console.log(5/3);  
  // 요거 조금 다르죠 자바는 1나오지만 (int랑int연산하면 int형이니까) 자스는 소수점까지 나와용


2.비교연산자
자바랑 다르게 === , !== 요런게 있다???
== 는 타입이 다르더라도 내부적으로 강제 형변환해서 비교하고,
=== 는 강제 형변환 과정없이 정확하게 값과 타입이 일치 해야함
***비교를 위해서 항상 === 사용을 권장한다 ***
자스는
0, null, false 이면 false(0)으로 처리한다!!!
if절에 모든식 다 가능(조건식은 물론 산술식,비교식도 들어갈 수 있다!!!)
기타 산술식은 true는 1, false는 0

 console.log('가나다'>='가나다'); //자바는 이런거 안됨, 자스는 됨 오? 자바의compareTo와 비슷하네
 console.log(3 > 9 == 0);  // false 가 0으로 처리 됨 
 console.log("0 =='0' :" , 0 =='0'); // 값만 갖죠
 console.log("0 ==='0' :" , 0 ==='0'); // 타입이 다르죠
 console.log("false == '0':",false == '0'); 
 console.log("false === '0':",false === '0');

자스에는 NaN은 타입은 숫자인데 숫자는 아님을 의미!
단순히 숫자가 아닌것만이 아니라 타입은 숫자임 !!!
직접 봐야지 이런건

console.log(new Number('1004A'));  
=>이거 콘솔에서 보면
       Number { NaN } 요렇게 찍힘
그래서 아하! 이거로 등가비교 하면 되지 않나 싶기도 한데 그러면 클나 안돼안돼
 
반례를 들어볼게
console.log("NaN == NaN : ",NaN == NaN);  //faluse로 나옴 걍 그렇게 나와 비교 안된다고!
console.log("NaN === NaN : ",NaN === NaN);  // 위가 안되는데 얘라고 되겠어?

console.log(new Number('1004A')); //얘도 NaN
console.log(new Number('hello')); // 얘도 NaN  hello 랑 1004A랑은 같을 수x

그럼 어찌라고
등가비교 하지말고 isNaN()함수로 NaN(Not a Number) 걍 숫자인지 아닌지를 판단하시라고

var num1 = new Number('hello');
console.log(num1) ;  //얘도 NaN
var num2 = new Number('hello');
console.log(num2) ;  // 얘도NaN

console.log(num1 == num2);  //직접비교안됨       
console.log(isNaN(num1))


== 랑 === 다시 비교하면
==는 강제로 항변환 해서 값만 같으면 true
===는 값과 타입까지 같아야 true 아니면 false

 num1 = new Number(100);
 num2 = 100;
 console.log(num1 == num2);   // true
 console.log(num1 === num2);  // false


자스의 배열은 자바의 컬렉션과 같다!
밑에 설명하면 같은 object 타입이라고 해도 주소값이 다르기 때문에 값이 같다고 할 수 없다!!

var arr1 =['가길동',20];  // new Array('가길동',20) 이렇게 써도 된다고 했지
var arr2 =['가길동',20];  
console.log("arr1의 타입:",typeof arr1)  
console.log("arr2의 타입:",typeof arr2)
// 객체끼리 비교할 땐 주소를 비교함, 메모리에 저장된 주소값을 가르키기 때문에 둘이 달라...
console.log("arr1 == arr2",arr1 == arr2);  
arr2=arr1;  // 주소까지 같게 만들었으
console.log("arr1 === arr2",arr1 === arr2); // 같아졌으


3. 논리연산자

 console.log("[논리연산자]");
 console.log(3 > 2 || 5 < -10 && !(3-4));   // true


4.증감연산자

console.log("[증감연산자]");
var num=10;
num++;
console.log("num:%s",num++);   // num:11
console.log("num:%s",num);     // num:12


5.단축연산자

(위에서 num값이 12인 상태임)
console.log("[단축연산자]");
console.log(num %= 5);  // 2

'학원 > JS' 카테고리의 다른 글

10/28 31-4 [JS] Array 주요 메소드 정리  (1) 2022.10.29
10/28 31-3 [JS] Array (for~ in문)  (0) 2022.10.28
10/27 30-6 [JS] Array  (1) 2022.10.27
10/26 29-7 [JS] Variable01  (0) 2022.10.26
10/26 29-6 [JS]JavaScript 들어가기  (0) 2022.10.26

자바스크립트에도 변수가 있다규
근데 자바랑 초큼 뭐가 다르다보니 잘 구별해서 공부 해야 한다!

[특징]
자스(ES5스펙)에서는 대소문자를 구분한다.
하나의 명령행이 끝나면 ; 로 명령의 끝을 알린다.
자스에서는 모든 데이타가 객체이다
자스에서는 변수에 넣은 값에 따라 그 변수의 자료형이 결정된다. (동적이다)
자바스크립트의 자료형은 Primative 타입(기본 자료형)과 Object(객체)로 나눈다
Primative 타입은 string, number (en-US), bigint (en-US), boolean, undefined, symbol등이 있다
변수 선언엔 var라는 키워드 사용
var 변수명;
요렇게 한다구!

코딩 쳐보면서 이해하자...

   //1.변수선언
   var num;   //변수만 선언한 거      
   console.log('num의 값:%s,num의 타입%s',num,typeof num); // 콘솔 창 출력 방법!

자바에선 저렇게 변수선언만 하고 값을 안넣은 상태에서 출력하면 에러뜨는데 자바스크립트는 달라!

undefined도 하나의 자료형이자 값이다.(변수 선언 후 초기화 전), 그냥 변수값이 정의가 안 됐다 라는 말

2. 숫자 리터럴 비교

 // 숫자 리터럴
  num = 100;      
  console.log('num의 값:%s,num의 타입%s',num,typeof num);
        
  num = 3.14; 
  console.log('num의 값:%s,num의 타입%s',num,typeof num);

  num =new Number(1000); 
  console.log('num의 값:%s,num의 타입%s',num,typeof num);

자바에선 int,double 등등 타입이 다른데 자바스크립트는 number 나 object얌 !


3.boolean 과 string 리터럴 비교

//boolean 리터럴
num = true; 
console.log('num의 값:%s,num의 타입%s',num,typeof num);

//string 리터럴
num = '자바스크립트';   // 그냥 생성
//num.indexOf // 대체 이게 왜 나오는겨,,
console.log('num의 값:%s,num의 타입%s',num,typeof num); 

num =new String('자바스트립트');  // 객체가 됨!!
console.log('num의 값:%s,num의 타입%s',num,typeof num);

boolean 은 알겠는데 같은 글자를 넣었는데 위에껀 string 밑에껀 object 타입이다 ?


4.null 형 비교
null도 하나의 값으로 참조하는 객체가 없다라는 의미
자료형으로는 object 타입에 해당. 되게 특이하네

var nullvar = null;
console.log('nullvar의 값:%s,nullvar의 타입%s',nullvar,typeof nullvar);


5. 함수형 프로그래밍 지원. 즉 변수에 함수 할당할 수 있다. 자바에 람다식 과 같네!!!

자바는 클래스 정의후 속성 추가 불가(정적객체)
자스는 Class Less (프로토타입 기반) 즉 객체(프로토타입:원형)를 먼저 정의하고 이후에 속성 추가(동적객체)

밑에 코드로 확인해보면 진짜진짜 신기함!

var obj = {};  // {}; 요걸 객체literal 이라고 함! {};를 쓰나  new Object (); 쓰나 똑같다.
console.log('obj의 값:%O,obj의 타입%s',obj,typeof obj);
  obj.name="가길동";
  obj.age=20;
  obj.walk=function(){   // 얘가 함수래... 
           console.log('나이가 %s살인 %s가 걷다',this.age,this.name); // this는 생략 안됨 
        };                     
console.log('이름:%s, 나이%s',obj.name,obj.age);
obj.walk();  //함수를 콘솔로 출력하는 법


var obj2={
   username  : "KIM",       // key:value  자바의 map이랑 비슷하다! 
   'password': "1234",      // key 값에 해당하는 건 ''혹은 "" 혹은 없어도 다 가능!
   "name"    : "김길동",    // value 에 해당하는건 꼭 ""로 감싸야 한다!
   "eat"     : function(food){     // 변수에 함수를 할당 오오오 신기신기
                console.log(food+'를(을)'+this.name+'가(이) 먹다');
                 } 
  };
 console.log('obj2의 값:%O,obj2의 타입%s',obj2,typeof obj2);
 console.log(obj2);
 obj2.eat('피자');
 
 
var f = function(x,y){return x+y;}
console.log('f의 값:%s,f의 타입%s',f,typeof f);

[정리]
실수나 정수 리터럴(예:100,3.14등) : number타입
new Number() : object타입
true,false : boolean타입
new Boolean() : object타입
문자열 리터럴('HELLO' 혹은 "안녕") : string 타입
new String() : object타입

자스는 데이타의 자료형 관련 크게 Number/Boolean/String타입을 제공한다
단,생성자 함수를 이용한 객체 생성은 무조건 Object타입이다 (object지옥 ㅎㅎㅎㅎ)
변수 선언 후 객체를 할당하지 않은 경우 : undefined타입 ( 에러빡 이 아니라우)
{ }(객체 리터럴) : object 타입. new Object( )의 JSON표기법
var f = function( ){ }(함수 리터럴). new Function()의 JSON표기법
f는 function타입이다

++

[상수와 리터럴의 차이]

상수는 값이 변하지 않는 변수

리터럴은 변수에 넣는 변하지 않는 데이터를 의미 즉 데이터 자체

const NUN =100;

여기서 NUN은 상수, 100은 숫자 리터럴임

코드상에서 데이터를 표현하는 방식을 리터럴이라고 한다.

 

// {}; 이것이 객체 literal 
   const obj = {name :'가길동'};
   obj.name ='나길동'; // 이건 되는데
// obj = {}; // 이건안돼

'학원 > JS' 카테고리의 다른 글

10/28 31-4 [JS] Array 주요 메소드 정리  (1) 2022.10.29
10/28 31-3 [JS] Array (for~ in문)  (0) 2022.10.28
10/27 30-6 [JS] Array  (1) 2022.10.27
10/27 30-6 [JS] Operator  (0) 2022.10.27
10/26 29-6 [JS]JavaScript 들어가기  (0) 2022.10.26

JavaScript 

오 대박 자바스크립트를 바로 들어간다!

내가 드디어 웹브라우저를 직접 다루는 언어를 배우게 되었다는 것이여 ! 가족들한테  자바 코딩한거 보여줘도 영 반응이 시원찮았는데 이제 브라우저 창 보여주면서 설명하면 좀 알겠지 후후후 자랑할게 생겼다

나중에 프론트엔드쪽으로 갈 사람들은 이거 진짜 잘 해야 한다고 하셔서 오늘 완전 초 집중해서...

졸았다

어휴 바보도 아니고 ... 나이가 들어서인지 몸뚱이가 내 말을 정말 안듣는다 ..

내일은 커피를 한바가지 들이 부어서라도 정신 똑띠 차리고 수업들어야지

다행히 오늘은 첫 시간이라 그런지 천천히 진도를 나가서 복습 잘하고 제대로 따라가야 겠다.

 

맴이 급하니 자바스크립트의 정의 따윈 없이 바로 실전에 들어간다

어차피 이론 정리해도 지금 못알아 들어.. 실전으로 단련시킨 후 면접대비로 정리해도 충분할 것 같다 

그래도 간단히는 알아야 하니까

 CSSL (Client-Side Script Language) 는 "웹브라우저" 에 의해 순자적으로 해석되는 언어 임(웹클라이언트 프로그램) 
 CSSL의 대표적인 예로는 HTML5/CSS3/JAVASCRIPT/jQuery등이 있다

주석처리 등등 자바에서 쓰는 것 들이 많이 비슷하다

 

코드가 가장 잘 구현되는 브라우저가 말로만 슬쩍 들어본 파이어폭스 라고 한다... 당장 깔음

우선 자바스크립트도  코드가 순차적으로 해석되는 언어라는 것을 확인하기 위해 두 가지 예시를 보여 줌

우선 <script> 요기 안에서 alert() 를 쓰면 팝업창을 만들 수 있는데 이게 어디서 쓰는 지 순서가 되게 중요 함!!

참고로 팝업창을 클릭하지(처리하지) 않으면 그 다음 코드를 실행 할 수 없다!

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptFirst.html</title>
    <script> // 이 코드를 쓰면 팝업창을 만들 수 있다!
       alert("자바스크립트 함수 입니다.");  오 여기다가 두면 글자가 아예 안보임  
      // 모달(팝업 창) 클릭을 안하면(처리를 안하면) 뒤에 코드 진행이 안되기 때문
      //  <h2> 자스코드가 아니다</h2>   
        console.log('HTML코드 이후의 자스 출력문'); 
    </script>

</head>
<body>
    <h2>자바스크립트 첫 시간</h2>
    alert("자바스크립트 함수 입니다.");
</body>
</html>

먼저 바디 밖에다가 두는 코드를 작성 후 구현 해 보면

 

팝업창 뒤에 아무런 글자들이 보이지 않음!!

팝업창을 처리하지 않았기 때문에 뒤에 코드가 실행되지 않은것임

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptFirst.html</title>
</head>
<body>
    <h2>자바스크립트 첫 시간</h2>
    alert("자바스크립트 함수 입니다.");
    <script>
      alert("자바스크립트 함수 입니다.");  // 요기다가 두면 글자가 뒤쪽엔 보임
        // 이건 위에 코드 먼저 진행 된 후 팝업창이 뜨니까 글자가 보였던 것! 파이어폭스로 실행하면 보임
    </script>
</body>
</html>

그럼 이제 태그를 바디 안에다가 넣어보면

 

뒤에 글씨가 보이죠?? 코드 순서를 보면 저 글자들이 나온 뒤에 팝업창이 실행 되기 때문이다!!

 

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptFirst.html</title>
    <script> 
     alert("자바스크립트 함수 입니다.");  // 자스코드 O       
         // <h2> 자스코드가 아니다</h2>   // 자스코드X
        console.log('HTML코드 이후의 자스 출력문'); //자스코드O
    </script>

</head>
<body>
    <h2>자바스크립트 첫 시간</h2>
    alert("자바스크립트 함수 입니다.");
    <script>
       alert("자바스크립트 함수 입니다.");  // 팝업창 만드는 태그
    </script>
</body>
</html>

'학원 > JS' 카테고리의 다른 글

10/28 31-4 [JS] Array 주요 메소드 정리  (1) 2022.10.29
10/28 31-3 [JS] Array (for~ in문)  (0) 2022.10.28
10/27 30-6 [JS] Array  (1) 2022.10.27
10/27 30-6 [JS] Operator  (0) 2022.10.27
10/26 29-7 [JS] Variable01  (0) 2022.10.26

+ Recent posts