[Day4] JS 4 - 문자열 검색, 숫자, 배열, 날짜

👨‍💻 Web Development/HTML | CSS | JS | jQuery

[Day4] JS 4 - 문자열 검색, 숫자, 배열, 날짜

Kim_dev 2022. 11. 24. 10:29

[Day4] JS 4 [11/23]

js 문자열 : 검색

문자열 일치

   let str = "안녕하세요, 홍길동 입니다. - 홍길동 왈 -";
  
   console.log( str.indexOf("홍길동", 0) );  // 7
   console.log( str.indexOf("홍길동") );       // 7
  
   //console.log( str.lastIndexOf("홍길동", from)  );       // 7
   console.log( str.lastIndexOf("홍길동")  );       // 18
  
   // 찾는 문자열이 없는 경우 :   -1 반환
  
   // indexOf(), lastIndexOf()와 search()의 차이점 : 정규표현식
   console.log(  str.search(/홍길동/) );  // 7
  
   console.log( str.match("김기수") );  // 일치하는 문자열이 없는 경우 : null 반환
   console.log( str.match(/홍길동/ig) );   
   // alert(  typeof str.match(/홍길동/ig) );   // object   배열  
  
   // ES 2020 새로 추가된 메서드 
   //matchAll() 일치하는 결과를 포함하는 반복자(iterator)를 반환하는 함수
   const iterator = str.matchAll( /홍길동/g );
   // 자바 : console.log(  Arrays.toString( 배열명 )  )
   console.log(   Array.from( iterator ) );
  
   
   // ES6 새로 추가된 메서드 
   // IE 지원되지 않는다.  
   // 일치하는 문자열을 포함하고 있는지 여부를 boolean 형으로 반환.
   console.log(  str.includes("홍길동") );  // true
   
   
   var url = "www.sist.co.kr";
   
   // ES6 새로 추가된 메서드 
   // http://  문자열로 시작
   //   ??       문자열로 끝나니
   console.log(  url.startsWith( "http://") );		    // false
   console.log(  url.endsWith( "co.kr") );		     // true

이스케이프문자

    let text = "he\'s ~~";
   //let text = 'he\'s ~~';   // 문자열 내부에  ' 홑따옴표를 사용해야 된다면

-문자열 변수 중간에 들어가게-

    var name = "홍길동";
    var age = 20;
    
    //                  이름은 '홍길동'이고, 나이는 20살이다.    
    // var result = "이름은 '"+name+"'이고, 나이는 "+age+"살이다.";
    // Java        String.format(   "이름은 '%s'이고, 나이는 %d살이다."     , name, age);
    //                 printf( format, name, age);
    
    // js 에서도 변수를 사용해서 출력할 수 있네요... 
    //        `            백틱문자
    var result = ` > 이름은 '${ name }'이고, 나이는 ${ age }살이다. `;
    // console.log( result );

-foreach-

   let header = "TEST";   
   let html = `<h3>${ header}</h3>`;
   
   let tags = ["javascript", "jquery", "java"];  // js 배열            
   // let tags = {};  // js 객체
   
   // java  foreach문
   // js forin 문
   // js forof 문
   for (let tag of tags) {
	  html +=  `<li>${ tag }</li>`;
   } // for
   
   $("#demo").html(  html );

js 숫자 (Number)

- js 숫자 - ( X int, short, long, float, double )

- 정수, 실수 구분없이 저장. - number 타입

- js 는 항상 64비트 저장

    var n = 3;
    var n = 3.14;
    var n = 3e+5;
    
    // 3 + 5     8
    // "3" + 5   "35"
    //  3 + "5"   "35"
    //  1 + 3 + "5"   "45"
    //  숫자 => 문자열 형변환
    //   7 + ""            "7"
    
    
    //  + 덧셈, 문자열 연결연산자. 
    //  + 제외한  숫자 관련 연산자는 자동으로 문자열을 숫자로 변환하려고 한다. 
    var a = "100";
    var b = "10";
    console.log(  a - b );   // 100/10   =  10
    console.log(  a * b );   // 100/10   =  10
    console.log(  a / b );   // 100/10   =  10

-NaN (not a number) 리터럴-

    // console.log(   100 / "apple"   );   // NaN ( Not a Number) 리터럴
    // console.log( typeof NaN );  // number
    
    console.log(   100 / 0   );  // Infinity
    console.log(   100 % 0   ); // NaN
    
    
    // isNaN()
    
    console.log(  isNaN( 100 % 0 ));  //  true
    console.log(  isNaN( "100" ));  //  false
    console.log(  isNaN( "100a" ));  // true
    
    // [문제]  입력받은 값이 숫자만 입력했는 체크하고 싶다  -  isNaN()
    
    console.log(   NaN + 5  );    // NaN
    console.log(   NaN + "5"  );  // "NaN5"

-진수-

  // js에서    Ox를 붙이면 16진수로 해석한다. 
   let x = 0xFF;  
   // js에서    O를 붙이면 8진수로 해석한다.
   let y = 07;
 
   let z = 10;
   console.log(   z.toString(2)  );  // "1010"
   console.log(   z.toString(8)  );  // "12"
   console.log(   z.toString(16)  );  // "a"

-숫자 객체- 성능 X

    // var num = 123;                              // number
    var num = new Number(123);           // object               X    성능 떨어진다. 
    
    // Java
    //String name = "홍길동";
    //String name = new String("홍길동");

-64비트 숫자-

   // js  숫자  : 64비트
   let xx = BigInt(숫자);

js 숫자 함수

1. toString() 7.toString() "7"

   var n = 7 + "";    // "7"
   var m = 10;
   m.toString();      // "10"

2. toExponential() 반올림되고 + 지수 표기법 + "" 문자열 변환

   // toExponential()  반올림 + 지수표현 + 문자열 반환.
   var n = 9.656;
   // 2,4,6 매개변수는 소수점 뒤의 문자의 수를 정의한다. 
   // 매개변수를 지정하지 않으면 반올림하지 않는다. 
   //console.log(   n.toExponential(2)  ); // 9.66e+0
   //console.log(   n.toExponential(4)  ); // 9.6560e+0
   //console.log(   n.toExponential(6)  ); // 9.656000e+0

3. toFixed() 반올림 + "" 문자열 변환

    console.log(  n.toFixed(0) );  // 10
    console.log(  n.toFixed(2) );  // 9.66      지수표현 X
    console.log(  n.toFixed(4) );  // 9.6560  지수표현 X
    console.log(  n.toFixed(6) ); // 9.656000

4. toPrecision() 지정된 길이로 작성된 숫자로 반환.

    console.log(  n.toPrecision() );   // 9.656
    console.log(  n.toPrecision(2) );  // 9.7
    console.log(  n.toPrecision(4) );  // 9.656
    console.log(  n.toPrecision(6) );  // 9.65600

5. valueOf() X 숫자 변환

6. Number()

   // Number() 메서드  :   js 변수 -> 숫자 변환
   //                                 숫자 변환할 수 없으면 NaN 반환.
   //                                   날짜를 숫자로 변환할 수 도 있다. 
   console.log(    Number(true)  );   // boolean(true)  ->   1
   console.log(    Number(false)  );  //                 false ->  0
   
   console.log(    Number("10")  );  //                 "10" ->  10
   console.log(    Number("10.33")  );  //             "10.33" ->  10.33
      
   console.log(    Number("          10")  );  //             "          10" ->  10
   console.log(    Number("10          ")  );  //             "10          " ->  10
   
   console.log(    Number("admin")  );  // NaN
   
   console.log(    Number("10 33")  );  // NaN
   console.log(    Number("10,33")  );  // NaN
   
   //                                   날짜를 숫자로 변환할 수 도 있다. 
   console.log(    Number("2022-01-22")  );  // NaN
   
   // 1970.1.1 이후   ms값을 반환
   console.log(    Number( new Date( "2022-01-22") ) );  // 1642809600000

7. parseInt()

   // parseInt() 메서드  :  문자열을 구문 분석해서       정수 반환
   console.log( parseInt( "10"  )  );  // "10"     -> 10
   console.log( parseInt( "-10"  )  );  // "-10" -> -10
   console.log( parseInt( "10.33"  )  );  // "10.33" -> 10
   
   // Number()  NaN
   console.log( parseInt( "10 33"  )  );  // "10 33" -> 10
   console.log( parseInt( "10,33"  )  );  // "10,33" -> 10
   console.log( parseInt( "10abcde"  )  );  // "10adbcde" -> 10
   console.log( parseInt( "year 100"  )  );  // "year 100"-> NaN
   console.log( parseInt( "100 year"  )  );  // "year 100"-> 100

8. parseFloat()

   // parseFloat() 메서드  :  문자열을 구문 분석해서      숫자( 정수 , 실수 ) 반환
   console.log( parseFloat( "10"  )  );  // "10"     -> 10
   console.log( parseFloat( "-10"  )  );  // "-10" -> -10
   console.log( parseFloat( "10.33"  )  );  // "10.33" -> 10.33
   
   // Number()  NaN
   console.log( parseFloat( "10 33"  )  );  // "10 33" -> 10
   console.log( parseFloat( "10,33"  )  );  // "10,33" -> 10
   console.log( parseFloat( "10abcde"  )  );  // "10adbcde" -> 10
   console.log( parseFloat( "year 100"  )  );  // "year 100"-> NaN
   console.log( parseFloat( "100 year"  )  );  // "year 100"-> 100

9. isInteger()

    var n = 10;
    console.log(    Number.isInteger(  n )  );  // true
    n = 10.33;
    console.log(    Number.isInteger(  n )  );   // false

js 배열

1. 배열 개념

2. 배열 사용 목적

3. 배열 선언 형식 X

[js] 첫 번째 방법

     var         cars = [];
     cars[0] = "BMW";
     cars[1] = "KIA";

     const  cars = [
                                  "BMW"
                                  , "KIA"
                                  , "Volvo"
                            ];

[js] 두 번째 방법

     const cars = new Array();     
     const cars = new Array("BMW",  , "KIA"   , "Volvo");

-배열요소 접근-

     // int [] m = {1,3,5,4,2};
     // m[2]
     // m[2] = 100;
     
     const m = [1,3,5,4,2];
     
     // (1)   2번째 요소... 
     // console.log(  m[2] );  // 5
     
     // (2)   2번째 요소의 값을 100으로 변경
     m[2] = 100;
     console.log(  m[2] );  //  100
     
     // (3) 배열의 모든 요소를 출력.
     // console.log(  m );  // [1, 3, 100, 4, 2]
     
     // (4) 배열의 타입
     //  js에서 배열도 객체로 인식한다. 
     console.log( typeof m );  // object
     
     // (5) 요소 추가 55
     // 배열명.length   == 배열크기
     m[m.length] = 55;
     m[m.length] = 65;
     m[m.length] = 75;
     console.log(  m ); 
     
     // (7) 배열 정렬
     m.sort();
     console.log(  m );  // 1, 100, 2,3,4,5  문자열 오름차순 정렬
     
     // (8) 마지막 요소 얻어오기.
     // m[m.length-1]
     
     // (9) 모든 배열의 요소 출력.
     for (var i = 0; i < m.length; i++) {
		console.log(  i +" : " +     m[i] );
	 }
     
     // (10)
     m[m.length] = "Benz";  // 문자
     m[m.length] = Date.now;  // 날짜
     m[m.length] = function (){ }; // 함수
     m[m.length] = [1,2,3];  // 배열

-배열과 객체 차이-

    const person = ["admin", 20];
    var name = person[0];
    var age = person[1];
    
    // js object
    const person = {
    		name:"admin" , 
    		age : 20
    };
    person.name;
    person["name"];

배열 메서드

- 기능, 리턴값, 매개변수 ( 3가지 )

-배열크기, foreach, push, isArray-

   var fruits = ["Banana", "Orange", "Apple", "Mango"];
   // console.log(  fruits.length );  // 배열 크기  4
   
   /*  [1번]
   var text = "<ul>";
    for (var i = 0; i < fruits.length; i++) {
		text += "<li>" + fruits[i] + "</li>";
	}   // for
	text += "</ul>";
	*/
	
	// [2번]  Array.forEach()
	var text = "<ol>";
	fruits.forEach(function(elt, i, array) {
		// console.log(  elt + " / " + i + " / " + array)
		text += "<li>" + elt + "</li>";
	})
	text += "</ol>";
	
	$("#demo").html( text );
	
	// 1.  배열 요소 추가  :   push()
	// fruits[fruits.length] = "xxx";             X
	fruits.push("Lemon");
	
	// 2. 타입이 배열 확인 : ES5   Array.isArray()
	// console.log( typeof fruits );  // object
	// console.log(  Array.isArray( fruits ) );  // true
	
	// instanceof 연산자.
	// console.log( " > " +   fruits  instanceof Array );  // true

-toString, join-

  // [ 배열 -> 문자열 변환        toString() ]  
  //  첫 번째.
  //   "Banana,Orange,Apple,Mango,Lemon" 
  // 각 요소가 콤마(쉼표)로 구분되어 문자열로 변환.
  // console.log(   fruits.toString() );
  
  //  두 번째   - join()   ***
  //  "Banana - Orange - Apple - Mango - Lemon"      seperator (구분자)
  // console.log(  fruits.join(" - ") );
  
  // Banana</li><li>Orange</li><li>Apple</li><li>Mango</li><li>Lemon
  // console.log(  fruits.join("</li><li>") );
  
   var text = "<ol><li>";
	text += fruits.join("</li><li>");
	text += "</li></ol>";
	
	$("#demo").html( text );

-push, pop-

   // 배열의 가장 마지막 요소에 새로운 요소를 추가 - 리턴값  배열의 크기    push()
   console.log(  fruits.push("XXX") );  // 6
   console.log(  fruits.toString() );
   
   // 배열의 가장 마지막 요소를 얻어오기   - pop()           + 가장 마지막 요소 제거.
   // console.log(  fruits[fruits.length - 1] );
   console.log( fruits.pop() );
   console.log(  fruits.toString() );
   
   sort()
   shift()
   unshift()
   concat()
   splice()

-shift, delete-

    var m = [3,5,2,4,1];
    console.log(  m.toString() );
    
    // [ shift() ]   >>     [<<1 ]   >>>          자리 이동
    // 첫 번째 요소는 제거되고 나머지 요소는 인덱스 -1    이동
    // 0[3] 1[5] ~  4[1]
    // 0[5] ~  3[1]
    // console.log(  m.shift() );   // 3  첫 번째 요소를 반환
    
    
    
    // [ unshift() ]
    // m.push(100)  마지막 요소 추가
    // m.unshift(100);  // 첫 번째 요소에 추가 + 요소 뒤로 인덱스 + 1  이동
    
    
    // 배열 요소 제거(삭제)
    // shift()  첫 번째       요소 제거
    // pop()    마지막 번째 요소 제거
    // m[1] = -1;   제거했다는 의미로 특정값을 수정.
    
    // 3,   undefined  ,2,4,1
    // delete m[1];
    
    var n = [100,200,300];
    var s = [7,8,9];
    // 4. m 배열과 n 배열을 병합(연결)해서 새로운 배열을 반환 :    concat()
    // 3,5,2,4,1,100,200,300
    var mns =  m.concat(n, s);
    
    // console.log(  mns.toString() );

-splice-

  // 3,5                         ,2,4,1
  //      2(100),3(200) 
  // 3,5,100,200,2,4,1
  // 배열의 새 항목을 삽입
  // unshift() : 첫 요소 추가
  // push()     : 마지막 요소 추가
  // splice()              중간 요소  1개 이상 추가(삽입)
  // 스플라이스() == 사전적인 의미 ( 잇다 , 붙이다. )
   // pos  삽입 위치
   // amount  제거 양
   // newelt    새로운 요소
   m.splice(pos, amount, newelt)
  
  // 3,5,100,200,2,4,1
   m.splice(2, 0, 100, 200);
  
  //  3,5,2,4,1
  // 3,5,100,200,1
   m.splice(2, 2, 100, 200);
  
  //  3,5,[2,4],1    2번째 부터 2개의 요소 제거
  // 3,5,1
   m.splice(2, 2);
  
   console.log( m.toString() );

-slice, splice-

    console.log( m );
    
    // m.splice()    잇다.
    // m.slice()      조각내다.       
    // var n = m.slice(1, 3); // 1 <=     < 3
    var n = m.slice(1); // 1 <=     to 마지막 요소
    console.log( n ) ;   // [5,2]

sort() 기본 asc

reverse() 요소 순서 바꾸는 함수

   let fruits = ["Banana", "Orange", "Apple", "Mango"];
   
   // "Banana,Orange,Apple,Mango"
   console.log( fruits.toString() );
   // 1. 배열 정렬 + asc
   // fruits.sort();
   
   // 2. 배열 정렬 + desc
   // fruits.sort(function(a, b) {  })
   
   // 배열의 요소를 반대로 바꾸는 함수
   // "Mango,Apple,Orange,Banana"
   // "Orange,Mango,Banana,Apple"  내림차순 정렬
   fruits.sort()
   fruits.reverse();
   
   // [A]pple,[B]anana,[M]ango,[O]range  오름차순 정렬
   console.log( fruits.toString() );

   // 숫자 배열 선언
   var m = [3, 5, 10, 2, 4, 1 , 29];
   console.log( m.toString() ) ;  // 3,5,10,2,4,1,29
   
   // m.sort();  이유? 숫자를 문자열로 정렬..
   //  1,2,3,4,5,10,29		     오름차순
   /*
   m.sort(function(a, b) {
   	  // return a - b;   // 양수,  음수 , 0   오름차순
   	  return b - a;  // 내림차순
   });
   */
   
   // 람다식
   m.sort(  (a, b) => a-b  );
   
   console.log( m.toString() ) ;  // "1","10","2","29","3","4","5"

-배열 섞기(Math.random)

   // 무작위로 배열 섞기.
   // js       0.0 <=    Math.random() 실수  < 1
   m.sort(  () => 0.5 - Math.random()  );
   console.log( m.toString() ) ;

- js : Math 객체 + random() 메서드

   var max =  Math.max(...m)  ;  // 29
   
   // [ apply() 함수  ? ]  call() 비교해서 설명...
   max = Math.max.apply(null, m); // 29
   console.log( max );
   
   var min = Math.min(...m)  ;  // 1
   min = Math.min.apply(null, m); 
   console.log( min );

-객체 배열-

   // 객체 배열 선언
   var persons = [  
	                      {name:"홍길동", age:20}, 
	                      {name:"박예린",age:25}, 
	                      {name:"이예인",age:18} 
	                 ];
   
   // 1. 나이 순으로 오름차순 정렬해서 출력.
   //console.log(   persons[0].age   );
   //console.log(   persons[0]["age"]   );
   
   persons.sort(function( o1, o2) {
   	   return o1.age - o2.age;
   })
   
   // console.log( persons.toString() );
   // console.log( persons );
   
   // 2. 이름순으로 오름차순 정렬..
   console.log("===2===");
   
   
   //console.log(    "이예인" - "홍길동"  );  // NaN
   //console.log(    "이예인" > "홍길동"  );  // false
   //console.log(   Number(  "이예인" > "홍길동" ) );  // false
   
    persons.sort(function( o1, o2) {
       if( o1.name > o2.name ) return 1;
       else if( o1.name < o2.name ) return -1;
       else 0;
   })
   
   console.log( persons );

배열 메서드

1. forEach()

배열의 각 요소 마다 한 번씩 함수를 호출해서 반복 처리.

2. map()

배열의 각 요소에 함수를 실행하여 새로운 배열을 생성하는 함수

3. filter()

필터링된 요소만을 갖는 새로운 배열을 생성하는 함수

4. reduce()

배열의 각 요소를 실행하는 함수에서 단일 값을 생성하는 함수

5. every()

배열의 모든 요소가 테스트를 통과하는지 여부 확인하는 함수

6. some()

배열의 일부 요소라도 테스트를 통과하면 true/false 반환하는 함수

7. indexOf() / lastIndexOf()

배열에서 요소의 값을 검색하고 검색한 요소의 인덱스값을 반환하는 함수 ( - 1 )

8. find() / findIndex()

요소값 요소 인덱스

5 1

var m = [3,5,2,4,1];

첫 번째 5보다 같거나 큰 수를 찾고 싶다.

var num = m.find( function (elt, i, array){

return elt >=5;

} )

9. from()

길이(length) 속성이 있는 객체 또는 반복 가능한 객체에서 -> 배열 반환하는 함수

문자열

배열

등등

10. keys()

배열의 키(인덱스값)가 있는 iterator 객체를 반환하는 함수

entries() key + value 한쌍

배열의 인덱스값 요소의 값

[ 0 , 3 ]

<script>
   var m = [3,5,2,4,1];
   // var ir = m.keys();
   var ir = m.entries();  // 엔트리 = key + value  한쌍
   
   for (let n of ir) {  // index   0/1/2/3/4   인덱스값 
	console.log( n[1] );
  }
   
   /* JAVA
   while( ir.hasNext()){
	    int n = ir.next();
   }
   */
	   
</script>


<script>
        /*
        var str = "안녕하세요.";
        // console.log( str.length );  // 6
        var arr =  Array.from( str );
        console.log( typeof arr);  // object
        console.log( arr.toString()  );  // "안,녕,하,세,요,."
        */
</script>

<script>
   /*
   var m = [3,5,2,4,1];
   // 1. forEach()
   m.forEach(function(elt, i, array) {
          console.log( elt + " / " +  i ); 	
    });
   */
</script>

<script>
    /*
    // 2. map()
    var m = [3,5,2,4,1];
    console.log( m.toString() );            // 3,5,2,4,1
    
    // 각 요소의 값을  2를 곱해서 새로운 배열 생성.
  
    var newm = [];
    for (var i = 0; i < m.length; i++) {
    	newm.push(    m[i] * 2 );
	}; 
 
	
	// map() 사용
	var newm = m.map(function(elt, i, array) {
		return elt *3 ;
	});
	
	console.log(   newm.toString() );  // 9,15,6,12,3
	*/
</script>

<script>
   /*
   // 3. filter()
   var m = [];
   for (var i = 0; i < 10; i++) {
	    m.push(   parseInt(  Math.random() * 100 )  );
  }
   console.log( m.toString() );
   
   // 50보다 큰 값을 -> 새로운 배열 생성
 
   var newm = [];
   m.forEach(function(elt, i, array) {
   	     if(  elt >= 50  )   newm.push( elt );
   })
   console.log( newm.toString() );
 
   
   var newm = m.filter(function(elt, i, array) {
   	   return elt >= 50 ;
   });
   console.log( newm.toString() );
   */
</script>

<script>
    /*
   // 4. reduce()
   var m = [3,5,2,4,1];
   
   // 배열의 총합을 구해서 출력.
 
   var sum = 0;
   
   for (var i = 0; i < m.length; i++) {
	  sum += m[i];
	  console.log(  m[i] +"+" )
  }
   console.log( sum );
 
   
   // m.reduceRight( )               오른쪽 -> 왼쪽
   var sum = m.reduce(function(sum, elt, i, array) {
   	   return sum + elt;
   } )
    console.log( sum );  // 115
    */
</script>

<script>
   // 정보처리기사 시험
   var m = [78, 60, 35, 89, 76];
   // 과락. 체크
   /*
   for (var i = 0; i < m.length; i++) {
	   if(  m[i]  < 40 ){  // 40 미만 
		    console.log("과락")
	   }
  }
   */
   
  var result =   m.every(function(elt, i, array) {
   	   return elt >=40 ;
   })
   
   console.log( result  ); // false

</script>

arguments 컬렉션, js 날짜

[ js 날짜 객체 : Date ]

1. 새로운 날짜 객체를 생성하는 4가지 방법

(1) new Date() : 현재 시스템의 날짜 + 시간.

(2) new Date(y, m, d, h, m, s, ms)

(3) new Date( ms ) 1970.1.1 00:00:00.000

(4) new Date( string date )

  //  [  js  날짜 객체 :  Date ]
  //  (1)  new Date() :  현재 시스템의 날짜 + 시간.
      var now = new Date();
      // Wed Nov 23 2022 16:12:30 GMT+0900 (한국 표준시)
      $("#demo").html(  now  );
  
  //  (2)  new Date(y, m, d, h, m, s, ms)
        // var d = new Date(2018 , 11-1, 23);  // 11월
        var d = new Date(2018 , 11-1 );          // 날짜 생략    1일
        $("#demo").html( d   );
      
  //  (3)  new Date( ms )                  1970.1.1 00:00:00.000
       var ms =   Number(new Date());
       // console.log( ms );   1669187859080
       var d = new Date( ms );
       
       // Wed Nov 23 2022 16:18:18 GMT+0900 (한국 표준시)
       $("#demo").html( d   );
  
  //  (4)  new Date( string date )
       Sun Nov 25 2018 09:00:00 GMT+0900 (한국 표준시)
       var d = new Date("2018-11-25");
       var d = new Date("2018-11");  // 1일
       var d = new Date("2018");  // 1월 1일
       $("#demo").html( d   );
       
       // GMT  == 그리니치 표준시
       // UTC   == 협정 세계시
  
        // MM/DD/YYYY
        // Wed Mar 25 2015 00:00:00 GMT+0900 (한국 표준시)
       var d = new Date("03/25/2015");       
       var d = Date.parse("03/25/2015");
       
       d.toString() ; //   날짜 -> 문자열 변환
       
       $("#demo").html( d.toDateString()   );  // "Wed Mar 25 2015"
       $("#demo").html( d.toUTCString()  );  // "Tue, 24 Mar 2015 15:00:00 GMT"
       $("#demo").html( d.toISOString()  );  // "2015-03-24T15:00:00.000Z"
       $("#demo").html( d.toLocaleDateString() );  // 2015. 3. 25.
       $("#demo").html( d.toLocaleTimeString() );  // 오전 12:00:00

  function sum(a, b, c){
	  console.log(" >> sum(3) ... " );
  }

  function sum(){
	   // forms 컬렉션
	   // options 컬렉션
	   // arguments 컬렉션 : 인자(매개변수) 컬렉션 객체
	   // 등등  links, images 컬렉션 ... ~ 
	   
	   // console.log(  arguments.length );
        var result = 0;
        for (var i = 0; i < arguments.length; i++) {
			result += arguments[i];
		}
	   return result;
   } 

  
  // sum();
  console.log(  sum(1, 2)  );              // 3
  console.log(  sum(1, 2, 3) );           // 6
  console.log(  sum(1, 2, 3, 4)  );      // 10

<script>
    var now = new Date();
   // 년도
   console.log(  now.getFullYear() );  // 2022
   // 월
   console.log( now.getMonth() + 1 );      // 11
   // 일
   console.log( now.getDate() );      // 23
   // 시
    console.log( now.getHours() );    // 16
   // 분
   console.log( now.getMinutes() );    // 16
   // 초
   console.log( now.getSeconds() );    // 16
   // 밀리세컨드
   console.log( now.getMilliseconds() );    // 16
   // 요일
   console.log(  "일월화수목금토".charAt( now.getDay()  ) );    //   일(0) 1(월)  2(화) 3(수요일)    ~    6(토)

   
   // 날짜 설정
   /* 
   now.setFullYear(year);
   now.setMonth(month)  // 1 달
   now.setDate(date);
   now.setHours(hour);
   now.setXXX();  
   */   
    
</script>

<script>
      //  getTime() :  1669188846578  ( 1970.1.1 00:00:00.000 )
     var ms =  now.getTime();
     alert( ms );
</script>

html - 배경색 변경

<select   onchange="bc_change(  this  );">
   <option>선택하세요.</option>
   <option value="white">흰색</option>
   <option value="red">빨강</option>
   <option value="green">녹색</option>
   <option value="blue">파랑색</option>
</select>

   function bc_change(  selTag ){
	   /* 
	  // document.querySelector("select");
	   var idx =  selTag.selectedIndex;  // 0 ~ 4
	   var op = selTag.options[idx];
	   var text =  op.text;
	   var value =  op.value;
	   */
	   
	   // alert(  selTag.value );    == $("select").val()
	   document.bgColor =   selTag.value;
   }

<script>
    var colors = ["white", "red", "green" , "blue"];

    var  $sel =  $("<select></select>");
    
    colors.forEach(function(elt, i, array) {
    	$sel.append(   $("<option>"+ elt +"</option>")  )
    });
    
    $sel.change(function() {
    	document.bgColor = $(this).val();
    	// $(this option:selected).val()
    });
    
    $sel.appendTo( $("body") );
  
</script>

저작자표시 (새창열림)