JavaScript 실습



만들 웹 페이지.

while를 누르면 화면이 하얗게

black을 누르면 화면이 검게 



실습 1. 버튼넣기

버튼을 넣기 위해 필요한 코드

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

  • 여기서 마지막 / => 끝나는 태그가 없는 태그에서는 닫는 괄호에 /를 붙여도 되고 안 붙여도 된다. 

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="button" value="white" />
  </body>
</html>

type을 text로 바꾸면


type을 checkbox로 바꾸면




prompt와 alert

<script>
alert("hello world");
</script>

prompt는 입력을 받는 것 까지 포함이지만 alert는 창만 보여준다. 



prompt와 alert는 script 코드 안에서 사용되지만 HTML 코드에서 사용할 수도 있다.

<input type="button" value="white" onclick="alert('Hello world')/>

==> white를 누르면 Hello world가 나온다. 



text 타입에서 활용

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="button" value="white" onclick="alert('Hello world')"/>
    <input type="text" onfocus="alert('focus')" onblur="alert('blur')"/>
  </body>
</html>

text창을 눌러 입력이 시작되기 전에 focus 라고 나오고 입력이 끝나면 blur 라고 나온다 .



실습 2. 왼쪽 빈칸에 입력한 내용이 white 버튼을 누르면 alert 창으로 나오게 하기


<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="text" />
    <input type="button" value="white" onclick="alert('Hello world')"/>
  </body>
</html>

alert 괄호 안에 들어가야 할 내용은 ? 

위의 input에 id 값을 정해주고 

괄호 안에는 id값을 나타내는 태그를 입력하면 된다. 

=> getElementById 이용 (Element == 태그와 같은 의미로 사용된다)

getElementById => document안에 들어가 있다.

작성해야 하는 코드

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="text" id="user_input" />
    <input type="button" value="white" onclick="alert(document.getElementById('user_input'))"/>
  </body>
</html>




이렇게 나온다. 

끝에 .value를 추가하면

추가한 코드 

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <input type="text" id="user_input" />
    <input type="button" value="white" onclick="alert(document.getElementById('user_input').value)"/>
  </body>
</html>


제대로 출력된다. 




  • Ctrl + Alt + 우 화살표 => 편집하는 곳으로 바로 이동한다. 

복습겸

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <style>
      li{
        color:blue;
      }
      ul li{
        font-size:40px;
      }
    </style>
  </head>
  <body>
    <ol>
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
  </ol>
  <ul>
    <li>최진혁</li>
    <li>최유빈</li>
    <li>한이람</li>
    <li>한이은</li>
  </ul>
  </body>
</html>

여기서 html과 최유빈 에만 밑줄을 긋고 싶다면?

=> 그 두 개의 것을 그룹핑(class로 지정하는 것) 하면 된다. 

  <ol>
      <li class="em">html</li>
      <li>css</li>
      <li>javascript</li>
  </ol>
  <ul>
    <li>최진혁</li>
    <li class="em">최유빈</li>
    <li>한이람</li>
    <li>한이은</li>
  </ul>

여기서 em은 임의로 지정한 것이다. 

CSS에서 설정은

  <style>
      li{
        color:blue;
      }
      ul li{
        font-size:40px;
      }
      .em{
        text-decoration:underline;
      }
    </style>

.은 class를 선택할 수 있게 해주는 것.



실습 3. 강조 버튼을 가장 아래에 만들어서 강조 버튼을 누르면 ol부분에 밑줄이 그어지게 만들기

  1. ol에 id값을 준다.

  1. input에서 이전에 배웠던 것처럼 document.getElementById('id값')을 작성한다.

  1. 그 바로 뒤에 .classname='em'을 작성한다. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <style>
      li{
        color:blue;
      }
      ul li{
        font-size:40px;
      }
      .em{
        text-decoration:underline;
      }
    </style>
  </head>
  <body>
    <ol id="target">
      <li>html</li>
      <li>css</li>
      <li>javascript</li>
  </ol>
  <ul>
    <li>최진혁</li>
    <li>최유빈</li>
    <li>한이람</li>
    <li>한이은</li>
  </ul>
  <input type="button" value="강조" onclick="document.getElementById('target').className"/>
  </body>
</html>


  • 개발자도구는 F12



실습4. 오른쪽 맨 위에 버튼 넣기

위치는 맨 위의 그림에서 JavaScript가 있는 list와  변수와 상수 라는 h2 태그 사이에 있어야 그림과 같은 위치에 넣을 수 있다. 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <input type="button" value="white" />
  <input type="button" value="black" />
  <article>
    <h2>JavaScript란?</h2>
    JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
  </article>
</body>
</html>


버튼 넣기 까지 실습.

두 버튼을 둘다 오른쪽 끝으로 옮기기 위해 하나의 태그로 묶는다 -> div라는 태그 (태그와 태그를 grouping 해서 css적인 효과를 주기 위한 태그.

div의 id값을 주고 그 id값으로 제어한다.

그리고 css 에서 #id값 으로 하면 된다. 




실습 5. 완성


CSS에서 body{ 의 의미 => 화면 전체

body{
  background-color:white;
  color:black;
}
body{
  background-color:black;
  color:white;
}

위의 값은 default 값

black을 누르면 위의 값 실행

white를 누르면 아래 값 실행

=> 위의 코드에서 body.white, body.black 과 같이 해서 지정 가능

=> .은 class 값의 의미

<body class="black"> 으로 body.black 실행 

버튼을 누르면 이 값을 바꾸도록 하게 하자.

input ... onclick = 자바스크립트 문법에 따라 실행시킬 내용

onclick="document.getElementById('target').className='white'

의미해석 : 버튼을 클릭하면 태그 id값이 target인 것의 className을 white로 지정한다. 라는 뜻이다. 



추가

"document.getElementById('target').className='white'

이 코드는 너무 길어서 HTML의 가치를 현저히 떨어뜨릴 가능성이 있다. 

위의 코드를 지우고 거기에 id 값을 준다

  <input type="button" value="white" id = "while_btn"/>
  <input type="button" value="black" id = "black_btn"/>

그리고 닫히는 바디 위쪽에 script 태그를 만들고 그 정보를 넣는다. 

wbtn = document.getElementById('white_btn');
wbtn.addEventListener('click',function(){
    document.getElementById('target).className='white';
})

white_btn이 가리키는 태그를 wbtn이라는 변수에 담고

그 변수에 EventListener를 설치한다. => 이 것은 클릭이 일어나면 function이 포함하고 있는 구문을 실행하라는 의미이다.

마찬가지로 black도 가능

bbtn = document.getElementById("black_btn');
bbtn.addEventListener('click',function(){
    document.getElementById('target').className='white';
})

이런 코드를 모든 파일에 복사 붙여넣기 하면 되는데

중복의 냄새가 난다.

=> CSS처럼 script 파일을 만들어서 저장할 수 있다.

<script src="http://localhost/script.js"></script>
로 쓰고 다 지우고 

이 파일을 생성해서 위의 코드를 넣으면 된다.




'웹 프로그래밍' 카테고리의 다른 글

데이터베이스 MYSQL 이론  (0) 2017.12.23
PHP 실습  (0) 2017.12.22
JavaScript 실습  (0) 2017.12.20
UI vs API  (0) 2017.12.19
함수  (0) 2017.12.19

+ Recent posts