JavaScript

[JavaScript] 자바스크립트란

채니◟( ˘ ³˘)◞ 2023. 10. 13. 10:14

Html 은 웹 문서의 내용을 구성하고 css는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정한다.

최근 많이 사용하는 탭 기능을 사용하려면 자바스크립트를 이용한다.

사용자 정보를 서버로 전송하는 폼에서 입력된 정보가 형식에 맞는지, 마우스의 동작이나 키보드에서 어떤 키를 눌렀을 때 반응하는 기능에 이르기까지 자바스크립트의 역할이다.

 

 

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

 

js 코드가 짧을 경우 웹 문서에서 js 를 실행할 위치에 바로 코드를 작성할 수 있다.웹 문서에서 <script> </script> 태그 사이에 실행할 소스를 작성한다.<script> 태그는 문서안의 어디든 위치할 수 있고 삽입된 위치 그 자리에서 실행된다.여러개 사용도 가능하다.

 

 

외부 스크립트 파일로 연결해서 자바스크립트 작성한 예제

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #heading {
            color: chocolate;
        }
    </style>

</head>

<body>
    <div id="heading">자바스크립트</div>
    <script src="change-color.js"></script>
</body>

</html>
var heading = document.querySelector('#heading');
console.log(heading);
heading.onclick = function () {
    console.log('눌렸땅');
    heading.style.color = 'blue';
};

 

<script src = "change-color.js"></script>  코드를 통해 외부 자바스크립트 소스와 연결한다.

 

 

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

 

js 언어의 큰 줄기는 식(expression), 문(statement) 이다.자바스크립트에서 식은 표현식이라고도 하는데, 연산식 뿐 아니라 실제 값도 함수를 실행하는 것도 식이 된다.즉 어떤 값을 만들어 낼 수 있다면 모두 식이 되고 식은 변수에 저장된다.

 

이에 비해 문은 명령이다. 문의 끝에는 세미콜론을 붙여서 구분하고 조건문이나 제어문이 있다.

 

 

알림창 띄우기알림창은 웹 브라우저 에서 작은 알림창을 열어 메시지를 표시한다.

 

<body>
    <script>
        alert("짜잔!")
    </script>
</body>

 

 

확인 창 출력하기

 

알림창은 단순히 메시지를 보여주는 기능이지만 확인 창은 사용자가 확인이나 취소 버튼 중에서 직접 클릭할 수 있기에 선택한 결과에 맞게 프로그램이 동작한다.

 

<body>
    <script>
        confirm("정말 누르겟나")
    </script>
</body>

 

프롬포트 창에서 입력 받기

 

프롬포트(prompt) 창은 텍스트 필드가 있는 작은 창이다. 필드 안에 간단한 메시지를 입력해 그 내용을 가져와 프로그램에 사용할 수 있다.

 

<body>
    <script>
        var name = prompt("이름을 입력하세요", "윤채원");
    </script>
</body>

 

프롬포트 창의 기본값 지정 안하기

 

위의 코드에서 "윤채원" 을 삭제하면 위 사진과 같이 기본값이 없이 그냥 빈칸이 나온다.

 

 

 

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

 

document.write() 명령문을 자주 사용한다. js의 실행결과는 텍스트나 이미지로 출력하거나, 따로 지정한 영역에 내용을 표시하는 경우가 많다.하지만 단순히 브라우저 화면에서 결과값을 확인하는 용도로는 document.write() 를 많이 사용한다.일단 웹 문서에서 write 괄호 안의 내용을 표시하는 명령문이라고 알겠다.

 

<body>
    <script>
        document.write("<h1>짜잔!</h1>")
    </script>
</body>

 

웹 브라우저 화면에 표시할 내용과 변수를 섞어서 나타낼 수 있다.+ 연산자를 사용해 연결하는데 여기서 + 연산자는 더하기 기호가 아니라 연결 연산자이다.내용과 변수를 연결해주는 역할이다.

 

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

 

 

 

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

 

cosole.log() 문은 괄호 안의 내용을 콘솔 창에 표시한다.콘솔 창은 웹 브라우저의 개발자 도구 창에 포함되어 있는 공간으로 소스 코드의 오류를 발견하거나 변숫값을 확인할 수 있다.괄호안에는 변수가 들어갈 수 있고 "" 사이에 표시할 텍스트를 넣을 수 있다. 따옴표 안에 HTML 태그를 사용할 순 없다.

 

 

 

 

 

 

 

 

 

 

저작자표시 (새창열림)