자바스크립트 1일차

IT/Frontend

자바스크립트 1일차

_KH_ 2025. 4. 14. 11:09

최종 프로젝트 때 왠지 VIEW를 맡게 될 것 같아서 하는 스크립트 공부...

웹 문서 안에 <script> 태그를 작성하는 방법은 다양하다.

다만, JS는 웹 문서에서 이미지나 텍스트 등의 요소를 제어하는 경우가 많기 때문에 되도록이면 이미지나 텍스트 등을 다 표시한 후에 실행하는 것이 좋아서 </body> 태그 직전에 자바스크립트 소스를 삽입한다.

다만, 웹 문서 안에 삽입하는 것보다 외부 문서에 작성하고 파일을 연결하는 것이 훨씬 깔끔하고 유지보수성이 좋다.

<script src = "외부 스크립트 파일 경로"></script>

※ 자바스크립트는 HTML, CSS와 달리 대소문자를 구별한다.

[ 스크립트 해석 ]

<body>
	<h1 id="heading">자바스크립트</h1>
	<p id= "text">위 텍스트를 클릭해 보세요</p>

<script>
	var heading = document.querySelector('heading');
	heading.onclick = function() {
		heading.style.color = "red";
	}
</script>
</body>

h1 태그로 감싸져있는 자바스크립트 텍스트를 클릭하면 클릭 이벤트가 발생한다. 클릭하는 순간 글자의 색상이 빨간색으로 바뀜.

querySelector()

괄호 속에 제공한 선택자와 일치하는 문서 내 첫 번째 Element를 반환
일치하는 요소가 없다면 null 반환

[입출력]

[ 알림 창 출력 ] : alert()

 alert(메시지)

작은 알림 창을 띄워 메시지 표시
단순히 메시지를 보여주는 기능만 함

[ 확인 창 출력 ] : confirm()

confirm(메시지)

사용자가 확인이나 취소 버튼 중에 직접 클릭 가능
선택한 결과에 맞게 프로그램 동작

[ 프롬프트 창에서 입력받기 ] : prompt()

prompt(메시지) 또는 prompt(메시지, 기본값)

텍스트 필드가 있음
사용자가 간단한 메시지 입력 가능. 그 내용을 가져와 프로그램에서 사용할 수 있다.
기본값을 지정해도 되고 안해도 됨

var name = prompt("이름을 입력하세요.");

[ 웹 브라우저 화면에 출력하기 ] : document.write()

<script>
	document.write("<h1>어서오세요</h1>");
</script>

위 내용 그대로 웹 브라우저에 표시함
단순히 브라우저 화면에서 결괏값을 확인하는 용도
웹 문서(document)에서 괄호 안의 내용을 표시(write)하는 명령문
내용, HTML 코드, 변수, 연결 연산자 모두 작성 가능

＊ document 객체 함께 이해하기!

<script>
	var name = prompt("이름을 입력하세요.");
    document.write("<b><big>" + name + "</big></b>님, 환영합니다.");
</script>

[ 콘솔 창에 출력하기 ] : console.log()

<body>
	<h1>어서오세요</h1>
<script>
	var name = prompt("이름을 입력하세요.");
	console.log(name + "님, 환영합니다.");
</script>
</body>

console.log()에는 HTML 태그가 들어갈 수 없음
455P부터 이어서 작성 ~