Write and Make

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