17. Java Script - onclick, document.querySelector

※ 늦게라도 "코딩" 이란 것을 배워봐야 겠다는 사람이 있다면 혹시라도 도움이 될까 해서 나의 경험담을 적어보려 합니다.

지난 회차에 Java Script를 알리는 <script> 태그에 대해서 알아봤습니다.

2022.04.04 - [50대에 코딩에 도전해 봅니다.] - 16. Java Script 태그

16. Java Script - <script> ...</script> 태그

※ 늦게라도 "코딩" 이란 것을 배워봐야 겠다는 사람이 있다면 혹시라도 도움이 될까 해서 나의 경험담을 적어보려 합니다. 지난 회차에 Java Script를 소개하면서 Java Script로 할 수 있는 것들에

pmxsg.tistory.com

이번 회차에는 Java Script 코드를 직접 만들면서 그 코드의 내용을 하나씩 알아보도록 하겠습니다.

>>> Java Script와 HTML의 연결

feat. onclick

HTML는 내용을 작성하는 정보의 역할, CSS는 디자인을 담당하고,

Java Script로는 동작을 구현한다.

JavaScript는 HTML 동적으로 움직이게 할 수 있는 역할을 담당하는데 그 연결하는 고리역할을 HTML의 <input> 태그의 button이 자주 쓰인다.

<input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
  ">

  <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
  ">

위의 코드는 버튼을 클릭했을 때, 웹페이지의 배경색을 검은색으로 글자색은 흰색으로 바꾸는 코드이다.

https://pmxsg.github.io/Web/javascript.html

Making Web

HTML는 내용을 작성하는 정보의 역할, CSS는 디자인을 담당하고, Java Script로는 동작을 구현한다. JavaScript는 세계에서 가장 인기 있는 프로그래밍 언어입니다. JavaScript는 웹의 프로그래밍 언어입니

pmxsg.github.io

1. HTML <button> , <input> 태그 button

1) 버튼 만드는 코드

<input type="button" value="night"></input>
<button>night</button>

어느 태그를 쓰든 상관없습니다. 중요한 것은 이 태그들의 속성 중에 "onclick" 입니다.

<element onclick="script"> 형태로 쓰이는데 의미는 클릭했을 때 script를 실행하라는 의미입니다.

onclick 뒤에는 Java Script 코드가 온다고 생각하시면 됩니다.

input 태그를 쓸 때에는 value값으로 버튼 이름을 표기하고,

button태그는 태그사이에 이름을 쓰시면 됩니다.

2) Java Script 출력

JavaScript를 출력하는 여러가지 방법 중에 많이쓰는 두가지가

1) innerHTML

2) document.write()

입니다.

1) innerHTML

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>JavaScript</title>
	
</head>

<body>
    
    <h1>body 태그 내의 Java Script</h1>
		
	 <p id="demo"> JavaScript는 HTML 콘텐츠를 변경할 수 있습니다</p>            
 <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'> 확인 </button>
</body>

</html>

https://pmxsg.github.io/Web/javascript8.html

JavaScript 소개

Java Script로 할 수 있는 일 JavaScript는 HTML 콘텐츠를 변경할 수 있습니다 확인

pmxsg.github.io

위 코드에서 HTML <p> 태그 (id="demo")를 찾아 안에 있는 내용(콘텐츠/innerHTML)을 "Hello JavaScript"로 변경할 수 있습니다.

{ onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"' }

클릭할 때, demo안의 내용을 "Hello JavaScript!" 바꾸라는 코드 입니다.

2) document.write( )

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>JavaScript</title>
	
</head>

<body>
    
    <h1> 웹페이지 전체를 변경 </h1>
		
	<button type="button" onclick="document.write('Hello JavaScript!')"> 확인 </button>

</body>

</html>

https://pmxsg.github.io/Web/javascript9.html

실행하면 페이지 전체가 바뀝니다. 여기서 document는 페이지 전체를 나타냅니다.

예시 1)에서는 document.getElementById("demo") 페이지전체중에 id가"demo" 인 p태그만 바뀝니다.

2. querySelector

document.querySelector('body').style.backgroundColor = 'black';

Java Script를 실행하려면 실행할 대상을 먼저 정해야합니다.

이 때 사용하는 메소드가 "querySelector", "querySelectorAll" 이 있습니다.

"document"가 페이지 전체를 나타낸다면 '.'을 찍고 querySelector(' 제어대상 ')으로 특정하면 됩니다.

여기서는 body 태그 전체의 배경색을 제어하는 코드를 만들기 위해서 querySelector('body')로 설정하였습니다.

이 '제어대상'에 들어갈 선택자는 CSS 선택자가 그대로 적용됩니다.

2022.02.23 - [50대에 코딩에 도전해 봅니다.] - 9. CSS - 선택자 ( Selector )

9. CSS - 선택자 ( Selector )

※ 늦게라도 "코딩" 이란 것을 배워봐야 겠다는 사람이 있다면 혹시라도 도움이 될까 해서 나의 경험담을 적어보려 합니다. >>> CSS - 선택자 (Selector) 지난 회차에 Float를 이용해서 기존 만들어 왔

pmxsg.tistory.com

CSS 선택자는 HTML 태그, id, class 3가지가 있습니다. HTML태그는 태그이름을 그대로 적용시키면 됩니다.

id인 경우는 id 이름 앞에 '#' 과 함께, Class인 경우는 '.'과 함께 써서 사용하면 됩니다.

document.querySelector('#demo').style.backgroundColor = 'black'; // id=demo 인경우
document.querySelector('.demo1').style.backgroundColor = 'black'; // class=demo1 인 경우

즉 "document.querySelector('body')"는 body태그 안을 제어하겠다고 알려주는 코드입니다.

"querySelectorAll"은 복수의 태그를 지정할 때 사용합니다. 후에 예시가 있을 때 다시 설명하겠습니다.

3. Style 속성

document.querySelector('body').style.backgroundColor = 'black';

위에서 "document.querySelector('body')" 코드로 body태그를 제어대상으로 정했다면,

"style.backgroundColor"은 제어대상인 body의 배경색깔로 제어대상을 보다 세부적으로 확정하는 것입니다.

위 코드는 "웹 페이지내 body태그의 배경색을 검정으로 하겠다." 라는 말을 프로그램 언어로 번역한 것이라고 생각하시면 됩니다.

style다음에는 CSS 속성이 위치하고 이 속성값을 지정해주는 이런 코드가 JavaScript 문법이라고 보시면 됩니다.

document.querySelector('body').style.color = 'white';

또한, 이 코드는 "웹 페이지내 body태그의 글자색을 흰색으로 하겠다." 라는 말을 프로그램 언어로 번역한 것이라고 생각하시면 됩니다.

필요한 CSS 속성은 검색을 통해서 찾아 쓰시면 됩니다.

https://pmxsg.github.io/Web/javascript.html

Making Web

pmxsg.github.io

Full Code를 첨부합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Making Web </title>
<style>
  .container{
      display: flex;
      flex-direction: column;
  }
  header{
      border-bottom:1px solid gray;
      padding-left:20px;
  }
  footer{
      border-top:1px solid gray;
      padding:20px;
      text-align: center;
  }
  .content{
      display:flex;
  }
  .content nav{
      border-right:1px solid gray;
  }
  .content aside{
      border-left:1px solid gray;    
  }
  nav, aside{
      flex-basis: 150px;
      flex-shrink: 0;   
  }
  main{
      padding:10px;
  }
  /* 추가분 */
  .clearfix {
            overflow: auto;
            border: 3px solid #4CAF50;
            padding: 5px;           
            
          }
    #img1{ width : 200px ;
           float:left; 
           margin : 20px;
    }
    #img2{ width : 400px; 
           float: right ; 
           margin : 20px;
    }
</style>
</head>
<body>
    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
  ">
  <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
  ">
  <div class="container">
    <header>
        <h1> Java Script </h1>
    </header>
    <section class="content">
        <nav>
          <ol>
            <li> <a href = "hello.html"> Hello, World! </a> </li>
            <li> <a href = "html.html"> HTML </a></li>
            <li> <a href="internet.html"> 인터넷 과 웹 </a> </li>
            <li> <a href="css.html"> CSS</a> </li>
            <li> <a href="0JavaScript.html"> Java Script</a> </li>
        </ol>
        </nav>
        <main>
            <h2 style="text-align: center;"> Java Script란 ? </h2> 
        <div class="clearfix">
           

          
            <p> 
                HTML는 내용을 작성하는 정보의 역할, <br> CSS는 디자인을 담당하고, <br>
                Java Script로는 동작을 구현한다.</p>

             <p>
                JavaScript는 세계에서 가장 인기 있는 프로그래밍 언어입니다. <br>

                JavaScript는 웹의 프로그래밍 언어입니다.
                <br>
                자바스크립트는 배우기 쉽습니다. <br>
<br>
                Java Script는 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용할 수 있고, 현재 컴퓨터나 스마트폰 등에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터가 내장되어 있다고 합니다.



그만큼 Java Script는 웹상에서는 가장 많이 사용되고 있는 프로그래밍 언어입니다.
             </p>   
            <br>
           
         </div>
          <br>

          <h2> Java Script로 할 수 있는 일</h2>

           <div class="clearfix">
           
            <p id="demo"> JavaScript는 HTML 콘텐츠를 변경할 수 있습니다</p>            
            <button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'> 확인 </button>
          </div>
          <br>
          <div class="clearfix">
            <p>JavaScript는 HTML 속성(attribute) 값을 변경할 수 있습니다.</p>
              <p>이 예제에서 JavaScript는 <img> 태그의 src(source) 속성 값을 변경합니다.</p>

              <button onclick="document.getElementById('myImage').src='pic_bulbon.gif'">Turn on the light</button>

             <img id="myImage" src="pic_bulboff.gif" style="width:100px">

            <button onclick="document.getElementById('myImage').src='pic_bulboff.gif'">Turn off the light</button>
           </div>
<br>
           <div class="clearfix">
            <p id="demo1">JavaScript는 HTML 스타일(CSS)을 변경할 수 있습니다.</p>

            <button type="button" onclick="document.getElementById('demo1').style.fontSize='35px'">Click Me!</button>
             
           </div> 
<br>
           <div class="clearfix">
            <p id="demo2"> JavaScript는 HTML 요소를 숨길 수 있습니다.</p>

<button type="button" onclick="document.getElementById('demo2').style.display='none'"> 숨기기!</button>
 
            
        </div> 
<br>
        <div class="clearfix">
            <p id="demo3" style="display:none">Hello JavaScript!</p>

            <button type="button" onclick="document.getElementById('demo3').style.display='block'">Click Me!</button>
                 
            
        </div> 
        </main>
        <aside>
          <h4 style="text-align: center;"> 코딩공부 참조할 <br>  만한 사이트 </h4>

          <ul>
          <li> <a href="https://www.w3schools.com/">W3Schools</a></li> 
          <li><a href="https://opentutorials.org/course/1">생활코딩</a></li>
          <li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript">Mdn Documents</a></li>
          <li><a href="http://www.tcpschool.com/">tcp School</a></li>
          </ul>


        </aside>
    </section>
    <footer>
        <a href="index.html">홈페이지</a>
    </footer>
</div>
  


</body>
</html>

저작자표시

'50대에 코딩에 도전해 봅니다.' 카테고리의 다른 글

19. Java Script - 변수, this (0)	2022.04.24
18. Java Script - 조건문 if (0)	2022.04.18
16. Java Script - <script> ...</script> 태그 (0)	2022.04.04
15. Java Script 란 ? (0)	2022.03.22
14. 내 컴퓨터에 웹서버 설치하기 (0)	2022.03.18

새로운 세상을 꿈꾸며^&^;

17. Java Script - onclick, document.querySelector

>>> Java Script와 HTML의 연결

feat. onclick

1. HTML <button> , <input> 태그 button

2. querySelector

3. Style 속성

'50대에 코딩에 도전해 봅니다.' 카테고리의 다른 글

댓글

티스토리툴바

17. Java Script - onclick, document.querySelector

>>> Java Script와 HTML의 연결

feat. onclick

1. HTML <button> , <input> 태그 button

2. querySelector

3. Style 속성

'50대에 코딩에 도전해 봅니다.' 카테고리의 다른 글

관련글

댓글

티스토리툴바