실습1
웹페이지가 갱신되지 않는 분은 아래 댓글을 참고해주세요.
실습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> |
실습3
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> |
참고로 위의 코드에서 onclick 속성의 값인 document.getElementById('target').className='em' 부분이 자바스크립트입니다.
실습4
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"></head><body id="target"> <header> </header> <nav> <ol> </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> |
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"></head><body id="target"> <header> </header> <nav> <ol> </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> |
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"></head><body id="target"> <header> </header> <nav> <ul> </ul> </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> |
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 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html><html><head> <meta charset="utf-8"></head><body id="target"> <header> </header> <nav> <ul> </ul> </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> 변수란 <ul> <li>변하는 값</li> <li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li> </ul> 상수란 <ul> <li>변하지 않는 값</li> <li>x=10일 때 오른쪽 항인 10이 상수가 된다</li> </ul> </article></body></html> |
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.black { background-color:black; color:white;}body.white { background-color:white; color:black;}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;} |
실습5
아래 수업은 실습을 하지 마시고 설명만 들어주세요. 안들어도 됩니다! 왠만하면 듣지 마세요. ㅎㅎ 차라리 아래에 나오는 활용을 보시는 것을 추천드립니다.
Sound of coding
적은 시간으로 공부한 것을 동기화할 수 있도록 제공되는 뮤직 비디오입니다. 전체 뮤직 비디오 보러가기
지금까지 배운 것만으로도 할 수 있는 일
댓글 기능인 disqus, 채팅 기능인 tawk을 여러분의 웹에플리케이션에 붙이는 방법을 알아봅니다. 수업의 흐름과는 무관한 양념 같은 수업입니다. 안 보셔도 됩니다.
- disqus.com, livere.com(국내서비스)
- tawk.to, sendbird.com(국내서비스)
