Javascript
자바스크립트는 무엇일까? HTML은 뼈대, CSS는 스타일이다. 그렇다면 자바스크립트는? 바로, 무언가 동작하는 부분을 담당한다. 동작이라면 무엇을...?
간단하다. 웹사이트에 시계 동작을 본 적 있다면 그것이 바로 자바스크립트로 구성한 객체 중 하나인 것이다.
나는 지금부터 간단하게 내가 만든 웹사이트의 동작을 시작으로 자바스크립트의 기능에 대해 추가로 이어나갈 생각이다. 따라서 이 일지는 계~속 업데이트 될 것이다. 내가 개발자로 남아있는 한
HTML, CSS는 생략하고 이 웹사이트를 보자. 보면 이런 생각이 들 것이다. '아니, 자바스크립트라면서 왜 HTML 페이지를 보여주는거야?' 말은 끝까지 들어봐야한다고 눌러보기 버튼을 눌러보자.
오! 공백으로 두지 말라는 메시지가 나왔다. 자 그럼 비밀번호 입력에 아무것이나 입력해보자.
이번엔 비밀번호가 틀렸다고 나온다. 자, 이제 그럼 마지막으로 올바른 비밀번호를 입력해보자. 비밀번호 내 생일 비밀번호는 1121이다.
'웹사이트에 오신 걸 환영합니다' 라는 문구와 함께 열리는 것을 확인할 수 있다.
그럼 이제 자바스크립트 코드를 확인해보자. 먼저 비밀번호 입력하는 부분의 코드를 보자.
function Require() {
let re = $('#input_name').val()
if(re == '1121') {
alert('웹사이트에 오신 걸 환영합니다!')
$('#csd').show()
} else if(re == '') {
alert('공백으로 두지 마세요.')
} else {
alert('비밀번호가 틀렸어요.')
}
}처음에 나는 자바스크립트를 어려워했다. C와 Java 정도는 해봤지만 자바스크립트는 해본 적이 없기 때문이다. 하지만 기초적인 부분을 배우고 난 뒤 돌이켜보니 그냥 같은 개발 언어라는 것을 느끼게 되었다.
지켜볼 코드는 $('#input_name').val() 정도라고 생각한다.
$('#input_name')은 사실 자바스크립트의 라이브러리다. 자바스크립트를 조금 더 간단하게 쓸 수 있다. 이 라이브러리는 jQuery 라고 하는데 사용하는 방법은 따로 게재하였다.
참고로 자바스크립트 함수는 외우지 않아도 된다. 하지만 자바스크립트의 동작 방식은 알고 있는 것이 좋다.
코드에 대한 해석을 조금만 하자면, re라는 변수를 선언하고 이는 input 타입의 id에 입력받는 값이다. 조건문을 통해 '1121' 이라는 문자열을 받지 않으면 비밀번호의 오류가, 공백을 받으면 공백의 오류가 나도록 설정하였다. 사실 이런 부분을 파이썬으로 코딩하면 굉장히 비슷함을 알 수 있다.
def Require(string):
re = string
if re == '1121':
print('웹사이트에 오신 걸 환영합니다!')
elif re == '':
print('공백으로 두지 마세요.')
else:
print('비밀번호가 틀렸어요.')
num = ''
Require(num)이 코드를 실행하면 '공백으로 두지마세요' 가 출력될 것이다. 이처럼 자바스크립트도 코드만 다를뿐, 동작 원리는 모든 개발언어와 비슷하다고 생각한다.
두번째 동작은 사진과 내용이 없어진 상태에서 보이게 한 것이다. 코드를 보자.
function close_box() {
$('#csd').hide()
}사실 이 부분은 위의 코드에서 살짝 유출되었다.
$('#csd').show()마찬가지로 input 부분을 hide()라는 함수를 통해 이를 close_box()로 지정하고 호출되도록 설정하였다.
자바스크립트는 이런 언어이다. 지금은 이 정도로 알아두고 후에 무궁무진한 자바스크립트의 세계에 대해서 혼자 구글링하고 공부하며 적어나갈 생각이다.
기존에 내가 올렸던 일지를 보면 jQuery를 사용했었다. 이에 대해 조금 더 알아보자.
jQuery
자바스크립트로도 모든 기능을 구현할 수 있다. 하지만 코드가 복잡해지면 구현해지기 힘들어지기 때문에 jQuery 라는 라이브러리가 생기게 되었다.
이전에 웹사이트를 개발할 때 사용했던 jQuery 문법을 보자.
$('#태그id').hide()이것은 jQuery라고 했었다. 이걸 자바스크립트로 쓰면 어떻게 될까?
document.getElementById("태그id").style.display = "none";상당히 길어짐을 알 수 있다. 이제 이 jQuery 사용법을 알아보자. 구글링을 해서 보면 2가지의 방법을 안내한다. 여기서 나는 HTML의 head 부분에 script문을 추가하여 사용하겠다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>이제 예를 들면서 jQuery의 환경에 익숙해져보자. HTML의 코드는 다음과 같고 해당 input 값을 받으면 입력 값을 alert 해주도록 해보자.
<div class="form-floating mb-3">
<input id="url" type="email" class="form-control" placeholder="name@example.com">
<label>영화URL</label>
</div>입력을 받기 위해서는 input 태그 안에 button 태그를 넣어주도록 하자.
<input id="url" type="text" class="form-control" placeholder="text"/> <button onclick="AlertText()">클릭</button>그 다음으로 jQuery는 id로 어떤 태그인지 지정해주는 것이기 때문에 확인해보자.
<input id="url"script 문에 function 함수명() {} 을 하고 해당 코드를 입력하자.
<script>
function AlertText() {
alert($('#url').val())
}
</script>그럼 이제 input 박스에 아무 글씨가 넣고 입력하면 해당 글씨가 alert 될 것이다.
이번엔 예제를 통해 jQuery에 대해 조금 더 익숙해보자. HTML body 부분에 해당 코드를 추가한다.
<body>
<h1>jQuery + Javascript의 조합을 연습하자!</h1>
<div class="question-box">
<h2>1. 빈칸 체크 함수 만들기</h2>
<h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
<h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
<input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>2. 이메일 판별 함수 만들기</h2>
<h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
<h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
<h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
<input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
</div>
<hr />
<div class="question-box">
<h2>3. HTML 붙이기/지우기 연습</h2>
<h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
<h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
<input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
<button onclick="q3()">이름 붙이기</button>
<button onclick="q3_remove()">다지우기</button>
<ul id="names-q3">
<li>세종대왕</li>
<li>임꺽정</li>
</ul>
</div>
</body>head 부분에도 추가한다.
<script>
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
}
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}
</script>이제 문제를 풀어보자. 풀었다면 다음과 같은 코드가 나올 것이다. 참고로 문제마다 했던 부분을 그 다음 문제에 적용시킨 부분도 있다.
function q1() {
// 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
// 2. 만약 입력값이 빈칸이면 if(입력값=='')
// 3. alert('입력하세요!') 띄우기
// 4. alert(입력값) 띄우기
let q1 = $('#input-q1').val()
if(q1 == '') {
alert('입력하세요!')
} else {
alert(q1)
}
}
function q2() {
// 1. input-q2 값을 가져온다.
// 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
// 3. info@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
// 4. alert(도메인 값);으로 띄우기
// 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
let q2 = $('#input-q2').val()
if(q2.includes('@')) {
let domain = q2.split('@')[1].split('.')[0]
alert(domain)
} else if(q2 == '') {
alert('공백입니다.')
} else {
alert('이메일이 아닙니다.')
}
}
function q3() {
// 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
// 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
// 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
let q3 = $('#input-q3').val()
if(q3 == '') {
alert('공백입니다.')
} else {
let temp_html = `<li>${q3}</li>`
$('#names-q3').append(temp_html)
}
}
function q3_remove() {
// 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
$('#names-q3').empty()
}하지만 jQuery 를 무턱대고 공부하는 것보다 자바스크립트의 원초적인 코드작성에 대해 적응해두는 것이 더 좋다. 자바스크립트 자체는 기초 언어이기 때문에 이부터 공부를 시작하고 그 뒤에 파생된 라이브러리를 공부하자. 이 일지에서는 자바스크립트가 웹사이트에서 어떤 동작을 담당하는지에 대해서만 이해를 하고 따로 공부해보자.
