Write and Make

  자바스크립트에서 html 요소에 접근하는 방법 중 class 를 이용하는 방법이다. 바로 document 객체의 getElementsByClassName() 메소드 이다. 코드를 보자. < h1 > The Document Object </ h1 >   < h2 > The getElementsByClassName() method </ h2 >   < p > Change the text of the first elements with class ="example" </ p >   < div class = "example" > Element1 </ div >   < div class = "example" > Element1 </ div >   < script >     const collection = document . getElementsByClassName ( "example" );     collection [ 0 ]. innerHTML = "Good Morning!"   </ script > div 요소 두개의 class 네임이 example 이다. 이 두개의 요소에 접근하여 첫번째 요소의 콘텐츠 값을 변경하려고 한다. 핵심은 바로 document.getElementsByClassName() 메소드의 인자값으로 class 속성의 값을 지정해준다. document . getElementsByClassName ( "example" ); 그럼, 해당 인자값 즉 class 를 가진 HTML 요소를 문서에서 찾아 반환한다. console.log 로 반환값을 찍어보면, 하기처럼 HTMLCollection이라는 배열 타입을 반환하는 것으로 보인다. 정확히 말하면 HTMLCollection 은 배열과 유사한 모양을

  자바스크립트로 구현한 웹브라우저 새창 열기 코드이다. 새창에서 네이버를 열었다. 입맛에 따라 교체하면 되겠다. 버튼 요소에 자바스크립트 함수를 연결    - 함수에서는 네이버 페이지를 연다.      - 페이지를 여는 핵심함수는 바로 window.open() 이다. < body >   < button onclick = " openPopup ()" > 새창열기 </ button >   < script >     function openPopup (){       window . open ( "https://www.naver.com" , 'window' , 'width=1000, height=500, left=100, top=200' );     } window.open() 함수의 인자값은 하기와 같다. 첫번째 인자 : 열릴 웹 페이지. 두번째 인자 : 새로운 브라우저 창 이름 (코드 내부적으로 구별하기 위함)                   키 값으로 작용하여 버튼 여러번 클릭해도 한번만 열림.                   해당 값이 '' 이렇게 비어 있을땐 클릭 할때마다 새창이 열림. 세번째 : 새로 열릴 브라우저 창 크기. 자바스크립트 창 닫기

  자바스크립트 Array sort() 숫자정렬 다루기 지난 시간 숫자의 경우와 다르게 문자열의 경우는 sort() 함수 만으로도 정렬이 된다.          const strs = [ "ebc" , "def" , "acc" , "fef" , "bft" ];             strs . sort ();         console . log ( strs ); 위 코드에 대한 결과는  Array(5) 0 : "acc" 1 : "bft" 2 : "def" 3 : "ebc" 4 : "fef" length : 5 이와 같이 첫글자의 알파벳 순서대로 정렬이 된다. 알파벳 순은 유니코드 순서대로 정렬을 한다. 그럼, 문자열에는 숫자처럼 오름차순,내림차순을 직접 정의하는 콜백함수를 적용할 수 없나? 아니다. 적용이 가능하다.     strs . sort ( function ( next , pre ){             console . log ( next , pre );             // console.log("b".charCodeAt());                       if ( next > pre ){               return 1 ; // 그대로             } else if ( next < pre ){               return - 1 ; //역순으로             } else {               0             }         });   지난 숫자편 처럼, 콜백함수를 등록하고 앞뒤 인덱스에 배치된 문자열을 비교하면 된다. 유니코드로 비교되며, return 값이 양수 값일때는 순서를 그대로 배치하고 음수 일때는 순서를 바꾼다.  이는 숫자 콜백함수 구현때와

  자바스크립트  Array 객체는 정렬을 위한 sort() 메소드를 지원한다. 하기 배열을 정렬해보자. const array = [ 1 , 3 , 10 , 40 , 50 , 80 , 7 ];       array . sort (); console . log ( array ); 과연 결과는 어떨까? (7)  [ 1 , 10 , 3 , 40 , 50 , 7 , 80 ] 0 : 1 1 : 10 2 : 3 3 : 40 4 : 50 5 : 7 6 : 80 length : 7 예상과는 다른 결과가 나온다. 자세히 보면 앞자리 숫자만 가지고 정렬이 되었다. 자바스크립트 sort 메소드 자체가 가지는 오류는 아니지만 처음부터 내부 구현이 더 잘되었더라면 이란 아쉬움도 있다. 그럼 어떻게 구현하는가? sort() 메소드의 인자로 콜백 메소드를 등록하여 정렬이 가능하다.     array . sort ( function ( a , b ){           console . log ( a , b );       }); 함수를 정의하고 인자로 a,b 를 준다.  a,b 값을 콘솔로그 로 찍어보면,  3 1 10 3 40 10 50 40 80 50 7 80 위와 같은 값이 나온다. [1, 3, 10, 40, 50, 80, 7] 배열을 펴놓고 다시 살펴보면 a 가 뒤에 값 b 가 앞에 값임을 알수 있다.      const array = [ 1 , 3 , 10 , 40 , 50 , 80 , 7 ];             array . sort ( function ( a , b ){           // console.log(a,b);           return - 1 ;       });       console . log ( array ); 여기서 sort() 메소드 의 반환값을 -1(음수) 로 설정하면 (7)  [ 7 , 80 , 50 , 40 , 10 , 3 , 1 ] 배열이 설정한 순서에서 역순으로 정렬이 된다. 반대로 1(양수)를 설정하게 되면,  

  자바스크립트에서 지원하는 모든 변수는 변수에 할당된다. 그 변수를 선언하는 키워드는 var 이다.  var string = "hi' ;  //스트링 문자형 var value1 = 1; // 숫자형 var value2 = 1.23; // 숫자형  var value3 = true; // 논리형 boolean 위는 기본 자료형 중 문자형,숫자형, 논리형을 var 변수에 할당한 모습이다. ES6 버전부터 도입된 let 키워드 를 사용하면 동일하게 변수를 선언할 수 있다. let string = "hi' ;  //스트링 문자형 let value1 = 1; // 숫자형 let value2 = 1.23; // 숫자형  let value3 = true; // 논리형 boolean 그럼 var 과 let 의 차이점은 무엇일까? var 의 단점을 보안한 키워드가 바로 let 이다. 먼저 var 에 대해서 알아본다. 1. var은 중복으로 선언이 가능하다. 자바스크립트 언어의 유연성이 될수도 있지만, 중복된 변수는 코드의 심각한 논리적 오류를 발생시킬수 있다. 하나의 프로젝트에 여러명이 참가하여 코딩하는 경우 동일한 변수를 선언하고 저마다 값을 제각기 할당하다보면 의도한 값이 나오지 않을 수 있다. 이런 단점을 보안하고자, let 키워드로 변수를 선언하면 중복 선언이 불가하다. VSC 에디터 부터 에러가 발생하며, 브라우저 콘솔에서 조차 하기와 같은 에러를 보여준다. 동일한 변수를 선언하는 것을 코딩하는 시점부터 막아주기에 안전해진다. 2. var 은 함수블럭 스코프 만을 가진다. var 키워드는 함수블럭 스코프 내에서만 지역변수와 전역변수를 나눈다. 무슨말인지 하기코드를 보자. var 키워드로 변수를 선언하면, 함수 블럭 내부의 변수는 지역변수, 외부는 전역변수 로 나뉜다. 딱 이 개념하나이다. 즉, 지역변수는 함수 내부에서만 사용이 가능하고, 전역변수는 코드 전체에서 참조가 가능 하다. 그 결과 위의 코드에서는 v1 은 정상적으로 con

  자바스크립트 함수 정의하기 세번째 방법은 화살표 함수를 사용하는 것 이다. 화살표 함수는 ES6버전에서 탄생하였다. Syntax 는 이와 같다 ()=>{  코드구현 } 화살표 함수는 함수를 조금더 간편하게 쓰고자 채택된 방식이다. 처음 이 타입을 접하면 무슨 암호 처럼 느껴지나, 자주 사용해보면 사용에 편리함을 느낄 수 있다. 간편하게 쓰고자 함이 목적인 화살표 함수는 함수 표현식에서 익명함수만이 변환이 가능하다. 예제를 보자. let result3 = 0 ; const sum3 = () => {   for ( let i = 0 ; i < 10 ; i ++){         result3 = result3 + i ;       }       console . log ( `result3 is ${ result3 } ` ); }; sum3 (); 익명함수 라 함은 함수이름이 없다는 것이다. 함수표현식 이기에 변수에 함수를 대입하고, 그 변수를 통해서 함수를 호출한다. 익명함수 일때 굳이 function 이라는 키워드를 사용하지 않아도 되니 편리하다. 화살표 함수에 대해서 정리해본다. 감사합니다.

  자바스크립트 함수정의 방법 두번째  함수 표현식 으로 함수를 정의 한다. Syntax 는 아래와 같다. const 변수명 = function 함수명(){  구현코드 } const 변수명 = function(){ 구현 코드 } 함수 호출은 변수명(); 으로 가능하다. 자바 와 C 언어와는 조금 다른 방법을 가진다. 자바스크립트 만의 특성이라 생각한다. 위 Syntax 가 가능한 이유는, 자바스크립트에서 함수는 객체의 파생 자료형 이다. 그리고 자바스크립트 에서는 자료형을 변수에 담을 수 있다. 그렇기에 함수 역시 변수에 할당 할 수 있는 것이다. 함수명이 있는 타입은 네이밍 함수라고 표현하고, 함수명이 없는 타입은 익명함수 라고 한다. 예제를 만들어본다. 먼저 네이밍함수 를 변수에 담는다.  변수(); 를 통해 함수를 호출한다. 결과는 1부터 10까지의 더함을 반환 한다.   let result = 0 ;   const sum = function sumFucntion (){       for ( let i = 1 ; i < 10 ; i ++){         result = result + i ;       }       console . log ( `result is ${ result } ` );     }     sum (); 네이밍 함수에서 주의 할점은 sumFunction() 함수선언 방법처럼 함수를 호출을 하면 오류가 발생한다. 반드시 변수명(); 으로 호출해야 된다. 이는 자바스크립트의 규칙이므로 익숙해 지자. 다음은 익명 함수 이다. 함수의 이름만 없을뿐 동일한 구현과 호출 방식을 가진다. //익명 이름이 없는 함수라고 호출이 가능하다. let result2 = 0 ; const sum2 = function (){       for ( let i = 0 ; i < 10 ; i ++){         result2 = result2 + i ;       }       console . log ( `

  자바스크립트 함수 정의 방법에는 3가지가 있다. 그 중 함수 선언문을 사용하는 방법을 알아보자. 함수 선언문 방식은 먼저  function 이란 키워드를 적고 그 다음 식별자 를 적는다. 여기서 식별자 는 함수명 이라고 하여, 개발자가 임의로 지을수 있다. 함수 선언문의  syntax 는 이러하다. function 함수명(){ 구현 코드 } 함수 선언문을 활용한 1 부터 10까지의 합을 더하는 함수를 만들어 본다.     let sum = 0 ;     function sumFucntion (){       for ( let i = 1 ; i < 10 ; i ++){           sum = sum + i ;       }         console . log ( `sum is ${ sum } ` );     }         sumFucntion (); 함수 선언문 으로 정의된 함수는 함수명();  형식으로 함수를 호출할 수 있다. 함수를 호출한다는 의미는 함수를 실행할 수 있다는 의미 이다. 함수는 복잡한 코드를 하나의 함수로 묶어서 여러곳에서 함수를 호출하여 사용할 수 있기에 코드의 복잡도 와 효율성을 높일 수 있다. 함수 선언문을 활용한 함수 정의를 정리해본다. 감사합니다.

  자바 스크립트 반복문 중 for 문을 알아본다. for 문은 하기 형식으로 이루어진다. for( 초기값 ; 조건식 ; 증감식){ } 0부터 10까지의 숫자를 출력하는 예제를 통해서 for문의 쓰임새를 자세히 파악해보자.   //for 문     for ( let i = 0 ; i <= 10 ; i ++){       console . log ( "i =" + i );     } 초기값 설정 부분에 변수를 선언하고 초기값을 세팅한다. 조건부 에는 for 문의 반복횟수를 나타낼 변수의 조건값을 코딩한다 마지막 증감식에는 조건식을 반복할때마다 변형시키기 위한 증감식을 적는다. 이 코드에서는 0부터 10까지 변수 i가 증감해야 하기때문에 i++ 증감을 한다. while 문과 비교하여 무엇이 더 났다고 표현하기는 그러나, 조건에 사용되는 조건 값을 명확히 for문에 서술할 수 있다는 점과 중복으로 반복문을 표현할때 for 문이 조금은 더 가독성이 쉽다. 물론 이러한 점은 코딩 스타일별로 다르기에 정답은 없다. 자바스크립트 for문에 대해서 정리해본다. 감사합니다.

  자바스크립트 do while 반복문에 대해서 정리해본다. do while 반복문의 구조는 아래와 같다. do{ }while(조건식) do{ } 블럭안의 문장을 무조건 한번 실행한다. while(조건식) 이 참일 경우 계속해서 반복한다. 해당 로직을 이용해서 1부터 10까지를 출력하는 코드를 작성해본다.     //do while 문     let m = 0 ;     do {       console . log ( "m=" + m ++)     } while ( m <= 10 ) m 이란 변수를 선언 및 초기화 하고 do{ } 블럭문 안에서 console.log() 함수를 무조건 한번 실행한다. 그 다음 while 조건문 을 체크하여 m이 10이 될때까지 반복한다. 그 결과는 당연히 0 부터 10의 값을 출력한다. 처음에 무조건 한번은 실행을 해야하는 코드가 있다면, while 문 보다는 do~ while 문 구조를 사용하는 것이 좋다. while 문 예제는 하기를 참고하고, do while 문 정리를 마친다. 감사합니다. 자바스크립트 while 문

  자바스크립트 while 은 반복문 이다. while (조건식)   조건식 이 참일경우 무한으로 반복한다. 그렇기때문에 조건식이 특정조건을 가지고 반복문을 끝내도록 설계해야 한다. 무한반복이 되면 앱이 정지된것 과 같은 현상을 보인다. 이를 락업 이라고도 표현한다. while 문 예제를 간단히 만들어보자. < script >     let n = 0 ;     while ( n <= 10 ){       console . log ( "n=" + n ++); </ script >   변수를 하나 만들고 해당 변수로 조건식을 만든다. console 로그를 이용해서 0 부터 10까지 출력하는 예제 이다. 자바스크립트의 while 반복문은 자바 나 다른 객체언어 그리고 C 와도 사용법이 같다. 자바스크립트 while 문의 사용법만 잘 익혀두면 어떤 언어든 손쉽게 사용이 가능하다. 자바스크립트 while() 문을 정리해본다. 감사합니다.

  자바스크립트 기본자료형은 문자열, 숫자형, 논리형, undefined, null 이 있다. 1. 문자열 문자열은 말그대로, 문자형 데이터를 저장한다. let string = "hi" ; let string2 = 'morning' ; 처럼 "", '' 쌍따옴표 혹은 따옴표 로 문자를 표현하고 그 값을 변수에 담을 수 있다. 자바 나 C와 같은 언어 였다면 변수의 타입조차 string, char[] 등으로 표현했겠지만 변수는 그대로 둔 상태에서 들어가는 데이터에 따라 자료형을 분류하니 이는 자바스크립트가 가지는 재미있는 요소라고 생각한다. ES6 부터는 문자열을 표현하기 위해서 ` 백틱 기호를 사용한다. 관련해서는 하기 포스팅을 참고하자. 자바스크립트 문자열 표현하기 2. 숫자형 숫자형 역시 숫자를 담는다. 다만 그 숫자라 함은 정수 와 실수를 포함한다. let number = 123 ; let number2 = 1.23; 실수의 연산시 자바스크립트 역시 오차가 생김에 주의해야 한다. 3. 논리형 논리형은 true 와 false 라는 값을 가진다. let bool = true; let bool2 = false; 이 역시 자바 나 기타 객체언어 였다면, boolean 이라는 데이터 타입을 가졌을것이지만 자바스크립트에서는 let 혹은 var 변수로 담고 그 값에 따라 데이터 타입이 정해진다. 물론, typeof bool 했을때는 boolean 값이 나온다. 4. undefined  변수에 값이 할당되지 않았을때 자바스크립트 엔진에서 기본으로 넣어주는 값이라고 생각하자 let temp ;  이렇게 변수를 선언하고 초기화 하지 않았다면 temp에는 undefined 가 할당된다. 이는 다음에 볼 null 과는 차이가 있다. 5. null null 은 변수가 참조하는 값이 없다는 것을 의미한다. 할당 되지 않음을 나타내는 undefined 와는 다르다.  가리키는 값이 없다는 null은 undefine