코드 그라데이션

2. 자바스크립트 기본 입출력, 스타일 가이드 본문

Front/Mega-JavaScript

2. 자바스크립트 기본 입출력, 스타일 가이드

완벽한 장면 2023. 5. 17. 23:50

웹 안에 <script> 태그로 자바스크립트 작성하기

예시

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>글자색 바꾸기</title>
    <style>
        body {
            text-align: center;
        }
        #heading {
            color: blueviolet;
        }
        #text {
            color: gray;
            font-size: 15px;
        }
    </style>
</head>
<body>
    <h1 id="heading">공부하세요.</h1>
    <p id="text">위 텍스트를 입력해보세요</p>

    <script>
        var a = document.querySelector('#heading');
        a.onclick = function() { /*a가 클릭이 되면 이 작업을 수행해라 */
            a.style.color = "orange";
        }
    </script>
</body>
</html>

실행 결과

<추가> 클릭할때마다 바뀌게 하기

<body>
    <h1 id="heading">공부하세요.</h1>
    <p id="text">위 텍스트를 입력해보세요</p>

    <script>
        var a = document.querySelector('#heading');
        a.onclick = function() { /*a가 클릭이 되면 이 작업을 수행해라 */
            if(a.style.color == "blueviolet") {
                a.style.color = "orange";
            } else {
                a.style.color = "blueviolet";
            }
            
        }
    </script>
</body>

 

용어

  • 식 : 표현
  • 문 : 명령

간단한 입출력

알림 창(alert)

  • 변수를 확인하고 싶으면 변수를
  • 텍스트를 표시하고 싶으면 " " 안에 글자 적으면 되고,
  • 함수를 넣을 수도 있다.
alert（"안녕하세요?"）

결과 화면 예시

 

확인 창(alert)

  • 확인이나 취소 버튼 중에서 사용자가 선택할 수 있다.
var reply = confirm（"정말 배경 이미지를 바꾸겠습니까?"）;

결과 화면 예시

 

프롬프트 창 입력

  • 텍스트 필드가 있는 작은 창을 의미
  • 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며, 그 내용을 가져와 프로그램에서 사용할 수 있음.
var name = prompt（"이름을 입력하세요.", "아무개"); // 기본값 지정 
var name = prompt（"이름을 입력하세요."); // 기본값 미지정

결과 화면 예시

기본값 지정 시
기본값 미지정

 

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

  • document.write()단순히 브라우저 화면에서 결괏값을 확인하는 용도로는 document.write()를 많이 사용한다.
    document.write()를 완전히 이해하려면 document 객체를 알아야 함.
  • document.write()의 괄호 안에는 실제 웹 브라우저 화면에 표시할 내용이나 
  • 어떤 결괏값이 저장된 변수를 넣을수도 있다.
  • 괄호 안에서 큰따옴표(" ”)나작은따옴표(' ') 사이에 입력한 내용은 웹 브라우저 화면에 그대로 표시된다. 
  • 따옴표 안에는 HTML 태그도 함께 사용할 수 있다.
  • 원래 document가 HTML의 기본 문서의 형식
<script>
document. write（" 사11>어서오세요 </hl>"）;
</script>

결과 예시 화면

 

콘솔 창에 출력 : console.log()

  • 콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간
  • console.log() 문의 괄호 안에는 변수가 들어갈 수도 있고 따옴표 사이에 표시할 텍스트를 넣을 수도 있다.
  • 따옴표 안에 HTML 태그는 사용할 수 없다.
  • 콘솔 창 여는 단축키 : Ctrl + Shift + J
<body>
	<h1> 어서오세요 </hl>

	<script>
		var name = promt（"이름을 입력하세요."）;
		console.log（name + "님, 환영합니다."）;
	</script>
</body>

결과 화면 예시

 

 

스타일 가이드

자바스크립트 스타일 가이드

 

자료 참고 : 이지스퍼블리싱 교재

728x90

'Front > Mega-JavaScript' 카테고리의 다른 글

6. 자바스크립트 기본 문법 (4) 반복문  (0) 2023.05.20
5. 자바스크립트 기본 문법 (3) 조건문  (0) 2023.05.20
4. 자바스크립트 기본 문법 (2) 연산자  (0) 2023.05.19
3. 자바스크립트 기본 문법 (1) 변수, 자료형  (0) 2023.05.19
1. 자바스크립트 도입  (1) 2023.05.17
'Front/Mega-JavaScript' Related Articles more
Comments