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. 게시글 중 내용을 입력한 게시글 조회
  • 作者が「minju」である投稿のみを表示
  • 投稿に入力された投稿の表示
  • 関係演算子


    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以下の投稿
  • 投稿ではなく、0、2、7のブラウズ
  • アレイ演算子

  • %:長さ制限X
  • :長さ制限O(単語)
  • 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


    関数の再使用

  • util.jsで定義された関数(slideIn)をリストします.jsで使用するには、htmlコードにjsリンクを挿入する必要があります.以下に示します.
  • HTML
    <script src="../js/util.js"></script> 
    <script src="list.js"></script>
    util.js
    function 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.js
    window.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); 
        }
    });