this의 사용 this는 객체를 다시 호출할때 내가 호출하는 것이 이전에 정의되었던 '그' 객체를 호출하는 것이 맞다고 인식시켜주기 위한 것이다. 'this'의 값은 함수가 어떻게 호출되느냐에 따라 동적으로 결정된다. 함수가 객체의 메서드로 호출될 때: 'this'는 해당 메서드를 호출한 객체를 참조한다. 함수가 일반 함수로 호출될 때: 'this'는 전역 객체인 'window'를 참조한다. (브라우저 환경에서) 함수가 생성자 함수로 호출될 때: 'this'는 생성된 객체를 참조한다. 화살표 함수 내에서: 'this'는 주변 스코프의 'this' 값을 유지한다. 'this'를 사용하여 메서드 내에서 객체의 속성이나 메서드에 접근할 수 있다. this 아래의 예시에서 sayName function은 선언..
JSON 자바 스크립트에서 객체를 배열하는 방법이다. JSONArray : [ ] 배열 배열은 대괄호를 사용한다. let arr = [ 'aaa', 'bbb', 'ccc' ]; JSONObject : { } 객체 객체는 중괄호를 사용한다. 이때 number와 boolean 은 ""로 묶지 않는다. let obj = { "name" : "aaa", "num" : 1, "tel" : "111", "flag" : true }; 문자열 타입을 객체로 변환 (파싱) 전체가 따옴표로 묶이면 문자열이다. 이러한 문자열 타입을 객체로 변환하는 것을 파싱이라한다. 파싱을 하지 않으면 문자열 하나씩 인식한다. let txt = '{"name":"aaaa","num":1}' //문자열 JSON.parse(txt); 아래 o..
방명록 만들기, 작성 기능을 구현해보자. 작성자, 글 비밀번호, 내용을 작성하고 작성 버튼을 누르면 새로운 영역에 글이 작성되는 기능이다. 방명록 작성자 글 비밀번호 내용 작성 바디에서 작성자, 비밀번호, 내용 의 값을 사용자에게 받아 "작성" 버튼을 이용해 함수 a() 를 불러낸다. (onclick = "a()") 에서 각 값의 이름으로 접근해 값을 받아 변수에 담는다. 값들을 파라메터에 담아 mkDiv 함수를 불러낸다 mkDiv 는 div 태그에 감싸서 내용을 프린트 하기 위해 만들었다. 새로운 div 태그를 만들어 영역을 추가한다. 새 div 태그에 id를 지정하고 비밀번호를 추가한다. 아이디가 겹치지 않도록 cnt 를 추가한다. 생성된 div 에 출력할 내용을 담은 변수 html 을 초기화해준다...
요소 추가/삭제 1) 요소 생성 document.createElement("태그"); // document.createElement("p"); 2) 요소 추가 document.appendChild(요소); 요소 생성/추가 3) 요소 삭제 document.removeChild(요소); 버튼 추가 삭제 4) 요소에 이벤트 핸들러 추가 요소.onclick = 함수
innerHTML 여는 태그와 닫는 태그 사이의 값이다. aaa 의 경우, 태그 사이의 aaa 의 값을 말한다. ⬇️ 예시는 아래 링크의 글들에서 확인할 수 있다. https://skylarcoding.tistory.com/search/innerHTML 코딩 학습 중 ... skylarcoding.tistory.com 요소 속성값 요소.attribute = 새값; 요소.setAttribute("속성명", "값"); 요소.getAttribute("속성명"); //속성값 반환
HTML DOM Documnet Object Model (문서 객체 모델) HTML DOM 모델은 HTML등의 문서를 위한 객체의 인터페이스라고 보면 된다. DOM은 아래와 같은 구조로 표현된다. DOM은 HTML의 요소를 받고, 변경하고, 추가하고, 삭제하는 방법 등을 제공한다. 1. 요소 추출 메서드 id를 받아오는 메서드는 아이디 한개만 받아오니 문법 사용에 주의해야한다. document.getElementById("아이디"); //요소 한개 (id) 반환 //아이디는 중복되지 않으니 element, s를 붙이지 않는다. document.getElementsByTagName("태그명"); // 등의 태그. 동일한 태그명을 찾아서 배열에 담아 반환 document.getElementsByClassNa..
회원가입 폼 조건과 내가 만든 코드는 아래 링크에서 볼 수 있다. https://skylarcoding.tistory.com/56 코드 강사님이 해주신 코드. 내가 한 것과는 반대로 주어진 조건이 일치하지 않을 경우를 if 의 조건으로 넣어 return 해주었다. 훨씬 간단한 코드가 나온다. Servlet 파일을 생성해 값을 받아 HTML 문서까지 만들어보았다. 회원가입 폼 id : 6글자 이상 작성 pwd : 5글자 이상 작성 pwd 확인: email : Servlet 이용해 클라이언트에게 보내줄 HTML 문서 생성하기 package test; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletExcep..
폼 양식 자바 스크립트 (JS) 로 불러내기 폼 양식을 자바 스크립트로 불러오는 문법이다. text, password, number 폼 받기 변수 html 에 위 문법을 사용해 값을 받고 html 변수를 출력하는 코드이다. 폼 양식 종류 id : pwd : phone :
변수 계속 변하는 값 var 변수명; let 변수명; //지역변수 (블록 내/외) 가능 //전역변수. 어느 함수나 사용 가능 var a = 1; let b = 2; function f1() { //함수 호출 안하면 실행 안된다 alert("f1()a:" + a); //1 alert("f1()b:" + b); //2 var x = 3; //지역변수. f1() 함수에서만 사용이 가능하고 f2()에서 쓰지 못한다. let y = 4; alert("f1()t:" + t); //변수를 정의하지 않으면 에러 발생 alert("f1()x:" + x); //3 alert("f1()y:" + y); //4 } function f2() { alert("f2()a:" + a); //1 alert("f2()b:" + b); ..
