9주차 - 자바스크립트와 첫 만남
자바스립트와 첫 만남
서버나 웹에서 작동하는 프로그램을 만드는 등 웹의 모든 부분을 다룰 수 있는 핵심 언어
13-1 자바스크립트로 무엇을 할까 13-2 웹 브라우저가 자바스크립트를 만났을 때 13-3 자바스크립트 용어와 기본 입출력 방법 13-4 자바스크립트 스타일 가이드
13-1 자바스크립트로 무엇을 할까
웹의 요소를 제어
대표적으로 위 그림과 같이 메인 메뉴 위로 마우스 포인터를 올리면 오른쪽 그림처럼 숨어 있는 하위 메뉴가 펼쳐지는 것이 있다.
회원 가입 양식이나 상품 주문서처럼 사용자 정보를 서버로 전송하는 폼에서 입력된 정보가 형식에 맞는지도 자바스크립트를 확인
웹 애플리케시션을 만듭니다.
과거와 달리 최근 웹은 사용자와 실시간으로 정보를 주고 받으며 애플리케이션처럼 동작 이러한 사이트를 만들기 위해 지도 API나 데이터 시각화 라이브러리를 사용해야 한다.
다양한 라이브러리를 사용할 수 있다.
과거에 서버에서 처리했던 일들을 이제는 클라이언트에서도 처리할 수 있게되고, 그만큼 클라이언트에사 처리해야 할 기능이 많아지면서 자바스크립트 기능은 더욱 강력해지고 있다.
리액트, 앵귤러, 뷰와 같은 프레임 워크 D3.js, 제이쿼리와 같은 라이브러리
예전에 토스의 경우 프론트 기술로 서버를 구현했다고 들었는데, 이처럼 클라이언트에게 여러 기능을 부여해서 구현했던게 아닌가 싶다.
서버 개발을 할 수 있다.
Node.js의 경우 프런트엔드 개발에서 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있도록 만든 프레임워크이다.
자바스크립트만 알아도 서버 개발 영역까지 확장할 수 있다.
13-2 웹 브라우저가 자바스크립트를 만났을 때
웹 브라우저에는 자바스크립트 소스를 읽고 처리하는 해석기(JavaScipt interpreter)가 있다.
<script> 태그를 이용해 작성, 별도 스크립트 파일로 관리할 수 있다.
웹 문서 안에 <scipt> 태그로 자바스크립트 작성하기
<scipt> 태그로 자바스크립트 작성하기<script> 태그는 웹 문서 안의 어디든 위치할 수 있고 삽입된 위치 그 자리에서 바로 스크립트가 실행된다.
자바스크립트는 이미지나 텍스트 등의 요소를 제어하는 경우가 많기 때문에 이러한 내용들이 다 표시된 이후 실행되는 것이 좋다. 그렇기에 ` 태그 직전에 자바스크립트 소스를 삽입하기도 한다
자바스크립트 소스를 HTML에 직접 넣을 경우 장점보다 단점이 많다.
단점 : HTML 태그와 자바스크립트 소스가 함께 섞여 있어서 웹 문서가 복잡해진다. 자바스크립트 소스를 반복 삽입했을 경우 수정이 어렵다. -> 자바스크립트 소스를 외부 스크립트 파일로 저장해서 웹 문서와 연결하는 방법을 이용
외부 스크립트 파일로 연결해서 자바스크립트 작성
개념: 자바스크립트 소스를 따로 파일로 저장한 후 웹 문서에 연결해서 사용
기본형 <script src="외부 스크립트 파일 경로"></script>
웹 브라우저에서 스크립트를 해석하는 과정
웹 문서에 자바스크립트 소스가 포함되어 있을 경우 웹 브라우저는 어떤 과정으로 해석하면 그 결과를 보여주는 것일까?
HTML 분석기 -> CSS 분석기 -> 자바스크립트 해석기
13-3 자바스크립트 용어와 기본 입출력 방법
자바스크립트 기본 용어에 대해 알아보자.
식과 문
어떤 값을 만들어 낼 수 있다면 이 모든 것을 식이라 표현한다.
`문`은 명령이라고 생각하면 된다. 문의 끝에는 세미콜론(;)을 붙여서 구분한다.
대표적으로 `조건문`이나 `제어문` 등을 예로 들 수 있다.
간단한 입출력 방법
알림 창 출력하기
개념: 웹 브라우저에서 작은 알림 창을 열어 메시지를 표시 기본형 alert(메시지)
확인 창 출력하기
개념: 사용자가 [확인]이나 [취소] 버튼 중에서 직접 클릭할 수 있다. 이후 선택한 결과에 맞게 프로그램을 동작시키는 것으로 연결 기본형 confirm(메시지)
프롬프트 창에서 입력받기
개념 : 텍스트 필드가 있는 작은 창, 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에서 사용할 수 있다. 기본형 prompt(메시지) 또는 prompt(메시지, 기본값)
웹 브라우저 화면에 출력을 담당하는 document.write()문
개념 : 단순히 브라우저 화면에서 결과값을 확인하는 용도로 사용
더 자세히 알기 위해 document 객체를 알아야 겠으나 아직 배우지 않기에 웹 문서(document)에서 괄호 안의 내용을 표기(write)하는 명령문 정도로 이해해 두자.
콘솔 창에 출력하는 console.log()문
개념 : 괄호 안의 내용을 콘솔 창에 표시합니다. 콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간입니다. 콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있습니다. console.log()문의 괄호 안에는 변수가 들어갈 수도 있고 따옴표 사이에 표시할 텍스트를 넣을 수도 있으나 document.write()문과 달리 따옴표 안에 HTML 태그를 사용할 수는 없다.
13-4 자바스크립트 스타일 가이드
문법에 맞게 코딩하는 것도 중요하지만 읽기 쉽고 오류를 줄일 수 있는 코드를 작성하는 것도 중요하다. 효율적으로 코드짜는 규칙에 대해 알아보자
코딩 규칙이 왜 필요할까?
자바스크립트 코딩 규칙 = 스타일 가이드, 코딩 컨벤션, 코딩 스타일, 표준 스타일
자바스크립트 스타일 가이드
자바스크립트 스타일 가이드의 경우 회사별로 따로 제각각일 수 있으나 보통 구글이나 에어비앤비에서 배포 한것을 기준으로 작성한다
자바스크립트 소스를 작성할 때 지켜야 할 규칙
1. 코드를 보기 좋게 들여쓰기
2. 세미콜론으로 문장을 구분
3. 공백을 넣어 읽기 쉽게 작성
4. 소스 코드를 잘 설명하는 주석을 작성
5. 식별자는 정해진 규칙을 지켜 작성
식별자identifier : 개발자가 자바스크립트의 변수, 함수, 속성 들을 구별하려고 이름 붙인 특정 단어
6. 예약어는 식별자로 사용할 수 없다.
자바스크립트의 정의
클라이언트쪽에서 독립적으로 실행되는 프로그램을 작성하기 위한 스크립트 언어
넷스케이프 사의 브랜든 아이히(Brendan Eich)에 의해 모카라는 이름으로 만들고 이후 라이브 스크립트라는 이름으로 개발
썬마이크로시스템사와 공동으로 라이브스크립트를 확장한 JavaScipt 탄생
자바스크립트의 특징
웹 문서(HTML)에 삽입해서 사용하는 스크립트 언어
웹 브라우저에서 웹 문서를 실행할 때 프로그램 코드가 해석됨
컴파일 과정을 거치지 않는 인터프리터 언어의 형태이기 때문에 비교적 자료형 조사를 철저하게 하지 않음
객체 지행적 특정을 모두 가지고 있다고 말할 수는 없지만 객체를 정의하여 사용할 수는 있음.
자바스크립트의 장점 및 단점
장점
자바스크립트는 HTML 파일 내에서 작성할 수 있으므로 개발 속도가 빠름
운영체제의 제한을 받지 않음
단점
소스 코드가 노출됨. 컴파일하지 않는 언어이므로 복사하여 사용할 수 있음
한정된 객체와 각체 함수 제공
자바스크립트의 기본 구조
<scipt> 태그 안에서 코드 표시
<scipt type="text/javascipt">
document.write('head에서 실행<br>');
</scipt>자바스크립트 실행 위치
<head>태그에<script>태그 명시<head>태그안에<script>태그를 명시하면<body>태그가 동작하기 전에 자바스크립트 코드가 실행됨<body>태그에<script>태그 명시<body>태그안에<script>태그를 명시하면<head>태그가 동작한 이후에 실행됨.자바스크립트를 외부 파일로 사용
<scipt type="text/javascipt" src="자바스크립트파일명.js"></script>HTML 태그에 인라인(inline) 형태로 삽입해서 사용
<input type="button" value="이동" onclick="location.href='index,html'">Last updated