목록전체 글 (7708)

투케이2K

28. (html/css/javascript/jquery) 동적으로 div 레이아웃 생성 및 스타일 속성 지정 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] 동적 추가 /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크기 ..
FrontEnd 2021. 6. 9. 07:37
2. (jquery/제이쿼리) Jquery 사용해 브라우저 사이즈 확인, 스타일 (style) 속성 값 확인 및 변경, 텍스트 (text) 값 확인 및 변경

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. 기본 문법 : $(선택자).동작함수(); 2. css : 자바스크립트에서 css 속성을 확인 및 변경할 때 사용합니다 3...
Jquery 2021. 6. 8. 10:56
36. (javascript/자바스크립트) document 사용해 브라우저 사이즈 확인, 스타일 (style) 속성 값 확인 및 변경, 텍스트 (text) 값 확인 및 변경

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. document.getElementById : 레이아웃에서 특정 태그 값 요소를 찾습니다 2. style : 자바스..
JavaScript 2021. 6. 8. 10:03
35. (javascript/자바스크립트) window onload 상시 대기 및 onclick , addEventListener 사용해 클릭 (click) 이벤트 정의 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. window.onload : 웹브라우저 내의 모든 요소가 준비되면 수행, 상시 대기 의미 2. getElementB..
JavaScript 2021. 6. 8. 08:40
1. (jquery/제이쿼리) 기본 jquery 설명 및 상시 대기 사용해 특정 태그, 특정 아이디 클릭 (click) 이벤트 정의 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : jquery /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요약 설명] 1. Jquery : 자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 자바스크립트 라이브러리입니다..
Jquery 2021. 6. 8. 07:37
34. (javascript/자바스크립트) DOM 개념 및 Document 객체 설명

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [문서 객체 모델(DOM)이란?] ​ ​ ​ [HTML 요소의 선택] ​ ​ [HTML 요소의 생성] ​ ​ [HTML 이벤트 핸들러 추가] ​ ​ [HTML 객체의 선택] /* =========================== */ ​
JavaScript 2021. 6. 7. 20:27
33. (javascript/자바스크립트) strict 모드 사용해 문법 오류 심층 검사 수행 - try catch finally 사용

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. strict 모드 : ECMAScript 5에서 처음으로 소개되었으며, 자바스크립트 코드에 더욱 엄격한 오류 ..
JavaScript 2021. 6. 7. 10:06
32. (javascript/자바스크립트) Promise 사용해 비동기 작업 처리 수행 실시 - 타입별 로직 분류 처리

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. Promise : 자바스크립트 비동기 처리에 사용되는 객체입니다 2. 비동기 처리 : 특정 코드의 실행이 완료..
JavaScript 2021. 6. 7. 09:53
31. (javascript/자바스크립트) setTimeout 사용해 일정 시간 후 작업 실행 및 setInterval 사용해 일정 시간마다 반복 실행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. setTimeout : 일정 시간이 지난 후에 함수를 실행합니다 (일반적으로 일회용, 재귀호출로 반복 실행 가..
JavaScript 2021. 6. 7. 09:12
30. (javascript/자바스크립트) JSON Object Array 객체 생성 및 데이터 파싱 수행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. JSON은 자바스크립트의 객체 표기법을 제한하여 만든 텍스트 기반의 데이터 교환 표준입니다 2. JSON.st..
JavaScript 2021. 6. 7. 08:28
29. (javascript/자바스크립트) try catch finally 구문을 사용해 에러 상황 확인 및 대체 코드 작성 실시 - throw new Error 강제 에러 발생

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. try catch finally 는 자바스크립트에서 에러 구문 발생을 확인할 때 사용합니다 2. try 로직 ..
JavaScript 2021. 6. 7. 07:58
27. (html/css/javascript/jquery) position , float 사용해 div 정렬 및 p 태그 텍스트 중앙 정렬 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : html, css, js, jquery /* =========================== */ ​ /* =========================== */ [소스 코드] ONE TWO /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [요소 설명] 1. font-family : 폰트 표시 형태 스타일 지정 2. width : 가로 크..
FrontEnd 2021. 6. 6. 11:31
28. (javascript/자바스크립트) String fromCharCode 사용해 유니코드 데이터를 문자로 표현실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. fromCharCode : 일련의 유니코드에 해당하는 데이터를 문자로 표현합니다 */ /* ==========..
JavaScript 2021. 6. 6. 11:07
27. (javascript/자바스크립트) length 데이터 길이 확인, trim 공백 제거, toUpperCase 대문자 변경, toLowerCase 소문자 변경

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. length : 데이터 길이를 확인할 때 사용합니다 (문자열, 배열 길이) 2. trim : 문자열 양쪽 끝 ..
JavaScript 2021. 6. 6. 10:52
26. (javascript/자바스크립트) indexOf 문자 포함 및 인덱스 위치, startsWith 및 endsWith 특정 문자 시작 종료, includes 문자 포함 확인

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. indexOf : 특정 문자가 포함되는 인덱스 위치값을 반환해줍니다 (없으면 -1값) 2. startsWith..
JavaScript 2021. 6. 6. 10:40
25. (javascript/자바스크립트) slice 사용해 문자열 및 배열 데이터 복사 (copy) 수행 실시 - length 길이 확인

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. slice : begin부터 end 전까지의 복사본합니다 2. slice(시작, 종료전) 까지 의미로 사용합니..
JavaScript 2021. 6. 6. 10:07
24. (javascript/자바스크립트) new Date 사용해 현재 날짜 연, 월, 일, 시, 분, 초, 요일 확인 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. new Date() : 로컬 PC에 설정된 현재 날짜 및 시간 데이터를 얻어옵니다 2. 자바스크립트에서 월(m..
JavaScript 2021. 6. 6. 09:54
23. (javascript/자바스크립트) Math floor , Math Random 을 사용해 1부터 10까지 랜덤 정수값 출력 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. Math.floor : x와 같거나 작은 수 중에서 가장 큰 정수를 반환합니다 2. Math.Random : ..
JavaScript 2021. 6. 6. 08:45
22. (javascript/자바스크립트) Math 객체 사용해 min , max , abs , round , ceil , floor , trunc 값 출력 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체입니다 2..
JavaScript 2021. 6. 6. 08:30
21. (javascript/자바스크립트) new Array 사용해 배열 데이터 복사 (copy) 수행 실시

/* =========================== */ [ 개발 환경 설정 ] ​ 개발 툴 : Edit++ 개발 언어 : javascript /* =========================== */ ​ /* =========================== */ [소스 코드] /* =========================== */ ​ /* =========================== */ [결과 출력] ​ /* =========================== */ ​ /* =========================== */ [요약 설명] ​ /* [JS 요약 설명] 1. new Array : 자바스크립트에서 배열을 생성할 때 사용합니다 2. new Array(배열) : 배열을 생..
JavaScript 2021. 6. 6. 03:51
Prev 1 ··· 342 343 344 345 346 347 348 ··· 386 Next