Write and Make

  querySelector() 함수를 사용해서 HTML요소에 접근 해본다 querySelector()함수의 인자는 CSS선택자 가 들어간다. 코드를 보자.   < h1 > The Document Object </ h1 >   < h2 class = "text" > The querySelector() Method </ h2 >   < h3 > Add a background color to the first p element </ h3 >   < p > This is first p element </ p >   < p > This is second p element </ p >   < script >     const one = document . querySelector ( "p" )     one . style . background = "red" ;     const two = document . querySelector ( ".text" );     two . style . background = "green" ;   </ script > 핵심은 document.querySelector() 메서드 이다.  반환 값으로 해당 요소 하나만을 반환한다.  위코드에서는  요소.style.속성  으로 스타일을 지정하고 있다. document.querySelector() 메서드 의 인자로는 CSS 선택자 가 온다. 추가로, querySelectorAll() 메서도 도 알아보자. 메서드 이름에서 들어나듯 반환값이 하나가 아니고 여러개임을 유추할 수 있다. 코드를 보자.    < h1 class = "text" > The Document Object </ h1 >   < h2 class =

요소에 접근한 뒤 콘텐츠의 텍스트 를 반환하고 수정하는 속성에는 innerHTML 이 있다. textContent , innerText 와 다른 점은 콘텐츠에 포함된 태그값도 텍스트와 같이 반환하며, 수정 시 태그도 같이 반영이 된다.  코드를 보자.   < p > Hi, Here is innerHTML test.     < span style = " display:none" > 테스트 입니다. </ span >   </ p >   < script >     let text = document . getElementsByTagName ( "p" );     console . log ( text );     console . log ( `text is ${ text [ 0 ]. innerHTML } ` );   </ script > document.getElementsByTagName() 으로 HTMLCollection 객체의 첫번째 p 요소에 접근할 수 있다. innerHTML 로 반환한 값을 콘솔로그 로 찍어보면 text is Hi, Here is innerHTML test.  <span style="display:none">테스트 입니다.</span> 위와 같다. textContent , innerText 와는 다르게 태그도 같이 출력이 된다. 그럼, 하기 코드를 추가한다면,     text [ 0 ]. innerHTML = "<strong>innerHTML</strong> test" ; 브라우저 화면에 나오는 결과는 태그가 적용된 콘텐츠가 출력된다. innerHTML  test 이 역시 textContent , innerText 와는 다른 점이다. textContent , innerText 은 태그가 그냥 텍스트로 출력이 된다. 태그 및 텍스트를 같이 수정할때는 in

HTML DOM 이란 Document Object Model 의 약자로 웹 페이지가 로딩될때 브라우져는 HTML을 DOM 으로 만든다. HTML 문서를 객체로 만든다. DOM 으로 만들어진 객체 덕분에 자바스크립트는 HTML document의 모든 요소에 접근 및 수정을 할 수 있게 된다. Dom 은 이런식의 구조를 가진다. DOM 트리 라고 부른다. 위 객체 구조는 하기 HTML문서를 객체한 한 것이다. <! DOCTYPE html > < html > < head > >   < title > My title </ title > </ head > < body >   < a href = "My link" ></ a >   < h1 > My header </ h1 > </ body > </ html > 더 복잡은 HTML문서 역시  DOM 트리로 생성시 동일한 구조를 가진다. 이것이 바로 DOM 이다. HTML을 자바스크립트가 접근 할수 있도록 객체화 한 것! 자바스크립트 는 자체적으로 객체를 지원한다. 이를 내장 객체라고 한다. Math, Array, String 등등... 이미 여러 기능구현이 되어있는 객체들이다.  이 외에 웹 브라우저에서 제공되는 객체를 브라우저 객체모델(BOM)이라고 하며. 여기에 DOM이 포함되어 있다. BOM의 최상위 객체는 window 이다. DOM 트리 최상단의 document 역시 바로 window의 하부 객체 이다.  코드상으로는 이렇게 접근이 가능하다.   < h1 > My header </ h1 >   < script >     const temp = window . document . getElementsByTagName ( "h1" );     console . log ( temp [ 0 ]. inne

  자바스크립트를 사용해서 동적으로 HTML요소에 class 속성을 추가 또는 제거 할 수 있다. 코드를 보자. 이런 스타일이 정의 되어있고, < style >       .mystyle {       background-color : coral ;       padding : 20px ;     } </ style > 하기 코드에서는 해당 스타일을 P 요소에 적용하고 있다. < body >   < h1 > The DomToken Object </ h1 >   < h2 > The add() Method </ h2 >   < button onclick = " myFunction ()" > Add </ button >   < p > Click "Add" to add the "myStyle" class to myDiv. </ p >   < div id = "myDiv" >     < p > I am myDiv. </ p >   </ div >   < script >     function myFunction (){       const list = document . getElementById ( "myDiv" ). classList ;       console . log ( list );       list . add ( "mystyle" );     }   </ script > 핵심은 Dom요소.classList 란 속성이다.   이 속성은 반환값으로 DomTokenList 를 가진다. 조금더 풀어쓰면 요소의 CSS클래스 네임을 반환한다. 손쉽게 반환되는 요소에 class속성을 추가 할수 있다고 생각하자.  위 코드에서 P요소는 처음에는 스타일이 적용되어 있지 않다

  자바스크립트로 HTML 요소에 접근뒤 해당 요소의 콘텐츠 텍스트를 반환 하거나 수정하는 속성 중 하나는 innerText 이다. 지난 시간 살펴본 textContent 속성과 다른점은 화면에 보이는 텍스트 만 반환 한다는 점. 코드를 보자.   < h1 > Hi, Here is innerText test.     < span style = " display:none" > 테스트 입니다. </ span >   </ h1 >   < script >     let text = document . getElementsByTagName ( "h1" );     console . log ( text );     console . log ( `text is ${ text [ 0 ]. innerText } ` );   </ script > h1 요소의 구성은 textContent 포스팅 과 동일하다. ㅇdocument.getElementByTagName() 반환값이 HTMLcollection 타입이므로 첫번째 인덱스의 h1 요소에 접근한뒤 innerText 속성을 불러본다. 결과 값은, text is Hi, Here is innerText test.  이다. 화면에 보이는 텍스트 콘텐츠 만 반환한다. 그리고, 해당 텍스트를 하기처럼 수정할 수도 있다.   text [ 0 ]. textContent = "innerText test" ; innerText test 브라우저에 수정된 결과가 나온다. innerText 속성은 화면에 보이는 텍스트 만 요소로 부터 반환 및 수정이 가능하다.

  자바스크립트로 HTML 요소의 콘텐츠 영역을 수정할 수 있다. 코드를 먼저 보자.   < h1 > Hi, Here is TextContent test.     < span style = " display:none" > 테스트 입니다. </ span >   </ h1 >   < script >     let text = document . getElementsByTagName ( "h1" );     console . log ( text );     console . log ( `text is ${ text [ 0 ]. textContent } ` );   </ script > document.getElementsByTagName() 메서드로 h1 요소에 접근한다. h1요소의 콘텐츠 부분의 텍스트를 수정하기 위함이다. document.getElementsByTagName() 메서드 의 반환값은  HTMLCollection  [ h1 ] 이므로, 바로 text.textContent 로 접근을 하면 undefined 가 나온다. HTMLCollection의 첫번째 요소값의 textContent에 접근해야 한다. 그 코드가 바로, text[0].textContent 이다. 결과는  text is Hi, Here is TextContent test. 테스트 입니다 로 나온다. span 태그의 style 속성에서 화면에 보이지 않도록 display:none 으로 설정했지만 여기서는 요소의 텍스트가 다 나온다. 바로 textContent 의 성질은 요소가 가지고 있는 모든 텍스트를 반환한다는 것 이다. 추가로,    text [ 0 ]. textContent = "수정함" ; 코드를 삽입하면, 브라우저 화면에는  수정함 수정한 텍스트가 출력이 된다. 요소.textContent 속성은 요소가 가진 모든 텍스트를 반환 및 수정이 가능하다. 

  HTML 요소를 자바스크립트에서 얻어 왔다면, style속성으로 요소에 스타일을 지정할 수 있다. 코드를 보자. < p id = "text" > text </ p >   < script >     //요소를 얻어온다     const temp = document . getElementById ( "text" );     temp . style . color = "blue" ;     temp . style . fontSize = "30px" ;     temp . style . backgroundColor = "yellow" ;   </ script > 먼저, 자바스크립트의 웹 내장객체인 document.getElementById() 메소드를 사용해서 P 요소를 가져온다. 여기서는 요소의 컨텐츠 내용인 텍스트에 색상,크기, 배경의 스타일을 적용한다. 스타일 을 적용하는 방법은 위 코드처럼, 요소.style.스타일 속성 = " 속성 값 "  이다. 오늘의 핵심은 자바스크립트 로 HTML 요소들에 CSS 스타일을 컨트롤 할 수 있다. 스타일은 외우기 보단, 필요할때 마다 검색으로 코드를 적용해 나간다.

  자바스크립트 에서 HTML요소 에 접근하기 위한 방법으로는 CSS 선택자를 활용하는 방법이 있다. 역시 코드를 보자.   < h1 > The Document Object </ h1 >   < h2 > The querySelector() Method </ h2 >   < h3 > Add a background color to the first p element: </ h3 >   < p > This is a first p element </ p >   < p > This is a second p element </ p >   < script >     console . log ( document . querySelector ( "p" ));     // document.querySelector("p").style.backgroundColor="red";   </ script >   핵심은 바로, document . querySelector ( "p") 메소드 이다. 인자로 CSS 선택자를 적는다.  querySelector() 메소드는 해당 선택자로 선택된 모든 요소 중 첫번째 요소만 가져온다. 콘솔로그에 찍힌 값은 하기와 같이 첫째 줄의 요소만 가지고 온다. < p > This is a first p element </ p > 가져온 요소의 배경색상을 바꾸는 코드를 적용하면  document . querySelector ( "p" ). style . backgroundColor = "red" ; 하기와 같은 결과가 나온다. The Document Object The querySelector() Method Add a background color to the first p element: This

  자바스크립트는 기본 자료형 이외에 객체 자료형을 제공한다. 자바스크립트에서 객체란, 키 와 값으로 이루어진 자료형이라고 할수 있다. 예를 들어보자. 기본 자료형의 경우 const name = "Sam"; const age  = 20; 나이와 이름을 각각 변수에 저장해야 된다. Sam 의 나이가 20살인지 엮어서는 알 수 없다. 하지만 객체를 사용하면 하기 처럼 정의 와 선언이 가능하며, Sam 의 나이가 20살임을 알 수가 있다.  const person = {     name : "Sam",     age : 20 }; 객체 내부 속성들은 키:값 으로 구성되어 진다. 내부 속성에는 모든 자료형이 올 수 있다. 이렇게 객체를 만드는 방식을 "객체 리터럴" 이라고 말한다. 객체를 리터럴 방식으로 만들었으니, 이제 객체의 값을 가지고 와보자. 1. 객체 값 가지고 오기. person 이란 객체를 만들었으니 이제 여기서 이름과 나이를 가지고 오자. 값을 가지고 오기위해서 키를 활용한다.     //객체 리터럴로 객체를 생성함.     const person ={       name : "Sam" ,       age : 20 ,     }     console . log ( person . name );     console . log ( person [ "age" ]); 키를 활용하는 방법은 두가지가 있다. 객체명.키  객체명["키"]  2. 함수와 배열, 객체 등의 값도 가져올수 있다. 객체의 속성에 배열,함수 그리고 객체를 추가해본다.   const person ={       name : "Sam" ,       age : 20 ,       ps : [ 123 , 345 , 678 ], //배열       num : function (){ //메서드(함수)         return this

  자바스크립트에서 HTML 요소에 접근하는 여러 방법 중 getElementById() 함수를 알아본다. document 객체의 메서드인 getElemntById()는 인자로 가지는 id 속성과 일치하는 html element 요소 하나를 반환해준다.   < p id = "demo" ></ p >   < script >       console . log ( document . getElementById ( "demo" ));   </ script > 위 예제와 같이. demo 라는 id 속성을 가진 요소를 웹문서에서 찾아서 그 값을 반환해준다. 콘솔 로그에 출력되는 값은    < p id = "demo" ></ p > 해당 요소 하나가 된다. id 속성값은 웹문서 상 하나만 가지는 식별자이기에 특정 요소 하나만을 지정할 때 유용하다. 추가로, innerHTML 속성에 값을 추가하면   document . getElementById ( "demo" ). innerHTML = "Hello World" ; 해당 요소에 콘텐츠 부분이 Hello World 로 수정되며 브라우저 상에 출력된다.

  자바스크립트 에서 HTML요소로 접근하는 방법 중 하나인 document.getElementsByTagName() 메서드 이다. 바로 코드이다.   < h1 > The Document Object </ h1 >   < h2 > The getElementsByTagName() Method </ h2 >   < p > An unordered list </ p >     < ul >       < li > Coffee </ li >       < li > Tea </ li >       < li > Milk </ li >     </ ul >     < p > The innerHTML of the second li element is </ p >     < p id = "demo" ></ p >     < script >       const collection = document . getElementsByTagName ( "li" );       document . getElementById ( "demo" ). innerHTML = collection [ 1 ]. innerHTML ;     </ script > 역시 가장 중요한 것은  document . getElementsByTagName ( "li" ); 메서드 이고, 인자 값으로 HTML 태그 명을 적어 준다. HTML문서 안의 모든 li 태그 값을 찾아달라는 의미이다. 반환 값은 지난 시간 살펴본 것 과 같이 HTMLCollection 객체를 가진다. 배열과 유사한 형태를 가진 객체 이다. 자바스크립트 요소 접근 방법 getelementsbyclassname() collection[1].in

   자바스크립트에서 브라우저 창을 닫는 코드 이다. 창을 닫는 예제를 위해서 버튼을 우선 만든다. 버튼에 onclick 속성을 준다. 웹 브라우저 창을 닫는 자바스크립트 핵심함수는 바로 window.close() 이다.    < button onclick = " window . close ()" > 창닫기 </ button > 해당 함수를 실행하면 브라우저 창은 닫힌다. 자바스크립트 창 열기와 같이 연관해서 코드를 이해하면 좋다. 자바스크립트 창 열기

  자바스크립트에서 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 값이 양수 값일때는 순서를 그대로 배치하고 음수 일때는 순서를 바꾼다.  이는 숫자 콜백함수 구현때와