파이썬 인강 자기계발 챌린지 20회차 미션

nomal flow에서 벗어나 복잡한 방식의 레이아웃을 하는 방법에 대해 알아보자.
크게 두가지 속성으로 사용할 수 있다.

• float

• position

1. float

float로는 정교한 레이아웃을 작성할 수 있다.
float는 이름그대로 띄우는, 뭔가 떠있는 배치이다.

먼저 비교를 위해 아무것도 적용안된 레이아웃을 보자.
일반적인 단락을 나눈 줄글의 형태이다.
가로로 나눠진 단락을 세로로 나누고싶을때 float가 유용하다.

이제 float는 left와 right로 줄 수 있는데 아래 이미지는 float : left;로 적용한 모습이다.
아래 이미지에서 알 수 있듯이 해당 태그가 왼쪽으로 띄어지고 밑에 배치되었던 줄글이 태그옆으로 옮겨지면서 자연스럽게 흘러내려가는 형태를 취하고 있다

여기서 footer가 조금 아쉽다.
column 3개에만 float : 30%;씩 적용해주었는데 10%가 남다보니 footer의 위치가 어색하게 되어버렸다.
따라서 column들만 float left로 주고 footer는 하단에 배치하고싶다면 아래와 같이 clear : both; 속성을 넣어주면 된다.

clear는 left, right, both 의 값을 선택할 수 있고 해당 사이드에 float정렬을 취소한다.
따라서 현재상황에서는 clear : left; 또는 clear : both; 로 같은 결과값을 출력할 수 있다.

짜잔- 세상 깔끔하다!

2. position

1. static

postion 속성의 default 값이다.
HTML 태그 순서에 따라 화면에 출력된다.

2. relative

원래 위치를 기준으로 상대적인 위치를 지정해줄 수 있다.

position : relative;로는 어떠한 값도 바꿀 수 없다.
그 밑에 꼭 top, bottom, left, right의 값을 통해 어디를 얼만큼 이동할 것인지 정할 수 있다.
여기서 중요한 점은 태그의 원래 위치는 변하지 않는다는 것이다. 없어지지 않고 기억되어져 있다.

하트의 위치에서 top과 left에 100씩 값을 주어서 하트가 글 위로 오게되었다.
여기서 쉽게 헷갈릴 수 있는 점이 있다.
바로 하트가 top과 left로 100씩 움직이는 것이 아니라, top과 left에 100씩 빈 공간을 준다고 생각하면 된다.
빈 공간만큼 원래 태그는 밀려나게된다.

3. absolute

relative와 비슷하지만 차이점이 있다면 relative는 원래 태그자리를 빈공간으로 유지하는데 반해, absolute 원래 태그자리를 없애버리고 상대적인 위치에 위치한다.
absolute는 상위태그를 기준으로 상대적인 위치를 정한다.

4. fixed

absolute와 상대적인 위치를 가진다는 것은 비슷하지만 상위태그기준이 아닌 veiwport(웹페이지가 보이는 화면)을 기준으로 뷰포인트의 특정 위치에 태그를 고정한다. 따라서 스크롤을 내려도 태그는 같은 위치에 고정되어있다.

3. css선택자 우선순위

선택자는 총 3종류가 있다.

id선택자 > class선택자 > tag선택자

만약 id와 tag에 둘다 css값이 적용되어 있으면 id클래스가 우선이므로 tag값에 덮어씌어져서 id 클래스값이 출력되게 된다.

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(); //변수에 담지않아도 바로 사용가능

파이썬 인강 자기계발 챌린지 19회차 미션

1. font-size

폰트 사이즈를 지정하는데 크게 가지방식이 있다.
직접 수치를 입력하는 방식과 상위요소 기준 상대적수치를 적용하는 방식 그리고 상속값을 적용하는 방식이다.

1
2
3
4
5

{
font-size : 15px; //직접 입력.
font-size : 1.5rem; //상위요소 기준 상대적 수치.
font-size : inherit; //상속값 위의 태그의 폰트사이즈를 그대로 받는다.
}

em과 rem의 차이?

css다루다보면 em과 rem을 접하게 된다.
나는 항상 px이나 %단위로 직접 수치를 입력하여 지정하였는데 em, rem을 사용하면 상대적인 수치가 자동적으로 정해져서 훨씬 디자인이 깔끔하고 통일성있어보이기도 한다.
그렇다면 em과 rem의 차이는 무엇일까?
둘 다 수치를 직접적으로 입력하는 방식이 아니다.

• em : 상위요소의 크기에 비례.
• rem : 최상위 요소의 크기 즉, html 요소 크기에 비례.
• 참고로 html 요소 크기의 기본값은 웹브라우저 설정에서 정한 크기이며 보통 16px이다.

결국 둘의 차이점은 최상위요소의 크기인지 상위요소의 크기인지의 차이다.
언뜻 읽으면 큰 차이가 없을 것 같지만 만약 em의 상위요소가 또 다른 상위요소에 상속을 받았다면 원하는 크기로 지정이 어려울 수 있다. 왜냐면 em은 상속의 영향을 받기 때문이다.

따라서 rem을 쓰는 것을 더 추천한다. 다만 rem을 쓰면 사용자가 커스터마이징해놓은 사이즈를 무시해버려서 사용자의 가독성을 오히려 떨어뜨릴수있다.

따라서 적절한 곳에 em과 rem을 쓰는 것이 좋다

그럼 언제 rem과 em을 써야할까?

참고링크 : 종합 안내: Rem 그리고 Em, 언제 써야 할까

• em 단위는 최상위 요소에 지정된 폰트 크기 말고, 다른 특정 요소의 폰트 크기에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• rem 단위는 em 단위를 쓸 필요가 없고, 또 브라우저의 폰트 크기 설정에 따라 그 크기가 변해야 하는 곳에 사용하십시오.
• 폰트 크기 지정을 비롯해서 꼭 em 단위를 써야 하는 곳이 아니라면 rem 단위를 사용하십시오.
• media queries에도 rem 단위를 쓰세요.
• 다중 칼럼 레이아웃의 너비에는 em 혹은 rem을 쓰진 마십시오 - 대신 %를 쓰세요.
• 만약에 크기가 변할 경우 해당 요소의 레이아웃이 깨지는 걸 막을 수 없다면 em과 rem 모두 쓰지 마세요.

2. font-family

폰트패밀리는 글꼴집합이다.
만약에 폰트를 하나를 지정했다고 생각해보자.
이용자가 해당 폰트가 없으면 폰트를 기본값으로 표시되어진다.

• serif는 바탕체계열
• Sans-serif는 고딕체계열
• Cursive는 필기체계열
• monospace는 가로 폭이 동일한 글꼴

아래는 폰트패밀리예시이다

1
2
3

{
font-family : Arial, Georgia, Times, "Times New Roman", serif
}

위에서 말했듯이 이용자의 컴퓨터에 지정한 폰트가 설정되어 있지 않으면 기본값으로 표시된다.
이러한 경우에는 아예 웹 폰트를 사용하면, 이용자의 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있다.

웹폰트 사용 방법은 html에서 link태그로 삽입하면된다.

1
2
3
4
5
6
7
8
9
10

<link href="https://fonts.googleapis.com/css?family=Indie+Flower|Londrina+Outline|Open+Sans+Condensed:300" rel="stylesheet">

<style>
  #font1{
	font-family: 'Open Sans Condensed', sans-serif;
  }
  #font2{
	font-family: 'Indie Flower', cursive;
  }
</style>

참고링크 : 웹폰트 생활코딩

3. font 한꺼번에 적용

위에서 사용했던 폰트스타일이외에도 다양한 폰트스타일을 한 줄 코드로 작성할 수 있다
중요한 점은 아래 순서대로 작성해야 제대로 적용이 된다

1

font : 폰트스타일 폰트웨이트 폰트사이즈 폰트패밀리

적용된 예시는 아래와 같다
표시를 한 순서대로

• 1번에는 폰트스타일
• 2번에는 폰트웨이트
• 3번에는 폰트사이즈
• 4번에는 폰트패밀리

4. font color

폰트 컬러지정은 그냥 color적어주면 된다

• rgba(0,0,0) : 숫자가 작을수록 어두운 색을 띈다 = 검정색 = #000000
• rgba(255,255,255) : 숫자가 높을수록 밝은 색을 띈다 = 흰색 = #ffffff

폰트의 투명도도 조절할 수 있다.
rgba색상코드에서 마지막에 0에서 1사이의 숫자를 정해주면 된다

• 0 : 완전투명
• 0.5 : 절반만 투명
• 1 : 불투명

1
2

color : rgba(0,0,0, 0.5)
// 검정색컬러에 절반만 투명

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

1. Date객체

Date 객체의 특징

• 년,월,일 지정해서 객체를 사용
• 0부터 11까지를 1월부터 12월로 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

//참고로 today는 2020년 6월 12일이다.
let today = new Date();
document.write(today+"<br>")

let day = new Date(2020,0,1); //month숫자를 0에서부터 세기때문에 1월1일은 0,1이 되어야함 
document.write(day+"<br>")

let day1 = new Date(2020,1,1); //2월1일
document.write(day1+"<br>")

let day2 = new Date(2020,0,1,11,30,5); //년,월,일,시,분,초 지정해서 객체사용가능
document.write(day2+"<br>")

let day3 = new Date(2020,0,1,11,61,5); //분에 61분을 적으면 자동으로 1시간이 올라감
document.write(day3+"<br>")

let day4 = new Date("2020/1/1") //년,월,일만 가능. 시분초불가. 월을 나타낼때 0부터가 아니라 1부터 시작
document.write(day4+"<br>") 

// 출력값 순서대로
Fri Jun 12 2020 11:14:44 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Sat Feb 01 2020 00:00:00 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 11:30:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 12:01:05 GMT+0900 (대한민국 표준시)
Wed Jan 01 2020 00:00:00 GMT+0900 (대한민국 표준시)

변수에 저장한 date객체를 가져와서 사용해보자
요일출력하는 getDay()의 경우 0(일)부터 6(토)까지를 나타낸다.

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

//참고로 today는 2020년 6월 12일이다.
let today = new Date();

document.write(today.getFullYear() +"<br>") //년출력 year말고 fullyear써야함
document.write(today.getMonth() +"<br>")  //월출력 (0부터 11까지)
document.write((today.getMonth()+1) +"<br>") //알아보기쉽게 1을 추가해서 사용
document.write(today.getDate() +"<br>") //일출력
document.write(today.getDay() +"<br>") //요일출력

// 출력값 순서대로
2020
5
6
12
5

숫자로 들어온 요일을 글자로는 어떻게 바꿀수있을까?
여러가지 방법이 있다

1. Array의 index 활용
   요일이 숫자로만 출력되어 아쉬운 경우에는 변수에 넣어 index를 이용하여 아래처럼 금요일 이렇게 출력되게 할수있다

1
2
3

let today = new Date();
let week = new Array('일', '월', '화', '수', '목', '금', '토')
document.write(week[today.getDay()] + "요일 <br>")

2. 제어문사용 (if나 switch)
   if나 switch를 통해 일일히 조건을 걸어 나열할수있다
   if는 많이 써보았으니 switch를 써보자

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

function getToDay(day) {
	switch (day){
	case 0 : 
		document.write('일요일')
		break;
	case 1 : 
		document.write('월요일')
		break;
	case 2 : 
		document.write('화요일')
		break;
	case 3 : 
		document.write('수요일')
		break;
	case 4 : 
		document.write('목요일')
		break;
	case 5 : 
		document.write('금요일')
		break;
	case 6 : 
		document.write('토요일')
		break;
	}
}

getToDay(today.getDay())

2. 디데이 계산하는 함수 구하기

Date()객체를 활용하여 디데이를 계산한느 함수를 구해보자
Date()객체에서는 사칙연산이 적용되는데 단위가 밀리초로 출력된다

• 밀리초 = 1/1000초
• 1초 = 1000msc
• 1분 = 60 * 1000
• 1시간 = 60 * 60 * 1000
• 하루 = 24 * 60 * 60 * 1000

1
2
3
4
5
6
7
8
9
10

function calculator(year, month, day){
	let today = new Date();
	let lastday1 = new Date(year,(month-1),day) //컴터는 0월부터계산하니까 사용자입력값에서 1을 빼줌
	console.log(lastday1)
	let result =  (lastday1 - today) / (24 * 60 * 60 * 1000);
	document.write(Math.ceil(result) + "일 남았습니다 <br>")
}

calculator(2020,12,31); //202일 남았습니다
calculator(2020,06,14); //2일 남았습니다

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>

파이썬 인강 자기계발 챌린지 18회차 미션

HTML은 자주 공부했기때문에 약간 지루했지만…. 여전히 내가 몰랐던 내용이 있어서 해당 부분을 정리하고자한다.
알고있는 내용들은 이번 기회에 아예 외워버려야겠다.

1. 정의태그 dl, dt, dd 태그

어떠한 정의를 내리고 싶을 때 dl, dt, dd 태그를 사용한다.
자동으로 들여쓰기가 40px이 되어있다. 이때문에 들여쓰기의 거리를 조절하고 싶으면 text-indent나 margin-left, padding-left 속성값을 변경하면 된다.

• dl : definition list의 약자이다. 내부에 2개의 태그(dt, dd)를 포함하며 dt는 생략가능하지만 dd는 꼭 포함되어야한다.

• dt : definition term의 약자이며 정의하고싶은 용어의 제목을 나타낸다

• dd : definition description의 약자이며 용어의 내용을 나타내며 dl안에 필수로 들어가야한다.

1
2
3
4

<dl>
	<dt>정의하고싶은 용어의 제목</dt>
	<dd>정의할 내용</dd>
</dl>

아래 이미지는 왼쪽은 코드, 오른쪽은 그 코드출력값을 나타낸다.
1번 부분처럼 dl dt, dd를 단순하게 활용할 수 있다.

실제 포털사이트에서 이용하는 예시도 아래 링크에서 찾을 수 있다.
스크린리더이용자를 위해 dl dt dd태그를 남용해서는 안되겠다.
모두에게 공정한 정보를 제공할 수 있는 사이트를 만들고싶다.

참고링크 : dl dt dd 태그예시와 dl dt dd 태그를 남용하지마세요

2. code 태그

코드태그는 컴퓨터 코드(code)의 일부분을 나타내주는 코드이다. 그래서 컴퓨터나 프로그래밍코드일부를 그대로 표시하고자할때 유용하다.

1
2

<p>다음은 자바 코드의 일부분입니다. </p>
<code>System.out.println("헬로자바"); </code>

위의 이미지에서 2번부분을 보면 code태그안에서 html태그를 표현하고싶을때, 여전히 꺽쇠는 표현이 되지 않는다. 그래서 왼쪽꺽쇠(<)의 유니코드인 <를 사용했고
오른쪽꺽쇠인(>)의 유니코드인 >를 사용했다.

나는 마크다운으로 블로그를 작성하는데 항상 code표현을 백틱으로 이용해왔다. code태그 알아두면 html에서 유용하게 쓸 수 있다.

3. block요소와 inline요소 그리고 inline-block요소의 차이

• block 요소
  • 줄바꿈이 이루어진다.
  • 기본적으로 가로폭 전체의 넓이를 가지는 직사각형 형태가 된다.
  • width, height, padding, margin 등을 적용 가능.
  • text-align이 적용 불가능.
  • vertical-align이 적용 불가능.
  • 예시 : article, dd, div, dl, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, noscript, ol, p, pre, section, table, ul 등등

1
2
3

div {
display : inline
}

• inline 요소
  • 줄바꿈이 이루어지지않는다.
  • 기본적으로 콘텐츠가 끝나는 지점까지의 길이를 가진다.
  • width, height, margin, padding-top, padding-bottom 적용 불가능.
  • height 대신 line-height로 높이조절가능. 대신 span태그에서는 불가능.
  • text-align 사용 가능
  • 예시 : a, b, br, button, code, em, i, img, input, kbd, label, map, object, q, samp, small, script, select, span, strong, sub, sup, textarea, tt, var

1
2
3

div {
display : inline
}

• inline-block
  위의 블럭과 인라인을 합친 것이라고 생각하면 되지만 그 특징이 조금 차이난다

  • width, height 적용 가능
  • margin, padding-top, padding-bottom 적용 가능
  • line-height 적용 가능
  • inline-block 끼리 공백 생성됨 -> 상위 div에 { font-size: 0; } 를 적용하면 해결가능.
  • inline-block 끼리 높이 불일치될수있음 -> vertical-align 값 적용하면 해결가능.

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() => 문자데이터를 실수데이터로 변경