23.03.09 학습일지

이준영·2023년 3월 9일

JavaScript js

함수 / 객체

사용자 정의에서 문법을 읽히고

내장(모듈, 라이브러리, API) -> 재활용성 용이
설명서 확인하고 사용방법을 익힌다.
https://developer.mozilla.org/ko/doc/Web -> 참고

API - Application Programming Interface(애플리케이션 프로그램 인터페이스)

배열 - 집합적인 저장소

순서(인덱스)가 있는 저장소 - Array(List)
중복을 배제하는 알고리즘을 포함하는 저장소 - Set
키(문자열), 값을 구조로 저장하는 저장소 - Map

set

안의 값에서 중복된 값을 제거한다.
length가 아닌 size로 길이를 출력한다.
인덱스 구조가 아니라 배열처럼 [0]과 같이 쓴다면 오류가 발생한다.

    <script type="text/javascript">
        let set = new Set();
        console.log(set);

        let set1 = new Set( [1, 2, 3, 4, 1, 2, 3, 4] );  --> 중복된 값을 제거
        console.log(set1);
        //set은 length가 아닌 size로 길이를 출력
        console.log(set1.size);
        //set은 인덱스 구조가 아니라 오류 발생, for of문으로 값 출력
        //console.log(set1[0]);

        for (let data of set1) {
            console.log(data);
        }
    </script>

add로 직접 값을 추가해갈수도 있다.

    <script type="text/javascript">
        let set = new Set();

        set.add(1);
        set.add(2);
        set.add(3);
        set.add(4);
        set.add(4);   --> 중복이라 제거됨

        console.log(set);
    </script>

Map

    <script type="text/javascript">
        const map = new Map();
        console.log(map);

        //2차원 배열처럼,,
        const map1 = new Map([
            ['key1', 'value1'],  //{}로 묶어도 된다. {key:1, value:10}} 이렇게
            ['key2', 'value2'],
            ['key3', 'value3'],
            ['key4', 'value4'],
        ]
            );
        console.log(map1);
        console.log(map1.size);

        console.log(map1[0]);  //undefined

        for(let data of map1) {
            console.log(data);
            console.log(data[0], data[1]);  //키, 값
        }

        //key value 를 변수로 줘서 for문 사용 가능하다.
        for(let [key, value] of map1) {
            console.log(key, value);
        }
    </script>

map.set

직접 키 값 추가

    <script type="text/javascript">
        const map = new Map();

        //위의 set이 아닌 명령어다
        map.set('key1', 'value1');
        map.set('key2', 'value2');
        map.set('key3', 'value3');

        //method chaining - .이용하여 한번에 쓰는 것
        map.set('key1', 'value1').set('key2', 'value2');
;

        for(let [key, value] of map) {
            console.log(key, value);
        }
    </script>

window

window - DOM/ / BOM의 최상위 객체 / browser와 연관되어 있음
window는 생략 가능하다.

window.open('url', '창이름', '옵션')

새 창(새로운 tab) 생성

    <script type="text/javascript">
        //window.open('url', '창이름', '옵션') (window 생략가능)
        // 새 창(새로운 tab) 생성
        open('https://www.daum.net');
        
        //640 X 960 크기의 새로운 창 생성
        open('https://www.daum.net', 'winopen', 'width=640, height=960' );
        
        //url뿐 아니라 내 파일을 새 창에 띄울 수도 있다.
        open('./math3.html', 'winopen', 'width=640, height=960' );
    </script>

html 기능들을 사용하여 작업할 수 있다(button 이용하기)

<body>
    <script type="text/javascript">
        //window.open('url', '창이름', '옵션') (window 생략가능)
        // 새 창(새로운 tab) 생성
        // open('./math3.html', 'winopen', 'width=640, height=960' );
        const openWin = function() {
            open('https://www.daum.net', 'winopen', 'width=640, height=960' );
        };

        //옵션 - top / left : 창의 위치  or width / height : 창의 크기
    </script>
</body>
<button onclick="openWin()">창 열기</button>   --> 버튼을 누르면 새 창이 열림

누르면 해당 링크로 가는 새 창이 열린다.

close = 오픈된 창 닫기

<body>
    <script type="text/javascript">

        let child;
        const openWin = function() {
            child = open('https://daum.net', 'winopen', 'width=640, height=960' );
        };

        const closeWin = function() {
            child.close();
        }
    </script>
</body>
<button onclick="openWin()">창 열기</button>
<button onclick="closeWin()">창 닫기</button>

누르면 열고 닫을 수 있다.

창의 위치 가운데로 조절하기

공식 - (screen.width/2) - (내가 지정한 width/2) --> height도 동일

        //전체 영역
        console.log(screen.width, screen.height);
        //사용 가능한 영역
        console.log(screen.availWidth, screen.availHeight);

<body>
    <script type="text/javascript">
        const goUrl = function() {
            let width = 600;
            let height = 800;

            let left = screen.width/2 - width/2;
            let top = screen.height/2 - height/2;

            let option = `top=${top}, left=${left},
            width=${width}, height=${height}`;

            window.open('https://www.daum.net','daum',option);
        }
    </script>
</body>
<button onclick="goUrl()">창 열기</button>

버튼 클릭시 가운데에 창이 열린다.

location(위치)

    <script type="text/javascript">
        console.log(location.href);
        console.log(location.hostname);
        console.log(location.protocol);
    </script>

location.href 이용하여 사이트 바로가기

<head>
    <script type="text/javascript">
        const goUrl = function() {
            location.href = 'https://www.daum.net';
        };
    </script>
</head>
<body>
    <script type="text/javascript">
        //자동이동

    </script>
</body>
<button onclick="goUrl()">다음 바로가기</button>

누르면 해당 사이트로 이동

응용 - 5초 후에 해당 사이트 이동

<head>
    <script type="text/javascript">
        const goUrl = function() {
            setTimeout(function() {

            location.href = 'https://www.daum.net';
            
        }, 5000);
    };
    </script>
</head>
<body>
    <script type="text/javascript">

    </script>
</body>
<button onclick="goUrl()">다음 바로가기</button>

navigator

브라우저 / 시스템에 대한 정보 얻을 수 있다.

    <script type="text/javascript">
        console.log(navigator.appCodeName);
        console.log(navigator.appName);
        console.log(navigator.platform);
        console.log(navigator.userAgent); 
    </script>

AppleWebKit = 브라우저의 오픈 소스 라이브러리
windows nt 10.0 ~~ :
크롬에는 맨 밑의 edg 부분이 없다.

history

브라우저의 뒤로가기

<head>
    <title>Document</title>
    <script type="text/javascript">
        const backUrl = function() {
            history.back();
            //history.go(-1);  --> 이렇게 쓰기도 한다.
        };
    </script>
</head>
<body>
    
</body>
<button onclick="backUrl()">뒤로가기</button>

뒤로가기 버튼을 누르면 뒤로 가진다.

DOM (Document Object Model)

자바스크립트같은 프로그래밍 언어로 웹문서에 접근하고 제어할 수 있도록 체계적으로 정리하는 방법
부모, 자식, 형제 요소로 구분해서 관계를 나타내고 이러한 구조를 DOM 트리라고 한다.
DOM 트리의 시작 부분은 루트 노드라고 한다.
순서에 맞게 써야 오류나지 않고 잘 나온다

prompt 활용하여 배경색 바꾸기

<head>
    <script type="text/javascript">
        const changePrompt = function() {
            document.bgColor = prompt('배경색 입력?', '');
        };
    </script>
</head>
<body>
	<button onclick="changePrompt()">색깔 변경1</button>
</body>

검색창에 색깔 입력하면 해당 색깔로 배경색이 바뀐다.

forms (배열 형식)

<body>
    <form name="frm1" action="test1.html1"></form>
    <form name="frm2" action="test1.html2"></form>
    <form name="frm3" action="test1.html3"></form>
    
    <script type="text/javascript">
        //forms은 배열형식, 배열이나 form의 이름으로 접근 가능
        console.log(typeof document.forms);
        console.log(document.forms.length);    --> <form></form> 개수만큼 길이 출력
        console.log(document.forms[1]);
        console.log(document.frm1);

        console.log(document.frm1.action);     -->누르면 해당 링크로 이동할 수 있는 링크 출력
        console.log(document.forms[0].action);
    </script>
</body>

window.onload(dom 읽고 난 후 읽는다), button을 사용하여 클릭하면 읽게 만든다.

일반적으로는 순서대로 코드를 쓰고 그렇지 않으면 오류가 발생하나 , 특정 이벤트를 사용하여 막을 수 있다.

<body>
    <script type="text/javascript">
        //이벤트
        //window.onload  --> dom을 다 만들고 난 뒤에 읽는다.
      	window.onload = function() {
        console.log(typeof document.forms);
        console.log(document.forms.length);
        console.log(document.forms[1]);
        console.log(document.frm1);

        console.log(document.frm1.action);
        console.log(document.forms[0].action);
        };
    </script>

<body>
    <script type="text/javascript">
		const checkfrm = function() {
        console.log(typeof document.forms);
        console.log(document.forms.length);
        console.log(document.forms[1]);
        console.log(document.frm1);

        console.log(document.frm1.action);
        console.log(document.forms[0].action);
        };
    </script>

    <form name="frm1" action="test1.html1"></form>
    <form name="frm2" action="test1.html2"></form>
    <form name="frm3" action="test1.html3"></form>

    <button onclick="checkfrm()">form 내용 읽기</button>     --> 버튼 클릭하면 위 그림과 같은 함수 읽음
</body>

form 기능의 다양한 입력창들을 이용하여 값 가져오기

<body>
    <script type="text/javascript">
        const checkfrm = function() {
            console.log(document.frm1.data1.value);
            console.log(document.frm1.data2.value);
            console.log(document.frm1.data3.value);
            console.log(document.frm1.data4.value);
        };
    </script>
    <form name="frm1" action="test1.htm1">
        data1 : <input type="text" name="data1" value="값1"><br><br>
        data2 : <input type="text" name="data2" value="값2"><br><br>
        password : <input type="password" name="data3"><br><br>
        <textarea name="data4" cols="20" rows="5"></textarea><br><br>
        <input type="button" value="form 내용 읽기" onclick="checkfrm()">
    </form>
</body>

data1 내용을 쓰면 data2 박스에 보이게 하기

<body>
    <script type="text/javascript">
        const checkfrm = function() {
            document.frm1.data2.value = document.frm1.data1.value;
        };
    </script>
    <form name="frm1" action="test1.htm1">
        data1 : <input type="text" name="data1"><br><br>
        <input type="button" value="내용 읽기" onclick="checkfrm()"><br><br>
        data2 : <input type="text" name="data2" readonly><br><br>
    </form>
</body>

data1 박스에 입력 후 버튼을 클릭하면 2 박스에 자동으로 똑같은 문자가 입력됨

응용 - 첫글자 대문자 출력하는 함수를 위 함수에 대입

<head>
    <script type="text/javascript">
        const upperWord = function(data) {
            let words = data.split(' ');

            let result = '';
            for(let word of words) {
                result += word.slice(0,1).toUpperCase() + word.slice(1) + ' ';
            }
            return result;
        };

        const checkfrm = function() {
            document.frm1.data2.value = upperWord(document.frm1.data1.value);
        };
    </script>
</head>
<body>
    <script type="text/javascript">
    </script>
    <form name="frm1" action="test1.htm1">
        data1 : <input type="text" name="data1"><br><br>
        <input type="button" value="대문자로 변경" onclick="checkfrm()"><br><br>
        data2 : <input type="text" name="data2" readonly><br><br>
    </form>
</body>

checkbox 이용하여 check 확인하기

    <script type="text/javascript">
        const checkfrm = function() {
            console.log(document.frm1.cb1.checked);
            console.log(document.frm1.cb1.value);
            console.log(document.frm1.cb2.checked);
            console.log(document.frm1.cb2.value);
            console.log(document.frm1.cb3.checked);
            console.log(document.frm1.cb3.value);
            console.log(document.frm1.cb4.checked);
            console.log(document.frm1.cb4.value);
        };
    </script>
</head>
<body>
    <script type="text/javascript">
    </script>
    <form name="frm1">
        <input type="checkbox" name="cb1" value="사과">사과<br>
        <input type="checkbox" name="cb2" value="딸기" checked>딸기<br>
        <input type="checkbox" name="cb3" value="키위">키위<br>
        <input type="checkbox" name="cb4" value="자몽">자몽<br>

        <input type="button" value="내용읽기" onclick="checkfrm()">
    </form>
</body>

check되면 true 안되어있으면 false 콘솔창에 출력하는 소스

위 소스 반복문으로 쓰기

name 이름 같으면 자동 배열화 되는 점 이용하기

<head>
    <script type="text/javascript">
        const checkfrm = function() {
                for(let i = 0; i < document.frm1.cb.length; i++) {
                    if(document.frm1.cb[i].checked) {
                        console.log(document.frm1.cb[i].value);
                    }
                }        
            };
    </script>
</head>
<body>
    <script type="text/javascript">
    </script>
    <form name="frm1">
        <!-- 이름 같으면 자동 배열화됨 -->
        <input type="checkbox" name="cb" value="사과">사과<br>
        <input type="checkbox" name="cb" value="딸기" checked>딸기<br>
        <input type="checkbox" name="cb" value="키위">키위<br>
        <input type="checkbox" name="cb" value="자몽">자몽<br>

        <input type="button" value="내용읽기" onclick="checkfrm()">
    </form>
</body>

전체선택 / 전체해제 버튼 적용하기

<head>
    <script type="text/javascript">
    	//전체선택을 해주는 함수
        const selectAll = function() {
            for(let i = 0; i < document.frm1.cb.length; i++) {
                if(document.frm1.cb[i].checked == false) { 
                    document.frm1.cb[i].checked = true;
                }
            }
        };
		
        //전체해제를 해주는 함수
        const deleteAll = function() {
            for(let i = 0; i < document.frm1.cb.length; i++) {
                if(document.frm1.cb[i].checked == true) {
                    document.frm1.cb[i].checked = false;
                }
            }
        };
    </script>
</head>
<body>
    <script type="text/javascript">
    </script>
    <form name="frm1">
        <input type="button" value="전체선택" onclick="selectAll()">
        <input type="button" value="전체해제" onclick="deleteAll()">
        <br><br>
        <input type="checkbox" name="cb" value="사과">사과<br>
        <input type="checkbox" name="cb" value="딸기">딸기<br>
        <input type="checkbox" name="cb" value="키위">키위<br>
        <input type="checkbox" name="cb" value="자몽">자몽<br>
    </form>
</body>

버튼에 따라 전체선택/ 해제 된다.

radio(단일)

사용 방법은 checkbox와 동일하나, 단일이라는 차이와, 단일 선택이기 때문에 전체선택, 해제가 없다는 점이 차이이다.

    <script type="text/javascript">
        const checkfrm = function() {
            for(let i = 0; i<document.frm1.cb.length; i++){
            if(document.frm1.cb[i].checked){
                console.log(document.frm1.cb[i].value);
            }
        }
        };
    </script>
</head>
<body>
    <script type="text/javascript">
    </script>
    <form name="frm1">
        <input type="button" value="선택" onclick="checkfrm()">
        <br><br>
        <input type="radio" name="cb" value="사과">사과<br>
        <input type="radio" name="cb" value="딸기">딸기<br>
        <input type="radio" name="cb" value="키위">키위<br>
        <input type="radio" name="cb" value="자몽">자몽<br>
    </form>
</body>

select

<head>
    <script type="text/javascript">
            const checkfrm = function() {
                // console.log(document.frm1.sel.options.length);   
                // console.log(document.frm1.sel.options[0]);
                //선택된 항목의 인덱스 위치 콘솔에 출력
                // console.log(document.frm1.sel.selectedIndex);
                //선택된 항목의 인덱스와 해당 값 출력
                // console.log(document.frm1.sel.options[document.frm1.sel.selectedIndex]);
                //선택된 항목의 벨류값을 콘솔에 출력
                //console.log(document.frm1.sel.options[document.frm1.sel.selectedIndex].value);
                //선택된 항목의 텍스트값을 콘솔에 출력
                //console.log(document.frm1.sel.options[document.frm1.sel.selectedIndex].text);

            };

            const selectfrm = function() {
                document.frm1.sel.selectedIndex = 1;
            };  
    </script>
</head>

<body>
    
    <form name="frm1">
        <select name="sel">
            <!-- 자동 배열 취급 -->
            <option value="사과1">사과</option>
            <option value="딸기1" selected>딸기</option>
            <option value="키위1">키위</option>
            <option value="자몽1">자몽</option>
        </select>

        <input type="button" onclick="checkfrm()" value="내용확인">
        <input type="button" onclick="selectfrm()" value="선택하기 확인">
    </form>
</body>

셀렉트안에 어떤 것을 선택해도 선택하기 확인 버튼을 클릭하면 해당 셀렉트의 인덱스로 가진다.

응용문제 - 선택한 사이트에 따라 검색하게 하기

<head>
    <script type="text/javascript">
        const searchfrm = function() {
            let query = document.frm1.query.value;
            let siteIndex = document.frm1.sitename.selectedIndex;
        if(siteIndex == 0) {  -->options의 value를 통하여 가정법을 짜는 방법도 있다.
            location.href = 'https://search.naver.com/search.naver?query=' 
            + query;
        }
        if (siteIndex == 1) {
            document.frm1.query.value;
            location.href = 'https://search.daum.net/search?q='
            + query;
        }
        };
    </script>
</head>
    
<body>
    
    <form name="frm1" method="get">
        검색어 : <input type="text" name="query" placeholder="검색어 입력">
        <br><br>
        검색 사이트 : <select name="sitename">
            <option value="naver">네이버</option>
            <option value="daum">다음</option>
        </select>
        <input type="button" value="검색하기" onclick="searchfrm()">
    </form>
</body>

네이버를 선택하고 검색하면 해당검색어가 입력된 네이버 사이트로, 다음은 다음으로 가진다!

업그레이드 - 검색어 하나이상 입력해야 작동, 사이트하나 추가

<head>
    <script type="text/javascript">
        const searchfrm = function() {
            let query = document.frm1.query.value;
            let siteIndex = document.frm1.sitename.selectedIndex;
        if(query <= 1) {
            alert('1자 이상 입력하세요!')
        }
        else{
        switch(siteIndex) {
            case 0: location.href = 'https://search.naver.com/search.naver?query=' 
            + query;
            break;
            case 1: location.href = 'https://search.daum.net/search?q=' + query;
            break
            case 2: location.href = 'https://www.google.co.kr/search?q=' +query;
            break;
        }
    }
};
    </script>
</head>
    
<body>
    
    <form name="frm1" method="get">
        검색어 : <input type="text" name="query" placeholder="검색어 입력">
        <br><br>
        검색 사이트 : <select name="sitename">
            <option value="naver">네이버</option>
            <option value="daum">다음</option>
            <option value="google">구글</option>
        </select>
        <input type="button" value="검색하기" onclick="searchfrm()">
    </form>
</body>

이준영

끄적끄적

이전 포스트

2023.03.08 학습일지

다음 포스트