자바스크립트
자바스크립트는 동적인 웹페이지를 만드는데 사용하는 프로그래밍 언어이다.
웹 페이지는 기본적으로 정적인 요소와 동적인 요소로 구성된다. 이 두 요소가 결합되어 웹페이지의 구조와 기능을 정의하고 사용자와의 상호작용을 가능하게 한다.
- 동적인 요소 : 동적인 요소는
자바 스크립트를 사용하여 실시간으로 변경 될 수 있는 웹 페이지의 부분을 의미한다. - 정적인 요소 :
HTML과CSS로 정의된, 변경되지 않는 웹 페이지의 부분을 의미한다.- 결과적으로 웹페이지는
HTML,CSS그리고자바스크립트코드가 브라우저에 의해 해석되고 , 그 결과가 우리 눈에 보이는 형태로 변환된것이다.
- 결과적으로 웹페이지는
자바스크립트의 역사
- 자바 스크립트는 동적인 웹페이지 디자인을 위해 1995년 넷스케이프에서 개발하였다.
- 원래 이름은 Mocha였다가 LiveScript를 거쳐 JavaScript가 되었다.
- Java와는 전혀 다른 언어이다.
- ECMAscript 1부터 시작하여 계속해서 발전하고 있다.
- ECMAScript 5에선 forEach(),map()과 같은 배열 메서드들이 추가되었다.
- ECMAScript 6에선 let과 const 키워드 등이 업데이트되었다.
- 2009년에는 Node.js의 등장으로 서버 개발에도 활용 할 수 있게 되었다.
자바스크립트의 사용 영역
웹 프론트 엔드 개발
- 주요 사용 사례 :
- DOM 조작 : HTML 요소를 실시간으로 추가, 삭제, 변경
- 이벤트 처리 : 사용자 인터랙션 처리
- AJAX: 비동기 데이터 통신
웹 백엔드 개발
- 주요 사용 사례 :
- Node.js : 서버 구축, API 개발, 데이터 베이스 연동
- 실시간 애플리케이션 : WebSocket을 통한 실시간 기능
개발자 도구
- 크롬 웹페이지에서
단축키 F12를 눌러 개발자 도구를 열수 있다. - 개발자 도구의 Elements 탭을 통해 웹 페이지를 구성하는 HTML 코드와 CSS 코드를 볼 수 있다.
- 개발자 도구의 Console 탭을 통해 자바스크립트 코드를 직접 입력해 결과를 볼 수 있다.
- 자바 스크립트 코드는 인터프리터 언어이다.
- 인터프리터언어의 특성은 한줄 한줄 코드를 해석해서 나타내준다.
예시 : 개발자 도구 console 탭에서 자바스크립트 코드를 작성해서 확인하면6-2에 대한 결과 값4가 바로 작성이 되는것을 볼 수 있다.
자바 스크립트 내장 함수
alert()
-
웹 브라우저에서 단순한 경고 창을 표시한다.
-
코드 작성법 :
alert('잘못입력하였어요'); -
결과 :
confirm()
-
사용자에게
확인또는취소를 선택할 수 있는 대화상자를 띄운다. -
코드 작성법 :
confirm('학교 잘 갔다왔니?'); -
결과 창 :
-
사용자가
확인버튼을 클릭하면 confirm()은true를 반환한다. -
사용자가
취소버튼을 클릭하면 confirm()은false를 반환한다.
console.log()
- 브라우저의 콘솔에 메시지를 출력하는데 사용할 수 있다.
- 코드의 실행 결과를 확인하는 용도로 많이 쓰인다.
- 코드 작성법 :
console.log('안녕하세요'); - 코드 결과 :
안녕하세요
자바 스크립트 작성하는 방법
-
HTML 문서 안에서 자바 스크립트 코드 작성하기
-
HTML 문서 내에서
<script>를 사용하여 자바스크립트 코드를 직접 작성할 수 있다. -
<script>를<body>의 맨 아래에 위치시키면, HTML 요소가 먼저 렌더링된 후 자바스크립트가 실행될 수 있다.코드 예시 :
<body> <!-- HTML 코드 --> <script> console.log("자바 스크립트 공부"); </script> </body> -
-
외부 자바 스크립트 파일과 연결하기
- 외부 자바 스크립트 파일을 HTML과 연결하여 사용할 수 있다.
- 이를 위해선
<script>의src속성을 사용해야한다. - src 속성에는 연결하고 싶은 자바 스크립트파일의 경로를 작성한다.
- 자바스크립트 코드를 HTML 문서와 분리하여 별도의 파일로 작성하면 코드의 가독성이 향상될 수 있다.
코드 예시 :
<script src ="scriptstart.js"></script>
<script> 위치의 중요성
-
<script>태그의 위치는 웹페이지의 성능과 사용자 경험에 중요한 영향을 미친다. -
자바스크립트는 웹페이지의 동작을 제어하기 위해 사용되므로
<script>태그를 어디에 배치하느냐에 따라 페이지가 로드되는 방식과 속도가 달라진다. -
HTML 파일은 브라우저에 의해 순차적으로 읽히기 때문에
<script>의 위치가 중요하다. -
브라우저는 HTML 파일을 해석하다가
<script>를 만나면 해당 스크립트를 실행하기 위해 해석을 일시적으로 멈춘다.
<script> 태그의 위치에 따른 차이점
-
<head>태그 내부- 코딩 예시:
<head> <script src="script.js"></script> </head> <body> <!-- 페이지 콘텐츠 --> </body>- 장점 : 자바스크립트 파일이 일찍 로드되어 DOM이 완전히 로드되기 전에 스크립트가 준비된다.
- 단점 : 자바스크립트 파일 로딩이 완료 될때까지 HTML 렌더링이 차단될 수 있어,페이지 로딩속도가 느려질 수 있다.
-
<body>태그 하단<body> <!--페이지 콘텐츠 --> <script src="script.js"></script> </body>
- 장점: HTML이 모두 렌더링된 후에 자바스크립트 파일이 로드되므로, 페이지 로딩이 느려지지 않는다.
- 단점: 자바스크립트가 필요한 요소들을 초기화하거나 이벤트 리스너를 설정할때 약간의 지연이 발생할 수 있다.
- 보통 많은 개발자들이
body태그 하단에 스크립트 코드를 많이 작성한다.
출처 : 자바스크립트(코딩밸리)의 강의를 토대로 만들었습니다.
