22.12.21 배운 내용 정리1
자바스크립트와 첫 만남
(자바스크립트로 무엇을 할까, 웹 브라우저가 자바스크립트를 만났을 때,
자바스크립트 용어와 기본 입출력 방법, 자바스크립트 스타일 가이드)
자바스크립트로 무엇을 할까
① 웹의 요소를 제어함
HTML은 웹 문서의 내용을 구성하고, CSS는 웹 문서의 레이아웃이나 색상, 스타일을 지정함.
여기에 자바스크립트를 추가하면 웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있음.
자바스크립트는 HTML이나 CSS와 함께 사용해서 웹의 요소를 움직이는 것처럼 웹 사이트 UI 부분에 많이 활용함.
ex. 웹 사이트에서 메인 메뉴 위로 마우스 포인터를 올리면 숨어 있는 하위 메뉴가 펼쳐지게 함.
ex. 포털 사이트에서 제목이나 화살표 버튼을 클릭하면 고정된 위치에서 새로운 콘텐츠를 보여줌.
ex. 회원 가입 양식 등 사용자 정보를 서버로 전송하는 폼에서 입력된 정보가 형식에 맞는지 체크해줌.
ex. 마우스의 동작이나 키도브에서 어떤 키를 눌렀을 때 반응하는 기능을 제공함.
② 웹 애플리케이션을 만듦
최근 웹은 사용자와 실시간으로 정보를 주고 받으며 마치 애플리케이션처럼 동작함.
웹 브라우저에서 문서도 작성할 수 있고 그림을 그릴 수도 있으며 게임도 할 수 있음.
온라인 지도 길 찾기 서비스, 중요한 정보를 시각화해서 국민에게 보여 주는 사이트 등도 모두 자바스크립트로 만듦.
이러한 사이트를 만들려면 지도 API나 데이터 시각화 라이브러리를 사용해야 하는데 모두 공개되어 있으므로
누구나 사용 가능함.
③ 다양한 라이브러리 사용 가능
웹 애플리케이션을 개발할 때 사용하는 리액트, 앵귤러, 뷰같은 프레임워크도 있고,
그래픽 활용을 위한 D3.js나 DOM을 쉽게 조작할 수 있게 해주는 제이쿼리 같은 라이브러리도 있음.
이 밖에도 다양한 자바스크립트 라이브러리가 계속 등장하고 있어서 웹 개발을 도와주고 있음.
④ 서버 개발 가능
Node.js는 프런트엔드 개발에서 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있도록 만든 프레임워크로
이제는 자바스크립트만 알아도 서버 개발까지 영역을 확대할 수 있음.
웹 브라우저가 자바스크립트를 만났을 때
① 웹 문서 안에 <script> 태그로 자바스크립트 작성하기
자바스크립트 소스 코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드를 작성할 수 있음.
웹 문서에서 <script>와 </script> 태그 사이에 실행할 자바스크립트 소스를 작성하는 것임.
<script> 태그는 웹 문서 안의 어디든 위치할 수 있고 삽입된 위치 그 자리에서 바로 스크립트가 실행됨.
또한 <script> 태그는 하나의 문서에서 여러 개 사용할 수도 있음.
자바스크립트는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많으므로 되도록이면
이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋음. 그래서 </body> 태그 직전에 자바스크립트 소스를 삽입함.
HTML, CSS와 달리 자바스크립트에서는 영어 대소 문자를 구별하므로 소스를 작성할 때 주의해야 함.
※ 내부 자바스크립트 사용하기
텍스트를 사용했을 때 글자색을 바꿈.
<script>와 </script> 태그 사이에 자바스크립트 소스를 작성하고 </body> 태그 바로 앞에 삽입하면 됨.
② 외부 스크립트 파일로 연결해서 자바스크립트 작성하기
HTML 문서 안에 자바스크립트 소스를 작성하면 웹 문서에서 바로 확인할 수 있는 장점도 있지만
HTML 태그와 자바스크립트 소스가 함께 섞여 있어서 웹 문서가 복잡해 보임.
그리고 자바스크립트 소스를 수정해야 할 때 소스가 포함된 웹 문서를 찾아다니며 수정해야 함.
그래서 자바스크립트 소스를 작성할 때 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방법을 많이 사용함.
자바스크립트 소스를 따로 파일로 저장한 후 웹 문서에 연결해서 사용하면 웹 문서 안에는
직접 자바스크립트 소스가 드러나지 않고 HTML 태그와 CSS만 유지할 수 있어서 소스가 한결 깔끔함.
외부 자바스크립트 파일은 <script> 태그 없이 자바스크립트 소스만 작성하고 확장자는 *.js 파일로 저장함.
그리고 HTML 문서에서 <script> 태그의 src 속성을 이용해서 자바스크립트 파일을 연결하면 됨.
이때 연결한 자바스크립트 파일은 마치 웹 문서에서 직접 작성한 자바스크립트 소스처럼 사용할 수 있음.
이 방법을 이용하면 간단히 JS 파일만 수정해도 연결된 모든 HTML 문서에 바로 적용됨.
기본형 : <script src="외부 스크립트 파일 경로"></script>
※ 외부 스크립트 사용하기(JS파일)
외부 스크립트를 연결해 글자색 바꾸기
※ 외부 스크립트 사용하기(HTML 파일)
외부 스크립트를 연결해 글자색 바꾸기
③ 웹 브라우저에서 스크립트를 해석하는 과정
(1) 웹 브라우저는 1행에 있는 <!DOCTYPE html>를 보고 이 문서가 웹 문서라는 것을 알게 됨.
그리고 <html>과 </html> 태그 사이의 내용을 HTML 표준에 맞춰 읽기 시작함.
(2) 웹 문서에서 HTML 태그의 순서와 포함 관계를 확인함.
<head>와 </head> 태그, <body>와 </body> 태그 사이에 각각 어떤 태그가 있는지 확인함.
그리고 태그 간의 관계는 어떻게 되어 있는지 등을 분석함.
(3) 태그 분석이 끝나면 7~14행의 스타일 정보를 분석함.
(4) 20행에 잇는 <script> 태그를 만나면 웹 브라우저 안에 포함된 자바스크립트 해석기에게 스크립트 소스를 넘김.
자바스크립트 해석기는 <script>와 </script> 사이의 소스를 해석함.
(5) (2)에서 분석한 HTML와 (3)에서 분석한 CSS 정보에 따라 웹 브라우저 화면에 표시함.
(6) 이제 웹 브라우저에서 '자바스크립트' 텍스트를 클릭하면 분석해 놓은 자바스크립트를 실행해서 결과를 화면에 표시함.
자바스크립트 용어와 기본 입출력 방법
① 식과 문
자바스크립트 언어의 큰 줄기는 식과 문임.
자바스크립트에서 식은 표현식이라고도 하는데, 연산식뿐만 아니라 실제 값도, 함수를 실행하는 것도 식이 됨.
즉, 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있으며, 식은 변수에 저장됨.
※ 자바스크립트의 다양한 식 나타내기
inch * 2.54 //연산식 = 식
"안녕하세요?" //문자열 = 식
5 //숫자 = 식
이에 비해 문은 명령이라고 생각할 수 있음. 문의 끝에는 세미콜론(;)을 붙여서 구분함. (ex.조건문, 제어문)
② 간단한 입출력 방법
(1) 알림 창 출력
알림 창은 가장 많이 사용하는 간단한 대화 상자임.
웹 브라우저에서는 작은 알림 창을 열어 메시지를 표시할 수 있음.
기본형 : alert(메시지)
※ 알림 창 만들기
알림창을 만드는 방법은 다음과 같이 alert( )를 입려하고 괄호 안에 따옴표(" " 또는 ' ')와 함께 메시지를 넣어주면 됨.
(2) 확인 창 출력
확인 창은 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있음. 그러면 선택한 결과에 맞게 프로그램이 동작함.
기본형 : confirm(메시지)
확인 창은 버튼이 2개 있으며, 사용자가 어떤 버튼을 눌렀는지 결과를 변수에 저장한 후
그 값에 따라 프로그램에서 처리함.
※ 확인 창 만들기
(3) 프롬프트 창에서 입력받기
프롬프트 창은 텍스트 필드가 있는 작은 창임.
텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있음.
프롬프트 창을 만들 때는 기본값을 지정하거나 지정하지 않을 수 있음.
기본형 : prompt(메시지) 또는 prompt(메시지, 기본값)
※ 프롬프트 창의 기본값 지정하기
※ 프롬프트 창의 기본값 지정하지 않기
(4) 웹 브라우저 화면에 출력을 담당하는 document.write( ) 문
단순히 브라우저 화면에서 결괏값을 확인하는 용도로는 document.write( )를 많이 사용함.
document.write( )를 완전히 이해하려면 document 객체를 알아야하는데
우선 웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문이라는 정도로만 알아두면 됨.
document.write( )의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 어떤 결괏값이 저장된 변수를 넣을 수도 있음.
괄호 안에서 큰따옴표(" ")나 작은 따옴표(' ') 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시됨.
물론 따옴표 안에는 HTML 태그도 함께 사용할 수 있음.
웹 브라우저 화면에 표시할 내용과 변수를 섞어서 나타낼 수도 있는데, 이때 + 연산자를 사용해서 연결해줌.
여기에서 + 연산자는 더하기 기호가 아니라 연결 연산자로, 내용과 변수를 연결해 주는 역할을 함.
※ document.write( ) 문으로 제목 표시하기
document.write( )문에 <h1> 태그와 출력할 내용을 입력해서 웹 브라우저에 제목 표시하기
※ 이름 받아서 화면에 표시하기
name 변수에 저장된 값과 텍스트를 연결해서 표시하며, 여기에서도 <big> 태그와 <b> 태그를 함께 사용함.
(5) 콘솔 창에 출력하는 console.log( ) 문
console.log( ) 문은 괄호 안의 내용을 콘솔 창에 표시함.
콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간으로,
콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있음.
console.log( ) 문의 괄호 안에는 변수나 따옴표 사이에 표시할 텍스트를 넣을 수 있는데,
이때 따옴표 안에 HTML 태그는 사용할 수 없음.
※ 이름 받아서 콘솔 창에 표시하기
웹 브라우저에 프롬프트 창이 뜨는데 이름을 입력하고 [확인]을 클릭하면 아무런 변화가 없음.
하지만 그 상태에서 Ctrl + Shift + J 를 눌러 콘솔 창을 열면 실행 결과가 콘솔 창에 표시됨.
콘솔 창에서 오류를 찾고 수정하기
① 웹 브라우저에서 콘솔 창 열어서 확인하기
정상으로 작동한다면 현재 시각이 나타나야 하는데 자바스크립트 소스가 제대로 작동되지 않아 아무것도 보이지 않음.
이때 Ctrl + Shift + J 를 눌러 콘솔 창을 열어보면 빨간색 글자로 오류가 났음을 보여줌.
개발자 도구 창 오른쪽 위에는 오류 개수가 표시되는데 여기에서는 오류가 1개 있다는 뜻임.
오류 문장의 오른쪽을 살펴보면 오류가 발생한 파일명과 행 번호로 오류 발생 위치를 표시해줌.
② 오류 발생 위치를 클릭해 소스에서 오류 찾기
콘솔 창에서 오류 발생 위치를 클릭하면 [콘솔]이 [소스] 탭으로 바뀌고 오류가 발생한 파일과 행이 바로 표시됨.
오류 부분이 형광색 음영으로 나타나므로 오류를 찾기 쉬움.
여기에서는 document.write( ) 문이 있는 행에 오류가 발생했음. 영문자 write에서 'e'를 안 적음.
③ 비주얼 스튜디오 코드에서 HTML 파일 수정하기
오류를 찾았으면 비주얼 스튜디오 코드에서 해당 문서를 열고 코드를 수정해야 함.
아까 콘솔 창에서 오류를 찾았던 19행으로 이동해서 document.writ를 document.write로 수정해줌.
그럼 처음에 오류 때문에 보이지 않았던 현재 시각이 제대로 보임.
자바스크립트 스타일 가이드
① 코딩 규칙이 필요한 이유
자바스크립트 코딩 규칙은 스타일 가이드나 코딩 컨벤션, 코딩 스타일, 표준 스타일이라고도 함.
여기선 '스타일 가이드'라고 부름.
자바스크립트는 웹 문서에 동적인 효과를 주기 위해 출발한 언어이므로 다른 프로그래밍 언어에 비해
데이터 유형이 유연해서 곳곳에 사용자가 주의를 기울이지 않으면 오류가 발생할 수 있음.
게다가 오픈소스에 기여하거나 누군가와 공유할 소스라면 코드를 더욱 깔끔하게 작성해야하는데
이때 스타일 가이드를 따라서 작성하면 소스 코드의 오류도 줄이고 일관성이 생겨 읽기가 쉬워짐.
회사에서 자바스크립트를 사용하여 웹 개발 프로젝트를 진행한다면 통일된 코딩 스타일이 꼭 필요함.
그래야 여러 사람이 작성한 프로그램도 마치 한 사람이 작성한 것처럼 보일 것이기 때문임.
또한 스타일 가이드에 따라 작성된 웹 사이트나 애플리케이션은 유지보수할 때도 수월하고 비용도 훨씬 줄어듦.
② 자바스크립트 스타일 가이드
자바스크립트 스타일 가이드는 보통 구글이나 에어비앤비에서 배포한 것을 기준으로 작성함.
③ 자바스크립트 소스 작성 규칙
(1) 코드를 보기 좋게 들여쓰기
탭(Tab)은 시스템 환경마다 다르게 보일 수 있으므로 자바스크립트 스타일 가이드에서는
스페이스 바를 눌러 공백이 2칸이나 4칸인 들여쓰기를 권장함.
공백 4개는 화면을 많이 차지하므로 최근에는 공백 2칸 들여쓰기를 많이 사용함.
(2) 세미콜론으로 문장 구분
자바스크립트에서 세미콜론(;)은 문장의 끝을 나타내며 문장과 문장을 구분하는 역할도 함.
사실 자바스크립트에서는 세미콜론을 붙이지 않아도 실행되지만,
자바스크립트 스타일 가이드에서는 문장을 명확하게 표시해 주면 소스를 디버깅하기 쉬워지기 때문에
문장을 끝낼 때 반드시 세미콜론을 붙이도록 권장함.
(3) 공백을 넣어 읽기 쉽게 작성
예약어나 연산자, 값 사이에는 공백을 넣어서 소스 코드를 읽기 쉽게 작성함.
공백이 없어도 자바스크립트는 잘 실행되지만,
실제로 개발자가 소스 코드를 읽거나 디버깅을 할 때는 공백이 있어야 가독성이 좋음.
ex. var num=2; (X) → var num = 2; (O)
(4) 소스 코드를 잘 설명하는 주석 작성
자바스크립트의 주석은 다음과 같이 2가지 형태로 사용할 수 있음.
한 줄 주석 : 주석 기호로 슬래시 2개(//)를 붙이고 내용을 작성함. 만약 주석 내용이 한 줄을 넘으면 오류가 생김.
여러 줄 주석 : 주석 내용이 여러 줄이면 여는 주석 기호(/*)를 맨 앞에, 닫는 주석 기호(*/)를 맨 뒤에 넣음.
그리고 그 사이에 주석 내용을 작성함. 이때 /*와 */사이에는 또 다른 주석을 넣을 수 없음.
(5) 식별자는 정해진 규칙을 지켜 작성
식별자는 개발자가 자바스크립트의 변수, 함수, 속성 등을 구별하려고 이름 붙인 특정 단어를 의미함.
예를 들어 다음과 같이 프롬프트 창에 입력받은 사용자 이름은 name이라는 변수에 저장하는데,
여기에서 바로 name이 식별자임.
ex. var name = prompt("이름을 입력하세요.");
식별자의 첫 글자는 반드시 영문자나 언더스코어(_), 또는 달러 기호($)로 시작해야 함.
그 다음에는 영문자, 언더스코어, 달러 기호, 숫자를 작성할 수 있음.
두 단어 이상이 모여 하나의 식별자를 만들 경우 단어 사이에 공백을 둘 수 없고,
단어와 단어 사이를 하이픈(-)이나 언더바(_)로 연결해서 사용함.
하이픈이나 언더바 없이 두 단어를 붙여 사용할 경우
첫 번째 단어는 소문자로 시작하고 두 번째 단어는 대문자로 시작하는 것이 일반적임.
ex. num1 //영문자로 시작하는 식별자
_doSomething //언더스코어(_)로 시작하는 식별자
checkTime() //두 단어로 만든 식별자
(6) 예약어는 식별자로 사용 불가
예약어는 키워드라고도 하는데, 식별자로 사용할 수 없도록 자바스크립트에 미리 정해 놓은 단어를 가리킴.
예를 들어 var은 변수를 선언할 때 쓰는 예약어이며 식별자 이름으로는 사용할 수 없음.
'코딩 국비 학원 > Do it! HTML+CSS+자바스크립트' 카테고리의 다른 글
| [Do it! HTML+CSS+자바스크립트]함수와 이벤트 (0) | 2022.12.22 |
|---|---|
| [Do it! HTML+CSS+자바스크립트]자바스크립트 기본 문법 (0) | 2022.12.21 |
| [Do it! HTML+CSS+자바스크립트]반응형 웹과 미디어 쿼리 (0) | 2022.12.20 |
| [Do it! HTML+CSS+자바스크립트]트랜지션과 애니메이션 (0) | 2022.12.20 |
| [Do it! HTML+CSS+자바스크립트]CSS 고급 선택자 (0) | 2022.12.19 |
