#지난강의
[왕초보 코딩 3강] 나도 프로그래머가 될 수 있을까
안녕하세요. 금방 다시 인사드리네요. ㅎㅎ 아무도 안 보는데 혼자 인사중.. 안타깝게도(?) 제가 시간이 많아서 바로 강의 하나를 더 올릴 수 있게 됐어요. 혹시 2강에서 벌써 좌절하신 분 계신가
sangminem.tistory.com
이 글을 우연히 보고 들어오신 분이 대부분이겠죠?
만약 꾸준히 공부할 마음이 생겨서 일부러 찾아 오신 분이라면 책임지고 끝까지 가르쳐 드리겠습니다.
열정만큼은 이미 합격입니다.
코딩 별거 없습니다 믿고 따라오세요.
물론 어쩌다 보신 분도 공부할 마음이 생기셨다면 환영합니다.
앞서 배웠던 내용을 떠올려 볼게요.
html은 웹 페이지의 기본 뼈대를 구성하고 JavaScript는 웹에서 일어나는 동작을 구현하는 언어입니다.
지난 강의 때 웹 브라우저에 글을 띄우고 버튼을 하나 만들어 봤는데 버튼을 클릭 해도 전혀 동작하지 않는 빈 껍데기였죠.
클릭했을 때 반응이 있어야 버튼 아니겠습니까!
그런데 그걸 어떻게 할까요..?
그 역할을 JavaScript가 합니다.
결국 코딩 다운 코딩은 지금부터예요.
정신 바짝 차리고 갑시다.
참고로 모든 웹 브라우저는 사람이 작성한 html과 JavaScript 언어를 컴퓨터가 알아들을 수 있게 해석하는 인터프리터(Interpreter)를 내장하고 있어서 우리가 작성한 프로그램이 동작할 수 있습니다.
혹시 C 언어, JAVA 언어도 들어보셨나요?
못 들어보셨어도 괜찮습니다.
JavaScript와 세부적인 개념, 동작 원리는 다르지만 많은 프로그래밍 언어에 영향을 끼친 대표적인 언어이기 때문에 문법이 상당히 비슷합니다.
그래서 하나의 프로그래밍 언어에만 익숙해지면 다른 언어도 수월하게 배울 수 있습니다.
처음부터 여러 언어를 다 해야겠다는 욕심은 부리지 않는 것이 좋습니다.
다른 언어를 배우는 것은 시간 문제일 뿐이고 논리적인 사고력을 기르는 것이 더 중요합니다.
처음 배울 때 마음가짐이 중요하다고 생각해서 이런 저런 얘기를 해 드린거니 지루해 하지 마시고 꼭 새겨 들으셨으면 합니다.
자 이제 시작합니다.
지난 시간에 작성했던 내용을 소환해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>coding test</title>
</head>
<body>
안녕 웹 브라우저야! 난 컴퓨터 왕초보인데 너에게 첫마디를 건내다니 영광이야 :)
<br>
<input type='button' value='혹시 여기가 어딘지 알아?'>
</body>
</html>전체적인 뼈대는 html 안에 head와 body로 이루어지구요.
head 안의 title 태그 사이에는 웹 페이지의 제목이 들어갑니다.
그리고 body 태그 사이가 바로 메인 내용이 구성되는 부분입니다.
빈 껍데기 버튼도 여기에 포함되어 있구요.
우리가 생명을 부여해야 할 대상입니다.
JavaScript 작성법에는 여러가지가 있는데 지금 다 알려드리면 부하가 걸릴 수 있으므로 일단 가장 간단한 방법으로 말씀드리겠습니다.
다른 방법은 익숙해진 뒤에 알아도 상관없습니다.
head 태그 부분에 script 태그를 추가해주세요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>coding test</title>
<script>
// 지금부터 여기에 작성할 겁니다
</script>
</head>
<body>
안녕 웹 브라우저야! 난 컴퓨터 왕초보인데 너에게 첫마디를 건내다니 영광이야 :)
<br>
<input type='button' value='혹시 여기가 어딘지 알아?'>
</body>
</html>딱! 지금까지는 기존에 알고있던 html 언어에서 벗어난 부분이 없습니다.
단, script 태그 사이에 '// 어쩌구'는 JavaScript 언어의 주석 표기법입니다.
html 언어의 <!-- 어쩌구 --> 와 동일하게 설명을 위해 사용되었습니다.
하지만 이제 <script>와 </script> 사이에 html 언어와는 전혀 다른 언어를 기술할 겁니다.
바로 귀가 닳도록 말한 JavaScript입니다.
용도도 다르고 문법도 전혀 다릅니다.
script 태그를 사용하여 명시해줌으로써 html 프로그램 내부에 완전히 다른 영역이 열린겁니다.
영어만 알던 학생이 중국어를 배우는 자세로 다시 새로운 언어를 공부하여야 합니다.
html 슬쩍 맛본지 얼마나 됐다구 ㅜㅜ
어렵지는 않습니다 걱정하지 마세요.
저는 기본부터 차근차근 알려준답시고 즉시 사용하지도 않을 문법부터 알려주는 비효율적인 짓(?)은 하지 않겠습니다.
그런 강의는 찾아보면 많이 있습니다.
우리의 목표는 버튼에 생명을 불어 넣어주는 것이고 이를 위한 문법이 우선입니다.
버튼을 클릭하면 "여기는 크롬이야" 라고 응답하는 알림 창을 띄워 보는 것을 목표로 하겠습니다.
다음과 같이 추가합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>coding test</title>
<script>
// test라는 이름의 함수를 만듭니다
function test(){
// 함수 내부입니다
}
</script>
</head>
<body>
안녕 웹 브라우저야! 난 컴퓨터 왕초보인데 너에게 첫마디를 건내다니 영광이야 :)
<br>
<input type='button' value='혹시 여기가 어딘지 알아?'>
</body>
</html>드디어 script 태그 안에 JavaScript 언어를 처음 작성했네요.
축하드립니다.
슬슬 새로운 문법이 등장하니까 머리 아파지기 시작하죠.
겁먹을 필요는 없습니다.
차근차근 볼게요.
먼저 function은 어떤 기능을 하는 하나의 덩어리를 나타내기 위한 키워드라고 보시면 되는데요.
우리는 그 덩어리를 '함수'라고 부릅니다.
수학에서의 '함수'와 비슷한 의미로 쓰인건데 지금은 잘 모르시겠죠.
덩어리의 이름을 test로 지정해 주었구요.
약간의 제약이 있지만 원하는 이름으로 지정 가능합니다.
거기에 따라붙는 ()는 일단 외우고 넘어가겠습니다.
지금은 function을 표현하기 위한 문법이라고만 생각해주세요.
마지막으로 {} 안에 덩어리의 기능을 기술해줍니다.
다시 말하지만 '// 어쩌구'는 설명을 위한 주석이므로 헷갈리신다면 없는 셈 쳐주세요.
아까 뭐라고 했었죠.
그렇죠 버튼을 클릭하면 '여기는 크롬이야' 라고 알림 창을 띄우기로 했습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>coding test</title>
<script>
function test(){
alert('여기는 크롬이야'); // 추가된 부분
}
</script>
</head>
<body>
안녕 웹 브라우저야! 난 컴퓨터 왕초보인데 너에게 첫마디를 건내다니 영광이야 :)
<br>
<input type='button' value='혹시 여기가 어딘지 알아?'>
</body>
</html>{}안을 주목해 주세요.
alert가 보이시죠?
이건 알림 창을 띄울 목적으로 JavaScript 언어에서 미리 정해놓은 기본 기능입니다.
그리고 () 안에는 알림 창에 표현할 내용을 기술해 주었습니다.
마지막에 붙는 ;(세미콜론)은 한 구문이 끝났다는 의미로 사용합니다.
빼먹으면 에러가 납니다.
최근 버전에서는 에러가 나지 않습니다.
세미콜론이나 줄바꿈 둘 다 구문의 끝으로 판단하도록 개선된 것 같습니다.
허무하지만 고작 이게 '여기는 크롬이야'라는 알림 창을 띄우는 코딩의 끝입니다.
이제 결과를 확인하기 위해 저장하고 test.html을 한 번 실행해 보겠습니다.
기존처럼 Internet Explorer에서 실행하셔도 되지만 저는 이번에는 크롬에서 실행해 볼게요.
각자 원하는 곳에서 실행해보세요.
Internet Explorer에서 실행한 경우와 거의 비슷한 형태로 보이죠?
이제 버튼을 한 번 클릭해보겠습니다.
어라 클릭해도 반응이 없네요?
이거 순 돌팔이 아냐?
죄송합니다 한 가지 빼먹었어요.
당연합니다.
우리가 기능만 정의했지 버튼과 그 기능을 연결시키지는 않았어요.
이제 마지막으로 그 작업을 해보겠습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>coding test</title>
<script>
function test(){
alert('여기는 크롬이야');
}
</script>
</head>
<body>
안녕 웹 브라우저야! 난 컴퓨터 왕초보인데 너에게 첫마디를 건내다니 영광이야 :)
<br>
<input type='button' value='혹시 여기가 어딘지 알아?' onclick='test()'> <!-- 수정된 부분 -->
</body>
</html>어느 부분이 바뀌었는지 보이시나요?
네 맞습니다.
input 태그에 속성으로 onclick 부분이 추가됐어요.
클릭을 했을 때 무엇을 할 건지 정의하는 부분입니다.
직관적으로 무슨 의미인지 감은 잡히시죠?
우리가 작성한 function의 이름을 onclick 값으로 'test()'와 같이 할당했습니다.
아까와 마찬가지로 ()는 그냥 외우고 넘어갑니다.
이제 다시 저장하고 실행해볼까요.
짜잔~ 버튼을 클릭 하니 드디어 웹 브라우저가 원하는 반응을 보였습니다!
오오
경험치가 +1 상승했습니다.
다시 정리를 해보겠습니다.
우리는 html 언어로 프로그램 기본 틀을 작성했고 script 태그를 추가하여 html 내부에 JavaScript 언어를 기술했습니다.
JavaScript 언어로는 function 키워드로 알림 창을 띄우는 기능을 만들었고 마지막으로 input 태그 내 onclick 속성에 우리가 만든 function을 연결했습니다.
참 잘 하셨습니다.
프로그래밍 생각보다 안 어렵죠?
앞으로도 저만 믿으시면 됩니다.
다음 강의 때는 JavaScript 언어로 좀 더 다양한 기능을 만들어 보겠습니다.
기대하세요!
그럼 우리 계속 파이팅 할까요?
지적이나 질문은 댓글로 부탁드릴게요!
[참고]
컴퓨터가 이해할 수 있도록 해석하는 프로그램에는 인터프리터 외에 컴파일러(Compiler)도 있는데 궁금하신 분은 아래 링크 참고해 주세요.
컴파일러와 인터프리터의 차이
컴파일러 고급언어로 쓰여진 프로그램이 컴퓨터에서 수행되기 위해서는 컴퓨터가 직접 이해할 수 있는 언어로 바꾸어 주어야 합니다. 이러한 일을 하는 프로그램을 컴파일러라고 합니다. 번역
hieroglyph.tistory.com
기본부터 학습하는 것이 내 스타일이다 하는 분은 추가로 다른 강의 보시면 되겠습니다.
developer.mozilla.org/ko/docs/Learn/Getting_started_with_the_web/JavaScript_basics
JavaScript 기본
JavaScript (줄여서 "JS")는 HTML 문서에 적용될 때, 웹사이트상에서 동적 상호작용성을 제공할 수 있는 완전한 동적 프로그래밍 언어(dynamic programming language)입니다. 이것은 Mozilla 프로젝트, Mozilla 재단
developer.mozilla.org
#다음강의
[왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트)
지금까지는 내가 얼마나 코딩에 흥미를 느낄 수 있을까 알아보기 위한 시간이었다면 5강부터는 그 흥미를 바탕으로 조금씩 실력을 늘려가는 시간을 가져보도록 할거예요. 이 강의는 자연스럽게
sangminem.tistory.com
'코딩 강의 > 왕초보인데 가능할까요' 카테고리의 다른 글
| [왕초보 코딩 6강] 웹 계산기 만들기 2 - HTML, JavaScript(자바스크립트) (1) | 2020.09.02 |
|---|---|
| [왕초보 코딩 5강] 웹 계산기 만들기 1 - HTML, JavaScript(자바스크립트) (3) | 2020.09.02 |
| [왕초보 코딩 3강] 나도 프로그래머가 될 수 있을까 (4) | 2020.07.11 |
| [왕초보 코딩 2강] 컴퓨터와의 첫 소통 (3) | 2020.07.09 |
| [왕초보 코딩 1강] 코딩의 코자도 몰라도 괜찮을까 (107) | 2020.07.06 |
| [왕초보 코딩 0강] 가르치기에 앞서 (12) | 2020.07.05 |
댓글