프로그래밍 공부 이야기

jQuery 자바 스크립트 문법을 간결하게 하며 많은 기능을 제공하기에 사용하는 기능이다. 과거에는 혁신적인 기술로 각광받으며 많은 사랑을 받았으나, 지금에 와서는 DOM에 직접 접근하는 개발 방식에 대한 기피, 다른 언어들의 발전, 자바스크립트의 지속된 업데이트로 입지가 좁아졌다. 하지면 여전히 많은 곳에서 사용되고 있고, 기존에 만들어진 사이트들 역시 jQuery를 사용해 만들어졌기 때문에 최소한 읽을수는 있어야 한다. 사용법 1. 파일을 직접 배포함(직접 다운 받아서 불러옴) https://jquery.com/ jQuery What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like ..

JS로 문서 객체 속성 변경 getAttribute() : 입력된 객체의 속성값을 가져오는 함수 setAttiribute( a, b ) : 호출된 객체의 a 속성값을 b로 변경하는 함수. ex) 이미지 변경하기 function changeImg() { let img = document.getElementById("img"); // img태그 선택 let imageName = img.getAttribute('src'); // img태그의 src속성 선택 img.setAttribute('src', 'bananas.png'); // src태그 변경( 이미지 변경 ) }; JS로 클래스 이름 설정하기 방법 1. 설정하고자 하는 태그를 선택한다. 2. .classList로 해당 태그의 클래스 이름을 받아온다. 3..

클릭 이벤트 처리 함수 1. onclick() 가장 일반적이며 간편하게 사용 가능한 함수다. 특정 요소가 클릭되었을때 호출되며, 버튼태그가 아니더라도 글자나 div태그 역시 적용 가능하다. 클릭하세요 이런 식으로 사용 가능하다. 만약 자바스크립트로 적용하고 싶다면 선택자를 통해 특정 태그를 선택해서 프로퍼티에 값을 할당해야 한다. 더보기 let h1 = document.getElementById('header1'); h1.onclick = () => { alert('H1 클릭됨.'); }; 위의 경우는 id선택자를 통해 h1태그를 선택해 onclick 프로퍼티에 익명 함수 값을 할당한 것이다. 2. addEventListener 대부분의 언어에 존재하는 addEventListener를 이용할 수 도 있다..

프로퍼티는 자바스크립트, c#, 파이썬을 비롯한 일부 언어만 가지고 있는 특수한 유형이다. 말 그대로 직역하면, 재산, 소유물이다. 그리고 프로그래밍에서의 그 의미 역시 비슷하게 이해하면 쉽다. 정확하게 표현하자면 어떤 값과 연관된(속한) 값을 말한다. 클래스에 속한 변수, 메서드 역시 클래스의 프로퍼티가 된다. 배열의 내용물 역시 배열의 프로퍼티다. 프로퍼티는 대괄호 [ ], 또는 점 접근자( . ) 를 통해서 접근할수 있다. HTML과 연동되는 자바 스크립트 특성상 사용자가 선언하지 않더라도 프로퍼티가 선언되어있는 경우가 많으니 유용하게 사용하도록 하자.

타이머 관련 함수 매개변수로 익명함수를 받는다. setTimeout () : 일정 시간후 한번 호출 let timer = setTimeout( () => { console.log("3초후 호출됨!") }, 3000 ); //타이머를 지울때 clearTimeout( timer ); setInterval() : 일정 시간마다 주기적 호출. //1초간격으로 수행되는 코드 var interval = setInterval( () => { console.log( Date() ) //HH:MM:SS console.log( new Date().toTimeString().split(' ')[0] ); //YYYY-MM-DD console.log( new Date().toISOString().split('T')[0] );..

함수 자바와 마찬가지로 입력값 유무, 리턴값 유무로 4가지 종류의 함수가 존재한다. 자바스크립트의 함수는 크게 두가지로 나눠진다. 1. 익명함수 변수에 함수를 저장한다. 사용하기 쉬워서 짧은 수행문을 수행하는 경우 쓴다. 단점) 호이스팅이 적용 안된다. *호이스팅* 함수를 한번이라도 만들면, 함수를 선언한 곳보다 위에서 함수를 호출할수 있게 하는 기능. 함수를 선언하면 자동적으로 코드의 가장 위로 올린다. 2. 일반함수 우리가 아는 일반적인 함수. 함수의 선언 방법 1. 일반함수 선언 function 함수이름 (파라미터){ 실행문; return 문; }; 2. 익명함수 선언(함수형 변수) let func = function(파라미터){ 실행문; return 문; }; 3. 화살표함수 선언 let func..

배열 *엄밀히 말하자면 자바스크립트의 배열은 배열이 아니다* 배열은 크게 밀집배열과 희소배열로 나눠진다. 다른 언어들에서 우리가 흔히 사용하는 배열은 밀집배열이지만, 자바스크립트에서 배열은 희소배열이다. 밀집배열(협의의 배열) 1. 하나의 데이터 타입으로만 이뤄진 배열이다. 2. 메모리에 연속하여 나열된 자료구조다. 3. 요소의 추가, 삭제가 어렵다. 4. 연속적이기에 빠르다. 희소배열(광의의 배열) 1. 하나 이상의 자료형을 허락하는 배열이다. 2. 한 자료가 차지하는 메모리 공간이 불규칙(불연속)할 수 있다. 3. 요소의 추가 삭제가 쉽다. 4. 연속적이지 않아 느리다. 즉, 대다수의 경우 자바스크립트의 배열은 Key를 Index로 가진 Map 이다. 그렇기에 인덱스 값 대신 문자열을 넣어도 오류가 ..

javascript가 오늘부로 시작되었다. 거의 대부분 java와 비슷하지만 몇몇 다른 부분이 있어서 그것들만 정리하겠다. JavaScript를 실행하는 세가지 방법 1. head나 body태그 안에서 실행하기 2. HTML 태그 안에서 속성으로 실행 (onclick, href 등) 클릭하세요! a태그를 클릭하면 알림창이 뜬다. 3. 별도로 js파일을 만들어 import해서 사용 보통 body태그 가장 아래를 권장한다. html의 모든 요소(DOM)을 모두 분석한 뒤에 실행되어야 안전하기 때문이다. 여기서 DOM이란 Document Object Model이라는 것으로, 우리가 만든 태그와 기존에 있는 태그, 모두 포함해 웹문서를 트리 모양으로 분석해놓은 메모리 트리다. 데이터 선언 형식 var : 타입추..

em과 rem 둘 모두 배수로 크기를 지정하는 단위로, 기본 글자 크기 16px을 기준으로 늘리거나 줄인다. 다만 em은 부모 태그가 존재할 경우, 부모의 크기를 기준으로 배수를 한다. 반면 rem은 부모 태그가 몇개가 존재하더라도 항상 같은 값이 나온다. 아래의 예를 보자. 기본크기 16px 테스트문구 (19.2px) 테스트문구 (23.4px) 테스트문구 (27.6px) em의 경우는 부모 태그의 1.2배를 거듭 한다. 그렇다보니 같은 값을 얻기 매우 힘들어 나온 기술이 rem이다. rem은 부모 태그가 얼마나있든 상관없이 항상 16*1.2의 값인 19.2px가 나온다. 기본크기 16px 테스트문구 (16*1.2=19.2) 테스트문구 (19.2*1.2=23.4) 테스트문구 (23.4*1.2=27.6) ..

오늘은 새로 배운것이 없다. 기존에 배운 것을 토대로 다음 영화 순위 화면을 클론 코딩만 하루 종일 했기 때문이다. 나는 반응형 애니메이션을 만들던 도중 html 코드의 어딘가에 오류가 생겼는데, 그 오류의 원인을 도저히 찾지 못해서 완전히 갈아엎고 다시 시작해야하는 상황에 놓여서 실패하고 말았다. 솔직히 백엔드를 지향하는 우리가 왜 굳이 프론트엔드 분야를 이렇게 깊게 파야하는지 납득가지는 않는다. 물론 개발자로서 연동을 위해 기본적인 수준은 알아야하지만, 이건 너무 본격적이라는 생각이 든다. 프론트엔드 수업을 제외하고 실습에만 쓴 시간이 벌써 20시간은 넘어가는 것 같다. java에서 빠르게 넘어가느라 이해는 커녕 따라가기 급급했던 기능들이나, 더 심화된 설명이 필요한 부분에 이 시간이 배분되었다면 더..