[JavaScript] 자바스크립트 태그, 용어와 기본 입출력 방법

리버 River 2024. 3. 26. 22:31

2024. 3. 26. 22:31

1. 자바 스크립트

👩🏻‍🚀 자바 스크립트는 프로그램을 실행하는 도중에 변수에 저장되는 데이터 타입이 동적으로 바뀌는 동적 타입 언어

1) 웹 문서 안에 <script> 태그로 자바스크립트 작성

🍯 소스 코드가 짧을 경우 웹 문서에서 자바스크립트를 실행할 위치에 바로 코드 작성 가능

🍯 <script></script> 태그 사용

🍯 가급적 이미지나 텍스트 등의 요소를 다 표시한 후에 실행

🍯 영어 대소문자를 구별함

<body>
    <!-- 글자색 바꾸기 -->
    <h1 id="heading">자바스크립트</h1>
    <p id="text">위 텍스트를 클릭해 보세요</p>
    
<script>
    let heading = document.querySelector('#heading');
    heading.onclick = function() {
        heading.style.color = 'red';
    }
</script>
</body>

2) 외부 스크립트 파일로 연결해서 작성

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

🍯 CSS 처럼 자바스크립트 소스도 따로 파일로 저장한 후 웹 문서에 연결해서 사용 가능

🍯 외부 자바스크립트 파일은 <script> 태그 없이 소스만 작성하고 확장자는 *.js로 저장

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

    <!-- css 처럼 외부 파일로 만들어서 실행 가능. -->
    <script src="js/change-result.js"></script>

</body>

2. 자바스크립트 용어와 기본 입출력 방법

1) 식 espression과 문 statement

🐝 '식'은 표현식이라고도 함. 어떤 값을 만들어 낼 수 있다면 모두 식이 될 수 있고, 식은 변수에 저장됨

🐝 '문'은 명령과 비슷. 문의 끝에는 세미콜론(;)을 붙여서 구분 ex. 조건문, 제어문

inch * 2.54 // 연산식은 식
"안녕하세요?"; // 문자열도 식
5           // 숫자도 식

2) 간단한 입출력 방법

(1) 알림 창 출력

alert(메시지)

🐝 알림창을 만드는 방법은 alert()를 입력하고 괄호 안에 따옴표와 함께 메시지를 넣어주면 된다.

<script>
    alert('안녕하세요!');
    alert(10 * 30);
</script>

(2) 확인 창 출력

confirm(메시지)

🐝 알림 창은 단순히 메시지를 보여주는 기능만 하지만, 확인 창은 사용자가 [확인], [취소] 버튼 중에서 직접 클릭

🐝 확인을 눌러야 이후의 코드가 실행(alert()함수가 종료)이 됨

<script>
    var reply = confirm('정말 배경 이미지를 바꾸겠습니까?')
</script>

(3) 프롬프트 창에서 입력받기

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

🐝 프롬프트 prompt 창은 텍스트 필드가 있는 작은 창

🐝 텍스트 필드 안에 간단한 메시지를 입력할 수 있으며 그 내용을 가져와 프로그램에 사용 가능

🐝 기본값을 지정하지 않으면 빈 텍스트 필드로 표시

<script>
    var name = prompt("이름을 입력하세요.", "홍길동");
</script>

(4) 브라우저 화면에 출력을 담당하는 document.write()문

🐝 결과값을 확인하는 용도로 많이 쓰임

🐝 괄호 안에 결과값이 저장된 변수나 html 태그를 따옴표 안에 넣을 수도 있다.

<script>
    document.write('<h1>환영합니다.</h1>')
</script>

(5) 콘솔 창에 출력하는 console.log()문

🐝 괄호 안의 내용을 콘솔 창에 표시. 콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간이다.

🐝 콘솔 창에서 소스 코드의 오류를 발견하거나 변숫값을 확인할 수도 있다.

🐝 괄호 안에 변수, 따옴표 사이에 표시할 텍스트를 넣을 수 있다. but! html 태그는 불가

주의점 : 자바 스크립트가 각각의 문장을 구별하는 방법은
1) 문장의 끝에 ;(세미 콜론) 2) 줄 바꿈 둘 중 하나
다른 언어로의 확장(파이썬, 코틀린을 제외한 대부분의 언어가 세미 콜론 사용, 즉 1번 사용) 및
명료성을 위해 세미 콜론을 붙이는 것이 좋음. (해당 라인을 작업 중인지 완료 했는지 구분)

<script>
    console.log('안녕하세요')
    console.log(10*30)
</script>

콘솔 에러 확인하기 - 빨간색 메세지로 나온다.
ReferenceError : 단어 오탈자 / SyntaxError : 기호에서 오탈자

<script>
    aler('안녕하세요!'); /* Uncaught ReferenceError: aler is not defined */
</script>

[ 내용 참고 : IT 학원 강의 및 책 'Do it HTML+CSS+자바스크립트 웹 표준의 정석' ]

저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] 반복문 \| for문, while문, break문, continue문 (0)	2024.03.28
[JavaScript] if 조건문 (if-else & else-if), switch 문 (1)	2024.03.28
[JavaScript] var 변수, let과 const (1)	2024.03.27
[JavaScript] 산술연산자, 복합대입연산자, 비교연산자, 논리연산자, 삼항연산자 (1)	2024.03.27
[JavaScript] 기본 문법 \| 변수, 자료형 및 자료형 검사, 자료형 변환 (0)	2024.03.27

ID_ allriver