아이디 : <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) { testfn(100,200) |
function mytest(a, ... 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); |
· let
- let 문을 사용하여 변수를 선언합니다. 범위는 변수가 선언되는 블록으로 제한됩니다. 변수를 선언할 때 또는 나중에 스크립트로 변수에 값을 할당할 수 있습니다.
let을 사용하여 선언한 변수는 선언 전에 사용할 수 없으며, 그렇지 않으면 오류가 발생합니다.
let 문에서 변수를 초기화하지 않을 경우 JavaScript 값 undefined가 자동으로 할당됩니다.
함수 내부에서는 var 제어문 내부에서는 지역변수
· const
- 초기값을 변경할 수 없게 된다.
- 읽기전용
· splice 함수
/*index, 삭제할 개수, 추가할 값*/ 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> <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 |
BOM.docx