Programming

; develop a program

반응형

Front-End 22

[JavaScript] this

이번 포스팅에서는 자바스크립트에서 this 키워드에 대하여 공부를 해보고자 한다. this란 this는 자바스크립트에서 함수가 호출될 때, 해당 함수를 호출한 객체를 참조하는 키워드이다. this를 사용하면 함수가 어떻게 호출되었는지에 따라 해당 함수 내부에서 다른 객체나 변수를 참조할 수 있다. this의 값은 호출되는 위치에 따라 달라질 수 있다. 객체의 메서드로 함수가 호출될 경우 this는 해당 객체를 가리키지만, 일반적인 함수로 호출될 경우, this는 전역 객체를 가리킨다. 예제 코드 let person = { name: 'John', greet: function() { console.log(`Hello, my name is ${this.name}.`); } }; person.greet(); ..

[JavaScript] '$' 와 '_' 변수명

이번 포스팅에서는 자바스크립트에서 변수명으로 쓰이는 '$'와 '_'에 대하여 공부를 해보고자 한다. 변수 명명 규칙 자바스크립트에선 변수 명명 시 두 가지 제약 사항이 있다. 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다. 첫 글자는 숫자가 될 수 없다. 기호 '$' '$'는 보통 jQuery 라이브러리에서 사용되며, 전역 함수 $( )는 DOM 요소를 선택하는 데 사용된다. 이 외에도 jQuery에서는 $를 변수명의 맨 앞에 사용하여 변수를 구분하고, 객체명으로 $를 사용하여 jQuery 객체임을 나타낸다. 예제 코드 // jQuery로 body 요소를 선택하여 변수에 저장 let $body = $('body'); // $를 변수명 앞에 사용하여 jQuery 객체를 표시할 수도 ..

[JavaScript] parseFloat( ) & parseInt( )

이번 포스팅에서는 자바스크립트에서 parseFloat 함수와 parseInt 함수에 대하여 공부를 해보고자 한다. parseFloat와 parseInt는 JavaScript에서 숫자로 변환하기 위해 사용되는 함수다. 각각의 함수는 문자열을 숫자로 변환하는 데 사용되지만, 두 함수는 다른 방식으로 작동하며, 사용되는 상황에 따라 다른 결과를 반환할 수 있다. parseFloat parseFloat 함수는 문자열을 부동소수점 숫자로 변환한다. 함수는 문자열을 왼쪽부터 읽어가면서 숫자와 소수점, 그리고 지수(E 또는 e)를 인식한다. 만약 문자열이 숫자로 시작하지 않는다면, NaN(Not-a-Number)을 반환한다. 소수점 이하의 숫자가 있는 경우, 그 숫자도 인식하여 반환한다. 지수 표기법을 사용하는 경우..

[JavaScript] 제이쿼리(jQuery)

이번 포스팅에서는 자바스크립트에서 제이쿼리(jQuery)에 대하여 공부를 해보고자 한다. jQuery란 jQuery는 자바스크립트 라이브러리 중 가장 대표적인 것으로, 자바스크립트로 작성된 코드를 더욱 쉽게 작성할 수 있도록 도와주는 라이브러리를 말한다. jQuery를 사용하면 HTML 문서의 DOM 요소를 쉽게 조작하고, 이벤트 처리를 보다 쉽게 구현할 수 있다. 이외에도 jQuery UI 등 다양한 플러그인을 사용하여 웹 개발을 보다 효율적으로 할 수 있다. jQuery를 사용하는 이유 Ajax 요청을 구현할 때 jQuery를 사용하면 다음과 같은 이점이 있다. 브라우저 호환성 jQuery는 브라우저 호환성이 좋아 다양한 브라우저에서 동일한 결과를 보장한다. 이를 통해 웹 개발자는 브라우저별로 코드를..

[JavaScript] 에이잭스(Ajax)

이번 포스팅에서는 자바스크립트에서 에이잭스(Ajax)에 대하여 공부를 해보고자 한다. Ajax란 Ajax(Asynchronous JavaScript and XML)는 웹 애플리케이션에서 비동기적으로 서버와 통신하여 데이터를 동적으로 로드하고 업데이트하는 기술을 말한다. Ajax를 사용하면 전통적인 웹 페이지에서의 페이지 로드를 줄이고 사용자 경험을 향상시킬 수 있다. Ajax를 사용하는 이유 사용자 경험 개선 Ajax를 사용하면 사용자가 페이지를 새로고침하지 않고도 데이터를 동적으로 로드하고 업데이트할 수 있다. 이는 페이지 로딩 시간을 줄이고 사용자 경험을 개선한다. 서버 부하 감소 Ajax를 사용하면 필요한 데이터만 서버에서 가져올 수 있다. 이는 전체 페이지를 다시 로드하는 것보다 서버 부하를 줄이..

[Front-End] HTML 입력 양식

이번 포스팅에서는 HTML의 입력 양식에 대하여 공부를 해보고자 한다. Form 요소 웹 페이지에서는 form 요소를 사용하여 사용자로부터 입력을 받을 수 있다. 사용자가 입력한 데이터를 서버로 보낼 때에도 form 요소를 사용한다. action 속성은 입력받은 데이터를 처리할 서버 상의 스크립트 파일의 주소를 명시한다. 전달받은 데이터를 처리하는 스크립트 파일을 폼 핸들러(form-handler)라고 한다. method 속성은 입력받은 데이터를 서버에 전달할 방식을 명시한다. 사용자가 form 요소를 통해 입력한 데이터는 action 속성에 명시된 위치로 method 속성의 방식을 통해 전달된다. method 속성을 통해 명시할 수 있는 form 요소의 전달 방식은 GET 방식과 POST 방식으로 나누..

[Front-End] HTML 공간 분할

이번 포스팅에서는 HTML의 공간 분할에 대하여 공부를 해보고자 한다. 블록(block)과 인라인(inline) HTML의 모든 요소는 display 속성을 가지며, display 속성 값으로 블록과 인라인 중 하나를 가진다. 블록(block) 타입의 요소 display 속성 값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다. , , , , , 요소는 display 속성 값이 블록(block)인 대표적인 요소이다. 더보기 예제 p요소는 display 속성값이 블록인 요소입니다. 요소 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소이다. 주로 여러 요소들의 스타일을 한 번에 적용하기 위해 사용된다. 더..

[Front-End] HTML 기본 요소(2)

이번 포스팅에서는 HTML의 기본 요소에 대하여 공부를 해보고자 한다. HTML 링크(Link) 웹 페이지에는 다른 페이지나 다른 사이트로 연결되는 수많은 하이퍼 링크(hyperlink)가 존재한다. 이러한 하이퍼 링크를 간단히 링크(link)라고도 부르며, HTML에서는 태그로 표현한다. HTML 링크 더보기 태그의 href 속성은 링크를 클릭하면 연결할 페이지나 사이트의 URL 주소를 명시한다. 태그는 텍스트나 단락, 이미지 등 다양한 HTML 요소에 사용할 수 있다. target 속성 태그의 target 속성은 링크로 연결된 문서를 어디에서 열지를 명시한다. target 속성값 설명 _blank 링크로 연결된 문서를 새 창이나 새 탭에서 오픈. _self 링크로 연결된 문서를 현재 프레임(frame..

[Front-End] HTML 기본 요소(1)

이번 포스팅에서는 HTML의 기본 요소에 대하여 공부를 해보고자 한다. HTML 스타일 (Style) HTML 요소의 style 속성을 이용하면 CSS 스타일을 HTML 요소에 직접 설정할 수 있다. 하나의 HTML 요소에만 style 속성을 이용하여 스타일을 적용할 수 있다. 배경색 변경 예제 style 속성을 이용한 배경색 변경 글자색 변경 예제 style 속성을 이용한 글자색 변경 글자 크기 변경 예제 style 속성을 이용한 글자 크기 변경 문단 정렬 변경 예제 style 속성을 이용한 문단 정렬 변경 여러 스타일의 설정 위에 변경한 여러 가지 스타일을 한 번에 적용할 수 있다. ex) 예제 style 속성을 이용하여 한 번에 스타일링 하기! style 속성 값에 사용되는 CSS 속성(proper..

[Front-End] HTML 텍스트 요소

이번 포스팅에서는 HTML의 텍스트 요소에 대하여 공부를 해보고자 한다. 제목 (Heading) HTML은 제목을 표현할 수 있는 다양한 크기의 태그를 제공한다. 가장 큰 태그부터 가장 작은 태그까지 다양한 크기로 제목을 표현할 수 있다. 태그의 위아래로는 약간의 여백이 자동으로 삽입된다. 여러 검색엔진은 각 웹 사이트의 내용을 태그를 이용하여 키워드를 수집하고, 그 내용을 파악한다. 따라서 HTML 문서에 포함되는 제목은 태그로 작성해야만 검색엔진에 의해 제대로 검색될 확률을 높일 수 있다. HTML 문서의 제목에 해당하는 부분을 태그나 태그를 사용하면 안 된다. 단락(Paragraph) 단락이란 내용상 끊어서 구분할 수 있는 하나하나의 부분을 의미하며, 문단이라고도 한다. HTML에서는 태그를 이용하..

반응형