목록javascript (9)
오늘보다 더 나은 내일의 나에게_
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..
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("시작할 숫자를 입력해주세요")..
자바스크립트 객체 기반의 스크립트 프로그래밍 언어 기존에 이미 존재하는 응용 소프트웨어를 제어하기 위해 나온 언어 인터프리터 방식에서 사용하기 위해 나온 것으로 응용 프로그램을 어떻게 실행할지 정합 자바스크립트 특징 - 모든 웹브라우저에서 동일하게 동작한다 - 웹브라우저에서 실행 결과를 즉시 확인 - 다양한 용도의 프로그램 개발 - 다양한 자바스크립트 공개 API - 다양한 라이브러리와 프레임워크 API VS 라이브러리 VS 프레임워크 API (Application Programming Interface) 라이브러리 (Library) 프레임워크 (Framework) 응용프로그램을 만드는데 필요한 연결장치, 매개체 응용 프로그램 개발을 위해 필요한 기능을 모아 놓은 소프트웨어 그 기능에 대한 도구 또는 함..