16. JS실습

https://www.opentutorials.org/course/1688/9381


1) JavaScript 실습1


JavaScript가 HTML을 프로그래밍 쪽으로 제어하는 언어라는 것을 이해하자!


이벤트 프로그래밍

- 사건이 일어났을 때 어떤 코드가 실행되어야 한다는 것을 브로우저에게 명령해 놓는 것

사건의 예 : 사용자의 마우스가 움직이는 사건, 사용자가 버튼을 누르는 사건

- onclick, onfocus, onblur 등은 웹 브라우저에 약속되어 있는 이벤드들이고, 이 속성들은 속성 값으로 JavaScript 코드를 취한다.



2) JavaScript 실습2


사용자가 입력한 값을 알림창에 띄우자!


1.html

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<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>
cs




3) JavaScript 실습3


            


        

'html'과 '수아'이라는 두 개의 태그에 대해서만 무언가를 하고 싶을 때

- 두 개의 태그를 하나로 그룹핑(→ 클래스)


클래스

- class 선택자는 '.'

- 같은 태그에만 지정할 필요는 없다.

                        


    →      

JavaScript코드로 HTML을 제어할 수 있다.

- '강조' 버튼을 클릭하면 onclick 속성 값인 JavaScript 코드가 실행된다.
  이것을 웹 브라우저의 개발자 도구로 보면, 버튼을 눌렀을 때 <ol> 태그의 class 속성이 추가되는 것을 확인할 수 있다.


※ 정리

CSS : HTML을 디자인하는 언어

JavaScript : HTML을 제어하는 언어


2.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <style>
      .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='em'"/>
  </body>
</html>
cs



4) JavaScript 실습4

.html 파일                                                                                                                                              style.css

            

<div> 태그

- division : 영역을 나누다

- 어떤 태그와 태그를 그룹핑해서 CSS적인 효과를 주기위해 사용하는 태그

- 어떤 태그들을 묶어주는 역할


index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body id="target">
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <div id="control">
      <input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
      <input type="button" value="black" onclick="document.getElementById('target').className='black'"/>
    </div>   
  </body>
</html>
cs


page_html.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body id="target">
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <div id="control">
      <input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
      <input type="button" value="black" onclick="document.getElementById('target').className='black'"/>
    </div>   
    <article>
      <h2>JavaScript란?</h2>
      JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
    </article>
  </body>
</html>
cs


page_op.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body id="target">
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <div id="control">
      <input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
      <input type="button" value="black" onclick="document.getElementById('target').className='black'"/>
    </div>   
    <article>
      <h2>연산자</h2>
      계산을 할 때 사용되는 것입니다.
    </article>
  </body>
</html>
cs


page_vc.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body id="target">
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <div id="control">
      <input type="button" value="white" onclick="document.getElementById('target').className='white'"/>
      <input type="button" value="black" onclick="document.getElementById('target').className='black'"/>
    </div>       
    <article>
      <h2>변수와 상수</h2>
      변수는 바뀔 수 있는 값이고, 상수는 바뀌지 않는 값입니다.
    </article>
  </body>
</html>
cs


style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body.white{
  background-color:white;
  color:black;
}
body.black{
  background-color:black;
  color:white;
}
header{
  border-bottom:1px solid gray;
  padding:20px;
}
nav{
  border-right:1px solid gray;
  width:200px;
  height:600px;
  float:left;
}
nav ol{
  list-style:none;
}
article{
  float:left;
  padding:20px;
}
#control{
  float:right;
}
cs



5) JavaScript 실습5


※ 집중 포인트

HTML과 HTML이 아닌 것들을 분리해서 HTML을 정보로써 더 가치있게 만드는 것

중복되는 코드는 중복을 제거해서 유지 보수, 속도 등 여러 가지 면에서의 장점이 생기는 것 


(실습은 간단히 index.html만 진행)


index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <link rel="stylesheet" type="text/css" href="/style.css">
  </head>
  <body id="target">
    <header>
      <h1><a href="/">JavaScript</a></h1>
    </header>
    <nav>
      <ol>
        <li><a href="/page_html.html">JavaScript란?</a></li>
        <li><a href="/page_vc.html">변수와 상수</a></li>
        <li><a href="/page_op.html">연산자</a></li>
      </ol>
    </nav>
    <div id="control">
      <input type="button" value="white" id="white_btn"/>
      <input type="button" value="black" id="black_btn"/>
    </div>
    <script src="/script.js"></script>
  </body>
</html>
cs


script.js

1
2
3
4
5
6
7
8
9
wbtn = document.getElementById('white_btn');
wbtn.addEventListener('click', function(){
  document.getElementById('target').className='white';
})
      
bbtn = document.getElementById('black_btn');
bbtn.addEventListener('click', function(){
  document.getElementById('target').className='black';
})
cs



6) 활용(disqus, tawk)

disqus, LiveRe(국내서비스)

- 댓글 기능


tawi, sendbird(국내서비스)

- 채팅 기능


저작자표시 비영리 변경금지

'컴퓨터 > 웹 개발' 카테고리의 다른 글

[코딩야학] ~ DB이론 - 15일차  (0) 2017.08.08
[코딩야학] ~ PHP 실습 - 13,14일차  (0) 2017.08.08
[코딩야학] ~ 프로그래밍 접근방법 - 10일차  (0) 2017.08.01
[코딩야학] ~ 배열 - 9일차  (0) 2017.07.31
[코딩야학] ~ 로그인기능 - 8일차  (0) 2017.07.31

+ Recent posts

티스토리툴바