JavaScript 배우기
앞에서 배운 HTML과 CSS 그리고 JavaScript, 3개의 언어가 모두 더해져서 대부분의 웹페이지가 만들어지는데 HTML의 경우 웹페이지의 기본적인 구조, 뼈대를 담당하고 CSS는 사용자에게 보이는 모든 부분의 스타일을 담당하는데 JavaScript(앞으로 JS라고 부르겠다)의 경우에는 웹페이지가 가질 수 있는 동적인 부분. 즉 애니메이션이나 다른 기능적인 부분들을 구현할 수 있게 해준다. (사실 그것보다는 좀 더 포괄적인 일을 하는게 JS다)
JavaScript의 특징
인터프리터 언어
우리는 기계가 하는 2진수 기반의 언어인 기계어를 이해할 수 없기 때문에 기본적으로 기계어를 번역해주는 프로세스가 반드시 필요한데 이런 역할을 하는 번역기가 바로 컴파일러와 인터프리터이다. JS의 경우 컴파일러가 아닌 인터프리터를 사용하는데 쉽게 말해 문서의 모든 소스코드를 모두 읽어본 후 기계어로 변환해주는게 컴파일러라면, 한 줄씩 읽어 해석하고 실행시키는 번역기가 바로 인터프리터다. 이러한 특징 때문에 JS는 코드를 쓰다가 저장하는 즉시 웹브라우저에 적용되는 모습을 볼 수 있는 것이다.
객체 지향 언어
파이썬이나 Java처럼 JS 또한 객체 지향 언어로 코드를 캡슐화 하고 재사용할 수 있도록 설계되어있는데 사실 중요한건 내가 만든 코드가 다른 코드에게도 영향을 미칠 수 있는지 또, 일회성이 아닌 다회성인지다. 객체라고 얼핏 들으면 무슨말인지 도통 생각이 들지 않을텐데 이런경우 객체 지향 언어가 아닌 절차 지향 언어 같은 경우 객체라는 개념이 없고 변수와 함수가 따로 작성되어 변수 안의 데이터가 보호가 안될 뿐더러 따로 적는 만큼 코드가 길어져 유지 관리도 힘들어 진다. 하지만 객체의 경우 함수와 변수를 함께 가지고 있는 특정 파일 (Java에서는 class라고 한다)을 통해 특정 함수와 변수에 바로 접근이 가능하고 변수 안의 데이터가 객체안에 보호될 수 있기 때문에 더 쉽게 보안 처리를 할 수 있다.
대소문자를 구분한다
그래도 친절한 편에 속하는 JS도 대소문자를 구분하기 때문에 변수나 함수를 만들 때 조심해야하는 부분이다. myPage랑 mypage랑 같다고 생각하면 오산이며 대문자 소문자를 잘 구분해서 작명을 해보도록 하자.
공백 문자 무시
코드 내 공백이 있는 경우 공백은 무시하고 처리한다! 그렇기 때문에 test 1이나 test 1이나 똑같이 보는 것이다.
JavaScript 사용 방법
- JS 또한 CSS를 적용할 때 처럼 JS 또한 적용하는 방식이 3가지가 있다.
HTML 코드에 직접적으로 작성해 적용하는 인라인 JavaScript
<body>
<h2>What Can JavaSCript Do?</h2>
<p id="ts">JavaSCript can Change HTML content.</p>
<button type="button" onclick="document.querySelector('#ts').innerHTML='Hello JavaScript!'"></button>
</body>
HTML 코드 내부에 별도의 구역을 만들어 JS를 사용하는 내부 JS 사용
<head>
<script>
var str01 = "JavaScript";
document.write(str01 + ":")
document.write(typeof str01 + "<br>");
</script>
</head>
외부의 JS파일을 불러와 사용하는 외부 JS 사용
- 이 경우 해당 JS파일의 경로를 잘 표시해야한다.
- 이런 resource 파일 같은 경우 왠만해선 절대경로로 표현하자
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<script src="2.9.js"></script>
</head>
*주석을 다는 방법으로는 //, /* */ 이 있고 //의 경우에는 한 줄, /* */ 로는 범위를 정할 수 있다
자바스크립트의 역할
- 자바스크립트는 기본적으로 클라이언트 사이드의 언어로 본다.
- 백엔드 서버에서는 node.js 모바일
'웹프로그래밍 > JavaScript' 카테고리의 다른 글
드래그 앤 드롭 - JavaScript (0) | 2024.09.02 |
---|---|
JavaScript - 조건문과 반복문 (0) | 2024.08.13 |
JavaScript - 연산자 (0) | 2024.08.13 |