joyful

마우스 이벤트 중 moustenter와 mouseover의 차이점을 알아보겠습니다.  moustenter와 mouseover는 어떤 요소 안으로 마우스가 들어오는 순간을 감지하는 이벤트이며, 이와 반대로 mouseleave와  mouseout은 마우스가 어떤 요소 밖으로 이동하는 순간을 감지하는 이벤트입니다.moustenter - mouseleavemouseover - mouseout  이 둘은 매우 유사하지만, 이벤트 버블링이 일어나느냐에 따라 차이가 납니다.  *이벤트 버블링: 특정 요소에 이벤트가 발생했을 때 해당 이벤트가 상위의 요소들로 전달되는 특성    mouseenter / mouseleave:-버블링이 일어나지 않습니다.-따라서 자기 자신만이 이벤트를 받아 한 번만 발생합니다.   mous..

UI 디자인에서 흔히 볼 수 있는 아코디언 메뉴를 자바스크립트로 만들어보았습니다. 기본적인 내용은 w3schools를 참고하였습니다. https://www.w3schools.com/howto/howto_js_accordion.asp See the Pen accordion menu by Yeaeun Hwang (@yeaeunhwang) on CodePen. TIL nextElementSibling nextSibling 자바스크립트의 DOM 프로퍼티로서 현재 노드에서 다음 노드를 선택할 때 사용합니다. 이 둘의 차이는 간단합니다. nextSibling은 공백이든, 텍스트든 다음에 있는 어떠한 것이든 가져오고, nextElementSibling은 Element(요소)만 가져옵니다. 예를 들어 위의 HTML코드..

자바스크립트에서 자주 사용하는 함수들을 정리해보겠습니다. 1. split() 문자열을 separator로 잘라서 배열로 저장해주는 함수 string.split(separator, limit); 위의 형식과 같이 구분자를 기준으로 잘라 'limit' 크기 이하의 배열에 저장하여 리턴합니다. 사용예제 1. split(" ") 공백별 구분 const str = 'The quick brown fox jumps over the lazy dog.'; const words = str.split(" "); console.log(words[3]); // Expected output: "fox" 2. split("") 문자별 구분 const str = 'The quick brown fox jumps over the laz..

폼과 자바스크립트 1. 폼 요소에 접근하는 여러 가지 방법 id 값이나 class 값을 사용 name 값을 사용 폼 배열을 사용 //id class document.querySelector("#이름") document.querySelector(".이름") //name document.이름 //폼 배열 (id, class, name 속성이 모두 없을 때 사용) document.forms[0].elements[0] 브라우저 객체 모델 1. 브라우저 객체 모델이란? 브라우저 요소 전체를 객체화 한 것 자주 사용하는 브라우저 내장 객체: Window: 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체. Document: 웹 문서에서 태그를 만나면 만들어진느 ..

이 글은 유튜브 제로초님의 가위바위보 게임 강좌를 참고하여 작성한 글입니다. 자바스크립트로 가위바위보 게임을 만들어 보았습니다. 가위 바위 보 만들다 보니 문제점이 하나 있었습니다. 이미지를 변환하는 코드에서 스크립트로 background 이미지의 position 스타일을 지정했는데, 이 게임은 간단한 프로그램이라서 괜찮지만, 이 경우가 많아지면 성능 저하의 원인이 될 수 있습니다. 따라서 스크립트는 스크립트에만! 스타일은 스타일에만! 지정해주는 것이 좋습니다. 그래서 미리 지정할 수 있는 스타일은 스타일에만 지정한 후, 클래스명을 추가했다 빼주는 방식으로 변경해보았습니다. 바로 이렇게요! 전체적인 코드 보여드리고 세부적으로 변경된 부분 정리하겠습니다, lines (90 sloc) 3.39 KB 가위 바..

안녕하세요 이 글은 유튜브 코딩앙마의 와 TCP school.com의 글을 기반으로 정리한 글입니다. 이번 포스팅에서는 자바스크립트의 기본 타입들에 대해 알아보겠습니다. 타입(data type)이란 프로그램에서 다룰 수 있는 값의 종류를 의미합니다. 자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 합니다. 자바스크립트의 기본 타입은 크게 원시 타입과 객체 타입으로 구분할 수 있습니다. 원시 타입(primitive type): 1. 숫자(number) 2. 문자열(string) 3. 불리언(boolean) 4. 심볼(symbol) : ECMAScript 6부터 제공됨 5. undefined 객체 타입(object type): 6. 객체(object) 1. ..

안녕하세요 이 글은 유튜브 코딩앙마의 와 TCP school.com의 글을 기반으로 정리한 글입니다. 자바스크립트의 기초 개념인 변수에 대해서 알아보겠습니다. 변수 변수(variable)란 데이터(data)를 저장할 수 있는 메모리 공간을 의미하며, 그 값이 변경될 수 있습니다. 자바스크립트에서는 var 키워드를 사용하여 변수를 선언합니다. 변수 선언과 초기화 선언된 변수는 나중에 초기화할 수도 있고, 선언과 동시에 초기화할 수도 있습니다. 쉼표(,) 연산자를 이용하여 여러 변수를 동시에 선언하거나 초기화할 수도 있습니다. 변수의 타입과 초깃값 자바스크립트의 변수는 타입이 정해져 있지 않으며, 같은 변수에 다른 타입의 값을 다시 대입할 수도 있습니다. 이렇게 한 변수에 다른 타입의 값을 여러 번 대입할 ..

안녕하세요 이 글은 TCP school.com의 글을 기반으로 정리한 글입니다. 자바스크립트에서 사용할 수 있는 출력 방법은 다음과 같습니다. 1. window.alert() 메소드 2. HTML DOM 요소를 이용한 innerHTML 프로퍼티 3. document.write() 메소드 4. console.log() 메소드 1. window.alert() 메소드 자바스크립트에서 가장 간단하게 데이터를 출력할 수 있는 방법입니다. 브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달해 줍니다. 2. HTML DOM 요소를 이용한 innerHTML 프로퍼티 실제 자바스크립트에서 가장 많이 사용되는 방법입니다. 우선 document 객체의 getElementByID()나 getElementsByTag..

안녕하세요 이 글은 TCP school.com의 글을 기반으로 정리한 글입니다. 자바스크립트의 기본 문법에 대해서 알아보겠습니다. 식별자(identifier) 식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미합니다. 자바스크립트에서 식별자는 영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용할 수 있습니다. 식별자 작성 방식 1. Camel Case 방식 Camel Case 방식이란 식별자가 여러 단어로 이루어질 경우에 첫 번째 단어는 모두 소문자로 작성하고, 그다음 단어부터는 첫 문자만 대문자로 작성하는 방식입니다. 2. Underscore Case 방식 Underscore Case 방식은 식별자를 이루는 단어들을 소문자로만 작성하고, 그 단어들은 언더스코어(_)로 연결하는..