Write and Make

로그인 폼을 만들어 본다. 아이디 와 패스워드를 입력하는 필드가 있고, 서버 전송을 위한 submit 버튼이 있다. 소스를 보자. < body >   < form action = "#" >     < fieldset >       < legend > 로그인 </ legend >         < input type = "text" placeholder = "id" name = "input_id" >         < br >         < input type = "password"   placeholder = "password" name = "input_pw" >         < input type = "submit" value = "login" >     </ fieldset >   </ form >     < script >     //forms 에 이벤트 리스너를 등록한다.     //submit 이벤트가 발생시 리스너 함수를 실행한다.     document . forms [ 0 ]. addEventListener ( "submit" , function (){           const id = document . forms [ 0 ]. input_id ;       // console.log(`${"id is" + id.value}`);       if ( id . value . trim ()== "" ){ //입력된 값이 없다면         alert ( "id 를 입력하세요" );         id . focus ();

document.form  은 자바스크립트에서 문서에 포함된 모든 <form> 의 HTMLcollection 을 반환하는 속성 이다. 소스를 보자. < h1 > The Document Object </ h1 > < h2 > The forms Property </ h2 >   < p >< form id = "myCarForm" >   Favorite Car: < input type = "text" name = "fname" value = "Volvo" >   </ form ></ p >   < p >< form id = "myColorForm" >   Favorite Color: < input type = "text" name = "favcolor" value = "Blue" >   </ form ></ p >   < p > The name of the form elements in the document are: </ p >   < p id = "demo" ></ p > < script >   const forms = document . forms ;   let text = "" ;   for ( let i = 0 ; i < forms . length ; i ++) {     text +=   forms [ i ]. id + "<br>" ;   }   document . getElementById ( "demo" ). innerHTML = text ; </ script >

  자바스크립트 에서 이벤트 처리 하는 방법 중 하나인 이벤트리스너 등록 편이다. 코드를 보자.   < button > Click </ button >   < script >       const button = document . querySelector ( "button" );     button . addEventListener ( "click" , alertPopup );     function alertPopup (){       alert ( "button click" );     }   </ script > H5 요소로 버튼을 만들었고, 자바스크립트에서는 버튼을 선택자로 접근하였다. 그리고 하기 Syntax 로 이벤트가 등록된다.  요소.addEventListner( "이벤트 타입" , 이벤트 처리 함수 ) "이벤트 타입" 에는 on을 제거한 이벤트 명을 적는다. 앞선 포스팅에서 HTML 속성과 요소의 속성으로 이벤트를 등록할때는 on이벤트 명이였다. 자바스크립트 이벤트 만들기 - 인라인 방식 자바스크립트 이벤트 등록방법 노드요소에 이벤트 함수 등록하기 그리고, 함수는 () 괄호를 넣지 않도록 주의해야 한다. 이벤트리스너를 활용해서 더블클릭 이벤트를 구현하면 하기와 같다.     const doubleButton = document . querySelector ( "button" );     doubleButton . addEventListener ( "dblclick" , alertPopup );     function alertPopup (){       alert ( "double button click" );     } 그러면 이벤트 명을 모두 외워야 하나? 그렇지 않다. 필요한 이벤트가 있다면 웹 검색을 통해서 찾으면 된다. 버튼에 더블이벤

  자바스크립트에서 이벤트를 만드는 방법 중 하나는 바로 HMTL요소 내 이벤트 속성값을 활용하는 방법 이다 코드를 본다.   < p > 버튼 이벤트 입니다 </ p >   < button onclick = " clickButton ()" > Click! </ button >   < script >     function clickButton (){       alert ( "Clicked" )     }   </ script >   1. HTML button 요소에 클릭시 등록된 함수를 실행시키는   onclick 속성을 추가 한다. 2. 자바스크립트 코드에서는 onclick 이벤트가 발생시 수행할 함수를 만든다. 해당 코드에서는 팝업창을 띄울 수 있도록 구현한다.  브라우저에서 확인한 결과는 위와 같다. 

  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