오늘보다 더 나은 내일의 나에게_

JavaScript 댓글 작성 후 "post reply" 버튼을 누르면 댓글이 등록되지만 실시간으로 보이지 않고 새로고침을 해야 보이는 상황! 버튼을 누르고 정상적으로 등록이 되면 console창에 success 출력! 댓글 등록 후 바로 댓글 보는 기능 board_main.jsp에서 javascript부분 수정 function addReply( ) 수정 JSP 로그인 후 개인정보수정버튼을 눌렀을 때 현재 로그인 중인 아이디 전화번호, 주소가 출력되도록 작성 코드 더보기 세션 객체를 생성하고 활용 회원정보수정 로그아웃 기능 로그인 후 로그아웃 버튼 누르면 로그아웃! => 세션을 삭제해주면 로그아웃이 된다! 코드 더보기 package com.member; import java.io.IOException; ..

로그인 성공 시 페이지 이동 로그인 성공 시 loginService 서블릿에서 세션을 생성한다. 로그인 정보가 담긴 vo객체를 세션에 넣어준다. loginService 코드 더보기 package com.controller; import java.io.BufferedReader; import java.io.IOException; import java.io.PrintWriter; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import javax.servlet.ServletException; import javax.servlet.annot..

로그인 실패 시 예제 아이디나 비밀번호 둘 중에 하나라도 비어있을 때 LOG IN 버튼 누르면 "아이디/비밀번호를 입력해주세요" 문구 출력 코드 더보기 더보기 둘 중에 document.getElementById("submit"); let check_p = document.getElementById("check"); btn_submit.addEventListener("click", function(){ //1. id칸이나 pw칸 둘중에 하나라도 비어있으면 //p(id=check) "아이디/비밀번호를 입력해주세요" 문구 출력 let id = document.getElementById("id").value; let pw = document.getElementById("password").value; if(id..

온도센서 TMP36 : 전압의 변화량을 이용하여 온도 측정(-40 ~ -120도) 코드 더보기 피에조 코드 더보기 Serial 통신 : USB를 통해 아두이노와 PC 또는 다른 시리얼 장치 간에 정보를 송수신하는 것 Serial 모니터 : 아두이노로 송수신된 데이터를 모니터링 Serial.begin( ) Serial.print( ) Serial.println( ) Serial.available( ) => 전송한 데이터가 있는지 확인 : 읽어올 수 있는 문자(바이트) 수 int타입 반환 Serial.read( ) => 전송된 데이터를 char형으로 읽어옴 : 입력된 Serial데이터를 읽은 후 더 이상 읽을 값이 없을 시 -1 반환 - 읽어올 수 있는 문자 수를 반환 -> int타입 리턴 - c언어는 0을..

jQuery HTML의 클라이언트 사이드 조작을 단순화하도록 설계된 자바스크립트 라이브러리 크로스 브라우징 => 모든 브라우저가 동일한 정보를 보여주는 통일성 $(선택자).동작함수() $('#style').css('color','blue'); $() : 선택된 HTML 요소를 제이쿼리에서 이용할 수 있는 형태로 생성 => 제이쿼리 객체 ex)$(HTML 태그 이름 or CSS 선택자) 제이쿼리 장점 1. 문서 객체 모델(DOM)에 쉽게 접근하여 조작할 수 있다. 2. 코드를 간결화하여 가독성과 개발 효율성이 증가한다. 3. 이벤트 연결을 쉽게 구현할 수 있다. 4. 다양한 브라우저에서 동작(크로스 브라우저)하며 모바일에서도 작동이 가능하다. 5. 시각적 효과를 쉽게 구현할 수 있다. 6. 이미 개발된 수..

getElementById()실습 코드 더보기 html 클릭 한번 해볼까요? h1태그 생성 a태그 생성 ul태그 생성 javascript let div1 = document.getElementById("div1"); function mkH1(){ div1.innerHTML += "DOM활용해보기!" } function mkA(){ div1.innerHTML += "Google로 가보자!" } function mkUl(){ div1.innerHTML += "HTMLCSSJavascript" } 코드 더보기 html 0 +1 증가 -1 감소​ javascript let span1 = document.getElementById("span1"); function plus(){ //innerText(innherH..

객체 정의 문서 객체 모델(Document Objcet Model) :이나 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)화 시킨 것 ex) ->WebBrowser시작 _ 사용자가 웹 페이지 방문 ->웹문서 읽기 ->DOM생성 _ HTML을 모두 객체 형태로 변환-> javascript로 접근 가능 ->페이지 로딩 완료 _ css적용 화면 최종 표시(렌더링) HTMLElement 모든 종류의 HTML요소를 나타내는 인터페이스 - getElement메서드를 통해서 원하는 객체를 조회 - 조회된 객체들을 대상으로 구체적인 작업 처리 함수 설명 getElemtnetById(id) =>HTMLElement객체 반환 특정 아이디를 가진 요소 조회 getElemtnetsByNa..

이번 주 5일 동안 html, css, javascript, servlet, jsp를 배웠고 자바스크립트와 jsp는 다음 주에도 계속 수업이 남아있다. 그래도 한 번씩은 공부를 했었던 언어들이어서 반가웠고 재밌었다. 특히 html, css, javascript는 작년 웹디자인 포트폴리오를 만들 때 공부하면서 만들었기 때문에 조금 수월하게 수업을 들을 수 있었다. 이번 주 수업을 마무리하며 추가적으로 공부하고 싶은 부분은 html/css에서 display flex와 grid, 그리고 자바스크립트에서 정규표현식입니다! display속성의 flex와 grid는 반응형 웹 구현을 위해 잠깐 공부를 하긴 했었지만 실습을 많이 안 했어서 거의 잊어버렸다.😅 flex와 grid부분을 전에 노마드코더에서 보다 말았던 ..

자바스크립트 함수 특정한 목적의 작업을 수행하도록 설계된 독립적인 블록 필요할 때마다 호출하여 해당 작업을 반복 수행할 수 있음 자바스크립트 함수 -> 1급객체(first class citizen) 자바스크립트 함수가 객체로 간주되는 이유? 객체를 값을 의미, 자바스크립트의 함수는 값과 동일하게 취급 값처럼 변수에 할당할 수 있으며 속성 값이 될 수 있으며 배열의 요소가 될 수도 있음 1급 객체의 조건? - 변수나 데이터 구조 안에 담을 수 있다 - 파라미터로 전달할 수 있다 - 리턴 값으로 사용할 수 있다 함수 VS 메서드 함수 메소드 특정 작업을 수행하는 코드 조각 객체의 속성 값으로 담겨진 함수를 부르는 명칭 클래스 및 객체와 연관되어 있는 함수 자바스크립트의 함수 사용 목적 - 코드의 재사용 >>..

예제 빨강, 초록, 파랑 중에 원하는 색을 입력했을 때, 웹 브라우저 배경색이 바뀌도록 작성 더보기 let color = prompt("색깔을 적어주세요(빨강,초록,파랑)"); if(color == "빨강"){ document.body.style.backgroundColor = "red"; }else if(color == "초록"){ document.body.style.backgroundColor = "green"; }else if(color == "파랑"){ document.body.style.backgroundColor = "blue"; } 반복문 예제 두 개의 숫자를 입력받아 그 범위에 해당하는 숫자의 합을 구하세요 더보기 let num1 = Number(prompt("시작할 숫자를 입력해주세요")..