안녕하세요
인포돈입니다.
초보자를 위한 자바스크립트입니다. 코딩 초보자, 일반인, javascript를 처음 접하시는 분들에게 추천드립니다.
시리즈 별로 조금씩 학습해보면 일주일 안에 javascript가 무엇인지 알게 되는 경험을 할 수 있습니다.
지금 바로 시작합니다.
* 참고사항
- 개발환경은 Atom을 기준으로 작성되었습니다.
- 웹 브라우저는 크롬을 기준으로 작성되었습니다.
- javascript 시리즈는 웹에서의 활용을 집중적으로 다루어 나갑니다.
1. 코드 검색 방법
오늘 강좌에 앞서서 하나의 코드를 먼저 보여드리겠습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> test web</h1>
<p> When selling whale Tokens, the seller first takes half of
the cost of each sold token from the general supply.
This money can immediately be used for other whales on the same
or another ship. </p>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
">
</body>
</html>
이해 못하셔도 괜찮습니다. 하나씩 이해하시면, 별거 없습니다.
<h1>, <p> 태그의 경우 html 문법임으로 따로 신경 쓰지 않으셔도 됩니다.
저희가 집중해야 될 것은 바로 <input> 태그입니다.
해당 코드를 실행하면 다음과 같은 실행 환면이 됩니다.
night 버튼을 누르면 화면이 검게 변하고 글씨는 하얗게 변하죠. 다시 day버튼을 누르면 화면은 하얀색, 글씨는 검은색으로 변하게 됩니다.
type="button" : 버튼 생성 코드
value="night" : 버튼의 값을 night로 설정하는 코드
onclick : event 코드
임을 알 수가 있죠. 이제 안에 문법에 대해서 이해하시기 전에 모두들 검색을 해보시면 됩니다.
배경색을 설정하기 위해서는 어떻게 검색하셔야 될까요?
저였다면, "javascript background color"이렇게 검색을 해볼 수 있겠죠
검색해보시면, 아무 곳이나 들어가서 조금만 살펴보시면 배경을 바꾸는 코드가 있습니다.
document.querySelector('body').style.backgroundColor = 'black';해당 코드가 바로 배경 색을 바꿔준다고 합니다. (정확히 document가 무엇인지 아직 모르셔도 됩니다.)
이후 배경을 바꿨다면, 글씨 색을 바꾸는 것은 검색해볼 수 있습니다.
텍스트 한하나를 element라고 칭하기도 합니다. 그래서 저는 이번에는 "javascript element color"라고 검색을 해보겠습니다.
document.querySelector('body').style.color = 'white';해당 코드르 통해서 글씨의 모든 색을 변경할 수 있습니다.
지신이 검색해서 찾은 코드가 해당 코드와 다르다고요?? 네 당연히 그럴 수 있습니다. 글씨를 바꾸는 방법은 굉장히 여러 개죠. 제 방식이 아니어도, 텍스트의 글씨를 바꾸는 방법은 굉장히 여러 개입니다. 꼭 제 코드를 안 따라 하셔도 됩니다.
여기서 중요한 것은 바로 검색을 통해서 원하는 기능을 찾았다는 것입니다.
2. 조건문
저희가 이전 data type에 대해 학습할 때 Number, String에 대해서 집중적으로 알아보았습니다. 이번에 조건문과 함께 배울 datatype은 바로 Boolean 해당 학습이 기억이 안 나실 경우 아래 링크를 통해서 다시 살펴보고 오시면 됩니다.
초보자를 위한 기초 7일 완성, 자바스크립트 강좌(Javascript) - 2 (DataType, 메소드, parseFloat, isFinite, pa
안녕하세요 인포돈 입니다. 초보자를 위한 자바스크립트입니다. 코딩 초보자, 일반인, javascript를 처음 접하시는 분들에게 추천드립니다. 시리즈 별로 조금씩 학습해보면 일주일 안에
infodon.tistory.com
자 그럼 저희는 왜?, 조건문을 써야 하는지부터 알아보아야 합니다.
<script>
document.write("1<br>");
document.write("2<br>");
document.write("3<br>");
document.write("4<br>");
</script>간단한 예제를 볼 수 있습니다. document.write가 무슨 의미인지 모르겠다고요? 저희가 배운 검색을 이용하시면 됩니다.
document.write는 해당 안의 텍스트를 웹 페이지에 써주는 것을 의미하죠. (javascript문법을 통해서입니다.)
해당 코드는 1 ~ 4까지의 숫자가 화면에 나타나게 됩니다.
만약 숫자 만약 어떠한 조건이 있을 때는 2를 어떠한 조건이 있을 때는 3을 출력하고 싶다면, 바로 조건문을 이용해야 합니다.
<script>
document.write("1<br>");
if(true){
document.write("2<br>");
} else { document.write("3<br>");
}
document.write("4<br>");
</script>해당 코드는 항상 3 대신 2를 표시하는 조건문이라고 볼 수 있습니다.
그렇다면 조건문을 나타내는 문법은 if임을 알 수 있습니다. 괄호 사이에 있는 true가 바로 조건을 의미하게 되죠
이때, 저희는 Boolean타입으로 작성을 해야 하죠.
3. 비교 연산자
조건문을 작성하기 위해서 Boolean타입을 작성해 주어야 합니다. 그러면 Boolean을 나타낼 수 있는 비교 연산자에 대해서 알아봐야 합니다.
1) < : 왼쪽의 값이 오른쪽보다 작다.
2) > : 왼쪽의 값이 오른쪽보다 크다.
3) === : 왼쪽과 오른쪽의 값이 같다.
간단히 3가지의 비교 연산자를 기억하고 가시면 됩니다.
4. 조건문 활용
저희가 배운 조건문을 처음에 배웠던 코드에 적용시켜보겠습니다. night와 day를 합치는 과정입니다.
가장 먼저 해야 할 일은 바로 어떤 조건을 통해서 코드를 합칠지입니다.
여러 가지가 있죠, 배경색, 글씨 색, 버튼 이름 등을 비교해서 조건을 제시할 수가 있죠.
저는 버튼 이름을 통해서 night와 day를 합쳐보겠습니다.
그럼 검색해야겠죠. 버튼의 이름을 value="night"라고 설정하는 것은 앞에서 배웠습니다.
그럼 value 값을 가져오는 법은 검색하기 쉽죠 "javascript get value"
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> test web</h1>
<p> When selling whale Tokens, the seller first takes half of
the cost of each sold token from the general supply.
This money can immediately be used for other whales on the same
or another ship. </p>
<input type="button" value="night" onclick="
if(document.querySelector('input').value==='night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
} else{
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
}
">
</body>
</html>
해당 코드를 조건문을 통해 하나의 버튼으로 통합했습니다.
그러나 아직 오류가 남아있죠! night로 바뀐 버튼이 계속 night로 남아있어 다시 눌러도 day로 넘어가지 않습니다.
이때 저희는 검색보다 좀 더 다른 활용을 사용해 볼 수 있습니다.
어? 저희가 조건에서 value를 가져왔는데? 그곳에다가 바로 '='(대입 연산자)를 사용해 넣으면 되지 않을까?
네 맞습니다.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> test web</h1>
<p> When selling whale Tokens, the seller first takes half of
the cost of each sold token from the general supply.
This money can immediately be used for other whales on the same
or another ship. </p>
<input type="button" value="night" onclick="
if(document.querySelector('input').value==='night'){
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('input').value = 'day';
} else{
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('input').value = 'night';
}
">
</body>
</html>이제는 완벽한 코드가 되었습니다. 실행 화면을 보며, 자신감을 한번 가지고 가시길 바랍니다. 고생하셨습니다.
처음 보는 코드 절대로 두려워하지 마세요. 저희는 지금 엄청나게 많은 데이터를 축적해두고 있는 인터넷이란 게 존재하는 세상입니다. 옛날 서적을 뒤적이며, 원하는 코드를 찾았던 시대가 아니고요.
좋은 세상입니다. 절대로 두려워하지 마시고 찾으시면 됩니다. 처음에 뭐라 검색해야 할지 막막할 수도 있습니다. 그러나 시도해 보아야 합니다. 생각나는 단어 무엇이라도요.
