1. 자바스크립트 시작

자바스크립트는 정적인 HTML페이지에 동적인 상황을 제공해주는 언어이다.

자바스크립트는 사용자의 입력에 따른 계산 뿐만 아니라, 서버 통신에도 이용되며 브라우저의 제어, 나아가서 웹 애플리케이션 개발을 가능하게 한다.

자바스크립트는 세 가지 방법으로 작성할 수 있다.

1. HTML 태그에 이벤트 리스너 직접 작성

2. <script> 태그 내에 작성 (head나 body 어디든 작성되어도 된다!)

3. 외부의 자바스크립트 파일을 참조(경로, url 등으로)한다.

다음은 사과가 mouseover 되면 바나나로 바뀌는 웹페이지의 예시이다.

<head>
    <script>
        function over(obj){
            obj.src="media/banana.png";
        }
        function out(obj){
            obj.src="media/apple.png";
        }
        </script>
    <script src="ex1.js"></script>
</head>
<body>
    <h3>자바스크립트 동작 위치</h3>
    <img src="media/apple.png" onmouseover="this.src='media/banana.png'" onmouseout="this.src='media/apple.png'"><hr>
    <img src="media/apple.png" onmouseover="over(this)" onmouseout="out(this)"><hr>
    <img src="media/apple.png" onmouseover="over2(this)" onmouseout="out2(this)"><hr>
</body>

-javascript 외부 소스(확장자는 .js이다.)
function over2(obj){
    obj.src="media/banana.png";
}
function out2(obj){
    obj.src="media/apple.png";
}

다음 소스에서, onmouseover은 마우스를 올리는, onmouseout은 마우스를 내리는 이벤트 리스너이다.

다음 붉은색 부분은 1번, 자바스크립트를 태그 내에 그대로 삽입하는 방식이다. img 태그 내에 이벤트 리스너를 직접 삽입했다.

주황색 부분은 2번, head에 script 태그를 열어 자바스크립트 코드를 작성했다.

초록색 부분은 3번, 외부 파일에 자바스크립트 코드를 작성해 외부에 참조했다. 이 때, .js 파일에는 script 태그가 있어서는 안된다.

마찬가지로 다른 태그에도 자바스크립트 속성이 적용된다.

    <script>
        function a(){
            alert("클릭을 하셨군요!");
        }
    </script>
</head>
<body>
    <button onclick="a()">클릭</button>
</body>

다음 소스에서 alert 코드는 경고창을 띄우는 소스이다.

다음처럼 a에 이벤트 리스너를 적용해도 자바스크립트 코드가 실행된다.

자바 스크립트 코드는 HTML을 직접 삽입하여 출력할 수도 있다.

이를 가능케 해주는 코드가 document.write() 혹은 document.writeln()이다.

(자바 스크립트는 자바 언어를 바탕으로 하기 때문에, 클래스, 변수, 메소드로 나뉜다. 자바스크립트 같은 경우는 document=new document()로 이미 클래스가 적용되어있기 때문에, 클래스 명을 선언해주어야 하는 자바 언어로써, 앞에 document를 반드시 입력해주어야 한다. 변수를 받아 적용하게 되는 자바스크립트 코드들은 자바의 메소드와 같은 역할을 한다.)

따라서, 코드 내부의 괄호 안에 들어가는 매개변수에 따라 출력되는 값이 바뀌고, 매개변수로 태그를 직접 입력해도 무방하다.

<body>
    <h3>Document의 활용</h3><hr>
    <a href="www.naver.com">naver</a>
    <script>
        document.write("<h3>welcome!</h3>"); //괄호 안의 변수를 매개변수라고 한다.
        document.write("2+3=<br>");
        document.write("<mark>7입니다.</mark><br>");
        t=document.title;
        document.write(t);
        a=document.anchors;
        document.write(a);
</script>
</body>

다음과 같이 html처럼 태그를 직접 넣어서 출력이 가능하다. 단, 이때는 ""(큰 따옴표) 안에 내용이 존재해야만 한다.

t=document.title; 처럼 변수로 지정해서 호출하는 것도 가능하다.

alert와 마찬가지로 자바스크립트에는 사용자 입출력을 받을 수 있는 다이얼로그가 있다.

alert를 제외하고, prompt와 confirm이 있다. prompt는 사용자가 변수를 직접 입력하는 형태이고, confirm은 true와 false 값만을 묻는다.

    <script>
        function a(){
            name=prompt("이름을 입력하세요.","");
            document.writeln(name);
            ok = confirm("결제할까요?");
            if(ok){
                document.writeln("결제 OK");
            }else{
                document.writeln("결제 close");
            }
        }
    </script>