Java Web開発プロセス🌞
⭐Back-end
Oracle
文字列プラス記号演算子
SELECT NAME || '(' || ID || ')' FROM MEMEBER; -- 모든 회원의 이름에 ID를 붙여서 나타내기
比較演算子
SELECT * FROM NOTICE WHERE WRITER_ID = 'minju'; --1. 게시글 중 작성자가 'minju'인 게시글만 조회
SELECT * FROM NOTICE WHERE HIT > 3; --게시글 중 조회수가 3을 넘는 글만 조회
SELECT * FROM NOTICE WHERE CONTENT IS NOT NULL; --2. 게시글 중 내용을 입력한 게시글 조회
SELECT NAME || '(' || ID || ')' FROM MEMEBER; -- 모든 회원의 이름에 ID를 붙여서 나타내기
SELECT * FROM NOTICE WHERE WRITER_ID = 'minju'; --1. 게시글 중 작성자가 'minju'인 게시글만 조회
SELECT * FROM NOTICE WHERE HIT > 3; --게시글 중 조회수가 3을 넘는 글만 조회
SELECT * FROM NOTICE WHERE CONTENT IS NOT NULL; --2. 게시글 중 내용을 입력한 게시글 조회
関係演算子
SELECT * FROM NOTICE WHERE HIT BETWEEN 0 AND 2; --1. 조회수가 0이상 2이하인 게시글 조회
SELECT * FROM NOTICE WHERE HIT IN (0, 2, 7); --조회수가 0, 2, 7인 게시글 조회
SELECT * FROM NOTICE WHERE HIT NOT IN (0, 2, 7); --2. 조회수가 0, 2, 7이 아닌 게시글 조회
1.閲覧回数が0以上2以下の投稿アレイ演算子
SELECT * FROM MEMBER WHERE NAME LIKE '이%'; --1. 이름이 '이'로 시작하는 멤버 조회
SELECT * FROM MEMBER WHERE NAME LIKE '이_'; --이름이 '이'로 시작하고 '이' 다음에 한 글자만 존재하는 멤버 조회
SELECT * FROM MEMBER WHERE NAME LIKE '이__'; --2. 이름이 '이'로 시작하고 '이' 다음에 두 글자가 존재하는 멤버 조회
SELECT * FROM NOTICE WHERE TITLE LIKE '%I%'; --3. 제목 사이에 'I'가 들어가는 게시글 조회
1.「李」で始まるメンバーの検索2.名前は「李」で始まり、「李」の後に2文字のメンバーを検索
3.見出しの間に「I」のある投稿を参照
⭐Front-end
CSS, JavaScript
関数の再使用
<script src="../js/util.js"></script>
<script src="list.js"></script>
util.jsfunction slideIn(selector) { // slideIn 함수 정의
var screen = document.createElement("div");
var aside = document.querySelector(selector);
screen.style.position = "fixed"; /*absolute가 아닌 fixed로 변경*/
screen.style.left = "0px";
screen.style.top = "0px";
screen.style.width = "100%";
screen.style.height = "100%";
screen.style.backgroundColor = "black";
screen.style.opacity = 0;
screen.style.transition = ".5s"; /*0.5초 동안 바뀜*/
setTimeout(function() { /*setTimeout을 하지 않았을 때는 opacity = 0 다음에 opacity = 0.7이 덮어씌워져서 적용됨*/
/*opacity = 0과 opacity = 0.7이 동시에 적용되지 않게 하기*/
screen.style.opacity = 0.7;
}, 0);
document.body.append(screen);
screen.ontransitionend = function() { // screen의 transition이 끝난 후 아래 이벤트 시작하게 하기
aside.style.position = "fixed";
aside.style.left = "100%";
aside.style.top = "0px";
aside.style.width = "70%";
aside.style.height = "100%";
aside.style.zIndex = 10;
aside.style.backgroundColor = "white";
aside.style.transition = ".5s"; /*0.5초 동안 바뀜*/
setTimeout(function() {
aside.style.left = "30%"
}, 0);
}
screen.onclick = function() {
// 역방향으로 슬라이드 되도록 애니메이션 설정
screen.remove();
aside.style = "";
}
}
list.jswindow.addEventListener("load", function() {
var header = document.querySelector("#header");
var menuButton = header.querySelector(".icon-menu");
menuButton.onclick = function(e) {
e.preventDefault();
slideIn("#aside"); // util.js에서 정의한 함수 사용
};
});
JavaScript
NDDでデータ情報を取得する
window.addEventListener("load", function() {
var section = document.querySelector("#ex9");
var uploadBox = section.querySelector(".upload-box");
// ondragover
uploadBox.ondragover = function(e) {
e.preventDefault();
var valid = e.dataTransfer.types.indexOf("Files") >= 0// 배열에 해당 값이 없으면 -1 반환
if(!valid) // 유효하지 않은 데이터일 때
uploadBox.style.backgroundColor = "red";
else // 유효한 데이터일 때
uploadBox.style.backgroundColor = "green";
}
// ondragleave
uploadBox.ondragleave = function(e) { // 끌고 온 파일이 uploadBox를 벗어났을 때 배경색 초기화
uploadBox.style.backgroundColor = "initial";
}
// ondrop
uploadBox.ondrop = function(e) { // uploadBox에 파일을 놓았을 때 배경색 초기화
uploadBox.style.backgroundColor = "initial";
e.preventDefault();
console.log(e.dataTransfer.types[0]); // 출력 결과: 'Files'
console.log(e.dataTransfer.files[0].name); // 끌고 온 file의 이름
console.log(e.dataTransfer.files[0].size); // file이 가지고 있는 바이트 수
console.log(e.dataTransfer.files[0].lastModified); // file이 마지막으로 수정된 시점
for(var k in e.dataTransfer.files[0])
console.log(k); // file이 가지고 있는 속성들
}
});
ファイル選択ボタンを使用してデータ情報を取得する
window.addEventListener("load", function() {
var section = document.querySelector("#ex9");
var selButton = section.querySelector(".btn-sel");
var fileButton = section.querySelector(".btn-file");
// fileButton을 통해 선택한 파일의 데이터 정보를 알아낼 수 있음
fileButton.onchange = function(e) { // 파일 선택 버튼을 눌러 원하는 파일을 선택한 후 열기 버튼을 누르거나, 원하는 파일 더블 클릭 시 함수가 실행됨
console.log("change");
};
// 파일 정보를 얻어내는 시점: oninput이 더 빠름, 일반적으로 입력상자에서 값을 꺼낼 때는 oninput 사용
fileButton.oninput = function(e) { // 파일 선택 버튼을 눌러 원하는 파일을 선택한 후 열기 버튼을 누르거나, 원하는 파일 더블 클릭 시 함수가 실행됨
for(var k in fileButton.files[0]) // 선택한 file이 가지고 있는 속성들
console.log(k);
console.log(e.dataTransfer.files[0]); // 이벤트 객체를 통해서는 선택한 파일을 얻어낼 수 없음
};
selButton.onclick = function(e) {
var event = new MouseEvent("click", {
'view': window,
'bubbles': true,
'cancelable': true
});
fileButton.dispatchEvent(event);
}
});
Reference
この問題について(Java Web開発プロセス🌞), 我々は、より多くの情報をここで見つけました https://velog.io/@minjulee97/0428-자바-웹-개발-과정テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol