Gwni Lab GwniLab

FTP의 의미 FTP란 파일 전송 프로토콜(File Transfer Protocol)의 약자입니다. 그 의미를 자세히 살펴봅시다. 기본적으로 '프로토콜'은 전자기기가 서로 통신하는 데 필요한 절차나 규칙을 뜻하죠. FTP는 TCP/IP 네트워크(인터넷)상의 장치가 파일을 전송할 때 사용하는 규칙입니다. 인터넷을 사용할 때 우리는 다양한 프로토콜을 사용합니다. 인터넷을 둘러볼 때는 HTTP를 사용하고, 인스턴트 메시지를 주고받을 때는 XMPP를 사용하죠. 간단히 말해 FTP란 파일을 이동할 때 사용하는 프로토콜이라고 보시면 됩니다. FTP 서버란? FTP 서버란 파일을 하나의 장치에서 다른 장치로 전송하는 소프트웨어 애플리케이션을 말합니다. 복잡하게 들릴 수도 있지만, 기본적으로 FTP 서버는 FTP 주소..

const typingText = document.querySelector(".typing__text p"); const inputField = document.querySelector(".input__field"); const typingMistake = document.querySelector(".mistake span"); const typingTime = document.querySelector(".time span b"); const typingWpm = document.querySelector(".wpm span"); //1분동안 친 단어 const typingCpm = document.querySelector(".cpm span"); //1분동안 친 글자수 const typingAgain =..

뮤직 플레이어 만들기 예제를 해보았다. 실력을 키워서 더 간단한 코드로 만들 수 있도록 노력해야겠다. https://gwni0214.github.io/webs_class/javascript/musicPlayer/index.html Document expand_more Now Playing more_horiz 0:00 0:00 repeat skip_previous play_arrow pause --> skip_next queue_music repeat_one shuffle --> queue_music Music List close gwni0214.github.io

제이쿼리(jQuery)란 제이쿼리는 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리입니다. “write less, do more(적게 작성하고, 많은 것을 하자)”라는 모토로 2006년 미국의 SW 개발자 존 레식(John Resig)이 발표하였습니다. 제이쿼리(jQuery)는 오픈소스 기반의 자바스크립트 라이브러리입니다. 제이쿼리는 다음과 같은 특장점을 가지고 있습니다. 웹페이지 상에서 엘리먼트(Element)를 쉽게 찾고 조작할 수 있습니다. 거의 모든 웹브라우저에 대응할 정도로 호환성이 매우 뛰어납니다. 네트워크, 애니메이션 등 다양한 기능을 제공합니다. 메소드 체이닝(Method chaining) 등 짧고 유지관리가 용이한 코드 작성을 지원합니다. ..

mouseover, mouseout, mouseenter, mouseleave mouseover는 마우스가 요소 또는 그 자식 중 하나에 들어갈 때 트리거됩니다 . 그것의 상대는 mouseout입니다. mouseenter는 마우스가 설정된 요소에 들어갈 때만 트리거됩니다. 상대 이벤트는 mouseleave 입니다. mouseenter및 mouseover이벤트는 요소 위로 마우스를 이동하면 트리거됩니다 . move your mouse move your mouse 0 0 move your mouse move your mouse 0 0 왼쪽이 mouseover, 오른쪽이 mouseenter인데요. mouseover는 직접 이벤트를 걸지않은 자식요소에 마우스 포인터가 와도 발생하지만 mouseenter는 오로지..

Element.classList 메서드는 클래스를 추가,삭제 등 다양한 기능을 활용할 수 있는 메서드 입니다. 이번에는 add에 대해서 알아봅시다. Element.classList.add()로 사용합니다. 우선 스타일에서 추가할 클래스의 속성을 만들어줍니다. 박스 1,2를 document.querySelector로 변수화 시켜서 편하게 작업할 수 있습니다. 저렇게 box1.classList.add(), box2.classList.add()를 사용해서 red, blue 클래스를 박스에 추가시킬 수 있습니다. 이런 식으로 적용할 수 있습니다. 이번에은 패딩 값도 추가해보겠습니다. 저렇게 나눠서 쓸 수도 있지만 한줄로 합쳐서 추가하는것도 가능합니다. 적용된 예시입니다. 이렇게 빨간 박스에 패딩 50, 파란 박..

setInterval이란? setInterval() 함수는 정해진 시간 간격으로 인자를 반복 실행하는 함수입니다. 반복문이랑 비슷하다고 할 수 있겠네요. 앞서 활용해본 이미지 슬라이드 예제처럼 몇 초에 한번씩 특정 코드를 반복해서 실행할 수 있습니다. 간단한 예를 들어서 봅시다. function test(){ console.log("javascript"); } setInterval(test, 2000); 이런식으로 "javascript"라는 문자를 2초 마다 반복 실행 시킬 수 있습니다. 함수를 정의하고 그 함수를 인터벌로 실행 시킬 수 있지만 처음부터 인터벌 함수를 작성하는것도 가능합니다. setInterval(() => { console.log("javascript"); }, 2000); 이런 식으로..

Splice 배열 메서드 : splice() 배열 요소를 다른 요소로 변경하는 메서드 입니다. 반환하는 값은 배열로 나타납니다. 문법은 splice(자르는 위치, 갯수, 요소1, 요소2,...)로 나타냅니다. 예제로 확인해봅시다. const arr1 = [1,2,3,4,5]; const result = arr1.splice(2); console.log(result); //3,4,5 console.log(arr1); //1,2 해당 result는 3,4,5 가 나왔는데요. arr1은 1,2만 나오도록 변경되었습니다. 문법의 인자값 중 자르는 위치만 설정해주어서 2 번째 위치에서 자르고난 뒤, 별 다른 명령이 없으면 나머지 값을 도출합니다. 순서를 왼쪽에서 오른쪽으로 읽습니다. 자르는 위치가 헷갈리기도 하는..