2주동안 수업을 쉬고 다시 수업을 듣게 되었습니다! 이번에는 처음으로 자바스크립트에 배우게 되었습니다.
처음으로 배우는 언어라서 수업을 잘 이해할 수 있을까 걱정이 들었지만 수업한 내용을 복습하면서 열심히 공부해 보겠습니다!
1. 자바스크립트: 웹 프로그래밍의 시작
자바스크립트는 1995년에 넷스케이프에서 개발되었으며, 웹 프로그래밍 개념을 창시했습니다
특징
- HTML 문서에 저장되며, 작은 코드 조각으로 구성됩니다.
- 스크립트 언어로, 인터프리터를 통해 실행되며 컴파일이 필요하지 않습니다.
- C 언어와 비슷한 구조로, 배우기 쉽습니다.
2. 자바스크립트의 역할
1. 사용자의 입력 및 계산
- 마우스와 키보드 입력은 자바스크립트로 처리됩니다.
- 계산 기능도 자바스크립트로 수행합니다.
2. 웹페이지 내용 및 모양의 동적 제어
- HTML 태그의 속성, 콘텐츠, CSS 프로퍼티 값을 동적으로 변경할 수 있습니다.
3. 브라우저 제어
- 브라우저 윈도우 크기와 모양을 조절하거나 새 창을 열고 닫을 수 있습니다.
- 다른 웹 사이트로 이동하거나 히스토리를 제어할 수 있습니다.
4. 웹 서버와 통신
- 웹 애플리케이션을 작성하고, 그래픽을 그리거나 로컬/세션 스토리지에 데이터를 저장하는 등의 작업을 수행할 수 있습니다.
3. 자바스크립트 코드의 위치와 활용
1. HTML 태그의 이벤트 리스너에 자바스크립트 코드 작성
HTML 태그의 이벤트 리스너에 자바스크립트 코드를 작성하는 것은 자주 사용되는 방법 중 하나입니다.
예제 6-1에서 보듯이, 이벤트 리스너 속성에 코드를 작성하여 특정 이벤트(예: 버튼 클릭)가 발생할 때 코드가 실행될 수 있습니다.
2. <script></script> 태그에 자바스크립트 코드 작성
자바스크립트 코드를 HTML 문서 내에서 직접 작성하려면 <script></script> 태그를 사용합니다. 이 태그는 <head></head>나 <body></body> 내 어디에나 배치할 수 있으며, 웹페이지 내에 여러 번 삽입할 수 있습니다. 예제 6-2에서는 스크립트 태그 내에 코드를 작성한 예제를 보여줍니다.
3. 자바스크립트 코드를 별도 파일에 작성
자바스크립트 코드를 별도 파일로 저장하고 필요한 웹 페이지에서 불러와 사용할 수도 있습니다. 코드를 .js 확장자를 가진 파일에 저장하고, 예제 6-3에서와 같이 <script> 태그의 src 속성을 사용하여 파일을 불러올 수 있습니다. 이 방법을 통해 코드 중복을 피하고 코드 관리를 용이하게 할 수 있습니다.
4. 링크의 href에 자바스크립트 코드 작성
<a> 태그의 href 속성에 자바스크립트 코드를 작성하여 클릭 시 코드를 실행할 수 있습니다. 이것은 링크를 클릭하면 자바스크립트 코드가 실행되는 예제를 보여주는 방법입니다(예제 6-4).
5. 자바스크립트로 HTML 콘텐츠 출력
자바스크립트를 사용하여 HTML 콘텐츠를 동적으로 웹페이지에 출력할 수 있습니다. document.write() 함수를 사용하여 원하는 HTML 요소를 생성하고 브라우저에 출력할 수 있습니다. 또한, document.writeln() 함수를 사용하면 텍스트에 줄바꿈 문자('\n')를 추가하여 출력할 수 있습니다(예제 6-5).
6. 자바스크립트 다이얼로그: 프롬프트 다이얼로그
자바스크립트를 사용하여 사용자와 상호작용할 수 있습니다. prompt("메시지", "디폴트 입력값") 함수를 사용하면 사용자로부터 문자열을 입력받고, confirm 함수를 사용하면 확인/취소 다이얼로그를 표시할 수 있습니다(예제 6-6).
예제 1: HTML 태그의 이벤트 리스너에 자바스크립트 코드 작성
<!DOCTYPE html>
<html>
<head>
<title>이벤트 리스너 예제</title>
</head>
<body>
<button id="myButton">클릭하세요</button>
<script>
// 버튼을 클릭하면 메시지를 출력하는 이벤트 리스너
document.getElementById("myButton").addEventListener("click", function() {
alert("버튼이 클릭되었습니다!");
});
</script>
</body>
</html>이 예제는 버튼을 클릭하면 경고창이 뜨는 간단한 이벤트 리스너를 포함한 HTML 페이지입니다.
결과
예제 2: <script></script> 태그에 자바스크립트 코드 작성
<!DOCTYPE html>
<html>
<head>
<title>스크립트 태그 예제</title>
</head>
<body>
<h1>안녕하세요!</h1>
<script>
// HTML 내부에 직접 스크립트 코드를 작성
var greeting = "반갑습니다!";
document.write("<p>" + greeting + "</p>");
</script>
</body>
</html>이 예제에서는 HTML 내부에서 스크립트를 작성하여 변수를 사용하고, 그 값을 웹 페이지에 출력합니다.
결과
예제 3: 자바스크립트 코드를 별도 파일에 작성하고 불러오기
index.html
<!DOCTYPE html>
<html>
<head>
<title>외부 스크립트 예제</title>
</head>
<body>
<h2>외부 스크립트 불러오기</h2>
<button id="myButton">클릭하세요</button>
<!-- 외부 자바스크립트 파일 불러오기 -->
<script src="myScript.js"></script>
</body>
</html>
myScript.js
// 외부 스크립트 파일 (myScript.js)
document.getElementById("myButton").addEventListener("click", function() {
alert("버튼이 클릭되었습니다! (외부 스크립트)");
});이 예제에서는 외부 스크립트 파일 `myScript.js`를 불러와 버튼 클릭 이벤트를 처리합니다. 이렇게 하면 HTML 파일이 더 깔끔하고 코드 재사용이 가능해집니다.
결과
예제 4: 링크의 href에 자바스크립트 코드 작성
<!DOCTYPE html>
<html>
<head>
<title>링크에 자바스크립트 코드 작성</title>
</head>
<body>
<p><a href="javascript:alert('링크를 클릭했습니다!')">링크 클릭</a></p>
</body>
</html>이 예제에서는 하이퍼링크를 클릭하면 JavaScript `alert` 함수를 사용하여 경고창을 표시합니다.
결과
예제 5: 자바스크립트로 HTML 콘텐츠 출력
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트로 HTML 콘텐츠 출력</title>
</head>
<body>
<h1>자바스크립트로 HTML 콘텐츠 출력 예제</h1>
<button onclick="showMessage()">메시지 표시</button>
<script>
function showMessage() {
// document.write()를 사용하여 HTML 요소 동적 생성
document.write("<p>이것은 동적으로 생성된 문단입니다.</p>");
}
</script>
</body>
</html>이 예제에서는 버튼을 클릭하면 showMessage 함수가 실행되고, 이 함수에서 document.write()를 사용하여 동적으로 HTML 문단을 생성합니다.
결과
예제 6: 자바스크립트 다이얼로그 - 프롬프트 다이얼로그
<!DOCTYPE html>
<html>
<head>
<title>자바스크립트 프롬프트 다이얼로그</title>
</head>
<body>
<h1>자바스크립트 프롬프트 다이얼로그 예제</h1>
<button onclick="showPrompt()">사용자 입력 받기</button>
<script>
function showPrompt() {
// prompt() 함수를 사용하여 사용자로부터 입력 받기
var userInput = prompt("이름을 입력하세요:", "홍길동");
if (userInput !== null) {
alert("안녕하세요, " + userInput + "님!");
} else {
alert("입력이 취소되었습니다.");
}
}
</script>
</body>
</html>이 예제에서는 버튼을 클릭하면 showPrompt 함수가 실행되고, prompt() 함수를 사용하여 사용자로부터 이름을 입력 받은 후 환영 메시지를 표시합니다.
결과
이렇게 오늘 자바스크립트의 역할과 예제까지 함께 살펴보았는데요! 정말로 js는 매력적인 언어인것 같아요 🥰
'AfterSchool > 자바스크립트 방과후' 카테고리의 다른 글
| 자바스크립트: JS 문법에 대해 알아보기(0609) (0) | 2022.06.10 |
|---|
