300x250
반응형

Front-End 16

[JavaScript]자바스크립트로 텍스트 하이라이트 처리 (검색)

var mystring = "hello world test world"; var find = "world"; var regex = new RegExp(find, "g"); mystring.replace(regex, "" + find + ""); // highlight class 위와 같은 코드에 highlight 클래스를 꾸미는 css 만 작성하면 된다. ex) .highlight { font-weight : bold; color:#FF0000; } 출처 : https://stackoverflow.com/questions/542232/in-javascript-how-can-i-perform-a-global-replace-on-string-with-a-variable-insi/21148153 In Java..

[Ajax] 검색시 제시어 기능 만들기

일반적인 검색엔진을 사용할 때, 사용자가 검색한 단어를 DB에 누적시켜 저장시킨 뒤 검색빈도가 높은 목록을 정리해서 출력해준다. 이 제시어 기능을 구현해보자. ① 검색어를 입력할 페이지 - suggestClient.jsp 제시어 ② 제시어를 응답할 페이지 - suggestClient_ok.jsp ③ 검색어 작성 화면 검색키가 입력되고 새로고침이 되지 않더라도 자동으로 키워드들이 조회되고 선택할경우 하이퍼링크로 연결되도록 완성하였다. 출처 : https://wiper2019.tistory.com/132 Ajax - 검색시 제시어 기능 만들기 일반적인 검색엔진을 사용할 때, 사용자가 검색한 단어를 DB에 누적시켜 저장시킨 뒤 검색빈도가 높은 목록을 정리해서 출력해준다. 이 제시어 기능을 구현해보자. ① 검색..

Front-End/Ajax 2023.02.09

[JavaScript] 검색 기능 만들기

결과물 사용 에디터 Atom Editor 요구사항 1. 키를 입력할 때마다 검색 결과가 동적으로 변하기 HTML Search A Apple O Orange M Mandarin S Strawberry W Watermelon G Grape P Pear C Cherry CSS body{ margin: 0; padding: 0; font-family: "Montserrat"; } .searchbox{ width: 90%; margin: 10px auto; } .header{ background: #ECDFBF; overflow: hidden; padding: 20px; text-align: center; } .header h1{ text-transform: uppercase; color: white; margi..

[PHP] JavaScript에서 만든 json 객체를 PHP에 POST로 보내서 사용하기

내가 삽질을 했다면 누군가 한 명 정도는 나랑 같은 곳에서 열심히 삽질을 하고 있을 거라는 생각에 웹 작업을 하다가 이렇게 포스팅을 합니다. 제가 고생한 부분은 웹에서 액션이 취해졌을 때 javascript 함수를 통해서 php페이지로 ajax 방식으로 데이터를 전송하는 부분 !! 일단 이런 javascript 함수 가 있습니다. 로그인을 할 때 중복된 이메일 또는 닉네임이 있는지 ajax로 확인하는 함수죠 먼저 json 형태의 데이터를 만듬니다. var jObj = new Object(); jObj.email = "email@gmail.com"; jObj.nickname = "ChickenMayo"; var jsonInfo = JSON.stringify(jObj); jsonInfo 라는 데이터를 reg..

Front-End/PHP 2023.02.06

[PHP] 자바 스크립트에서 php를 호출하는 법

자바스크립트는 어디까지나 클라이언트에서 실행되기 때문에 php함수를 직접 호출할수는 없습니다만, 자바스크립트 상에서 폼 전송을 하는건 가능합니다. jQuery 라이브러리를 사용하면 쉽습니다. 예제: // jQuery 라이브러리를 사용. $("#comment-submit").click(function() { // comment-submit 버튼이 눌러지면 활성화 var _comment = $("#comment-area").val(); // comment-area의 내용을 긁어온다 var _mid = $("#mid").val(); // 게시글 id를 긁어온다. if(_comment.length == 0) { alert("덧글 내용이 없습니다."); } else { // commentajax.php로 덧글 내..

Front-End/PHP 2023.02.06
300x250
반응형