아이디 : <input type="text"><br>

패스워드 : <input type="password"><br>

정렬하기

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .myaccount{

            display: table-row;

            height: 30px;

        }

        label, input{

            display: table-cell;

        }/*table로 정렬 맞춰주기*/

        [for="myid"]{

            letter-spacing: 5px;

        }/*아이디 글자 간격 조정해서 패스워드에 맞추기*/

    </style>

</head>

<body>


    <div class="myaccount">

        <label for="myid">아이디:</label><input id="myid" type="text">


    </div>


    <div class="myaccount">

        <label for="mypass">패스워드:</label><input id="mypass" type="password">

    </div>

</body>

</html> 


insert버튼으로 table에 데이터 추가하기

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>


    <script>

        function fn() {

            tr = mytable.insertRow();//row 객체 만든다.

            td1 = tr.insertCell();

            td2 = tr.insertCell();


            td1.innerText="Cell1";

            td2.innerText="Cell2";

        }


    </script>


</head>

<body>

    <button onclick="fn()">Insert</button>


    <table id="mytable" border="1">

        <tr>

            <th>Data1</th>

            <th>Data2</th>

        </tr>


    </table>


</body>

</html>


· json(자바스크립트 객체 타입)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        myobj={aa:10, bb:3.14, cc:true, dd:"abc", fn:function () {

                alert("call");

            }//메소드 정의

        };//속성 정의

       myobj.aa=5;//속성 수정

       myobj.ee=100;//속성 추가

        console.log(myobj);

        console.log(myobj.aa, myobj.bb, myobj.cc, myobj.dd);

        console.log(myobj["aa"], myobj["bb"], myobj["cc"], myobj["dd"]);

        myobj.fn();//callable

    </script>

</head>

<body>

</body>

</html> 


· for in 문

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        myobj={aa:10, bb:20, cc:30};


        for(x in myobj){

            console.log(x);

        }


    </script>

</head>

<body>


</body>

</html> 



· 배열

- arr = [10,20,30, 10.3, 'aaa', true];

 <!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        arr=[10, 20, 30, 40, 50];


        for(x in arr){

            console.log(x)

        }//index 출력


        for(x of arr){

            console.log(x);

        }//값 출력

    </script>

</head>

<body>


</body>

</html>


[예제]

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        /*function hap(a, b) {

            return a+b;

        }

        rst=hap(10, 20);

        console.log(rst);//두 수의 합 구하기*/


        /*function circle(r) {

            return r*r*3.14;

        }

        rst=circle(10);

        console.log(rst);//원의 넓이 구하기*/



        /*function big(a, b, c) {

            if(a<b && c<b){

                return b;

            }else if(a<c && b<c) {

                return c;

            }else{

                return a;

            }

        }

        rst=big(110,40,30);

        console.log(rst);//숫자 3개 중에서 최대값 구하기-논리연산자*/


        /*function max(a, b, c) {

            mymax = a>b ? a:b;

            mymax = mymax>c ? mymax:c;

            return mymax;

        }

        rst=max(110,40,30);

        console.log(rst);//숫자 3개 중에서 최대값 구하기-삼항연산자*/

        

    </script>

</head>

<body>


</body>

</html> 


· arguments 객체

- array로 넘겨준다.

- 가변인자이다.(매개변수 개수 불일치해도 실행된다.)

function testfn(a,b) {
    console.log(arguments);
    console.log(arguments[0], arguments[1]);
}

testfn(100,200) 

 


function mytest(a, ... v) {
    console.log(a);
    console.log(v);
}

mytest(10,20,30,40);//10은 a에 들어가고 나머지는 v에 Array배열로 들어간다. 


· var a =10; 

- 지역변수->함수 안에서만 사용할 수 있다.


<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        a=100;

        function fn() {

            a=10;//전역변수

        }


        fn()

        console.log("a=", a)


    </script>

</head>

<body>


</body>

</html>


 for(n=1; n<=10; n++){//for(let n=1; n<=10; n++) let을 써주면 for문 안에서만 사용가능하다.

    console.log(n);
}
console.log("n=", n);//n=11로 출력된다.



· let

- let 문을 사용하여 변수를 선언합니다. 범위는 변수가 선언되는 블록으로 제한됩니다.  변수를 선언할 때 또는 나중에 스크립트로 변수에 값을 할당할 수 있습니다.  

let을 사용하여 선언한 변수는 선언 전에 사용할 수 없으며, 그렇지 않으면 오류가 발생합니다.

let 문에서 변수를 초기화하지 않을 경우 JavaScript 값 undefined가 자동으로 할당됩니다.

함수 내부에서는 var 제어문 내부에서는 지역변수


· const

- 초기값을 변경할 수 없게 된다.

- 읽기전용


· splice 함수

/*index, 삭제할 개수, 추가할 값*/
arr.splice(1, 2);//index:1에서 2개를 삭제

  arr.splice(1,1,100);//index:1에 1개를 삭제하고 그 위치에 100을 넣어라 

arr.splice(1, 0, 100)//추가


· 주소록 만들기

<!DOCTYPE html>

<html>

<head>

<meta charset="EUC-KR">

<title>Insert title here</title>

<style>

h1{

text-align: center;

}

div{

margin: auto;

}

input{

margin-bottom: 10px;

width: 150px;

}

#wrap{

text-align: center;

padding: 10px;

margin: auto;

border: 1px solid;

}

th{

border: solid;

}

table{

width: 300px;

margin: auto;

border-collapse: collapse;

}

</style>

<script>

myobj=new Array();

function insert() {

myobj.push({'myname':myname.value, 'myage':myage.value, 'mybirth':mybirth.value});

if(myname=="" || myage=="" || mybirth==""){

myobj.length=myobj.length-1;

}

myname.value="";

myage.value="";

mybirth.value="";

}

function fn() {

delRow();

for(n=0; n<myobj.length; n++){

tr=mytable.insertRow();

td1=tr.insertCell();

td2=tr.insertCell();

td3=tr.insertCell();

td1.innerText=myobj[n].myname;

td2.innerText=myobj[n].myage;

td3.innerText=myobj[n].mybirth;

}

function delRow() {

for(a=1; a<mytable.rows.length;){

mytable.deleteRow(a);

}

}

}

</script>

</head>

<body>

<h1>주소록</h1>

<div id="wrap">

이름:<input id="myname" type="text"><br>

나이:<input id="myage" type="number"><br>

생일:<input id="mybirth" type="date"><br><br>

<button onclick="insert()">입력</button> &nbsp;

<button onclick="fn()">보기</button><br><br>

<table id="mytable">

<tr>

<th>이름</th>

<th>나이</th>

<th>생일</th>

</tr>

</table>

</div>

</body>

</html> 


저작자표시

'SK고용디딤돌' 카테고리의 다른 글

직무교육 9일차(JavaScript)  (0) 2017.07.20
직무교육 8일차(JavaScript)  (0) 2017.07.19
직무교육 6일차(JavaScript)  (0) 2017.07.17
직무교육 5일차(CSS)  (0) 2017.07.14
직무교육 4일차(CSS)  (0) 2017.07.13

+ Recent posts

티스토리툴바