안녕하세요
로로봉입니다 : )
오늘은 자바스크립트에 대해 알아보도록 하겠습니다.
JavaScript란 버튼을 클릭하거나 마우스를 움직였을 때 실행될 특정 동작을 프로그램 할 수 있는 언어를 말합니다.
HTML은 텍스트나 이미지 같은 HTML 요소를 웹 화면에 순서대로 배치하고 CSS는 해당 요소들의 위치나 범위, 배경 색상 등을 제어합니다.
하지만 HTML과 CSS는 정적 페이지만 만들 수 있기 때문에 페이지에 움직임을 추가할 수 없습니다.
HTML은 화면에 버튼을 띄울 수는 있지만 버튼이 클릭됐을 때의 동작을 구현할 수는 없습니다.
웹 페이지는 HTML과 CSS로 화면 모양을 잡고, 화면의 변화나 이벤트 처리는 자바스크립트로 구현합니다.
그러므로 자바스크럽트 코드도 HTML 파일에 추가하는 형태로 작성합니다.
자바스크립트 코드는 직접 HTML 파일에 추가할 수도 있고, 외부 파일로 만들어서 링크를 불러와 추가할 수도 있습니다.
1) 자바스크립트 기본 구조
자바 스크립트는 <script></script> 태그 사이에 작성하며, head 태그와 body 태그 내부에 작성이 가능합니다.
<html>
<head>
<meta charset='utf-8'>
<title>자바스크립트 테스트</title>
<script>
// 자바스크립트 코드
</script>
</head>
<body>
HTML 내용
<script>
// 자바스크립트 코드
</script>
</body>
</html>외부의 .js 확장자의 파일로 자바 스크립트를 구현한 뒤 불러와서 사용할 수도 있습니다.
head 태그 부분에 <script src="자바스크립트 파일명"></script> 를 사용해 자바스크립트 파일을 링크로 불러올 수 있습니다.
2) 자바스크립트 기본 문법
자바스크립트 문법은 자바와 비슷한데 자바를 좀 더 쉽고 단순하게 표한한 스크립트 언어입니다.
HTML과 CSS는 대소문자를 구분하지 않지만 자바스크립트의 키워드나 변수명은 대소문자를 구분합니다.
자바스크립트에서 사용할 수 있는 값에는 상수와 변수가 있으며 변수는 타입을 지정하지 않고 var 키워드를 사용합니다.
변수의 타입을 지정하지 않고 선언하기 때문에 처음 할당할 때 타입이 결정되게 되며, 변수에 사용할 수 있는 값은 정수, 실수, 문자열, 객체, 불린(Boolean), 배열 등입니다.
연산자와 제어문은 자바와 동일하며, 주석 또한 한줄 주석 //, 여러줄 주석 /* */을 사용합니다.
3) 자바스크립트 출력하기
자바스크립트는 웹 페이지를 제어할 수 있는 기본 객체를 포함하고 있습니다.
document는 웹 페이지의 출력을 담당하여 화면에 텍스트나 이미지 등을 출력할 수 있습니다.
<html>
<head>
<meta charset='utf-8'>
<title>자바스크립트 테스트</title>
</head>
<body>
<script>
document.write('<h3>구구단 출력</h3>');
document.write('<table border="1" cellspacing="0"');
var i=0,j=0,k=0;
for(i=0;i<2;i++){
document.write('<tr>');
for(j=2;j<10;j++){
if(i==0){
document.write('<th>'+j+'단</th>');
}
else{
document.write('<td>');
for(k=1;k<10;k++){
document.write(j+' x '+k+' = '+(j*k)+'<br>');
}
document.write('</td>');
}
}
}
document.write('</table>');
</script>
</body>
</html>위와 같이 HTML의 태그를 직접 입력하여도 되고 document.write를 이용해 입력해도 동일하게 HTML 태그가 작성됩니다.
document.write는 HTML 파일에 쓰는 작업이라고 보면 됩니다.
변수의 내용도 결국은 값이 있기 때문에 반복문을 이용해 HTML 파일에 텍스트로 써진다고 보면 됩니다.
자바 스크립트는 alert 메서드로 화면에 알림 창을 띄울 수 있습니다.
<script>
alert('알림창 확인');
</script>
자바스크립트는 innerHTML 속성으로 원하는 HTML 요소에 데이터를 입력할 수도 있습니다.
<p>테스트</p>이 태그 <p>의 몸체는 "테스트" 이므로 innerHTML 속성의 값은 "테스트"가 됩니다.
innerHTML의 값은 읽을 수만 있는 것이 아니라 해당 속성에 값을 쓰면 해당 태그의 몸체의 값이 변경이 가능합니다.
<html>
<head>
<meta charset='utf-8'>
<title>자바스크립트 테스트</title>
</head>
<body>
<p id="p1">테스트</p>
<p id="p2">ABC</p>
<script>
var myP = document.getElementById("p2");
alert(myP.innerHTML);
myP.innerHTML = "입니다";
</script>
</body>
</html>알림창이 뜨기 전에는 p2가 "ABC"로 되어 있기 때문에 알림 창에는 "ABC"가 뜨지만 알림창을 닫은 후 innerHTML 속성에 "입니다"를 넣었기 때문에 화면의 "ABC" 데이터가 "입니다"로 변경된 것을 볼 수 있습니다.
4) 메시지 박스
메시지 박스는 사용자에게 의사 확인을 요구할 때 사용합니다.
var result = confirm('동의하시겠습니까?');
확인 버튼을 누르면 true가 취소 버튼을 누르면 false가 반환됩니다.
prompt() 메시지 박스로 사용자에게 데이터를 입력 받을 수도 있습니다.
첫 번째 파라미터는 메시지 창에 출력할 문자열, 두 번째 파라미터는 초기 디폴트 값이 설정됩니다.
var data = prompt("데이터 입력","123");
좋아요♥ + 구독 부탁드립니다 : )
'개발 정보 > 웹개발' 카테고리의 다른 글
| [웹개발] Eclipse 웹 개발 환경 구축하기 (4) | 2022.05.17 |
|---|---|
| [웹개발] 자바스크립트(JavaScript) 함수 및 이벤트 처리 (0) | 2020.12.03 |
| [웹개발] CSS 배경 설정 및 테두리 설정하기 (0) | 2020.12.02 |
| [웹개발] CSS 크기설정 및 위치설정하기 (0) | 2020.12.02 |
| [웹개발] CSS 텍스트 제어하기 (0) | 2020.12.02 |
댓글