본문 바로가기

Frontend/JavaScript22

22. JavaScript, 총정리 (회원가입) ○ JavaScript - JavaScript (또는 jQuery)를 사용하는 이유 ① Frontend(UI, View)단에서 서로 다른 문법(이종)간의 데이터를 교류하기 위해 ② 데이터의 유효성을 검증하기 위해 ○ JavaScript를 이용한 회원가입 폼 1) 회원가입 폼 회원가입 아이디 : 비밀번호 : 주민번호 : - 약관동의 : 2) JavaScript ① 에 접근해 보기 // 1) 의 컨트롤요소 접근시 name 사용(비추) alert(document.memfrm.uid.value); // 2) 의 컨트롤요소 접근시 id 사용(추천) alert(document.getElementById("uid").value); //text에 입력한 내용이 value // 3) tag name으로 접근 (본문에서 .. 2022. 6. 21.
21. JavaScript, style접근 ○ 자바스트립트에서 스타일 접근 - 참고 : jQuery에서 스타일 접근 대한민국 1) 순수 자바스크립트 접근 : document.getElementById("요소의 id").style - document.getElementById("요소의 id").style.스타일속성 - 스타일에 접근해서 수정하기 2) jQuery에서 스타일 접근 : $("요소의 식별자").css() → 추천 2022. 6. 21.
20. JavaScript, this ○ this - 자기자신의 요소를 가리킴 (참조: jQuery this / 비교: JAVA this ) - 폼 컨트롤 요소에서만 사용 가능 - CSS, HTML, jsp 등 여러 언어를 혼용할 때 JavaScript가 중개자 역할을 함 이때, this는 접근경로를 단순화 해주기 위해 사용함 ○ this로 요소 접근하기 - this : 자신의 요소 - this.value : 자신의 요소가 가지고 있는 실제 값 - this.form : 자신의 요소가 속해 있는 폼 this - value="버튼1" - front단에서는 id, 서버에 전송되면 name으로 접근하는 것이 일반적 function test1(){ //1) name접근 var f=document.myform; alert(f); //[object HT.. 2022. 6. 20.
19. JSON (JSON 기본구조, XML, JSON 관련함수) ○ JSON - JavaScript Object Notation - 비동기식 통신(문자단위 통신)에서 XML을 대체하는 포맷이다 - AJAX, NoSQL DB 등에서 주로 사용되는 포맷(표기법) - 배열을 객체화 ○ JSON 기본구조 - 속성:값 쌍으로 데이터가 구성되어 있다 - 속성(name, property, key), 값(value) - name구성시 " '기호는 생략가능하다 - {}안에 데이터를 저장한다 - 형식) {name:value, "name":value, 'name':value, ~~~} {driver:"OracleDriver", "username":"system", 'password':1234} ○ XML 문법 - 여는 태그와 닫는 태그로 구성 (반드시 둘 다 있음) - custom ta.. 2022. 6. 19.
18. JavaScript 연습문제 (이미지스크롤) ● PRACTICE 연습문제 Q1) 풍선 이미지 스크롤 (자바스크립트 총정리) - 4개의 풍선이미지가 왼쪽으로 이동하도록 이미지스크롤 2022. 5. 11.
17. JavaScript 이벤트(Event) ○ 이벤트 (Event) - 이벤트 : 웹사이트 방문자가 하는 행위 - 자바스크립트는 주로 이벤트를 발생시킨 후 함수를 호출함으로써 실행한다 - 기본 이벤트의 종류 ① onchange : 다른 객체로 바뀌었을 때 ② onclick : 클릭했을 때 ③ onmouseover : 마우스가 올려졌을 때 ④ onmouseout : 마우스가 올라갔다 나갔을 때 ⑤ onkeydown : 키보드를 눌렀을 때 ⑥ onload : 페이지 로딩이 끝났을 때 ⑦ onsubmit : 서버로 해당 폼이 전송될 때 ○ 마우스 관련 이벤트 - onclick, onmouseover, onmouseout ○ onkeydown ○ onchange 서울 제주 부산 ○ onload ○ 커서 관련 이벤트 - onfucus : 텍스트 입력 상자.. 2022. 5. 10.