ITWILL학원 : 3강 WEB(HTML, CSS) BY 김영희

테이블 칸 합치기

• colspan = “n” : 세로방향으로 합치는 속성
• rowspan = “n” : 가로방향으로 합치는 속성

칸합치는 속성은 항상 th나 td에서 이루어지지 tr에서는 절대 사용하지않는다!

rowspan을 생각할때는 빨래줄(tr)에 빨래(td나th)가 걸려있다고 생각하면 편하다
기준을 몇번째 tr인지 확인한 뒤 빨래줄에 빨래를 걸면 아래로 내려오듯이 td가 내려와있다고 생각하면 된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table>
	<tr>
		<th colspan="2">칸 합치는 속성</th>
	</tr>
	<tr>
		<th>가로방향</th>
		<th>세로방향</th>
	</tr>
	<tr>
		<td>colspan="n"</td>
		<td>rowspan="n"</td>
	</tr>
	<tr>
		<td colspan="2">n개의 칸을 하나로 합치는 속성</td>
	</tr>
</table>

가로방향 합치기와 세로방향합치기가 동시에 나오는 예시는 아래와 같다
rowspan을 위에서 말했던 빨래감예시를 들어 설명해보면, 첫 번째 tr의 빨래줄의 마지막 td에 아래 빨래감이 3개가 걸려야한다.(즉 3칸을 합친다)
따라서 첫번째 tr의 두번째 td에 rowspan=”3”를 해준다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<table>
    <tr>
        <td colspan="2">a</td>
        <td rowspan="3">b</td>
    </tr>
    <tr>
        <td>c</td>
        <td rowspan="2">d</td>
    </tr>
    <tr>
        <td>e</td>
    </tr>
    <tr>
        <td colspan="3">f</td>
    </tr>
</table>

ITWILL학원 : 8강 JS기초 BY 정규태강사

1.객체 Object

1. 정의

자바스크립트는 객체기반의 언어
객체는 기능, 속성을 포함하고 있는 것
추상화된 객체를 사용할때 속성은 변수를 사용해서 표현하고 기능은 함수(매서드)를 사용해서 표현한다
자바스트립트에서는 객체를 직접 만들어쓰지않고 만들어진 객체를 활용한다
하지만 자바는 자주 직접 만들어서 사용한다

1
2
3

let phone = new Object();  //여기서 phone은 참조변수
phone.모델명 = "아이폰"
phone.on(); //전원켜는 기능 실행

위의 phone을 참조변수라고 한다

2. 객체종류

• 내장객체
  • 자바스크립트엔진에 포함되어있는 객체
  • String : 문자를 처리하는 객체
  • Date : 날짜를 처리하는 객체
  • Array : 배열을 처리하는 객체
  • Math : 수학을 처리하는 객체
  • 등등

• 브라우저 객체모델(BOM : Browser Object Model)
  • 브라우저에 계층적으로 내장되어 있는 객체
  • 즉 단계가 있는 객체
  • window
  • screen
  • location
  • history
  • navigator
  • document
  • 등등

• 문서 객체 모델(DOM : Document Object Model)
  • HTML 테그의 문서구조 + CSS
  • IE8이하의 버전에서 호환성이 떨어지기에 잘 안쓰게 된다 -> 대신 jQuery문서객체모델을 사용

2. 내장객체

1

let 참조변수 = new 생성변수();

new : 객체(instance)를 생성하는 연산자이다 -> 메모리에 올려서 사용할 수 있도록 준비

3. tv 채널up/down 함수만들기

tv 채널 up과 down이 되는 함수를 만들어보자
채널은 1부터 500까지 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function chUp(){
	if(tv.ch >= 1 && tv.ch < 500){
		tv.ch ++;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}else if(tv.ch == 500){
		tv.ch = 1;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}else{
		tv.ch += 1;
		document.write("현재 채널 번호는 " + tv.ch  + "번 입니다 <br>")
	}
}
}

실행시마다 채널이 다운되는 함수는 아래와 같다

1
2
3
4
5
6
7
8
9
10
11
12

function chDown(){
	if(tv.ch == 0){
		tv.ch = 500;
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}else if(tv.ch == 1){
		tv.ch = 500
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}else{
		tv.ch -= 1;
		document.write("현재 채널 번호는 " + tv.ch + "번 입니다 <br>")
	}
}

tv.ch가 499일때 두 함수를 호출해보면

1
2
3
4
5
6
7

chUp() // 499 -up-> 500
chUp() //500 -up->501 ->1
chUp() //1 -up->2
chDown() // 2 -down->1
chDown() // 1 -down->500
chDown()  // 500 -down->499
chDown()  // 500 -down->499

4. new 를 쓰고 안쓰고의 차이

new 연산자는 생성자함수이다.
생성자란 객체를 생성할때 초기화하는 것이다.

new를 쓰고 안쓰고의 차이가 뭘까? => 사용법의 차이가 있다(변수에 담아서 사용유무)

1. 객체를 생성할때 new 연산(생성자함수)를 해야하는 객체

   • 날짜객체 : Date()
   • 변수를 생성해서 객체를 담아서 사용

     1 2 3

     let day = new Date(); //변수에 담아서 사용 day.속성 //이렇게 사용해야함

2. new연산 없이 사용가능한 객체

   • 수학 : Math 객체 => Math.floor(버림), Math.round(반올림), Math.ceil(올림), Math.max(여러값비교해서 최대값), Math.min(여러값비교해서 최소값), Math.abs(절대값), Math.random(0부터 1사이에 있는 실수를 랜덤하게 출력)

     • 가장 자주 사용하는 것은 random이다
     • Math.floor(Math.random() *10)로 0부터 10까지의 랜덤양수를 출력한다

   • 숫자 : Number 객체

   • 문자 : String 객체

   • 배열 : Array 객체

   • 바로 사용가능

     1	Math.floor(); //변수에 담지않아도 바로 사용가능

ITWILL학원 : 7강 JS기초 BY 정규태강사

1. 무한반복문

반복문이 무한으로 실행되는 반복문.
문제의 해결이 언제 끝날지 모르는 경우에 주로 사용.

예를 들어,사용자가 정답을 맞출때까지 실행하는 퀴즈프로그램을 만들었다고 생각해보자
-> 사용자가 언제 정답을 맞출수있을지 알수있을까?
-> 모른다. 따라서 계속해서 실행을 하고 있어야한다
-> 이때 무한반복문 사용
-> 답을 맞추면 끝나야하기때문에 보조제어문이 필요하다

• 실제예시 : 스마트폰의 지문인식

1
2
3
4
5
6
7
8
9
10
11

for(;;){
 console.log("무한반복")
};

for(;true;){};

for(let i=1;;i++){};

while(true){};

do {} while(true);

2. 보조제어문

• break문 : 가장 가까운 반복문 하나를 탈출하는 코드다
  • 즉 이중for문이면 둘 다 탈출하는 것이 아니라 가장 가까운 for문만 탈출하는 것이다
  • break;의 순서에 따라 결과값이 달라지므로 위치가 중요하다
  • 예를 들어 : ~까지만 해라

1
2
3
4
5
6
7
8
9
10
11
12

for(let i=1; i<=10; i++){
	document.write(i+" ");
	if(i%4 === 0) break;
} //1 2 3 4

// break문은 순서가 중요하다
// 순서에 따라 값이 다르게 나오기 때문이다

for(let i=1; i<=10; i++){
	if(i%4 === 0) break;
	document.write(i+" ");
} //1 2 3

아래는 for문의 조건식으 true인 무한반복문이다
무한반복문과 함께 쓰이는 경우는 아래와 같다

1
2
3
4

for(let i=1;true;i++){
	if(i === 10) break;
	document.write(i+" ")
}

• continue문 : 해당 경우를 실행하지않고 다음 경우를 실행하는 동작
  • continue조건은 빼고 반복문을 실행하는 동작.
  • 예를 들어 : ~를 빼고 진행해라!할때 사용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

let sum=0,i=0

while(i<5){
	i++
	if(i==3)
		continue;
		sum=sum+i
	document.write("i값은 " + i + " sum값은 " + sum + "<br>")
 }
/* i값은 1 sum값은 1
i값은 2 sum값은 3
i값은 4 sum값은 7
i값은 5 sum값은 12 */

document.write("while문의 결과값 : "+sum) // 12

위의 두가지를 활용한 숫자퀴즈를 만들어보자

1. 특정숫자 미리 지정 (1부터 100까지 중에서)
2. 사용자로부터 입력 -> 미리 지정한 숫자와 큰지, 작은지 같은 지를 비교
3. 큰 경우 -> “입력된 값이 큽니다” 출력
4. 같은경우 -> “정답입니다 도전횟수는 땡땡입니다” 출력
5. 작은 경우 -> “입력된 값이 작습니다” 출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

let quiz = Math.floor(Math.random()*100); //랜덤숫자만들기
console.log("랜덤숫자 정답은? "+ quiz)
let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

for(let count=1; true; count++){
	if(quiz > input){
		input = prompt("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요");
	}else if(quiz < input){
		input = prompt("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		input = prompt("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

강사님 코드는 아래와 같다
굳이 input을 for문 밖에 두는 것이 아니라 안에 두기만 하면 되는 거였다
괜히 일일히 input = prompt를 적었다… 띠용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let quiz = Math.floor(Math.random()*100);
console.log("랜덤숫자 정답은? "+ quiz)

for(let count=1; true; count++){
	let input = prompt('텔레파시를 보냈습니다~ 숫자를 입력하세요');

	if(quiz > input){
		alert("텔레파시숫자보다 작습니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz < input){
		alert("텔레파시숫자보다 큽니다. 숫자를 다시 입력해주세요. 시도횟수 " + count +"회");
	}else if(quiz == input){
		alert("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		document.write("정답은 " + quiz + ", " + count + "회 시도만에 정답!")
		break;
	}else{
		alert("잘못입력하였습니다. 숫자를 다시 입력해주세요");
	}
}

3. Function 함수 : 일반, 익명

함수는 절차지향언어에서 사용되고 매서드는 객체지향언어에서 사용된다.
엄밀히 따지면 다른 개념이지만 크게 보면 동일하게 사용되기도 한다.
익명함수는 보통 변수에 넣어서 사용한다

• 변수 : 데이터를 저장해서 사용하는 곳
• 함수 : 실행문을 저장해서 사용하는 곳

1. 일반함수
   일반적으로 함수는 아래와 같이 선언과 사용한다.

1
2
3
4
5
6
7

//1. 일반함수 선언
fuction 함수명(매개변수){
	실행코드
}

//2. 일반함수 호출
함수명();

2. 익명함수
   익명함수의 선언과 사용은 아래와 같다.
   익명함수는 함수명이 없기때문에 변수이름으로 호출하면 된다.
   보통 익명함수는 1회성으로 주로 사용한다

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//1. 익명함수 선언
 변수 = fuction (매개변수){
	실행코드
}

//2. 익명함수 호출
변수명();

//3.예시

let fun1 = function (){
	document.write("하이")
}
fun1() //하이

4. 재귀함수

재귀함수란 다시 자기자신을 호출하는 함수이다.
재귀함수는 반복문없이 계속 반복된다 따라서 사용범위를 주의해서 사용해야한다
재귀함수는 일정크기만큼만 실행되고 자동적으로 멈춘다.

return을 이용해 함수를 탈출할수있다

1
2
3
4
5
6
7
8

//1. 재귀함수 선언
fuction 함수명(매개변수){
	실행코드;
	함수명(); //자신의 이름 또 호출
}

//2. 재귀함수 호출
함수명();

재귀함수를 활용하여 1~10까지 숫자를 나타내는 함수예제를 보자

1
2
3
4
5
6
7
8
9
10
11

let num=0;
function testFun(){
	if(num < 10){
		num++;
		document.write(num + " ")
		testFun();
	}else{
		return;
	}
}
// 1 2 3 4 5 6 7 8 9 10

강사님은 더 짧은 코드를 썼다
나는 왜 이 코드를 못했을까?

뭔가 더 간단해보인다.
무슨 코드가 더 좋은 코드일까?

가독성이 좋지만 긴 코드 vs 가독성이 조금 떨어지지만 짧은 코드

아직 잘 모르겠다. 아마 회사 분위기에 따라 다르지 않을까?

1
2
3
4
5
6
7
8
9
10

let num1 = 0;
function testFun2(){
	num1++;
	document.write(num1 + " ")
	if(num1 === 10){
		return;
	}
	testFun2();
}
// 1 2 3 4 5 6 7 8 9 10

5. 지역변수를 전역범위에서 쓰는 방법

지역변수를 전역변수처럼 쓸 수 있을까?
정답은 예스!
return을 이용한 예시를 보자

1
2
3
4
5
6
7
8
9

let number = 200;

function fun() {
	var number = 300;
	return number;
}

number = fun();
document.write(number) //300

number의 값은 200이 아니라 300이 나온다.
지역변수를 함수로 만들고 그 값을 전역변수 안에 넣었기 때문이다.

6. 내장함수

자바스크립트엔진에는 내장되어있는 함수들이 있다.

예시

• String(1)
• Number(“1”) => number는 정수와 실수를 합친 것으로 표현됨
• Boolean(0) =>
• alert(“경고창”)
• prompt(“질문”, “기본값”)
• confirm() => yes, no 결정
• parseInt() => 문자데이터를 정수데이터로 변경
• parseFloat() => 문자데이터를 실수데이터로 변경

ITWILL학원 : 6강 JAVA BY 윤미영강사

1. 리터럴(literal)

실제 값.
변수의 값이 변하지 않는 데이터(메모리 위치안의 값)이다.

참고링크 : 상수와 리터럴차이

2. byte + byte가 왜 에러날까

b1과 b2는 연산결과는 잘 나오지만 b3의 연산결과는 에러가 난다.

1
2
3
4
5
6
7

byte b1 = 10;
byte b2 = 20;
System.out.println(b1+b2); //30

byte b3 = b1+b2;
System.out.println(b3); //Type mismatch: cannot convert from int to byte

산술연산자는 기본적으로 int형이다. 그래서 type mismatch가 나타난다
int형으로 산술하면 잘~출력된다

1
2
3
4

int i1 = 100;
int i2 = 200;
int i3 = i1+i2;
System.out.println(i3); //300

3. int VS Integer

아래 데이터형의 차이점이 뭘까?

• int a; 기본데이터형
• Integer i; 참조데이터형
  • 라이브러리
  • 매서드사용가능

1
2
3
4
5
6

int a1 = 100;
Integer a2 = 100;

System.out.println(a2.toString()); //100
System.out.println(Integer.MAX_VALUE); //2147483647
System.out.println(Integer.MIN_VALUE); //-2147483648

4. void와 int차이

void와 int 매서드의 차이를 알아보자
public static 뒤에 void가 오기도하고 int등 다른 데이터타입이 올 수 있다.

• void의 의미 : myPrint가 가지고 있는 값이 없을때, 돌려줄값이 없을때 return이 없을때 사용.
• int의 의미 : 반대로 가지고있는 값이 있을때, 돌려줄값이 있을때. return과 함께 사용

1
2
3
4
5
6
7

public static void 매서드이름(매개변수){ //void 매서드 정의하기
	System.out.println("void 매서드")
}

public static int 매서드이름(int 변수명1, int 변수명2){ //int 매서드 정의하기
	return 변수명1 + 변수명2;
}

SQL select as from where

ITWILL학원 : 5강 JAVA BY 윤미영강사

1. 기본 반복문암기

1. 1~10까지 나열하기

1
2
3

for(int i=1; i<=10; i++){
	System.out.print(i);
} //12345678910

2. 누적합구하기

1
2
3
4
5

int sum = 0;
for(int i=0; i<=10; i++){
	sum+=i
} 
System.out.println(sum) //55

3. 카운트세기
   자주 사용하는 카운트 세기 반복문

1
2
3
4
5

int count = 0;
for(int i=1; i<=10; i++){
	count+=1;
}
System.out.println(count); //10

2. 자바에서의 String인지 체크(typeof)

자바에서는 typeof는 없고 각 데이터별로 체크할 수 있는 방법이 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 1. 사용자로부터 입력받아오자
String [] str = new String[3];
Scanner sc = new Scanner(System.in);

for(int i=0; i<str.length; i++){
	str[i] = sc.next();
}

// 2. 사용자가 입력한 데이터가 string인지 체크

String s = Arrays.toString(str);
if( s instanceof String) {
	System.out.println('참');
}else{
	System.out.println("거짓");
}

3. N개의 양수를 받아 최대값 출력

scanner로 사용자로부터 양수 n개를 받아 그 중 최대값을 화면에 출력해보자
기본적으로 양수 n개를 받는 코드를 작성하면 아래와 같다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Scanner sc = new Scanner(System.in);
System.out.println("양수 5개를 입력하세요");
int [] num = new int[5];

for(int i=0; i<num.length; i++){ //1. 숫자 5개 입력받기
	num[i] = sc.nextInt();
}

for(int i=0; i<num.length; i++){ //2. 양수인지 체크(정수전체에서 max를 구하고싶다면 이부분을 없애면된다)
	if( num[i] > 0){
		System.out.print(num[i]+ " ");
	}else{
		System.out.print("양수아님 ");
	}	
}System.out.println();

이제 두가지 방법으로 최대값을 구해보자

1. 첫번째 방법 : 삼항연산자 사용

1
2
3
4
5
6
7

int max = num[0];

for( int i = 1;  i < num.length; i++) { //최대값구하기
	max = num[i] > max ? num[i] : max;
} 

System.out.println("최대값은 : "+ max);

2. 두번재 방법 : if문 사용

   1 2 3 4 5 6 7 8 9 10

   int max = num[0]; for(int i=1; i<num.length; i++){ if(max > num[i]){ max = max; }else{ max = num[i]; } } System.out.println("최대값은 : "+ max);

위의 코드를 자세히보자. 리팩토링할 부분이 보인다.
max가 가장 큰 수 인 경우 굳이 동일값(max = max;)을 대입할 필요가 없다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

int max = num[0];

for(int i=1; i<num.length; i++){
	if(max < num[i]){
		max = num[i];
	}
}
System.out.println("최대값은 : "+ max);


// 위의 식을 간단하게 {} 중괄호를 생략할 수 있다
// 중괄호생략은 블록안의 내용이 한줄일때 생략가능하다


for(int i=1; i<num.length; i++){
	if(max < num[i]) max = num[i];
}
System.out.println("최대값은 : "+ max);

중괄호를 생략하니 세상 간단간단해보인다

4. char와 String의 차이점 산술연산자

char는 연결연산자가 사용이 안된다.
String이 어느 한 변수 이상에 있는 경우에는 연결연산자가 사용이 된다.
캐릭터에서 연결연산자를 사용하고싶으면 변수들 사이에 “”를 입력해줘야한다.

1
2
3
4
5
6

char c1= 'a', c2= 'b';
System.out.println(a + b); //195


String c1= 'a', c2= 'b';
System.out.println(a + b); //ab

만약 char를 ab로 나타내고 싶다면 변수들 사이에 “”해주면 된다

1
2

char c1= 'a', c2= 'b';
System.out.println(a +""+ b); //ab

반복문 : for

반복문의 기본식은 아래와 같다

1
2
3

for(초기식; 조건식; 증감식){
	반복문장
}

if나 for 문은 중괄호{} 없이도 반복이 된다. 하지만 세미콜론;전까지의 한줄만 반복한다

반복문의 순서

1. 초기식

2. 조건식

3. 반복문장

4. 증감식

5. 조건식

6. 반복문장

7. 증감식

8. 위의 3가지 반복

9. 조건식 (조건이 충족된 경우)

10. 반복문 종료

개발자 도구를 이용하여 간단한 디버깅을 할 수 있다

1. Sources탭에서 디버깅원하는 소스코드파일을 클릭 후 디버깅원한느 코드의 줄번호 앞부분 클릭 -> 빨간 점으로 표시됨
2. Block기준으로 변수의 값이 변화 확인 가능
3. 4번에 보이는 회색점을 클릭하면 빨간색점으로 변경됨 -> 점마다 break point가 걸려 순서를 세세하게 볼 수 있음
4. 옅은 파란 블럭이 이동하면서 코드 실행순서를 가시적으롭 보여줌
5. 디버깅이 끝났으면 꼭 줄번호 옆의 빨간색점을 체크해제해줘야 디버깅 모드가 중단된다

기본 반복문암기

기본적인 반복문은 암기해서 바로바로 쓰는 것이 좋다

몇씩 증감하는 반복문

1~10까지 짝수만 출력하는 반복문을 생각하자마자 나는 if조건이 들어간 for문을 생각했다

1
2
3
4
5

for(let i=0; i<=10; i++){
	if(i%2 !==0){
		document.write(' '+i);
	}
} // 1 3 5 7 9

강사님이 보더니만 결과값은 일치하지만 효율을 위해서 간단한건 조건문이 안들어간 반복문으로 나타내는 것이 좋다고했다.

음 그렇군! 오케이 접수!

1
2
3

for(let i=1; i<=10; i+=2){
	document.write(' '+i)
} // 1 3 5 7 9

for문안의 증감식을 변경하여 몇씩 증감한다고 하면 주로 위의 코드를 이용하면 된다!

누적합

정말 많이봐서 이제 익숙하다

1
2
3
4
5

let sum = 0
for(let i=0; i<=10; i++){
	sum+=i
} 
document.write(sum) //55

카운트

횟수를 셀 때 자주 사용한다

1
2
3
4
5

let count = 0;
for(let i=1; i<=10; i++){
	count+=1;
}
document.write(count); //10

for문과 if문의 자리바꿈에 따른 변화

사용자가 입력하는 숫자의 구구단을 출력하는 예시를 보자

1
2
3
4
5
6
7
8
9
10

let num = prompt('구구단 숫자를 입력하세요'); 

for(let i=1; i<=9; i++){
	if(num > 0){
		document.write(num + ' * '+ i +' = '+ (num*i)+ '<br>')
	}else{
		alert('잘못입력했습니다 1~9까지 숫자중에 입력하세요')
		break;
	}
}

위에서 num을 0이하로 입력했다면 alert창 띄우고 다시 숫자를 입력하도록 하게 하고싶었다. 근데 이 로직으로는 감이 잡히지않았다.
고민하다가 if와 for문의 자리를 바꿨다.
자리만 바꿨을 뿐인데 reload가 가능해서 굳이 새로고침하지않아도 다시 num을 입력할 수 있어 편하다

1
2
3
4
5
6
7
8
9
10

let num = prompt('구구단 숫자를 입력하세요'); 

if(num>0){
	for(let i=0; i<=9; i++){
		document.write(num + ' * '+ i +' = '+ (num*i)+ '<br>')
	}
}else{
	alert('잘못입력했습니다 1~9까지 숫자중에 입력하세요')
	location.reload();
}

반복문 : While

반복문 while의 기본식은 아래와 같다

1
2
3
4
5

초기식;
while(조건식){
	반복할문장;
	증감식;
}

증감식을 꼭 적어줘야 무한실행이 되지 않는다!

전위연산 VS 후위연산

전위연산과 후위연산은 잘 비교해야한다

1. 전위연산

   1 2 3 4

   let i=1; while(i++ <=4){ document.write(i+", ") } // 2, 3, 4, 5

   1. i = 1 -> 조건식 : 참 -> i++ -> write : 2
   2. i = 2 -> 조건식 : 참 -> i++ -> write : 3
   3. i = 3 -> 조건식 : 참 -> i++ -> write : 4
   4. i = 4 -> 조건식 : 참 -> i++ -> write : 5
   5. i = 5 -> 조건식 : 거짓 -> 종료

2. 후위연산

   1 2 3 4

   let i=1; while(++i <=4){ document.write(i+", ") } // 2, 3, 4,

   1. i = 1 -> ++1 라서 2 -> 조건식 : 참 -> write : 2
   2. i = 2 -> ++1 라서 3 -> 조건식 : 참 -> write : 3
   3. i = 3 -> ++1 라서 4 -> 조건식 : 참 -> write : 4
   4. i = 4 -> ++1 라서 5 -> 조건식 : 거짓 -> 종료

do-while()문

조건 비교하기 전에 한 번 실행후 조건을 비교한다

기본형태이다

1
2
3
4
5

초기식;
do{
	반복문장;
	증감식;
}while(조건식)

초기식과 증감식 없더라도 확인가능하다
아래는 예시이다

1
2
3
4
5
6

let i = 1;
do{
	document.write(i+" ");
	i++;
}while(i<=10);
// 1 2 3 4 5 6 7 8 9 10

예시: 구구단 세로로 나타내기

구구단을 가로가 아닌 세로로 나타내보자
세로로 만들려면 일단 가로로 먼저 만들수있어야한다

1. 구구단 가로출력

   1 2 3 4 5 6

   for(let dan=2; dan<=9; dan++){ document.write('<br>') for(let num=1; num<=9; num++){ document.write(dan+'*'+num+'='+(dan*num)+' ') } }

가로출력의 첫번째 반복은 dan이 고정이고 num이 1부터 9까지 변화한다
세로출력의 첫번째 반복은 num이 고정이고 dan이 2부터 9까지 변화한다

이 두 사실을 가지고 변수와 숫자를 적절히 바꾸어주면 된다

2. 구구단 세로출력

for문과 이중for문으로 만든 코드이다

1
2
3
4
5
6
7
8
9
10

for(let i=2; i<=9; i++){
	document.write('    <' + i +'단>  ')
}

for(let dan=1; dan<=9; dan++){
	document.write('<br>') 
	for(let num=2; num<=9; num++){
		document.write(num+'*'+dan+'=   '+(dan*num)+', ')
	}
}

아래 이미지파일을 보면 왼쪽이 출력값이고 오른쪽이 소스코드이다

이중for문 하나로 만들 순 없을까?

당연히 만들수있다! if를 이용하면 된다!

1
2
3
4
5
6
7
8
9
10
11

for(let num=0; num<=9; num++){	
	for(let dan=2; dan<=9; dan++){
		if(num == 0){
			document.write('    <' + dan +'단>  ')
		}else{
			document.write(dan+'*'+num+'=   '+(dan*num)+', ')
		}
	}
	document.write('<br>') 
}

반복문으로 테이블만들기

테이블만드는 방법도 다양하다

테이블은 행x열(4x3)이고 각 칸안에는 1~12까지의 수를 넣은 테이블을 만들어보자

1. 이중 for문 사용

   1 2 3 4 5 6 7 8 9 10 11 12 13

   let tageOpen="<table border='1'>" let tageClose="</table>" document.write(tageOpen) let count = 0; for(let tr=1; tr<=4; tr++){ document.write('<tr>') for(let td=1; td<=3; td++){ document.write('<td>' + (count+=1) + "</td>") } document.write('</tr>') } document.write(tageClose)

2. tag로 테이블만들기

   1 2 3 4 5 6 7 8 9 10 11 12 13

   let tageOpen="<table border='1'>" let tageClose="</table>" let trtdtag; let count1 = 0; for (let i=1; i<=4; i++){ trtdtag += "<tr>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "<td>" + (count1+=1) + "</td>"; trtdtag += "</tr>" } document.write(tageOpen + trtdtag + tageClose )

아래와 동일 테이블이 만들어진다.

제약조건명 생성시 문법 2가지

제약조건명 생성시 oracle에서 권장하는 이름작성 방법이 두가지(컬럼레벨문법과 테이블레벨문법)가 있다.

ITWILL학원 : 4강 JAVA BY 윤미영강사

1. Method

괄호가 있으면 다 메서드라고 부른다
매서드는 항상 Class라는 주인이 있어야 한다.

다른 사람이 만들어 놓은 매서드를 사용할 수 있다. = 라이브러리라고 부른다

예시

• main() : 메인매서드
• println() : OutputStream이라는 라이브러리안에 정의되어있는 매서드
• Scanner sc = new Scanner(System.in) sc.next(); InputStream 라이브러리에 정의되어 있는 next()매서드

2. 변수와 상수

1. 변수
   변하는 값.
   값을 저장할 수 있는 메모리 위치.
   변수를 사용하기위해서는 항상 변수선언을 데이터타입과 함께 먼저 해줘야한다.

2. 상수
   변하지 않는 하나의 값
   앞에 final이 붙는다

• 예시 PI : 3.141592…
• 사용법 : final double PI = 3.141592;

3. 배열 Array

배열이란 쉽게말해 여러개의 변수를 한꺼번에 선언하는 것이다
변수를 선언한다는 것은 메모리에 a변수가 생성이 된다는 의미이다.
배열에서는 변수갯수를 선언할 수 있다 -> int [] ar = new int[10]는 메모리에 10개의 정수 변수 생성된다는 의미이다

여기서 주의할 점은 ar1의 데이터타입은 int가 아님을 명심하자!
int[]의미는 int를 관리한느 배열타입이지 int타입이 아니다.
ar1의 데이터타입은 기본형에 포함되지않는 참조형의 데이터타입이다.

배열객체를 생성하기 위해서는 new키워드와 함께 어떤 데이터를 몇개나 저장할지에 대한 정보가 필요하다.
그렇다면 new키워드란 무엇일까?
아래 잘 설명한 블로그가 있어서 가져왔다.
참고링크 : 자바 변수들의 메모리 구조,new 키워드

배열변수선언에는 두가지 방법이 있다

3-1. 첫번째 배열선언 방법

배열생성과 배열갯수만 선언하는 방법이다
int [] ar1 = new int[3]로 배열과 배열갯수를 한꺼번에 선언. 초기화는 안됨!

1
2
3
4
5
6
7
8
9
10
11
12
13

int [] ar1;  //배열생성 : 메모리에 a변수 생성

ar1 = new int[3];  //배열갯수선언. 메모리에 3개의 정수 변수 생성. 값을 넣어주지않기때문에 초기화는 아니다

// 1번과 2번을 합쳐서 한줄로 많이 쓴다
int [] ar1 = new int[3]; // 초기화하지 않은 배열은 기본적으로 0의 값을 가진다
	ar1[0] = 0;
	ar1[1] = 0;
	ar1[2] = 0;
	
for(int i=0; i<ar1.length; i++){
	System.out.print(ar1[i]);
} //000

데이터형마다 기본값이 다르다
기본데이터형이 아닌 참조데이터형인 경우 기본값이 다르다

• 기본데이터형의 기본값은 데이터형에 따라 다르다
  • int 는 0
  • double은 0
  • char는 ‘’(빈칸)

1
2
3
4

char [] chs = new char[2];
	for (int i=0; i<chs.length; i++){
		System.out.println(chs[i]);	
	} //00 - 유니코드 -> ''''(빈칸2개)

• 참조데이터형의 기본값은 null (자바언어의 예약어이고 실제 값이 없다는 의미이다)
  • string은 null

1. String형

1
2
3
4

String [] str = new String[3];
for (int i=0; i<str.length; i++){
	System.out.print(str[i]);
} // nullnullnull

2. 참조형
   기본적으로 같은 타입을 한 배열에 넣을 수 있다.

1
2
3
4
5

Person[] p = {new Person, new Person};

SpiderMan[] sp = {new SpiderMan, new SpiderMan};

AquaMan[] aq = {new AquaMan, new AquaMan};

타입이 다른 참조형데이터를 하나의 배열에 넣을 순 없을까?
다형성을 이용하면 가능하다.
상속관계인 경우에만 타입이 다른 참조형데이터를 하나의 배열에 묶을 수 있다.

1
2
3
4
5
6

Person[] p = {new Person. new Person}

Dobject d = new Dobject[3];
d[0] = new Line();
d[1] = new Circle();
d[2] = new Reat();

3-2. 두번째 배열선언 방법

배열생성과 초기화를 한꺼번에 선언하는 방법이다

int [] ar2 = {10, 20, 30}

여기서는 new int[5]를 하지않아도 된다 왜냐면 위의 코드 자체에 변수갯수선언이 포함되어있다
이 방법은 테스트용으로 주로 사용할뿐 실무는 new int[]형태로 사용한다

1
2
3
4
5

int [] ar2 = {10, 20, 30}; //배열생성과 초기화 한꺼번에!

for(int j=0; j<ar2.length; j++){
	System.out.println(ar2[j]);
}

3. 위의 두 방법의 차이점
   일반적으로는 new int[]형태를 더 많이 쓰인다
   왜냐하면 보통 다른 파일이나 데이터베이스의 내용을 가져오기 때문에 변수갯수가 정해져있다.
   배열을 사용하려면 항상 크기를 미리 알아야한다.
   만약 배열의 크기를 모른다면 쓸 수 있는 가장 큰 수를 적어주면되지만 대신 메모리를 많이 잡아먹는다.
   그래서 사용하는 것이 Collection(컬렉션)이다

• Collection 컬렉션 :
  • 참조형데이터형태
  • 배열과 같은 역할을 하지만 크기를 모를때 사용
  • 정적 메모리 할당이 아닌 동적 메모리 할당이 되어서 필요한 만큼 공간을 계속 추가할수있다
  • 컬렉션참고링크

목록 태그

HTML 목록 종류 3가지

-<ol>태그 : Ordered List 순서 있는 목록
-<ul>태그 : Unordered List 순서 없는 목록
-<li>태그 : 정의 목록

목록을 <ol>태그로 만들든 <ul>태그만들든간에 <li>태그는 항목을 나타내므로 모든 곳에 필수로 들어가야한다

1
2
3
4
5
6
7
8
9
10
11
12

<ol>
    <li>배</li>
    <li>부</li>
    <li>르</li>
    <li>니</li>
</ol>
<ul>
    <li>잠</li>
    <li>이</li>
    <li>온</li>
    <li>다</li>
</ul>

목록태그 앞의 모양 바꾸기

• ol태그 : 1/a/A/i/I
  

• ul태그 : disc/circle/square/non
  

정의 태그

<dl>태그는 <dt>태그 <dd>태그가 세트이다

<dt>태그 는 정의내리는 대상
<dd>태그 는 정의 내용

사실 잘 사용하지 않는 태그지만 기억해두면 필요할때 요긴하게 쓸 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<h2> 자신을 4가지 관점으로 정의</h2>
<dl>
	<dt>E</dt>
	<dd>외향적 : 에너지가 밖으로 흐르며 사람을 만나는 것을 좋아하고 사람을 만남으로써 에너지를 얻는다.<br>
		반대성향으로는 I 내향적이 있다.       
	</dd>
	<dt>N</dt>
	<dd>직관적 : 숲을 보려는 경향이 있고 아이디어나 육감에 의존하며 주의 초점은 미래와 가능성이다. 따라서 미래지향적으로 새로운 시도를 하는 것을 좋아하며 가능성과 의미를 추구하고 변화와 다양성을 좋아한다<br>
		반대성향으로는 S 감각형이 있다. 이는 나무를 보려는 경향으로 실재의 경험, 오감에 주의초점이 있어 현실 수용과 관례를 따르는 결향이 있다.        
	</dd>
	<dt>F</dt>
	<dd>감정형 : 주관적 판단에 의존하며 주된 관심주제는 사람, 관계이다<br>
		반대성향은 T 사고형이있으며 객관적 판단에 의존하고 주된 관심주제는 사실과 진실이다.           
	</dd>
	<dt>J</dt>
	<dd>판단형 : 정리정돈과 계획성이 있다 뚜렷한 기준과 자기의사가 있으며 신속한 결론을 내리고 분명한 목적의식이 있다.<br>
		반대성향으로는 P 인식형이 있고 상황에 맞추는 개방성과 목적과 방향의 변화가 상대적으로 쉽다.  
	</dd>
</dl>
</dl>

글자 관련 태그

1
2
3
4
5
6
7
8

small tag : <small>Make font size smaller </small>

sup tag : <sup>supppp 윗첨자</sup>(ex)300m<sup>2</sup>의 땅이 있었으면 좋겠다

sub tag : <sub>subbbb 아래첨자</sub>
(ex)내가 아는 원소기호는 H<sub>2</sub>O

mark tag : <mark>형광펜효과</mark>