본문 바로가기

🖥️ 프론트엔드/JavaScript7

이전 1 다음

[Axios] Axios를 사용한 자바스크립트 코드 Axios란? Axios는 JavaScript로 작성된 강력하고 유연한 HTTP 클라이언트 라이브러리 주로 클라이언트 사이드에서 API 호출을 수행하는 데 사용함 브라우저와 Node.js 환경에서 모두 사용할 수 있으며, HTTP 요청을 쉽게 만들 수 있도록 도와줌 기본적인 사용법 Axios는 GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 지원함 // PUT 요청 axios.put('/api/users/1', { username: 'updateduser', password: 'newpassword' }) .then(response => { console.log(response.data); // 서버로부터의 응답 }) .catch(error => { console.error(erro.. 2023. 12. 15.

[공유] 티스토리 자동 목차 만들기, 따라다니는 자동 목차 생성 방법, 목차 네비게이터 만들기 (완전 쉬움 초보자 가능) 티스토리 목차 네비게이터 만들기(ver_1) by LabMate 매우 쉽고 간단합니다 각 티스토리의 테마에 맞게 수정할 수 있도록 css에 주석을 달아두었습니다 네비게이터를 만드는 기준 글 작성에서 제목1(h1), 제목2(h2), 제목3(h3) 이거나 blockquote(그 중에서 data-ke-style="style2"인 것) 입니다 네비게이터 기준에 따라 글을 작성하면 좋습니다 각 목차별 레벨은 설정하지 않았습니다. 모두 동일 레벨입니다 궁금한 점은 댓글 달아주세요 적용 결과 (우측 네비게이터) 글자를 누르면 페이지 내에서 이동이 가능합니다 스크롤을 내려도 따라다닙니다 설정 전 티스토리 스킨 정보 Book club 스킨을 적용하고 있습니다 글 페이지에서 백그라운드 컬러나 코드 스타일을 약간 수정한 상.. 2023. 12. 9.

[Script] 체크박스 내가 (체크)선택한 순서대로 입력되도록. 최근에 선택한 것이 가장 나중에. 체크 해제하면 그 내용만 삭제 체크하면 아래에 체크한 내용 텍스트 써주기 수동으로 개별체크했을 때 전제도 자동으로 체크되고, 하나만 체크 풀어도 체크해제되게 체크 개수가 4이하, 9일 떄 버튼 누르면 성공 alert 기능 구현하며 새로 배운 내용 $(선택자).arrt("속성 이름","속성 값")와 $(선택자). removeAttr("속성 이름")은 jQuery 1.6 이전 버전에서는 동작했지만, 최신 버전에서는 .prop() 메서드를 사용해야함 속성 추가 예시: $("#allChk").prop("checked", true); 속성 제거 예시: $("#allChk").prop("checked", false); 제이쿼리에서 태그로 선.. 2023. 12. 7.

[Script] 회원가입 페이지 기능 JavaScript/JQuery로 구현하기 요구사항 id : 문자(영어), 숫자만, 중복체크, "test" pw : 비밀번호확인(가입신청버튼 클릭시) 이름 : 5글자(maxlength x)-script 문자(한글,영어) 5글자 넘어갈 시 바로 체크 이메일 : 유효성(가입신청버튼 클릭시) 휴대폰 : 숫자만 4자리 -> 3번째로 4개 입력하면 3번째 창으로 커서이동 주민번호 : 숫자만 주민번호 유효성 뒷자리 맨첫자리만 숫자 1****** (가입 신청클릭시) 예시 화면 같은 기능을 JavaScript와 JQuery 두가지로 구현해봄 JavaScript (요구 사항을 잘못 해석한 코드가 있을 수 있음. 다음의 JQuery에서는 보완.) /* ======================================================= */ /* *.. 2023. 12. 7.

[JQuery] 제이쿼리 기본 사용법 script - jquery 필기 HTML태그들은 화면에 UI요소를 보여주고 입력은 가능하지만 데이터 처리는 안됨. HTML 태그와 데이터 처리를 위해서는 스크립트가 필요함. javaScript,jquery jquery를 사용하기 위해서는 선언 필요함 제이쿼리 기본문법 $(). //제이쿼리 기본 문법 $("selector").api(); 코드 작성 준비 옛날 방법 $(document).ready(function() { // 여기에 jQuery 코드 작성 }); 간결하고 일반적인 방법 $(function() { // 여기에 jQuery 코드 작성 }); 모든 파일은 위에서 부터 읽기 때문에 태그 일기 전에 태그를 사용하는 스크립트가 있다면 온전히 로딩 못됨. 대신 function안에 가둬놓으면 바로 실행되.. 2023. 12. 5.

[Node.js] Node.js 맛보기 javaScript 공부하다가 error부분에서 나온 node.js 정리 함수는 오류가 발생하면 실행을 중지하고, 그 오류는 함수가 호출된 장소로 전달됨 express는 라우트 핸들러 함수를 호출함. 그리고 라우트 핸들러 중 하나에서 오류를 수신하면, (오류가 있음을 확인한 다음)기본 오류 처리 미들웨어를 실행함 "함수는 오류가 발생하면 실행을 중지하고, 그 오류는 함수가 호출된 장소로 전달됨": 자바스크립트에서 함수 내에서 오류(예외)가 발생하면, 해당 함수의 실행이 중단되고 오류가 발생한 위치에서 예외 처리기로 오류가 전파된다는 것을 의미. 예외 처리는 try...catch 블록을 사용하여 할 수 있음 "express는 라우트 핸들러 함수를 호출함. 그리고 라우트 핸들러 중 하나에서 오류를 수신하면,.. 2023. 11. 20.

[JS] defer 속성 JavaScript에서 defer 속성은 태그에 사용함 defer 속성이 적용된 스크립트는 문서가 완전히 파싱된 후에(HTML이 모두 로드된 후에) 실행되도록 함 페이지의 로딩 시간에 영향을 주지 않으면서 스크립트를 실행할 수 있는 방법 외부 스크립트가 DOM 요소에 의존하거나 수정하는 경우 유용 defer 속성이 있는 스크립트의 특징 문서 파싱 중에 다운로드: defer 속성이 있는 스크립트는 HTML을 파싱하는 동안 백그라운드에서 다운로드됨. HTML 파싱을 방해하지 않으면서도 필요한 스크립트를 미리 다운로드할 수 있게 해줌 문서 파싱 후 실행: 스크립트는 HTML 문서의 파싱이 완료된 후, DOMContentLoaded 이벤트가 발생하기 전에 실행됨. 스크립트가 문서의 모든 요소에 접근할 수 있음을.. 2023. 11. 12.

이전 1 다음

티스토리툴바