2015. 6. 28. 22:04
기호를 우습게 보지마라!
자바스트립트 뿐만 아니라 모든 컴퓨터 언어의 코딩에 있어 기호를 우습게 보면 안된다.
'' '' 쌍따옴표
' ' 따옴표
; 세미콜론
= 등호
. 마침표
( ) 소괄호
{ } 중괄호
< 부등호
| 파이프
자바스크립트 문법 단위의 이해
object (대상 : 객체 : 부품)
property (속성)과 value(값)
event(이벤트)
event handler(이벤트 핸들러)
keyword(키워드)
value(값)
variable(변수)
operator(연산자)
구체적인 예제를 가지고 이해하는 것이 가장 빠른 길이다.
예전에는 조립식 장난감이 많이 판매되었다.
각 부품을 조립하여 완성하는 재미가 있었다.
바퀴, 자동차 틀, 자동차 문 등을 조립하여 자동차를 완성하였다.
웹브라우저(익스플로러, 크롬, 파이어폭스)는 오브젝트(대상:객체:부품) 들이 모여 조립된 제품이다.
웹브라우저는 하나의 창(window)이며, 그 안에 주소표시줄, 메뉴표시줄, 도구상자, 컨텐츠영역(document) 등이 있다.
[예제 1]
<script>
document.bgColor="gray";
</script>
*document : 웹브라우저 창의 컨텐츠영역이 오브젝트(대상:객체:부품)임을 선언 - 참조
*bgColor="gray" : 이 오브젝트에 프로퍼티(속성)와 그 밸류(값)을 설정함을 선언. 백그라운드 컬러를 그레이로 설정함을 선언 - 참조 설정
[예제 2]
<script>
window.alert('이것은 경고창');
</script>
*window : 웹브라우저 창이 오프젝트(대상:객체:부품)임을 선언.
*alert('이것은 경고창') : 이 오브젝트에 메서드(명령)와 그 밸류(값)를 실행할 것을 선언. 웹브라우저 창으로 경고 대화상자를 출력하고 그 안에 '이것은 경고창'이라는 문자열을 출력할 것을 명령함.
[예제 3]
<button type="button" onclick="alert('안녕하세요!')">
여기를 클릭!
</button>
* HTML에 있어 <button>..</button>은 태그이고, onclick=" "은 속성이고, alert('안녕하세요!')는 값이다. 속성의 값으로 자바스크립트 코딩이 쓰였다.
* 자바스크립트에 있어 사용자가 버튼을 클릭하는 것은 이벤트이고, 클릭했을 때 무엇이 발생하게 설정하는 것은 이벤트 핸들러이다. 여기서 onclick=" "은 이벤트 핸들러이다. 그 값으로 자바스크립트 코딩이 쓰였다.
[예제 4]
<script>
var x = 5;
var y = 6;
var z = x + y;
document.write(z);
</script>
* var은 변수를 표시하겠다고 선언하는 키워드 이다.
* x, y, z는 배리어블(변수)이다.
* =, + 는 오퍼레이터(연산자) 이다.
* 5, 6은 밸류(값)이다.
문법 단위를 이용한 자바스크립트 코딩
1. 대상.속성="값";
<script>
document.bgColor="gray";
</script>
2. 대상.명령('값');
<script>
window.alert('이것은 경고창');
</script>
3. 대상.명령('값').속성="값";
<p id="abc">안녕하세요 !</p>
<script>
document.getElementById('abc').innerHTML="Hi!" ;
</script>
4. 키워드 변수=값;
<script>
var x = 5;
var y = 6;
var z = x + y;
document.write(z);
</script>
Comments, Trackbacks