본문 바로가기

전체 글140

[jQuery] jQuery 정의 및 함수 jQuery란? 10년전의 JavaScript 코드는 못 생기고, 웹 브라우저마다 코드를 따로 작성해야 하는 번거로움이 있었다. 이 두 가지의 문제점을 해결하기 위해 나온 JavaScript 기반의 라이브러리가 jQuery이다. jQuery는 기존의 JavaScript 코드를 간결화, 경량화하고 하나의 코드로 모든 웹 브라우저에 호환을 할 수 있다는 큰 장점이 있다. jQuery 문법 우리는 JavaScript에서 HTML 태그에 접근해 값을 조작하기 위해서 DOM 객체를 이용했지만 jQuery에서는 $('tag name') 이라고 작성하면 해당 태그에 접근해서 값을 가져오거나 조작할 수 있다. 예를 들어, p 태그의 내용을 변경하는 다음과 같은 JavaScript 코드가 있다고 가정하자. HELLO W.. 2023. 2. 3.
[JS] JSON의 정의와 함수 사용 방법 JSON 이란? 웹 브라우저 위에서 동작하고 있는 웹 사이트 또는 웹 애플리케이션(이하 Client)은 서버에 데이터를 요청하고 원하는 데이터를 받을 수 있는데 이 때 데이터의 파일 포맷은 여러가지가 있는데 그 중 하나가 JSON 이라고 할 수 있다. JSON의 장점 ㆍClient와 Server가 데이터를 주고 받을 때 사용할 수 있는 가장 간단한 파일 포맷 ㆍClient와 Server가 데이터를 주고 받을 때 직렬화(serialize) 하기 위해 사용 ㆍ텍스트를 기반으로 하고 가독성이 좋음 ㆍKey와 Value의 쌍으로 이루어져 있음 ㆍ프로그래밍 언어나 플랫폼에 상관없이 사용할 수 있음 직렬화 웹 사이트에 토끼라는 Object가 존재한다고 가정하자. 이 Object를 JSON 문자열로 변환하는 것을 직.. 2023. 2. 2.
[JS] XMLHttpRequest 웹사이트(Client)가 데이터를 요청(Request)하면 서버에서는 적절한 데이터를 Client에게 보내줘야한다. 데이터를 보내줄 때는 서버와 통신을 해야 하는데 데이터를 쉽게 다룰 수 있는 방법이 XMLHttpRequst이다. XMLHttpRequst는 웹 어플리케이션을 개발하는 방법 중 하나인 AJAX(Asyncronous Javascript And Xml) 프로그래밍에 많이 사용되기도 하는 통신 객체이다. XMLHttpRequest에 대한 오해와 진실 Q. 객체 이름에 XML이 들어가니까 XML 데이터만 가져올 수 있나? A. 이름에 XML이 들어가지만 XMLHttpRequst는 XML 뿐만 아니라 모든 종류의 데이터를 가져올 수 있다. Q. 그렇다면 왜 XML이라는 이름을 쓰나? A. 생성 당시.. 2023. 2. 1.
[JS] 특정 <tr>, <td> 값에 접근하기 위와 같은 테이블이 있고, 계산결과 버튼을 클릭하면 alert 창으로 결과값을 알려주는 프로그램을 작성해보려고 한다. 특정 의 특정 값에 접근하면 간단하게 만들 수 있는 프로그램이다. 1. 간단한 CSS가 포함된 테이블 만들기 첨자 a b a x b 0 5 33 1 12 14 2 18 32 태그의 id 프로퍼티에 id 값을 주고, thead 행을 제외한 각 행에 있는 계산결과 버튼을 누르면 onclick 이벤트 처리기가 발생 하도록 했다. 함수의 파라메터로는 행 번호를 주면 되겠다. 2. JS코드로 특정 의 특정 값 얻어내기 table 변수에 를 담고, table의 rows를 rowList에 담으면 HTMLCollection 타입으로 담기게 된다. 이 중에서 접근하고자 하는 행을 row 변수에 담은 후 .. 2023. 1. 31.
[JS] JS를 이용하여 TABLE 만들기 위와 같은 테이블 형식의 데이터를 만들기 위해서는 HTML의 테이블 태그를 이용할 수 있지만 오늘은 JS를 이용하여 위와 같은 테이블을 만들어보려고 한다. 1. Internal 방식으로 테이블에 간단히 CSS 추가 2. JS 코드로 테이블 뼈대 만들기 여기서 createElement()는 말 그대로 HTML 요소를 생성하는 것인데 메소드의 파라메터로 HTML 태그 이름을 문자열 형식으로 넣어주면 된다. 그렇게 생성한 요소들을 변수에 담은 후에 appendChild()를 이용해서 테이블의 자식 요소들로 thead와 tbody를 생성해준다. 관리자 도구에서 element를 확인해보면 table의 뼈대가 잘 만들어진 것을 확인할 수 있다. 3. 테이블에 행과 데이터를 추가하기 // thead에 속하는 부분 l.. 2023. 1. 31.
[JS] onkeydown, onkeypress 차이점 키보드에서 키를 눌렀을 때 이벤트를 발생시키는 이벤트 처리기가 있다. onkeydown / onkeypress 인데 두 이벤트 처리기의 차이점을 간단하게 정리하려고 한다. 우선, 차이점을 알아보기 위해 input 태그를 하나 생성한다. 그리고 name 프로퍼티 값이 title인 input 태그에서 키를 눌렀을 때 어떤 키가 눌렸는지 확인하기 위해 keycode를 console.log()로 출력하는 script 코드를 작성한다. onkeydown input 태그에 abcdABCD를 입력했을 때 console에는 65(A),66(B),67(C),68(D)가 순서대로 반복돼서 찍히는 것을 확인할 수 있다. 소문자 a의 ASCII CODE값은 97인데 대소문자와는 상관없이 모두 대문자의 ASCII CODE값을 .. 2023. 1. 31.
[JSP] JSP에 값을 넘겨주는 여러가지 방법 HTML 에서 넘긴 name(이름)과 age(나이)를 받아서 변수에 담은 후, 콘솔에 출력해보려고 한다. name과 age는 3가지 방법으로 넘겨보려고 한다. 1. form 태그로 값 넘기기 1-1. 소스코드 form 태그로 값 넘기기 1-2. 결과 위와 같이 순수 input 태그가 2개 있고 input 태그는 각각의 name 프로퍼티로 구분된다. form 태그로 값을 넘길 때에는 type 프로퍼티 값이 submit인 태그가 하나 존재해야 된다. 2. a 태그로 값 넘기기 2-1. 소스코드 a 태그로 값 넘기기 JSP에 값을 넘기려면 클릭하세요. 2-2. 결과 a 태그로 값을 넘기는 방법은 잘 사용하지 않을 것 같다. 3. JS로 값 넘기기 3-1. 소스코드 JS로 값 넘기기 3-2. 결과 JS로 값을 .. 2023. 1. 31.
[JAVA-120902] 문자열 계산하기 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 링크를 클릭하면 해당 문제로 이동합니다. 1. 접근하기 이 문제는 사실 입출력 예시만 잘 확인하면 너무나 쉽게 해결할 수 있는 문제이다. 문자열 my_string은 '피연산자1 연산자 피연산자2' 로 구성되어 있는데 이 문자열을 split(" ")를 이용하여 문자를 분리한 후, String 배열에 담아서 풀어나가면 된다. TO-DO 1. split 메소드를 이용해서 문자열을 피연산자1, 연산자, 피연산자2로 구분하기 2. for문을 이용해서 인덱스 번호가 1, 3, 5, ... 에 속하는 문자열이 +,- 인지.. 2023. 1. 30.
[JS] input type="checkbox" 일 때 이벤트 핸들러 활용 input type이 checkbox 일 때, JS의 이벤트 핸들러를 활용해 합계 금액이 자동으로 변경되는 작고 소중한 웹 애플리케이션을 만들어보았다. HTML 소스코드 체육관 이용 요금 1 기본 사용료(4시간) 40,800원 야간조명(20,000원) 배구네트 x 2장(4,000원) 배구공 x 10(20,000원) 합계금액:원정​ JS 소스코드 우선, 이벤트 핸들러 방식 중 DOM을 조작하는 방식인 getElementsByName을 이용해 check 변수에 태그 name이 'option' 인 input 태그들을 담았다. 여기서 check 변수의 타입은 console.log()를 이용해서 확인해보면 NodeList라는 것을 알 수 있다. NodeList는 JS의 API가 아닌 Web Browser의 API.. 2023. 1. 30.
[JAVA-120913] 잘라서 배열로 저장 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 링크를 클릭하면 해당 문제로 이동합니다. 1. 접근하기 보통 문자열을 자를 때에는 split()을 이용하는데 이 문제에서는 주어진 int타입의 n만큼 문자를 잘라서 배열에 담으라고 했으므로 split() 보다는 substring()을 이용하는게 맞는것 같다고 판단되어 해당 방법으로 문제를 해결했다. TO-DO 1. 문제에서 주어진 반환 타입이 배열인데 몇 개의 원소를 담을건지 애매하므로 List에 substring 값을 담아서 추후에 배열로 변환한다. 2. 최종적으로 잘라낸 문자열의 길이가 0보다 클 때까지 .. 2023. 1. 27.

티스토리툴바