오전시간 _ 조별발표
게시판-글쓰기창에서 글을 써보면 엔터가 적용이 안됨!
br 이 아닌 \n이 적용되어 있기 때문에 얘는 자바에서는 실행이 안됨!
\n -> br 로 넘겨주는 작업이 필요!
[ write.java ]
doPost () 메소드의 if문 내부에
dto.setBcontent(request.getParameter("content"));
> 요부분을 수정해서 엔터키 적용되도록 해보자.
String content = request.getParameter("content");
content.replace("\n", "<br>");
dto.setBcontent(content);replace를 이용해서 \n --> br로 바꿔줌!
그런데 replace는 한번만 바꿔줌. 계속 바꿔줄 수 있게 해야함.
.replace ( CharSequence target, CharSequence replacement )
.replaceAll ( String regex, String replacement )
.replaceFirst ()
글쓰고 저장해보면 이제 엔터키 적용됨!!!
*참고*
\n 윈도우에서는 얘지만 \n\r 원래 이게 한세트
https://m.blog.naver.com/ilinkyou/30189771399
\\n,\\r,\\t,차이,\\n\\r차이 \r \n \t 차이
\r은 캐럿이 그 줄 맨 앞으로 갑니다. (Carriage return) \n은 캐럿이 다음 줄로 갑니다. (Line f...
blog.naver.com
( 위즈윅 에디터 )
WYSIWYG is an acronym for "what you see is what you get."
=> 작업한 그대로 결과를 만들어준다
Summernote - Super Simple WYSIWYG editor
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
summernote.org
( 게시판 기능을 가져오자 ) _ 볼드체, 기울임체, 색변경 등등의 폰트기능들
( 소스코드 확인가능 )
위 홈페이지에서 Getting started 에서
아래 나와있는 소스코드 차례대로 가져올거
[ write.jsp ]
( 추가1 )
( 추가2 ) _ ID
( 추가3 ) _ script
요건 제이쿼리(Jquery = JQ) 문법
( 게시판 기능 추가 )
( 버튼 크기를 조정 )
1. write.css에서 button에 width/height 설정해준거 그냥 날려버리기
2. server에서 오른쪽 버튼 - clean
런온서버 & 브라우저에서 ctrl + F5 (캐시메모리 새로고침)
짜잔
내용창 길이 좀 더 크게 설정하고 싶으면 높이 400으로 지정
짜잔
요기 데이터 타입에 따라 올릴수 있는 사진들이 다름?
지금까지는 jQuery 형식 => JS를 좀 더 편하게 사용하기 위한 거
이제 찐 자바 스크립트를 써보자
( 버튼에 onclick 기능_함수 추가 )
버튼을 누르면 check() 라는 함수가 실행!
<head> 안에 check() 함수 만들러가자
(자바에서는 메소드인데 자바스크립트에서는 함수)
글쓰기 - 저장하기 버튼 누르면 check() 함수 작동(팝업창)
자바스크립트 = ECMAscript -> JQuery -> TypeScript -> 바닐라 스크립트
JQ 는 만들어져있는 것들을 불러와 연결해 쓰는거고
TypeScript 는 JS에 데이터타입을 입혀서 좀 더 안정적으로 쓰기위함
바닐라 스크립트는 아무것도 포함되지 않은 순수한 스크립트 상태, 다른 프로그램의 도움을 받지 않고 순수하게 스크립트만 사용하는거
지금 하는것도 바닐라 스크립트의 일종인데 JQ의 도움을 받기는 했음
https://lipcoder.tistory.com/499
바닐라 자바스크립트(Vanilla JS)란?
바닐라 자바스크립트? 바닐라 자바스크립트(Vanilla JS)란 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 뜻한다. 왜 하필 바닐라(Vanilla)? 위키백과에 따르면 바닐라의 뜻은
lipcoder.tistory.com
( 함수 내부에 변수선언 )
.getElementsByName() 으로 title값 가져오기
name으로 가져오는건 지정된 번지수로 값을 가져와야함
같은 name이 여러개인 경우에는 먼저 쓴 순서대로 번지가 지정되니까 헷갈릴수있음
name말고 id를 쓰자.
( input 태그에 id 추가 )
.getElementById () 로 title값 가져오기
id는 이 페이지에 하나뿐이라 번지수 필요없음
(제목쓰고 저장하기 누르면 title값 팝업으로 가져옴)
(title 길이 가져오기)
( title 길이에 따라 if문으로 )
( 내용에서 커서표시된채로 저장하기 누르면 제목으로 이동 )
( return ) _ title에 적용
* check() 앞에 return 붙여줌 *
다섯글자 이상 => false => return false에 걸리지 않고 버튼 onclick이 실행됨.. 글이 써짐
다섯글자 이하 => true => alert 작동 및 커서이동 및 return false실행
버튼 onclick 기능 실행x
( return ) _ textarea에 적용
if ( textarea.value.length < 15 ) => 내용칸에 아무것도 입력 안했다면
alert 작동 및 커서이동(실행안됨) 및 return false실행
버튼 onclick 기능 실행x
빈공간에 <p><br></p> 요만큼이 이미 들어있기 때문에 15로 설정해준거!
제목 다섯글자 이상이지만 본문내용이 짧으면 아래처럼 팝업뜸
* textarea.focus(); 작동 안하는 이유 => 이거는 summernote 때문
(제목 다섯글자 이상 입력 & 팝업창 확인 누르면 본문으로 커서가 이동해야 하는데 이동을 안함)
<script type="text/javascript">
// 자바스크립트 = ECMAscript => JQuery -> TypeScript -> 바닐라 스크립트
function check(){
let title = document.getElementById("title");
let textarea = document.getElementById("summernote");
// alert(title.value.length);
if(title.value.length<5){
alert("제목은 다섯글자 이상이어야 합니다.");
title.focus();
return false;
}
if(textarea.value.length < 5){ // <p><br></p>
alert("본문 내용을 입력하세요.");
textarea.focus();
return false;
}
}
</script>제목은 다섯글자 이상 & 본문은 제한 없도록 설정!
if ( textarea.value.length < 5 ) => 본문에는 사실 <p><br></p> 이 숨어있어서 이미 5글자 이상을 만족!
( 제목 강조표시 ) _ 다섯글자 이하로 입력하면(팝업도뜨고) 제목칸에 빨갛게 강조표시됨
지금까지 스크립트로 스타일 꾸며준거~ (바닐라 스크립트 ~ 이지만 JQ의 도움 조금)
body부분에 h1이랑 span 추가
( span 에 id 넣어주고 스타일 지정 )
span에 innerText를 이용해 텍스트를 입력해줌
( span에 border 스타일 지정 )
innerHTML _ span 태그 내부에 다른 태그들을 집어넣을때
span 내부에 'what' 이 들어있는 input 태그 생성됨!!!
* 위치 주의 * innerText가 아래로 가면 input창을 덮어버려서 보이지 않음
div (id =writeDiv) 를 꾸며보쟈
form을 담은 상자
.getElementsByClassName() => 얘도 번지수 필요
css에는 항상 적용되는 스타일을 만들때
스크립트에서는 이벤트가 발생할때만 (함수가 동작할때만) 적용되는 스타일을 만들 때
( 활용_ borderBottom 사용 )
'국비과정 > JAVA' 카테고리의 다른 글
| 20230710 _[26일차]_01. 팀뽑기 & 게시판_수정/삭제기능 (2) | 2023.07.10 |
|---|---|
| 20230706 _[24일차]_02. JS연습(콘솔창입력) (0) | 2023.07.06 |
| 20230706 _[24일차]_01. 게시판 글쓰기 기능만들기 (0) | 2023.07.06 |
| 20230705 _[23일차]_01. 게시판 만들기 이어서 (2) | 2023.07.05 |
| 20230704 _[22일차]_03. 상단메뉴바 + 게시판만들기 (1) | 2023.07.05 |
