2016년 6월 3일 금요일

02day javascript

Javascript

  • 함수
           자료와 흐름의 묶음 => 모듈
           일정구간을 반복사용을 목적으로 만듦 (반복문의 의미와 비슷함)
    • 사용자 정의 함수(=프로그래머가 만든 것)
    • 함수의 선언
      • 함수의 이름은 식별자 규칙을 따름
    • 내장함수(제공되는 것)
      • 자바스크립트를 만든 곳에서 제공
      • API / Library
      • 사용법 정리를 잘 해두어야함
      • 인코딩/디코딩 함수
        • 한글의 경우 url에 바뀌어서 표현됨
          https://search.naver.com/search.naver?where=nexearch&query=%EC%8A%A4%ED%83%80%EC%9B%8C%EC%A6%88&sm=top_hty&fbm=1&ie=utf8
        • 크롬은 인코딩과 디코딩이 잘되어 있지만,
          익스플로러의 경우 url에 인코딩해주어야함
  • 배열
    • 1개 변수명에 여러 데이터(값)을 넣을 수 있는 방법
    • 여러 데이터는 index를 통해 구분함
  • 객체
           변수와 함수가 들어있음
    • 변수 - 멤버 변수
    • 함수 - 멤버 메서드
    • [ ] / { }


1
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        // for 문 : 유한루프에 사용하는 것이 일반적: 몇번 반복을 알고 있을 경우
        // for(var i=1; i<=10; i++){
        //     console.log(i);
        // }
        
        //while 문 : 무한루프에서 사용하는 것이 일반적: 반복의 끝을 모름
        // 무한루프는 채팅에서 글자를 입력할 떄까지 기다리는 경우 사용됨
        //1~10까지 출력
        var i=1;
        while(i<=10){
            console.log(i);
            i++;
        }
        //do while 문 : 한번은 반드시 실행 시키고 루프를 걸 때
        // 1~10까지 출력
        var i=1;
        do{
            console.log(i);
            i++;
        }while(i<=10);
    </script>
</body>
</html>


2
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //break 는 반복문을 중지
        //continue는 현재 반복을 skip 다음반복 진행
        for(var i=1; i<=10; i++){
            if(i==5){
                break;
            }
            console.log(i);
        }
        for(var i=1; i<=10; i++){
            if(i==5){
                continue;
            }
            console.log(i);
        }
    </script>
</body>
</html>


3
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //짝수만 출력
        for(var i=1; i<=10; i++){
            if(i%2 ==1){
                continue;
            }
            console.log(i);
        }
        
        //while문 중첩으로 *피라미드 만들기
        var i=1;
        while(i<29){
            j=0;
            document.write("<div align='center'>")
            while(j<i){
                document.write("*");
                j++;
            }
            document.write("<br/>");
            document.write("</div>");
            i=i+2;
        }
        
        //while문 중첩으로 *피라미드 만들기
        var i = 1;
        while(i<=14){
            var j=15;
            while(j>i){
                document.write("&nbsp;&nbsp;");
                j--;
            }
            var k=0;
            while(k<2*i-1){
                document.write("*");
                k++;
            }
            document.write("<br/>");
            i++;
        }
    </script>
</body>
</html>


4
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <!--함수를 선언할 때는 head태그 안에 쓰는게 일반적-->
    <script type="text/javascript">
        //함수의 선언
        function func1(){
            document.write("Hellow Function <br />")
        }
        //함수의 선언2 
        function func2(data1){  //data1 = 함수내의 지역 변수
            document.write("data1: "+ data1 +"<br />")
        }
        //함수의 선언3 
        function func3(data1,data2){  //인자의 갯수는 256개 까지 가능
            document.write("data1: "+ data1 +"<br />")
            document.write("data2: "+ data2 +"<br />")
        }
        //함수의 선언4 
        function func4(data1,data2){  //내부인자 계산 가능함
            var sum= data1+data2;
            return sum; //한 개의 값만 리턴 할 수 있음
        }
    </script>
</head>
<body>
    <script type="text/javascript">
        //함수의 호출 : 여러번 호출이 가능함
        func1();
        func1();
        func1();
        
        func2(10);
        func2(20);
        
        func3("삼십",40);
        
        var result = func4(10,20);
        document.write("결과: "+ result+"<br/>");
        document.write("결과: "+ func4(10,20)+"<br/>");
        

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


5
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript">
        //익명함수
        //func1 = 함수형 변수 : 함수의 이름은 없고 함수자체를 저장한 것임
        //일급함수
        var func1 = function(){
            document.write("Hellow function <br />");
        };
        var func2 = func1;
        var func3 = function(data1){
            document.write("data1 : "+data1+"<br />");
        };
    </script>
</head>
<body>
    <script type="text/javascript">
        //함수 호출
        func1();
        document.write(typeof(func1)+"<br />"); //함수의 이름이 없고, 자료형태가 함수임
        func2();
        func3(10);
    </script>
</body>
</html>


6
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content= "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript">
        //익명함수의 중복선언이 가능함 override됨
        //함수의 중복선언이 가능함, 익스플로러 버전이 낮으면 에러가 날 수 있음
        var func1 = function(){
            document.write("Hellow function 1<br />");
        };
        var func1 = function(){
            document.write("Hellow function 2<br />");
        };
        function func2(){
            document.write("Hellow function 1<br />");
        };
        function func2(){
            document.write("Hellow function 2<br />");
        };
    </script>
</head>
<body>
    <script type="text/javascript">
        func1();
        func2();
    </script>
</body>
</html>


7
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript">
        var callback = function(){
            document.write("함수 호출 <br />");
        }
        //함수의 매개변수로 함수형을 받을 수 있음
        //콜백 함수
        var callTenTimes = function(callback1){ 
            for(var i=0; i<10; i++){
                callback1();
            }
        }
        //함수를 리턴하는 함수
        function returnFunction(){
            return function(){
                alert('Hello Function ..!');
            }
        }
    </script>
</head>
<body>
    <script type="text/javascript">
        callTenTimes(callback);
        returnFunction()(); //리턴함수를 실행 할때는 괄호를 두번 적음
    </script>
</body>
</html>


8
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript">
        function gugu(a){
            for(i=1; i<=9;i++){
                document.write(a+"x"+i+"="+a*i+"<br/>");
            }
        }
    </script>
</head>
<body>
    <script type="text/javascript">
    //구구단 함수 이용해서
        document.write("<table border='1' cellspacing='0' cellpadding='10'>")
        for(y=1; y<=3; y++){  //위 함수에서 설정한 i 값을 중복으로 사용하면 에러남
            document.write("<tr align='center'>")
            for(j=3*y-2; j<=3*y; j++){
                document.write("<td>")
                gugu(j)
                document.write("</td>")
            }
            document.write("</tr>")
        }
        document.write("</table>")
    </script>
</body>
</html>


9
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
    #outer td { text-align: center; width: 150px; border: 1px solid #ff0000; }
    #inner td { text-align: center; width: 150px; border: 1px dotted #ff00ff; }
</style>
<script type="text/javascript">
    //구구단
    var gugudan = function(dan) {
        var str = ""
        str += "<table id='inner'>";
        for(var i=1 ; i<=9 ; i++) {
            str += "<tr>";
            str += "    <td>" + dan + " X " + i + " = " + (dan*i) + "</td>";
            str += "</tr>";
        }
        str += "</table>";
        return str;
    };

    document.write("<table id='outer'>");
    var dan = 1; //외부에 dan변수를 생성함으로서 중복된 반복문 안에서 총 반복횟수를 활용가능
    for(var i=1 ; i<=3 ; i++) {
        document.write("<tr>");
        for(var j=1 ; j<=3 ; j++) {
            document.write("<td>" + gugudan(dan) + "</td>");   
            ++dan;
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>
</head>
<body>
</body>
</html>


10
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript">
        // 가변인자 함수
        // 매개변수의 갯수를 모를 때 사용
        var sumAll =function(){
            //arguments 변수를 이용해서 처리함
            //arguments.length = 인자의 갯수
            //arguments[순서] = 인자 값
            document.write(arguments.length +"<br />")
            document.write(arguments[0] +"<br />")
            document.write(arguments[1] +"<br /><br />")
        }
    </script>
</head>
<body>
    <script type="text/javascript">
        sumAll(1);
        sumAll(1,2,3);
        sumAll(1,2,3,4,5);
    </script>
</body>
</html>


11
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //자료의 형태를 변환시키는 함수 String(), Number(), Boolean()
        var data1= '10';
        var data2= '20';
        // var sum = data1 +data2;
        var sum = Number(data1) +Number(data2); //숫자전환
        document.write("결과 : "+sum+"<br />");
        
        // NaN (Not a Number)
        var data3= '20일';
        document.write("결과 : "+Number(data3)+"<br />");
    </script>
</body>
</html>


12
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <script type="text/javascript">
        //자료의 형태를 변환시키는 함수 String(), Number(), Boolean()
        var data1= 10;
        var data2= 20;
        // var sum = data1 +data2;
        var sum = String(data1) +String(data2); //문자전환
        document.write("결과 : "+sum+"<br />");
        var sum = data1 +""+ data2; //숫자를 문자형을 더하고 싶으면 더하기 중간에 빈문자 넣어도 됨
        document.write("결과 : "+sum+"<br />");
    </script>
</body>
</html>


13
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript">
        
    </script>
</head>
<body>
    <script type="text/javascript">
        document.write(Boolean(0)+"<br/>");
        document.write(Boolean(1)+"<br/>");
        document.write(Boolean(NaN)+"<br/>");
        document.write(Boolean('')+"<br/>");
        document.write(Boolean('가')+"<br/>");
        document.write(Boolean(null)+"<br/>");
        document.write(Boolean(undefined)+"<br/>");
    </script>
</body>
</html>


14
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //확인창 팝업
        if(confirm('Hello Javascript?')){
            document.write("확인");
        }else{
            document.write("취소");
        } 
    </script>
</body>
</html>


15
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //타이머함수
        //setInterval 주기적인 실행, setTimeout 한번 실행
        //웹상에 시계나 경매를 할때 사용함
        //무한루프
        var intervalID=setInterval(function(){
            console.log(new Date());  //new Date 날짜 표현 객체
        },1000); //밀리세컨드 단위 //1초마다 함수를 실행합니다 
        
        setTimeout(function(){
            //타이머를 종료합니다.
            clearInterval(intervalID);
        }, 10000);
    </script>
</body>
</html>


16
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //인코딩과 디코딩
        //한글의 경우 url으로 옮길 때 인코딩 필요
        var str = '스타워즈';
        encodestr = encodeURIComponent(str);
        
        document.write("인코딩 문자열 : "+encodestr+"<br />");
        document.write("디코딩 문자열 : "+decodeURIComponent(encodestr));
    </script>
</body>
</html>


17
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //eval 문자열을 자바스크립트 코드로 실행하는 함수
        var expr = "2 + 3";
        document.write("결과 : "+ expr + "<br />")
        document.write("결과 : "+ eval(expr) + "<br />") 
        
        var willEval="";
        willEval += "var number = 10;";
        // willEval += "var number = 10 /n" 자바스크립트은 ; 가 디폴트가 아님 엔터(/n)를 넣어도 됨  
        willEval += "alert(number)";
        
        eval(willEval);
    </script>
</body>
</html>


18
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //숫자 변환함수 Number은 문자가 섞여있으면 숫자 뽑아낼 수 없음
        var won = '1000d원';
        var dollor = '1.5$';
        document.write(Number(won)+':'+Number(dollor)+"<br />");
        //숫자 변환함수 parseInt, parseFloat
        var won = '1000d원';
        var dollor = '1.5$';
        document.write(parseInt(won)+':'+parseInt(dollor)+"<br />");
        document.write(parseFloat(won)+':'+parseFloat(dollor)+"<br />");
        
    </script>
</body>
</html>


19
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //배열의 선언
        var arr1 = [];
        //배열의 초기화
        arr1[0] = 0;   //index는 0 부터 시작함
        arr1[1] = 10;
        arr1[2] = 20;
        
        document.write(arr1 + "<br />");
        
        //배열의 선언과 초기화
        var arr2 =["10","20","30"];
        document.write(arr2 + "<br />");
        document.write(arr2[0] + "<br />"); //배열의 접근은 index 방식
        document.write(arr2[2] + "<br />");
        
        //배열안의 데이터의 개수
        document.write(arr2.length + "<br />");
        
        //배열 안의 전체 데이터를 length로 부를 수 있음
        for(var i=0; i<arr2.length; i++){
            document.write(arr2[i]+"<br />");
        }
        //배열안에 다른 종류의 데이터를 넣어도 됨
        var array =[273,"String",true,function(){ },{},[273,103]];
        document.write(array+"<br />");
        document.write(array.length+"<br />");
        
    </script>
</body>
</html>


20
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //for문과 배열
        var arr2 =["10","20","30"];
        for(var i in arr2){
            document.write(arr2[i] + "<br />"); 
        }
        
        var arr3 = Array(10,20,30,40);
        for(var i in arr3){
            document.write(i + "<br />"); //i 값은 인덱스 번호다
            document.write(arr3[i] + "<br />"); 
        }
    </script>
</body>
</html>


21
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //객체 : 변수와 함수의 묶음
        //객체의 선언
        var product1 ={};
        var product2 ={
            name: '7D 건조 망고',
            type: '당절임',
            component: '망고,설탕,기타',
            region: '필리핀'
        }
        //객체 데이터 접근 방법
        document.write(product2['name']+'<br />')
        document.write(product2.name+'<br />')
        document.write(product2[0]+'<br />') //인덱스 형태로는 가져오지 못함
        //객체의 초기화
        product2.name = '3D 건조 딸기'
        document.write(product2.name+'<br />')
        
    </script>
</body>
</html>


22
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //객체 - 사용자 정의 객체
        var product1 ={
            //변수의 선언
            name: '7D 건조 망고',
            type: '당절임',
            component: '망고,설탕,기타',
            region: '필리핀',
            //함수의 선언
            eat: function(){
                document.write("맛있게 먹는다.<br />")
            },
            test: function(){
                document.write("테스트 한다.<br />")
            }            
        }
        
        product1.eat()
        product1.test()
    </script>
</body>
</html>


23
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //String객체 : 내장 객체 : 자바스크립트 상에서 가장 많이 사용됨
        //문자열 객체 생성 2가지 방법
        var stringFormLiteral = "Hello String"; //많이 사용 되는 방법
        var stringFormContructor = new String("Hello String");
        //자료형태 다르게 나옴
        document.write(typeof(stringFormLiteral)+"<br />")
        document.write(typeof(stringFormContructor)+"<br />") 
    </script>
</body>
</html>


24
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //String객체 메소드(=함수)
        //길이 추출함수
        var str1 = "Hello String";
        document.write(str1.length + "<br />"); 
        
        //한글자 추출 (인덱스로 추출함)
        var char1 = str1.charAt(0); //처음 글자 추출
        document.write(char1 + "<br />");
        var char1 = str1.charAt(str1.length-1); //마지막 글자 추출
        document.write(char1 + "<br />");
        
        //문자열 추출 (글자 위치로 추출함)
        var sub1 = str1.substr(6,5); // 6위치에서 5글자를 추출
        document.write(sub1 + "<br />");
        var sub1 = str1.substring(6,11); // 6위치에서 11위치까지 추출
        document.write(sub1 + "<br />");
        
        //문자열 위치 (인덱스를 반환함)
        var pos1 = str1.indexOf('l');   //문자의 인덱스를 반환함
        document.write(pos1 + "<br />")
        var pos2 = str1.lastIndexOf('l');   //뒤에서 부터 찾아서 인덱스를 반환
        document.write(pos2 + "<br />")
        
        //대소문자 출력
        document.write(str1.toUpperCase() + "<br />")
        document.write(str1.toLowerCase() + "<br />")
        
        //문자열 치환
        var repstr = str1.replace("Hello", "안녕"); //Hello 를 안녕으로 바꿈
        document.write(repstr + "<br />")
        

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


25
<!doctype html>
<html>
<head>
    <title>제목글</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
    <script type="text/javascript">
        //문자열 자르기
        var str1 = "사과,딸기,수박"
        var arr1 = str1.split(","); //"," 로 구분해서 자름
        
        for(var i in arr1){
            document.write(arr1[i]+"<br />");
        }
        //
        var str = "hong gil dong"
        function Capital(aa){
            var aa1= aa.split(" ");
            for(var i in aa1){
                aa1[i] = aa1[i].replace(aa1[i][0], aa1[i].charAt(0).toUpperCase())
            }
            for(var j=1; j<aa1.length; j++){
                aa1[0] += (" "+ aa1[j])
            }
            return(aa1[0])
        }
        document.write(Capital(str))      
    </script>
</body>
</html>


댓글 없음:

댓글 쓰기