실습1
웹페이지가 갱신되지 않는 분은 아래 댓글을 참고해주세요.
실습2
1.html
<!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
<!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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
<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>
<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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
<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>
<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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ul>
<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>
</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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ul>
<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>
</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
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(국내서비스)
