Skip to content

Introduction

개요¶

JavaScript¶

1995년 넷스케이프 개발
Netscape Navigator 2.0 브라우저에 최초 탑재
웹 프로그래밍 개념 창시

특징¶

HTML 문서에 내장
조각 소스 코드
스크립트 언어
인터프리터 실행
컴파일 필요 없음
단순함
C언어 구조 차용
배우기 쉬움

웹페이지에서의 역할¶

사용자의 입력 및 계산
- 마우스와 키보드 입력은 오직 자바스크립트로만 가능
- 계산 기능
웹 페이지 내용 및 모양의 동적 제어
- HTML 태그의 속성, 콘텐츠, CSS 프로퍼티 값 동적 변경
브라우저 제어
- 브라우저 윈도우 크기와 모양 제어
- 새 윈도우 열기 / 닫기
- 다른 웹 사이트 접속
- 브라우저 히스토리 제어
웹 서버와의 통신
웹 애플리케이션 작성
- 캔버스 그래픽, 로컬/세션 스토리지 저장, 위치정보서비스 등

자바스크립트 코드의 위치¶

HTML 태그의 이벤트 리스너 속성에 작성¶

  <img src="apple.png" alt="img" onclick="this.src='banana.png'">

script 태그에 작성¶

<head>나 <body> 태그 내 어디든 사용 가능
웹 페이지 내에 <script> 태그 여러번 삽입 가능

자바스크립트 파일에 작성¶

확장자 .js 파일에 저장
여러 웹페이지에서 불러 사용

  <script src=“파일이름.js”></script>

URL 부분에 작성¶

<a href="javascript:alert('클릭하셨어요?')"> 클릭해보세요</a>

이벤트와 이벤트-리스너¶

이벤트¶

사용자의 입력 행위를 브라우저가 웹페이지에 전달하는 수단
사용자가 HTML태그에 출력된 영역에 키를 입력하거나 마우스 클릭하면 발생, 해당 HTML태그에 전달
click, change, mousemove 등 여러 종류

이벤트 리스너¶

이벤트를 처리하는 자바스크립트 코드
onclick, onchange, onmousemove와 같이 on을 붙인 이름이 HTML태그의 이벤트 리스너 속성으로 사용, 이 속성에 자바스크립트 코드를 작성함

HTML 콘텐츠 출력¶

자바 스크립트로 HTML 콘텐츠를 웹 페이지에 직접 삽입

document.write()
document.writeln() > writeln()은 텍스트에 ‘\n＇을 덧붙여 출력

<script>
  document.write("<h3>Welcome!</h3>");
  document.write("2 + 5 는<br>");
  document.write("<mark>7 입니다.</mark>");
</script>

다이얼로그¶

프롬프트¶

사용자로부터 문자열을 입력 받아 리턴

prompt("메시지", "디폴트입력값");

확인¶

메시지를 출력하고 확인/최소(OK/CANCEL) 버튼을 가진 다이얼로그 출력

confirm("메시지");

확인 버튼을 누르면 true, 취소 버튼이나 강제로 다이얼로그를 닫으면 false 리턴

경고¶

메시지 와 확인 버튼을 가진 다이얼로그 출력

alert("메시지");

Last update : 8 mai 2023
Created : 10 octobre 2019