개발하는 냥이 (=ↀωↀ=)

[Android] adb로 DeepLink 호출하기

뉴에이스 — Mon, 26 Jul 2021 17:08:34 +0900

딥링크 호출 테스트를 해야 해서 간단한 방법을 검색하는데 대부분 아래 방법이 나온다.

adb shell am start -a android.intent.action.VIEW -d {URI} {APP PACKAGE NAME}

하지만, 내경우는 왜인지 저렇게 하면 오류 발생.

제일 뒤에 패키지명을 제외 하고 입력하니 실행이 됬다!

adb shell am start -W -a android.intent.action.VIEW -d {앱에서 설정한 스킴으로 시작하는 URI}

까지 입력 후 실행!

[Android] 현재 연결은 사용자의 호스트 시스템의 소프트웨어의 의해 중단되었습니다

뉴에이스 — Mon, 5 Jul 2021 16:07:39 +0900

안드로이드 스튜디오에서 프로젝트 빌드시

"Gradle project sync failed"

"현재 연결은 사용자의 호스트 시스템의 소프트웨어의 의해 중단되었습니다"

에러 발생시

내 경우 노트북에 핫스팟을 킨 상태로 빌드를 했을때 오류가 발생

핫스팟 설정을 끄고 빌드하니 성공했다.

[Git] 모든 Branch 한번에 내려받기

뉴에이스 — Wed, 23 Jun 2021 15:37:10 +0900

프로젝트를 내려받을때 브랜치가 몇개 안된다면 일일이 체크아웃을 하지만

브랜치가 10개 이상... 20개 이상... 몇십개가 된다면 그걸 일일이 받는것도 노가다가 아닐 수 없다.

사용할 일이 많을것 같진 않지만 정리할겸 글 올리기.

1. git 명령어와 실행할 단축어 (alias) 등록

git config --global alias.clone-branches '! git branch -a | sed -n "/\/HEAD /d; /\/master$/d; /remotes/p;" | xargs -L1 git checkout -t'

2. 등록한 alias를 호출하여 브랜치 한번에 받기

git clone-branches

[Android] The binary version of its metadata is 1.5.1, expected version is 1.1.1

뉴에이스 — Thu, 10 Jun 2021 17:07:15 +0900

기존에 정상적으로 빌드가 되던 프로젝트인데 어느순간부터 빌드 에러가 발생

안드로이드 스튜디오는 업데이트 안했고,

소스 코드도 그대로이고,

플러그인을 업데이트 했는지는 모르겠다.. 하지만 안한거같은데!

이런 에러가 발생 ㅠㅠ

Module was compiled with an incompatible version of Kotlin. The binary version of its metadata is 1.5.1, expected version is 1.1.16.

여튼 이것때문에 안드로이드 스튜디오도 재설치해보고

설치된 플러그인도 삭제 해봐도 동일..

한참 씨름하다 gradle에 설정되어 있던 코틀린 버전을 올리고 해결 ㅠㅠ

기존에 설정되어 있던 코틀린 버전을 1.3.71 에서 1.4.32 로 변경 후 빌드 성공함

[Cocoa Pods] pod install 실행시 Analyzing dependencies(의존성) 에러 발생할 경우

뉴에이스 — Mon, 21 Dec 2020 11:28:32 +0900

프로젝트를 내려받아 pod install 을 실행하니 아래와 같은 에러가 발생했다.

오류를 자세히 읽어보면 해결방법을 알려준다.

pod install --repo-update 를 실행하여 pod lib 설치를 완료한다.

[iOS] Xcode 프로젝트 빌드시 "Command PhaseScriptExecution failed with a nonzero exit code" - "Permission denied" 에러

뉴에이스 — Mon, 2 Nov 2020 16:44:53 +0900

Mac에서 정상적으로 빌드가 되던 프로젝트를 윈도우로 옮겼다가 다시 받아서 테스트 하려니 빌드 에러가 발생했다.

Pod 라이브러리를 재설치도 해보고 클린빌드도 해보았으나 동일.

Command PhaseScriptExecution failed with a nonzero exit code 에러 위쪽에 있는

Permission denied. 권한이 없다고 한다.

해결방법은 저 아래쪽에 나와있는 xxxxxx.sh 파일에 대한 실행 권한이 없어 발생한 에러로

간단한 터미널 명령어로 해결 가능했다.

터미널 실행 후 에러에서 표시되는 xxxx.sh 파일이 있는 경로로 이동

다음 명령어 입력 후 실행

chmod +x 파일명.sh

이후 Xcode에서 프로젝트 빌드시 성공!

Database - MicroSoft Azure MSSQL DB 생성하기

뉴에이스 — Mon, 2 Nov 2020 16:07:49 +0900

1. Azure Portal 접속 (portal.azure.com) - 리소스 그룹 클릭 (리소스 그룹을 만들지 않은 경우)

2. 리소스 그룹에서 +추가 클릭

3. 구독 (학생용 계정은 기본 선택이 되어 있음) 정보 선택

리소스 그룹명 입력

그룹이 생성될 영역 (미국/한국 어느곳을 선택해도 문제 없음)을 선택 후 하단에 검토+만들기 클릭

4. 유효성 검사를 통과 후 하단에 만들기 클릭

5. 생성이 완료되면 리소스 그룹 리스트에 추가한 항목이 출력된다

6. 생성된 리소스 그룹을 클릭 후 +추가 클릭

7. 좌측 목록에서 데이터베이스 클릭 후 우측에서 SQL Database 클릭

8. 구독정보 확인

리소스 그룹명 확인

데이터베이스 이름은 내리소스그룹 내에서만 유일하게 입력

기존 생성한 서버가 없는 경우 데이터베이스를 사용할 서버를 선택(만들기)를 진행

서버의 이름은 전세계에서 유일해야 함

사용자명과 암호 설정 후 만들기 진행하여 서버 선택

위치는 웹서버의 위치와 동일한곳으로 설정

9. 컴퓨팅 + 스토리지 우측에 데이터베이스 구성을 클릭하여 가격 확인 및 스토리지 선택 후 적용

10. 입력항목들을 확인 후 하단에 다음: 네트워킹 클릭

11. 퍼블릭 엔드포인트 : 인터넷에 공개할 경우 모두가 접속 가능으로 일반적으로 선택하는 항목으로 선택 후 다음: 추가설정 클릭

(프라이빗 엔드포인트 : 같은 데이터센터내에서만 접속 가능)

12. 기본값들로 설정된 채로 다음: 태그 클릭

13. 리소스들이 많을 경우 리소스들 내에서 태그를 입력하여 검색을 용이하도록 하는 설정으로 생략 가능

다음: 검토 + 만들기 클릭

14. 가격 및 설정값들을 확인 후 만들기 클릭

15. 서버를 처음 설정할 경우 배포시간이 소요될 수 있으며 배포 완료 후 리소스로 이동

16. 생성된 DB에 연결해보기 위해 DB 관리 툴 설치 (DBeaver, SQL Studio(Windows), Azure Data Studio(MAC) 등)

DBeaver 로 설치 후 실행

sample DB는 생성하지 않고, 새로 DB를 추가

SQL Server 선택 후 진행

17. Azure Portal 에 서버이름 부분을 복사해서 HOST에 입력

18. 생성했던 데이터베이스 이름, 사용자명, 암호 입력

인증방식은 SQL Server Authentication 선택 (기본값)

19. Test Connection 선택 후 드라이버를 설치 후 연결 테스트 확인

20. 방화벽 설정으로 인해 오류가 발생할것임 (정상)

21. Azure Portal에서 생성된 데이터베이스 리소스 화면에서 서버 방화벽 설정 클릭

22. 상단에 클라이언트 IP 추가를 누를경우 하단에 바로 현재 접속중인 PC의 IP가 허용 규칙에 추가됨

시작 IP ~ 종료 IP를 입력해주면 범위 허용이 가능

23. 내 IP 가 허용된 상태에서 저장 후 다시 DBeaver 에서 테스트를 진행하여 연결 확인

24. 연결 완료 후 DB 리스트 확인 가능

크롬에서 마우스 휠로 탭 이동하는 유틸 - MouseWheelTabScroll4Chrome

뉴에이스 — Mon, 26 Oct 2020 17:12:37 +0900

MouseWheelTabScroll4Chrome은 크롬에서 휠로 탭을 이동시켜주는 유틸로

몇년전부터인지도 모를만큼 예전부터 사용하고 있던 유틸인데

최근에 다시 받아보려고 하니 검색도 잘 안되고 원본 링크도 없어진듯하여 저장용으로 올림.

실행하면 윈도우 우측 하단에 마우스 아이콘이 추가되고,

크롬 탭 위에서 휠을 동작하면 탭 이동이 가능하다. (IE 엣지와 웨일에서도 동작이 된다!)

윈도우 실행 창에서 shell:startup 입력 후 시작 메뉴에 등록해 두면 재부팅해도 자동 실행 가능!

MouseWheelTabScroll4Chrome.zip

0.45MB

JavaScript - jQuery 엘리먼트 삭제기능, remove()

뉴에이스 — Wed, 14 Oct 2020 17:32:41 +0900

엘리먼트 삭제

자신.remove()

HTML 소스

<button id="btn1">추가</button>
<button id="btn2">삭제</button>

<div id="list"></div>

스크립트 소스

$("#btn1")[0].addEventListener("click", function () {
    // jQuery -> $("#list").append($("<h1>").text("테스트") );
    $("#list").html($("#list").html() + "<h1>테스트</h1>");
});

$("#btn2")[0].addEventListener("click", function () {
    //$("h1:last-child").remove();

    // list 하위의 모든 h1 삭제하기
    $("#list h1").remove();
    //$("h1").remove();
    //$("#list").html("");
});

결과

Database - Oracle 11g 설치 및 기본 설정

뉴에이스 — Wed, 2 Sep 2020 18:11:43 +0900

1. 오라클 사이트(www.oracle.com)에 접속 후 11g 버전 다운로드 (다운로드 세부 경로는 수시로 바뀜)

11gR2 항목에서 운영체제에 맞는 설치 파일로 다운로드 한다. (오라클 계정에 로그인 필요)

www.oracle.com/database/technologies/oracle-database-software-downloads.html

2. 다운받은 두 파일을 한군데에 압축을 풀고 database 폴더내에 setup 파일을 실행해서 설치 (관리자 비밀번호는 꼭 기억해야 함)

대부분 기본설정으로 설치 하거나, 필요에 따른 옵션 선택 후 진행

암호 패턴과같은 경고창은 [예]를 눌러 무시 후 진행 가능

3. 설치 막바지에 아래와 같은 창이 뜰 경우 [비밀번호관리] 로 진입

4. 연습용으로 많이 쓰는 HR 계정 해제를 하기 위해 아래와 같이 HR 계정 옆 체크를 해지 후 비밀번호 입력 후 확인

5. 설치 확인을 위해 시작 프로그램에서 설치된 프로그램중 SQL Plus 실행 후 HR 계정 및 설정한 비밀번호를 입력 해서 연결 확인

JavaScript - jQuery 태그생성, 자식태그 추가. append()

뉴에이스 — Wed, 19 Aug 2020 16:15:41 +0900

태그 생성하고 추가하기
document.createElement(태그명) -> $(태그명)
appendChild -> append

HTML 소스

<button>태그 추가하기</button>
<div></div>
<div></div>

스크립트 소스

<script>
	$("button")[0].addEventListener("click", function () {
		/*
	var h1Obj = $("<h1>").text("동적 태그 생성");
	$("div").append(h1Obj);
	*/
		$("div").append($("<h1>").text("동적 태그 생성"));
	});
</script>

결과

JavaScript - jQuery style 속성 설정. css()

뉴에이스 — Fri, 14 Aug 2020 14:11:04 +0900

CSS 속성 추가하기

ex>
엘리먼트.style["background-color"] = "yellow";

엘리먼트.style["이름"] = 추출
엘리먼트.style["이름"] = 값 : 설정

css(이름, 값) : 설정
css(이름) : 추출
css({객체}) : 설정

HTML 소스

<button id="btn1">설정하기</button>
<button id="btn2">가져오기</button>
<div id="div1">CSS 라이브러리 테스트</div>
<div id="div2">CSS 라이브러리 테스트</div>

스크립트 소스

<script>
    $("#btn1")[0].addEventListener("click", function () {
        // 메서드 체이닝 사용
        $("#div1").css("background", "tomato")
            .css("color", "white")
            .css("fontSize", "50px")
            .css("border", "5px solid black");

        $("#div2").css({
                background: "orange",
                color: "blue",
                border: "5px solid black" 
                });
    });

    $("#btn2")[0].addEventListener("click", function () {
        console.log($("#div1").css("color"));
        console.log($("#div2").css("background"));
    });
</script>

결과

JavaScript - jQuery 태그 속성 처리. attr()

뉴에이스 — Thu, 13 Aug 2020 17:46:08 +0900

속성 처리하기

setAttribute(이름, 값)
getAttribute(이름)

attr(이름, 값) : 설정
attr(이름) : 추출

속성 설정하기 - HTML 소스

<button>설정하기</button>
<div id="a">a</div>
<div>b</div>
<div>c</div>

속성 설정하기 - 스크립트 소스

<script>
    $("button")[0].addEventListener("click", function () {
        $("div#a").attr({ "data-msg": "aaa", "data-count": "10", "data-name": "연습중..." });
    });
</script>

속성 설정하기 - 결과

속성 가져오기 - HTML 소스

<button>가져오기</button>
<div id="a" data-msg="b" data-count="10">연습중...</div>

속성 가져오기 - 스크립트 소스

<script>
    $("button")[0].addEventListener("click", function () {
        var $div = $("div");
        console.log($div.attr("id"));
        console.log($div.attr("data-msg"));
        console.log($div.attr("data-count"));
    });
</script>

속성 가져오기 - 결과

JavaScript - jQuery Input 밸류값 설정. val()

뉴에이스 — Wed, 12 Aug 2020 17:41:15 +0900

value 속성 처리하기
val(값) : 설정
val() : 추출

HTML 소스

<button id="btn1">설정하기</button>
<button id="btn2">가져오기</button>

메세지 : <input type="text" id="msg">

스크립트

<script>
    $("#btn1")[0].addEventListener("click", function() {
        // id가 msg인 엘리먼트에 value 속성값을 설정
        $("#msg").val("연습입니다.");
    });
    $("#btn2")[0].addEventListener("click", function() {
        alert($("#msg").val());
    });
</script>

결과

JavaScript - jQuery innerHTML, innerText 기능 사용하기. html(), text()

뉴에이스 — Mon, 10 Aug 2020 16:52:23 +0900

innerHTML
  내용설정:
  - DOM객체.innerHTML = "내용";
  - jQuery객체.html("내용");
  
  내용확인:
  - DOM객체.innerHTML;
  - jQuery객체.html();
  
innerTEXT
  내용설정:
  - DOM객체.innerTEXT = "내용";
  - jQuery객체.text("내용");

  내용확인:
  - DOM객체.innerText;
  - jQuery객체.text();

innerHTML - HTML 소스

<button>설정</button>
<button>추출</button>
<button>설정 및 추출</button>

<div>기본1</div>
<div>기본2</div>
<div>기본3</div>
<div>기본4</div>
<div>기본5</div>

innerHTML - 스크립트

<script>
    $("button:nth-child(1)")[0].addEventListener("click", function () {
        $("div").html("변경된 내용");
    });
    $("button:nth-child(2)")[0].addEventListener("click", function () {
        //alert($("div")[0].innerHTML
        // element가 여러개 일 경우 첫번째 값만 꺼내진다
        alert($("div").html());
    });
    // 값을 설정 하고 설정된 값을 추출
    $("button:nth-child(3)")[0].addEventListener("click", function () {
        //$("div").html("변경된 내용");
        //alert( $("div").html() );

        // 위의 코드에 체이닝 방식을 적용..
        alert($("div").html("변경된 내용").html());
    });
</script>

결과

innerText - HTML 소스

<button id="btn1">설정하기</button>
<button id="btn2">가져오기</button>

<div>테스트1</div>
<div>테스트2</div>
<div>테스트3</div>

innerText - 스크립트

<script>
    // id는 하나이기때문에 0번째에서 꺼내 addEventListener 설정
    $("#btn1")[0].addEventListener("click", function () {
        // div의 innerText 변경하기
        $("div").text("변경합니다.");
    });
    $("#btn2")[0].addEventListener("click", function () {
        // div의 innetText 가져오기
        alert($("div").text());
    });
</script>

결과

JavaScript - jQuery 객체($) 사용하기

뉴에이스 — Wed, 5 Aug 2020 16:35:48 +0900

HTML 소스

<button>설정하기</button>
<button>가져오기</button>
<button>설정 후 가져오기</button>

<div id="a">아이디로 접근</div>
<div class="b">클래스로 접근</div>
<div>태그로 접근</div>

스크립트

<script src="//code.jquery.com/jquery-3.5.1.min.js"></script>

<script>
// $를 이용하여 선택자 활용
    var aDiv1 = $("#a");

    var btn1 = $("button:nth-child(1)")[0];

    // jquery 적용
    var btn1 = $("button:nth-child(1)")[0];
    
    btn1.addEventListener("click", function (e) {
        var aDiv1 = $("#a")[0];
        //aDiv.innerHTML = "버튼 클릭 후 적용됨";
        // mlec 함수에 포함된 html 함수 사용
        $("#a").html("버튼 클릭 후적용됨");
    });

    //var btn2 = document.querySelector("button:nth-child(2)");
    var btn2 = $("button:nth-child(2)")[0];
    btn2.addEventListener("click", function (e) {
        //var bDiv = document.querySelector(".b");
        var bDiv = $(".b")[0];
        //bDiv.innerHTML = "클래스 속성 파트 변경";
        $(".b").html("클래스 속성 파트 변경");
    });

    //var btn3 = document.querySelector("button:nth-child(3)");
    var btn3 = $("button:nth-child(3)")[0];
    btn3.addEventListener("click", function (e) {
        //var arr = document.querySelectorAll("div");
        var arr = $("div");

        $("div").html("버튼 3번 눌렸어요");
    });
</script>

결과

JavaScript - jQuery 객체 이해하기 (wrapped set)

뉴에이스 — Wed, 5 Aug 2020 16:29:50 +0900

jQuery API는 선택자를 기준으로 확장집합(wrapped set) 이라는 Array 를 반환함
이를 기반으로 jQuery 의 Method Chain 이 가능
Method Chain 의 형태 : element.a().b().c().d()...

* 예외 : jQuery 의 get 은 jQuery Object 가 아니라, DOM element 를 반환함

// jQuery id선택자인 #을 사용해도 반환은 무조건 배열형태로 넘어오기 때문에, 꺼낼값이 하나일 경우 [0] 번째에서 꺼낸다

// $를 이용하여 선택자 활용
var aDiv1 = $("#a");
var aDiv2 = $("#a")[0];

// DOM 객체를 이용하여 선택자 활용
var aDiv3 = document.getElementById("a");

var btn1 = $("button:nth-child(1)")[0];

// $("#a") : wrapped set 반환
console.dir(aDiv1);

// $("#a")[0] : DOM 객체 반환. 
console.dir(aDiv2);

// DOM 객체 반환
console.dir(aDiv3);

console.log(`$("#a") 과 DOM 객체 비교`, aDiv1 === document.getElementById("a"));
console.log(`$("#a")[0] 과 DOM 객체 비교`, aDiv2 === document.getElementById("a"));

JavaScript - 마우스 이벤트로 DIV 이동시키기 (mousemove)

뉴에이스 — Tue, 4 Aug 2020 11:04:01 +0900

CSS 소스

<style>
    div {
        /* 기본 스태틱에서는 좌표 적용이 안됨 */
        position: absolute;
        top: 50px;
        left: 50px;
        width: 200px;
        height: 200px;
        font-size: 30px;
        background-color: palegreen;
        color: blue;
    }
</style>

HTML 소스

<div>이동</div>

스크립트

<script>
    var div = document.querySelector("div");

    //document.addEventListener("mousemove", function(e){
    // div안에 mouse가 들어가는순간 마우스 좌표를 기준으로 div 위치를 이동
    div.addEventListener("mousemove", function (e) {
        div.style.left = e.clientX + "px";
        div.style.top = e.clientY + "px";
    });
</script>

결과

JavaScript - 마우스 이벤트 (mouseenter, mouseleave, mousedown, mouseup, mousemove)

뉴에이스 — Tue, 4 Aug 2020 10:49:01 +0900

* 마우스 이벤트
mouseenter : h2태그안에 마우스가 들어갈때
mouseleave : 마우스가 나갈때
mousedown : 마우스 클릭시
mouseup : 마우스가 올라올때
mousemove : 마우스가 움직일때

CSS 소스

<style>
	h2 {
		font-size: 14px;
		font-weight: bold;
		height: 100px;
		line-height: 100px;
		text-align: center;
		border: 2px solid gray;
	}
	div#debug {
		height: 500px;
		/* 자동 스크롤 */
		overflow: auto;
		font-size: 14px;
		border: 2px solid gray;
		padding: 10px;
	}
</style>

HTML 소스

<h2>마우스 이벤트 연습</h2>
<div id="debug"></div>

스크립트

<script>
var h2Ele = document.querySelector("h2");

h2Ele.addEventListener("mouseenter", function (e) {
	print("마우스가 들어갔습니다.");
});
h2Ele.addEventListener("mouseleave", function (e) {
	print("마우스가 빠져나갔습니다.");
});
h2Ele.addEventListener("mousedown", function (e) {
	print("마우스가 눌렸습니다.");
});
h2Ele.addEventListener("mouseup", function (e) {
	print("마우스가 올라갔습니다.");
});
h2Ele.addEventListener("mousemove", function (e) {
	print("마우스가 움직입니다.");
	var obj = e.target; // 이벤트가 발생한 대상 객체
	var left = obj.offsetLeft; // 객체의 왼쪽모서리 위치
	var top = obj.offsetTop; // 객체의 위쪽모서리 위치
	var x = e.offsetX; // 객체와 마우스간의 x 거리
	var y = e.offsetY; // 객체와 마우스간의 y 거리
	var cx = e.clientX; // 브라우저와 마우스의 x 거리
	var cy = e.clientY; // 브라우저와 마우스의 y 거리
	print(
		`
	left=${left}, top=${top}, x=${x}, y=${y}, cx=${cx}, cy=${cy}
	`
	);
});

function print(msg) {
	var d = document.querySelector("#debug");

	// 새로운 메세지가 아래로
	//d.innerHTML += msg + "<br>";

	// 기존 메시지를 아래로
	d.innerHTML = msg + "<br>" + d.innerHTML;
}
</script>

결과

JavaScript - inputbox 이벤트 (keyup, keydown, keypress)

뉴에이스 — Mon, 3 Aug 2020 16:36:29 +0900

HTMl 소스

<input type="text" id="msg" />
<script>
    var msg = document.querySelector("#msg");
    msg.onkeyup = doAction;
    //msg.onkeypress // keydown 으로 활용
    msg.onkeydown = doAction;

    function doAction(e) {
        // 이벤트 타입 확인
        console.log("이벤트타입:", e.type, "입력키:", e.key, "입력키코드값:", e.keyCode, "ctrlKey 사용", e.ctrlKey);
    }
</script>

결과

JavaScript - 포커스(onfocus), 해제(onblur) Event

뉴에이스 — Wed, 29 Jul 2020 17:53:21 +0900

onfocus : 포커스를 받은 경우 이벤트 설정

onblur : 포커스가 해지될 때 이벤트 설정

HTML 소스

<input type="text" id="msg">
<div id="result"></div>

스크립트

<script>
    var msg = document.querySelector("#msg");
    var result = document.querySelector("#result");

    // msg에 포커스가 올 경우 이벤트 발생
    msg.onfocus = function (e) {
        result.innerHTML = "포커스 이벤트 발생함";
    };
    msg.onblur = function (e) {
        if (msg.value.length != 6) {
            alert("6자리 입력이 되어야 합니다.");
        }
        result.innerHTML = "포커스 빠져나감";
    };
</script>

결과

JavaScript - Event 전파 방식 (버블링, 캡처링)

뉴에이스 — Wed, 29 Jul 2020 17:34:12 +0900

이벤트 전파 막기

: 이벤트 객체.stopPropagation()

: addEventListener(이벤트타입, 콜백함수(리스너함수), true/false(기본))
: true - 캡처링 방식 (부모에서 자식으로 전파)
: false - 버블링 방식 (자식에서 부모로), 크롬에서는 false가 디폴트값임

CSS 소스

<style>
    div {
        border: 3px solid #334455;
        margin: 20px;

    }
</style>

HTML 소스

<h2>이벤트 전파 방식</h2>

<div id="outer">
    <div id="inner">
        <div id="child">
            이벤트 전파
        </div>
    </div>
</div>

<div id="debug"></div>

스크립트

<script>
    var outer = document.querySelector("#outer");
    var inner = document.querySelector("#inner");
    var child = document.querySelector("#child");

    outer.addEventListener("click", function (e) {
        print("outer");
    });

    inner.addEventListener("click", function (e) {
    	// 이벤트가 부모로 전파되어 outer가 함께 출력된다.
        print("inner");
    });

    child.addEventListener("click", function (e) {
        print("child");
        // 이벤트가 부모로 전파 되는것을 막는다.
        e.stopPropagation();
    });

    function print(msg) {
        var d = document.querySelector("#debug");
        d.innerHTML += msg + "<br>";
    }
</script>

결과

JavaScript - 기본 Event 중지시키기 (preventDefault)

뉴에이스 — Wed, 29 Jul 2020 17:18:21 +0900

기본 이벤트 중지 시키기

자동이벤트 발생하는 이벤트 (form onsubmit=return false, a href ... ) 중지시키기

이벤트객체.preventDefault();

a 태그 링크의 이동 막기

HTML 소스

<a href="javascript:fn1();">링크1</a><br>

<a href="http://www.daum.net" onclick="fn2();">링크2 onclick</a><br>

<a href="http://www.daum.net" onclick="fn2(); return false;">링크2 onclick : return false</a><br>

<a href="http://www.daum.net" onclick="return fn3();">링크3</a><br>

<a href="http://www.daum.net" onclick="fn4();">링크4</a><br>

<a href="http://www.daum.net" id="link5">링크5</a><br>

스크립트

<script>

    function fn1() {
        alert("fn1");
    }

    function fn2() {
        alert("fn2");
    }

    function fn3() {
        alert("fn3");
        return false;
    }

    function fn4() {
        alert("fn4");
        // 이벤트 객체를 활용한 페이지 이동 중지 시키기
        // fn4를 호출한 객체가 없기 때문에 윈도우에서 이벤트객체를 얻어온다
        var e = window.event;

        // 기본 이벤트 발생을 중지함
        e.preventDefault(); 
    }
    
    var link5 = document.querySelector("#link5");
    link5.addEventListener("click", function (e) {
        alert("fn5");
        // function을 호출하는 객체인 link에 이벤트 객체
        e.preventDefault();
    })

</script>

결과

JavaScript - Event 강제(자동) 발생

뉴에이스 — Wed, 29 Jul 2020 17:12:10 +0900

사용자가 이벤트를 발생시키는것이 아닌 코드를 이용해서 이벤트를 특정 시점에 발생

CSS 소스

<style>
    button {
        width: 200px;
        height: 100px;
        color: cadetblue;
        background: bisque;
        border: 2px solid black;
        font-size: 25px;
    }
</style>

HTML 소스

<h2>이벤트 강제 발생시키기</h2>
<button><span>0</span></button>

스크립트

<script>
    var btn = document.querySelector("button");
    var span = document.querySelector("span");
    btn.addEventListener("click", function () {
        span.innerText = parseInt(span.innerText) + 1;
    });

    // 1초마다 함수 호출, 이벤트 트리거(이벤트 자동 동작)
    setInterval(function () {
        // 버튼 클릭을 실행
        btn.click();
    }, 1000);
</script>

결과

JavaScript - Event 객체 (event.target)

뉴에이스 — Wed, 29 Jul 2020 16:48:01 +0900

이벤트가 발생하게 되면 발생된 이벤트에 대한 정보를 가지고 있는 객체

CSS 소스

<style>
    button {
        width: 200px;
        height: 100px;
        color: cadetblue;
        background: bisque;
        border: 2px solid black;
        font-size: 25px;
    }
</style>

HTML 소스

<h2>이벤트 객체</h2>
<button id="btn1">시작</button>
<button id="btn2">중지</button>

스크립트

<script>
    // 모든 button을 찾아 유사배열객체로 반환
    var btns = document.querySelectorAll("button");

    for (var i = 0; i < btns.length; i++) {
        // 익명함수를 등록해서 바로 실행
        // 콜백함수의 첫번째 매개변수에 이벤트 객체 정보를 받을 수 있다.
        // 매개변수로 받지 않을 경우 window.event로 받을 수 있음
        btns[i].onclick = function (e) {
            // 이벤트 발생 객체를 e를 통해서 얻기
            var obj = e.target; // 클릭 이벤트가 발생한 버튼 객체
            console.log("이벤트객체 innerHTML : ", obj.innerHTML);
            console.log("this innerHTML : ", this.innerHTML);

            // 좌표 정보 확인하기
            // 이벤트가 발생한 객체의 좌표 정보 확인
            // offset으로 시작 : 이벤트 발생 객체와 연관되어 있다.
            
            // 이벤트 발생객체인 버튼의 좌표위치
            console.log("브라우저에서의 위치 : ", obj.offsetLeft, obj.offsetTop);
            // 이벤트 발생 객체와 클릭한 위치와의 차이
            console.log("이벤트 객체에서의 위치 : ", e.offsetX, e.offsetY);
        };
    }
</script>

결과

JavaScript - Event 설정 (표준방식)

뉴에이스 — Wed, 29 Jul 2020 15:01:41 +0900

객체.onclick = fn2; -> 기존방식
  태그내에 onclick값이 있을 경우 추가로 설정시 덮어쓰기됨
  여러개의 이벤트 함수 호출 불가능

객체.addEventListener(이벤트타입, 콜백함수(이벤트리스너), 전파방식(캡처링, 버블링)) -> 요즘권장방식
  태그안에 직접 쓰던 onclick이 아닌 타입인 click만 줌
  button 태그내에 onclick값이 있을 경우 모두 실행됨
  onclick 속성이 아닌, 별도의 이벤트로 관리
  이벤트 중첩(다중) 등록이 가능
  
이벤트 삭제
객체.removeEventListener(이벤트타입, 콜백함수(이벤트리스너))

CSS 소스

<style>
    button {
        width: 200px;
        height: 100px;
        color: cadetblue;
        background: bisque;
        border: 2px solid black;
        font-size: 25px;
    }
</style>

HTML 소스

<h2>표준 이벤트 설정방식</h2>
<button id="btn" onclick="console.log('0번');">클릭</button>

스크립트

<script>
    var btn = document.querySelector("#btn");

    // btn.onclick = function () {} -> 고전 이벤트 방식

    function fn1() {
        console.log("fn1");

        // addEventListener에 등록된 이벤트 제거
        // this는 fn1 이벤트를 호출한 객체인 btn
        this.removeEventListener("click", fn1);
    }

    function fn2() {
        console.log("fn2");
    }

    btn.addEventListener("click", fn1);

    // fn1 실행 후 fn2 실행, 다중 호출 가능
    btn.addEventListener("click", fn2);
</script>

결과

JavaScript - Event 설정 (고전방식)

뉴에이스 — Wed, 29 Jul 2020 14:14:15 +0900

고전 이벤트 설정 방식
    - 태그에 이벤트 직접 설정하기 : 권장하지 않는다.
        <button onclick="..">확인</button>
        
    - 태그 객체에 프로퍼티를 활용
        : 객체.on이벤트타입 = 콜백함수;
        <button>확인</button>
        var btn = document.querySeletor("button");
        btn.onclick = function () {};
        
        function doAction () {};
        btn.onclick = doAction; -> doAction()을 주면 실행 결과만 옴, doAction만 써야 함수를 넘김

고전이벤트 방식 1

CSS 소스

<style>
  button {
    width: 200px;
    height: 100px;
    color: cadetblue;
    background: bisque;
    border: 2px solid black;
    font-size: 25px;
  }
</style>

HTML 소스

<h2>고전 이벤트 설정 연습</h2>
<button onclick="fn1();">버튼1</button>
<button id="btn2">버튼2</button>

스크립트

<script>
	// fn1() : 태그에 직접 onclick 이벤트 설정 후 실행
	// fn2() : 객체의 프로퍼티에 접근하여 이벤트 설정 후 실행
    
	function fn1() {
		console.log("fn1 호출");
		console.log("this", this);
	}
    
	function fn2() {
		console.log("fn2 호출");
		// fn2()를 호출한 btn2 객체가 this가 됨 (=이벤트가 발생한 대상 객체)
        
		console.log("this", this);
		console.log("this.innerHTML", this.innerHTML);
        
		// 등록된 이벤트 제거
		// 한번만 실행되게 됨 (클릭을 한번만 하게 할 경우..)
		this.onclick = null;
	}

	// 고유한 id로 접근시에는 id값, 동일한 이름으로 설정시에는 class값 을 이용
	var btn2 = document.querySelector("#btn2");
    
	// fn2()을 주면 실행 결과(undefined)가 옴
	btn2.onclick = fn2;
</script>

결과

고전이벤트 방식 2

HTML 소스

<h2>고전 이벤트 설정 연습2</h2>
<button id="btn1">시작</button>
<button id="btn2">중지</button>

스크립트

<script>
    // fn1() : 자기자신의 onclick 이벤트를 제거 후 btn2에 onclick 설정
    // fn2() : 자기자신의 onclick 이벤트를 제거 후 btn1에 onclick 설정
    
    function fn1() {
        alert("시작버튼 클릭됨");
        // 한번만 실행 후 이벤트 설정 제거
        this.onclick = null;
        var btn2 = document.querySelector("#btn2");
        btn2.onclick = fn2;
    }
    
    function fn2() {
        alert("중지버튼 클릭됨");
        this.onclick = null;
        btn1.onclick = fn1;
    }

    // 고유한 id로 접근시에는 id값, 동일한 이름으로 설정시에는 class값 설정
    var btn1 = document.querySelector("#btn1");
    btn1.onclick = fn1;
</script>

결과

코르도바(Cordova)/폰갭(Phonegap) 으로 하이브리드앱 만들기

뉴에이스 — Thu, 23 Jul 2020 15:42:47 +0900

1. Node JS 설치 (https://nodejs.org)

2. CMD 에서 코르도바 or 폰갭 설치

* 폰갭으로 설치해도 내부 플러그인 설치시 사용되는 명령어는 cordova 이며 호출 명령어만 다를뿐 동일하게 사용 가능

npm install -g phonegap

npm install -g cordova

3. phonegap create [경로] [패키지명] [프로젝트명] or cordova create [경로] [패키지명] [프로젝트명]

phonegap create c:\test\phonegap com.example.hybrid.phonegap PhonegapApp

cordova create c:\test\cordova com.example.hybrid.cordova CordovaApp

4. 위에서 생성한 프로젝트 경로로 이동

cd c:\test\폴더명

5. 안드로이드/아이폰 플랫폼 함께 추가하며 플랫폼 목록을 Cordova의 config.xml 파일에 저장

phonegap platform add android ios browser --save

cordova platform add android ios browser --save

6. 프로젝트 폴더 platforms 폴더 내에 android/ios 폴더를 안드로이드스튜디오와 XCode 에서 열어서 작업

* 그런데! 안드로이드 스튜디오에서 프로젝트를 열어보니 에러가 발생한다.

대략.... gradle 을 다운로드 하지 못했다는 에러 같다.

build.gradle 파일을 열어보면 dependencies 내에 classpath 'com.android.tools.build:gradle:3.3.0' 으로 설정되어 있는데

최신버전을 검색해서 classpath 'com.android.tools.build:gradle:4.0.0' 로 변경 후 Try Again 또는 Sync Now 해주면 해결

* build.gradle(Project: android)에서만 바꿔도 해결은 되지만 build.gradle(Module: app) 까지 두군데 모두 변경해주었다.

* cordova와 phonegap 프로젝트의 manifest를 비교해보니 차이점이 있는데, 문제가 하나더 발생한다.

폰갭으로 생성한 안드로이드 프로젝트 manifest 파일에는 좀더 많은 permission이 선언되어 있고,

FileProvider 설정이 되어 있는데, FileProvider에서 오류가 발생했다.

(좌) phonegap (우) cordova

위 그림과 같이 android.support.v4.content.FileProvider 클래스를 찾지 못한다.

앱내에서 File을 다루기 위해서는 FileProvide 설정이 필요하기 때문에

build.gradle (Module: app) 내 dependencies에 implementation 'androidx.appcompat:appcompat:1.1.0' 를 추가해주고

manifest 의 오류가 발생했던 부분을 android:name="androidx.core.content.FileProvider" 로 변경해준다.

gradle.properties 파일에 android.useAndroidX=true 항목 추가

추가로 앱 실행시 코르도바 플러그인에서 기존 FileProvider 클래스를 사용하고 있던 부분에서 에러가 발생할것이다.

해당 클래스에서 import android.support.v4.content.FileProvider; 이부분을 삭제해준다.

여기까지였으면 좋았겠지만 (왜?) 에러가 하나 더 있다...

폰갭에서 생성된 프로젝트는 시작 엑티비티를 찾지 못하고 있다.

도구모음에 app 부분에 x 표시가 떠 있다.

manifest를 보면 코르도바로 생성한 프로젝트와 MainActivity가 선언된 부분은 동일하지만 에러는 복불복인가보다.

기본 Activity를 찾지 못하는 문제에 대해 Clean Build, Sync Project, MainActivity 패키지명부터 적기 등등 해보았으나 동일하여 프로젝트를 다시 생성했다. (.....)

하여 폰갭과 코르도바로 생성한 프로젝트를 에뮬레이터로 실행!

(좌) 폰갭 (우) 코르도바

안드로이드용 키스토어(keystore) 파일 생성하기

뉴에이스 — Wed, 22 Jul 2020 15:37:07 +0900

CMD 실행

키스토어 파일을 생성할 파일 위치 확인 후 아래 명령어 입력 (validity : 유효기간 년 단위)

keytool -genkey -v -keystore C:\경로\파일명.keystore -alias test -keyalg RSA -keysize 2048 -validity 10000

암호, 지역, 지역번호 등 입력 후 y 입력하면 파일 생성 완료!

JavaScript - setTimeout을 이용한 슬라이드 효과

뉴에이스 — Fri, 17 Jul 2020 15:34:01 +0900

CSS 소스

<style>
    div {
        position: absolute;
        background-color: whitesmoke;
        color: #666;
        padding: 10px;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
        width: 600px;
        height: 400px;
        border: 1px solid black;
        border-radius: 5px;

        left: 100px;
        top: -450px;
    }
</style>

HTML 소스

<p><a href="#1" onclick="showSlide();">슬라이드</a></p>
<div id="d1">슬라이드 효과</div>

스크립트 소스

<script>
    var x = -400;

    function showSlide() {
        x += 10;
        var dEle = document.querySelector("#d1");
        dEle.style.top = x + "px";
        if (x < 100) {
            setTimeout(showSlide, 1);
        } else {
            x = -400;
        }
    }
</script>

결과

JavaScript - 간단한 아코디언 효과 적용(transition)

뉴에이스 — Fri, 17 Jul 2020 12:42:05 +0900

CSS 소스

<style>
    h3,
    div {
        margin: 0px;
        width: 80%;
        border: 2px solid #334455;
        box-sizing: border-box;
    }
    h3 {
        background: powderblue;
    }
    div {
        transition: 1s;
        position: relative;
        height: 100px;
        overflow: hidden;
    }
    .hidden {
        opacity: 0;
        height: 0px;
    }
    .show {
        opacity: 100;
        height: 100px;
    }
</style>

HTML 소스

<h2>아코디언 기능</h2>
<h3 onclick="changeView();">오늘은 자바스크립트 CSS 적용하는 날</h3>

<div class="hidden">
    오늘은 자바스크립트 CSS 적용<br />
    오늘은 자바스크립트 CSS 적용<br />
    오늘은 자바스크립트 CSS 적용
</div>

스크립트 소스

<script>
    function changeView() {
        var divEle = document.querySelector("div");
        var cls = divEle.getAttribute("class");

        if (cls == "hidden") {
            cls = "show";
        } else {
            cls = "hidden";
        }

        divEle.setAttribute("class", cls);
    }
</script>

결과

JavaScript - display 속성

뉴에이스 — Thu, 16 Jul 2020 16:05:10 +0900

소스

<a href="#1" onclick="show('movie');">영화</a>
<a href="#1" onclick="show('music');">음악</a>

<div id="movie">
    <h1>원피스 극장 13기</h1>
    <p>전설의 해적왕 그가 남긴 마지막 보물을 가지기 위한 젊은이들의 ...</p>
</div>

<div id="music" style="display: none;">
    <h1>복면가왕 - 음악 대장(하현우)</h1>
    <p>전설의 10연승 ...</p>
</div>

<script>

    function show (kind){
        var music = document.querySelector("#music");
        var movie = document.querySelector("#movie");

        music.style.display = "none";
        movie.style.display = "none";
        
        document.querySelector("#" + kind).style.display = "block";
    }

</script>

결과

JavaScript - Element 에서 font 크기를 가져온 뒤 수정하기

뉴에이스 — Wed, 15 Jul 2020 17:15:11 +0900

소스

<p>
    <a href="#1" onclick="sizeUp();">크게</a>
    <a href="#1" onclick="sizeDown();">작게</a>
</p>
<div>
    <p>
        HTML 요소<br />
        HTML 요소(HTML 엘리먼트, HTML element)는 HTML 문서나 웹 페이지를 이루는 개별적인 요소를 의미하며, 문서 객체 모델(DOM)으로 파싱된다. HTML은 트리나 HTML 노드(텍스트 노드 등)로 구성된다.
        각 노드는 HTML 속성을 지정할 수 있다. 노드들은 기타 노드와 텍스트를 포함한 콘텐츠도 소유할 수 있다. 수많은 HTML 노드들은 시맨틱이나 의미를 표현한다. 이를테면 title 노드는 문서의 제목을
        나타낸다.
    </p>
    <p>
        문서와 DOM<br />
        HTML 문서들은 "문서"(document)로 전달된다.[note 1] 이들은 구문 분석 과정을 거쳐 웹 브라우저 내에서 문서 객체 모델(DOM) 내부 표현으로 변환된다.[note 2][note 3] 화면과 같은 웹 브라우저의
        표현이라든지 자바스크립트의 접근은 그 다음에 이 내부 모델에서 수행되며 원래의 문서에서 수행되지는 않는다. 초기의 HTML 문서들은 오늘날 어느 정도는 크게 유효하지 않은 HTML이었으며 문법
        오류 투성이었다. 가능한 이러한 오류를 해결하기 위해 파싱 과정도 필요했다. 그 결과의 모델은 정확하지는 않지만(이를테면 주의깊은 코더가 원래 의도한 바를 표현하지 못하는 등) 적어도 HTMl
        표준에 따라 유효하다. 유효한 모델은 제공되는 태그 숩이 얼마나 나쁜지에 관계 없이 만들어진다. 극소수의 경우에만 파서가 파싱을 포기한다.
    </p>
</div>

<script>
    var divEle = document.querySelector("div");

    function sizeUp() {
        var fs = document.defaultView.getComputedStyle(divEle).getPropertyValue("font-size");
        console.log("font size", fs);
        divEle.style.fontSize = parseInt(fs) + 2 + "px";
    }

    function sizeDown() {
        var fs = document.defaultView.getComputedStyle(divEle).getPropertyValue("font-size");
        console.log("font size", fs);
        divEle.style.fontSize = parseInt(fs) - 2 + "px";
    }
</script>

결과

JavaScript - Element 에 적용된 CSS Style 가져오기

뉴에이스 — Wed, 15 Jul 2020 15:04:30 +0900

- Element.style.속성명 을 통해 적용중인 속성값 확인
	: style속성에서 직접준것이 아닐 경우 확인 불가

- document.defaultView.getComputedStyle(Element) 를 통해 적용중인 Style 확인 가능

- 프로토타입의 게터에서 정보를 추출
	: document.defaultView.getComputedStyle(Element).getPropertyValue("속성명"))

소스

<style>
    div {
        background-color: #ff0;
    }
</style>

<div style="width: 200px; height: 200px;">
    <p>DIV 입니다.</p>
</div>

<script>
    var divEle = document.querySelector("div");
    console.log("width", divEle.style.width);
    console.log("height", divEle.style.height);
    console.log("backgroundColor", divEle.style.backgroundColor);
    console.dir(document);
    console.dir(document.defaultView);
    console.dir(document.defaultView.getComputedStyle(divEle));
    console.dir("getPropertyValue" + document.defaultView.getComputedStyle(divEle).getPropertyValue("background-color"));
</script>

결과

JavaScript - class명을 이용한 CSS 적용

뉴에이스 — Wed, 15 Jul 2020 14:23:44 +0900

CSS 소스

<style>
    .a {
        border:5px solid black;
        color: skyblue;
        background-color: yellow;
        padding: 30px;
        margin: 30px;
        height: 100px;
        border-radius: 100px;
        text-align: center;
        line-height: 100px;
    }
</style>

HTML 및 스크립트 소스

<h2 onclick="changeCSS();">CSS 적용하기</h2>

<script>

    function changeCSS (){
        var h2Ele = document.querySelector("h2");
        /*
            속성에 대한 값을 변경할수 있음
            h2Ele.onclick = "";
            h2Ele.id = "";
            class란 키워드가 자바스크립트에 있어서 h2Ele.class 사용 X, className으로 사용
            ["class"]는 사용 가능, .으로 접근시에는 className으로 사용
        */
        // onclick시 class="a"를 추가함
        h2Ele.className = "a";
    }

</script>

결과

JavaScript - style 속성을 이용한 CSS 직접 적용

뉴에이스 — Wed, 15 Jul 2020 14:19:25 +0900

소스

<h2 onclick="changeCSS();">CSS 적용하기</h2>

<script>

    function changeCSS (){
        var h2Ele = document.querySelector("h2");
        h2Ele.style.border = "5px solid black";
        h2Ele.style.color = "skyblue";
        // - 있는 속성의 경우 [""]나, -제외후 대문자로 시작하여 사용 가능
        //h2Ele.style["background-color"] = "yellow";
        h2Ele.style.backgroundColor = "yellow";
        // 안쪽 여백
        h2Ele.style.padding = "30px";
        // 바깥쪽 여백
        h2Ele.style.margin = "30px";
        h2Ele.style.height = "100px";
        h2Ele.style.borderRadius = "100px";
        // 글자를 수평 센터로
        h2Ele.style.textAlign = "center";
        // 글자를 수직 센터로
        h2Ele.style.lineHeight = "100px";
    }

</script>

결과

JavaScript - navigator 객체

뉴에이스 — Wed, 15 Jul 2020 13:09:28 +0900

window.navigator.userAgent : 사용자 접속 환경 확인

소스

<script>
	// www.naver.com -> m.naver.com
	console.log(window.navigator.userAgent);
	var msg;
	var agent = window.navigator.userAgent;
	if(agent.indexOf("iPhone") != -1){
		msg = "iPhone 접속";
	}
	else if(agent.indexOf("Android") != -1){
		msg = "Android 접속";
	}
    else {
		msg = "PC 환경 접속";
	}
	console.log(msg);
    alert(msg);
</script>

결과 (데스크탑 크롬에서 접속)

JavaScript - location 객체 (접속 경로 확인)

뉴에이스 — Wed, 15 Jul 2020 11:02:46 +0900

window.location : 주소정보를 다루는 객체

window는 생략 후 사용 가능
    
주로 html끼리 페이지를 이동할때 사용.

location 속성 : href, host, port, pathname, search ...

* pahtname, search를 이용하여 유입 경로 및 통계 확인 가능

소스

<button onclick="doAction();">클릭</button>

<script>
    /* 
    if (flag) {
        alert("3초후 페이지 새로고침");
        setTimeout(function () {
            //location.href = location.href;
            location.reload();
        }, 3000);
    }
        */

    alert("5초후 페이지 이동");
    setTimeout(function () {
        location.href = "http://www.daum.net";
    }, 5000);

    function doAction() {
        //console.dir(location);
        console.log("href", window.location.href);
        console.log("host", window.location.host);
        console.log("port", window.location.port);
        console.log("pathname", window.location.pathname);
        // 파라미터값 확인 가능
        console.log("search", window.location.search);
        // ?id=aaa&pass=123
        var params = window.location.search;
        // 1번 인덱스부터 끝까지 자르기(1, 2) -> 1번인덱스부터 2번 인덱스까지
        params = params.substr(1);
        var pArr = params.split("&");

        console.log("pArr", pArr);
    }
</script>

결과

MAC에서 숨겨진 파일 보기

뉴에이스 — Mon, 6 Jul 2020 19:07:36 +0900

MAC에서 .으로 시작하는 파일은 숨김처리가 되어 있다.

.git 이나 .gitignore 와 같은 파일을 찾으려고 보니 안보이길래 숨겨져 있다는것도 처음 알았다.

숨겨진 파일을 보기 위한 설정은 터미널에서 진행한다!

OS X 10.8 의 경우

defaults write com.apple.Finder AppleShowAllFiles TRUE

OS X 10.9 의 경우

defaults write com.apple.finder AppleShowAllFiles TRUE

파인더를 재시작할 경우 보이지 않았던 파일이 보인다

killall Finder

JavaScript - onload 함수와 스크립트의 실행 위치에 관계

뉴에이스 — Fri, 5 Jun 2020 13:10:47 +0900

- onload : 문서가 태그정보들을 메모리에 전부 로딩 후 실행
- 로딩 문제 해결을 위해 body 하단에 <script> 사용 권장

소스

<body>
    <script>
        window.onload = function () {
            // h1 태그가 아래에 있을 경우 h1보다, 스크립트가 먼저 실행되어 result를 못찾음, 에러발생
            // onload 이벤트 내에 있을 경우 정상 실행 가능
            var result = document.querySelector("#result");
            result.innerHTML = "onload 에서 실행됨";
        };

        var result2 = document.querySelector("#result");
        result2.innerHTML = "h1 태그 전에 실행됨";
    </script>

    <h1 id="result"></h1>
</body>

결과

onload 에서 실행됨

JavaScript - window 객체 활용(open, moveBy, resizeTo, onunload)

뉴에이스 — Thu, 4 Jun 2020 17:07:06 +0900

window는 생략 후 사용 가능

소스

<body>
	<button onclick="createPop();">생성</button>
	<button onclick="movePop();">이동</button>
	<button onclick="sizePop();">변경</button>

	<script>
		var pop;
		function createPop() {
			pop = window.open("", "", "width=400, height=300");
			sizePop();
			// 창의 내용이 사라질때, 창을 끌때
			// 콜백함수.. 창을 끄면 발생
			pop.onunload = function () {
				createPop();
			};
		}
		function movePop() {
			// 절대좌표, 지정한 좌표로 이동, left, top 좌표
			//pop.moveTo(200, 200);

			// 상대좌표, 현재 위치를 기준으로 이동, -도 가능
			pop.moveBy(30, 20);
		}
		function sizePop() {
			// 절대크기, 넓이, 높이
			//pop.resizeTo(500, 500);
			pop.resizeTo(screen.width, screen.height);

			// 상대크기
			pop.resizeBy(20, 10);
		}
	</script>
</body>

결과 (크롬의 리다이렉션 차단 기능으로 팝업창 실행기능은 한번만 동작함)

JavaScript - window 객체

뉴에이스 — Thu, 4 Jun 2020 16:38:43 +0900

window 객체 : BOM(Browser Object Model)
  windows가 제공해주는 함수
  window는 생략 후 사용 가능
  팝업창 띄우기 - windows.open(url, target, option)

부모페이지 소스

<body>
    <button onclick="openPop(1)">팝업창1</button>
    <button onclick="openPop(2)">팝업창2</button>
    <button onclick="openPop(3)">팝업창3</button>
    <button onclick="openPop(4)">팝업창4</button>

    <h2 id="result"></h2>

    <script>
        function openPop(type) {
            switch (type) {
                case 1:
                    window.open("http://www.naver.com", "pop1", "width=400, height=300");
                    break;
                case 2:
                    window.open("http://www.naver.com", "", "width=400, height=300");
                    break;
                case 3:
                    console.log(screen.width, screen.height);
                    // 화면의 가운데에 팝업창을 띄우려고 할때
                    // (화면해상도-팝업창크기)/2
                    var left = (screen.width - 400) / 2;
                    var top = (screen.height - 300) / 2;
                    window.open("http://www.naver.com", "", `width=400, height=300, top=${top}, left=${left}`);
                    break;
                case 4:
                    window.open("test01_child.html", "", "width=400, height=300");
                    break;
            }
        }

        function doResult(msg) {
            document.querySelector("#result").innerHTML += msg;
        }
    </script>
</body>

자식페이지 소스

<body>
    <h2>자식 페이지</h2>
    메세지 : <input type="text" id="msg" />
    <button onclick="winClose();">닫기</button>

    <script>
        function winClose() {
            // 자신을 띄운 창에 접근 (부모창) : opener
            //document.msg.value
            opener.doResult(document.querySelector("#msg").value);
            self.close();
        }
    </script>
</body>

결과

JavaScript - select 객체의 옵션 추가, 삭제, 비활성화(options.length, disabled)

뉴에이스 — Thu, 4 Jun 2020 15:29:15 +0900

1. DOM API 활용

var opt = document.createElement("option");
// 속성추가
opt.value = 0; // <option value='0'></option>
var text = document.createTextNode("졸림");
// text를 option에 추가
opt.appendChild(text); // <option value='0'>졸림</option>
selEle.appendChild(opt);

2. 자바스크립트 내장객체 활용

// options 배열에 다음 항목 추가, new Option(text, value);
selEle.options[selEle.options.length] = new Option("배고파", "100");

3. innerHTML 활용

selEle.innerHTML += "<option value='100'>테스트</option>";

소스

<body>
    <form action="a.html" name="mForm">
        <button type="button" onclick="doAdd();">추가</button>
        <button type="button" onclick="doDel();">삭제</button>
        <button type="button" onclick="changeDisabled(true);">비활성화</button>
        <button type="button" onclick="changeDisabled(false);">활성화</button>
        <br />
        <br />
        <div>
            <select name="sel">
                <option value="">선택하세요</option>
            </select>
        </div>
    </form>

    <script>
        function doAdd() {
            //var selEle = document.querySelector("select");
            var selEle = document.mForm.sel;

            selEle.options[selEle.options.length] = new Option("배고파", "100");
        }

        function doDel() {
            var sel = document.mForm.sel;
            // 마지막 option 삭제
            //sel.options[sel.options.length-1] = null;
            // 전부 삭제
            sel.options.length = 1;
        }

        function changeDisabled(flag) {
            var selEle = document.mForm.sel;
            if (flag) selEle.selectedIndex = 0;
            // disabled 에서는 서버 전송 안됨
            selEle.disabled = flag;
        }
    </script>
</body>

결과

JavaScript - select 객체(selectedIndex, options)

뉴에이스 — Thu, 4 Jun 2020 14:05:19 +0900

select객체.selectedIndex : 선택된 옵션 항목의 인덱스 위치
select객체.options : option 항목들의 배열

<select> -> select.selectedIndex (선택된 옵션 위치)
    <option></option> -> select.options.length
    <option></option>
</select>

소스

<body>
    <h2>select 활용하기 - 1</h2>
    <form name="mForm" action="a.html">
        <select name="sType">
            <option value="">선택하세요</option>
            <option value="writer">작성자</option>
            <option value="title">제목</option>
        </select>
        <input type="text" name="sWord" />
        <button type="button" onclick="doAction();">검색</button>
    </form>

    <script>
        function doAction() {
            // form 엘리먼트 접근
            var f = document.mForm;
            // select 엘리먼트 접근
            var selEle = f.sType;

            //console.log(selEle);
            // 선택된 옵션 박스의 인덱스 확인
            console.log("선택된 인덱스", selEle.selectedIndex);

            // 검색어 값이 있고, 선택 박스에 검색 타입에 선택하세요가 선택된 경우 "검색항목을 선택하세요"
            if (f.sWord.value != "" && selEle.selectedIndex == 0) {
                alert("검색 항목을 선택하세요!");
                return;
            }
            if (f.sWord.value == "") {
                alert("검색어를 입력하세요!");
                return;
            }
        }
    </script>
</body>

결과

JavaScript - checkbox 상태 확인(checked)

뉴에이스 — Thu, 4 Jun 2020 13:32:12 +0900

체크박스엘리먼트.checked = true (체크)
체크박스엘리먼트.checked = false (체크해제)

소스

<body>
    <h2>체크박스 테스트</h2>
    <form name="mForm" action="a.html">
        <div>
            <!--onchange : 상태가 바뀔때-->
            <input type="checkbox" name="all" id="all" value="all" onclick="doAction();" />
            <label for="all">전체</label>
        </div>
        <div>
            오늘 점심 메뉴는?<br />
            <input type="checkbox" id="menu1" name="menu" value="1" />
            <label for="menu1">돌솥비빔밥</label>
            <input type="checkbox" id="menu2" name="menu" value="2" />
            <label for="menu2">라면</label>
            <input type="checkbox" id="menu3" name="menu" value="3" />
            <label for="menu3">햄버거</label>
        </div>
    </form>

    <script>
        function doAction() {
            var f = document.mForm;
            // id가 all인 체크박스의 상태에 따라
            console.log(f.all.checked);
            // name이 menu인 체크박스의 상태를 변경
            var ckMenu = f.menu; // menu의 갯수에 따라 하나가 올수도, 여러개가 올 수도 있음
            // 객체가 배열인지 확인 (checked가 있는지, 또는 length가 있는지 확인)
            if (ckMenu.length) {
                for (var i = 0; i < ckMenu.length; i++) {
                    // 전체체크박스의 상태와 동일한 값을 준다
                    ckMenu[i].checked = f.all.checked;
                }
            } else {
                ckmenu.checked = f.all.checked;
            }
            console.log(ckMenu.checked);
        }
    </script>
</body>

결과

JavaScript - 폼 데이터 체크 후 서브밋 하기(onsubmit)

뉴에이스 — Thu, 4 Jun 2020 10:49:25 +0900

onsubmit : submit 이벤트가 발생했을때 체크 (서버로 전송 전에 데이터 체크)
            값이 올바른 경우에는 전송, 값이 올바르지 않은 경우에는 취소
            onsubmit="return false" - 결과가 false라면 전송하지 않음

소스

<body>
<form name="mForm" action="a.html" onsubmit="return doAction();">
	id: <input type="text" name="id" /><br />
	pass: <input type="password" name="pass" /><br />
	pass 확인: <input type="password" name="pass2" /><br />
	<button>확인</button>
	<!-- type을 button으로 설정하면, 기본으로 submit이 되지 않는다 (사용자 정의 동작)-->
	<button type="button" onclick="doAction2();">확인2</button>
</form>

<script>
	// 특정 엘리먼트의 값이 비어있는지 확인 후 값이 없으면 true, 아니면 false를 반환

	function isEmpty(obj, msg) {
		// obj가 문자열이라면 문자열에 해당하는 엘리먼트에 접근
		if (typeof obj == "string") {
			obj = document.querySelector("#" + obj);
		}
		if (obj.value == "") {
			alert(msg);
			obj.focus();
			return true;
		}
		return false;
	}

	function doAction() {
		// 입력값이 잘못된 경우 false를 리턴

		/* 하나씩 접근할 경우 ..
		document.querySelector("input[name='id']");
		document.querySelector("input[name='pass']");
		document.querySelector("input[name='pass2']");
		*/

		// form name으로 바로 접근 - form 안에서 id 이름을 가진 엘리먼트에 접근
		//var idEle = document.mForm.id;
		var f = document.mForm; // f는 mForm을 가르킴

		if (isEmpty(f.id, "아이디를 입력하세요!")) return false;
		if (isEmpty(f.pass, "패스워드를 입력하세요!")) return false;
		if (isEmpty(f.pass2, "패스워드 확인을 입력하세요!")) return false;

		if (f.pass.value != f.pass2.value) {
			// 입력값이 다를 경우 포커스는 첫번째 칸으로
			f.pass.focus();
			// 첫번째 칸에 벨류를 선택상태로
			f.pass.select();
			// 두번째 칸은 값을 지운다.
			f.pass2.value = "";
			alert("패스워드가 서로 다릅니다.");
			return false;
		}
		return true;
	}

	function doAction2() {
		alert("확인2 눌렀음...");

		var f = document.mForm;
		if (isEmpty(f.id, "아이디를 입력하세요!")) return;
		if (isEmpty(f.pass, "패스워드를 입력하세요!")) return;
		if (isEmpty(f.pass2, "패스워드 확인을 입력하세요!")) return;

		if (f.pass.value != f.pass2.value) {
			// 입력값이 다를 경우 포커스는 첫번째 칸으로
			f.pass.focus();
			// 첫번째 칸에 벨류를 선택상태로
			f.pass.select();
			// 두번째 칸은 값을 지운다.
			f.pass2.value = "";
			alert("패스워드가 서로 다릅니다.");
			return false;
		}

		// 모든 입력값이 올바를때, 폼의 데이터를 서버로 전송 (submit)

		// 기본 form 액션에 설정된 페이지가 아닌 다른 페이지로 변경할 때
		f.action = "bbb.html";
		// 폼을 서브밋 한다.
		f.submit();
	}
</script>
</body>

결과 (action 설정한 페이지는 없으므로 서브밋 성공시 에러 페이지가 뜨는것은 정상!)

JavaScript - 엘리먼트의 값 추가, 삭제(innerHTML, remove)

뉴에이스 — Wed, 3 Jun 2020 17:21:54 +0900

소스

<body>
    <button onclick="doAdd();">추가</button>
    <button onclick="doDel();">삭제</button>
    <div id="list"></div>

    <script>
        function doAdd() {
            var list = document.querySelector("#list");
            list.innerHTML += "<h1>테스트</h1>";

            // dom 방식은 create 사용
        }

        function doDel() {
            var h1 = document.querySelector("h1"); // 제일 처음 찾은 h1 하나를 가져옴
            //h1.remove();
            //h1.parentNode.remove(); // h1의 부모인 div를 삭제
            h1.parentNode.innerHTML = ""; // h1 태그안의 내용을 삭제
        }
    </script>
</body>

결과

JavaScript - 엘리먼트의 속성 추출하기(getAttribute)

뉴에이스 — Wed, 3 Jun 2020 17:04:00 +0900

소스

<body>
	<!-- on : 이벤트 click : 속성, onkeypress, onkeydown, onkeyfocus, onkeyup, onbler, onmousemove -->
	<button onclick="doAction();" onk>확인</button>
	<!-- msg같은 브라우저 표준이 아닌 속성일 경우 data-msg로 사용하면 표준속성처럼 사용됨 -->
	<div id="result" data-msg="test">속성확인용...</div>

	<script>
		function doAction() {
			var divObj = document.querySelector("div");
			// div 태그에서 id 속성의 값을 확인
			console.log("divObj.id : ", divObj.id);
			console.log('divObj["id"] : ', divObj["id"]);
			console.log('divObj.getAttribute("id") : ', divObj.getAttribute("id"));

			//console.log("id : ", divObj.data-msg); // divObg.data - msg가 되기 때문에 ""로 묶어야함
			console.log('divObj["data-msg"] : ', divObj["data-msg"]); // undefined
			// 사용자정의속성은 setAttribute, getAttribute로 처리해야 정상적으로 사용 가능
			console.log('divObj.getAttribute("data-msg") : ', divObj.getAttribute("data-msg")); // test
		}
	</script>
</body>

결과

JavaScript - 엘리먼트의 속성 추가하기 2 (setAttribute)

뉴에이스 — Wed, 3 Jun 2020 16:35:28 +0900

    Dom API를 활용한 속성 추가하기
    setAttribute("키", 벨류)

소스

<body>
	<button onclick="doAdd();">추가</button>
	<div id="list"></div>

	<script>
		function doAdd() {
			var list = document.querySelector("#list");

			// <img msg="test" width="" height="" src="" />
			// 자식이 없는 img 태그의 경우 속성을 추가
			var img = document.createElement("img");

			img.setAttribute("src", "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png");
			img.setAttribute("width", 200);
			img.setAttribute("height", 150);
			// 사용자 정의 속성 추가 가능
			img.setAttribute("msg", "test");

			list.appendChild(img);
		}
	</script>
</body>

결과

JavaScript - 엘리먼트의 속성 추가하기 1

뉴에이스 — Wed, 3 Jun 2020 16:12:44 +0900

객체.속성명 = 값

사용자 정의속성은 추가되지 않는다.

소스

<body>
	<button onclick="doAdd();">추가</button>
	<div id="list"></div>

	<script>
		function doAdd() {
			var list = document.querySelector("#list");

			// <img msg="test" width="" height="" src="" />
			// 자식이 없는 img 태그의 경우 속성을 추가
			var img = document.createElement("img");
			img.src = "https://www.google.co.kr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png";
			img.width = 200;
			img.height = 150;

			// 사용자가 정의한 속성을 추가 - 브라우저에 추가되지 않음 (. 방식)
			img.msg = "test";

			list.appendChild(img);
		}
	</script>
</body>

결과