자바 스크립트의 정의

정의 : 웹 브라우저에서 많이 사용하는 인터프리터 방식의 객체지향 프로그래밍 언어, EMCA 스크립트 표준을 따르는 대표적인 웹 기술

자바 스크립트의 사용법

1) 태그에 직접 간단한 소스코드를 작성해서 실행하는 방법 : inline 방식
2) script 태그에 작성하여 실행하는 방법 : internal 방식
3) 별도의 js파일로 작성해서 가져다 사용하는 방법 : external 방식

예제

inline 방식

🍒줄이 짧을 때 용이

<button onclick="alert('태그에 직접 자바스크립트 코드 작성')">클릭하세요!</button>

internal 방식

<button onclick="internal();">클릭하세요!</button>
	<script>
		function internal(){
			alert('script태그 안에 있는 internal()함수 실행')
		}
	</script>

external 방식

<button onclick="external()">클릭하세요!</button>

별도 js 파일

function external(){
	alert('별도로 작성된 js파일에서 external()함수 실행');
}

자바 스크립트의 데이터 입출력

데이터 출력

document.write()

🍒화면에 출력

<script>
	document.write('document.write()로 출력한 결과');
</script>

window.alert()

💡화면에 바로 실행!

<script>
		window.alert('알람창을 실행합니다.');
	</script>

innerHTML()

태그 앨리먼트의 값을 읽거나 값을 변경할 때 innerHTML 속성 사용

	</script>
	<h4>innerHTML로 요소 내용 변경</h4>
	<div id="div1">
		자바스크립트에서 태그 앨리먼트의 값을 읽거나 값을 변경할 때 innerHTML 속성 사용
	</div>
	<button onclick="checkInnerHTML();">innerHTML</button>
	<script>
		function checkInnerHTML(){
			//id가 div1로 되어있는 요소에 접근하여 변수 area에 담기
			var area = document.getElementById('div1'); 
			area.innerHTML='<i>Hello World로 값 변경</i>'; //기존 내용에 태그내용도 같이 읽어 변경
		}
	</script>

console.log()

개발자 도구 콘솔 화면에 출력

<script>
		function checkConsole(){//콘솔에 잘 출력되는지 확인
			console.log('콘솔 화면에 출력합니다.');
			window.console.log(10+10);//window 생략 가능, 간단한 계산도 가능
		}
	</script>

입력

window.confirm()

어떤 질문에 대해 "예/아니오"의 결과를 얻을 때 사용
확인 버튼과 취소 버튼이 나타나며 확인 버튼 클릭 시 true, 취소 버튼 클릭 시 false 리턴

<script>
		function checkConfirm(){
			var result = confirm('확인과 취소를 누를 수 있습니다.')
			
			if(result) {
				alert('확인을 누르셨군요 : ' + result);
			} else {
				alert('취소를 누르셨군요 : ' + result);
			}
		}
	</script>

window.prompt()

텍스트 필드와 확인, 취소 버튼이 있는 대화상자
메시지를 입력한 후 확인 버튼을 누르면 입력한 메시지, 취소 버튼 클릭 시 null 리턴

<button onclick="checkPrompt();">winndow.prompt()</button>
	<script>
		function checkPrompt(){
			var result = prompt('이름을 입력하세요');
			console.log(result);
			if(result != null && result.trim() != '') { //띄어쓰기를 데이터로 인지하지 않기위해 trim 사용, 자스는 equals사용x 
				alert(result + '님 반갑습니다.');
			}
		}