'javascript' 태그의 글 목록

프로토타입

자바의 class와 같은 역할

Web API

- 프레임워크 > 라이브러리 > API

- private 영역을 아예 막아 놓은, 웹에서 제공하는 라이브러리

- 개인이 구현할 수 없는 규모의 작업

- 다음 우편번호

http://postcode.map.daum.net/guide

Key : 도스공격 확인, 사용량 제한

데이터베이스를 직접 받아서 만들 경우 업데이트 어려움

<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분입니다.
            // 예제를 참고하여 다양한 활용법을 확인해 보세요.
        }
    }).open();
</script>

<script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
//네트워크에서 받아옴 CDN (자바의 import)

    new daum.Postcode(
    )
    
//daum 
//Postcode() 생성자
//call-back : 프로그램이 호출

    new daum.Postcode({
        oncomplete: function(data) {
        }
    })
    //매서드 콜하면서 인자값 넣어주기 - JSON 객체

 .open()
 //익명 인스턴스 방식

익명 인스턴스 방식

Javascript dom level 1

이벤트 할당 하는 여러 방식 (문법 레벨)

<input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>

//onclick 가장 오래된 방식

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
    </head>
    <body>
        <input type="text" id="postcode" placeholder="우편번호">
        <input type="button" onclick="sample4_execDaumPostcode()" value="우편번호 찾기"><br>
        <input type="text" id="Address1" placeholder="도로명주소">
        <input type="text" id="Address2" placeholder="상세주소">

        <script>
            function sample4_execDaumPostcode() {
                new daum.Postcode({
                    oncomplete: function(data) {
                        var roadAddr = data.roadAddress; 
                        document.getElementById('postcode').value = data.zonecode;
                        document.getElementById("Address1").value = roadAddr;
                    }
                }).open();
            }
        </script>


    </body>
</html>

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Regex] 유효성 검사 예제 (0)	2020.04.16
[Regex] 정규표현식 (0)	2020.04.16
[Javascript] 생성자 방식 객체 생성 (0)	2020.04.16
[Javascript] JSON (0)	2020.04.16
[Javascript] 객체 (0)	2020.04.14

//        var Person = {}; 객체 리터럴 방식

//        생성자 방식, function은 객체
        function Person(){
        }
        Var P = new Person();

        function Person(id,name){
            this.id =id;
            this.name = name;
        }
        Var P = new Person(1001,"jack");

자바스크립트에서는 생성자 내에 변수 선언하지 않고 사용

선언해봤자 지역변수로 생성자가 닫히면 사라짐

생성자와 함수를 구분할 방법 / 이유 없음

관습적으로 첫글자가 대문자면 생성자, 소문자면 함수

        function Person(id,name){
            this.id =id;
            this.name = name;
        } //초기값을 외부에서 받아오는 경우
        
        var p ={
            id : "id",
            name : "name"
        } // 초기값 받아올 필요 없는 경우
        
        var p = new Person(1001,"jack");
        console.log(p.id+" : "+p.name);

생성자 방식 : 초기값을 외부에서 받아오는 경우

객체 리터럴 방식 : 초기값 받아올 필요 없는 경우

https://medium.com/@mandeepkaur1/object-literal-vs-constructor-in-javascript-df143296b816

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Regex] 정규표현식 (0)	2020.04.16
[Javascript] API (0)	2020.04.16
[Javascript] JSON (0)	2020.04.16
[Javascript] 객체 (0)	2020.04.14
[Javascript] 클로저(closure) 예제 (0)	2020.04.14

JSON : JavaScript Object Notation 자바스크립트 객체 표기법 { key : value }

ex. 다른 언어, 다른 플랫폼끼리 데이터를 주고받는 경우

파이썬 네트워크 → 자바 네트워크

형식에 맞는 데이터를 사용해야함

XML 표기법 : 과거에 주로 사용, 현재도 사용중인 곳 있음, 국가 공공기관 데이터

→ JSON : 발전된 표기법

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] API (0)	2020.04.16
[Javascript] 생성자 방식 객체 생성 (0)	2020.04.16
[Javascript] 객체 (0)	2020.04.14
[Javascript] 클로저(closure) 예제 (0)	2020.04.14
[Javascript] 클로저(closure) (0)	2020.04.14

자바스크립트의 객체는

자바의 map과 같이 key - value

            // [] : 배열
            // {} : 객체
            var obj = {
                
                name : "jack",
                age : 20,
                email : "jack@naver.com"
                
            }; //객체 Literal
            
            console.log(obj);

            var obj = {
                name : "jack",
                age : 20,
                email : "jack@naver.com"
            };
            
            console.log("이름 : "+obj.name);
            console.log("나이 : "+obj.age);
            console.log("이메일 : "+obj.email);

객체 안에 함수 넣기

            var calc = {
                plus : function(num1,num2){return num1+num2;}
            };
            
            console.log("덧셈 결과 : "+calc.plus(10,20));
            //덧셈 결과 : 30

객체 안에 배열

            var student = {
                name : "jack",
                age : 20,
                email : "jack@naver.com",
                score : [80,90,30]
            }; //객체 Literal
            
            console.log(student.score[1]);
            //90

객체 안에 객체 만들기

            var student = {
                name : "jack",
                age : 20,
                email : "jack@naver.com",
                score : {
                   grade1 :{ kor :80, eng:50, math:30},
                   grade2 :{ kor :20, eng:60, math:50},
                   grade3 :{ kor :30, eng:70, math:60}
                } // 이중 객체
            }; 
            console.log("3학년 수학점수 : "+student.score.grade3.math);
            //3학년 수학점수 : 60

예제 - "Javascript" 출력하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
    var target ={
        key : [function(){return "Hello";},function(){return "Javascript";}]
    };
    console.log((target.key[1])());
    
    </script>
</body>
</html>

IIFE

예제 - hotdog 출력하기

            var shop = {
                listMenu : function(){
                    return{ 
                        beverage:["Ade","Coffee"],
                        bread:["Muffin","Hotdog"],
                        icecream:["Strawberry","Chocolate"]
                    }
                } 
            }
            console.log((shop.listMenu)().bread[1]);

예제 - 조건에 맞는 객체 만들기

            for(var i=0;i<3;i++){
                console.log(shop[0].fruit()[i]);
            }

            var shop =[
                {    
                    fruit : function(){return ["orange","mango","apple"]}
                }
            ]

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] 생성자 방식 객체 생성 (0)	2020.04.16
[Javascript] JSON (0)	2020.04.16
[Javascript] 클로저(closure) 예제 (0)	2020.04.14
[Javascript] 클로저(closure) (0)	2020.04.14
[Javascript] window.onload (0)	2020.04.14

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            window.onload = function(){
                var btns = document.getElementsByClassName("btn");
                for(var i =0;i<btns.length;i++){
                    btns[i].onclick = (function(p){
                        return function(){
                            alert(btns[p].innerHTML);
                        };
                    })(i);
                }
            }
        </script>
    </head>
    <body>
        <button class="btn">Button1</button>
        <button class="btn">Button2</button>
        <button class="btn">Button3</button>
        <button class="btn">Button4</button>
        <button class="btn">Button5</button>
    </body>
</html>

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] JSON (0)	2020.04.16
[Javascript] 객체 (0)	2020.04.14
[Javascript] 클로저(closure) (0)	2020.04.14
[Javascript] window.onload (0)	2020.04.14
[Javascript] splice 예제 (0)	2020.04.14

배열에 엘리먼트, 함수도 담을 수 있음

getElementsByClassName

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            window.onload = function(){
                var btns = document.getElementsByClassName("btn");
                
                for(var i =0;i<btns.length;i++){
                    btns[i].onclick =function(){
                        alert("Pop!");
                    };
                }
            }
        </script>
    </head>
    <body>
        <button class="btn">Button1</button>
        <button class="btn">Button2</button>
        <button class="btn">Button3</button>
        <button class="btn">Button4</button>
        <button class="btn">Button5</button>
    </body>
</html>

cf] for문을 쓰지 않고 바로 이벤트를 주는경우 실행되지 않음!

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            window.onload = function(){
                var btns = document.getElementsByClassName("btn");
                btns.onclick= function(){
                    alert("POP!");
                }
                
//                for(var i =0;i<btns.length;i++){
//                    btns[i].onclick =function(){
//                        alert("Pop!");
//                    };
//                }

            }
        </script>
    </head>
    <body>
        <button class="btn">Button1</button>
        <button class="btn">Button2</button>
        <button class="btn">Button3</button>
        <button class="btn">Button4</button>
        <button class="btn">Button5</button>
    </body>
</html>

엘리먼트(버튼)에는 이벤트를 줄수 있지만

배열에다가는 이벤트를 줘도 발생되지 않음

버튼 번호대로 pop에 출력하고 싶을 때

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            window.onload = function(){
                var btns = document.getElementsByClassName("btn");

                
                for(var i =0;i<btns.length;i++){
                    btns[i].onclick =function(){
                        alert("Pop!"+i);
                    };
                }

            }
        </script>
    </head>
    <body>
        <button class="btn">Button1</button>
        <button class="btn">Button2</button>
        <button class="btn">Button3</button>
        <button class="btn">Button4</button>
        <button class="btn">Button5</button>
    </body>
</html>

자바에서 하듯이 for문 안에 변수i로 표기할 경우, 모든 버튼에서 5로 출력됨

자바에서 쓰레드를 만들 때의 Call-back패턴 생각해보자

for문이 다 돌고

onclick 클릭 했을 때의 함수실행

그 때 할당된 i가 출력되면 5

자바스크립트에서 클로저(closure)를 허용

자바스크립트는 callback 안에서 지역변수 사용

(자바에서는 상수처리(파이널)를 하거나 멤버필드로 빼야 쓸 수 있음)

지역변수를 사용하는 특정 구역에서 함수를 생성하면

함수는 자신이 생성된 시점에 외부 환경을 기억한다.

- 지역변수임에도 내부에서 특정 함수가 그 지역변수를 사용하면 사라지지 않음 (자바에서는 지워짐)

해결방법 1. 포괄적 해결 방법

IIFE ( Immediately Invoked Function Expressions ) : 즉각적으로 실행되는 함수 표현

클로저를 해결하기 위해 만들어지진 않았지만, 상황 해결 가능

// 자바 - 익명 인스턴스 기법
// 1회용으로 쓰고 버려짐

new Thread().start()

함수를 만든 자리에서 바로 call하는 표현 방법 : 이피

스크립트계열 언어에 허용되는 문법들...

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

        (function(num1,num2){
            return num1+num2;
        })(10,20);

            var result =  (function(num1,num2){
                return num1+num2;
            })(10,20);

            console.log(result);

IIFE 와 클로저

                for(var i =0;i<btns.length;i++){
                    btns[i].onclick = // 함수가 들어가야함
                }

                for(var i =0;i<btns.length;i++){
                    btns[i].onclick = function(){
                        return function(){}
                    };
                }
                //위의 함수가 들어감

                for(var i =0;i<btns.length;i++){
                    btns[i].onclick = (function(){
                        return function(){}
                    })();
                }
                // IIFE로 감싸져서 리턴함수가 들어감

                for(var i =0;i<btns.length;i++){
                    btns[i].onclick = (function(){
                        return function(){
                            alert("Pop!"+i);//밖의 i를 기억
                        };
                    })();
                }

                for(var i =0;i<btns.length;i++){
                    btns[i].onclick = (function(p){
                        return function(){
                            alert("Pop!"+p); //반복될때 새로운 p 생성
                        };
                    })(i);
                }

https://meetup.toast.com/posts/86

자바스크립트의 스코프와 클로저 : TOAST Meetup

자바스크립트의 스코프와 클로저

meetup.toast.com

this : 자기자신

            window.onload = function(){
                //                var btns = document.getElementsByClassName("btn");
                //                for(var i =0;i<btns.length;i++){
                //                    btns[i].onclick = (function(p){
                //                        return function(){
                //                            alert(btns[p].innerHTML);
                //                        };
                //                    })(i);
                //                }

                var btns = document.getElementsByClassName("btn");

                for(var i =0;i<btns.length;i++){

                    btns[i].onclick = function(){
                        alert(this.innerHTML);
                    };
                }
            }

this를 쓸수 없는 상황에서는 이피사용

https://blueshw.github.io/2018/03/12/this/

[javascript] this는 어렵지 않습니다.

this 는 어렵지 않습니다. this 를 어렴풋이 알고는 있지만, 누가 물어봤을때 제대로 대답해 줄수 있도록 정리해보겠습니다. 많은 개발자들이 javascript 의 this 를 혼란스러워합니다. 사실 개념 자체가 어렵진 않습니다. 다만, 다른 프…

blueshw.github.io

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] 객체 (0)	2020.04.14
[Javascript] 클로저(closure) 예제 (0)	2020.04.14
[Javascript] window.onload (0)	2020.04.14
[Javascript] splice 예제 (0)	2020.04.14
[Javascript] 배열 > join / reverse / slice / indexOf (0)	2020.04.14

1) 스크립트가 바디와 섞여 있으면 복잡함

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

    </head>
    <body>
        <button id="btn">버튼</button>
        
        <script>
        	document.getElementById("btn").onclick = function(){
            	alert("Pop!")
        </script>
        
    </body>
</html>

2) 스크립트를 헤드 부분으로 이동시 동작하지 않음

(순차적으로 실행되기 때문에 버튼이 없는데 버튼에 이벤트 줄수 없음)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        
        <script>
       		document.getElementById("btn").onclick = function(){
            	alert("Pop!")
      		 }
        </script>
        
    </head>
    <body>
        <button id="btn">버튼</button>
    </body>
</html>

3)

onload 이벤트 리스너를 활용

- 로드가 완료 되면 실행

- 코드의 위치는 가장 위에 있지만 실제 실행은 맨 마지막에 실행된다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            window.onload = function(){
                document.getElementById("btn").onclick = function(){
                    alert("Pop!")
                }
            }
        </script>
    </head>
    <body>
        <button id="btn">버튼</button>
    </body>
</html>

External 방식으로 구현도 가능

onload를 두번쓰면 덮어씌워짐

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] 클로저(closure) 예제 (0)	2020.04.14
[Javascript] 클로저(closure) (0)	2020.04.14
[Javascript] splice 예제 (0)	2020.04.14
[Javascript] 배열 > join / reverse / slice / indexOf (0)	2020.04.14
[Javascript] 배열 예제 (0)	2020.04.13

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
        <fieldset>
            <legend>Fruits</legend>
            <div id="screen"></div>
        </fieldset>
        <input id="txt1" type="text" placeholder="추가할 단어를 입력하세요">
        <input id="add" type="button" value="추가하기">

        <br>
        <input id="txt2" type="text" placeholder="삭제할 단어를 입력하세요">
        <input id="del" type="button" value="삭제하기">


        <script>
            var arr = ["Apple"];
            document.getElementById("screen").innerHTML	 = arr;

            document.getElementById("add").onclick	 = function(){
                var addName = document.getElementById("txt1").value;
                console.log(addName);
                arr.splice(arr.length,0,addName);
                document.getElementById("screen").innerHTML	 = arr;

            };

            document.getElementById("del").onclick	 = function(){
                var delName = document.getElementById("txt2").value
                console.log(delName);
                var delIndex = arr.indexOf(delName);
                //맞는 인덱스 없으면 -1 반환
                //splice 시작 위치가 -1 이면 뒤에서 삭제

                if(delIndex != '-1'){
                    console.log(delIndex);
                    arr.splice(delIndex,1);
                    document.getElementById("screen").innerHTML	 = arr;
                }else{
                    document.getElementById("txt2").value = '해당하는 과일이 없습니다.'
                }
            };


        </script>
    </body>
</html>

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] 클로저(closure) (0)	2020.04.14
[Javascript] window.onload (0)	2020.04.14
[Javascript] 배열 > join / reverse / slice / indexOf (0)	2020.04.14
[Javascript] 배열 예제 (0)	2020.04.13
[Javascript] 배열 > pop / push / shift / unshift (0)	2020.04.13

끄적끄적

javascript

[Javascript] API

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] 생성자 방식 객체 생성

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] JSON

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] 객체

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] 클로저(closure) 예제

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] 클로저(closure)

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] window.onload

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

[Javascript] splice 예제

'디지털 컨버전스 > Java Script' 카테고리의 다른 글

+ Recent posts

티스토리툴바