프론트엔드 프로그래밍
-
jQuery란? , 코드 형태프론트엔드 프로그래밍/jQuery 2022. 1. 28. 21:39
jQuery - 2006년 John Resig(존 레식)이 디자인한 자바스크립트 라이브러리 - 자바스크립트를 이용해 만든 다양한 함수들의 집합 - 무료 사용 가능한 오픈 소스 라이브러리 - 모든 웹 브라우저에서 동작 jQuery 특징 - 용량이 약 100 KB 가벼움 - 동적으로 HTML이나 CSS 컨트롤 능력 탁월 - 짧고 간결하게 코딩 가능 - 웹 표준과 타 브라우저 호환성 뛰어남 - 편리한 Ajax 호출 방법 - 메소드 체인 방식(여러 메소드를 연결하여 사용)으로 효율적인 코딩 가능, 간결하고 효과적인 코드 수정 가능 - 다양한 플러그인 제공 jQuery 사용 목적 - 쉬운 DOM 처리 - 쉽고 일관된 이벤트 연결 구현 - 쉬운 시각적 효과 구현 - Ajax 기능 쉽게 구현 jQuery 기능 - D..
-
문서 객체 모델, 사용자 정의 객체, 이벤트 처리, JSON 변환프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 22:52
문서 객체 모델 (Document Object Model) - 객체 지향 모델로서 구조화된 문서를 표현하는 형식 - HTML 문서에 접근하기 위한 표준 모델 - 표준은 대부분의 브라우저에서 DOM을 구현하는 기준 - 문서 내의 모든 요소를 정의하고, 각 요소에 접근하는 방법을 제공 - 웹 브라우저에서 보여지는 HTML 문서 태그 요소에 대한 정보와 문서에 대한 여러 가지 속성을 제공 - document 객체의 하위 객체를 이용하여 문서 내에서 일어나는 다양한 기능 제어 DOM 사용 시기 - HTML 문서가 로드되고 나서 파싱 작업을 거쳐 DOM 트리 생성 - DOM 문서가 로드될 때 모든 DOM을 사용할 수 있게 되는 때임 문서 내의 요소 (태그) 제어 메소드 문서 내의 요소(태그) 제어 메소드를 사용하..
-
브라우저 객체 모델 (window, history, location, navigator)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 22:02
브라우저 객체 모델 (Browser Object Model) - 자바스크립트에서는 웹 페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공 - 객체들을 계층 구조로 분류 브라우저 객체 - 웹 브라우저를 대상으로 이루어지 객체 - window 객체 : 창 - document 객체 : 문서 - history 객체 : 웹 브라우저 기록 정보 - location 객체 : 주소 정보 - navigator 객체 : 웹 브라우저 정보 (종류 판별 등) - new 연산자를 통해서 생성하지 않고 그냥 사용하면 됨 - 예 : document.write() 브라우저 객체의 계층 구조 window 객체 - 창에 대한 전반적인 상황을 제어하는 최상위 객체 - 자바스크립트에서 사용되..
-
자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 21:52
자바스크립트 객체 (Object) - 내장 객체 - 브라우저 객체 - 문서 객체 (DOM) - 사용자 정의 객체 자바스크립트 내장 객체 (Built in Object) - 미리 정의되어 있는 객체 - 선언 과정을 통해 객체 변수를 정의해서 사용 - 특별한 경우에만 사용자 정의 객체를 정의하여 사용하고 - 대부분의 경우에는 내장 객체 많이 사용 대표적인 내장 객체 - Date : 날짜와 시간을 처리하기 위한 객체 - Array : 배열을 만들기 위한 객체 - String : 문자열을 다루기 위한 객체 - Math : 수학 계산을 위한 객체 - Event : 발생하는 이벤트에 관한 정보를 제공하는 객체 - Screen : 화면의 해상도, 색상, 크기에 관한 정보를 제공하는 객체 객체 생성 및 사용 예 - 객..
-
제어문 (if, switch, for, while...)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 21:33
제어문 - 프로그램의 흐름을 제어 - 자바 언어와 완전 동일 if(조건식) { 조건의 결과 참일 때 수행되는 문장; 1줄인 경우 괄호({}) 없어도 됨 2줄 이상인 경우 반드시 괄호 있어야 함 } if(조건식){ 조건의 결과 참일 때 수행되는 문장; } else { 조건의 결과 거짓일 때 수행되는 문장; } if(조건식1){ 조건식1의 결과 참일 때 수행되는 문장; } else if (조건식2){ // else로 넘어 왔다는 것은 조건식1에 해당이 안 된다는 의미 조건식1의 결과가 거짓이면서 조건식2의 결과 참일 때 수행되는 문장; } else { // 주의!!!! 여기에 조건식 없음 (조건식은 if 다음에만 적음) 조건식1,2 모두 거짓인 경우 수행되는 문장; } 중첩 if 문 : if문 안에 if문 ..
-
변수 (var, let, const) + 연산자 + 데이터 타입프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 13:35
변수 - 프로그램 실행 중에 값을 저장하기 위한 메모리 내의 임시 기억장소 자바스크립트에서 식별자(변수명, 함수명 등) 명명 규칙 - 시작은 반드시 영문자나 _ 사용. 숫자로 시작하지 않음 - 대소문자 구별 - 키워드 사용할 수 없음 - 특수문자, 공백 사용할 수 없음 - 한글 사용 가능 (영문 사용 권장 - 한글 사용 안 함) - 의미 있는 단어 사용 (예: name, address, age) 변수 선언 - var - let - const - ES6 이후 보완하기 위해 추가된 변수 선언 방식 : let과 const 변수 선언 - 변수를필요한 곳에 사용하면 자동으로 생성되기 때문에 반드시 선언하지 않아도 됨 - 변수의 데이터 타입은 실행 시 결정 (동적 타이핑) - 명시적으로 선언하는 경우에는 예약어 v..
-
데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt)프론트엔드 프로그래밍/JavaScript 2022. 1. 26. 22:40
데이터를 출력하는 방법 - window.alert(내용) : 내용을 알림창(경고창)으로 출력 - console.log(내용) - document.write(내용) : 화면(문서)에 내용 출력 - DOM(문서 객체 모델) 사용 : 예: body - 예제 - write.html body 본문에서 출력 - console.html - console.log 는 option+command+I 눌러야 내용 뜨는거고 document.write는 바로 웹에 출력, alert는 경고 메시지 출력 자바스크립트 코드 입력 시 주의 점 - 대소문자 구별 - 문장 끝에 세미콜론(;) 사용 - 문자열에 따옴표 겹침 오류 주의 - 문자열 큰 따옴표, 작은 따옴표 모두 사용 가능 - document.write(“이름은 홍길동입니다”)..
-
자바 스크립트 (JavaScript)란? + 기본구조 및 사용법프론트엔드 프로그래밍/JavaScript 2022. 1. 26. 22:16
자바 스크립트 (JavaScript) - 정식명칭 ECMA스크립트 (ECMAScript) - ECMA International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어 - ES6 - default parameter - class - arrow function - const - let 자바 스크립트 (JavaScript) - 동적인 웹 페이지를 작성하기 위하여 사용되는 언어 - 웹 표준 프로그래밍 언어 - 모든 웹 브라우저에서 자바스크립트 지원 - 웹 브라우저 뿐 아니라 스마트폰 용 애플리케이션 개발 등 각종 분야에서 능력과 가치를 인정 받고 있음 - 초기에는 브라우저에 내장되어 제한된 기능만 지원하였는데 - 현재 Ajax(Asynchronous JavaScrip..
-
Jumbotron, Grid, button, Table, Image프론트엔드 프로그래밍/Bootstrap 2022. 1. 26. 22:06
Jumbotron - 일종의 대형 전광판 - 특정 콘텐츠나 관심있는 정보를 눈에 띄게 보여주기 위한 큰 박스 - 예제 : jumbotron.html / jumbotron2.html Jumbotron 둥근 모서리 사각형 영역 Jumbotron container 밖에 있는 jumbotron Jumbotron container 밖에 있는 jumbotron jumbotron-fluid 클래스 : 각진 모서리 지능형 서비스 풀스택 과정 Java / MySQL /HTML / CSS / JavaScript / jQuery / Bootstrap / Servlet / JSP / Spring Framework / AI API 커리큘럼 보기 그리드 (Grid) - 격자 모양으로 영역 분할 가능 - 1행을 12 등분해서 비율..
-
컨테이너프론트엔드 프로그래밍/Bootstrap 2022. 1. 26. 21:52
컨테이너 - 레이아웃 최상위 요소로 다른 요소 포함 - - .container : 반응형 고정 폭 컨테이너 - .container-fluid : 뷰포트 전체 폭까지 늘어나는 최대폭 컨테이너 컨테이너 예제 : container.html - viewport 포함 - : css/bootstrap.min.css - : jquery 파일 소스 지정 - : js/bootstrap.min.js 소스 지정 - 순서 주의!!! - jquery 파일 소스 지정이 먼저 와야 함 Bootstrap 색상 container.html Bootstrap Container Bootstrap Container