Chap 1. JavaScript 개요

김승현·2021년 11월 4일

JavaScript

웹 페이지가 지능적으로 동작할 수 있도록 구현할 수 있는 스크립트 (동적인 로직)
실행 방식 : 인터프리터 방식
ECMA 스크립트 표준을 따르는 대표적인 웹 기술 방식
- ECMA 스크립트 : 웹에서 동작하는 스크립트의 표준

JavaScript 작성 방식

inline 방식

구분	작성위치	연결방식
inline	HTML 페이지 내	자바스크립트와 HTML코드 연결 (O)
internal	HTML 페이지 내	자바스크립트와 HTML코드 연결 (X)
external	외부 파일	자바스크립트와 HTML코드 연결 (X)

inline 방식

<!--태그 내에 자바스크립스 생성-->
<button onclick="javascript:alert('hello');">클릭</button>
    
<!--태그 내에 자바스크립트 함수 연결-->
<button onclick="myClick();">클릭</button>

<script>
	function myClick(){
            
		alert("성공");
            
	};
</script>

internal 방식

    <!--요소(태그) 밑에 작성하는 방식-->
    <button id="btn1">클릭</button>

    <script>
        document.getElementById("btn1").onclick = function() {
            alert("성공1");
        };
    </script>
    
    
    <!--window.onload를 이용한 방식-->
    <script>
        window.onload = function() {
            document.getElementById("btn2").onclick = function() {
                alert("성공2")
            };
        };
    </script>

    <button id="btn2">클릭</button>

external 방식


	/*js 외부 파일 경로 : js/test.js */
	window.onload = function () {
	    document.getElementById("btn1").onclick = function () {
	        alert("성공");
	    };
	};


    <script src="js/test.js"></script>
    <button id="btn1">클릭</button>

데이터 출력 함수

구분	의미
document.write(내용);	브라우저 화면상의 해당 내용 출력
window.alert(내용);	메시지 알림창을 통해 출력
innerText =내용 innerHTML = 내용;	태그 엘리먼트의 내용 (태그 사이의 값) 변경하여 출력 - innerText 는 문자열 형태로 (Text) 출력 - innerHTML은 HTML 태그 형태로 출력
console.log(내용);	개발자 도구의 console 화면에 출력 - 특정 객체에 대한 내부를 보고 싶을때 console을 통하여 확인 가능

document.write();

   <script>
        function test() {

            var table = " <table border='1px'>" +
                "<tr>  " +
                "<th>이름</th>" +
                "<th>나이</th>" +
                "<th>주소</th>" +
                " </tr>" +
                "<tr>" +
                "<td>임꺽정</td>" +
                "<td>20</td>" +
                "<td>경기도</td>  " +
                "</tr>" +
                "</table>";

            document.write(table);
        }

    </script>
    <button onclick="test();">테이블 생성</button>

alert();

    <button id="btn">클릭</button>

    <script>
        document.getElementById("btn").onclick = function() {

            alert("alert을 이용하여 출력");
        };
    </script>

innerText = 내용;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        #div {
            border: 1px solid red;
            width: 300px;
            height: 200px;
        }
    </style>

</head>

<body>

    <div id="div"></div>
    <input type="text" id="input">
    <button id="btn">클릭</button>

    <script>
        document.getElementById("btn").onclick = function() {
            
            var input = document.getElementById("input");
            var div = document.getElementById("div");

            /* 이전 내용 + 추가된내용 + 줄개행 추가*/
            div.innerText = div.innerText + input.value + "\n";
            
            /*input 박스 내용 초기화*/
            document.getElementById("input").value=" ";
            
        };
    </script>

</body></html>

innerHTML = 내용 ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <style>
        #div {
            border: 1px solid red;
            width: 300px;
            height: 200px;
        }
    </style>

</head>

<body>

    <div id="div"></div>
    <input type="text" id="input">
    <button id="btn">클릭</button>

    <script>
        document.getElementById("btn").onclick = function() {
            
            var input = document.getElementById("input");
            var div = document.getElementById("div");

            /* 이전 내용 + 추가된내용 + 줄개행 추가*/
            div.innerHTML = div.innerHTML + input.value + "</br>";
            
            /*input 박스 내용 초기화*/
            document.getElementById("input").value=" ";
            
        };
    </script>

</body></html>

console.log() ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>

<body>

    <input type="text" id="input">
    <button id="btn">클릭</button>

    <script>
        document.getElementById("btn").onclick = function() {

           var input = document.getElementById("input").value;
           
	   console.log(input);

        };
    </script>

</body></html>

데이터를 입력받는 함수

함수	내용	리턴값
window.confirm(내용)	- 어떤 질문에 대해 "예/아니오"의 결과를 얻을 때 사용 - 대화창 : 메시지, 확인/취소 버튼 표시	확인(true) / 취소(false)
window.prompt(내용)	- 대화창 : 텍스트 필드, 확인/취소 버튼	입력한 메시지 내용
input="text"+ innerHTML 활용	- input태그의 value 값을 입력 또는 가져오기

window.confirm() ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>

<body>

    <button id="btn">클릭</button>

    <script>
        
        document.getElementById("btn").onclick = function() {

            var result=window.confirm("당신이 바보이면 확인을 눌러주세요")
            
            if(result==true){
                alert("바보래요~~!")
            }else{
                alert("거짓말!")
            }
        };
        
    </script>

</body></html>

window.prompt(내용) ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>

<body>

    <p id="print" style="width:300px; height:200px; border:1px solid red"></p>
    <button onclick="test();">클릭</button>

    <script>
        function test() {
            var name = window.prompt("당신의 이름은");
            var age = window.prompt("당신의 나이는?")
            var addr = window.prompt("당신의 주소는?");

            var print = document.getElementById("print");

            print.innerHTML = print.innerHTML + name + "/" + age + "/" + addr + "</br>";
        };
    </script>

</body></html>

input="text"+ innerHTML 활용 ;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>

<body>

    <p id="print" style="width:300px; height:200px; border:1px solid red"></p>
    <input type="text" id="data">
    <button onclick="input();">입력</button>
    <button onclick="rest();">초기화</button>

    <script>
        function input() {
            var data = document.getElementById("data");
            var print = document.getElementById("print");
            print.innerHTML += data.value + "</br>"

            document.getElementById("data").value = "";
        };

        function rest() {

            var print = document.getElementById("print");
            print.innerHTML = "";

        };
    </script>

</body></html>

HTML 태그 접근 함수

함수	의미
getElementById("아이디명")	태그의 ID 속성 값을 이용해서 태그 엘리먼트 객체 정보를 가져 옴 (1개)
getElementsByName("이름명")	태그의 name 속성값을 이용해서 태그 엘리먼트의 객체 정보를 배열에 담아서 가져옴
getElementsByTagName("태그명")	태그명을 이용해서 해당 태그들의 객체 정보를 배열에 담아서 가져옴

getElementsByName, getElementsByTagName 함수

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
    <span name="fruits">사과</span><br>
    <span name="fruits">배</span><br>
    <span name="fruits">바나나</span><br>
    <span name="person">홍길동</span><br>
    <span name="person">고길동</span><br>
    <span name="person">둘리</span><br>
    
    <button id="btn">클릭</button>
    
    <script>
        document.getElementById("btn").onclick=function(){
            
            //getElementsByName() 함수 이용
            var elements =document.getElementsByName("fruits");
            
            //getElementsByTagName() 함수 이용
            /*var elements =document.getElementsByTagName("span");*/
            
            for(var i=0; i<elements.length;i++){
                console.log(elements[i].innerHTML);
            };
        };
    </script>
    
</body>
</html>

CSS 에 접근 (style)

style 이라는 변수를 통하여 css값을 변경 가능

EX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <style>
        #print {

            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>

    <p id="print"></p><br>
    <button id="red">빨강</button>
    <button id="yellow">노랑</button>
    <button id="blue">파랑</button>

    <script>
        document.getElementById("red").onclick = function() {
            document.getElementById("print").style.backgroundColor = "red";

        };


        document.getElementById("yellow").onclick = function() {
            document.getElementById("print").style.backgroundColor = "yellow";

        };
        document.getElementById("blue").onclick = function() {
            document.getElementById("print").style.backgroundColor = "blue";

        };
    </script>

</body></html>

김승현

개발자로 매일 한 걸음

이전 포스트

Chapter 6. 애니메이션

다음 포스트

Chap 1. JavaScript 개요

JavaScript

JavaScript 작성 방식

inline 방식

internal 방식

external 방식

데이터 출력 함수

document.write();

alert();

innerText = 내용;

innerHTML = 내용 ;

console.log() ;

데이터를 입력받는 함수

window.confirm() ;

window.prompt(내용) ;

input="text"+ innerHTML 활용 ;

HTML 태그 접근 함수

getElementsByName, getElementsByTagName 함수

CSS 에 접근 (style)

EX

Chapter 6. 애니메이션

Chap2. 기본 문법

0개의 댓글