반응형

이전 포스팅에서 자비스 직원은 매장 내부에서 물/반찬 추가 요청 직접 수행, 식사 배달하는 역할을 하는 홀 서빙 담당이라고 설명했습니다. 홀에서 일하는 주방장이라고 할 수 있습니다. 커피, 팥빙수 등을 직접 만들어서 제공하기 때문입니다. 이 직원(JavaScript, 자바스크립트)에 대해서 알아보겠습니다. 자바 스크립트는 고수준 언어입니다. 이전 포스틩에서 설명드린 대로 고수준 언어는 저수준 언어보다 사람이 개발하기 쉽습니다. 이전에 보았던 HTML 이나 CSS는 마크업 언어로 어떤 동작이나 계산을 프로그래밍하기보다는 구성과 표현을 정의 할때 사용하는 언어였습니다. 그러나 자바스크립트는 계산과 처리를 중심으로 합니다. 자세히 살펴 보겠습니다.

JavaScript (자바 스크립트) : 홀 서빙 담당-홀 주방장

  • 정의
  • 기본 구조 및 문법
  • 샘플 코딩 해보기


정의

지난 포스팅의 식당 예시에서 자비스(JavaScript)를 정의한 내용은 아래와 같습니다.

  • 자비스 직원이 하는 일은 크게 2가지 입니다. 첫째는 홀에서 손님이 요청한 간단한 서비스를 제공하는 것입니다. 예를 들면 음료수라든가 물 부족한 반찬 등을 요청하면 자비스가 홀에 비치된 냉장고 같은 장치에서 꺼네서 제공합니다. 커피머신이나 빙수기 등 홀에 있는 장비를 이용하여 홀 안에서 고객응대를 잘 합니다. 복잡한 일도 잘 처리하고 미리 준비해 놓지 않아도 고객의 요청이 있으면 그때 그때 홀 장비를 이용해서 잘 처리 합니다.
  • 둘째는 주방에 (때로는 다른 가게에 가서까지) 손님이 원하는 요리를 요청하고 완성된 요리를 손님에게 전달 합니다. 가끔은 추신스 직원이 완성된 요리에 장식을 하기도 합니다.


이것을 웹 어플리케이션 관점에서 자바 스크립트를 다시 자세히 설명 드리겠습니다.

  • 자바 스크립트를 해석하고 실행하는 자바 스크립트 엔진이 모든 웹 브라우저에 있기 때문에 웹 어플리케이션에 가장 많이 사용되는 언어중 하나입니다.
  • 클라이언트에서의 웹페이지의 동작이나 외부 프로그램의 사용이 필요할 때 자바 스크립트를 사용합니다. HTML과 CSS는 정적인데 반하여 자바 스크립트를 이용하면 구성을 변경하거나 속성(위치, 크기, 색상 등)을 바꿀 수 있습니다. 이러한 기능을 이벤트와 연결하면 상황에 따라 바뀌는 홈페이지를 만들 수 있습니다. 예를 들면 마우스가 특정 지역에 들어가면 색상을 바꿀 수 있습니다. 이러한 계산을 위해 클라이언트의 자원(CPU)를 사용합니다. 산술 연산도 가능하고 외부 프로그램(라이브러리)을 이용해서 복잡하고 다양한 계산과 처리도 가능합니다. (이러한 능력 때문에 서버에서도 사용가능하지만 일단 클라이언트에서 사용한다고 생각하겠습니다.)
  • 이런 다양한 기능중 하나가 바로 외부, 특히 서버와의 통신 입니다. 마치 사용자가 주소창에 요청 내용을 입력한 것처럼 자바 스크립트는 서버에 요청을 보낼 수 있습니다. 그리고 응답을 받아서 가공을 할수 있고 이 결과를 가지고 HTML과 CSS 내용을 바꿀 수 있습니다. 그러면 사용자는 바뀌어진 내용을 웹 브라우저에서 볼 수 있게 됩니다.

특징

  • HTML, CSS와 함께 WWW의 핵심 기술중 하나입니다.
  • 세계에서 가장 인기 있는 프로그래밍 언어입니다.
  • 웹의 프로그래밍 언어입니다.
  • 배우기 쉬운 언어입니다.


기본 구조 및 문법

자, 이제 부터는 간단한 기본 구조와 문법에 대해서 알아보겠습니다. 우리의 목표는 JavaScript가 대략 어떤 것인지 이해하는 것이므로 아주 자세한 내용은 생략하겠습니다.

  • 위치와 구성 :
    • <head> 태그 또는 <body> 태그  내부에 위치 할 수 있습니다.
    • 내용은 <script>태그로 시작하고 </script> 로 닫습니다./끝납니다. 프로그램 내용을 이 사이에 정의합니다.
  • 공통 모든 문장의 끝은 ";"세미콜론 으로 끝납니다. 즉, 하나의 문장을 인식하는데 ";"을 이용합니다.
  • 입력/출력 방법 : html 요소, 팝업 메시지 창 등을 통해서 입출력 가능합니다. HTML 전체 내용을 document라는 객체를 통해 자바 스크립트에서 사용할 수 있습니다. 그래서 document를 통해 html 요소에 접근/설정 할 수 있습니다.
  • 변수의 사용이 가능합니다. abc = 1; 이란 명령어는 1을 abc 라는 변수에 할당하라는 명령입니다.
  • 처리 데이터 유형 : 자연수, 실수, 문자열, 리스트 등
  • 데이터 처리 / 연산자 : 사칙연산, 수학 함수, 할당문
  • 처리 흐름 제어문 : 조건문, 반복문, 제어문 등이 있습니다.
  • 함수 : 반복 사용되는 처리에 대한 정의 후 재사용
  • ………
  • HTML 요소와의 연계 : 자바 스크립트는 HTML 요소를 가져오고 변경해서 설정할 수 있습니다. 자바 스크립트 내에서 전체 HTML을 document 라는 친구가 가지고 있다고 생각하시면 됩니다. 그래서 이 친구에게 특정 요소를 가져달라고 하거나 설정해 달라고 할 수 있습니다.
  • 예시로 document에게 id가 id_number_1인 요소를 가져다 달라고 요청하고 결과를 id1 이라는 변수에 할당하려면 다음과이 할 수 있습니다. id1 = document.getElementById("id_number_1");  이렇게 하면 id_number_1 이라는 hrml 요소 전체가 id1에 저장된 것입니다. 그래서 id_number_1 요소의 속성 값들도 모두 id1에 저장되어있습니다. 이런 속성 값을 가져오기 위해 객체 뒤에 '.속성' 으로 값을 가져올 수 있습니다. 예를 들면 id1.value 라고 하면 입력박스(<input>) 요소의 text 값을 가져올 수 있습니다. document에 요청할때 처음부터 값을 요청할 수도 있습니다.( document.getElementById("id_number_1").value)
  • 이렇게 변수에 저장된 값은 이후 다른 계산이나 처리에 이용될 수 있으며 또 다른 요소에게 전달될 수 있습니다. 예를 들어 위에서 가져온 입력박스의 text 값을 해드라인의 text로 설정할 수 있습니다. 예를 들면 id가 out인 해드라인요소에 입력박스에서 가져온 id1.value를 할당 할 수 있습니다. document.getEnementById("out").innerHTML = id1.value;    

샘플 코딩 해보기 - 자바 스크립트 코딩

이제 어떻게 작성하는 지를 알았으니 아래와 같은 요건을 만족 시키는 자바 스크립트를 한번 만들어 보겠습니다. 자바 스크립트도 HTML과 같이 특별한 작성 프로그램이 필요하지 않습니다. 메모장 같은 모든 텍스트 작성 프로그램으로 작성이 가능합니다. 메모장을 열어서 위에서 배운 문법에 따라 자바 스크립트가 포함된 파일을 작성해 보시지요. 메모장이 없으시면 간단한 무료 텍스트 작성기를 다운 받아 사용할 수 있습니다. 여기 링크를 통해 운영체재에 맞는 sublime text라는 택스트 작성기를 다운 받아 사용하실 수 있습니다.

요건

다음의 요건 내용에 맞는 자바 스크립트 코딩을 해보겠습니다. 이전 CSS 때 만들었던 파일에 추가해 보세요. 파일이름을 03_javascript.html 이라고 바꾸어서 저장해주세요.

  • 입력박스 하나를 추가합니다. id를 nemo, value를 "취미코딩은 이렇게 하는 것 "으로 설정합니다.
  • id가 out_text인 해드라인(h2)를 추가합니다.
  • 위 입력박스의 내용에다가 " 입니다."라는 내용을 추가하여 해드라인에 표시합니다. 다시 자세히 말하면 id가 nemo 인 요소의 value를 가져와서 그 내용에 " 입니다."를 추가하여 id가 out_text인 요소의 value로 설정합니다.

취미 코딩 내용

한번 직접해 보셨나요?! 아래는 위의 요건을 이전에 만들었던 CSS 파일에 자바 스크립트 내용을 추가한 내용입니다.

<!DOCUMENT html>
<html>
<head>
<title>Welcome to HTML world!</title>
<style>
body {
background-color: yellow;
}

h1 {
color: blue;
text-align: center;
}
p {
color: orange;
}
</style>
</head>
<body>
<h1>Hello HTML!</h1>
<p>이것은 문단 입니다.</p>
<a href=”https://www.google.com”>Go To Google</a>

<input id="nemo" value='취미코딩은 이렇게 하는 것 '>
<h2 id="out_text"></h2>
<script>
var input_string = document.getElementById("nemo").value;
document.getElementById("out_text").innerHTML = input_string + " 입니다.";
</script>
</body>
</html>

작성 내용 확인

앞에서 작성한 내용을 03_javascript.html 파일로 저장하고 이 파일을 웹 브라우저에서 오픈하면 내용이 잘 작성되었는지 확인 할 수 있습니다.
아래 이미지는 위에서 작성한 코딩 파일을 크롬 브라우저에서 파일 열기를 통해 열었을 때 보여지는 내용입니다.

요약

이처럼 자바 스크립트를 이용하여 웹 브라우저에서 동작하는 많은 일들을 할 수 있습니다. 고수준의 프로그래밍 언어이기 때문에 쉽게 많은 일들을 할 수 있습니다. 위에서도 잠깐 말씀드렸지만 자바 스크립트를 가지고 서버 프로그래밍까지 가능합니다. 프론트엔드 개발에서 로직을 처리하는 부부분은 자바 스크립트가 담당한다고 생각하시면 되겠습니다.

이번 시간에는 JavaScript에 대해서 조금 더 구체적으로 알아 보았습니다. 기본 문법을 배웠고 간단한 요건을 충족시키는 JavaScript를 만들어 보았습니다.
다음 시간에는 서버 프로그램 개발에 사용되는 Python에 대해서 알아보도록 하겠습니다.

질문 댓글은 언제나 환영이며 구독, 좋아요를 눌러 주시면 다음 글을 더 편하게 보실 수 있습니다.

감사합니다.



반응형
저작자표시 비영리 변경금지

'취미코딩' 카테고리의 다른 글

코틀린 입문  (0) 2022.12.22
취미코딩 - Python이란? 파이썬이란?  (0) 2022.04.03
취미코딩 - CSS란?  (2) 2022.04.02
취미코딩 - HTML이란?  (0) 2022.04.02
취미코딩 - 웹 어플리케이션 - HTML, CSS, JavaScript, Python  (0) 2022.04.02

+ Recent posts

티스토리툴바