j01. 자바스크립트 소개

자바스크립트 소개

자바스크립트 (JavaScript) 는 모든 웹 개발자가 배워야 할 3가지 언어 중 하나 입니다.

1. HTML 은 웹 페이지의 내용을 정의합니다.
2. CSS 는 웹 페이지의 배치를 지정합니다.
3. 자바스크립트 (JavaScript) 는 웹 페이지의 동작을 프로그램 합니다.

자바스크립트는 지구상에서 가장 인기있는 프로그래밍 언어 입니다.

---

자바스크립트로 뭐하죠?

자바스크립트는 HTML 내용을 바꿀 수 있습니다.

자바스크립트로 무엇을 할 수 있을까요?

자바스크립트는 HTML 내용을 바꿔치기 할 수 있습니다.

메소드 중에 getElementById() 라는 것이 있는데, 아래 예에서와 같이

특정 id 를 갖는 HTML 태그를 찾습니다. 그리고 내용을 innerHTML 로 바꿉니다.

<style>
.button {
background-color: orange;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>

<p id="firstResult">자바스크립트는 HTML 내용을 바꿀 수 있습니다.</p>

<button class="button" type="button"
onclick="document.getElementById('firstResult').innerHTML = '안녕하세요. 내용바뀌었나요?'">
여기를 한번만 클릭해 주세요.</button>

---

(2) 자바스크립트로 이미지를 바꿀 수 있습니다.

쌀 독을 터치해 보세요. 쌀이 생겼나요? 한번더 터치해 보세요.

자바스크립트는 HTML 속성 (HTML Attributes) 을 바꿀 수 있습니다.

<img> 태그에 src 속성값을 변경하여, HTML 의 이미지를 바꿔치기 할 수 있습니다.

<img id="myImage" onclick="changeImage()" src="https://cdn3.iconfinder.com/data/icons/breakfast/sugar_bowl-empty.png" width="128" height="128">

<p>쌀 독을 터치해 보세요. 쌀이 생겼나요? 한번더 터치해 보세요.</p>

<script>
function changeImage() {
var image = document.getElementById('myImage');
if (image.src.match("filled")) {
image.src = "https://cdn3.iconfinder.com/data/icons/breakfast/sugar_bowl-empty.png";
} else {
image.src = "https://cdn3.iconfinder.com/data/icons/breakfast/sugar_bowl-filled.png";
}
}
</script>

---

(3) 자바스크립트로 또 뭘 할 수 있을까요?

자바스크립트는 HTML 태그의 스타일을 바꿀 수 있습니다.

자바스크립트로 HTML 스타일 즉 CSS 를 바꿀 수 있습니다.
<p id="thirdResult">자바스크립트는 HTML 태그의 스타일을 바꿀 수 있습니다.</p>

<script>
function thirdFunction() {
var x = document.getElementById("thirdResult");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>

<button class="button" type="button" onclick="thirdFunction()">글자를 키우고 색상을 빨강으로 바꿉니다.</button>

---

(4) 자바스크립트로 입력값을 검증할 수 있습니다.

전화번호 뒷자리 4자리를 넣으세요.

자바스크립트는 종종 입력 데이터를 검증할 때도 사용합니다.
<p>전화번호 뒷자리 4자리를 넣으세요.</p>

<input id="digit">

<button class="button" type="button" onclick="fourthFunction()">&nbsp; 제 출 &nbsp;</button>

<p id="fourthResult"></p>

<script>
function fourthFunction() {
var x, text;

// id="digit" 인 입력 태그의 값을 가져와서 변수 x 에 담습니다.
x = document.getElementById("digit").value;

// x 가 숫자가 아니거나, 1000보다 작거나, 9999 보다 크다면 4자리 숫자가 아닐 것입니다.
if (isNaN(x) || x < 1000 || x > 9999) {
text = "전화번호 뒷자리 4자리를 정확히 넣으세요.";
} else {
text = "4자리를 입력하였군요.";
}
document.getElementById("fourthResult").innerHTML = text;
}
</script>

---

자바와 자바스크립트는 전혀 다른 언어입니다.

자바스크립트는 Brendan Eich 에 의해 1995 년에 개발되었고 ECMA (IT 표준연합의 일종) 에 의해 1997 에 표준이 되었습니다.

2015 년 6월에 발표된 ECMAScript 6 이 가장 최근의 자바스크립트 공식 버전 입니다.

---

[광고] Udemy 동영상 강의로 보기