2017. 1. 5. 21:47ㆍComputer/하루 3분 웹 공부
3분 : 제 3 장 Javascript
_05 Javascript 란 무엇일까?
자바스크립트는 객체 기반의 스크립트 프로그래밍 언어입니다. 보다 더 자세한 내용은 위키피디아를 참조해주세요.
우리는 이전 장에서 CSS 에 대해서 알아보았습니다. CSS 를 통해서 우리는 어떤 속성을 지닌 무언가를 만들었습니다. 이제 우리는 이 녀석에게 어떤 것을 해야하는 것인지 알려줄 것입니다.
_06 버튼을 클릭했을 때, 알림창이 뜨게 해주자.
HTML
<div class="button" id="id_button">Button</div>
CSS
<style>
.button {
background-color:green;
color:white;
width:auto;
height:auto;
}
</style>
Javascript
<script>
document.getElementById("id_button").addEventListener("click",function(){
alert("hello world");
});
</script>
위의 녀석들을 .html 파일에 모아보면 다음과 같다.
<!Documen HTML>
<html>
<head>
<style>
.button {
background-color:green;
color:white;
width:auto;
height:auto;
}
</style>
</head>
<body>
<div class="button" id="id_button">Button</div>
<script>
document.getElementById("id_button").addEventListener("click",function(){
alert("hello world");
});
</script>
</body>
</html>
위의 내용은 해당 div 태그를 클릭할 경우, 'hello world' 라는 문자열을 보여주는 예제입니다.
자바 스크립트를 이용하면 특정 태그의 id,class 등을 통해서 해당 태그에 특정 액션을 부여할 수 있습니다.
클릭뿐만이 아니라, mouseover,mouseout 등 마우스 이벤트에 대한 액션 또한 부여할 수 있습니다.
_07 버튼의 속성을 바꾸어주자.
HTML
<div class="button" id="id_button">Button</div>
CSS
<style>
.button {
background-color:green;
color:white;
width:auto;
height:auto;
}
</style>
Javascript
<script>
// id_button 의 색상을 빨갛게 바꾸어준다.
document.getElementById("id_button").style.color="red";
</script>
_08 버튼의 스타일시트를 비활성화시키자.
HTML
<div class="button" id="id_button">Button</div>
CSS
<style id="btn_css">
.button {
background-color:green;
color:white;
width:auto;
height:auto;
}
</style>
Javascript
<script>
// 도큐먼트에 적용되어 있는 스타일 에서 btn_css 라는 아이디를 갖는 스타일을 비활성화시키자.
document.getElementById("btn_css").disabled = true;
</script>
오늘 우리는 간단하게 자바스크립트에 대해서 알아보았습니다. 제가 알려드린 자바스크립트는 학습이 아닌 분위기 라고 생각하시면 됩니다.
다음은 자바스크립트에 대한 간단한 학습 자료입니다.
실제로 자바스크립트는 학습을 해야만 제대로 사용할 수 있는 스크립트 언어입니다. 여러분이 자바스크립트를 공부하시다보면 ECMA스크립트 라는 말을 듣게 되실 겁니다.
해당 단어는 자바스크립트의 표준화된 스크립트언어라고 생각하시면 편합니다.
cf.
추후 자바스크립트를 작성시에 스크립트의 머리에use strict라는 문구를 볼 경우가 있을 겁니다.
해당 스크립트는 표준을 따른다는 말이고, 표준을 따른다는 말은 여러 브라우저에서 동일하게 작동하도록 설계된 스크립트라는 뜻으로 해석될 수 있습니다.
정리
- 자바스크립트는 Html 이 움직이게 해준다.
- 자바스크립트는 document 에 적용되어 있는 속성값을 변경할 수 있다.
- 자바스크립트는 document 의 태그를 자율적으로 변경할 수 있다.
- 오늘 잠시나마 맛본 자바스크립트는 1% 정도 된다. 99% 는 정말 무궁무진하다.
3분 스포
- 자바스크립트를 처음부터 다 배워서 사용하려면 너무 힘들 것 같은데, 좀 더 쉽게 사용할 수는 없을까?
'Computer > 하루 3분 웹 공부' 카테고리의 다른 글
| [02] 스타일 시트 CSS (0) | 2016.08.28 |
|---|---|
| [01] 웹사이트와 HTML (0) | 2016.08.25 |