230306_java script

 

 

 

코드	내용
<script type='text/javascript'> function [함수명]() {  [함수]  } </script>	-함수는 javascript로
document.getElementById([아이디 값]).innerHTML=[값]	-document 객체: 웹 페이지 자체, 페이지 내용에 접근하려면 항상 document 써야 함 -getElementById() 함수: id가 여기인 곳의 값을 가져오겠다. -innerHTML 속성: HTML로 값을 넣는다.
<button onclick='[함수]'>[버튼 이름]</button>	-button 클릭 시 기능
var x=1; var sum=0; function plusOne() { sum=x+1; document.getElementById("[아이디명]").innerHTML=[계산]; }	-함수 안의 변수는 지역변수니까 값을 출력하려면 전역변수를 써줘야 함
function goClick() {             var member = {mem_id:"a001",                           mem_pw:"asdf1234",                           mem_age : 25,                           mem_addr : "광주 광산구"};             tag_text = "<table border='1'>";             tag_text += "<tr><th>id</th>";             tag_text += "<th>pw</th></tr>";             tag_text += "<tr><td>"+member.mem_id + "</td>";             tag_text += "<td>"+member.mem_id + "</td></tr>";             tag_text += "</table>";             document.getElementById("p1").innerHTML=tag_text;         }	-표 만드는 tough한 방법 원래 <table border='1'>   <tr><th>id</th>        <th>pw</th></tr>  <tr><td>a001</td>        <td>25</td>        <td>광주 광산구</td></tr> </table>
function goLength() {             var v = "abcd efg hijk";             var size = v.length;             document.getElementById("p1").innerHTML=size;         }	-length 속성
function goIndexOf(){             var p1_str =                  document.getElementById("p1").innerHTML;             // alert(p1_str);             var idx = p1_str.indexOf("locate");             document.getElementById("p2").innerHTML=idx;         }	-str 객체 -indexOf() 함수: 문자열의 첫 시작위치를 찾아준다. > p1에서 가져와서 p2에 출력
function golastIndexOf() {             var p1_str =                  document.getElementById("p1").innerHTML;             var idx = p1_str.lastIndexOf("locate");             document.getElementById("p2").innerHTML=idx;         }	-lastIndexOf() 함수: 마지막 위치 찾아준다.
function goSlice() {             var str="Apple, Banana, Kiwi";             var cut_str=str.slice(7,13);             var p1=document.getElementById("p1");             p1.innerHTML=cut_str;         }	-slice(start, end) 함수: 처음부터 끝 하나 전까지 잘라준다.
function goSubstring() {             var str="Apple, Banana, Kiwi";             // substring(start,end)             var cut_str=str.substring(14,18);             var p1=document.getElementById("p1");             p1.innerHTML=cut_str;             // return:          }	-substring(start, end) 함수: 처음부터 끝 하나 전까지 잘라준다.
function goSubstr() {             var str="Apple, Banana, Kiwi";             // substr(start, length)             var cut_str=str.substr(0,5);             var p1=document.getElementById("p1");             p1.innerHTML=cut_str;             //return: Apple         }	-substr(start, length) 함수: 처음부터 길이에 해당하는 문자열까지 잘라준다.
function goReplace() {             var p1=document.getElementById("p1");             var p1_str=p1.innerHTML;             var p1_change=p1_str.replace("자바 스크립트", "파이썬");             p1.innerHTML = p1_change;         }	-replace(for change, to change) 함수: 치환
function goSplit() {             var str="a b c d e f";             var str_array = str.split(' ');             var p1 = document.getElementById("p1");             p1.innerHTML = str_array[1];         }	-split([구분자]) 함수: 구분자 기준으로 구분
function goReload() {             location.reload();         }	-location 객체: 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용 -reload(): 화면 새로고침
function goLogin() {             var fm=document.getElementById("fm");             // 회원 아이디 입력 여부 확인             // if(fm.mem_id.value == ""){             //     alert("아이디를 입력해주세요");             //     //focus():해당 입력 박스로 커서를 이동시킴, for 사용자 편의             //     fm.mem_id.focus();             //     return;             // }             // if(fm.mem_pw.value == ""){             //     alert("비밀번호를 입력해주세요");             //     fm.mem_pw.focus();             //     return;             // }             alert(fm.mem_id.value);             alert(fm.mem_pw.value);             fm.action="./11_javascript.html";             fm.submit();         }	-value 속성 : 값 반환 -action 속성 : 요청 페이지 정의 -submit() 함수: 요청 페이지 반환 document.getElementById([아이디]).action document.getElementById([아이디]).submit()
<form name="fm" id="fm" action="./11_javascript.html">         아이디 :         <input type="text" name="mem_id" id="mem_id"                 placeholder="아이디를 입력해주세요!"                 required>         <br/>         비밀번호 :         <input type="text" name="mem_pw" id="mem_pw"                 placeholder="비밀번호를 입력해주세요!"                 required>                 <hr/>                 <button onclick="goLogin()">로그인</button>                                 <!-- required를 사용하는 경우 -->                 <input type="submit" value="로그인(required)">     </form>	-[form] 태그의 역할  - form 태그 영역 안에 있는 name이 있는 입력값(input)들을 서버로 전송하는 기능 수행  - form 태그 속성: 요청방식, 요청 페이지 등 지정가능  - 요청방식 : method => post와 get방식  - 요청 페이지 정의 : action 속성에 정의 -input 태그: 꼭 form 태그 안에 넣어줘야 -placeholder 태그속성: 입력칸 안내문 -required 태그속성: if 문 안 쓸 때 쓴다. 아이디 입력 안 할 시 요청문 뜬다.

 

 

제일 중요한 건 back-end와 관련 있는 

 

12_javascript_form_입력데이터 확인.html

0.00MB

 

 

이것!