[JS-기초편] 1.소개

코딩/Javascript

[JS-기초편] 1.소개

드리프트 2020. 12. 13. 21:24

728x170

1. 자바스크립트 소개

HTML은 구조와 내용에 관한 것입니다.

CSS는 HTML을 멋지게 만드는 것입니다.

둘을 잘 조합하면 아주 멋진 사이트를 만들 수 있습니다.

CSS와 HTML만 사용하여 사이트를 구축해도 멋진 사이트를 만들 수 있지만 그 사이트는 매우 정적입니다.

사용자의 행동에 반응하지 않습니다.

마치 재미없는 TV드라마의 재방송을 계속해서 보는 것과 같습니다.

잠시 동안은 재미있지만 결국 지루해집니다.

오늘날 웹은 정적이 아닙니다.

웹은 HTML과 CSS 자체가 제공 할 수 있는 것 이상의 상호 작용과 커스터마이징 기능을 갖추고 있습니다.

콘텐츠가 살아 나게 하려면 외부의 도움이 필요합니다.

이 때 필요한 것이 바로 자바스크립트(JavaScript)입니다!

2. 자바스크립트는 무엇?

JavaScript는 HTML과 CSS의 동료이자 현대적인 프로그래밍 언어입니다.

간단히 말해서 문서에 상호 작용을 추가 할 수 있습니다. JavaScript로 할 수 있는 작업은 다음과 같습니다.

마우스 클릭과 같은 이벤트를 듣고 무언가를 한다.
페이지가 로드 된 후 페이지의 HTML과 CSS를 수정할 수 있다.
화면에서 사물을 움직일 수 있다.
브라우저에서 작동하는 게임을 만들 수 있다.
서버와 브라우저간에 데이터를 주고 받을 수 있다.
웹캠, 마이크 및 기타 장치와 상호 작용할 수 있다.

위 리스트보다 훨씬 더 많은 일을 할 수 있습니다!

JavaScript를 작성하는 방법은 매우 간단합니다.

일상적인 영어와 유사한 단어를 조합하여 브라우저에 무엇을 해야하는지 알려줍니다.

다음은 일반적인 JavaScript의 예입니다.

let defaultName = "JavaScript";

function sayHello(name) {
	if (name == null) {
		alert("Hello, " + defaultName + "!");
	} else {
		alert("Hello, " + name + "!");
	}
}

자바스크립트를 처음 접해서 무슨 뜻인지 모르더라도 걱정하지 마십시요.

일단 코드가 어떻게 생겼는지에만 신경쓰십시요.

function, if, else, alert, name 등과 같은 많은 단어를 볼 수 있습니다.

이런 영단어 외에도 자바스크립트에는 아마 눈치 채지 못할 많은 기괴한 기호와 문자가 있습니다.

곧 그런것들을 충분히 알아 차릴 것이며 이 코드의 모든 것이 무엇을 하는지도 완전히 이해하게 될 것입니다.

어쨌든 지금은 충분한 배경 정보입니다.

이 튜토리얼이 끝날 때 쯤, 브라우저에 텍스트를 표시하는 간단한 것을 만들었으면 합니다.

3. Hello World!

지금 당장은 코드 작성을 시작할 준비가 되어 있지 않다고 느낄 수 있습니다.

일반적으로 프로그래밍에 익숙하지 않은 경우 특히 그렇습니다.

곧 알게 되겠지만 자바스크립트는 그렇게 복잡한건 아닙니다.

The HTML Document

가장 먼저 필요한 것은 HTML 문서입니다.

이 문서는 우리가 작성하게 될 JavaScript 파일을 호스팅합니다.

좋아하는 코드 편집기를 시작하십시오. 없는 경우 Visual Studio Code를 사용하는 것이 좋습니다.

좋아하는 코드 편집기를 시작했으면 계속해서 새 파일을 만듭니다.

Visual Studio Code에서 다음 스크린 샷과 같이 "Untitled-1"이라는 탭이 표시됩니다.

메뉴에서 저장을 눌러 파일 이름을 hello_world.html이라고 지정하고 저장합시다.

그리고 이 파일에 다음 코드를 넣습니다.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello World!</title>

  <style>

  </style>
</head>

<body>
  <script>

  </script>
</body>

</html>

위 HTML코드를 추가 한 후 문서를 저장합니다.

그리고 브라우저에서 이 파일이 어떻게 보이는지 살펴 봅니다.

탐색기에서 hello_world.html 파일을 두번 클릭해서 오픈합니다.

자동으로 브라우저에서 열립니다. 창 이름은 "Hello World!"입니다.

제대로 저장됐고 HTML파일에 오류가 없으면 위와 같이 빈 페이지가 표시됩니다!

빈페이지라고 잘못된건 아닙니다.

아무 내용도 없으니까요.

곧 수정하겠습니다.

이 수정의 핵심은 코드 편집기에서 HTML 하단에 보이는 <script></script> 태그에 있습니다.

<script>
 
</script>

스크립트 태그는 실행하려는 자바스크립트를 내부에 배치 할 수 있는 컨테이너 역할을 합니다.

우리가 원하는 것은 hello, world!라는 단어를 표시하는 것입니다.

이렇게 하려면 스크립트 영역 내에 다음 코드를 추가합니다.

<script>
  alert("hello, world!");
</script>

저장하고 다시 브라우저에서 로드하면 다음과 같은 화면이 보입니다.

축하합니다. 첫번째 자바스크립트 작성입니다. 이제 방금 한 일을 살펴 보겠습니다.

4. 코드보기 : Statement 와 Function

위에서 한 것은 간단한 JavaScript 코드를 작성한 것입니다.

Statement(문장)은 브라우저에 수행 할 작업을 알려주는 논리적 지침 집합입니다.

일반적인 프로그램에는 많은 Statement(문장)가 있습니다. 아직까진 우리의 경우에는 하나만 있습니다.

alert("hello, world!");

마지막 문자를 보면 이것이 Statement(문장)인지 알 수 있습니다.

일반적으로 여기에 보이는 것과 같은 세미콜론 (;)입니다.

Statement(문장) 안에는 모든 종류의 자바스크립트 전문 용어가 있습니다.

"alert"라는 이상한 Statement(문장)가 있습니다.

이것은 일상 세계에서와 마찬가지로 JavaScript 세계에서 유사하게 작동하는 일반적인 영어 단어의 예입니다.

일부 텍스트를 표시하는 역할을 합니다.

더 정확하게 말하면 "alert"라는 단어는 실제로 함수라고 합니다.

함수(Function)는 기본적으로 무언가를 수행하는 재사용 가능한 코드 덩어리이기 때문에 프로그래머는 항상 함수를 사용하는 것이 좋습니다.

함수는 사용자가 직접 만들거나 타사 라이브러리에 의해 정의되거나 JavaScript 프레임워크 자체에 의해 정의 될 수 있습니다.

"alert" 이라는 경고 기능의 함수 코드는 브라우저 내부 깊숙한 곳에 있습니다.

정말 알아야 할 것은 "alert" 함수를 사용하려면 호출하고 표시할 텍스트를 전달하기만 하면 됩니다.

다른 모든 것은 당신을 위해 자동으로 처리됩니다.

예제로 돌아가서 표시하려는 텍스트는 "hello, world!"입니다.

이 텍스트를 어떻게 지정하고 있는지 확인하십시오. 인용 부호 안에 단어를 감쌉니다.

<script>
  alert("hello, world!");
</script>

텍스트(보다 일반적으로 문자열이라고 함)를 처리 할 때마다 항상 작은 따옴표나 큰 따옴표로 묶습니다.

이상해 보이지만 모든 프로그래밍 언어에는 고유 한 특성이 있습니다.

이것은 JavaScript를 더 자세히 살펴보면서 보게 될 많은 단점 중 하나입니다.

조만간 문자열에 대해 자세히 살펴볼 것이므로 지금은 보기만 합시다.

한 단계 더 나가서 "hello, world!"를 표시하는 대신 텍스트를 변경하여 이름을 대신 써볼까요?

<script>
  alert("cpro95");
</script>

아주 간단 하죠? 문자열의 내용은 어떤 걸로도 바꿀 수 있습니다.

결론

이 튜토리얼에서는 JavaScript 코드 작성에 익숙해지는 데 도움이 되는 간단한 예제를 만들어 봤습니다.

익숙해지기 위해 많은 개념과 용어를 던졌습니다.

확실히 여러분이 지금 그것들 모두를 알고 있거나 기억하기를 기대하지 않습니다.

앞으로의 튜토리얼에서는 흥미로운 부분을 골라 더 자세히 설명 할 것입니다.

결국, 대화 상자를 사용하여 일부 텍스트를 표시하는 것 이상의 작업을 JavaScript로 수행하고 싶을 것입니다.

다음 편에는 "변수"에 대해 공부해 봅시다.

그리드형

'코딩 > Javascript' 카테고리의 다른 글

[JS-기초편] 3.함수(Function) (0)	2020.12.14
[JS-기초편] 2.변수(variable)와 값(value) (0)	2020.12.14
자바스크립트 웹 스크래핑 맛보기 - 2편 (0)	2020.12.13
자바스크립트 웹 스크래핑 맛보기 (0)	2020.12.12
자바스크립트 fetch를 이용한 비동기 및 동기방식 프로그래밍의 이해 (0)	2020.12.11

현재글[JS-기초편] 1.소개

드리프트의 코-자-경(코딩, 자동차, 경제)