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 |
