제목 글자 태그 > 박스처럼 작성한 순서대로 위에서 아래로 쌓이는 형태 제목 태그 h1 ~ h6 : 숫자가 뒤로 갈수록 글자 사이즈가 줄어듬, 타이틀에 사용, 볼드체 --> Header-1 Header-2 H
결과는 요로코롬 나옴
이미지를 나타내주는 태그 단독 태그 글자와 같이 나열되는 성격, 이미지 단락을 구분을 지을 때 <img src="이미지 파일의 경로 또는 url" alt="대체문자">alt : 주석문, 이미지가 안보일 때를 대비한 대체문자, html5 기본 규칙! 이미지의
인터넷 프로그래밍 이란?\-하이퍼 텍스트(HyperText) 프로토콜(protocol)을 활용하여 월드 와이드 웹(www:World Wide Web)을 통해 정보를 공유하는 환경을 구현하는 것하이퍼텍스트(HyperText)\-문서의 개체(텍스트, 이미지, 영상 등)가
태그(tag)\-html 문서의 시작과 종료요소(Elements)\-중첩 가능, 위계 존재속성(Attributes)\-요소에 대한 추가 정보 제공시맨틱(Semantic)\-브라우저와 개발자에게 의미 설명에밋(Emmet)\-빠른 코딩을 위한 플러그인
a 태그 : 웹페이지의 연결, url연결 시 사용 다른 페이지의 전환 (메뉴표현) / 글자와 같이 나열되는 성격 링크연결 시 기본 스타일 (글자색, 밑줄, 손모양의 커서) / 브라우저내에서 바로 전환 href = h + ref : h : hypertex
HTTP 메시지는 일반 텍스트이므로, 권한이 없는 당사자가 인터넷을 통해 쉽게 액세스하고 읽을 수 있습니다. 반면, HTTPS는 모든 데이터를 암호화된 형태로 전송합니다. 사용자가 민감한 데이터를 제출할 때 제3자가 네트워크를 통해 해당 데이터를 가로챌 수 없음을 확신
스타일 우선순위 : 중요 스타일은 !important 붙임 , 우선순위로 적용
스타일 상속 여러 태그들은 서로 포함 관계가 있다. 포함하는 태그를 부모 요소라 하고, 포함된 태그를 자식 요소라고 한다. 자식요소에 별도로 스타일을 지정하지 않으면 부모요소에 있는 스타일의 속성이 자식요소로 전달 되는데 이것을 '
넓이 width 높이 height 속성 박스 모델에서 콘텐츠 영역의 크기를 지정할 때 넓이와 높이 속성을 지정스타일 속성에 대한 형식 넓이 / width: 크기 | 백분율 | auto 높이 / height: 크기 | 백분율 | auto 속
테두리 관련 속성 CSS 속성 테두리 두께 border-width, 테두리 스타일 border-style, 테두리 색상 border-color 을 테두리 속성이라고 함다양한 테두리 스타일 속성 none : 테두리가 나타나지 않음 기본설정
업로드중..
type="text" : 텍스트 입력 받기 가로로 짧은 글을 입력 받을 경우에 사용, 아이디, 이름, 주소 입력 받을 떄 주로 사용 type="hidden" : 보이지 않는 값 화면의 폼에서는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송되는 요소
type="checkbox": 체크박스 선택하기 여러개 선택가능, 선택한 체크박스의 value 값을 서버로 전송, 사용자가 선택하기 위한 항목으로 다중 체큳가 필요할 떄 주로 사용, 여러개의 항목을 2개이상 체크하는 것도 가능 php에서는 checkbo
type="radio" : 라디오 박스 선택하기 태그 속성중 name 값을 똑같이 입력하면 여러 데이터 중에서 하나를 선택 할 수 있음 짧은 항목에 대한 선택이 필요할 때 주로 활용되며, 반드시 한가지 항목을 선택해야 할때 사용
type="file" : 사용자 컴퓨터에서 특정 파일을 첨부 파일 첨부시에 form 태그에 enctype="multipart/form-data" 속성 사용. 서버는 업로드 파일의 제한 용량이 있으니 크기가 작은 파일로 테스트 할 것.
textarea 장문의 글자를 입력 받을 때 주로 사용되는 글자박스 이메일 양식에서 메일 내용이나 게시판의 글 내용을 적을 때 사용
업로드중..
업로드중..
업로드중..
박스의 각 요소 위치를 정하는 방법 상대위치 좌표 : 태그 요소를 입력한 순서를 통해 상대적으로 위치를 지정 절대위치 좌표 : 태그 요소로 만들어진 x좌표와 y좌표를 설정해 절대 위치를 지정 postition 속성 stat
박스의 각 요소 위치를 정하는 방법 상대위치 좌표 : 태그 요소를 입력한 순서를 통해 상대적으로 위치를 지정 절대위치 좌표 : 태그 요소로 만들어진 x좌표와 y좌표를 설정해 절대 위치를 지정 postition 속성 stat
업로드중..
업로드중..
업로드중..
<video> 태그를 이용한 영상 파일 넣기 html5에서 영상을 실행시키기 위해 사용, 비디오와 같은 영상 스트리밍을 재생할때 사용.controls = 비디오 재생 컨트롤 막대표시, 재생 중에는 화면에 컨트롤 막대가 표시되지 않지만, 화면 위로 마우
<iframe> 태그를 이용한 웹문서에 유튜브 영상 불러오기 iframe : 내부프레임 / html문서안에 html문서가 존재 긴 내용의 문서, 유투브영상 등 큰 용량의 영상을 간단하게 링크로 가져올때 많이 사용width = 넓이를 지정,
scale(x, y) : 지정한 크기만큼 확대와 축소를 함. 값이 1보다 작으면 축소되고, 1보다 크면 확대 됨. 1==100% 0.9 < 1 < 1.1 scaleX(X) : x축에 대한 확대, 축소 scaleY(Y
3차원 변형 translate3d(x축 y축 z축) 괄호 사이에서 x y z 축에 대한 수치를 입력하면 x y z 축으로 이동 1보다 크면 확대 1=100px
translateX : 괄호 사이에서 X축에 대한 수치를 입력하면 X축으로만 이동 translateY : 괄호 사이에서 Y축에 대한 수치를 입력하면 Y축으로만 이동 translateZ : 괄호 사이에서 Z축에 대한 수치를 입력하면 Z축으로
rotate3d(각도) 지정한 각도만ㅋ큼 시게방향(deg) 또는 시계반대방향(-값 deg)으로 회전 이때 x y z 축에 대한 방향성을 조정할 수 있음
transition-duration 변형속성 기본 : 부드럽게 반응하는 결과가 나타남 트랜지션 속성과 함께 사용할 수 있는 스타일 속성 위치속성 : top, left, bottom, rigth 크기 속성 : width, h
transition transition : 모든 transition 속성을 한번에 사용. transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정. transition-duration : 몇 초 동안 재생할지 지정.
애니메이션 속성 @keyframes<@keyframes> 속성 : 애니메이션이 변경되는 지점을 설정 '키프레임' 애니메이션의 시작 지점을 설정할 때 해당 지점. CSS 에서는 애니메이션이 변경되는 모든 지점을 설정. 키프레임 안에서 시간에
display: flex속성이 적용된 요소는 flex container가 되고, flex contatiner의 자식 요소는 자동적으로 flex item이 됩니다. flex container 속성 : flex-direction, flex-wrap, justi
oreder 속성 플렉스 항목의 배치 순서 바꾸기 소스코드에 입력한 순서대로 주축을 따라 배치되지만 order 속성을 이용하면 배치 순서를 바꿀 수 있음 order : 1 | 숫자order값이 0이라면 소스에 입력한 순서대로 배치
// 1. 한줄 주석/\* \*/ 2. 여러줄 주석자바 스크립트 실행 결과 보기 1) alert 함수 이용, 모달 창(닫기 전까지 다른 작업 불가능)으로 결과 보기 - 확인을 눌러야 이후의 코드가 실행이 된다. 2) consol.log() 콘솔
간단한 입출력 let : 변수 선언시 사용하는 키워드 변수 : 어떠한 값을 저장하는 곳변수를 사용하는 목적 : 어떤 값을 저장하지 않으면 다음줄에서 사용하지 못함.prompt() : 사용자에게 입력 받기document.write() : 웹 브라우저 화면에 출
자료 data : 프로그래밍에서 프로그램이 처리할 수 있는 모든 것 자료형 data type : 자료 형태에 따라 나눠 놓은 것 기본 자료형 : 문자열 string, 숫자 nmber, 불 boolean 기본 자료형 : 문자열 string
기본 자료형 : 숫자 number 자바 스크립트는 정수와 실수의 구분이 없음 따옴표 없이 사용, 숫자에 따옴표를 붙이면 문자열 자료형이 됨. 숫자 연산자 \+ : 더하기 \- : 빼기 \* : 곱하
기본자료형 : 불 boolean 참(true)과 거짓(false) 두 가지 값만 가지는 자료형비교 연산자=== : 양쪽이 같다!== : 양쪽이 다르다\> : 왼쪽이 더 크다< : 오른쪽이 더 크다\`>= : 왼쪽이 더 크거나 같다<= : 오른쪽이
템풀릿 문자열 문자열 결합 연산자를 사용하지 않고, 문자열안에 바로 표현식을 사용 할 수 있음. 쌍따옴표나 홑따옴표 대신 백틱 을 사용
변수 : 값을 지정할 때 사용하는 식별자 모든 자료형을 저장할 수 있음변수는 다음 2단계를 거쳐 사용할 수 있음 1\. 변수를 선언 2\. 변수를 초기화변수를 만드는 것을 '변수를 선언한다'라고 표현 변수는 var 또는
상수 const 는 변경하지 않을 데이터를 선언 const는 이미 선언한 상수에 대해 중복해서 선언할 수 없고, 상수의 값을 재지정할 수도 없음.변경할 가능성이 있으면 변수를 사용하고, 그렇지 않다면 상수를 사용. 다른 언어보다 상수를 많이 사
숫자 자료형으로 변환하기 다른 자료형을 숫자 자료형으로 변활할 때는 Number() 함수를 사용
복합 대입 연산자 : 대입 연산자(=)와 다른 연산자를 함께 사용하\+= : a += 1 : a = a + 1 \-= : a -= 1 : a = a - 1 = : a = 1 : a = a \* 1 /= : a /= 1 : a = a
증감 연산자 : 복합 대입 연산자를 약간 간략하게 사용한 형태a++ : 기존의 변수 값에 1을 더함. 후위 \++a : 기존의 변수 값에 1을 더함. 전위 a-- : 기존의 변수 값에 1을 뻄. 후위 \--a : 기존의 변수
비교 연산자 a == b : a와 b가 같으면 true, 같지 않으면 false. 데이터 타입은 비교하지 않음 a === b : a와 b가 같고 데이터 타입이 같으면 true, 같지 않으면 false.
단항 연산자 : 피연산자가 하나 이항 연산자 : 피연산자가 두개논리 연산자논리곱, 논리합이라고 부르는 이유 : 초기 언어들은 true를 1, false를 0으로 사용
코드는 위에서 아래로 차레차레 실행되지만 조건문을 사용하면 조건에 따라 코드를 실행할 수도 있고 실행하지 않을 수도 있음. 이처럼 코드가 실행되는 흐름을 변경하는 것을 '조건분기' 라고 함.if 조건문 : 조건에 따라 코드를 실행하거나 실행하지
if else 조건문 : 서로 반대되는 상황을 표현하는 구문 else구문을 if 조건문 바로 뒤에 줕여서 사용하는 조건문 if 문을 중복 사용하는 것 보다 부하가 줄어듬. 기본형 : if (불 값이 나오는 표현식) {
switch 조건문switch 조건문의 괄호 안에는 비교할 값을 입력. 이때 입력한 값을 기준으로 특정 코드를 실행 입력한 표현식과 case 키워드 옆의 표현식이 같다면 case 키워드 바로 다음에 오는 문장을 실행 일반적으로 CASE 뒤에는
응용 예제 : elseif 조건문 태어난 연도를 입력받아 띠를 출력
반복문반복작업을 할 때 사용기본형 for : 특정 횟수 만큼 반복하고 싶을때 사용for ...in 반복문for in 반복문은 key값 index값에 접근할 때 사용한다
i=20인 초기값 실행 > 조건식 실행 참,거짓 구분 > 참이면 if문 실행 > 차감식 실행 > 조건식부터 반복 > 거짓이면 종료
배열 array 여러 자료를 하나로 묶어서 사용할 수 있는 특수한 자료형. 여러개의 변수를 한번에 선언해 다룰 수 있는 자료형 배열은 대괄호[] 을 사용해 생성하고 내부의 값을 쉼표(,) 로 구분해 입력 배열 내부에 들어있는 값을 요소 element 라고 함. 하나의
while 반복문 if 조건문과 형태가 매우 비슷, 다른 점은 문장을 한번만 실행하고 끝내는 것이 아니라 불 표현식이 true면 계속해서 문장을 실행한다는 점while 반복문의 경우 조건이 변하지 않는다면 무한히 반복 실행하므로 조
while 문으로 배열 출력하기 while 반복문과 for 반복문은 서로 대체해서 사용할 수 있음.보통 특정 횟수 반복할 때 for, 조건에 큰비중이 있을때는 while. 예) 특정 시간동안 어떤 데이터를 받을 때 까지
정수를 입력 받아서 그 횟수만큼 'hello' 를 출력하는 프로그램을 구현하세요 0 이하의 값이 입력되면 '잘못된 입력입니다.' 라는 오류 메시지를 출력하세요.
break switch문이나 반복문을 벗어날 때 사용하는 키워드 while (true) { break; }
continue 키워드 반복문 안의 반복을 멈추고 반복문의 처음으로 돌아가 다음 반복 작업을 진행
continue 키워드 활용 코드의 가독성을 위해, 다른 코드로 대체 가능한 경우 사용하지 않는게 좋음
배열 뒷 부분에 요소 추가하기 배열 뒷부분에 요소를 추가할 때는 push() 메소드 사용 배열.push(요소)
배열 뒷 부분에 요소 추가하기 : 인덱스를 사용해 배열 뒷부분에 요소 추가하기배열의 길이는 고정이 아니기 때문에 인덱스 번호를 사용해서 강제로 요소를 추가할 수 있음.
배열 요소 제거하기 1) 인덱스를 기반으로 제거하는 경우 2) 값을 기반으로 제거하는 경우인덱스를 기반으로 제거하는 경우 배열의 특정 인덱스에 있는 요소를 제거할 때는 splice() 메소드를 사용 배열.splice(인덱스,
배열의 특정 위치에 요소 추가하기 splice() 메소드 사용 2번째 매개변수에 0을 입력하면 splice() 메소드가 요소를 삭제하지는 않고, 3번째 매개변수에 있는 요소를 추가함배열.splice(인덱스, 0, 요소); 추가하고자
기본자료형과 참조자료형의 차이.참조자료형은 Object class 를 상속받는 "객체"이다.기본자료형은 메모리값이 정해져 있고 참조자료형은 사용하는 것에 따라 할당해야하는 메모리의 크기가 달라진다.기본자료형은 null을 허용하지 않지만, 참조자료형의 기본 값은 null
함수 : 코드의 집합. 함수를 실행하면 여러 코드를 묶어서 실행할수 있고, 필요할 때마다 호출하여 반복적으로 사용 가능함수를 사용하면 좋은 점 1\. 반복되는 코드를 한번만 정리해놓고 필요할 때마다 호출하므로 반복작업을 피할 수 있다.
용어 정리 인수 : 함수를 호출할 때 괄호 내부에 여러가지 자료를 넣는 것 매개변수 : 함수를 정의할때 전달받을 인수를 정의하는 것 리턴 값 : 함수를 호출해서 최종적으로 나오는 결과 매개변수와 리턴값 매개변수 : 함수
동일한 이름의 함수가 존재 선언적 함수의 경우 동일한 이름의 함수가 존재하면 뒤에 선언된 함수가 실행이 됨.
매개 변수가 있는 함수 정의문
데이터를 반환하고 강제 종료하는 return문, 매소드 중간에 return을 사용하지 않는다 마지막에 사용한다.return 의 역할 1) 데이터를 반환 2) 함수의 강제 종료 (반환값이 없어도 됨)
기본적인 함수 예제 : a부터 b까지 더하는 함수
나머지 매개변수 rest parameter가변 매개변수 함수 호출할 때 매개변수의 개수가 고정적이지 않는 함수. 자바스크립트에서는 이러한 함수를 구현할 때 "나머지 매개변수"를 사용. 함수 매개변수 앞에 마침표 3개(...)를 입력하면 매개변
기본 매개 변수 매개 변수에 기본 값을 지정, 매개 변수가 들어오지 않는 경우에 기본 값으로 대체 기본 매개변수와 일반매개변수를 섞어서 사용할 경우에는 기본 매개변수가 오른쪽으로 가야됨
전개 연산자 spread operator 배열을 전개해서 함수의 매개 변수로 전달 전개 연산자는 배열 앞에 마침표 3개(...)를 붙이는 형태로 사용.
재귀함수 호출 함수 정의문 내에서 작성한 코드로 자기자신을 다시 호출하는 것
콜백함수 callback function다른 함수에게 전달되어 나중에 실행되도록 하는 함수를 말함. 매개변수로 전달하는 함수. 자바스크립트는 함수도 하나의 자료형이므로 매개변수로 전달 할 수 있음.
콜백함수를 활용하는 함수 : forEach() 매서드 배열에 활용이 가능한 메서드, 배열이 갖고 있는 함수(매서드)로서 단순하게 배열 내부 요소를 사용해서 콜백함수를 호출 배열이 가지고 있는 메소드 중 콜백함수를 활용하는 메서드는 아래와 같은 형태의 콜백함수를
콜백함수를 활용하는 함수 : map() 메서드 배열이 갖고 있는 메서드 콜백함수에서 리턴한 값들을 기반으로 새로운 배열을 만듬
콜백함수를 활용하는 함수 : filter() 콜백함수에서 리턴하는 값이 true 인 것들만 모아서 새로운 배열을 만듬 \-> 콜백함수의 리턴 타입이 불 형 이어야 함
화살표 함수 ES6에 추가된 내용으로 '=>'를 이용하여 함수를 간결하게 표현할 때 사용1) function 키워드를 생략하고 2) 부등호 '='과 '>'를 합쳐서 코딩하고 3) 항상 익명함수 형식으로 표현 4) 단일
타이머 함수 : 특정 시간 이후에 콜백함수를 호출할 수 있는 함수 setTimeout(함수, 시간) : 특정 시간 후에 함수를 한번 호출 setInterval(함수, 시간) : 특정 시간마다 함수를 호출타이머를 종료하고 싶을때clearTimeout(타이
스코프 scope : 변수가 존재하는 범위 같은 단계의 스코프에서 동일한 이름의 변수가 있으면 충돌 스코프 단계를 변경하는 방법은 중괄호를 사용해서 블록을 만들거나 함수를 생성해서 블록을 만듬블록 내부에서 같은 이름으로 변수를 선언
엄격모드 strict mode 'use strict' 문자열을 읽은 후 부터는 코드를 엄격하게 검사 초기의 자바스크립트는 간단한 보조 프로그램을 만드는게 목적이라 어느정도 오류가 있어도 정상적으로 작동 하지만
700원 짜리 음료수를 뽑을 수 있는 자판기 프로그램을 구현하세요 돈을 넣으면 몇 잔의 음료수를 뽑을수 있는지 그리고 잔돈은 얼마인지 모든 경우의 수를 출력 함수 정의 반환값 : 없음 함수 이름 : vendingMach
객체 object 자바스크립트에서 여러 자료를 다룰때 사용 여러개의 데이터를 하나의 변수에 저장하는 방식은 배열과 비슷하지만 인덱스를 사용하지 않고 키를 사용하는 것이 다름.let studentName, studentAge, stu
동적으로 객체 속성 추가 / 제거 객체를 처음 생성한 후에 속성을 추가하거나 제거하는 것
사용자 정의 객체 객체 리터럴 object literal 과 객체 생성자 함수 object constructor function으로 만들 수 있다.객체 리터럴 object literal -> 동일한 객체 생성시 코드가 길어짐객체 리터럴에 의한 객체 생성
선택자 선택자는 HTML 요소를 선택하여 가져온다직접선택자전체 선택자 전체(Universal ' \* ' ) 선택할 때 사용 즉 이 선택자를 사용하면 현재 HTML의 모든 태그를 선택, body script 모든 태그들아이디 선택자
인접 관계 선택자 직접 선택자로 요소를 먼저 선택하고 그 다음 선택한 요소와 가까이에 있는 (이전과 다음 요소) 요소를 선택할 때 사용부모 요소 선택자 선택한 요소를 감싸고 있는 부모 요소를 선택 기본형 : $("요소선택").pa
인접 관계 선택자 : 하위 요소 선택자 기준 요소로 선택한 하위 요소만 선택 기본형 : $("기준 요소 선택1 요소 선택 2") ex) $(" 선택한 요소에 스타일을 적용하는 방법 1) 인자 값을 사용해 css 속성과
인접 관계 선택자 : 자식 요소 선택자 선택된 요소를 기준으로 지정한 자식 요소만 선택
인접 관계 선택자 : 형(이전) / 동생(다음) 요소 선택자 전체 형 요소 선택자는 선택한 요소를 기준으로 이전에 오는 전체 형제 요소 선택 전체 동생 요소 선택자는 선택한 요소를 기준으로 다음에 오는 전체 형제 요소 선택
인접 관계 선택자 : 형(이전) / 동생(다음) 요소 선택자 전체 형 요소 선택자는 선택한 요소를 기준으로 이전에 오는 전체 형제 요소 선택 전체 동생 요소 선택자는 선택한 요소를 기준으로 다음에 오는 전체 형제 요소 선택업로드중..
인접 관계 선택자 : 전체 형제 요소 선택자 선택한 요소의 모든 형제 요소를 선택
인접 관계 선택자 : 범위 제한 전체 형 / 동생 요소 선택자 선택한 요소를 기준으로 형제 요소 중 지정한 범위 내의 전체 형 요소 또는 동생 요소를 선택
인접 관계 선택자 : 상위 요소 선택자 선택한 요소를 기준으로 모든 상위 요소를 선택하거나 상위 요소 중 선택하고자 하는 요소만 선택할 때 사용
인접 관계 선택자 : 가장 가까운 상위 요소 선택자 선택한 요소를 기준으로 가장 가까운 상위 요소만 선택할 때 사용
탐색 선택자기본 선택자로 선택한 요소 중 원하는 요소만 한 번 더 탐색해서 좀 더 정확하게 선택 가능 1) 위치 탐색 선택자 : 배열의 인덱스(index)를 사용해 선택 2) 속성 탐색 선택자 : 배열에 담겨진 요소 중 지정된 속성과 값으로 선
탐색 선택자 기본 선택자로 선택한 요소 중 원하는 요소만 한 번 더 탐색해서 좀 더 정확하게 선택 가능1) 위치 탐색 선택자 : 배열의 인덱스(index)를 사용해 선택2) 속성 탐색 선택자 : 배열에 담겨진 요소 중 지정된 속성과 값으로 선택위치탐색 선택
탐색 선택자 기본 선택자로 선택한 요소 중 원하는 요소만 한 번 더 탐색해서 좀 더 정확하게 선택 가능1) 위치 탐색 선택자 : 배열의 인덱스(index)를 사용해 선택2) 속성 탐색 선택자 : 배열에 담겨진 요소 중 지정된 속성과 값으로 선택위치탐색 선택
탐색 선택자 기본 선택자로 선택한 요소 중 원하는 요소만 한 번 더 탐색해서 좀 더 정확하게 선택 가능 1) 위치 탐색 선택자 : 배열의 인덱스(index)를 사용해 선택 2) 속성 탐색 선택자 : 배열에 담겨진 요소 중 지정된 속성과 값으로
탐색 선택자기본 선택자로 선택한 요소 중 원하는 요소만 한 번 더 탐색해서 좀 더 정확하게 선택 가능1) 위치 탐색 선택자 : 배열의 인덱스(index)를 사용해 선택2) 속성 탐색 선택자 : 배열에 담겨진 요소 중 지정된 속성과 값으로 선택위치탐색 선택자only-ch
업로드중..
속성 탐색 선택자 : 속성 상태에 따른 탐색 선택자선택한 요소 중 속성 상태에 따라 요소를 선택기본형 : $("요소 선택visible | hidden") // 선택한 요소 중 숨겨진 상태 또는 보이는 상태의 요소만 선택 $(:selected") // 선택
콘텐츠 탐색 선택자 요소 또는 속성의 포함 여부에 따라 특정 요소를 선택하는 선택자 1) contains() / contents() / has() / not() / end() 탐색 선택자 contains() 탐색 선택자 : 선택한 요소 중 지정한 텍스트를 포함
속성 조작 메서드 1) html() / text() html() 메서드 : 선택한 요소의 하위 요소를 가져와 문자열로 반환하거나 하위 요소를 전부 제거하고 새 요소를 바꿀 때 사용 text() 메서드 : 선택한 요소에 포함되어 있는 전체 텍스트를 가져
속성 조작 메서드 addClass() / removeClass() / toggleClass() / hasClass() addClass() 메서드 : 선택한 요소에 클래스를 생성 removeClass() 메서드 : 선택한 요소에서 지정된 클래스를 삭제
속성 조작 메서드 val() val() 메서드 : 선택한 폼 요소의 value 속성값을 가져오거나 새값을 적용할 때 사용 기본형 : $("요소 선택").val() - 갑을 가져오라는 뜻 $("요소 선택").val("새 값") -
속성 조작 메서드 prop() prop() 메서드 : 선택한 폼 요소(선택 상자, 체크 박스, 라디오 버튼)의 상태 속성값을 가져오나 새 값을 적용할 때 사용 기본형 : $("요소 선택").prop("checked | selected") // 체크된 상태인
업로드중..
요소 위치 메서드 1) position() / offset() position() : 포지션 기준이 되는 요소를 기준으로 선택한 요소에서 가로/세로로 떨어진 위치의 좌표값을 반환하거나 변경할 때 사용 offset() : 문서 Document 를 기준으로 선택한
스크롤바 위치 메서드 1) scrollTop() scrollTop() : 브라우저의 스크롤바가 수직/수평으로 이동한 위치값을 불러오거나 변경할 때 사용 기본형 $("요소선택").scrollTop(); $("요소선택").scrollLeft(); 스크롤바가 이동
객체 편집 메서드 1) before() / insertBefore() / after() / insertAfter() before() / insertBefore() : 선택한 요소의 이전 위치에 새 요소를 생성 after() / insertAfter()
위치 탐색 선택자 nth-child(숫자n) / nth-last-child(숫자) 선택자 nth-child(숫자n) 선택자 : 선택된 요소의 무리 중 지정한 숫자(배수)의 요소를 선택 nth-last-child(숫자) 선택자 : 선택된 요소의 무리 중
배열 관련 메서드 index() 지정 요소를 찾아서 인덱스 값을 반환업로드중..
콘텐츠 탐색 선택자 find() / filter() 탐색 선택자 find() 탐색 선택자 : 선택한 하위 요소 중에서 find()로 필터링한 요소만 선택 filter() 탐색 선택자 : 선택한 요소 중에서 filter()로 필터링한 요소만 선택 기본
배열 관련 메서드 1) each() / $.each() 선택자로 선택한 요소는 배열에 순서대로 저장 이때 each() / $.each() 메서드는 배열에 저장된 순서대로 하나씩 선택하면서 인덱스 정보를 가지고 옴
객체 편집 메서드 append() / appendTo() / prepend() / prependTo() append() / appendTo() : 선택한 요소 내의 마지막 위치에 새 요소를 생성하고 추가 prepend() / prependTo() : 선택한 요
객체 편집 메서드 clone() / empty() / remove() clone() : 선택한 요소를 복제 empty() : 선택한 요소의 모든 하위 요소를 삭제 remove() : 선택한 요소를 삭제 기본형 $("요소 선택").clone(t
객체 편집 메서드 replaceAll() / replaceWith() replaceAll() / replaceWith(): 선택한 요소를 새 요소로 바꿀 때 사용 기본형 $("새 요소").replaceAll("요소 선택"); $("요소 선택")
객체 편집 메서드 unwrap() / wrap() / wrapAll() / wrapInner() unwrap() : 선택한 요소의 부모 요소를 삭제 wrap() : 선택한 요소를 각각 새 요소로 감쌈 wrapAll() : 선택한 요소를 한꺼번에 새
이벤트 : 사이트에서 방문자가 취하는 모든 행위 이벤트 핸들러 : 이벤트가 발생했을 때 실행되는 코드 이벤트 등록 메서드 : 이 메서드를 이용하면 방문자가 지정한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행 시키는게 목적 단독 이
그룹 이벤트 등록 메서드 대상에 한 가지 이상의 이벤트를 등록 할 수 있음. on() 메서드를 사용해서 이벤트를 등록. 기본형 1) on() 메서드 등록 방식: 매개변수르 전달 $('이벤트 대상 선택').on('이벤트종류1 이벤트종류
강제로 이벤트 발생시키기 "이벤트가 강제로 발생했다"는 말은 "사용자에 의해" 이벤트가 발생했음을 의미하는것이 아니라 "핸들러에 의해" 자동으로 이벤트가 발생했다는 의미 단독이벤트 등록 메서드를 사용하거나 trigger()메서드를 사용하면 강제로 이벤트
이벤트 제거 메서드 : off() 기본형 $("이벤트 대상").off("제거할 이벤트 종류");
ready() / load() 이벤트 메서드 ready() : 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체(document)의 로딩이 끝나면 이벤트를 발생 load() : 외부에 연동된 소스 (iframe, img, video)의 로딩이 끝나면 이벤트
click() / dblclick() 이벤트 메서드 click() : 선택한 요소를 클릭했을 때 발생 dblclick() : 선택한 요소를 연속해서 두번 클릭했을 때 발생 기본형 1) click 이벤트 등록 $("이벤트 대상 선택").click
mouseover() / mouseout() / hover() 이벤트 메서드 mouseover() : 선택한 요소에 마우스 포인터를 올릴 때 마다 이벤트를 발생시키거나 선택한 요소에 mouseover 이벤트를 강제로 발생 mouseout() : 선택한 요소
mousemove() 이벤트 메서드 : 마우스가 움직일 때 마다 이벤트 발생 기본형: 1) mousemove 이벤트 등록 $("이벤트 대상 선택").mousemove(function() { 자바 스크립트코드; }); $(do
scroll() 이벤트 메서드 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발송 시키거나 강제로 scroll이벤트를 발생시키는데 사용 기본형 1) scroll 이벤트 등록 $("이벤트 대상 선택").scroll(function () {
포커스 이벤트 focus() : 대상 요소로 포커스가 이동하면 이벤트를 발생 blur() : 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트 발생 focusin() : 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트 발생 focusout(
키보드로 마우스 이벤트 대응하기 키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것 mouseover - focus mouseout - blur$.data()
change() 이벤트 메서드 선택한 폼 요소의 값(value)을 새 값으로 바꾸고 포커스가 다른 요소로 이동 할 때 발생 기본형 1) change 이벤트 등록 $("이벤트 대상 선택").change(function () { 자바스크립트 코드;
keydown() / keyup() / keypress() 이벤트 메소드 keydown(), keypress() 는 선택한 요소에서 키보드 자판을 눌렀을때 이벤트 발생 keydown()은 모든 키(한글 키 제외)에 대해서 발생 keypress()는 기능
키보드 이벤트 keydown() : 키보드 누를 때 이벤트 발생. keypress() : keydown() 이벤트와 유사하지만 alt, ctrl, shift, esc 와 같은 특수키는 이벤트 발생이 안됨. keyup() : 키보드를 떼어쓸 때 이벤트 발
$(this) 선택자 이벤트가 발생한 요소를 선택해서 반환 index()인덱스 반환 메서드 이벤트를 등록한 요소 중 이벤트가 발생한 요소의 인덱스 값을 반환
그룹 이벤트 등록 메서드 on() : 이벤트 대상 요소에 2개 이상의 이벤트를 등록. 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성 되거나 복제된 요소에도 이벤트가 적용 됨 \-> 객체 조작 메소드에 의해 새롭게 생성, 복제된 요소에 이벤트를 등
delegate() : 선택한 요소의 하위 요소에 이벤트를 등록 이벤트를 등록한 이후에도 동적으로 생성된 요소와 복사된 요소에 도 이벤트를 등록 기본형 $(document | "이벤트 대상의 상위 요소 선택").delegate("이벤트대상 요소 선택", "이벤
이벤트 제거 메서드 : 이전에 등록된 이벤트를 제거 이벤트 등록 메서드에 따라 이벤트를 해제하는 방법도 달라짐 bind() : 이벤트 등록시 이전에 많이 사용하던 메서드, 제이쿼리 3점대 부터는 사용을 권장하지 않음 off() : on() 메서드로 등록한 이벤트를
폼 관련 이벤트 focus() : 선택된 요소에 포커스가 들어오면 이벤트가 발생. blur() : 선택된 요소에서 포커스가 떠나면 이벤트가 발생. focusin() : 선택된 요소나 자식 요소에 포커스가 들어오면 이벤트가 발생.
효과 메서드 숨김 hide() : 요소를 숨김 fadeOut() : 요소가 점점 투명해지면서 사라짐 fadeUp() : 요소가 위로 접히며 숨겨짐 노출 show() : 숨겨진 요소가 노출 fadeIn() : 숨겨진 요소가 점점 선명해짐 slideDown() : 숨겨진
효과 메서드 1\. 숨김 hide() : 요소를 숨김 fadeOut() : 요소가 점점 투명해지면서 사라짐 fadeUp() : 요소가 위로 접히며 숨겨짐노출show() : 숨겨진 요소가 노출fadeIn() : 숨겨진 요소가 점점 선명해짐slideDown() : 숨겨진
업로드중..
animate() : 애니메이션 메서드 기본형 $('요소 선택').animate({스타일 속성}, 적용 시간, 가속도, 콜백함수) 1) 스타일 속성 : 애니메이션으로 적용할 스타일 속성 2) 적용 시간 : 동작에 반응하
scroll() 이벤트 메서드 대상 요소의 스크롤바가 이동할 때마다 이벤트를 발송 시키거나 강제로 scroll이벤트를 발생시키는데 사용업로드중..
업로드중..
애니메이션 효과 제어 메서드 delay() : 지정한 시간만큼 지연 했다가 애니메이션을 진행 stop() : 현재 실행중인 효과를 모두 정지 스택은 '먼저 들어간 것이 나중에 나오는 자료구조' 로써 초코볼이 담겨있는 통에 비유할 수 있다.
애니메이션 효과 제어 메서드 queue() : 큐에 적용된 애니메니션 함수를 반환하거나 큐에 지정된 함수를 추가 queue() 메서드를 실행하면 실행 이후의 모든 애니메이션이 취소 dequeue() : queue() 메서드 실행 이후에 적용된 애니메이션 메서
애니메이션 효과 제어 메서드 clearQueue() : 진행 중인(첫번째) 애니메이션을 제외하고 큐에서 대기하는 모든 애니메이션 함수를 제거 기본형 $("요소 선택").clearQueue();
업로드중..
업로드중..
업로드중..
DOMContentLoaded 이벤트 웹 브라우저가 문서 객체를 모두 읽고 나서 실행하는 이벤트
문서 객체 가져오기 document.head , document.body , document.title 등을 이용 head와 body 요소 내부에 만든 다른 요소들은 다음과 같은 별도의 메소드를 사용해서 접근 document.querySelector(선택자)
글자 조작하기 문서 내부의 글자를 조작할때는 textContent, innerHTML 속성 사용 문서객체.textContent : 입력된 문자열을 그대로 넣어줌 문서객체.innerHTML : 입력된 문자열을 HTML 형식으로 넣어줌업로드중..
속성 조작하기 문서 객체의 속성을 조작할 때는 다음과 같은 메소드를 사용 문서객체.setAttribute(속성이름, 값) : 특성 속성에 값을 지정 문서객체.getAttribute(속성이름) : 특성 속성의 값을 추출업로드중..
스타일 조작하기 자바스크립트의 style 속성들의 이름이 css에서 사용할 때와 차이가 있음 자바스크립트에서는 -가 연산자이고, 식별자에 사용 할 수 없어서 두 단어의 조합은 카멀 케이스로 표현 background-color : backgroundColor
문서 객체 생성하기 body태그 내부에 있는 특정 문서 객체를 읽어들이고 조작하는 것도 가능하나 문서 객체를 생성하는 것도 가능 문서 객체를 생성하고 싶을 때는 document.createElement() 메소드를 사용 문서 객체를 만든 후에는 문서 객체를 추가
문서 객체 이동하기 appendChild() 메소드를 사용하면 문서 객체를 이동할 수도 있음 문서객체를 다른 문서 객체에 추가하면 문서 객체가 이동 복사가 아님 부모객체.appendChild(자식객체);업로드중..
문서 객체 제거하기 문서 객체를 제거할 때는 removeChild() 메소드를 사용, 부모객체를 알아야함 부모객체.removeChild(자식객체); appendChild()메소드 등으로 부모 객체와 이미 연결이 완료된 문서 객체의 경우 parentNode 속
이벤트 설정하기 문서객체.addEventListener(이벤트 이름, 콜백 함수); 이벤트가 발생할 때 실행할 함수는 addEventListener()메소드를 사용해서 콜백 함수로 등록 이벤트가 발생할 때 실행할 함수(콜백함수)를 이벤트 리스너 event
이벤트 핸들러 등록 종류이벤트 핸들러 어트리뷰트 방식이벤트 핸들러 어트리뷰트의 이름은 onclick과 같이 on 접두사와 이벤트의 종류를 나타내는 이벤트 타입으로 이루어져 있음주의할 점은 이벤트 핸들러 어트리뷰트 값으로 함수 참조가 아닌 함수 호출문 등의 문을 할당이때
업로드중..
이벤트 핸들러 제거 addEventListener 메서드로 등록한 이벤트 핸들러를 제거할려면 EventTarget.prototype.removeEventListener() 메서드를 사용 removeEventListener 메서드에 전달할 인수는 addEventL
이벤트 핸들러 제거 removeEventListener 메서드에 인수로 전달한 이벤트 핸들러는 addEventListener 메서드에 인수로 전달한 등록 이벤트 핸들러와 동일한 함수여야 함 따라서 무명함수를 이벤트 핸들러로 등록한 경우에는 제거할 수 없음
이벤트 핸들러 제거 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러는 removeEventListener 메서드로 제거 할 수 없음 이벤트 핸들러 프로퍼티 방식으로 등록한 이벤트 핸들러를 제거하면 이벤트 핸들러 프로퍼티에 Null을 할당
css파일
id를 이용한 요소 노드 취득 Document.prototype.getElementById 메서드는 인수로 전달한 id 어트리뷰트 값을 갖는 하나의 요소 노드를 탐색하여 반환 id값은 HTML 문서 내에서 유일한 값이여야 하며, Class 어트리뷰트와는
태그 이름을 이용한 요소 노드 휙득 Document.prototype / Element.prototype.getElementByTagName 메서드는 인수로 전달한 태그 이름을 갖는 모든 요소 노드들을 탐색하여 반환 메서드 이름이 포함된 Ele
class를 이용한 요소 노드 취득 Document.prototype / Element.prototype.getElementsByClassName 메서드는 인수로 전달한 class 어트리뷰트 값을 갖는 모든요소 노드들을 탐색하여 반환 인수로 전달할 classs
키보드 이벤트 keydown : 키가 눌릴 떄 실행 키보드를 꾹 누르고 있을 때도 입력될 때도 실행 keypress : 키가 입력되었을 때 실행 , 웹 브라우저에 따라서 아시아권의 문자를 제대로 처리 못하는 문제가 있음 Keyup : 키보드에
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
산술 연산자 변수 또는 상수와 함께 사용하며 기본적인 계산을 할 수 있음 나머지 연산자는 데이터 타입이 정수형인 경우에만 사용
업로드중..
업로드중..
업로드중..
업로드중..
논리 부정 연산자(!) 참(true) 을 거짓(false)으로, 거짓(false)을 참(true)으로 바꾸는 연산자업로드중..
증감연산자 단독으로 사용할땐 전위나 후위나 출력 값은 똑같으나 단독으로 사용하지 않는 경우 에는 전위, 후위에 따라 결과 값이 다름업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
반복문의 종류로는 for문, while문, do-while문 이 있음 for문과 while문으 서로 변환이 가능하기 때문에 반복문을 작성할 떄는 어느쪽을 선택해도 좋지만 for문은 반복 횟수를 알고 있을때 주로 사용하고 while문은 조건에 따라 반복할 때
float 타입 카운터 변수 for문을 작성할 때 주의할 점은 초기화 식 에서 루프 카운터 변수를 선언할 때 부동 소수점을 쓰는 float 타입을 사용하지 말아야 한다 0.1은 float 타입으로 정확하게 표현할 수 없기 때문에 x에 더해지는 값이 0.1보다
업로드중..
업로드중..
업로드중..
for문 동작시간 구하기 프로그램의 동작시간을 구하는 방법 프로그램 시작 위의 부분에서 시작시간을 구하고, 프로그램이 끝나는 부분에서 종료시간을 구한후, 종료시간에서 시작시간을 빼면 프로그램이 동작한 시간을 구할 수 있다
업로드중..
중첩 for문을 이용하여 방정식 4x + 5y = 60 의 모든 해를 구해서 (x, y) 형태로 출력해보세요 단, x와 y는 10 이하의 자연수 입니다.
표준 빌트인 객체인 Date는 날짜와 시간(연, 월, 일, 시, 분, 초, 밀리초(millisecond/ms, 천분의 1초)를 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수. 현재 날짜와 시간은 자바스크립트 코드가 실행된 시스템의 시계에 의해 결정.Date
keyCode 속성 활용 keyCode 속성은 입력한 키를 숫자로 나타냄 37, 38, 39, 40이 방향키 왼쪽, 위, 오른쪽, 아래 를 내타냄
form 태그 관련 드롭다운 목록 활용하기 드롭다운 목록은 select 태그로 구현 드롭 다운 목록을 선택했을 떄(값이 변경 되었을 떄) 어떤 것을 선택 했는지 출력
form 태그 관련 체크박스 활용하기 체크박스의 체크 상태를 확인할 때는 입력양식의 checked 속성을 사용 체크 상태일 때만 타이머를 증가시키는 프로그램 change 이벤트가 발생했을때 체크 박스의 상태를 확인하고 setInterval() 함수 또는
반복문을 빠져나오는 방법은 1) 조건식이 false가 되거나 2) break 문을 실행 - 반복을 멈추게 함 반복문이 진행되다가 break문을 만나면 곧 바로 반복문을 벗어나서 반복문 다음의 코드를 수행
continue문은 현재의 반복을 뛰어넘고 다음 반복을 진행 반복문이 진행되다가 continue문을 만나면 반복문의 제일 끝으로 가서 다음 반복을 계속 수행업로드중..
업로드중..
업로드중..
do while문 조건에 따라 반복을 계속할지를 결정할 때 사용하는 것은 while 문과 동일합니다. 다만, 무조건 중괄호 {} 블럭을 한번 실행하고, while문 조건을 검사하여 반복을 결정합니다.업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
자바 배열 특징동일한 자료형만 저장변수 선언시에 저장할 데이터의 개수를 지정자바스크립트의 배열은 자바의 경우 배열보다는 컬랙션의 ArratList에 가까움컬랙션의 ArrayList가 있음에도 배열을 사용해야 하는 경우배열이 컬랙션의 ArrayList보다 실행속도가 빠름
업로드중..
업로드중..
업로드중..
업로드중..
로또 번호 구하기 1~45 까지의 임의의 수만 6개 구하면 중복의 가능성이 있다. random을 이용해서 임의의 번호 입력
업로드중..
2차원 배열 선언 및 출력 ex) intstudent = new int3 - 3층 건물을 만들고 각 층 마다 방은 4개업로드중..
업로드중..
극장에 앉아있는 관객들을 2차원 배열로 나타낼수 있음 관객이 있는 좌석은 1로, 관객이 없는 좌석은 0으로 나타냄 현재 극장에 앉아있는 관객들의 수를 세는 프로그램을 작성
5명 학생의 국어, 영어, 수학 성적 데이터를 가지고 각 학생의 3과목 총점과 평균 각 과목의 모든 학생의 총점을 구하기업로드중..
업로드중..
업로드중..
업로드중..
메서드 객체네에 있는 함수, 자바는 개체로만 이루어져 있어서 공식적으로 함수는 없음 메서드는어떤 입력을 받아 특정 연산을 수행한 뒤 결과를 반환하는 기능메서드의 용어 정리메서드 정의 : 메서드를 새로 만드는 것을 의미인수 : 메서드에 전달할 입력(inpu
메서드 호출방식1.값에 의한 호출값에 의한 메서드 호출방식은 메서드 호출시에 값이 복사되어 전달메서드의 매개변수 타입이 '기본형 데이터'일때 값에 의한 호출을 함메서드 increase() 호출시에 n이라는 매개변수가 메모리에 생성되어 var1의 값인 100이 '복사되어
메서드 호출방식 참조에 의한 호출방식 매개변수의 타입이 참조형 타입일 때 사용 참조에 의한 호출은 메서드호출 시 참조 데이터의 위치가 매게변수에 전달 값에 의한 호출은 메모리에 동일한 값을 복사 후 사용 참조에 의한 호출은 메모리의 주소를 넘기기 때문에 값을
메서드 호출방식 문자열에 의한 호출방식 예외적으로 문자열을 전달하려면 참조형 데이터라도 값에 의한 호출을 함.업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
업로드중..
깊은 복사, 값 복사, 기변형 변수 deep copy 데이터 자체가 복사된다 복사된 두 객체는 완전히 독립적인 메모리를 차지한다얕은 복사. 참조복사. 참조형복사 shallow copy 값 자체를 복사하는 것이 아니라 주소값을 복사하여 같은 메모리를 가
다른파일로 저장한 클래스업로드중..
업로드중..
업로드중..
업로드중..
기본 형식SELECT는 테이블의 데이터를 읽어 출력하는 이 동작을 조회라고 함.테이블을 조회하는 것은 가장 기본적인 동작이며 SELECT 문은 모든 SQL 명령중 사용 빈도가 압도적으로 높음.테이블을 읽은 동작은 단순하지만 옵션이 굉장히 많음.관심있는 필드만 읽거나 조
WHERE 절은 읽을 레코드의 조건을 지정.필드 목록은 읽을 열을 지정하는데 비해 WHERE 절은 읽을 행을 지정.WHERE 절이 없으면 모든 레코드를 다 조회.SELECT 명령은 조건에 맞는 레코드를 검색하는 것이 주 기능이어서 대개의 경우 WHERE 절과 함께 사용
업로드중..
업로드중..
클래스 외부에서 클래스의 변수(필드)에 접근할 수 있는 방법은 2가지. Student student = new Student(); 1) 바로 접근하는 방법. student.studentName 2) 매서드로 접근하는 방법. student.getStudentName
기본형식SELECT 필드목록 FROM 테이블 WHERE 조건 SELECT 명령에 별 지정이 없을 경우 레코드의 출력 순서 는 DBMS의 디폴트 순서를 따름.오라클은 입력 순서을 기억해 그대로 출력하고, 마리아 디비는 기본키에 대해 오름차순으로 정렬.관계형 DB에서 레
기본형식SELECT 필드목록 FROM 테이블 WHERE 조건 SELECT 명령에 별 지정이 없을 경우 레코드의 출력 순서 는 DBMS의 디폴트 순서를 따름.오라클은 입력 순서을 기억해 그대로 출력하고, 마리아 디비는 기본키에 대해 오름차순으로 정렬.관계형 DB에서 레
설정자 setter 생성메서드 선언시에 반환형은 void메서드 이름은 set + 필드이름메서드의 매개변수는 필드의 타입과 이름이 동일실행 코드는 1줄this.필드 = 매개변수;접근자 getter 생성메서드 선언시에 반환형은 필드의 데이터 타입메서드 이름은 get + 필
업로드중..
싱글톤 singleton '전체 프로그램에서 단 하나의 객체만 만들어서 보장해야하는 경우'에 사용 생성자를 호출한 만큼 객체가 생성되기 때문에1) 싱글턴을 만들려면 클래스 외부에서 new 연산자로 생성자를 호출할 수 없도록 막아야 함 외부에서 생성자를 호출할 수
함수는 입력값으로부터 모종의 계산을 하여 출력값을 리턴하는 장치.입력은 함수명 다음의 괄호 안에 인수로 전달하며 함수 호출문은 실행결과를 리턴.테이블에 저장된 정보를 함수로 전달하면 원본 데이터를 변형, 가공하여 돌려줌.함수 호출문이 하나의 값이므로 필드 목록이나 조건
집계 함수는 조건에 맞는 그룹에 대한 통계를 냄.부서별 월급 평균을 알고 싶으면 부서마다 AVG 함수를 호출.하지만 부서 목록을 만들고 각 부서마다 명령을 일일이 실행해야 하고 결과도 따로 출력되어 보기도 불편.또한 집계함수와 일반필드를 같이 적을 수 없어 필드 목록에
this 와 this()는 다름this() 는 반드시 생성자 안에서만 호출 가능this() 는 반드시 첫번째 문장이어야 함this() 는 다른 생성자를 호출할 때만 사용
새로운 레코드를 추가하는 명령.INSERT 문을 스크립트로 작성해 놓으면 많은 데이터를 순차적으로 입력할 수 있어서 편리.기본 형식INSERT INTO 테이블 (필드목록) VALUES (값목록)명령어가 두 단어로 되어 있는데,INSERT는 삽입하라는 명령어이고INTO는
레코드를 삭제할 때 사용.삭제는 항상 레코드 단위로 수행하므로 필드에 대한 지정은 없음.기본형DELETE FROM 테이블 WHERE 조건INSERT는 전치사 INTO를 쓰는데 비해 DELETE는 전치사 FROM을 씀.삭제 동작은 특정 조건에 맞는 레코드를 찾아 제거라는
레코드의 필드 값을 변경할 때 사용.대입문으로 테이블의 필드 값을 임의대로 변경.기본형UPDATE 테이블 SET 필드 = 값 \[, 필드 = 값 ] WHERE 조건UPDATE 키워드 다음에 변경 대상 테이블을 지정.SET 키워드 다음에 필드에 값을 대입하는 대입문이 오
테이블의 특정 레코드를 읽거나 변경하려면 레코드끼리 구분할 수 있는 고유의 키 (=식별자)가 필요.키는 1) 값이 꼭 있어야 하며, 2) 구분을 위해 고유값을 가져야 함.조건을 만족하는 필드를 후보키 Candidate Key라고 하며 한 테이블에 여러 개의 후보키가 있
상속을 정의 하려면 자식 클래스 이름 뒤에 extends를 쓰고 부모 클래스의 이름을 적으면 됨 extends는 확장 또는 파생 한다는 의미 즉 부모 클래스를 확장하여서 자식 클래스를 작성한다는 의미
업로드중..
Override 부모 클래스에 있는 메소드를 자식 클래스에서 재정의 하는 것입니다. 자식 클래스가 부모 클래스를 상속하여 자식에게 없는 메소드를 호출하면 부모클래스에 가서 해당 메소드를 찾게 됩니다. 만약 부모 클래스의 메소드를 자식클래스에서 동일한 이름으로 다시 재정
업로드중..
일반 직원은 Employee 클래스로 모델링 한다 Employee 클래스를 상속받아서 1) 관리자를 나타내는 Manager 클래스와 2) 프로그래머를 나타내는 Programer 클래스를 작성한다 Employee 클래스 안에는 월급을 계산하는 getSalary() 메서
업로드중..
업로드중..
업로드중..
상속 vs 구성상속과 유사하지만 상속과는 미묘하게 다른 구성 composition이라는 기법이 있음구성은 클래스가 다른 클래스의 인스턴스를 클래스의 필드로 가지는 디자인 기법 반면에 상속은 한객체가 클래스를 상속받아서 부모 객체의 속성과 동작을 휙득할 수 있는 기법상속
상속 vs 구성상속과 유사하지만 상속과는 미묘하게 다른 구성(composition)이라는 기법이 있음구성은 클래스가 다른 클래스의 인스턴스를 클래스의 필드로 가지는 디자인 기법 반면에 상속은 한객체가 클래스를 상속받아서 부모 객체의 속성과 동작을 휙득할 수 있는 기법상
Dog 참조 변수를 통하여 정적 메서드를 호출하면 자식 클래스의 정적 메서드를 호출, Animal 참조 변수를 통하여 정적 메서드를 호출하면 부모 클래스의 정적 메서드가 호출됨 만약 정적 메서드가 아니었다면 animal를 통하여 호출하여도 메서드 오버라이딩 때문에
final 변수 : 값을 더 이상 변경할 수 없는 상수 final 메서드 : 내용을 더이상 변경할 수 없는 메서드, 오버라이딩 불가 final 클래스 : 내용을 더이상 변경할 수 없는 클래스, 상속 불가
추상 메소드(abstract method)란 자식 클래스에서 반드시 오버라이딩해야만 사용할 수 있는 메소드를 의미추상 메소드는 선언부만 정의하고 구체적인 내용은 비워놓은 메서드예를 들면 모듈처럼 중복되는 부분이나 공통적인 부분은 미리 다 만들어진 것을 사용하고, 이를
서브 쿼리 SubQuery는 쿼리문 안에 또 다른 쿼리문이 포함된 구문.단발적인 질문이 아닌 '복합적이고 단계적인 질문을 할 때는 여러 개의 쿼리를 중첩해서 사용.'리턴하는 행과 열의 개수에 따라 다음과 같이 분류.단일행 서브쿼리 : 하나의 값만 리턴다중행 서브쿼리 :
다음 쿼리문은 식품 유형의 상품과 가전 유형의 상품을 각각 조사하여 하나로 합침 SELECT * FROM tItem WHERE category = '식품' UNION SELECT * FROM tItem WHERE category = '가전'; UNION - 조회한
인터페이스(interface)란?자바에서 인터페이스는 클래스들이 필수로 구현해야 하는 추상 자료형입니다.쉽게 말하자면 객체의 사용방법을 가이드라인 하는 것이라고 생각하시면 이해가 쉽습니다.자바의 인터페이스는 추상 메서드와 상수로만 이루어져 있습니다.구현된 코드가 없기
인스턴스 내부 클래스인스턴스 변수를 선언할 때와 같은 위치에 선언하며, 외부 클래스 내부에서만 생성하여 사용하는 객체를 선언할 때 사용예를 들어 어떤 클래스 내에 여러 변수가 있고 이들 변수 중 일부를 모아 클래스로 표현할 수 있음이 클래스를 다른 외부 클래스에서 사용
static 내부 클래스의 정의내부 클래스가 static으로 지정된 클래스내부 클래스의 멤버가 static으로 지정되었으면 내부 클래스도 반드시 static으로 지정해야 됨.MyOuter3.Inner.getUserInfo()을 호출해서 아래 내용이 출력되도록 main(
정적 내부 클래스 static inner class내부 클래스가 외부 클래스의 생성과 무관하게 사용할 수 있어야 하고, 정적 변수도 사용할 수 있어야 할 때 사용인스턴스 내부 클래스 처럼 외부 클래스 멤버와 같은 위치에 정의하고 static 예약어를 함께 사용업로드중.
싱글턴 패턴singleton pattern객체 지향 프로그램에서 인스턴스를 단 하나만 생성하는 디자인 패턴.커넥션 풀, 스레드 풀, 디바이스 설정 등과 같은 경우 인스턴스를 여러 개 만들게 되면 불필요한 자원을 사용 하게 되고,또 프로그램이 예상치 못하는 결과를 낳을
싱글턴 패턴singleton pattern객체 지향 프로그램에서 인스턴스를 단 하나만 생성하는 디자인 패턴.커넥션 풀, 스레드 풀, 디바이스 설정 등과 같은 경우 인스턴스를 여러 개 만들게 되면 불필요한 자원을 사용 하게 되고,또 프로그램이 예상치 못하는 결과를 낳을
어댑터를 번역하면 변환기 converter라고 할 수 있음. 변환기의 역할은 서로 다른 두 인터페이스 사이에 통신 이 가능하게 하는 것.ODBC, JDBC가 어댑터 패턴을 이용해 다양한 데이터베이 스 시스템을 단일한 인터페이스로 조작할 수 있게 해줌." 호출당하는 쪽의
객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화한 패 턴이자상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결 정하고,하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴.예를 들어 어떤 클래스에서 다른 클래스의 객체를 생성해서 사용 하
빌더 패턴(Builder Pattern)은 복잡한 객체의 생성 과정과 표현 방법을 분리하여 다양한 구성의 인스턴스를 만드는 생성 패턴이다.생성자에 들어갈 매개 변수를 메서드로 하나하나 받아들이고 마지막에 통합 빌드해서 객체를 생성하는 방식이다.빌더를 쓰는 이유는생성자
로컬 내부 클래스의 정의 외부 클래스의 메서드 내에서 정의된 클래스 메서드 호출 시에 생성되고 복귀하면 소멸 메서드의 지역변수는 스택메모리에서 실행되므로 호출 후 복귀하면 소멸 하지만 지역 내부 클래스의 객체는 힙에서 실행이 되므로 메서드가 호출이 끝나고 복귀하더라도
익명 내부 클래스 이름을 사용하지 않는 클래스 1) 메서드를 호출할 때 생성되거나 2) 참조 변수에 대입할 때 new 예약어를 사용하여 생성
디자인 패턴의 일종으로 전체 프로그램의 구조와 관련된 디자인 패턴.어느 정도 규모가 있는 프로그램을 만들어 나갈 때는 프로그램을 독립적인 부분으로 나누고, 이 부분들을 느슨하게 연결하는 구조화 작업을 병행해야함.애플리케이션의 내부 데이터를 사용자에게 표시하는 정보와 분
참조형 변수끼리 대입(a = b)하면 참조 복사가 되기 때문에 같은 대상을 가르킴 어떤 객체의 참조 복사가 아닌 값복사, 그러니까 독립적인 사본을 만들때는 clone() 메서드를 사용 완전한 사본을 만들어 복사본을 리턴
제네릭은 C++의 템플릿이 발전한 형태 C++과는 달리 제네릭 대신 Object를 사용하면 모든 데이터 타입을 사용할 수 있지만, 경우에 따라 형변환 해줘야 되서 제네릭을 선호제네릭(Generic) : 일반화, 범용화 라는 의미로 클래스나 메서드에서 사용하는 필드나
ArrayList : 배열에서 발전된 형태요소를 추가하려면 0번 인덱스부터 차례대로 저장메서드를 사용해서 원하는 위치에 요소를 추가하거나, 삭제, 반환 할 수 있음String 객체를 저장하는 ArrayList
ArrayList와 사용 방법은 동일한데, 내부 구조는 완전 다름 ArrayList과 LinkedList의 다른 점.ArrayList은 생성할 때 용량을 지정하고, 용량보다 더 많은 요소가 추가된 경우에 용량을 늘여가며 수행.LinkedList는 요소를 추가할 때마다
ArrayList를 이용해서 stack 자료 구조 구현 stack를 구현할 때 ArrayList, LinkedList 중 어느 것을 선택하는 것이 좋을까?
ArrayList와 동일한 내부 구조를 가지고 있음ArrayList와 다른 점은 Vector는 동기화된 synchronized 메소드로 구성이 되어 있어서, 멀티 스레드가 동시에 메소드를 실행할 수 없고, 하나의 스레드가 메소드를 실행을 완료해야만 다른 스레드가 메소드
HTML 코드에 자바 코드를 넣어 프로그램이 수행하는 기능을 구현주석 태그JSP 주석태그 comments tag : JSP 웹 컨테이너가 무시하는 텍스트를 표시주석 태그는 JSP 페이지의 일부를 주석 처리하여 숨길 때 유용주석은 프로그램의 실행에는 영향을 미치지 않지만
JSP 페이지를 어떻게 처리할 것인지 설정하여 JSP 페이 지에 대한 정보를 JSP 컨테이너에 보냄page 디렉티브 테그에 콘텐츠 유형을 마이크로 소프트 워드 문서(application/msword)로 설정하기 1) 콘텐츠 유형을 application/msword로
page 디렉티브 태그에 표현 언어(EL)를 사용할 수 없도록 설정하기1) 내장 객체 request 변수의 setAttribute() 메서드를 이용하여 RequestAttribute 변수에 값을 저장하도록 스크립틀릿 태그를 작성2) requestAttribute변수에
현재 JSP 페이지의 특정 영역에 외부 파일의 내용을 포 함하는 태그.포함할 수 있는 외부 파일은 HTML, JSP, 텍스트 파일 등.include 디렉티브 태그는 서블릿 프로그램으로 번역될 때 현재 JSP 페이지와 설정된 다른 외부 파일의 내용이 병합되어 번역.머리글
request 내장객체로 폼 페이지에서 아이디와 비밀번호를 전송받아 출력하기1) 폼 페이지에서 입력한 한글을 처리하도록 request 내장 객체의 setCharacterEncoding() 메서드에 문자 인코딩 유형을 utf-8로 작성2) 입력된 아이디와 비밀번호를 폼
forward 액션 태그로 현재 날짜와 시각을 출력하는 페이지로 이동하기.1) 외부 파일 forward_date.jsp 의 내용을 출력하도록 forward 액션 태그의 page 속성을 작성forward_date.jsp 로 흐름이 넘어 갔기 때문에 forwarAction
include 액션 태그에 현재 날짜와 시각을 출력하는 페이지 포함하기외부파일 include_date.jsp의 내용을 포함하여 출력하도록 include 액션 태그의 page 속성을 작성include 액션 태그는 다른 페이지의 처리 결과만을 현재 페이지에 포함
JSP의 표준 액션 태그로 접근할 수 있는 자바 클래스로서 값을 가지는 속성(멤버변수)과 값을 설정하는 메소드(setter) 값을 추출하는 메소드(getter)로 이루어져 있다.자바빈즈는 하나의 JSP 페이지에 종속적으로 사용되는 것이 아니라, 여러 JSP 페이지에서
response 내장 객체는 사용자의 요청을 처리한 결과를 서버에서 웹 브라우저로 전달하는 정보를 저장.즉 서버는 응답 헤더와 요청 처리 결과 데이터를 웹 브라우저로 보냄.JSP 컨테이너는 서버에서 웹 브라우저로 응답하는 정보를 처리하기 위해javax.servlet.h
HashSet Set 인터페이스의 구현 클래스 객체들을 순서 없이 저장하고 동일한 객체는 중복 저장하지 않음. HashSet이 판단하는 동일한 객체란 꼭 같은 인스턴스를 뜻하지 않음 HashSet은 객체를 저장하기 전에 1) 먼저 객체의 hashCode() 메소드들
null 입력은 가능하지만 한 번만 저장 가능하고 중복될 수 없습니다.객체(데이터)를 중복 저장할 수 없지만 오름차순으로 데이터를 정렬합니다.내부적으로 TreeMap을 사용합니다.정렬을 변경하는 방법.Comparable 인터페이스 구현정렬을 구현하는 데 사용하는 인터페
Map은 key-value를 하나의 쌍으로 뭈어서 저장하는 자료구조.다른 언어에서는 딕셔너리 dictionary라로 함. Map은 사전과 같은 자료 구조.즉 사전처럼 단어가 있고(이것을 키 key 라고 부름), 단어에 대한 설명(이것을 값 value 라고 부름)이 있
Try-catch Try-catch문은 예외를 처리하기 위한 구문이다. 예외가 try 블럭에서 발생한 경우 발생한 예외와 일치하는 catch 문이 있는지 확인. 일치하는 catch 문이 있다면 catch 블럭 내의 문장을 모두 실행하고 try catch 문을 빠져나
finally 를 사용하는 예 finally문에는 예외 발생여부와 상관없이 실행되어야 할 코드가 있을 경우 작성하며, 필요없을 경우 생략할 수 있습니다. 디비나 파일의 경우 사용후에는 닫아줘야 함 .(close() 실행)
섞기 Shuffling 알고리즘은 정렬의 반대 동작 즉 리스트에 존재하는 정렬을 파괴하여서 요소들의 순서를 랜덤하게 만듬
정렬을 변경하는 방법.Comparable 인터페이스 구현정렬을 구현하는 데 사용하는 인터페이스이고 compareTo() 메서드를 구현해야 함.첫 번째 매개변수가 더 클때 양수를 반환하여 오름차순으로 정렬.a.compareTo(b) :현재 객체 < 파라미터로 넘어온
예외 던지기란 예외가 발생했을 경우 현재 메서드가 예외를 처리하지 않고 자신을 호출한 쪽으로 예외처리에 대한 책임을 넘기는 것 예외 던지기는 호출한 쪽으로 책임을 넘기기 때문에 호출한 쪽에 대한 문법적 강제성이 발생 예외를 넘겨받은 쪽은 1) 반드시 직접 예외처리를
웹 브라우저에서 서버로 파일을 전송하기 위해 JSP 페이지에 폼 태그를 작성할 때 몇 가지 중요한 규칙을 따라야 함.form 태그의 method 속성은 반드시 POST 방식으로 설정.form 태그의 enctype 속성은 반드시 multipart/form-data로 설정
page 디렉티브 태그에 errorPage 속성을 이용하여 오류 페이지 호출하기 1) JSP 페이지가 실행되는 도중에 오류가 발생하면 오류 페이지를 호출하도록 page 디렉티브 태그에 errorPage 속성을 작성 2) toUpperCase() 메서드는 파라미터 값을
최근 사용 용도자동 로그인팝업 오늘만 보기로그 관련 내용 (예: 가격 비교를 통해 들어옴)브라우저의 랜더링 관련 내용브라우저에서 쿠키 정보 보기장점클라이언트의 일정 폴더에 정보를 저장하기 때문에 웹서버의 부하를 줄일 수 있음.단점웹브라우저가 접속했던 웹 사이트에 관한
클라이언트와 웹 서버 간의 상태를 지속적으로 유지하는 방법.예를 들면 쇼핑몰에서 장바구니와 주문 처리와 같은 회원 전용 페이지의 경우 로그인 인증을 통해서 사용권한을 부여.다른 웹 페이지에 갔다가 되돌아와도 로그인 상태가 유지되므로 회원 전용 페이지를 사용할 수 있음.
내장객체 : JSON 객체 JSON : JavaScript Object Notation의 약자로 자바 스크립트의 객체처럼 자료를 표현하는 방식 인터넷에서 문자열로 자료를 주고 받을 때 사용 JSON 형식의 추가 규칙
continue문은 현재의 반복을 뛰어넘고 다음 반복을 진행 반복문이 진행되다가 continue문을 만나면 반복문의 제일 끝으로 가서 다음 반복을 계속 수행
2차원 배열 선언 및 출력 ex) intstudent = new int3 - 3층 건물을 만들고 각 층 마다 방은 4개
JSP(JavaServer Pages)는 서버 측에서 동적 웹 페이지를 생성하는 데 사용되는 Java 기반의 웹 프로그래밍 언어입니다. JSP는 HTML에 Java 코드를 포함하여 작성되며, 웹 애플리케이션에서 동적인 컨텐츠를 생성하는 데에 주로 활용됩니다.JSP의 주
공식 홈페이지에 나와있는 표현으로Node.js 는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다.\-Node.js 는 공식 홈페이지-런타임은 특정 언어로 만든 프로그램들을 실행할 수 있는 환경을 뜻합니다.우선 JavaScript