javascript30

• 

  [JS] JQuery 윈도우 Event Methods JQuery Event Methods jQquery 에서 사용되는 윈도우 이벤트 종류에 대해 알아보겠습니다. 이벤트란? 웹 페이지가 응답할 때 발생하는 작업을 이벤트라고 합니다. 이 이벤트는 어떠한 일이 발생하는 정확한 순간을 의미합니다. 예를 들어 아래와 같은 이벤트를 사용할 수 있게 됩니다. 특정 요소에 마우스 Focus 요소 클릭 로딩이 끝난 후 작동 등... 일반적인 이벤트 종류 일반적으로 많이 사용되는 이벤트의 종류에 대해 알아보겠습니다. 문서 로딩 이벤트 ready() : 문서 로딩 - html의 문서가 로딩되었음을 알린다. (이미지, 동영상 등은 영향을 끼치지 않음) $(document).ready(function() { }); $(function() { }); 위 코드를 사용하게 되면 bo.. FRONT-END/JAVASCRIPT 2022. 9. 15.

• 

  [JS] Input이 활성화 될 때, 커서 자동 Focus 하는 방법 Auto Focus Display:none인 태그가 포함된 요소가 JS를통해 나타나게 해줬을때 커서가 자동으로 input에 foucs 되게 하는 방법에 대해 알아 보겠습니다. Input 생성 우선 텍스트를 입력할 수 있는 태그를 생성해줍니다. 버튼 클릭 시 input 보이기 위에 만들어놓은 태그를 display:none으로 없애준 뒤에, 특정 버튼을 누르면 다시 이 보이도록 자바스크립트를 통해 코드를 작성합니다. $(document).ready(function () { var target = $('.container'); $(document).on('click', '.showInput', function (e) { $('.showInput').hide(); target.fadeIn(100).addClas.. FRONT-END/JAVASCRIPT 2022. 9. 15.

• 

  [JS] 닫기버튼을 만들어 부모 태그 없애기 (display: none) 복잡한 자바스크립트 없이 HTML의 button을 사용하여 클릭 한 번 만으로 부모클래스를 사라지게 하는 방법에 대해 알아보도록 하겠습니다. Close button 버튼을 만드는 방법은 다양한데 이번에는 태그를 사용하여 구현해볼까 합니다. HTML 속성 추가 HTML에 임의의 Container를 생성하고 그 안에 button 태그를 입혀보겠습니다. × Javascript button태그 안의 onclick에 자바스크립트를 직접 넣어준 형태인데, 살펴보자면 아래와 같습니다. this : "자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수" parentElement : "노드의 부모 요소를 반환하는데, 부모가 없거나 부모가 DOM 요소가 아니라면 null을 반환한다" style : ".. FRONT-END/JAVASCRIPT 2022. 9. 13.

• 

  [JS] 오프스크린 이미지를 지연(Lazyload) 로드 - lazysizes Lazysizes JS를 사용하여 웹 사이트 이미지에 오프스크린 이미지 지연(lazyload)를 적용시킬 수 있습니다. Lazy loading lazy loading은 페이지를 읽어 들이는 시점에 중요하지 않은 리소스 로딩을 추 후에 하는 기술입니다. 대신에 이 중요하지 않은 리소스들은 필요할 때 로드가 되어야 합니다. 이미지와 관련된 경우에는 중요하지 않은 리소스들은 "off-screen"와 함께 동기화가 됩니다. 누군가가 웹페이지(이미지, 비디오 등)에 리소스를 추가할 때, 리소스는 small placeholder를 참조합니다. 사용자가 웹페이지를 검색할 때 실제 리소스는 브라우저에 의해 캐시 되고 리소스가 사용자 화면에 표시될 때 placeholder를 대체합니다. 예를 들어, 사용자가 웹페이지를 .. FRONT-END/JAVASCRIPT 2022. 9. 12.

• 

  [JS] 티스토리 카테고리 괄호 제거 방법 티스토리 카테고리에는 각각 몇개의 게시글이 있는지 개수가 표시되어있는데 괄호 안에 넘버가 들어가 있습니다. 오늘은 티스토리 카테고리의 괄호를 제거하는 방법에 대해 알아보겠습니다. 카테고리 태그 찾기 우선, 티스토리 카테고리의 태그를 찾고 그 안의 id 네임을 찾아줘야 합니다. 자신의 블로그에서 사이드바를 오픈한 상태로 개발자 도구에 들어가 준다. (더보기 > 개발자 도구) 콘솔창 1번 아이콘을 누른 뒤, 사이드바의 카테고리 부분을 선택해준다. 콘솔창의 카테고리 부분의 id 값을 복사해준다. (저의 경우 id="sidebar-category") 만약 id 값이 없다면, 스킨 편집 > HTML > 에서 id 값을 직접 넣어준다. 다시 1번 아이콘을 선택하고 괄호가 포함된 게시글 개수 부분을 선택한다. 선택한.. TIP/CSS & Tistory 2022. 9. 12.

• 

  [JS] 로딩이 될때 요소의 텍스트를 변경하는 방법 HTML 안에 있는 특정 요소의 텍스트를 변경하는 것이 아닌, 스크립트로 로드가 된 후에 요소가 등장하고 그 안에 텍스트를 JS를 통해 변경해야할 때는 단순히 .innerHTML 속성을 통해 변경이 불가능 합니다. 오늘은 로딩이 될때 요소의 텍스트를 변경하는 방법에 대해 알아보도록 하겠습니다. 로딩이 될 때 요소의 텍스트를 변경하는 방법 간단하게 말해서 값을 설정하려는 시점에 요소가 존재하지 않다면 특정 요소, 예를 들어 가 DOM(Document Object Model)에 추가된 후에 변경 메서드를 호출해야 합니다. 이 스크립트 누구인가? See the Pen innerHTML onload by 서근 (@seogun95) on CodePen. 만약, 웹사이트가 로드 되고 N초 뒤에 .innerHTML을.. FRONT-END/JAVASCRIPT 2022. 9. 11.

• 

  [JS] 페이지 로딩시 스크롤 막는 방법 페이지 로딩 시 스크롤 막는 방법 페이지가 로딩될때 스크롤을 막아야 하는 경우가 있는데, 오늘은 로딩시 스크롤을 막는 방법에 대해 알아보겠습니다. body overflow hidden 우선 Html의 body 부분의 스크롤을 막아주는 스타일을 입혀야 합니다. CSS에 다음과 같이 코드를 추가해줍니다. body.no-scroll { overflow: hidden !important } 코드 네임의 .no-scroll은 사용자가 원하는 네임으로 변경해도 됩니다. body class 추가 body에 .no-scroll이라는 class를 추가해주겠습니다. Javascript 추가 body에 클래스를 추가해줬다면 이제 모든 페이지에서 스크롤이 작동되지 않습니다. 왜냐하면 CSS에 body의 overflow를 hi.. FRONT-END/JAVASCRIPT 2022. 9. 10.

• 

  [JS] 함수 Function JAVASCRIPT 함수 개념에 대해 알아보겠습니다. 함수 Function function add(a, b) { return a + b; } //함수 정의 add(1, 2); //함수 호출 function - 함수 정의 키워드 add - 함수 이름 (a, b) - parameter 매개 변수, 인자 return - 결괏값 반환 add(1, 2) - 함수 호출 중요 Point 함수 단위로 작은 단위의 일들을 묶어야 한다. 수행하는 일을 잘 나타낼 수 있는 이름을지어야 한다. 매개변수 이름도 의미 있게지어야 한다. 함수도 객체(object)이기 때문에 메모리 상에 Hip에 주소가 할당되게 된다. function add(a, b) { return a + b; } const sum = add; 함수의 이름은 함.. FRONT-END/JAVASCRIPT 2022. 9. 8.

• 

  [JS] 내부링크를 현재 창으로 열도록 해주는 방법 웹 사이트에 설정되어있는 링크들중에 만약 로컬 페이지의 링크라면, target="_balnk"로 설정되어 새창으로 열리는 링크를 강제로 현재창으로 바꿔주는 스크립트에 대해 알아보겠습니다. 내부 링크와 외부 링크 SEO 최적화 중에 내부 링크와 외부 링크를 사용하는 것은 조금 구별된다고 합니다. 내부 링크: 내 사이트 내의 다른 글로 연결되는 링크 외부 링크: 타 사이트로 연결되는 링크 외부 사이트로 연결되는 링크를 걸면 내 사이트의 평판 일부를 해당 사이트로 넘겨주게 되므로, SEO 모범 관행 중 하나는 권위 있는 사이트가 아니거나 내가 제어할 수 없는 사이트로 링크를 걸 때에는 target="_blank" rel="nofollow" 속성을 추가합니다. 외부 링크를 현재 창으로 열리도록 설정하면 방문자가.. FRONT-END/JAVASCRIPT 2022. 9. 7.

• 

  (JS) 이미지의 src를 변경하는 방법 자바스크립트로 src 주소 변경 HTML에서 Img 태그에 src로 지정된 이미지 주소를 자바스크립트를 사용하여 바꾸는 방법에 대해 알아보도록 하겠습니다. Html html의 img 태그 src 주소는 example.svg 입니다. 이제 자바스크립트로 다른 주소를 할당해주도록 하겠습니다. Javascript $img = document.querySelector(".img-container > img"); $img.src = `./imgaes/another.svg`; JQuery JQuery를 사용해 위에 코드를 한 줄로 작성할 수 있습니다. $(".img-container > img").attr({ src: "./images/blog-logo.svg" }); 클래스를 추가하려면 아래와 같이 코드를 작성해.. FRONT-END/JAVASCRIPT 2022. 8. 23.

• 

  [JQuery] 원하는 위치에 요소 삽입 - insertBefore(), insertAfter(), prependTo(), appendTo() JQuery 요소 이동 원하는 위치에 어떠한 태그를 삽입해야 하는경우가 종종 있는데 오늘은 JQuery를 사용하여 위치 이동을 시켜보도록 하겠습니다. 이동시킬 요소 위 코드에서 onerror는 src의 이미지가 오류가 났을 때, 대체해주는 태그입니다. 삽입될 요소 이동시킬 요소를 만들었으니, 이제 이동이 이뤄질 위치 태그를 만들어 줍니다. 자바스크립트 div나 특정한 요소 안에 id를 만들고 자바스크립트를 이용해 이 div안에 방금 만든 img 태그를 넣어주기만 하면 됩니다. $(".target").insertBefore("source"); 그럼 아래와 같이 사용하면 되겠네요! $(".img").insertBefore("#comment-blog-img"); 여기서 .insertBefore은 요소의 삽입 .. FRONT-END/JAVASCRIPT 2022. 8. 23.

• 

  (JS) 카운트 후, 특정 요소 나타나는 스크립트 Button을 누르면 카운터가 진행 된 후, 숨겨놓은 요소가 나타나게 해주는 방법에 대해 알아보도록 하겠습니다. 카운트 후, 특정 요소 나타나는 스크립트 html container요소는 display: none으로 처리 하고, click-link를 누르면 li-title의 text가 지정한 문구로 바뀌며 카운트 다운 후, container 요소가 나타나게 됩니다. 버튼을 클릭하면 링크가 나타납니다. 버튼 보여질 div 요소 JS 이제 javascript로 해당 이벤트를 구현하면 됩니다. button에 onclick 이벤트 대신에 자바스크립트 안에 직접 넣어주고 id만 사용하여 구현될 수 있도록 해줬습니다. 그리고 countDownDate 변수 10초 후 container의 display가 flex로 바뀌.. FRONT-END/JAVASCRIPT 2022. 8. 19.

• 

  [JS] Lottie Animation 사용 방법 Lottie Animation을 Json 형태로 가져와 벡터 이미지를 Web에 뿌려줄 수 있습니다. 오늘은 Lottie Animation 사용하는 방법에 대해 알아 보도록 하겠습니다. Lottie Animation LottieA Animation은 에어비앤비에서 개발한 라이브러리입니다. After Effects로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 html, webflow, android, iOS 환경에서 이용할 수 있습니다. Lottie Animation은 벡터 기반의 애니메이션인데 즉, SVG로 저장됩니다. TIP 벡터 이미지란? 벡터 이미지는 png, jpg등과 다르게 용량이 적고 해상도 저하가 일어나지 않는다는 장점이 있습니다. Lottie 사용 방법 lo.. FRONT-END/JAVASCRIPT 2022. 8. 16.

• 

  (JAVASCRIPT) 타입 Typeof Javascript의 타입에 대해 알아보고 typeof를 통해 어떤식으로 타입이 결정되는지 알아보도록 하겠습니다. Type 자바스크립트는 동적으로 실행할 때 할당된 값에 따라 타입이 변경되는 동적(Dynamically Typed)인 타입입니다. 또, 변수에 어떤 값이 들어가냐에 따라 변하는 약한 타입(Weakly Typed)입니다. JAVASCRIPT - 동적인 타입(Dynamically Typed) - 약한 타입(Weakly Typed) typeof typeof를 통해 타입을 확인할 수 도 있습니다. let someVariable console.log(typeof someVariable); //undefined someVariable = ""; console.log(typeof someVariable).. FRONT-END/JAVASCRIPT 2022. 8. 11.

• 

  (JAVASCRIPT) 상수와 변수 Const - SNAKE_CASE 재할당이 불가능한 상수와 변수 const에 대해 알아보도록 하겠습니다. 상수와 변수 const const는 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다. 재할당이 가능한 let과 재할당이 불가능한 const의 차이를 아래에서 확인할 수 있습니다. // let 재할당 가능한 let name = "서근"; console.log(name); name = "미진"; console.log(name); // const 재할당이 불가능한 // 1. 상수 // 2. 상수변수 혹은 변수 const seogun = "서근"; console.log('seogun:', seogun); seogun = "미진"; // console.log(seogun); //TypeErro.. FRONT-END/JAVASCRIPT 2022. 8. 11.