java에서 for문을 사용할 때 ArrayList라던지 값을 한번에 빼는 방법으로


향상된 for문을 사용하여 간편하게 값을 빼냈다.


하지만 아쉽게도 JS에는 향상된 for문이 없고


for each라는 구문이 있다.


forEach는 함수를 인자로 받아 반복할 구문을 실행한다.


그 함수는 두가지의 매개변수가 들어가는데 item(배열의 항목), idx(인덱스, 항목 번호)를 받는다.


이 두가지 매개변수로 반복문을 실행한다.


예제를 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>반복문</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        // for 문으로 개별 값 출력
        for(var i = 0; i < num.length; i++){
            console.log(num[i]);
        }

        // For Each 문으로 개별값 출력
        // 배열.forEach(실행 함수 구문);
        num.forEach(function(item, idx){  // 익명함수 활용
            console.log(idx + ", " + item);
        });

        num.forEach(printNum);
        function printNum(item, idx){   // 일반 함수 활용
            console.log("[" + idx + "] " + item);
        }
    </script>
</html>



저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-001.기본 뼈대 새창으로 열기톰캣 다운로드 및 자바스크립트 개발 환경 구축, 파일 생성 실행  (0) 2018.11.05
[JS]04-09.데이터 타입 구분, 콘솔(console), 바디(body)의 요소 스크립트(script)로 가져오기 및 이벤트 객체 정보 보는 법  (0) 2018.10.19
[JS]04-07.Shallow Copy 현상, 배열 대입 이상  (0) 2018.10.19
[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19

Shallow Copy는 A가 B에 대입을 하고


A의 값을 바꿨을 때 B의 값도 따라서 변경이 된다.


이 현상은 대입 할 때 A의 값을 그대로 넣는게 아니고


값을 참조하는 것이기 때문이다.


C언어에서 포인터를 배운 사람은 이해가 갈 것이다.



처음 접하는 사람은 이게 무슨 소리인가 하는데


예를 들자면


A의 값이 "한식이, 두식이, 석삼"이 있을 때


각각의 값의 주소가 1번지 2번지 3번지라고 치자


이럴 때 B에게 대입을 하면 "한식이, 두식이, 석삼"을 받는것이 아니고


1번지, 2번지, 3번지를 받아 그 위치에 있는 값을 참조하라는 것이다.


이 문제를 해결하기 위한 방법으로 값을 하나하나 씩 대입하면 된다.


예제를 한번 확인해보자.



<html>
    <head>
        <meta charset="UTF-8">
        <title>배열 통 카피</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        
        var num = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

        function shallowCopy(){
            var copyNum = num;
            console.log("num : " + num);
            console.log("copyNum : " + copyNum);
            num[0] = 50;
            console.log("num : " + num);
            console.log("copyNum : " + copyNum);
        }
        shallowCopy();
        // 위 코드를 동작하면 num을 나중에 바꾸는데 copy엔 값도 안넣었지만
        // copy도 따라서 변경된다. 이 현상을 shallow copy현상이라고 한다.

        function copyArr(){
            var copy = [];
            // 배열간 복사를 위해서는 값을 하나씩 전달 해야 한다.
            for(var i = 0; i < num.length; i++){
                copy[i] = num[i];
            }
            copy[0] = 99;
            console.log("copy : " + copy);
            console.log("num : " + num);
        }

        copyArr();

    </script>
</html>





콘솔의 결과가 다음과 같이 나온다.


두번째의 결과는 하나하나 씩 대입하여 참조 형식으로 들어가지 않았다.


이 현상은 자기도 모르게 아무 생각없이 대입하여 나오는 실수로


값이 예상과 다르게 나온다면 꼭 의심해보고 주의하여야 한다.


저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-09.데이터 타입 구분, 콘솔(console), 바디(body)의 요소 스크립트(script)로 가져오기 및 이벤트 객체 정보 보는 법  (0) 2018.10.19
[JS]04-08.for each문, 반복문 한꺼번에  (0) 2018.10.19
[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18

js에서 배열방에 사용할 수 있는 다양한 메소드를 알아보자.


splice는 특정 번호의 방, R 부터 N개의 데이터를 지우고 R번호 부터 데이터를 집어 넣을 수 있다.


slice는 N1번 부터 N2번 까지의 데이터를 반환한다.


split은 java에서 사용하던 split과 똑같이 요소를 특정 단어로 나눠준다.


sort는 정렬기능


reverse는 역정렬


delete는 삭제하여 empty로 비워둠


concat, 배열 합치기


valueOf 배열의 값 반환


join, 배열의 값을 반환할 때 구분자를 추가하여 반환


정렬의 경우 5~10개 까지는 안정적으로 작동한다.


splice의 경우 무슨말인지 모를 수 있는데 예제를 실행하여 결과를 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>배열 함수</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <button onclick="spliceDel()">spliceDel</button>
        <button onclick="spliceAdd()">spliceAdd</button>
        <button onclick="sliceEx()">sliceEx</button>
        <button onclick="splitEx()">splitEx</button>

        <br/><br/><br/>

        <button onclick="sortEx()">sortEx</button>
        <button onclick="reverseEx()">reverseEx</button>
        <button onclick="numberSort()">numberSort</button>

        <br/><br/><br/>

        <button onclick="delEx()">delEx</button>
        <button onclick="concatEx()">concatEx</button>
    </body>
    <script>
        var arr = ["마", "가", "다", "바", "나", "라"]
        /////////////////////////////////////////////// 정말 자주 쓰이는

        // splice를 이용한 요소 삭제
        function spliceDel(){
            console.log(arr);
            arr.splice(2, 2); // 2번 인덱스 포함 2개 삭제
            console.log(arr);
        }

        // splice를 이용한 요소 추가
        function spliceAdd(){
            console.log(arr);
            // 2번 인덱스부터 지울 갯수 0개, 추가할 값...
            arr.splice(2, 0, "C", "D");
            // arr.splice(2, 2, "C", "D"); 지울 갯수를 지정하여 교체형식 지우고 추가 형식도 가능
            console.log(arr);
        }

        //범위 자르기(원본데이터는 보존된다.)
        function sliceEx(){
            numArr = [0,1,2,3,4,5];
            console.log(numArr);
            //1번인덱스 부터 보여주고, 3번부터 버림
            var newArr = numArr.slice(1,3);            
            console.log(newArr);
            console.log(numArr);
        }

        //특정한 구분자로 자르기
        function splitEx(){
            var txt = "D:/img/girlgroup/twice.jpg";
            var depth = txt.split("/");
            console.log(depth);
            //twice.jpg 출력 하기
            console.log(depth[3]);
            console.log(depth[depth.length-1]);
        }

        /////////////////////////////////////////////// 자주 쓰이는

        // 배열 정렬(문자열)
        function sortEx(){
            arr.sort();
            console.log(arr);
        }

        // 배열 역정렬(문자열)
        function reverseEx(){
            arr.reverse();
            console.log(arr);
        }

        // 숫자 정렬(커스터마이징)
        var num = [3, 2, 4, 1, 5];
        function numberSort(){
            // a-b의 값이 -1이라면 바꾼다
            num.sort(function(a, b){return a-b});
            // 역정렬은 return b-a로 주면 된다.
            console.log(num);
        }

        /////////////////////////////////////////////// 잘 안쓰는
        
        // delete, 특정 인덱스를 삭제, 공간을 empty로 비워둠
        function delEx(){
            delete arr[2];
            console.log(arr);
            arr[2] = "new";
            console.log(arr);
        }
        // empty로 비워두면 접근 시 오류가 나기 때문에 쓰는걸 권장하지 않음, 주의가 필요

        // concat, 두개의 배열을 합쳐서 새로운 배열 생성
        function concatEx(){
            var arr1 = [1, 2, 3, 4, 5];
            var arr2 = ['a', 'b', 'c', 'd', 'e'];
            // arr.concat(arr1, arr2);
            var newArr = arr1.concat(arr2);
            console.log(newArr);
        }
        // 쓸 일이 있어 보이지만 구지 쓰지 않는 기능

        /////////////////////////////////////////////// 진짜 안쓰는

        // valueOf
        console.log(arr.valueOf()); // = console.log(arr);
        // 과거 콘솔이 없던 시절에 쓰던 기능

        //join
        console.log(arr.join("@")); // 항목 별 구분자 추가

    </script>
</html>



저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-08.for each문, 반복문 한꺼번에  (0) 2018.10.19
[JS]04-07.Shallow Copy 현상, 배열 대입 이상  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18
[JS]04-03.함수 생성 및 사용, 배열 생성 및 사용  (0) 2018.10.18

다차원 배열 역시 전의 java와 내용은 같다.


차이점이라면 선언 시 ()괄호를 안쓰고 전부 [] 를 쓴다.


그리고 java가 7차원 까지 지원한다면


js는 2차원까지만 지원한다.


고로 예제에서는 3차원 부분에 값을 넣으려면 [배열 형태]로 값을 넣어주어야 한다.


[0][0][0]와 같은 3차원 형식으로 사용하면 인식이 안된다.



<html>
    <head>
        <meta charset="UTF-8">
        <title>다차원 배열</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        // 5층 5호
        var royalApart = [
            // 1층 1~5호
            [1, 2, 3, 4, 5],
            // 2층 1~5호
            [11, 12, 13, 14, 15],
            // 3층 1~5호
            [21, 22, 23, 24, 25],
            // 4층 1~5호
            [31, 32, 33, 34, 35],
            // 5층 1~5호
            [41, 42, 43, 44, 45]
        ];
        // 3층 2호의 값
        console.log(royalApart[2][1]);
        // 2층 2호의 값
        console.log(royalApart[1][1]);
        // 4층 4호의 값
        console.log(royalApart[3][3]);

        // 아파트 1층에 5호, 각 호를 추가
        var apart = []; // 아파트(층과 호가 이 안에 들어감)
        var floor = []; // 층(호가 이 안에 들어감)
        var ho = [0, 0, 0]; // 호 수 (이 안에 방이 3개 있다.)
        // 한 층에 5개 호를 넣는다.
        floor.push(ho);
        floor.push(ho);
        floor.push(ho);
        floor.push(ho);
        floor.push(ho);
        apart.push(floor) // 층을 아파트에 추가
        // 배열 구조 확인 하기
        console.log(apart);

        // 0번 아파트 2층의 각 호를 아이들에게 나눠주자.
        // 자바스크립트는 2차원 배열 까지만 지원
        // 3차원 이상 부터는 새로 배열을 만들어 추가 해야 한다.
        console.log(apart[0][2]);
        apart[0][2] = [1, 2, '이'];
        // apart[0][2][0] = "이" 는 제대로 인식이 안된다.
        console.log(apart[0][2]);

        // 나머지 층도 값을 부여
        apart[0][0] = [1, 2, '영']; 
        apart[0][1] = [1, 2, '일']; 
        apart[0][3] = [1, 2, '삼']; 
        apart[0][4] = [1, 2, '사']; 
    </script>
</html>


저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-07.Shallow Copy 현상, 배열 대입 이상  (0) 2018.10.19
[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18
[JS]04-03.함수 생성 및 사용, 배열 생성 및 사용  (0) 2018.10.18
[JS]04-02.선언, 객체 생성, 선언, 값 입력, 콘솔 출력  (0) 2018.10.18

버튼을 눌렀을 때 어떤 함수가 작동하게 끔 설정해보자.


함수는 배열의 값을 넣었다 뺏다 하는 함수를 만들것이고


배열에서 값을 앞에 먼저 넣거나 뒤에 먼저 넣는 예제를 만든다.



<html>
    <head>
        <meta charset="UTF-8">
        <title>배열 2</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--버튼 역할만 수행-->
        <input type="button" value="PUSH" onclick="arrPush()"/>
        <!--버튼+submit 역할 수행 : form 안에서 사용시 주의, form에선 누르기만 해도 서버에 전송될 수 있음-->
        <button onclick="arrPop()">POP</button>
        <br/>
        <input type="button" value="unshift" onclick="arrUnshift()"/>
        <input type="button" value="shift" onclick="arrShift()"/>
    </body>
    <script>

        var arrNum = [];
        var i = 0;

        function arrPush(){
            i++;
            arrNum.push(i);
            console.log(arrNum);
        }

        function arrPop(){
            console.log(arrNum.pop()); // 뺀 값을 반환
            console.log(arrNum); // 배열에서 하나씩 빠진다.
        }

        // [] [] [] [] <- push() (값을 넣음)
        // [] [] [] pop() -> [] (값을 뺌)
        // unshift() -> [][][][] (앞에서부터 집어 넣음)
        // [] <- shift() [][][] (앞에 값을 뺌)

        /*버튼 추가 후 shift와 unshift 사용 하기*/
        
        function arrUnshift(){
            i++;
            arrNum.unshift(i);
            console.log(arrNum);
        }

        function arrShift(){
            console.log(arrNum.shift()); // 뺀 값을 반환
            console.log(arrNum); // 배열에서 하나씩 빠진다.
        }
    </script>
</html>



버튼의 경우 onclick 이벤트  속성을 선언하고 속성에 Script에 만들어둔


함수()를 입력하면 버튼을 누를 때 마다 적용된다.

저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-03.함수 생성 및 사용, 배열 생성 및 사용  (0) 2018.10.18
[JS]04-02.선언, 객체 생성, 선언, 값 입력, 콘솔 출력  (0) 2018.10.18
[JS]04-01.기본 뼈대  (0) 2018.10.18

js에서 함수는 변수처럼 생성한다.


따로 특징은 다음 예제의 주석에서 설명한다.


블로그 내용을 쭉 따라 와서 java를 봤다면 비슷하기 때문에 보는데 문제는 없을 것이다.


<html>
    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        //객체에 함수
        var Check = {};
        Check.balance = 10000;
        Check.deposit = function(amount){// js는 데이터 타입을 안받는다.
            console.log(amount + "원을 예금 하셨습니다.");
            this.balance += amount;
            console("총액 : " + this.balance)
        };

        //실행(매개 변수가 없어도 된다. 데이터 타입이 다 틀려도 그냥 대입이 되어 연산 된다.)
        Check.deposit();
        Check.deposit(1000);
        

    </script>
</html>












배열도 마찬가지로 java와 유사하다.


하지만 문자열 숫자열 등 상관없이 값을 넣을 수 있는데


왠만하면 한가지 타입만 넣는것을 권장한다.


배열을 사용하는 이유가 반복문을 통해서 같은 작업을 하게 되는데


자료형이 틀리면 오류가 발생할 수 있기 때문에 조심해야 한다.



js 자체가 거의 자료형 구분이 없다고 보면 되는데 연산 작업에는 자료형 구분이 중요하기 때문에


개인 판단에 맞겨서 알맞게 하면 된다.


참고로 "" 와 '' 구분도 상관없다.




java에서 전부 Object타입으로 선언하는 것과 같다.


내부에서 알아서 형변환이 이루어져 연산이 처리된다.


이러한 이유로 성능에 안좋다고 하지만 요즘 컴퓨터들이 상향 평준화 되어


연산이나 메모리 16기가를 채울 정도로 성능에 영향을 주는게 아니기 때문에 js가 주목받고 있다.




또한 배열과 비슷하다기 보다는 ArrayList와 비슷한데


js의 배열은 값을 추가할 수 있다는 특징이 있다.


예제를 한번 확인해보자



<html>
    <head>
        <meta charset="UTF-8">
        <title>배열 1</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        // 배열 선언 법 1
        var arrNum = [];
        // 배열 선언 법 2
        var arrString = new Array();

        /*데이터 넣기*/
        arrNum = [1, 2, 3, 4];
        arrString = ['a', 'b', 'c', 'd'];


        arrNum[4] = 5;
        arrString[4] = 'e';

        arrNum.push(6);
        arrString.push("f");

        console.log(arrNum.length);
        console.log(arrString.length);

        console.log(arrNum);
        console.log(arrString);
        
    </script>
</html>









저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18
[JS]04-02.선언, 객체 생성, 선언, 값 입력, 콘솔 출력  (0) 2018.10.18
[JS]04-01.기본 뼈대  (0) 2018.10.18

JS는 Java와 관련이 없지만 쓰임은 비슷한 부분이 있다.


그러므로 반복문 for, while 같은 기본 공통 기능들은 생략하고 바로 객체로 넘어간다.


var a = new Object( );


var car = { };


var obj = { 1:"값1", 2:"값2"};


3가지 방법으로 선언하고


a에 변수를 만들고 싶다면 a["변수 이름"]


car의 변수를 만들고 싶다면 car.변수이름


obj는 생성과 동시에 값이 만들어졌다.


그 외에


변수 선언의 예는 var attr = "score"; 처럼 선언하면 된다.


아래 예제를 통해 여러가지를 자세히 확인해 보자




<html>
    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        // js 싱글 주석
        /*js 멀티 주석*/

        /*객체 선언법*/
        //객체 선언 법 1
        var person = new Object();
        //객체 선언 법 2
        var car = {};
        //객체 선언 법 3
        var obj = {
            attr:"속성",method:"함수",constr:"없음"
        };

        /*객체에 값 넣기*/
        var attr = "score";

        /*Java와 다르게 선언을 안해도 객체를 알아서 만들어서 넣는다,이 특징을 유연하다고 한다.*/
        /*원래는 위의 객체 선언 법 3처럼 객체의 내부 변수를 선언해주어야 하지만*/
        /*아래와 같이 써도 만들어진다는 뜻*/
        car.name = "Fiat";
        car.model = "500";
        car.weight = 850;
        car.color = "white";
        car.isAuto = true;

        person["name"] = "kim";
        person["age"] = 26;
        person["married"] = true;
        // 변수 안의 값을 속성명으로 사용 할 수 있다.
        person[attr] = "속성"
        // 위의 var attr의 값이 들어가 person.score가 생성된다.

        /*콘솔로 값 출력하기*/
        console.log(car.name);
        console.log(person.age);
        console.log(person.score);
        console.log(obj.attr);
        console.error(car.model); // 에러
        console.warn(car.color); // 경고
        // 객체의 값을 전부 출력, 객체를 출력하면 됨
        console.log(obj);
        
        // 개발자가 콘솔을 통해서 값을 확인하는데
        // 만약 지우지 않고 공식적으로 서버에 올리면 
        // 보안상 취약해지기 때문에 콘솔 구문은 작업이 끝나면 지우도록 하자.
    </script>
</html>



콘솔의 출력은 Ctrl + Shift + p를 통해서 브라우져로 실행하고


F12를 누르면 코드를 볼 수 있고 콘솔창도 볼 수 있다.







저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18
[JS]04-03.함수 생성 및 사용, 배열 생성 및 사용  (0) 2018.10.18
[JS]04-01.기본 뼈대  (0) 2018.10.18

자바 스크립트는 HTML을 동적으로, 기능을 좀 더 좋게 하기위해 만들어진 언어이다.


자바와는 관련이 없다.


그런데 오라클에서 자바라는 이름을 쓰지 말라고 해서 ECM 스크립트라고 정식 명칭이 바뀌었다고 한다.


하지만 이미 자바 스크립트로 많이 알려졌기 때문에 자바 스크립트로 부른다.




그리고 자바 스크립트의 이용자, 웹개발자가 많아짐에 따라서


언어를 만드는 업체들에서 웹개발 용어 쪽을 따르는 경향이 있다고 한다.


그러므로 자바 스크립트를 배우면 활용성이 매우 좋다.



자바 스크립트는 CSS, Style 언어처럼 HTML에 추가로 작성하는 언어이다.


보통 Body 아래부분에 <script></script>와 같이 사용하며 style 옆 head 안쪽에 사용할 수 있지만


head는 처음 페이지가 열릴 때 읽혀지는 부분으로 페이지가 느려지는 등 원인으로 head 안에 쓰지 않는 걸 권장한다.




기본 뼈대는 이러하다.



<html>
    <head>
        <meta charset="UTF-8">
        <title>Java Script</title>
        <link rel="icon" href="img/favicon.ico">
        <style>
            /*css 주석*/
        </style>
        <!--스크립트를 여기에 넣어도 되지만 페이지가 느려지는 등 원인으로 바디 아래에 넣음-->
    </head>
    <body>
        <!--html 주석-->
    </body>
    <script>
        // js 싱글 주석
        /*js 멀티 주석*/
    </script>
</html>



저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 04.Java Script' 카테고리의 다른 글

[JS]04-06.배열 메소드(splice, slice, split, sort, reverse, delete, concat, valueOf, join)  (0) 2018.10.19
[JS]04-05.2차원 배열 생성, 값 조회, 추가  (0) 2018.10.19
[JS]04-04.버튼에 기능 구현하기, 배열 값 넣기, 빼기 push, pop, unshift, shift  (0) 2018.10.18
[JS]04-03.함수 생성 및 사용, 배열 생성 및 사용  (0) 2018.10.18
[JS]04-02.선언, 객체 생성, 선언, 값 입력, 콘솔 출력  (0) 2018.10.18

html_css.zip



압축을 해제해서 html 파일을 txt로 열어도 되고, 


https://qdgbjsdnb.tistory.com/120에서 설치한 Visual Studio Code를 이용해서 열어도 된다.

저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 01.설치 및 설정, 사용법' 카테고리의 다른 글

[HTML/CSS]01-07.Emmet 코드, Tab(단축키)를 눌러 기본 틀 자동 완성  (1) 2018.10.24
[HTML/CSS]01-06.미리 만들어진 페이지 갖다 쓰기, BootStrap  (0) 2018.10.24
[HTML]01-04.브라우져 개발자 모드로 HTML 코드 보는 법  (0) 2018.10.15
[HTML]01-03.HTML 공부에 도움이 되는 사이트  (0) 2018.10.11
[HTML]01-02.Visual Studio Code 한글화 및 사용법  (0) 2018.10.11

보기


1 메인페이지






메인페이지 - iframe을 이용해 다른 html 파일 합치기, 공지 화면 만들기(숨기기 해놓았으니 아래 완성파일을 참조)



2. 메뉴 HTML을 눌렀을 때





마우스 hover를 이용해서 글을 보였다가 숨겼다가 기능을 만들어보자. 링크 등 기능도 간단하게



3. 메뉴바의 CSS를 눌렀을 때





나열 기능을 이용해서 상자를 적절히 배치



4. java-script 버튼을 눌렀을 때


화면의 div 상자들의 위치를 position을 통해 적절히 배치해보자



5. J-Query를 눌렀을 때






스프라이트 이미지를 마우스를 올렸을때 움직이는것처럼 이미지를 바꿔보자



결과 파일


ex.zip



저작자표시 비영리 변경금지

'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글

[CSS]03-11.sprite image, 이미지를 애니메이션 처럼 표현  (0) 2018.10.18
[CSS]03-10.z-index, opacity (화면 순서, 투명도 조절)  (0) 2018.10.18
[CSS]03-09.position(static, relative, absolute, fixed) 요소의 위치 속성  (0) 2018.10.17
[CSS]03-08.clear(float 정렬 줄 넘김)  (0) 2018.10.17
[CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인  (0) 2018.10.17

+ Recent posts

티스토리툴바