JavaScript실습
지금 실습을 통해 만들어볼 애플리케이션은 기존에 HTML과 CSS를 사용해 만들었던
JavaScript교육 페이지에 다크모드를 JavaScript를 통해 추가할 예정이다.
버튼 생성
<input type="button" value="white" />위와 같이 input을 통해 button을 생성하고 button의 값으로 white을 입력하면,
white가 적힌 버튼이 생성된다.
type으로 text를 적게 되면, 텍스트가 생성이 된다.
type으로 checkbox를 입력하면, 체크가 가능한 박스가 생성된다.
이렇게 type으로 주는 값에 따라 다양한 타입의 input이 생성된다.
| type | |
| button | |
| text | |
| checkbox | |
경고문
script태그 안에 alert("")을 사용하면, 브라우저에서 경고문이 생성된다.
<script>
alert("Hello World")
</script>
이벤트 프로그래밍
HTML 태그 안에서도 JavaScript언어의 사용 또한 가능하다.
<input type="button" value="white"
onclick="alert('Hello World')" />이렇게 코드를 작성하면, white버튼을 클릭하면 Hello World경고창이 생긴다.
이러한 사용자의 행동을 onclick을 통해 감지했을 때, 클라이언트에서 alert('Hello World')를 기억했다가,
버튼이 클릭되었을 시 실행된다.
onfocus는 사용자가 텍스트를 클릭했을 시 나오는 경고창이다.
또한, 마우스가 텍스트를 클릭하고 다른 곳을 클릭하여 해제를 했을 때, 경고문이 나오게 하는 것은 onblur이다.
<input type="text" onfocus="alert('focus')"
onblur="alert('blur')" />여기 나오는 onclick , onfocus , onblur 들은 웹브라우저와 약속된 이벤트 들이며
그 속성의 값으로는 JavaScript를 사용한다.
좀 더, 응용하여서 사용자가 입력한 값을 경고문으로 활용할 수 있다.
<input type="text" id="user_input" />
<input type="button" value="white"
onclick="alert(document.getElementById('user_input').value)" />이렇게 두 개의 input을 생성한다. 하나는 text타입이고 , 하나는 button타입이다.
text타입의 인풋에는 id를 지정해준다.
button타입의 onclick속성 값으로, document.getElementById('user_input). value)를 입력하면,
document카테고리의 getElementById 함수를 호출한다는 내용이다.
여기서 getElementById는 다른 input의 id를 활용하는 함수이며, 값을 호출해야하기때문에 .value를 붙이면 된다.
그러면 이렇게 text값으로 사용자가 입력한 값을 button을 눌렀을 시 경고문으로 호출이 가능하다.
Class나 id를 사용해서도 input활용이 가능하다.
<!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>이렇게 밑줄을 그어야 하는 태그에 id값을 추가하고, css로 바뀌는 style을 지정해준다.
밑줄은 강조 버튼을 클릭했을 때 그어질 수 있도록, input으로 button을 생성한다.
여기서 onclick으로 document카테고리의 getElementById를 호출한다.
바뀌어야 할 태그는 ol태그이기 때문에, ol태그의 id값인 target을 입력한다.
그리고. className을 사용해 class이름을 em으로 지정을 한다.
그렇게 된다면 css로 em클래스가 지정이 되어있기 때문에, ol태그는 em class가 되어서 밑줄이 생긴다.
이것을 통하여 아주 간단하지만 중요한 사실은
CSS는 디자인을 하며, JS는 제어를 한다는 것이다.
그렇다면, 새로 알아낸 정보를 토대로 JavaScript의 다크 모드 제작을 알아보도록 하자.
일단 DarkMode를 제작하려면 Button이 2개가 필요하다.
하나는 LightMode 다른 하나는 DarkMode이다.
첫째로는 Button의 위치이다.
저 부분에 버튼이 위치해야 하기 때문에, 카테고리 영역에는 접근하면 안 된다.
<!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>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
</ul>
상수란
<ul>
<li>변하지 않는 값</li>
<li>x=10일 때 오른쪽 항인 10이 상수가 된다.</li>
</ul>
</article>
</html>그렇기 때문에 코드상 article태그와 nav태그의 사이에 위치하면 적절하다.
그리고, button이 오른쪽 끝에 위치해야 하기 때문에, 여기서 button을 묶어줄 태그가 필요하다.
그때, 사용하는 태그는 <div> 태그이다.
div태그는 아무런 특징이 없는 태그이다.
css효과를 주기 위한 태그이기도 하다.
<div id="control">
<input type="button" value="Light Mode" />
<input type="button" value="Dark Mode" />
</div>이제는 각 버튼을 눌렀을 때마다 다크 모드와 화이트 모드를 각각 적용해야 한다.
그러기 위해서는, CSS 코드에 Light Mode와 Dark Mode를 만들어 주도록 하자.
body.Light{
background-color: white;
color:black;
}
body.Dark{
background-color: black;
color: white;
}CSS코드에 위와 같이 코드를 추가하였다.
여기서 background-color는 body태그의 배경색을 의미하고, color는 글씨 색을 의미한다.
코드를 확인하면. Light와. Dark로 이루어져 있다.
그렇다면 Light Mode 버튼을 클릭하면 body class가 Light가 되어야 하고,
Dark Mode를 클릭하면 body class가 Dark가 되어야 한다.
그럴 땐 , onclick을 사용해 document.getElementById를 사용하면 된다.
<div id="control">
<input type="button" value="Light Mode"
onclick="document.getElementById('target').className='Light'"/>
<input type="button" value="Dark Mode"
onclick="document.getElementById('target').className='Dark'"/>
</div>이렇게 onclick을 추가해주면 Light Mode를 클릭하면 body class가 Light가 되기 때문에, Light css가 적용이 되고,
Dark Mode를 클릭하면 body class가 Dark가 되기 때문에, Dark css가 적용이 된다.
이렇게 Dark Mode를 구현은 하였지만, 완벽하지 않다.
HTML 코드 사이에 JavaScript코드가 뒤엉켜 있기 때문이다.
좀 더 가독성이 좋고, 깔끔한 코드를 위해서는 JS코드를 분리시켜주는 게 좋다.
Dark Mode에서 사용되는 JS코드는 onclick부분이기 때문에, onclick을 지우고 id값을 달아주도록 하자.
<div id="control">
<input type="button" value="Light Mode" id="Light_btn" />
<input type="button" value="Dark Mode" id="Dark_btn" />
</div>이렇게 각각 버튼에 id값을 설정하였다.
그렇다면, script.js라는 파일을 생성해 자바스크립트 파일에서 동작을 추가한다.
Lbtn = document.getElementById('Light_btn');
Lbtn.addEventListener('click',function(){
document.getElementById('target').className='Light';
})
Dbtn = document.getElementById('Dark_btn');
Dbtn.addEventListener('click',function(){
document.getElementById('target').className='Dark';
})위 코드는 id값이 Light_btn인 태그를 Lbtn이라는 변수에 담고,
그 변수에 EventListener을 추가한다,
EventListener란 Light_btn에 어떤 사건이 생기는지 확인하는 것이다.
어떤 사건인지는 그다음 괄호 안 'click'이라는 사건이고,
클릭을 했을 때, 그다음 중괄호 {} 안의 일을 실행하라는 뜻이다.
그리고 JS파일의 위치를 input 태그의 뒤에 위치해주면 된다.
<script src="http://localhost/script.js"></script>그렇게 각 HTML 파일에도 input의 id값과 JS파일의 위치를 붙여 넣어주면 된다.
이렇게 JS파일과 HTML 파일을 분리를 하게 되면,
만약, Js파일에 Error가 발생해 수정을 해야 하는 상황이 오거나,
먼가 추가해야 하는 상황이 올 때, 모든 HTML 파일의 JS부분을 수정해야 한다.
하지만, 이렇게 파일을 분리하면, 한 번의 수정으로 모든 HTML 파일이 변경된다.
또한 가독성적인 부분에서도 훨씬 코드를 이해하기 수월해진다.
+ 활용
무료 채팅 HTML
100% FREE Live Chat Software, Ticketing & Knowledge Base! - www.tawk.to
tawk.to is 100% free live chat software to monitor and chat with visitors on your website or from a free customizable page.
www.tawk.to
무료 댓글 HTML
Disqus – The #1 way to build your audience
Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising.
disqus.com
출처: [생활코딩]웹 애플리케이션 만들기
'🌐 Web > 웹 애플리케이션 만들기' 카테고리의 다른 글
| 웹 애플리케이션 만들기 [MySQL 이론] (0) | 2022.09.20 |
|---|---|
| 웹 애플리케이션 만들기 [PHP 실습] (0) | 2022.09.18 |
| 웹 에플리케이션 만들기 [JS,PHP 이론] (2) | 2022.09.16 |
| 웹 에플리케이션 만들기 [CSS] (0) | 2022.09.15 |
| 웹 에플리케이션 만들기 [HTML] (0) | 2022.09.14 |
