Life is Good

수콩이의 시선

Coding/JAVASCRIPT 10

[JS] 객체 조작 메서드 (html, text, attr, prop, val, prepend, append)

1. 속성 조작 메서드 : 요소의 속성을 바꿀 때 사용 2. 수치 조작 메서드 : 요소의 너비값 또는 높이 값 같은 수치를 바꿀 때 사용 3. 객체 편집 메서드 : 객체를 생성하거나 삭제 또는 복제할 때 사용 1. 속성 조작 메서드 - html() $("요소 선택").html : 선택한 요소의 하위 요소를 가져옴 $("요소 선택").html("새 요소"); : 선택한 요소의 하위요소를 모두 제거하고 그 위치에 지정한 새요소를 지정 - text() $("요소 선택").text : 선택한 요소가 감싸는 모든 텍스트를 가져옴 $("요소 선택").text("새 택스트") : 선택한 요소의 하위 요소를 모두 제거후, 그 위치에 새 텍스트 생성한다. - attr() : 선택한 요소에 새 속성을 생성하거나 기존의 속..

Coding/JAVASCRIPT 2022.05.20

JavaScript의 이해 = 기본 문법 및 개념 /이벤트/함수(funtion)

JavaScript JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어이다. 최근에는 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 전망이다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상된다. 1. HTML : 웹페이지를 제작..

Coding/JAVASCRIPT 2022.04.09

[AJAX] JSON

Ajax란? AJAX란 비동기 자바스크립트와 XML (Asynchronous JavaScript And XML)을 말합니다. 간단히 말하면, 서버와 통신하기 위해 XMLHttpRequest 객체를 사용하는 것을 말합니다. JSON, XML, HTML 그리고 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있습니다. AJAX의 강력한 특징은 페이지 전체를 리프레쉬 하지 않고서도 수행 되는 "비동기성"입니다. 이러한 비동기성을 통해 사용자의 Event가 있으면 전체 페이지가 아닌 일부분만을 업데이트 할 수 있게 해줍니다. AJAX의 주요 두가지 특징 페이지 새로고침 없이 서버에 요청 서버로부터 데이터를 받고 작업을 수행 Ajax는 언어나 프레임 워크가 아닌 구현하는 방식을 의미합니다. 데이터를 이..

Coding/JAVASCRIPT 2022.04.08

[AJAX] XHR(XMLHttpRequest)

XHR(XMLHttpRequest)이란? XMLHttpRequest(XHR)은 AJAX 요청을 생성하는 JavaScript API입니다. XHR의 메서드로 브라우저와 서버간의 네트워크 요청을 전송할 수 있습니다. XHR은 XMLHttpRequest의 약자로 말 그대로 http 프로토콜을 통해 서버에 자원을 요청하기 위해 사용한다. 페이지 전체를 새로고침 할 필요 없이 원하는 데이터를 url에서 제공받을 수 있다. XMLHttpRequest(XHR) 객체는 서버와 상호 작용하는 데 사용됩니다. 전체 페이지를 새로 고치지 않고도 URL에서 데이터를 검색 할 수 있습니다. 이를 통해 웹 페이지는 사용자의 작업을 방해하지 않고 페이지의 일부만 업데이트 할 수 있습니다. AJAX 프로그래밍에 XMLHttpRequ..

Coding/JAVASCRIPT 2022.04.07

JS/jQuery 자동완성 플러그인 설치

1. 이클립스에서 Help> Install New Software... > 아래링크 넣어서 install한다. [자바스크립트 플러그인] http://oss.opensagres.fr/tern.repository/1.2.1/ 다 체크해주고 NEXT, Accept에 체크하고 설치한다. 2. 설치가 완료되었으면 Restart Now 하겠습니까 창이 뜨는데 확인누른다. 3. 해당 프로젝트에서 마우스 오른쪽 > configure > convert to tern project 클릭한다. browser, jquery 체크해주고 apply and close 한다.

Coding/JAVASCRIPT 2022.04.07

1. Object(객체)

자바스크립트 객체 자바스크립트의 기본 타입(data type)은 객체(object)입니다. 객체란 이름(name)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합입니다. 프로퍼티의 값으로 함수가 올 수도 있는데, 이러한 프로퍼티를 메소드(method)라고 합니다. 예제 var cat = "나비"; // 일반적인 변수의 선언 // 객체도 많은 값을 가지는 변수의 하나임. var kitty = { name: "나비", family: "코리안 숏 헤어", age: 1, weight: 0.1 }; cat // 나비 kitty.name // 나비 자바스크립트에서는 숫자, 문자열, 불리언, undefined 타입을 제외한 모든 것이 객체입니다. 하지만 숫자, 문자열, 불리언과 같은 원시..

Coding/JAVASCRIPT 2022.04.07

[AJAX] Kakao 지도 Javscript API 이용해서 지도그리기

kakao developers 사이트(https://developers.kakao.com/) 에서 카카오아이디로 로그인 한 후 내 애플리케이션에서 추가해준다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 앱이름과 회사명을 적고, 플랫폼으로 Web로컬주소(ex. http://localhost:8181)로 설정해주고, 앱 키(네이티브 앱 키, REST API 키, JavaScript 키, Admin 키)가 설정된것을 볼 수 있다. 키 값 정보 뒷부분은 지웠음 이렇게 생성한 키는 API를 사용할 때 필요하다. 프로젝트 폴더 생성한 파일들 지도 그려..

Coding/JAVASCRIPT 2022.04.04

[AJAX] 한줄 답글 달기(CRUD)

Oracle SQL Developer로 가서 linereply 테이블을 생성해준다. ajax.jsp 사원 테이블 사원목록 실시간 댓글 한줄답글시작 list.jsp 실시간 댓글이 가능합니다. ${replyDto.bunho} ${replyDto.line_reply} 삭제 수정 xhr> [xhr.js] 코드 중복을 막기 위해 xhr.js를 따로 빼서 사용한다. /** * */ function createXHR(){ if(window.XMLHttpRequest) return new XMLHttpRequest(); else return new ActiveXObject("Microsoft.XMLHTTP"); } var xhr = null; function sendRequest(method, url, params, ..

Coding/JAVASCRIPT 2022.04.04